Adding backend connection component to chart in runtime

Introduction

Backend Connection is one of the technical component in lumira designer.

The Backend Connection component enables the application user to select a data source during runtime by means of a data source selection dialog box.

Whats the problem :

In this blog post we will see how to use the backend component and how to add the select datasource to the chart in runtime.

What needs to be done :

Step 1 : Right click the Technical Component and select the Backend Connection component.

Step 2 : Create a unassigned data source in the Datasources.

Step 3 : Create a button in the panel and enter the below script in the onClick of the button .Also create dropdown box, chart and crosstab in the layout to which the datasource is to be assigned during run time.

 CONNECTION_1.showDataSourceBrowser();           //Shows the datasources   pertaining to the                                                                                               connection

Step 4 : Enter the below script in the On Data Source Browser Confirmed section present in the Connection_1 (Backend Connection component).

     var ds = CONNECTION_1.getSelectedDataSource();

     DS_8.assignDataSource(ds.connection, ds.type, ds.name, true);

     var e= DS_8.getDimensions();

     e.forEach(function(element, index) {

     DROPDOWN_2.addItem(element.text, element.text);

    });

Step 5 : Create a dropdown component in the panel and enter the below script as shown.The Dropdown component is used to select the required dimensions for our chart.

    var selValue=DROPDOWN_2.getSelectedValue();

    DS_8.moveDimensionToRows(selValue);  

    CHART_1.setDataSource(DS_8);                  //Assigning data source to chart and table

    CROSSTAB_1.setDataSource(DS_8);  

Output :

1. Initial Screen :

2. Datasource list dialog box is opened on the Onclick of the button. Select the datasource and select Ok.

3. Select the required dimensions for which the chart is to be displayed.

4. The final output for the selected datasource.

Conclusion :

Thus the queries(data sources) required for the charts can be added to them during runtime using the backend connection component provided in the lumira designer.

References :

1. Fhttps://help.sap.com/viewer/4f58d91f03e441b68d3187e94be27df2/2.3.2.0/en-US/163fe03e533140c59f95cd9e50565b91.html
2. The screenshots above shown are made on my own.