Exclusive: Creating a Multi Select Combo-Box using Xcelsius SDK

Aug 31st, 2010
by Evan DeLodder.

One of the most frequently-requested features in Xcelsius is the ability to select multiple items from a standard control, such as the Xcelsius Combo Box. This is currently not possible out of the box in Xcelsius 2008, though by applying the SDK and creating a custom Flex component, we can quickly fill in this basic gap.

Multi Select Combo Box in Xcelsius

This is the first post in a short series, focused on extending combo box functionality in Xcelsius. If you are new to the SDK, this is a functional and basic example that can serve as a primer to get you going on the SDK. The component itself is certainly nothing revolutionary, though it does illustrate how the SDK can be applied to fill in feature gaps in a relatively short amount of time.
You can find all of the source code and Xcelsius files here. The zip file includes all Flex source code, the Xcelsius Packager, the Xcelsius add-on installer, as well as a test Xcelsius Model.

This version of the component enables you to:

  1. Change its color
  2. Bind to a range of cells for the source data
  3. Bind to a range of cells to capture the items selected from the combo box

To use the multiple-select functionality, simply hold down the CTRL key while you select items.
If you any have special feature(s) you’d like to see in this control, please post a comment and they will be considered for the next release.

Download Source Files

Evan DeLodder is an Xcelsius SDK Guru on the popular website Everything Xcelsius, an SAP author and a frequent contributor to the growing Xcelsius development community. You can learn more about him on the SAP website or on EverythingXcelsius.com.

Related Posts:

Posted in: Add Ons, Components, SDK.

