Reusable Custom Control with ComboBox: Add <selectItems> thru Property Definition

Question

I am trying to set up a reusable custom control with a combobox to be used with Bootstrap. The custom control has already all the divs, styles etc. that are needed for Bootstrap.

Now, I added a Property Definition (type: string, Allow multiple instances), so that when you use the custom control on any form, you can add selectable values to the combobox:

As a values property for the combobox, I added a computed item with the following JavaScript:

compositeData.listValues

When I use the custom control I can add values individually, one instance for one selectable value and it does work great:

However, when I compute the value to, lets say, get a list of values from a keyword document or view column:

the combobox value list looks like this:

How can I pass on a list of values thru property definition to the combobox? Is it possible at all?

UPDATE: Is there a way to loop thru the instances of a property definition? That way I could check if the current instance is a single text value or an array, put a list of all the values together and return it as a value list.

Thank you very much for your help!

Answer 1

In the Custom Control properties, next to Type, leave it as String and then click on the folder icon. In there you can choose complex types.

In there you can choose view column, among a vast array of choices.

Answer 2

UPDATE: David Leedy pointed out a caveat in regards to using comma as a separator for @Implode/@Explode. This could cause issues, if any of your values contains a comma. So, I amended my answer to account for that:

First of all, I'd like to thank everyone who took a look at this question and / or responded to it.

I had an epiphany this morning and found a solution. Might not be very elegant but it works.

As we are going to use @Implode/@Explode to build the value list for the combobox, we need to add another property definition to the reusable custom control. This property will be used to pass on the information, how the computed value list will be separated:

When I add values to the custom properties, the computed value for getting the list of values from a keyword document should look like this:

var oView:NotesView = database.getView('$vwSYSLookupKeywords');
var oDocument:NotesDocument = oView.getDocumentByKey('.DBProfile', true);

@Implode(oDocument.getItemValue('iTxtTest'),';')

As you can see, in this example I use ";" to implode the list.

This is now my list of Custom Properties:

And this is the markup for the whole custom control where I use the reusable custom control:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xc:ccLegend
        listSeparator=";">
        <xc:this.listValues>
            <xp:value>Test 1</xp:value>
            <xp:value>Test 2</xp:value>
            <xp:value>#{javascript:var oView:NotesView =
                database.getView('$vwSYSLookupKeywords'); var
                oDocument:NotesDocument = oView.getDocumentByKey('.DBProfile',
                true); @Implode(oDocument.getItemValue('iTxtTest'),';')}</xp:value>
        </xc:this.listValues>
    </xc:ccLegend>
</xp:view>

If I now use the following in my computed value list for the combo box:

var sSeparator = compositeData.listSeparator;

@Explode(@Implode(compositeData.listValues, sSeparator), sSeparator);

the values are properly displayed in the combobox:

This does also work with @DBColumn and @DBLookup!

If you have a better solution, please do not hesitate to post it here.

Answer 3

Did you try to set the property to object instead of string. That should allow you pass an array to the custom control with imploding and exploding it.