Is it possible to have data binding in the view?

Question

From this post, thank you Simon Delicata's answer and comment. I can save get selected documents from a view and save as separate documents.

I have a question about this approach. If I edit the document, I click the link which will redirect me to the edit page, the edit page is similar to previous post's design: a combo box on the top, a view with check box (this view is used for selection), a button for save the selection values from the view and the combo box. Also there will another view which will display the saved values.

Here code and it can save as separate documents but it cannot show the saved value and put a "tick" symbol in the checkbox.

<xp:table id="table1a">
    <xp:tr>
        <xp:td id="table1">
            <xp:comboBox id="comboBox1"
                dojoType="dijit.form.ComboBox" style="width:250.0px"
                value="#{document1.Category}">
                <xp:selectItems id="selectItems3">
                    <xp:this.value><![CDATA[#{javascript:var SetFirstValueBlank = @Text("");
                    return SetFirstValueBlank;
                }]]></xp:this.value>
                </xp:selectItems>
                <xp:selectItems id="selectItems4">
                    <xp:this.value><![CDATA[#{javascript:@Unique(@DbColumn(@DbName(), "CategoryListView", 1));}]]></xp:this.value>
                </xp:selectItems>
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="table1a">
                </xp:eventHandler>
            </xp:comboBox>
            <xp:text escape="true" id="computedField1">
            </xp:text>
        </xp:td>
    </xp:tr>
    <xp:tr>
        <xp:td>
            <xp:viewPanel rows="10" id="viewPanel1" var="rowData">
                <xp:this.data>
                    <xp:dominoView var="view1"
                        viewName="hListView">
                    </xp:dominoView>
                </xp:this.data>
                <xp:viewColumn columnName="ItemName"
                    id="viewColumn1" style="background-color:rgb(255,255,255)"
                    showCheckbox="true">
                    <xp:viewColumnHeader value="Item Name"
                        id="viewColumnHeader1" rendered="false">
                    </xp:viewColumnHeader>
                </xp:viewColumn>
                <xp:this.facets>
                    <xp:pager partialRefresh="true"
                        layout="Previous Group Next" xp:key="footerPager" id="pager2">
                    </xp:pager>
                </xp:this.facets>
            </xp:viewPanel>
            <xp:br></xp:br>
            <xp:button value="Add" id="button1"
                style="height:35.0px">
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:var Category = getComponent("comboBox1").getValue();
                    var viewPanel=getComponent("viewPanel1");
                    var docIDArray=viewPanel.getSelectedIds();
                    var unidArray = new Array();
                    for(i=0; i < docIDArray.length; i++) {
                   var unid=database.getDocumentByID(docIDArray[i]).getUniversalID();
                      unidArray.push(unid);
                    }
                    viewScope.put("unidArray", @Implode(unidArray, ","));
                for(var i=0; i< unidArray.length;i++ )
                {
                    var mdoc = database.createDocument();
                    mdoc.appendItemValue("Form", "ItemForm");
                    mdoc.appendItemValue("ItemName",unidArray[i]);

                    if(mdoc.computeWithForm(false,false))
                    {       
                        mdoc.save(true, true);  
                        getComponent("computedField9").setValue("Record saved");        
                    }
                    else
                    {
                    }
                }
        }]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
            <xp:br></xp:br>
            <xp:br></xp:br>
            <xp:viewPanel rows="6" id="viewPanel2">                     
                    <xp:this.data>
                        <xp:dominoView var="view2" viewName="CategoryItemView">
                            <xp:this.categoryFilter><![CDATA[#{javascript:getComponent("comboBox1").getValue();}]]></xp:this.categoryFilter>
                        </xp:dominoView>
                    </xp:this.data>
                    <xp:this.rendered><![CDATA[#{javascript:var value = getComponent("comboBox1").getValue();
                    if(value =="" || value == null)
                    {
                        return false;
                    }
                    else
                    {
                        return true;
                    }}]]></xp:this.rendered><xp:viewColumn id="viewColumn4" columnName="Category" rendered="false">
                        <xp:this.facets>
                            <xp:viewColumnHeader xp:key="header" id="viewColumnHeader4" value="Category">
                            </xp:viewColumnHeader>
                        </xp:this.facets>
                    </xp:viewColumn>
                    <xp:viewColumn id="viewColumn3" columnName="$10">
                        <xp:this.facets>
                            <xp:viewColumnHeader xp:key="header" id="viewColumnHeader3" value="Category">
                            </xp:viewColumnHeader>
                        </xp:this.facets>
                    </xp:viewColumn>
                    <xp:viewColumn columnName="ItemName" id="viewColumn2">
                        <xp:viewColumnHeader value="Item" id="viewColumnHeader2">
                        </xp:viewColumnHeader>
                    </xp:viewColumn>
                    <xp:this.facets>
                        <xp:pager partialRefresh="true" layout="Previous Group Next" xp:key="footerPager" id="pager3">
                        </xp:pager>
                    </xp:this.facets></xp:viewPanel><xp:br></xp:br></xp:td>
                </xp:tr>
            </xp:table>

So far as I know, suppose there a edit box or a combo box, if I use data binding to bind to a field and save it, the a edit box or a combo box can show the saved value when edit.

So I would like to know can the "similar approach" applies to the view? I search on the Internet and not much information about it.

I click the view and click Data in Properties tab, I notice the view does has data binding to bind to a form field.

Therefore is it possible to have data binding in the view so the view can show the saved value when edit. Thank you.

Answer 1

You're not binding to a document, you're binding to properties in a dominoDocument object. The dominoDocument object is a Java wrapper for the underlying document in the database that, because the document is read-write also exposes all fields as read-write, allowing editable components to be bound to them. If an edit box was bound to a read only property, I suspect it would not show as editable.

The dominoView object is a Java wrapper for the underlying view, and returns a collection of NotesXspViewEntry objects i.e. each row in the view. Those aren't read-write (Notes Client editable columns don't edit the view entry, they give an editable area that writes to the underlying document via backend code). You need to think about binding to "documents corresponding to view entries in the view".

View Panel columns can contain components instead of just mapping to column values. A View Panel is a repeat control with restricted layout and settings, so it's the same approach. Set the var property on the ViewPanel - this is a variable to get a handle on the current NotesXspViewEntry. You can't drag and drop into a column, if I remember correctly, you need to paste the code for the component into the relevant place.

If you want it editable, you'll need a dominoDocument datasource. Alternatively, reproduce the approach of Notes Client editable view column approach, bind to a temporary variable (e.g. requestScope property) and update the backend document on completion of the process. Another approach is to launch a dialog, passing the current row's UNID, and edit. Yet another approach is to use the In Place Form from XPages Extension Library.

Here's a presentation and demo from IBM Connect 2013 where I do something similar to make a column editable http://www.intec.co.uk/session-slides-and-sample-database-from-ibm-connect/.

More modern view components like the Data View make it easier.