Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/gitana/cloudcms-ui-sample-addon

A sample add-on AMD module for the Cloud CMS user interface
https://github.com/gitana/cloudcms-ui-sample-addon

Last synced: about 1 year ago
JSON representation

A sample add-on AMD module for the Cloud CMS user interface

Awesome Lists containing this project

README 

          
# Cloud CMS UI Sample Addon



**Updated for Version 3.2**



This GitHub repository provides a sample UI extension for the Cloud CMS user interface.  UI extensions consists of

JavaScript, CSS and HTML templates that are bundled together as a module and deployed to your tenant.  Once deployed,

the module is served alongside the rest of the Cloud CMS user interface.



The content defintions used by this sample are available in Cloud CMS when using the "Sample Web Project" project.

Create a new project and select "Sample Web Project".



Modules are able to do the following:



- introduce new user interface components

- override configuration and behaviors of existing user interface components

- change labels and placement of buttons

- add new form fields or modify existing form fields

- bind in new actions, modals and wizards



All of the module code itself is available in the /sample directory.  The /data directory holds some sample data

this is used by one of the sample fields but it isn't required.



## What's Included



The following examples are included:



### Create Sample Space Action



This action provides a form that lets a user type in a name.  A folder is then created in the current directory with

that name.  A default folder structure is built out.  This effectively lets you build out templated structures

with only a single click.



The action code is here:

    /sample/actions/sample/create-sample-space.js



The action is configured into the documents list page here:

    /sample/config/sample/blocks/default/documents-list-buttons/folder.json



### Catalog / Products Page



This is an example of a custom page that appears in the left-hand menu.  It is a standalone page that you can do

anything you'd like with.  In this case, we show a list of products and allow the media for the products to be

displayed with a click.



The products list gadget code is here:

    /sample/gadgets/sample-products-list/sample-products-list.js

    /sample/gadgets/sample-products-list/sample-products-list.css

    /sample/gadgets/sample-products-list/sample-products-list.html



The products page is configured into the framework here:

    /sample/config/sample/pages/sample-products-page/page.json (defines the page)

    /sample/config/sample/pages/sample-products-page/center.json (binds the list gadget into the page's template)



The products page is wired into the left-hand navigation here:

    /sample/config/sample/blocks/default/context/project.json



### Random Product Dashlet



One of the things you'll often want to do is introduce a new dashlet into dashboard pages.  This is a custom dashlet

which displays a random product from the catalog.



The dashlet gadget code is here:

    /sample/gadgets/sample-random-product-dashlet/sample-random-product-dashlet.js

    /sample/gadgets/sample-random-product-dashlet/sample-random-product-dashlet.css

    /sample/gadgets/sample-random-product-dashlet/sample-random-product-dashlet.html



The dashlet is wired into the project dashboard here:

    /sample/config/sample/blocks/default/dashboards/project.json



### Custom Document Properties



This is an example of overriding the document properties section of the document overview page.  This is the section

that lists properties.  In this case, we want to special handle one of the properties to make it clickable so that we

are taken somewhere.



The gadget code is here:

    /sample/gadgets/sample-product-document-properties/sample-product-document-properties.js



The document page template region is overridden to use our gadget here:

    /sample/config/sample/blocks/default/regions/document-properties.json



### Hiding Document Actions based on Roles



This is an example of changing the availability of UI functionality based on role-based priviledges.  In this case,

we hide the "Touch Document" action for users who have the CONSUMER, CONTRIBUTOR, COLLABORATOR or EDITOR roles against

the viewed document.



The configuration code is here:

    /sample/config/sample/blocks/default/document-actions/actions.json



### Hiding Document sub-pages based on Roles



You can also show or hide navigation elements as well as sub-navigation elements based on the current user's role

against the currently viewed document.  In this case, we hide the Document's JSON viewer page for anyone who has

the CONSUMER, CONTRIBUTOR, COLLABORATOR or EDITOR role against the viewed document.



The configuration code is here:

    /sample/config/sample/blocks/default/subcontext/document.json



### Sample City Picker Form Field



This is a custom Alpaca form field that loads it's data from the /data/cities.json file and provides a dropdown

selection list.  To use it, just specify the form option type of "sample-city-picker".



The Alpaca code is here:

    /sample/fields/sample-city-picker.js



### Sample Content Picker Form Field



This is a custom Alpaca form field that loads it's data from a Cloud CMS query.  It provides a dropdown selection

list of content items of type "catalog:product".



The Alpaca code is here:

    /sample/fields/sample-content-picker.js



## Deploying to Cloud CMS



To deploy to the Cloud CMS user interface, please take a look at the instructions provided here:

https://gitana.io/documentation/gitana/4.0/ui/modules.html



## Building for Production



You may optionally wish to build for production.  A production build consists of an optimized and minified index.js with its dependencies included.



To build, make sure Node.js is installed, and then, from a command line, do the following:



3.  Run '''npm install'''

4.  Run '''npm run build'''



Once finished, your build should be in /dist. Be sure to set your source path to /dist when registering your module.



## How do I get help?



For help with these UI extensions, please contact support@gitana.io