Extending the User Interface

The Cloud CMS user interface is an HTML / JavaScript application that comes pre-configured with a base application that is feature complete and out-of-the-box. It includes a ready-to-run content management and collaboration tool set for managing documents, web sites, mobile content and more.

It also makes some default assumptions about page layout, placement of buttons, availability of functionality and role-based provisioning that may or may not match your desired workflow. Chances are that it gets it mostly right. But it's also very likely that as you use Cloud CMS, you may find places where wish you could extend or adjust the configuration of screens, layouts, controls and other things.

Cloud CMS lets you extend the user interface to provide new pages, buttons, modal popups, fields, form controls, wizards, and other UI elements. It does all of this through JavaScript using AMD (Asynchronous Module Definitions). You simply create your custom JavaScript in GitHub (or any other supported source control system) and deploy it to the user interface. No server side changes required and no downtime.

Similarly, Cloud CMS lets you configure the user interface entirely via JSON. Using our client-side JSON configuration service, your custom extensions can register and override new JSON blocks to reset the order of menus, show or hide pages based on roles, turn on and off buttons based on user rights and authorities and much more. Once again, no server side changes required.

In this fashion, it is easy to get started with Cloud CMS and extend as you go. Nothing is proprietary - everything is built using JSON and JavaScript. The application is pulled together in the browser and made ready to go via AMD loaders.

Sample Add-On

All you need to build your own add-on modules is GitHub and some JavaScript / HTML skills. You can get started quickly by forking the Cloud CMS UI Sample Add-on repository on GitHub. This sample add-on works with the data set provided by the Sample Project (which is included with every free trial).

Register your Add-On

Note: To register your add-on, you must have Manager rights to your tenant. If you do not have Manager rights, you will either need to delegate the responsibility to someone who does or ask to be granted Manager rights by the person who set up your tenant.

Log in to your Cloud CMS tenant. Go to on Platform Settings and then select Modules from the submenu. You shouldn't see any modules listed if you haven't done this before.

Click on Register New Module. A dialog will appear like this:

Enter the required fields. The ID should match the ID of your module within source control. Provide the GitHub (or BitBucket) URL for your module source code. If your module lives under a directory within the root of the checkout, you can provide that path as well. Finally, provide a branch ID if you would like to have your code checked out from a branch other than master.

For the Sample Add-On, we would do something like this:

Then click on Register. You will then see your add-on module listed.

Select your Add-on from the list and click on Deploy.

Cloud CMS, in all of its courtesy, will ask if you're sure you want to deploy the module.

Click Deploy to confirm. Your source code will be checked out and deployed to the Cloud CMS user interface.

The Cloud CMS user interface will reload and your AMD module will be loaded after the main Cloud CMS modules are loaded. As such, your AMD module has the ability to extend and override any configuration or components on the page, ahead of them being rendered.

Checking network traffic, you should see your AMD module load. If there are any issues while loading your module, these will appear in the browser's console along with an explanation of what failed. If there are no problems, your module's config and JavaScript source will effectively merge with the main user interface, appending and overriding the existing configuration wherever necessary.

The modules list will now show that your module is deployed.

Now click in a Project. You will see a new menu option on the left-hand side called Products:

Clicking on Products page will bring up a list of the catalog:product instances in your Sample Project.

Additional Modules

Additional sample modules are available within the Cloud CMS SDK.

Use these as a basis for building out your own custom modules.