Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Karol-K
Advisor
Advisor

This is a blog how you can use the Design Studio SDK: Component Manager (for dynamic component access) in order to dynamically access components and data sources by name and type.

The Usecase

In many cases, you just have some areas, which are build together from standard components and you want to have dynamic access to the areas.

You need to include the component Design Studio SDK: Component Manager (for dynamic component access).

The Examples

1. copy dynamically filter to all unknown data sources

I have following case, I have a filter panel and want to distribute the filters to different data sources in online composition. The problem is, using split cell container the names of the data sources are unknown, so you cannot code on something what is not existing. Now, we can make this - like in this sample script:


var dataSources = COMPOSE_COMPONENTMANAGER.listAllDataSources();



// full copy, we want to avoid


//dataSources.forEach(function(ds, index) {


//  if(ds.name != "DS_MASTER") {


//   var datasource = COMPOSE_COMPONENTMANAGER.getDataSourceByName(ds.name);


//   datasource.copyFilters(DS_MASTER);


//  }


//});



var dimensions = DS_MASTER.getDimensions();



dataSources.forEach(function(ds, index) {


  if(ds.name != "DS_MASTER") {


  var datasourceTarget = COMPOSE_COMPONENTMANAGER.getDataSourceByName(ds.name);


  dimensions.forEach(function(dimension, index) {


      var name = dimension.name;


      var filterCurrent = DS_MASTER.getFilterExt(dimension);


      var filterPrevious = COMPOSE_COLLECTION_FILTERS.getLabelByKey(name);



      if(filterCurrent != filterPrevious) {


         datasourceTarget.setFilterExt(dimension, filterCurrent);


      }


  });


  }


});








(this will used in the v2 of online composition application, V1 is here Community SDK: First Functional Application with SDK Components (Online Composition))

2. Find all Buttons with suffix "TOP" and apply some scripts on it.


var output = COMPONENTMANAGER_1.listAllComponents("", "TOP");



var components = "";


output.forEach(function(element, index) {


  components = components + element.name + ", " + element.type + ", " + element.component.getWidth() + "\r\n";



  var button = COMPONENTMANAGER_1.returnAsButton(element.component);



  button.setText("changed!");


});



TEXTAREA_1.setValue(components);








(part of the attached example)

3. Have dynamic prefix (which can be changed) and want to get a component using its name.


var prefixDynamic = "KAR";




var inputComponent = COMPONENTMANAGER_1.getComponentByName(prefixDynamic + "ACCORDION_LOAD");




var acc = COMPONENTMANAGER_1.returnAsScnAccordion (inputComponent);


acc.addElement("KAROL", "Karol", "", "S1");








4. Group some components or data sources together and have always access to the group.


// grouping part


COMPONENTMANAGER_1.addComponentToGroup("BUTTONS", "BUTTON_1");


COMPONENTMANAGER_1.addComponentToGroup("BUTTONS", "BUTTON_4");









// access part


var components = COMPONENTMANAGER_1.getComponentsFromGroup("BUTTONS");



components.forEach(function(element, index) {


  var name = element.name;



  var component = COMPONENTMANAGER_1.getComponentByName(name);


  var button = COMPONENTMANAGER_1.returnAsButton(component);



  button.setWidth(400);


});








5. List all Panels (or concrete - all components which have "PANEL" in its name)


var output = COMPONENTMANAGER_1.listAllComponentsWithType("PANEL");




var components = "";


output.forEach(function(element, index) {


  components = components + element.name + ", " + element.type + ", " + element.component.getWidth() + "\r\n";


});




TEXTAREA_1.setValue(components);








and many others...

Take a try,also on the methods...

The examples.

Pick up the application with examples from here: applications/SDK_COMP_MANAGER at master · org-scn-design-studio-community/applications · GitHub

The Key Point

The names of the components are very "critical" in Design Studio - those must be unique and ideally are also descriptive - and ideally not too long.

Why?

  • descriptive, because you will very often search for something, or you will try to group the objects - eg for sue in the scripts above.
  • not too long - try to keep them in max 30-40 characters length. Reason is that the names are used as base for addresses in commands, ids in html generation and are listed in all request-response cycles (of course with delta not all components data are send all the time)

The example app will be uploaded in the apprepository, uder org-scn-design-studio-community/applications · GitHub

UPDATE 02.2015:

For practical usage in real app, see the blog: My Way to Second Functional (Dynamic) Online Composition Application

6 Comments