XPages CSJS compositeData fields

1
votes

I've got a repeat control in my form with a composite control to handle the fields that are bound to the datasource. For example: 

<xp:comboBox id="replace"
            styleClass="form-control"
            value="#{compositeData.dataSource[compositeData.fieldName1]}">
            <xp:selectItem itemLabel="Select a Code"
                itemValue="Select a Code">
            </xp:selectItem>
            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:var db = sessionScope.serverPath + "!!" + sessionScope.dbName;
var companyCode = @Trim(@Unique(@DbLookup(db,"vwTblCompany", company,2)));
return @Trim(@Unique(@DbLookup(db,"vwTables","Replacement",3)));
                    }]]></xp:this.value>
            </xp:selectItems>
</xp:comboBox>

The fields are bound as follows:

<xp:repeat indexVar="rownum" first="1"
rows="#{javascript:viewScope.rowCount }" var="data"
value="#{javascript:viewScope.rowCount + 1}">
<xc:cc_dynamicAssetItems
row="#{(rownum lt 10)? '0':''}#{rownum}"
dataSource="#{document1}"
fieldName1="replace#{(rownum lt 10)? '0':''}#{rownum}"
fieldName2="item#{(rownum lt 10)? '0':''}#{rownum}"
fieldName3="class#{(rownum lt 10)? '0':''}#{rownum}"
fieldName4="cur#{(rownum lt 10)? '0':''}#{rownum}"
fieldName5="costEst#{(rownum lt 10)? '0':''}#{rownum}"
fieldName6="costEstUS#{(rownum lt 10)? '0':''}#{rownum}"
fieldName7="life#{(rownum lt 10)? '0':''}#{rownum}">
</xc:cc_dynamicAssetItems>
</xp:repeat>

Since I have a handle to the viewScope variable that holds the rowCount in the repeat (thanks to an RPC call) in CSJS, I'd like to be able to validate each row of the repeat in CSJS. How do I get a handle to the field? I know Tim Tripcony used to recommend going straight to the datasource. Since the id "comboBox1" in my example is in the repeat control and being used for every row, I'm not sure I should be using that to get the value. In my mind since that field is bound to replace01, replace02 ..., I should be trying to get the value of replace01, right?

I can't use the following either because the id of the combobox field is not being computed dynamically. 

var val = XSP.getElementById("replace01").value

I looked into Brad's example of generating dynamic component id's within a repeat control but when I use that method, the ability for me to add rows within the repeat control breaks.

http://xcellerant.net/2013/07/29/access-repeat-components-from-outside/

Can anyone assist with an example?

2
xpagescompositeclient-side-validation

2 Answers

0
votes

Follow Tim: go after the data source. Get element by ID doesn't do that. There are 2 approaches you might consider:

  • Validate your data source on the server side and use an errors control to show the result. This follows the idea: validation validates data, not UI interaction

  • drop the repeat control and make your data available using an ExtLib Rest control. Implement the UI logic complete in CSJS including rendering the individual rows.

Anything in between could get messy. But if you have to: you can always generate a script call inside the repeat that takes the generated ids of that iteration as parameters. In a script tag simply compute something like:

   Return 'var x = {"'+getId('replace01')+'","'+getId('anotherfield')+'"};
   mastervalid.push(x);'

(Replace getId with the SSJS function that gives you the rendered id). Mastervalid would be an array defined in CSJS outside the repeat. You end up with an array that has all the client Id fields in a JS object. Feed that into your validation function

0
votes

A big thank you to STW, Brad Balassaitis and Keith Strickland for their assistance helping me think through this and giving me various options.

I ended up using dojo.query to get a handle to the dynamically generated client ID's within the repeat control and then used foreach to validate each node.

//validate Replacement Code
dojo.query('[id$="replace"]').forEach(function(node, index) { 
 //alert(index + ': ' + node.value);
 if(node.value == "Select a Code"){
 dojo.style(node, {
 border: 'red solid 1px'
});
}
});