How to change the component property values from custom module SDK

Module Development
,
1

Scenario -
I’m developing a custom module using Ignition SDK, which is going to be used a perspective component.
That component takes object as input value. I’m using ReactJS to render the UI component.
Issue -
I’m trying to write back the property value from ReactJS custom component, but it is not changing the value on Ignition Designer. Please share your thought.
For e.g. The value from Ignition Designer is {“name”: “test”, “location”: “abc”}
I’m trying to change that from ReactJS component based on button click event… like
{“name”:“changed”, “location”:“new location”}

2

Check out the sdk on the git

To change props you can use PropertyTree.write()
in the meta you should have something like this

getPropsReducer(tree: PropertyTree): yourProps {
    return {
      setLocation:(text: string) => {tree.write("location",text);},
      setName:(text: string) => {tree.write("name",text);},
    };
  }

and you button onclick event can call these:
this.props.props.setName("Victor")

3

Thank you @victordcq

I’m able to change the property from SDK.

I’m referring to ignition-sdk-examples/perspective-component at master · inductiveautomation/ignition-sdk-examples · GitHub
Is this correct one?

getPropsReducer(tree: PropertyTree): any {
        return {          
            setInterval: (val: number) => { tree.write("interval", val); },
            setTagValue: (obj: any) => { tree.write("tagValue", obj); }
        };
    }
4

Yes looks good to me

1 Like