Dynamically generate widgets/components

2
Hi there, We would like to add a dashboard page to our application. The layout should be configurable (somewhat like this). Additionally, the user should be able to select from a list of widgets what should be displayed within the layout components (e.g. Pie-Chart, List or Table)... at runtime. The layout itself shouldn’t be the problem as long as it can be serialized and restored on-load. But I’m not sure how to generate the widgets the user selected. Also, even if I’m able to generate them, how do I get the data to and from them? The best solution would be if the user could select widgets which already exist (e.g. ListView or Area-Chart). This would make it a lot easier for us because we wouldn’t have to program the frontend logic for all the different widgets ourself.  I imagine the flow as follows: Load Page with custom Dashboard widget Dashboard widget retrieves configuration for layout and layout components (e.g. via microflow) Dasboard widget initializes the other components and renders them to the page according to the layout All the dynamically loaded components should be configured using the initial configuration; then retrieve the data they need themself from the database   I was looking through the forum and found these two (1, 2) questions related to dynamic generation, but they don’t have an answer. We will be developing this dashboard widget anyhow I guess, so if we would have to dig deep into some Java code for example, that wouldn’t be a problem. One idea I had was to use a template grid with an abstract datamodel entity “Component” (or similar) with some custom implementations to be able to render the stock widgets as needed. The problem is how to populate those widgets; e.g. the Line-Chart component has a lot of configurations regarding x- and y-axis labels, value sets, colors and more, those values cannot be mapped directly to database values. Maybe there is an approach with MxReflection? The only way I currently see is to program the dashboard widget like mentioned above and then generate each widget ‘by hand’ using javascript clientside.   Thoughts? Any help appreciated!   (I cannot select the correct Mendix version we’re using. Should be 8.2.2)
asked
1 answers
1

Hi Tobias,

 

a long time ago (Mendix 5) I developed a similar feature based on your idea of using a generic “Component” entity. Back then I think we customized the FormLoader widget to allow loading a page based on an attribute of the entity (using mx.ui.OpenForm() as part of the Mendix Client API). Each page had a different layout with different widgets, and the user had a configured list of "Component” objects linked to their account to show a personal dashboard.

 

If I would develop something like that now I would probably try to go for a list view based on the generic “Component” entity with different specializations for each type of dashboard layout, allowing you to alter the display based on the templates feature within listviews (see screenshot) . This would be a pure Mendix solution without the need for custom widgets, and using custom listview styling (e.g. flexbox) you can pull a lot of tricks on manipulating the size and display of each specific dashboard item.

 

Your configuration would be part of the generic “Component” class, and each type of dashboard item can contain any needed other properties from its specialization in order to render their widgets.

 

 

Hope this makes some sense and answers your question, or at least sends you in the right direction!

answered