In the previous blog, we discussed how to Drag and Drop Components at Runtime in SAP Lumira Designer. In SAP Design Studio 1.6 and versions prior to it, users could leverage the ‘Online Composition’ feature to create dynamic dashboard layouts on the fly. But the ‘Online Composition’ feature has been deprecated since Lumira Designer 2.0. This blog demonstrates how users can generate container components with drag and drop capabilities at run time, providing them with a near-Self-Service BI experience.
1. Usage of ‘COMPONENTS’
SAP Lumira Designer provides a ‘Technical Component’ called ‘COMPONENT’ that can be used to create components on the fly. We can use this to generate our container components that can hold the dragged visualizations.
Create a dashboard with the required charts / visualizations and add a ‘COMPONENT’ from ‘Technical Components’.
Now the dashboard looks like the screenshot below with the following components:
- VBX ColumnBar Chart
- Native Crosstab
- Native Chart
- VBX Data Utility component
2. Creating Dynamic Panels
Add a button to dynamically create a new panel for each user click. Write the script below to create panel of desired height and width.
On the click of this button, a new panel is created into which the draggable components can be dropped. Each row can have 2 panels (in our scenario) and they wrap down to a new row for better viewability.
3. Assignment of dynamic attribute
To bind the functions to the events, the ID of the container panels is a prerequisite. In Lumira, the ID of the panels generated using the COMPONENT Technical Component are automatically named as PANEL_n_panel1, where nincrements for each panel are generated. Therefore, the number of panels generated must be tracked each time a panel is added, which can be later used to assign attributes to the panels. We can use the DSXSetCode() function of the script box as shown below to use the value from Lumira in the script box code,
Now we should be dynamically binding the functions mentioned in the previous blog to the newly created panels. PANEL_”+div_input+”_panel1 gives the ID that is generated during run-time for the components for which the ‘ondrop’ and ‘ondragover’ attributes are added and the respective functions are bound.
Self-Service BI experience
Users can now have an enhanced Self-Service BI experience as they can drag and drop the components into the dashboard.
Please reach out to us here for VBX’s SAP Lumira Service Offerings.