Component communication

Members

(constant) Classic communication scenarios between components

Two common component-to-component communication scenarios:

  1. When switching component A's current value (e.g., a select), other components (e.g., an image) update accordingly.
  2. When a variable (signal, RAPID variable, or web data) changes, component A's options change and another component (e.g., an image) also updates.

Recommended approach for these scenarios:

  1. Create a variable (signal, RAPID variable, or web data) and bind component A to it.
  2. In component B's onMounted event, listen for changes to that variable and update component B inside the callback.

ComponentCommunication_solution

Example: To link a select component with an image component using a RAPID variable:

  1. Bind the select component to the RAPID variable and configure its options. ComponentCommunication_select

  2. Select the image component, switch to Behavior, and in the onMounted event dropdown choose "Monitor RAPID variable".

  3. In the dialog, update the RAPID variable details you defined and add the desired action code in the callback:

Example
setTimeout(async()=>{
            API.VARIABLEMONITOR.monitorVariable(
                {type:"num", task:"T_ROB1", module:"MainModule", name:"n1"}, // To use the RAPID variable you defined
                (v) => {
                    // To add your action here. It will be called when the value is changed.
                    this.imgSrc = "/fileservice/$HOME/WebApps/Images_AS/" + v + ".png";
                }
            )
        },0)