Project Composition

A CH5 Crestron Template Project has four primary components: header, content, navigation (horizontal or vertical), and footer. The following diagram shows examples of UI layouts using horizontal and vertical navigation menus.

Project UI Layout Examples

Each component is described in more detail in the following sections.

The header is a graphical element located at the top of the UI that can contain an information button and a button to change themes.

  • The header can be shown or hidden using the display parameter. When hidden (false), the vertical navigation cannot be used, as the header is required to open the navigation.
  • The information button can be shown or hidden using the displayInfo parameter.
  • The droplet button for selecting themes during runtime can be shown or hidden using the displayTheme parameter.

To modify the header, refer to the following code in project-config.json.

Copy 
"header": { 
    "display": true, 
    "displayInfo": true,
    "displayTheme": true,
    "diagnostics": { 
        "logs": { 
            "logAfterProjectLoad": true, 
            "receiveStateLogDiagnostics": "", 
            "logDiagnostics": "none" 
        } 
    }, 
    "$component": "" 
}, 

Content

The content area contains pages that get displayed with interlocked pages from navigation “buttons” or subpage references when not interlocked in the navigation.

  • You can change if the content window is gesturable or not using gesturable parameter. If set to true, you can swipe to navigate to content instead of pressing the navigation buttons.
  • Pages are defined and displayed in the content section. When generating a page via the generate:page script, it is added to the configuration automatically.
    • Pages with a “navigation” in their JSON array are included in the navigation section.
    • Pages without a “navigation” in their JSON array are excluded in the navigation section and are available to display in the content section as a subpage reference. These pages cannot be navigated to with the navigation section or through gesture swiping in the content area.

To modify the content area, refer to the following code in project-config.json.

Copy 
"content": { 
    "$defaultView": "page1", 
    "triggerViewProperties": { 
      "gestureable": false, 
      "disableAnimation": true 
    }, 
    "pages": [ 
      { 
        "pageName": "page1", 
        "fullPath": "./app/project/components/pages/page1/", 
        "fileName": "page1.html", 
        "standAloneView": false, 
        "cachePage": false, 
        "preloadPage": false, 
        "navigation": { 
          "sequence": 1, 
          "label": "menu.page1", 
          "isI18nLabel": true, 
          "iconClass": "fas fa-file-alt", 
          "iconUrl": "", 
          "iconPosition": "bottom" 
        } 
      } 
    ], 
    "widgets": [ 
      { 
        "widgetName": "widget1", 
        "fullPath": "./app/project/components/widgets/widget1/", 
        "fileName": "widget1.html", 
      } 
    ] 
  } 
} 

The navigation pane contains controls that allow users to navigate to different pages in the project. Navigation can be set to horizontal, vertical, or none.

  • Horizontal: Displays the navigation horizontally on the bottom of the template.
  • Vertical​: Displays the navigation vertically on the left-hand side of the template. Requires the header to be enabled. Vertical navigation is minimized to the left and expanded when pressing the “hamburger” button in the header.
  • None: Navigation is not used. A typical use for this scenario may be if calling other pages within content pages or if adding specific buttons in the footer.

Attributes of the navigation buttons can be changed in the JSON as follows:

  • Order the sequence of the navigation items ("sequence": 1)​
  • Label the navigation button ("label": "page1")
  • Change the graphic (icon or image) of the button ("iconClass": "",​ "iconUrl": "./app/project/assets/img/navigation/page.svg")

    • NOTE: Icon (iconClass) and Image (iconURL) are mutually exclusive. If both have values entered, the iconURL supersedes iconClass.

  • Change the graphical placement of the button using the (none), button, first, last, or top parameters ("iconPosition": "bottom").​

To change the order of the navigation within the navigation JSON section, do not copy/paste the order; only change the "sequence": [value] parameters to reflect the desired order. Each "sequence" value must be unique and cannot repeat.

When running the validation script or when compiling the project, a warning will be displayed in the terminal window as shown below if there are duplicate sequence numbers.

Validating project-config.json......​

Warnings Found (1):​

1. Page sequence for navigation: Page 'page3' has duplicate sequence.

To modify the navigation pane, refer to the following code in project-config.json.

Copy 
"menuOrientation": "horizontal",
​
<!--Refer to the Content section above for example of the JSON.-->​

        "navigation": {​
          "sequence": 1,​
          "label": "page1",​
          "iconClass": "",​
          "iconUrl": "./app/project/assets/img/navigation/page.svg",​
          "iconPosition": "bottom"​
        }​

The footer is a graphical element located at the bottom of the UI. The footer can be shown or hidden using the display parameter.

To modify the footer, refer to the following code in project-config.json.

Copy 
  "footer": {​
    "display": false,​​
    "$component": ""​
  },