Component Configuration: attributes

{ "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 having the specified elementId
getConfig() returns the current configuration object
getAttributesForId(elementId:string):TCh5ConfigAttributes returns the configrued attributes for the component having 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 having 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[]
        }
    }
}

The following button will have the attributes defined in the components section of the config <ch5-button></ch5-button> 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. <ch5-button id="btn1"></ch5-button> 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. <ch5-button id="btn2"></ch5-button> 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. <ch5-button id="btn3"></ch5-button>

// The following JS code needs to interpreted before the one from the HTML tab CrComLib.Ch5Config.setAttributeForId('btn3','shape','tab'); CrComLib.Ch5Config.setAttributeForId('btn3','type','danger'); // to see the current configuration you can run CrComLib.Ch5Config.getConfig() in the browser console // uncomment the following code and press preview to load the configuration from an external file // NOTE: You might need to press preview multiple times since the config file might not finish loading before the component is ready // You can also run the following code in the browser console and then press Preview. /* (function(){ var requestURL='/component-configuration/conf-attributes-from-file.json'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; request.send(); request.onload = function() { var confJson = request.response; console.log(confJson); CrComLib.Ch5Config.loadConfig(confJson); } })(); */

Crestron Components Lib - Showcase App

Component Configuration: attributes

Component Configuration: attributes