Crestron Components Lib - Showcase App

Component Configuration: attributes

Component Configuration (click to expand)
{
  "attributes": {
    "id":{
      "btn1":{
        "label":"Btn1",
        "type":"warning"
      },
      "btn2":{
        "label":"Btn2",
        "shape":"oval"
      }
    },
    "component":{
      "ch5-button":{
        "label":"Default",
        "type":"info",
        "shape":"rectangle"
      }
    }
  }
}

Press the Load button to load the configuration.

Ch5 components can be preconfigured with default values for attributes and for templatevariables. The configuration can be done using Ch5Config and its methods:

  • loadConfig(config:TCh5Config) loads a new configuration and overrides the existing one.
  • setAttributeForId(elementId:string, attributeName:string, attributeValue:string) sets an attributeValue for an attributeName of the specified HTML elementId.
  • setAttributeForComponent(componentName:string, attributeName:string, attributeValue:string) sets an attributeValue for an attributeName of the specified ch5 component (componentName).
  • setTemplateVarsForId(elementId:string, tempVarsItems:any[]) sets the template variables for the ch5 component that have the specified elementId.
  • getConfig() returns the current configuration object.
  • getAttributesForId(elementId:string):TCh5ConfigAttributes returns the configrued attributes for the component that have the specified elementId.
  • getAttributesForComponent(componentName:string):TCh5ConfigAttributes returns all configured attributes for the component specified in componentName ( for example 'ch5-button').
  • getTemplateVarsForElementById(elementId:string):TCh5ConfigTemplateVars[] returns the configured template variables for the component that have the specified elementId.
  • getAttributesForElement(cr:Ch5Common):TCh5ConfigAttributes returns all configured attributes for a CH5 component.
  • getTemplateVarsForElement(cr:Ch5Common):TCh5ConfigTemplateVars[] returns all configured templatevariables for a CH5 component.


type TCh5ConfigAttributes={
    [attrName:string]: string
}
type TCh5ConfigTemplateVars={
    [varName:string]: string
}
type TCh5Config={
    "attributes": {
        "id": {
            [id:string]:TCh5ConfigAttributes
        },
        "component": {
            [component:string]:TCh5ConfigAttributes
        }
    },
    "templatevariables": {
        "id": {
            [id:string]:TCh5ConfigTemplateVars[]
        }
    }
}

Component Configuration: attributes

Load the conf-attributes-from-file scenario JSON. In order to load these attributes another scenario needs to be loaded, on the right window uncheck the "Execute JS before HTML" checkbox and click preview, then click the Load Config button below:

The following button will have the attributes defined in the components section of the config

The following button will have the attributes defined in the components section of the config and the ones defined in the id section for the id "btn1". The attributes in the id section have priority.

The following button will have the attributes defined in the components section of the config and the ones defined in the id section for the id "btn2". The attributes in the id section have priority.

The following button will have the attributes defined in the components section of the config and the ones defined in the id section for the id "btn3" (see JS tab). The attributes in the id section have priority.

<p>
    Load the conf-attributes-from-file scenario JSON. In order to load these attributes another scenario needs to be loaded,
    on the right window uncheck the "Execute JS before HTML" checkbox and click preview, then click the Load Config button below:
</p>
<ch5-button id="btn-load-component-config" label="Load config"></ch5-button>

<div class="config-attr-example">
    <p class="mt30">
        The following button will have the attributes defined in the components section of the config
    </p>
    <ch5-button></ch5-button>


    <p class="mt30">
        The following button will have the attributes defined in the components section of the config and the ones
        defined
        in the id section for the id "btn1". The attributes in the id section have priority.
    </p>
    <ch5-button id="btn1"></ch5-button>


    <p class="mt30">
        The following button will have the attributes defined in the components section of the config and the ones
        defined
        in the id section for the id "btn2". The attributes in the id section have priority.
    </p>
    <ch5-button id="btn2"></ch5-button>


    <p class="mt30">
        The following button will have the attributes defined in the components section of the config and the ones
        defined
        in the id section for the id "btn3" (see JS tab). The attributes in the id section have priority.
    </p>
    <ch5-button id="btn3"></ch5-button>
</div>