Calling Function to Retrieve System Resources in Component JavaScript

Module Development
1

Hi everyone,

I'm currently working on an Ignition Perspective component, and I need to call a function that retrieves some system resources, like a list of tags or historical values of a specific tag, directly from within the component's JavaScript.

Here’s a simplified version of my code:

export class Something extends Component<ComponentProps<MyProps>, any> {

    render() {
        const { props: { something }, position, emit } = this.props;
        const tagList = getTagList("my provider");  // This is where I'm stuck
    }
}

I’d like to know the recommended way to:

  • Call a function to retrieve the list of tags from a specific provider.
  • Access historical values of a specific tag within the component’s JavaScript.

If anyone could provide an example or point me to relevant documentation, it would be greatly appreciated!

Thanks in advance!

2

You would use a ComponentStoreDelegate for this I believe.

Delegate Code 
export class AssetSelectorGatewayDelegate extends ComponentStoreDelegate{
  private handleUpdateAssets: React.Dispatch<React.SetStateAction<Array<Asset> | null | undefined>>
  
  constructor(componentStore: AbstractUIElementStore) {
    super(componentStore);
}

  init(updateAssets:React.Dispatch<React.SetStateAction<Array<Asset> | null | undefined>>):void{
    this.handleUpdateAssets = updateAssets;
  }
  handleEvent(eventName: string, eventObject: JsObject): void {
    if(eventName === "assetReturn"){
      this.handleUpdateAssets((eventObject.assets as Array<any>).map((e)=>(e as Asset)));
    }
  }

  fetchAssets(datasource:string){
    console.log(datasource)
    this.fireEvent("getAssets",{datasource:datasource});
    this.notify();
  }

Inside of your actual component you can access the delegate via props.strore.delegate

  React.useEffect(() => {
    (props.store.delegate! as AssetSelectorGatewayDelegate).init(setLocalAssets);
  }, []);

  React.useEffect(() => {
    if (props.props.datasource) {
      (props.store.delegate! as AssetSelectorGatewayDelegate).fetchAssets(props.props.datasource);
    }
  }, [props.props.datasource]);

Make sure to update your Meta as well

Meta 
export class AssetSelectorMeta implements ComponentMeta {
    isDeepSelectable = true;
    getComponentType(): string {
        return COMPONENT_TYPE;
    }

    // the class or React Type that this component provides
    getViewComponent(): PComponent {
        return AssetSelector;
    }

    getDefaultSize(): SizeObject {
        return ({
            width: 360,
            height: 360
        });
    }


    createDelegate(component: AbstractUIElementStore): ComponentStoreDelegate | undefined {
        return new AssetSelectorGatewayDelegate(component);
    }
    // Invoked when an update to the PropertyTree has occurred,
    // effectively mapping the state of the tree to component props.
    getPropsReducer(tree: PropertyTree): AssetSelectorProps {
        return {
          assets :tree.readArray("assets",[]),
          datasource:tree.readString("datasource",""),
          selectedAsset:tree.readObject("selectedAsset",undefined),
          titleStyle:tree.readObject("titleStyle",{}),
          refreshAssets:tree.readBoolean("refreshAssets",false)
        };
    }
}

The other option is to pass information via the prop tree from bindings made by a user. This might work better if you are wanting something more dynamic. receive an array of tagPaths or history provider paths via props.tagPaths then that would put the work on the binding rather than a possibly convoluted delegate lifecycle.

Without knowing more about what you are trying to accomplish that is all I have.