Hello, I come once again to ask for help to the seniors, this time a big help.
I have no experience in the stack they use to create their components and style them. I want to build a dashboard that will show various states of a custom asset I created.
I’ve already found your custom components and they work for me, but I’m having trouble updating variables and objects that are arranged in the HTML created by the render() function.
everything works fine, but if I put some of aditional data in assetArray variable the map doesn’t render it.
I know this is probably the basics of the paradigm in which the platform was developed, but I would like your help to see where I am going wrong and in what direction I should go to become more proficient in this reactive paradigm.
Finally, what my dashboard will do is show different icons according to the state of some attributes. For example: one closed barrier (false) will show its closed icon, when opened it will show the respective icon. This multiplied by an undetermined number of kiosks (that’s why I need the map to create those structures according to the number of inputs)
The UI is not rendered (not calling the render() function) since LitElement does not detect changes when pushing to an array. It checks whether the state has changed, sadly not the content of the state.
To keep it simple, you could either:
Request an update manually this.requestUpdate() after you change the array.
or reinstantiate the array instead of pushing it this.assetArray = [...this.assetArray, response.data].
or modify the change detection with LitElements’ hasChanged to for example a JSON string comparison.
. Looking at your code, you can by the way leave out the @keyup="" and @click="" functions,
since @or-input-changed will do all the work on any or-mwc-input component.
Something else worth mentioning is that I’m busy with significantally improving the Insights page by adding a drag-and-drop builder to it. This makes it possible to create custom dashboards through the Manager UI, with custom widgets like yours. It’s on the OpenRemote roadmap, and a first version should be available quite soon. Don’t know whether it perfectly fits the use case but I thought it was nice to share.
This approach is of course not great but should be fine for a proof of concept.
Solving this should be nothing more than regular TypeScript code, with code that runs every X seconds.
Literally everything would work here; setTimeout(..., 5000), setInterval(), et cetera.
But back to your issue. Is perhaps this.assetArray undefined, or of a length == 0?
This may be caused by the LitElement lifecycle, where some instantiations are ran after each other.
If so, maybe try updateComplete or a different function to wait until this.assetArray is set.