App Configuration Format

You can find additional information about custom app settings here Supported customization options.

GIS Cloud JSON App Configuration File is used to configure the GIS Cloud App UI layout. App UI layout consists of the following basic

Elements

scripts – set a list of JavaScript files that will be loaded automatically
styles – set a list of CSS files that will be loaded automatically
images – set a list of image files that will be available for use in the app
sections – there are 4 main section: top, left, main(or central) and right
panels – each section have one or more panel(s)
modules
elements – every visible element like ribbon menu, ribbon toolbar, ribbon seperator, buttons, quick search etc.

Basic structure

{
"scripts": {
    "namespace": "my_app",
    "app" : [RelativePaths:Array],   // paths relative to the user base folder, e.g. my_script.js
    "init" : [RelativePaths:Array],  // paths relative to the user base folder, e.g. my_install_script.js
    "setup" : [RelativePaths:Array], // paths relative to the user base folder, e.g. my_setup_script.js
},
"styles": [RelativePaths:Array],  // same as "scripts" attribute but for CSS files, e.g. my_style.css
"images": [RelativePaths:Array],  // same as "scripts" but for image files, e.g. my_image.png
"sections": {
    "top": {
        "ribbonmenu": {
              "default_tab": "{{default_tab}}",
              "tabs": [GC_TAB_ELEMENT, ...]
          },
         "elements": {} // not fully implemented yet
      },
    "main":  {}, // not fully implemented yet
    "left":  {}, // not fully implemented yet
    "right": {}, // not fully implemented yet
    }
}

GC_TAB_ELEMENT definition

{
   "label": "Label:String",    // Tab label
   "label_i18n": "Label:String",    // _i18n prefix is used to specify key from the language file
   "type": "hometab",   // At the moment in the GC_TAB_ELEMENT only "hometab" type can be specified while all other types will be ignored
   "id": "HTML_ELEMENT_ID:String",
   "icon_class": "CSS_CLASS", // e.g. 'gc-ribbon-16 gc-ribbon-maps'    gc-ribbon-16 class defines size of the icon and gc-ribbon-maps icon image
   "style": "CSS_STYLE", // it can be used to override default CSS styles, e.g. width:100px
   "scope": [Array of GC_SCOPE strings], // element/section visibility, e.g. ["PUBLIC", "LOGGED_IN"]
   "elements": [
      GC_BUTTON_ELEMENT, ... // See below for more details
   ]
}

GC_SCOPE

PUBLIC element will be visible when a user is not logged in
LOGGED_IN element will be visible only when a user is logged in

GC_ELEMENT definition

There are 2 types of the GC_ELEMENTS:

predefined element – they only require specifying “type” attribute
custom element – they require full attribute definition, see below “Custom Element” section

Predefined Element

{
    "type": GC_ELEMENT_TYPE:String  // For the full list of the supported GC_ELEMENT_TYPEs see below
}

Custom Element

{
    "type": "BTN32_CUSTOM", // Always BTN32_CUSTOM
    "label": "Say Hello", // Button label
    "label_i18n": "Say Hello", // Button label in 118n
    "icon_style": "background-image:url(ICON_URL:String)", // CSS styles
    "onclick": "helloWorld()", // javascript onclick handler
    "scope": ["PUBLIC", "LOGGED_IN"]  // GC_SCOPE - element visibility
}

Full list of the predefined GC_ELEMENT_TYPEs

Various elements

HOME_TAB_MAPS_MENU 
RIBBON_SEPARATOR
QUICK_SEARCH
 
// Buttons GC_BUTTON_ELEMENT 16px, 24px, 32px
 
// 32px button size
BTN32_CUSTOM
BTN32_MAP_NEW
BTN32_MAP_PROPERTIES
BTN32_MAP_REFRESH
BTN32_MAP_EXPORT
BTN32_SHARE_AND_PUBLISH
BTN32_LAYER_ADD
BTN32_LAYER_EDIT
BTN32_LAYER_IMPORT
BTN32_LAYER_EXPORT
BTN32_LAYER_VEHICLE_TRACKING
BTN32_FEATURE_ADD
BTN32_FEATURE_EDIT
BTN32_SPATIAL_SELECTION
BTN32_SELECTION_TO_NEW_LAYER
BTN32_FILE_MANAGER
BTN32_DATABASE_MANAGER
BTN32_PROJECTION_WIZARD
BTN32_MERGE_WIZARD
BTN32_GEOCODER
BTN32_ADMINISTRATION
 
// 16px button size
BTN16_MAP_DUPLICATE
BTN16_MAP_DELETE
BTN16_LAYER_DUPLICATE
BTN16_LAYER_DELETE
BTN16_LAYER_CREATE
BTN16_LAYER_MOBILE_CREATE
BTN16_LAYER_ZOOM_TO
BTN16_LAYER_SELECT_ALL
BTN16_EDIT_SAVE
BTN16_EDIT_CANCEL
BTN16_EDIT_CROP
BTN16_FEATURE_DELETE_SELECTION
BTN16_SELECTION_INVERT
BTN16_SELECTION_CLEAR
BTN16_ANALYSIS_AREA
BTN16_ANALYSIS_INTERSECT
BTN16_ANALYSIS_RADIUS_COVERAGE
BTN16_ANALYSIS_BUFFER
BTN16_ANALYSIS_HOTSPOT
 
// 24px button size
BTN24_MAP_CREATE
BTN24_UPLOAD_DATA
BTN24_GET_API_KEY
BTN24_USER_MANUAL

Examples

Part of the JSON app definition

{
"scripts": {
  "namespace": "my_app",
  "app": ["my_app.js"],
  "init": [],
  "setup": []
},
"sections": {
    "top": {
        "ribbonmenu": {
         "default_tab": "{{default_tab}}",
         "tabs": [
                    {
                    "label_i18n": "Home",
                    "type": "hometab",
                    "id": "home_tab",
                    "icon_class": "gc-ribbon-16 gc-ribbon-maps",
                    "style": "width:70px",
                    "scope": ["PUBLIC", "LOGGED_IN"],
                    "elements": [
                                       {
                                        "type": "BTN24_MAP_CREATE"
                                       },
                                       ...
                     ]
                   },
                   {
                          "label_i18n": "Map",
                          "id": "map_tab",
                          "scope": ["PUBLIC", "LOGGED_IN"],
                          "elements": [
                              {
                                  "type": "RIBBON_TOOLBOX",
                                  "class": "first",
                                  "scope": ["PUBLIC", "LOGGED_IN"],
                                  "elements": [
                                      {
                                          "type": "BTN32_MAP_NEW"
                                      },
                                      {
                                          "type": "BTN32_MAP_PROPERTIES"
                                      },
                                      {
                                          "type": "BTN32_MAP_REFRESH"
                                      }
                                  ]
                              },
// ...

GIS Cloud Docs