Authoring in Lumira Designer

Introduction

Authoring is a one of the technical component in lumira designer.

The Authoring technical component allows the application users to design the layout for the dashboard during runtime.

Whats the problem :

In this blog post we will see how to use the authoring and components technical component in lumira designer to adjust the charts in the runtime.

What needs to be done :

We shall create a dropdown box with pie and bar chart items wherein on the click of the chart, the chart is created in the authoring area layout dynamically using the Components component.Also we will create a layout such that on click of a button authoring area property is enabled thereby adjusting the layout of chart in runtime .

Authoring technical component provides authoring area property with which the components present inside the area can be adjusted during runtime.

Step 1 : Right click the Technical Component and select the Authoring component.Similarly right click the Technical Component and select the Components component as well.

Step 2 : Create a button in the panel and enter the below script in the onClick of the button. In the onclick of button the enabling of authoring property is done.

if(AUTHORING.isAuthoringEnabled()) {

AUTHORING.setAuthoringEnabled(false);

ICON_AUTHORING.setIconUri(“sap-icon://sys-enter”); //Changing the icon
BUTTON_1.setText(‘View’);

}

else {

AUTHORING.setAuthoringEnabled(true);

ICON_AUTHORING.setIconUri(“sap-icon://edit”); //Changing the icon
BUTTON_1.setText(‘Edit’);
AUTHORING.setAuthoringArea(PANEL_5);

}

Step 3 : Similarly create a dropdown box in which we shall add two charts(bar and pie chart) and enter the below script on the onselect on dropdown box and add a sample data source to the chart as shown in the script.

if(DROPDOWN_1.getSelectedValue() == ‘PieChart’) {

Chart = COMPONENTS.createComponent(ComponentType.com_sap_ip_bi_VizFrame,PANEL_5) ;
Chart.setType(ChartDisplayType.PIE);
Chart.setDataSource(DS_1);

}

else {

Chart = COMPONENTS.createComponent(ComponentType.com_sap_ip_bi_VizFrame,PANEL_5) ;
Chart.setType(ChartDisplayType.BAR);
Chart.setDataSource(DS_1);
}

Also in the onStartUp function write the below code.

AUTHORING.setAuthoringEnabled(false);

Output :

Conclusion :

Using the Authoring and Components technical component the dashboard layout design is created in the runtime.

Reference :

1.https://help.sap.com/viewer/4f58d91f03e441b68d3187e94be27df2/2.3.2.0/en-US/7d57e8547da140c8907a7280f9f7dfca.html