xPages Custom Control with Custom Property Group t

Question

I've create a custom control that has a Property Definition Group. The Group has checked to "Allow multiple instances". When I drop the control on an xPage I can through the UI manually add 2 items to the property and set the sub-properties of the group(s) but I need to figure out how to programmatically populate the group by looping through an array and doing some calculations.

Answer 1

In a custom control for a bootstrap progress bar I have a property group called BarDetail. There are 3 properties : style, width, and order. And multiple instances is turned on.

Below is the XML on how I access the properties. I believe I also talked about this in a video on NotesIn9 151 (http://www.notesin9.com/2014/08/10/notesin9-151-bootstrap-progressbars-in-xpages/)

<xp:panel styleClass="progress">
            <xp:repeat
                id="repeat1"
                rows="30"
                var="rowData"
                indexVar="rowIdx"
                disableOutputTag="true">
                <xp:this.value><![CDATA[#{javascript:var object = compositeData.BarDetail;
var tree:java.util.TreeMap = new java.util.TreeMap();
var data:java.util.ArrayList = compositeData.BarDetail;

var total = 0;
var count = 0;


// first Loop is to build the map and get the count.
for (x in data) {
    count++;
    tree.put(x["order"].toString(), x);
//  print("Width : " + x["width"]);
//  var wCount:string = x["width"];

    total = total + Number(x["width"]);
//  print("Loop count : " + count);

}

    // We want all the colors to expand to 100%

    // Now we need to scale the percentages
    var count = 0;


    var itr:Iterator = tree.values().iterator();
    while(itr.hasNext()) {
        var tempBar = itr.next();
        tempBar["width"] = (tempBar["width"] / total) * 100
    }




return tree.values()}]]></xp:this.value>

                <xp:text
                    escape="true"
                    id="computedField1"
                    tagName="div">
                    <xp:this.styleClass><![CDATA[#{javascript:rowData["style"]}]]></xp:this.styleClass>
                    <xp:this.style><![CDATA[#{javascript:return "width: " + rowData["width"] + "%;"}]]></xp:this.style>
                </xp:text>
            </xp:repeat>

        </xp:panel>

Answer 2

I tend to define a Custom Control Property named "configuration", and set that to be an "object" (you'll have to type that in vs. select it from the dropdown):

Now, you can pass an object as your property:

return {
  "groups" : {
    "groupA" : {
        altName : "A Group",
        members : ["me", "you", "them"]
    },
    "groupB" : {
        altName : "B Group",
        members : ["him", "her", "they"]
    }
},
  otherOption : "something else"
}

When viewed in the XPages Source:

<xc:yourControl>
 <xc:this.configuration><![CDATA[#{javascript:return {
  "groups" : {
    "groupA" : {
        altName : "A Group",
        members : ["me", "you", "them"]
    },
    "groupB" : {
        altName : "B Group",
        members : ["him", "her", "they"]
    }
 },
  otherOption : "something else"
 }}]]></xc:this.configuration>

Now, to loop though this, you could easily use an xp:repeat control bound to #{compositeData.configuration.groups}, and then all "child" binding can be done directly to the variable defined for the xp:repeat:

<xp:repeat
  value="#{compositeData.configuration.groups}"
  indexVar="thisGroup">
  <xp:panel tagName="h1">
    <xp:text disableTheme="true" value="#{thisGroup.altName}" />
  </xp:panel>
  <xp:panel tagName="ul">
    <xp:repeat value="#{thisGroup.members}" var="thisMember">
      <xp:panel tagName="li">
        <xp:text disableTheme="true" value="#{thisMember}" />
      </xp:panel>
    </xp:repeat>
  </xp:panel>
</xp:repeat>

Using this approach, you're not limiting to the size, the scope, nor the content contained within your Custom Control Property.