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

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Mike Howles

    Hi Karol,

    This is a pretty interesting approach similar to my old Java UI days of crawling the UI for different UI components to do whatever with 🙂

    I guess what made this more difficult for you was the Rhino/BIAL layer not making Casting available and no concept of Inheritance for generic acceptance of any Component “Type”.

    I like your workaround in cast.ztl_part in your source code 🙂   It seems to be a good way around that issue.

    I wonder if there would be an easier way in Rhino layer to use some sort of introspection/inspection technique via the Global path to identify what type of Component this is aside from relying on naming conventions…

    (0) 
    1. Mike Howles

      Hey how about adding a ZTL Method like this to somewhat address the Component Type identification?

      /**

        * Identify Component Type

        */

        String identify(Component inputComponent) {*

        this.internal_assureGlobalAccess();

        var type = “Unknown”;

        if(inputComponent.getOwner){

        var owner = inputComponent.getOwner();

        if(owner.getItemType) type = owner.getItemType();

        }

        return type;

        *}

      Then in DS you can do a BIAL snippet like this:

      /wp-content/uploads/2015/01/identify_630879.png

      (0) 
      1. Karol Kalisz Post author

        Hi Mike,

        you’re right – this code works, I have introduced the method “identifyType (Component component)” and also made the type recognition in the list methods. I cut the “_COMPONENT” in case of standard components.

        updated version will be live in 10 mins.

        Karol

        (0) 
  2. Patrick Godwin

    Hi Karol,

    Awesome component, saves a lot of code (as with all the other utility components)!

    I am using DS1.4 SP0 Patch 2 and I am having issues with method getComponentsFromGroup. When I attempt to call it during run time I get a generic script error. This happens with the sample application you have provided as well.

    It might be that this component is only compatible with DS1.3, but I really don’t want to give up on DS1.4 (global scripts… can’t live with out them now).

    Cheers, Pat

    (0) 

Leave a Reply