Let's bring a bit of dynamic into the Application development with Design Studio!
If you ever wanted to...
- dynamically access the components,
- get list of available components in the application
- get list of data sources
- get component instance by giving its name (which you can simply concatenate together)
- group some components together
- loop on the components' groups
- cast generic component to specific one (you need to know the type!)
then this component is for you ;-)
This document describes the technical details, here is the separated blog on usage Make your Application Dynamic!.
Background
There were some discussions and requests for dynamic work with components, like Iterate over componets of an analysis or question from Mustafa Bensanat Responsive Layout with Flow Layouter SDK. The topics was already asked by some customers / consultants even earlier.
Technical Background
In every script you can access the components by simply giving its NAME, so the script itself knows the components. The components are known in the script execution engine (which is capable of execution of almost any Java Script code) in so called global scope. Design Studio in current release (1.4) does not provide standard function to get list of the components, but with small SDK code (see repo) this can be done.
Get List of Components ZTL Workflow
First, we have to get a list of elements in the global scope. As I had no clue on how to make this, short search in google leads to .. How can I add an object property to the global object in rhino javascript - Stack Overflow. This is how the first internal method has been done.
void internal_assureGlobalAccess () {*
if(this.getGlobal == undefined) {
this.getGlobal = function () {
return (function() {
return this;
}).call(null);
}
}
*}
Second, having the global access we need to loop on the content (all static fields, like Bookmark; constants, and of course components and data providers. The only point is, actually would be good that a component has method "getType()" and "getName()" which would make the code easier. But as this is not possible, and we know functions which are available on component and data source we can easily filter out.
I know that components have the method "getWidth" and data sources have "assiggnDataSource", so the checks are now simple:
if(something.getWidth != undefined) -> component
if(something.assignDataSource != undefined) -> data source
and by this, the only problem which stays - is what is the type of this component, but here we can go with programmatic solution - the type must be recognized from the name, eg. every button has "BUTTON" in name, or "SFIORIBUTTON" for Scn Fiori Button.
Third state is to bring the components into lists (there are now special Arrays for components) and as the array is still containing Component object- you need to know the type and cast separately, there are many functions for casting available..
returnAsScnCheckBoxGroup (Component component)
and finally you can apply your method on the casted component.
the list function gives the option to get all components (then you will not get the type on it or you can directly request components of same type - but type in sense of "it is contained in name".
listAllComponentsWithType (String componentType, optional String prefix, optional String suffix)
You can place prefix and suffix for a quick filtering... Its optional, but nice.
Any other Functions
Yes, sure, there is a "grouping" function where you can simply assign some components to groups, of course you need also here be type-aware.
What's next?
I hope that in next release there will be better API to work dynamically with components, eg at least get the name and especially type, then the casting will be easier.
Help / API Specification
Go directly to the help site and find the component: http://org-scn-design-studio-community.github.io/sdkinstall/web/components/index.html
Download & Use
This component is available on the community package, as in SCN Design Studio SDK Development Community
Example as ZIP:
Release Client Information & Flow Layouter · org-scn-design-studio-community/applications · GitHub
Any thoughts?
feel free to add as usual...