Pluggable Widget Only an ObjectItem can be passed to a template issue

1
Hi,  I’m working on a pluggable widget. The goal is to receive some data via a datasource property, then based on the result fetch some more and then display the result of the 2nd retrieves based on a contents type property template. I have the following properties defined: <property key="data" type="datasource" isList="true" required="true"> <caption>Data source</caption> <description /> </property> <property key="tempsubdata" type="datasource" isList="true" required="true"> <caption>Sample Child-Entity source</caption> <description /> </property> <property key="subcontent" type="widgets" required="true" dataSource="tempsubdata"> <caption>Content 2</caption> <description>Content for sub data</description> </property> data: the main data tempsubdata: a ‘fake’ datasource used for the ‘subcontent’ property subcontent: the actual template used to render the items of the subdata   in the studio pro it looks like this:   the flow is like this: I receive the data from the ‘data’ property foreach result I perform a ‘mx.data.create’ followed by a ‘mx.data.action’ to pass the result item as a parameter to a microflow in order to retrieve the sub data for that specific item map the subdata using the ‘subcontent’ property factory   Step 1+2 work, but I can’t seem to get step 3 to work see:   The error states: “Only an ObjectItem can be passed to a template”. For me, the subdata items look like objects.   The documentation mentions something for the ‘widgets’ type properties: it is passed as a function that expects an ObjectItem and returns a ReactNode: (item: ObjectItem) => ReactNode   I did some more research and found a documentation on github. By this, the ObjectItem is just an interface having one field named ‘id’. I tried to create an object matching this interface given the data, but this didn’t work either.   So, what exactly is an ObjectItem then? How can I create one from my returned sub-data objects? What exactly am I doing wrong?   Thanks for you help! - Tobias
asked
1 answers
1

Hey, so I was able to make it work the following way:

In the code of the factory I found the following minified code snipped:

function D(e) {
    if ("object" != typeof e || null == e || !(T in e))
        throw new Error("Only an ObjectItem can be passed to a template.");
    return e[T]
}

where T is ‘Symbol(mxObject)’. The condition which failed was the exactly this one with the Symbol as property. Since you cannot fake these Symbols (they are always unique) I needed to retrieve the original Symbol which got used.

I added a field to the widget state named ‘symbol’:

this.state = {
    loadedSubdata: false,
    data: [],
    symbol: null
}

I then set its value to the first symbol I received from the first datasource property, like so:

const isAvailable = this.props.parent.data.status === 'available';
if (isAvailable && !this.state.loadedSubdata) {
    this.state.loadedSubdata = true;
    console.log('loading subdata');
    this.props.parent.data.items.forEach(i => {
        if (!this.state.symbol) {
            this.state.symbol = Object.getOwnPropertySymbols(i)[0];
        }
		...
        this.getData(obj);
    });
}

Once I receieved the subdata I then was able to mimik an ObjectItem by creating an object with the same structure:

let columns = i.subdata.map(s => {
    const subObj = {
        id: s._guid,
    };
    subObj[this.state.symbol] = s;
    return factory(subObj);
});

This worked! :)

 

I hope this helps someone

- Tobias

answered