Xpage with multiple forms and data sources create empty documents

4
votes
  • I have a two simple forms (Form1 and Form2). They have only one field each (field1). I created two custom controls. They are identical except cc1 has data source defined as Form1 and cc2 has a data source of Form 2.
  • Each custom control has one inputbox bound to the field1 field of the corresponding data source, and one submit button. I create an
    Xpage and pull both custom controls into the page.
  • If I preview and fill out the input boxes on the Xpage in a browser, when I click on any of the submit buttons, two documents will be created based on the two forms in the domino database.
  • I tried to use partial refresh/execution and lots of other things. No matter what I do, I always get empty documents of both Forms.

XPage:

<xp:div styleClass="container" style="margin-top:20px">
   <xp:div styleClass="row">
     <xc:cc1></xc:cc1>
     <xc:cc2></xc:cc2>
   </xp:div>
 </xp:div>

Custom control 1

 <xp:this.data>
    <xp:dominoDocument var="form1" formName="form1"></xp:dominoDocument>
  </xp:this.data>
  <xp:div id="formDiv1" styleClass="col-sm-4">
    <xp:form>
      <xp:label value="Form 1" styleClass="h3"></xp:label>
      <xp:div styleClass="form-group">
        <xp:label value="Field 1" styleClass="control-label"></xp:label>
        <xp:inputText value="#{form1.field1}"></xp:inputText>
      </xp:div>
      <xp:button value="Submit Form1" id="form1Btn">
        <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="true" refreshId="formDiv1"
          execMode="partial" execId="formDiv1">
        </xp:eventHandler>
      </xp:button>
    </xp:form>

Custom control 2

 <xp:this.data>
    <xp:dominoDocument var="form2" formName="form2"></xp:dominoDocument>
  </xp:this.data>
  <xp:div id="formDiv1" styleClass="col-sm-4">
    <xp:form>
      <xp:label value="Form 2" styleClass="h3"></xp:label>
      <xp:div styleClass="form-group">
        <xp:label value="Field 1" styleClass="control-label"></xp:label>
        <xp:inputText value="#{form2.field1}"></xp:inputText>
      </xp:div>
      <xp:button value="Submit Form2" id="form2Btn">
        <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="true" refreshId="formDiv1"
          execMode="partial" execId="formDiv1">
        </xp:eventHandler>
      </xp:button>
    </xp:form>

3
formsxpageslotus-domino

3 Answers

3
votes

A normal submit button gets the property save="true" and saves all data sources.

If you want to save only one data source then use the simple action Save Document and select the data source:

enter image description here

Set property save="false" in addition. Your button code would look like this then:

<xp:button
    id="form1Btn"
    value="Submit Form1">
    <xp:eventHandler
        event="onclick"
        submit="true"
        refreshMode="complete"
        immediate="false"
        save="false">
        <xp:this.action>
            <xp:saveDocument
                var="form1"></xp:saveDocument>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>
2
votes

Here is the code that works using Knut's suggestion:

Xpage

<xp:div styleClass="container" style="margin-top:20px">
    <xp:div styleClass="row">
      <xc:cc1></xc:cc1>
      <xc:cc2></xc:cc2>
    </xp:div>
  </xp:div>

cc1

<xp:panel id="formDiv1" styleClass="col-sm-4">
    <xp:this.data>
      <xp:dominoDocument var="form1" formName="form1"></xp:dominoDocument>
    </xp:this.data>
    <xp:label value="Form 1" styleClass="h3"></xp:label>
    <xp:div styleClass="form-group">
      <xp:label value="Field 1" styleClass="control-label"></xp:label>
      <xp:inputText id="field1" value="#{form1.field1}"></xp:inputText>
    </xp:div>
    <xp:button value="Save" id="form1Btn">
      <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="false" execMode="partial"
        execId="formDiv1" refreshId="formDiv1">
        <xp:this.action>
          <xp:actionGroup>
            <xp:saveDocument var="form1"></xp:saveDocument>
            <xp:executeScript>
              <xp:this.script><![CDATA[#{javascript:
var panel = getComponent("formDiv1");
var ds = new com.ibm.xsp.model.domino.DominoDocumentData();
ds.setComponent(panel);
ds.setVar("form1");
ds.setFormName("form1");
panel.getData().clear();
panel.addData(ds);}]]></xp:this.script>
            </xp:executeScript>
          </xp:actionGroup>
        </xp:this.action>
      </xp:eventHandler>
    </xp:button>
  </xp:panel>

