KIT componenets - Background propieties external

AppStudio
1

Good morning, how can I externalize the background property of a component kit when a digital signal changes?
I’d like to change the background of a button created as a component kit when a digital signal changes.

Thank you very much.

2

Hello,

To control the style or properties of a component in the Custom Component Kit, you can use the “Add Property” feature in AppStudio. It lets you expose a subcomponent’s properties as properties of the custom component.

image
image756×526 61.6 KB

Create a custom component with “Add Property”

  1. Click the blank area within the custom component designer layout to active the “Add Property” button in the appearance panel.

image
image643×386 15.9 KB

  1. Bind the button background color be the custom component property.

image
image679×700 27.3 KB

  1. Name: The name of the property exposed by the custom component.
  2. Description: Help text that explains the property. It appears in the Properties panel when the custom component is selected or used.
  3. Interaction definition: Defines the type and interaction behavior of the exposed property, such as text, number, boolean… …
  4. Bind with sub component: Specifies which subcomponent property the exposed custom component property is mapped to.

Using the Custom component in the project designer.

  1. Then publish the custom component kit, and you can change the sub-component background color in designer UI.

image
image843×781 63.5 KB

  1. If you want to control it programmatically, just call it directly from your custom component via this: for example: this.bt1_background_color = 'red';

setTimeout(async () => {
    API.SIGNALMONITOR.monitorSignal(
        { type: "digitalsignal", name: "ACOK", network: "EtherNetIP", device: "ABB_Scalable_IO" }, // To use the signal you defined
        (v) => {
            try {
                if (Number(v) === 0) {
                    this.bt1_background_color = 'red';
                } else {
                    this.bt1_background_color = 'yellow';
                }
            } catch (e) {
                Logger.e("Test Sub-Signal fail:", e)
            }
        }
    )
}, 0)

image
image1495×986 74.2 KB