Project Configuration File

The project configuration file drives how content is loaded into the project. The goals of this file are to severely limit or eliminate the need for a developer to modify the HTML, CSS, and JavaScript code provided by Crestron in the template.

The Project Configuration File makes the project data-driven, which makes modifications easier. For example, control navigation can be placed either on the bottom or side of the UI, or navigation can be removed entirely. Items can also be reordered easily within the navigation menu without needing to edit code in multiple locations.

A developer can edit the project-config.json in Visual Studio Code and will be able to see feedback on semantic issues in the configuration file by hovering the mouse on the error. However, this file can not determine if values are correct with relation to customer provided content.

NOTE: After any changes are made in the project-config.json file, the project must be rebuilt before the changes are reflected on a touch screen or web browser.

While running the build script (such as the build:onestep or start scripts), an invalid project configuration file would stop the script from continuing to the next step.

Schema validation cannot validate invalid entries that are not of enumerated values or ranges. For example, if the configuration file is updated to reference a component name that does not exist, schema validation can not flag that as an error. For cases like this, the console logs should report such configuration issues at the error level. As an example, the configuration file can be updated to reference a component, but the component may not exist or may be misspelled.

The list below is a partial list of data that would be in the configuration file to drive the application content.

Copy 
{ 
  "projectName": "shell-template", 
  "version": "0.0.1", 
  "faviconPath": "favicon.ico", 
  "menuOrientation": "horizontal", 
  "selectedTheme": "light-theme", 
  "useWebXPanel": true,
  "defaultLanguage": "en"
  "themes": [ 
    { 
      "name": "light-theme", 
      "brandLogo": { 
        "url": "./app/template/assets/img/ch5-logo-light.svg", 
        "alt": "Crestron Logo", 
        "receiveStateUrl": "" 
      }
    }, 
    { 
      "name": "dark-theme", 
      "brandLogo": { 
        "url": "./app/template/assets/img/ch5-logo-dark.svg", 
        "alt": "Crestron Logo", 
        "receiveStateUrl": "" 
      }
    }, 
    { 
      "name": "project-light-theme", 
      "brandLogo": { 
        "url": "./app/template/assets/img/ch5-logo-light.svg", 
        "alt": "Crestron Logo", 
        "receiveStateUrl": "" 
      }
    }, 
    { 
      "name": "project-dark-theme", 
      "brandLogo": { 
        "url": "./app/template/assets/img/ch5-logo-dark.svg", 
        "alt": "Crestron Logo", 
        "receiveStateUrl": "" 
      }
    }, 
    { 
      "name": "project-custom-theme", 
      "brandLogo": { 
        "url": "./app/template/assets/img/ch5-logo-light.svg", 
        "alt": "Crestron Logo", 
        "receiveStateUrl": "" 
      }
    } 
  ], 
  "config": { 
    "controlSystem": {} 
  }, 
  "header": { 
    "display": true, 
    "displayInfo": true, 
    "diagnostics": { 
      "logs": { 
        "logAfterProjectLoad": true, 
        "receiveStateLogDiagnostics": "", 
        "logDiagnostics": "none" 
      } 
    }, 
    "$component": "" 
  }, 
  "footer": { 
    "display": true, 
    "$component": "" 
  }, 
  "content": { 
    "$defaultView": "page1", 
    "triggerViewProperties": { 
      "gestureable": false, 
      "disableAnimation": true 
    }, 
    "pages": [ 
      { 
        "pageName": "page1", 
        "fullPath": "./app/project/components/pages/page1/", 
        "fileName": "page1.html", 
        "cachePage": false, 
        "preloadPage": false, 
        "standAloneView": false, 
        "navigation": { 
          "sequence": 1, 
          "label": "menu.page1", 
          "isI18nLabel": true, 
          "iconClass": "fas fa-file-alt", 
          "iconUrl": "", 
          "iconPosition": "bottom" 
        } 
      } 
    ], 
    "widgets": [ 
      { 
        "widgetName": "pagedisplay", 
        "fullPath": "./app/project/components/widgets/pagedisplay/", 
        "fileName": "pagedisplay.html" 
      } 
    ] 
  } 
} 

NOTE: iconURL and iconClass are mutually exclusive. iconURL takes priority over iconClass if both are used.

The user can view the information of a property by hovering over it.

The user can view the list of valid properties for an object by typing quote inside any object.