Skip to content
Sitemason - Build on Us

Creating the Interface File

A custom interface is assigned to any Sitemason® Tool based on that Tool's slug or tool type, but before you make such an assignment, you'll need to define the customized interface, which is done using Javascript.  For the purposes of this example (and continuing an example from earlier sections), let's suppose you have a website (www.example.com) and you are wanting to create a staff directory using a News tool.  The first step is to create a Javascript file named "directory.js" with the following contents:

modifyLabels( {
   toolLabel: 'Directory',
   toolLabelPlural: 'Directories',
   itemLabel: 'Person',
   itemLabelPlural: 'People'
} );

This file should be uploaded to your website's file space (NOTE: see this support forum entry for information on how to log in via FTP).  It's also helpful to group all of your interface files into one folder, simply for organization.  Once you've logged into the FTP server, create a folder within the www folder called "smInterface" (the name of the folder does not matter - it can be anything you want - we chose "smInterface" since it's similar to the Boilerplate Template's directory and should have a slim chance of being needed for any other purpose). Upload your directory.js file into that folder, so the complete path would be:

/www/smInterface/directory.js

This file is publicly-accessible over the Internet, so you can easily test to make sure that it works.  It's also a good idea to use the .sitemason.com development URL, which will ensure that your custom interface works despite any DNS changes to your domain that may occur during development and the go-live process.  This would be the proper URL to use in order to ensure that your directory.js interface file was uploaded correctly:

http://www.example.com.sitemason.com/smInterface/directory.js

Assigning Custom Interfaces to Tools

The next step is to assign your newly-created interface to one or more Tools.

From within Sitemason®, tap the Developer Settings tab, then tap the Custom Interfaces tab.  The Custom Interfaces tab is where you will assign your custom interface to one or more Sitemason Tools based on a Tools' slug or the Tool's type.  First, in the URL field, enter the public URL for your interface file ("http://www.example.com.sitemason.com/smInterface/directory.js" for our example).

Next, you must link the interface to one or more Tools either by slug or by tool type.  Assigning the custom interface by slug is the proper approach when your interface applies only to specific Tools.  In this scenario, only the Tool (or Tools) whose slug(s) have been identified will receive your custom interface.  If you have written a new interface for a News tool, a new News Tool that is added to the account will not receive your custom interface without assigning its slug to the interface definition.

If, on the other hand, your interface applies to every tool of a type (every News Tool, for example), you can assign the interface by tool type and every new Tool that is added will be assigned the custom interface.

Regardless of which approach you take, once you've made the proper assignment, tap the Save button.

Whenever you make changes to a custom interface file, you will need to reload the Sitemason interface to pick up the changes. Depending on your browser settings, you may need to do a force-reload or clear your browser's cache and reload.

Open the Tool that you just assigned to your new custom interface.  If everything worked correctly, instead of Articles/Events/etc for the first tab, you should see "People" (the value for the "itemLabelPlural" setting in our example). Instead of "News Settings" or "[Tool type] Settings" as the last tab, you should see "Directory Settings" (based off of the value for "toolLabel" in the interface configuration file).  If you are not seeing the new interface in action, double check to make sure that the Tool has the proper slug or Tool type (based on how you assigned the interface) and verify that you have reloaded the Sitemason interface page or refreshed your browser cache.

Now that your interface file is linked-up and working, it's time to start modifying the panels, tabs, and settings!  The next section will introduce you to the core concepts of customizing the Sitemason interface.