←
→
← 
Newer Comments  →

  • Pingback: Tweets that mention Exclusive: Creating a Multi Select Combo-Box using Xcelsius SDK – MyXcelsius.Com -- Topsy.com()

  • Fred

    Does this work with the Elan Theme? The current ComboBox has issues where it drops the last value with filtered rows.

  • Evan DeLodder

    Unfortunately, theme inheritance is not possible directly through the SDK, meaning that when you change the overall theme, there’s no official way to apply the selected theme to your custom component. However, you can style/skin the custom component to suit your needs and match any of the Xcelsius themes.

  • Prakash Panchal

    Hello,

    Thank you for multiselect combo box. I am new to xcelsius and i am stuck as it does not have any other properties like font size, filtered rows. etc. I am working on dashboard tool that has 15 parameters and all need to allow multiple selection. my challenge is to pull hierarchy as there is no filtered row option.
    can you please direct me in some direction where i am able to achieve above?
    thank you in advance.

    • Evan DeLodder

      Hi Prakash,

      Are you familiar with Flex development?

      • Prakash

        Hi Evan,
        Thank you for your reply.

        No i am not familiar with flex development.

    • Jane Pipkin

      I work with a dashboard that has lots of selectors also. When a user makes a selection of 1 or multiple in one combo box or listbuilder, it triggers queries updating the other selectors. All of the Qaaws queries are mapped to multiple input prompt cells. The BobJ universe prompt objects handle a default of ALL if no selections are made in any of the selectors. When the user has made all selections, a GO button refreshes the actual data. I am writing this to respond to Prakash Panchal’s comment, but it might be useful to others also. I might also be interested in others’ ways of dealing with this situation. Users do not favor listbuilders (too many clicks) so I might enjoy working with the combo-box-multiple custom component. Thank you.

  • Fred

    You need to understand Flex Development (Adobe Flex 2 or 3, MXML Coding, ActionScript) and the Xcelsius SDK.

  • Fred

    Any chance on getting the Flex Source?

  • Fred

    Can you allow it to use filtered rows as an input source?

  • Nice. Exactly the multi-select functionality I need. However, I would echo Prakash about some basic appearance/visibility functionality. For example dynamic visibility is a must for me. Also font and text formatting would be nice. Finally, some button coloring options would be nice (but lower priority)

    Ken

  • Evan DeLodder

    Thanks for the feedback on this. For the next iteration, I’ll expose about 3 style properties as well as a new general feature. Once those are in place, feel free to extend the component as needed.

    -Evan

  • Fred

    Any chance of adding the AutoComplete feature as noted here:

    http://hillelcoren.com/flex-autocomplete/

  • Fred

    I can’t find the Flex Source. Please provide the MXML files and Project file.

  • Bindu

    Hello,

    This is a great component, just what our users were asking for. But one thing I noticed is this component doesn’t seem to work well with BICS connection. If I refresh the combobox values from the query master data using the BICS connection, we are seeing many duplicate values, or [object Object].

    Is there a solution for this?

    Thanks,
    Bindu.

  • Evan DeLodder

    Hi Bindu,

    I’m glad you found the component useful. I’m not sure what the issue is on the BICS connection, that is something you may have to trace out and troubleshoot via Xcelsius and Flex as live connections sometimes present problems for custom components that need to be worked around. I you have an example you can share, I can take a quick look. This was posted as an educational/jump-start example, so I wouldn’t suggest plugging it into a production environment without a good deal of testing and possible refinement.

    -Evan

  • Evan DeLodder

    @Fred: Looks like the zip only has the XC files, we’ll get the actual source up soon and will comment when ready.

    -Evan

  • Fred

    Problem: I have your selector pointed to a dynamically filled list of 31 entries. When selecting the list, it is giving 124 entries (or 3 times the values) and it is duplicating the values two times as well!! Any fix on this, soon??

  • Evan DeLodder

    Fred,

    Thanks for the note. At the least, source code should be available early next week so that you can see how to make your own component for your production projects. Support for this example will be limited but a fix may be included along with a couple of new features in the next post (couple of weeks).

    Best,
    Evan

  • Evan DeLodder

    Fred,

    Quick update: Just had to repackage the source, and I made the fix you need. If you build the package based on the source code that should be posted soon, you should be good to go. We’ll notify when source is ready.

    -Evan

  • Fred

    Will it include the FLEX Project file as well?

  • Evan DeLodder

    Source is now available. Yes, the Flex source files are included for your reference.

    http://myxcelsius.com/wp-content/uploads/2010/08/MultiSelectComboBox.zip

  • Fred

    MXML and AS files but no FLEX Project file.

  • Evan DeLodder

    @Fred: The AS and MXML are the files you need, it wouldn’t be useful to provide the Flex project file as it is unnecessary. You’ll need to setup your own Flex project, and reference the Xcelsius SDK in it as well. You can read about setting up your Flex project here: http://www.sdn.sap.com/irj/boc/go/portal/prtroot/docs/library/uuid/a0f73f13-8b1c-2c10-6382-981dbaa15cd4?QuickLink=index&overridelayout=true

  • Fred

    Thanks Evan. Will you be updating that fix this week or can you point me to where in the source I can look to fix it?

  • Fred

    What is the fully qualified class name that identifies the item in the component SWF?

  • Fred

    Evan,
    Is there a way to have the Destination results come out the way they come in (i.e. Alphabetical Order)?

    • Evan

      You can use to sort method of the Array class in Flex.

  • anitha

    hi ,
    I am new to Flex and MXML ,
    will you please help me in learing adobe flash builder adn mxml(any docs,pdfs,videos)
    Thnaks in advance

    Anitha N

  • Fred

    Is there a way to reset the values of the selector after they have been selected (i.e. rest button)?

  • hlep!!

    If this component will have tree like structure then it will be very helpful like a coby tree component.

  • Rohit

    Evan,

    Can I build a custom datagrid as a Xcelsius add on following your method for building the multi select combo box.

    I am new to programming with Action Script and would like to build this in MXML if possible.

    All I am looking for is a way to take a standard flex datagrid and use it as an addon component in Xcelsius.

    Any guidance you can provide would be a tremendous help.

    Thanks,
    Rohit

  • Evan

    Hi Rohit,

    The properties established for consuming data from Xcelsius could easily be leveraged for populating a datagrid with data. If you just need a basic display of the data (read-only), I could send you a quick example.

    Thanks,
    Evan

    • Rohit

      Evan,

      I am trying to leverage the flex data grid component and have it display data from the xcelsius spreadsheet similar to your multi combo box example.

      Any examples that you can provide would help me a great deal. My email address is rhohit@gmail.com

      Thanks for your help,
      Rohit

      • Rohit

        Evan,

        Would be able to help me in building my datagrid add on. I have tried and have not been successful in leveraging your example in building my datagrid add on for xcelsius.

        Thanks for all your help.

        Rohit

        • Evan

          Hi Rohit,

          If you want to email me your datagrid example, I can take a quick look for you.

          Best,
          Evan

          • Rohit

            Evan,

            I can send you my example if you could let me know what email address I should send it to.

            Thanks,
            Rohit

  • Fred

    Is there a way to change the direction that the ComoBox goes other than down?

  • michael jennings

    Hi Evan,
    I have a dynamic range of list of value for my MultiSelectComboBox, Is possible to avoid [objec Object] items when the value at the bottom are blank ?

    For example for standard listbox there is voice menu called “Ignore blank cell”

    Best Regards
    Michael

  • Evan

    Hi Michael,

    Most definitely. In the public setter for the data, when you process the incoming values from Xcelsius, you’ll want to ignore any null or blank values. That should do the trick.

    Best,
    Evan

  • kumar

    Does it requried FLEX development?

  • Fred

    Is there a way to set the prompt to use the first value of the source data? That way when a user clicks outside the combo box it doesn’t revert to blank. Or how would I create an exact duplicate of the component that will allow it to be added in as a second component with a different prompt?

  • Evan

    @kumar Yes, all SDK work for Xcelsius/SCDD is done in Flex

    @Fred I’m not quite sure I fully understand your requirements. Can you post a SWF of what you’re referring to? To get a second component on the canvas that behaves in a different manner, it will need to have a different class name to ensure that there’s no conflict of classes.

  • Fred

    Would it be as simply renaming the MXML files and saving Project name as a new name? I have one with a Prompt and need one without.

  • Evan

    The Flex framework will let the first class name loaded represent all subsequent classes that share the same name (and namespace) that are loaded. Assuming you’ve got a package/class path like below

    src\com\mxc\controls\MultiSelectComboBox

    , you’d need to create a new class or MXML component file like

    src\com\mxc\controls\MultiSelectComboBox2

    in order to get your new functionality and encounter no conflicts

  • Fred

    Did that, re published with the new class name and I still can’t get it to work with my existing component. Do I need to edit the files in the other folders as well?

  • Fred

    My path is for the new component:

    src\com\mxc\CustomMultiSelectComboBox

    Do I need to change any other mxml file?

  • I am working on dashboard tool that has 15 parameters and all need to allow multiple selection. my challenge is to pull hierarchy as there is no filtered row option.

  • Fred

    You can mimic Filtered Rows with the hierarchy in Excel using combinations of Max, Index, and Match with this component and in combination with this article: http://www.femkekooij.nl/?p=52. Be aware of your hierarchy numbers so the levels do not get too large or it will have a major performance hit.

  • kotte

    HI,

    i have downloaded the above source file for multi selection combo box, but there i can see “.MXML”, “.MXML.BAK”, “.AS”, “.XLF”, “.SWF”, “.XLS”, “.XLP” files. what i have to install from that source file for mutlti combo box selection.

    Please let me know.

    Regards
    Kotte

  • Fred

    You need to use Adobe Flex 2 or 3 and the Xcelsius SDK to build the component from the source files.

  • kotte

    HI,

    We are using Adobe Flex 2 only, what is Xcelsius SDK? how to get this and how it will help?

    Please let me know more details on SDK.
    Thanks.

  • Fred

    What version of Xcelsius are you using? Service Pack 3.1 on includes the SDK as part of the installation as an option. You need that in order to use the Xcelsius Components and to understand how to publish a component.

    • kotte

      HI,

      Yes we are using SP 3.1(Build number 12,3,2,864). What is xcelsius components (you mean view-> components) and how to achieve multiple selection from combo box using the xcelsius components.

      Jus I have country names and Headcount data and we have one pie chart, It shows the all countries headcount. So above pie chart I need one combo box and I need to select multiple countries.

  • Fred

    Use this method. It would probably be easier for your situation:

    http://www.femkekooij.nl/?p=52.

  • Nicole

    Hello everybody,

    I’ve tried to use this ComboBox but somehow it doesn’t work.
    i’ve built the package, this was no problem. What came out was an .xlx-file, and I don’t know what to do with that. I can’t open it per double-click, Xcelsius say that the file is corrupt.
    How do I get this thing working?

    Best regards,
    Nicole

  • Fred

    You need to use the Add in Manager to add it into Xcelsius as a Component. It does work and I have been using a highly modified version of it for months now.

  • Frank

    Hello

    I am trying to remove the [Object] [Object] from the list of value, but I can’t see to find the property tab.

    Any help would be appreciated!

    • Fred

      What are the two objects that you are trying to remove? What version of Flex are you using?

  • Jim

    Does this custom component have a scroll bar if there are many items in the drop-down box?

    Thanks.

←  
Newer Comments  →