Computer Magic Logo
Creating a script file

Saturday, July 18, 2015

Published by Aristotelis Pitaridis

All the script files that we edit from the Umbraco Back Office are located in the scripts subfolder of Umbraco’s root folder. In order to create a new script file we have to find the Scripts node from the Settings section.

We right click on the Scripts node and the Scripts commands will appear on the screen.

We click on the Create command and the Stylesheet Create form will appear on the screen.

The form contains 2 controls. The first is the name and the second is a drop down list which allows us to select what we want to create. Let’s open the drop down list in order to see what our options are.

The first option is the Folder which allow us to create a folder in the scripts node so that we will be able to organize our scripts. The second option which is what we want is the ".js file" and allows us to create a JavaScript file. The third option is the ".xml file" which will generate an xml file. We make sure that the ".js file" option is selected.

We type the name of the script in the Name textbox. For our example we give the name MyScript and we click the Create button. The script will be created and it will appear in the nodes tree. The Back Office will open it and display its contents in the Script editor.

We can type the JavaScript that we want to have in the script file using the script editor. We just add code which will display an alert message when the user clicks on the document. 

When we finish we save the script by clicking the Save button which is located in the upper right corner of the page. A green panel will appear on the screen informing us about the successful save of the script.

Now that we created the script file let’s see how to find what is the path of the new file. At the top of the script editor we enable the properties tab.

Now we can see the name of the script which is editable. In case we change the name we have to click the save button in order to save new name. Under the name we can see the path of the file which can be used in our templates.

The path of the script is a link so we can click on it in order to see its contents.