cc2

<xp:panel id="formDiv2" styleClass="col-sm-4 ">
    <xp:this.data>
      <xp:dominoDocument var="form2" formName="form2"></xp:dominoDocument>
    </xp:this.data>
    <xp:label value="Form 2" styleClass="h3"></xp:label>
    <xp:div styleClass="form-group">
      <xp:label value="Field 1" styleClass="control-label"></xp:label>
      <xp:inputText id="field1" value="#{form2.field1}">
      </xp:inputText>
    </xp:div>
    <xp:button value="Submit Form2" id="form2Btn">
      <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="false" execMode="partial"
        execId="formDiv2" refreshId="formDiv2">
        <xp:this.action>
          <xp:actionGroup>
            <xp:saveDocument var="form2"></xp:saveDocument>
            <xp:executeScript>
              <xp:this.script><![CDATA[#{javascript:
var panel = getComponent("formDiv2");
var ds = new com.ibm.xsp.model.domino.DominoDocumentData();
ds.setComponent(panel);
ds.setVar("form2");
ds.setFormName("form2");
panel.getData().clear();
panel.addData(ds);}]]></xp:this.script>
            </xp:executeScript>
          </xp:actionGroup>
        </xp:this.action>
      </xp:eventHandler>
    </xp:button>
  </xp:panel>
2
votes

Paul Wither's suggestion of using requestScope scope for the datasources made the code quite a bit simpler:

XPage 

<xp:div styleClass="container" style="margin-top:20px">
    <xp:div styleClass="row">
      <xc:cc1></xc:cc1>
      <xc:cc2></xc:cc2>
    </xp:div>

custom control 1

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
  <xp:this.data>
    <xp:dominoDocument var="form1" formName="form1" scope="request"></xp:dominoDocument>
  </xp:this.data>
  <xp:div id="formDiv1" styleClass="col-sm-4">
    <xp:label value="Form 1" styleClass="h3"></xp:label>
    <xp:div styleClass="form-group">
      <xp:label value="Field 1" styleClass="control-label"></xp:label>
      <xp:inputText id="field1" value="#{form1.field1}"></xp:inputText>
    </xp:div>
    <xp:button value="Save" id="form1Btn">
      <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="false" execMode="partial" execId="formDiv1"
        refreshId="formDiv1">
        <xp:this.action>
          <xp:actionGroup>
            <xp:saveDocument var="form1"></xp:saveDocument>
          </xp:actionGroup>
        </xp:this.action>
        <xp:this.onComplete><![CDATA[x$("#{id:field1}").val("");]]></xp:this.onComplete>
      </xp:eventHandler>
    </xp:button>
  </xp:div>
</xp:view>

custom control 2

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
  <xp:this.data>
    <xp:dominoDocument var="form2" formName="form2" scope="request"></xp:dominoDocument>
  </xp:this.data>
  <xp:div id="formDiv2" styleClass="col-sm-4 ">
    <xp:label value="Form 2" styleClass="h3"></xp:label>
    <xp:div styleClass="form-group">
      <xp:label value="Field 1" styleClass="control-label"></xp:label>
      <xp:inputText id="field1" value="#{form2.field1}">
      </xp:inputText>
    </xp:div>
    <xp:button value="Submit Form2" id="form2Btn">
      <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="false" execMode="partial" 
      execId="formDiv2" refreshId="formDiv2">
        <xp:this.action>
          <xp:actionGroup>
            <xp:saveDocument var="form2"></xp:saveDocument>
          </xp:actionGroup>
        </xp:this.action>
        <xp:this.onComplete><![CDATA[x$("#{id:field1}").val("");]]></xp:this.onComplete>
      </xp:eventHandler>
    </xp:button>
  </xp:div>
</xp:view>