Skip to main content
E
EnsilZah_
Inspiring
September 20, 2015
Question

Populating an HTML panel from folders

  • September 20, 2015
  • 2 replies
  • 353 views

Hi, similarly to Chris_G_1975‌ a few posts down, I'm trying to populate my HTML panel with buttons, but in my case I'm trying to use the folder structure for the panel.

My problem is mainly with being unfamiliar with HTML and Javascript, I'm quite confident with Extendscript, but plain Javascript doesn't seem to have the File and Folder objects I'm familiar

So basically what I'd like to do is:

1. Get a list of folders in a folder "scripts" that resides in the panel's source path.

2. Check each folder name to see if it contains a prefix that indicates it contains a script (eg: "NS_ScriptName" starts with "NS_" so it's a valid script )

3. Create a button such that for each forlder NS_ScriptName, it uses NS_ScriptName.png as the icon, NS_ScriptName.jsx as the script it executes and the contents of NS_ScriptName.txt as the button text.

I've figured out how to create a button from script using document.write() and how to find the location of my panel's HTML file using document.location.pathname, but I'm having trouble with the file and folder stuff, is there some sort of library I should include to regain File and Folder functionality such as .parent, .getFiles(), .name and .read()?

This topic has been closed for replies.

2 replies

E
EnsilZah_Author
Inspiring
September 29, 2015

Well, in case anyone is interested, the solution I ended up going for is not optimal, but it gets the job done.

The panel's main HTML file (index.html) runs a JSX (ReturnFolders.jsx) file that iterates over the script folders and generates a new HTML file with all the buttons (Buttons.html).

It then loads Buttons.html as a "text/html" object.

(This a bit of a problem because it usually asynchronously loads the Buttons.html file before generating it, so I have to reopen the panel twice to get the updated version)

ReturnFolders.jsx looks like this:

function main()


{


    var CurrentFolder = Folder(Folder($.fileName).parent + "/scripts")






    var FolderFiles = CurrentFolder.getFiles()


    var FolderList = new Array;






    //Only include folders that have "NS_" in the name


    for (i = 0; i < FolderFiles.length; i++)


    {


         if ((FolderFiles instanceof Folder) && (strContains(FolderFiles.name, "NS_"))) {FolderList.push(FolderFiles.name)}


    }






    var fullHTML =


    '<script src="./ext.js"></script>  \n  <script src="./lib/CSInterface-4.0.0.js"></script>  \n  <link id="ppstyle" rel="stylesheet" type="text/css" href="./styleButtons.css">  \n  <body onLoad="onLoaded()">'






    for (var i = 0; i < FolderList.length; i++)


    {


        NameOfFile = (FolderList[0] == "!")? FolderList.substring(4):FolderList;


        NameOfFolder = FolderList;






        if (NameOfFile == "NS_SPACER")  //Create Spacer


        {


            fullHTML += "\n\n" + '<p> </p><hr width="50%" size="2" noshade><p> </p>'


        }


        else    //Create Button


        {


            var scriptPath = "scripts" + "/" + NameOfFolder + "/" + NameOfFile + ".jsx";


            var scriptIcon = "scripts" + "/" + NameOfFolder + "/" + NameOfFile + ".png";


            var scriptName = readContents(File(CurrentFolder + "/" + NameOfFolder + "/" + NameOfFile + ".txt"));


            if (scriptName == "" || scriptName == null) scriptName = NameOfFile;


            


            fullHTML += "\n\n" + writeHtmlButton(scriptPath, scriptIcon, scriptName);  


        }


    }






    var outFile = File(Folder($.fileName).parent + "/Buttons.html")


    outFile.open("w");


    outFile.write(fullHTML);


    outFile.close();


}


main();






function readContents(inFile)


{


    if (!inFile.exists) return "";


    inFile.open("r");


    var name = inFile.readln();


    inFile.close();






    return name;


}






function writeHtmlButton (inScript, inIcon, inName)


{


    var outHtml = "<button class='default' id='btn_PHXS'  onClick='runJSX(\""+ inScript +"\")' style='height: 22px; width: 122px'>";


    outHtml += "\n" +  "<img src='"+ inIcon +"' alt='' align='left'/>"


    outHtml += "\n" + inName + "\n" + "</button>";


    


    return outHtml;


}






function strContains (inString, subString)


{


    return (inString.indexOf(subString) > -1);


}
Chuck Uebele
Community Expert
Chuck UebeleCommunity Expert
Community Expert
September 20, 2015

While I haven't done this, I did a little search and it seem like it may not be possible. See this link:

http://stackoverflow.com/questions/15537424/get-a-list-of-all-folders-in-directory

I thinking you might be able to do this with extenscript and send the info back to your js and html panel to create the buttons.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices