Skip to Content

MultiComboBox, variable selections and how to load sap.m into your SDK component

If you were always wondering what kind of variable selections you could use with your DesignStudio queries and how to expose that functionality without the boring standard dialog, today is your luck day. In addition to that I am going to introduce you to the shiny world of sap.m or at least give away the secret how to load the sap.m library discovered by Karol Kalisz.

sap.m.MultiComboBox

The MultiComboBox is just perfect to be used with BEx query multi selections. Most of the time you can get away with ranges but sometimes it is unavoidable to pick multiple single values. The SAP standard dialog supports all possible BEx variable options.

/wp-content/uploads/2015/10/prompt_selection_810762.png/wp-content/uploads/2015/10/prompt_range_810770.png

     Figure 1: SAP standard dialog, multi and range selection example


That approach works out of the box and handles wrong input gracefully. The only downside is that you can’t customize the selection screen except for some CSS tricks (and/or SAP themes) to adjust the look and feel by manipulating DOM elements. The classes involved use the prefix zenDialog* for example. Now what is left to do if a client tells you to adjust the variable selection screen anyway?

You build your own screen of course. After all you are the expert, right 😉 That’s where the DesignStudio selection components come into play.

  • Dropdown Box
  • Date Field
  • List Box

They support single selections and ranges. For ranges it usually makes sense to use two of them (e.g. date from and date to). It is also possible to construct more complex selection scenarios by combining several components (e.g. Dropdown + Check Box to switch variables on box checked or not) via scripting. So far so good but what about multi selections? You could think of a crazy workaround with global scripting variables and functions using standard components. But that is light-years from being easy to use and maintain. The MultiComboBox ticks all the boxes for us. Let’s take a peek into it:

MC_view.png

     Figure 2: MultiComboBox dropdown view


The UI5 MultiComboBox basically enhances a simple dropdown with checkboxes that remember your decisions and tokens that serve as visual feedback for your selections once the dropdown menu area is closed. In addition to that, you get an input area with auto-complete for the values you type in and an easy to use delete functionality either through the close button or by pressing delete/backspace on your keyboard. Awesome component isn’t it?!

Now we have all the tools to replace the SAP standard screen. You can switch it off by putting “Force Prompts on Startup” to false on the APPLICATION object (top level element of your outline tree) of your app and load your data sources in script. Otherwise, when not provided with variables, your queries will trigger the standard screen by themselves during the load phase.

How does the scripting actually work?

There are two major script functions you will need to use. They are called setVariableValue and setVariableValueExt. They are available on the APPLICATION object and on your data source aliases. This is important, if you are using the option “Merge Prompts” (check the further reading section for additional info regarding that topic). In the following I will give some examples for values to achieve various selection scenarios:

  • Single selection (internal format): Date 10/12/2015
    • DS_1.setVariableValue(“DATE”,“20151012”);
  • Single selection (external format): Date 10/12/2015
    • DS_1.setVariableValueExt(“DATE”,“10/12/2015”);

This could also be 10.12.2015 depending on your locale

  • Range selection: Company code 10US – 11US
    • DS_1.setVariableValueExt(“COMPCO”,“10US – 11US”);

Ranges always need to be applied using external variable representation. Also important are the spaces before and after the dash. If you don’t stick to the syntax your DesignStudio dashboard will crash! Same goes for wrong range declarations in terms of entry order like 11US – 10US for example.

  • Empty/All selection: Simply select all values
    • DS_1.setVariableValueExt(“COMPCO”,“”);

Empty selections always need to be applied using external variable representation. Otherwise you will get COMPCO = “#” instead, which is “not assigned”.

  • Multi selection: Select multiple company codes 10US, 11US and 13US
    • DS_1.setVariableValueExt(“COMPCO”,“10US;13US;11US”);

Multi Selections need to be applied using the external variable representation as well.

  • Complex multi selection: Select some company codes but exclude those being bigger than 13US
    • DS_1.setVariableValueExt(“05US;07US – 10US;>13US”);

Find more examples on the DS15 user documentation chapter 32.1.18.

In general all of the variables you are adjusting through scripting need to be input ready.

My MultiComboBox SDK implementation allows you to retrieve your value selection using the following methods:

  • getSelectedKey

This method returns a string containing an array of keys of the selected entries (for example [“10US”,”13US”,”11US”])

  • getSelectedText

This method returns a string containing an array of all the texts of the selected entries (for example [“SAP AG”,”SAP Pty”,”SAP Ltd.”])

  • getSelectedKeyBexReady

This method returns a string containing all the keys of the selected entries separated by a semicolon (for example “10US;13US;11US”). Due to that you can put the result into setVariableValueExt method right away.

The other return values need some additional parsing before they can be fed into the variable value methods. You could for example use the SCN community’s SDK array util component to achieve that.

Note: The strings of arrays will be replaced with Karol’s loop-able arrays as soon as I find the time to make the adjustment.

MultiComboBox properties

MC_porperties.png

     Figure 3: MultiComboBox DesignStudio properties view


You can either assign a data source using data binding (and select a specific dimension) or use my scripting method setItems. The method takes a string as argument which has to contain a JSON object holding the key value pairs. The easiest way to provide the correct structure is to use the SCN community’s SDK Collection component and method getCollectionAsJSON. Depending on the BEx query setup you might want to define some layout options. You can specify the sorting property by key or text and direction (ascending or descending), define if you want to skip result rows and texts for the default checkboxes. Those checkboxes enable the user to select/deselct all entries at once.

In addition to that two event are exposed. On every checkbox-click on the dropdown the onChange event is triggered. The selectionFinished event fires when the dropdown area closes. Unfortunately there is an UI5 bug in DesignStudio 1.5 which doesn’t register the selectionFinished event properly on IE and Firefox. Only chrome still works correctly. In order to avoid unexpected selection results I moved the selection routines to the onChange event which impacts on the user experience but ensures correct selection any time. The Bug is fixed on the newest UI5 release. Therefore I hope the MultiComboBox will be fully functional again on DesignStudio 1.6. My first DesignStudio 1.4 version however works perfectly. You can check out the old version on our deprecated rel-1.0 branch on the community repository. Find the link to our master repository at the end of this post.

I will let you know if 1.6 fixes the problem as soon as possible.

Loading sap.m

As a first start to develop a SDK component on top of sap.m you might try the following:

jQuery.sap.require(“sap.m.MultiComboBox”);

sap.m.MultiComboBox.extend(“org.scn.community.databound.MultiComboBox”, {

}


That will work to some extent. But you will soon notice, that all of the MultiComboBox events are not registered and you basically can’t use it at all. Luckily Karol Kalisz established a workaround to load sap.m into you DesignStudio SDK component properly. You can find some more in depth info to the problem here:

http://scn.sap.com/message/15769661#15769661

http://scn.sap.com/thread/3643674#15782624

Karol’s solution, which I also used for the MultiComboBox on the SCN community repository, looks as follows:

jQuery.sap.require(“sap.m.MultiComboBox”);

//mark forced re-load of sap.m events bundle 

oCfgData = window[“sap-ui-config”

// check of the library sap.m is already in declared libs (to avoid second execution) 

if(oCfgData.libs.indexOf(“sap.m”) == -1) { 

  // append the information that sap.m is loaded 

  oCfgData.libs = oCfgData.libs + “,sap.m”

  // load sap.m and sap.me 

  var oCore = sap.ui.getCore(); 

  oCore.loadLibrary(“sap.m”); 

  if(!sap.ui.Device.support.touch) { 

    // unload events bundle 

    jQuery.sap.unloadResources(“jquery.sap.events.js”, false, true, true); 

    // reload events bundle to assure that sap.m events are active 

    jQuery.sap.require(“jquery.sap.events”); 

  } 

sap.m.MultiComboBox.extend(“org.scn.community.databound.MultiComboBox”, {

initDesignStudio: function() {

},

afterDesignStudioUpdate: function() {

}

}


This approach is considered temporary until SAP provides standard means to load the sap.m library.

Final words

I hope you can put the MultiComboBox to some good use. To me it actually was the missing piece to be able to replace the SAP standard variable dialog entirely.

As great as the workaround for sap.m is we hope that the library will finally be supported by DesignStudio 1.6.

You don’t know the DesignStudio SDK community? You haven’t downloaded our SDK components yet? Find us, our SDK repository installation link and the MultiComboBox over here:

http://scn.sap.com/community/businessobjects-design-studio/blog/2014/12/10/scn-design-studio-sdk-development-community

Thanks to Karol Kalisz and Mustafa Bensan for doing the research and finding a solution to integrate sap.m despite all the obstacles.

As always feel free to ask lots of follow up questions.

Yours

Martin

Further reading:

37 Comments
You must be Logged on to comment or reply to a post.
  • Hi Martin,

    Congratulations for your job.

    We are planning to use your component to replace the standard SAP dialog box in order to workaround its maximum number of members limit (100). We are on DS 1.6 SP1 Patch 1 using follwing SDK Extension release (SCN Community Free Extensions for Design Studio 3.0.0.201604101745)

    On our initial tests we have notice what seems to be an issue and a couple of enhancement suggestions.

    Issue: when the dropdown list appears we are not able to select anything using the mouse. After clicking on a entry (see below sample) the checkbox remains unticked.

    /wp-content/uploads/2016/05/issue_prompts_4_964991.jpg

    Selection only seems to works by entering the text in the input text box (therefore the entry is automatically ticked)

    /wp-content/uploads/2016/05/issue_prompts_5_964992.jpg

    Is that the expected behaviour? After reading your blog I don’t think so.

    Suggestions:

    (1) We have just also noticed that the component does not allow to “replicate” the “search” capability available on the SAP standard dialog component. Have you planned to implement it on the short term? Most of time users does not know the exact text of an entry and use to search using patterns.

    (2)  Would be possible to show dimension member key and dimension member text on the component (as SAP standard dialog does)? By now, only text is displayed.

    Thanks,

    Alfons

    • Hi Alfons,

      There is a new release of the repository from May. Please update to the latest version.

      I couldn’t replicate your issue neither on chrome nor on IE11. I am able to select right away. Are you using the sap.m mode or commons with your dashboard?

      Regarding your suggestions:

      (1) The SAPUI5 MultiComboBox does online-“search” without the “*” placeholder. That is standard behavior. I did not intend to enhancing that. I might do so in the future though. Please make a feature request on the SCN GitHub repository to track that. Keep in mind that the component does not do a SAP BW backend lookup like the SAP standard dialog. It can only work with the values assigned to it. Be aware that you can add values to the component either through the properties or Design Studio scripting.

      (2) You can show TEXT_KEY by changing the display style of the data source on the initial view.

      Let me know if you need anything else.

      Kind regards

      Martin

  • Hi Martin,

    Had a query on clear functionality. How can I achieve clearing of selected multicombobox value on a button click.

    How do I set /clear value from script.

    Could you please guide

    • Hi Lloyd,

      Thanks for bringing that to my attention. I increased the limit to 500. I am not yet sure if I want to make it customizable.

      The enhancement will come with the next public release of the GitHub repository.

      Kind regards

      Martin

        • Thanks for accommodating the change. Eagerly waiting for the release, could someone confirm the date since its part of our most important delivery. Appreciate your help.

          • Thanks Martin,

            Making the limit customizable would be best option.  However, if that can’t be done quickly I would like to have it increased to 1000 please. Please accommodate that change in tomorrow release.

          • Hi Lloyd,

            The release was published this morning with a size limit of 500. The desired number seems to be increasing day by day. Maybe there is some kind of higher order to this data so that you can prefilter?

            Kind regards

            Martin

  • Hi Martin,

    Congratulations..

    We are facing issue in loading all the data in MulticomboBox.

    Kindly let me know, what is the maximum number of members limit? and

    Whether it has been updated in latest version? Where i can get those SDK details.

    Please help me on this and we are using DS 1.6 SP2 Patch 1 using following SDK Extension release (SCN Community Free Extensions for Design Studio 3.0)

    Regards,
    Vidhya.C

  • Hi Martin,

    Regarding the amount of Members, please can you increase it to 1000 values? This limitation is a merger problem for us to Go Live.

    Many Thanks,

    Fatima.

     

  • Hi Martin, nice blog.

    I know that the default behavior of the sap.m.MultiComboBox is to search from the beginning of the string, so I want to ask if there’s a way to do a contains search for MultiComboBox SAPUI5?

    In my code of multicombobox I have:

    <core:Item key="{SupplierId}" text="{SupplierId} - {Name}"/>
    

    I want to find a way to search by the Id and the Name.

     

    Best Regards, Lucas                                                                        

    • Hi Lucas,

       

      I couldn’t find a snippet for you to use out of the box. But generally speaking you will have to overwrite the default behavior of the sap.m.MultiComboBox. The picker attribute seems to be a good place to start. Once you have the right sub-component, which actually searches the underlying model you can apply your contains-search or fuzzy-logic, which might be even more interesting.

      Kind regards

      Martin

  • Hi Martin,

    thank you for insightful writeup. The component is a useful widget although I run into trouble while trying to use it with preset selection. The solution is to expose a setter function for DSelectedKey field through a ZTL script but I am wondering if there is a reason it is not there by default.

    Also is there a way to build only one feature out of the SDK package? It would make it easier to deploy it on the platform (I think).

    Kind regards,

    Olek

    • Hi Olek,

      boxing the SDK differently is a frequent request. However we simply haven’t gotten to it yet.

      There were some bugs with the UI5 library when I coded the component. That is why the ztl function for the selected key is not there. Feel free to fork the component and see if it is fixed by now.

      Kind regards

      Martin

      • Thank you Martin for your prompt answer.

        Do you remember what were the actual issues you have had with UI5. I’ve been trying my solution and it seems fine but it would be really helpful if I could look for some specific behaviour (or lack of).

        On the packaging: is there any article on building extensions? I see there are build definitions in the code repository but I end up with some strangely split packages. It does work but I have some issues during installation of extensions.

        Kind regards,

        Olek

        Edit: I posted this as an independent thread by mistake 🙂

        • Unfortunately, I don’t remember the specifics of the ui bug back then. I was only able to prevent errors by not implementing the option to set it.

          SAP does not provide any documentation apart from one section on the developer guide, because this is standard eclipse freature development. So you need to rely on stackoverflow and the likes for more insights.

           

          Kind regards

          Martin

           

  • Hi Martin,

    I have one more question regerding MCB behaviour. The list of elements is always clipped to members accessible after dimension filter application. Since I use it as a filter widget it would be preferred that all members be visible at all times. Could you provide me with any suggestions regarding the solution?

    Kind regards,

    Olek

    • Hi Olek,

      In that case I usually use redundant data sources. One providing the filter values and one that is actually filtered.

      Kind regards

      Martin

  • Dear Martin,

    This component is working fine on the local mode but is not loading the items in BI launchpad

    I am using data binding via a BEx query. Your support is highly appreciable.

    Regards, Himanshu