Blogs / VBI Products / VBX Product Extensions / Drag and Drop Components at Runtime in SAP Lumira Designer – Part 2

Drag and Drop Components at Runtime in SAP Lumira Designer – Part 2

May 17, 2019

SHARE

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.

Drag and Drop Components at Runtime in SAP Lumira Designer – Part 2

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’.

Drag and Drop Components at Runtime in SAP Lumira Designer – Part 2

Now the dashboard looks like the screenshot below with the following components:

  • VBX ColumnBar Chart
  • Native Crosstab
  • Native Chart
  • VBX Data Utility component
Drag and Drop Components at Runtime in SAP Lumira Designer – Part 2

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.

Drag and Drop Components at Runtime in SAP Lumira Designer – Part 2

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.

Drag and Drop Components at Runtime in SAP Lumira Designer – Part 2

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,

Drag and Drop Components at Runtime in SAP Lumira Designer – Part 2

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.

Drag and Drop Components at Runtime in SAP Lumira Designer – Part 2

Please reach out to us here for Visual BI’s SAP Lumira Service Offerings and learn more about Visual BI’s Self-Service BI offerings here.


Corporate HQ:
5920 Windhaven Pkwy, Plano, TX 75093

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com


Copyright © Visual BI Solutions Inc.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This!

Share this with your friends and colleagues!