4

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:

enter image description here

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:

enter image description here enter image description here

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

enter image description here

the combobox value list looks like this:

enter image description here

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!

Daniel F
  • 134
  • 7
  • I'm not sure I have an answer. It's late and I don't know of I'm following the goal. I do have a video that has some information on ways to handle listbox/combobox. http://notesin9.com/index.php/2014/03/13/notesin9-138-xpages-combobox-improvements/ In the notes there's a link to a blog post by Oliver. I know this is Java which can be daunting but you can pass a java Object into a Custom control by using java.lang.Object at the type. – David Leedy Jul 23 '14 at 00:58
  • http://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays-in-javascript "flatten" content of compositeData.listValues – Frantisek Kossuth Jul 23 '14 at 06:42

3 Answers3

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.

enter image description here

Steve Zavocki
  • 1,830
  • 4
  • 19
  • 33
  • Hello Steve, thank you very much for your response. If possible, I'd like to have it working in a way it does now for the Value section when you click on the combo box, so, the user has a choice to either add individual values, to use Javascript or a combination of both, if at all possible. – Daniel F Jul 22 '14 at 20:51
  • Try making multiple properties for each way and then compute which one they are using. So if no column present, then use individual entries, if a view column then ignore entries, or make it a combination of the two. – Steve Zavocki Jul 22 '14 at 20:58
  • Hello Steve, I'll give it a whirl and let you know how it goes – Daniel F Jul 22 '14 at 21:01
0

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:

enter image description here

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:

enter image description here

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:

enter image description here

This does also work with @DBColumn and @DBLookup!

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

Daniel F
  • 134
  • 7
  • What happens if one of your values gets a comma added to it? – David Leedy Jul 23 '14 at 14:48
  • Hello David, that would be a problem indeed. "Test 3,Test 4,Test 5,Test 6" is how the array is being returned when I first get the value list and walk thru it (see very first code snippet in my answer). Any ideas? – Daniel F Jul 23 '14 at 14:58
  • Found a solution: Use @Implode in the first code snippet with any character you like. Then pass on that character thru a property definition, so, it can be used with @-Implode / @-Explode. Will amend my initial answer. – Daniel F Jul 23 '14 at 15:04
0

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.

user2316219
  • 305
  • 1
  • 10