studio icon indicating copy to clipboard operation
studio copied to clipboard

the usage of assignProperty in the worker-dashboard-component-context.ts

Open dong-king opened this issue 1 year ago • 2 comments

the assignPropety function is added iterators parameter.

There are basically two ways to use:

const iterators =
            flowContext.dataContext.get(FLOW_ITERATOR_INDEXES_VARIABLE) || [];
assignProperty( flowState, this, "data", value, iterators);

and

// serial.tsx
context.assignProperty(
                "connection",
                {
                    id: serialConnection.id,
                    status: serialConnection.status
                },
                undefined
            );

What is the purpose of the parameter iterators?" When should I use FLOW_ITERATOR_INDEXES_VARIABLE to get iterators and when should I use undefined directly?

dong-king avatar Jun 26 '24 08:06 dong-king

This parameter is only important for the widgets and not for the actions.

Purpose of this parameter is when List widget is used to know the current value of list iterator. List widget can iterate over given array variable and to get the position of iteration you can use $index variable in expression. For example, this is from Dashboard Widgets example, where List widget is used to display flags:

image

mvladic avatar Jun 26 '24 09:06 mvladic

Here is the usage pattern inside widgets:

override render(
    flowContext: IFlowContext,
    width: number,
    height: number
) {
    ...
    
    // store iterators 
    const iterators = flowContext.dataContext.get(FLOW_ITERATOR_INDEXES_VARIABLE) || [];
    
    ...

    return (
        ...

        <input onChange={() => {
            ...

            // use stored iterators
            assignProperty(
                flowState,
                this,
                "data",
                value,
                iterators
            );

            ...
        }}/>

        ...
    );
}

This is used for example in Checkbox widget, so you can use Checkbox inside List widget and with $index you know which boolean variable you want to attach to checkbox.

mvladic avatar Jun 26 '24 09:06 mvladic