Teamstudio Unplugged: adding more table rows without partial refresh

Question

I am using Teamstudio Unplugged to try and Extend a table row with inputTexts bound to a document.

The function of this table is for the user to write down a observation and then a description of the observation.

After this the user should be able to press a button and get another row so he can add another observation.

I cannot partially refresh the entire table because it would cause the inputTexts to reload the value bound to them.

I cannot partially refresh the new row and change its styleclass with serverside scripts because IDs does not carry over from the designer. Meaning that this in the designer:<xp:tr id="row1"> becomes this in the pc simulator: <tr> So I can't solve this problem with a computed styleclass and a partial refresh. So i have now built a button included below but it only changes works twice. after that the onclick string never changes.

<xp:button value="Flere observationer" id="button4" styleClass="button">
    <xp:this.attrs>
        <xp:attr name="onclick">
            <xp:this.value><![CDATA[#{javascript:
                return "$('.row"+sessionScope.rows+"').removeClass('hidden');"
            }]]></xp:this.value>
        </xp:attr>
    </xp:this.attrs>
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial"
         refreshId="button4">
        <xp:this.action>
            <xp:executeScript script="#{javascript:sessionScope.rows++;}">
            </xp:executeScript>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>

Rich Sharpe Rich Sharpe · Accepted Answer · 2014-05-22T03:19:39

This can be done in Unplugged using standard(-ish) XPages techniques, which may be easier for anyone not well versed in JQuery. I would never recommend using a table for layout purposes, use <div> and or <ul/li> tags and use CSS. However for the purpose of answering this specific question I've used a table (climbing off soapbox now)...

So I'm assuming that the data in each row is in the same document. If so and the user is writing one observation at a time why not use a full refresh? Everything is done client-side on Unplugged (even the server parts - if that makes sense) so its fast. This method shows existing observations (if applicable) and allows the users to enter one more row at a time:

Add a hidden field on your form - NoOfObservations - this can be a text field and will be used as an index in the XPage.

Add your datasource on an XPage to the form

Create a beforePageLoad event to set the index from either an existing doc or new one:

<xp:this.beforePageLoad><![CDATA[#{javascript:
var ObservationCount = 0;
if(!document1.isNewNote()){
ObservationCount = document1.getItemValue("NoOfObservations")[0];
}
sessionScope.put("observations", ObservationCount);
}]]>
</xp:this.beforePageLoad>

Create your table with existing rows - using the xp:repeat Control with the index in the sessionScope to produce your rows - adding 2 new lines for new entries:

<table>
    <xp:repeat id="repeat1" rows="30" var="rowData"
        indexVar="dataRows">
        <xp:this.value><![CDATA[#{javascript:sessionScope.get("observations");}]]></xp:this.value>
        <tr>
            <td>
                <xp:label value="Observation" id="label1"
                    style="color:rgb(255,255,255)">
                </xp:label>
            </td>
            <td>
                <xp:text escape="true" id="computedField1">
                    <xp:this.value><![CDATA[#{javascript:return document1.getItemValueString("ObservationTitle" + dataRows);}]]></xp:this.value>
                </xp:text>
            </td>
        </tr>
        <tr>
            <td>
                <xp:label value="Details" id="label2"
                    style="color:rgb(255,255,255)">
                </xp:label>
            </td>
            <td>
                <xp:text escape="true" id="computedField2">
                    <xp:this.value><![CDATA[#{javascript:return document1.getItemValueString("ObservationDesc" + dataRows);}]]></xp:this.value>
                </xp:text>
            </td>
        </tr>
    </xp:repeat>
    <tr>
        <td>
            <xp:label value="New Observation"
                id="newObservationTitle" style="color:rgb(255,255,255)">
            </xp:label>
        </td>
        <td>
            <xp:inputText id="inputText1"></xp:inputText>
        </td>
    </tr>
    <tr>
        <td>
            <xp:label value="New Description"
                id="newObservationDesc" style="color:rgb(255,255,255)">
            </xp:label>
        </td>
        <td>
            <xp:inputTextarea id="inputTextarea1"></xp:inputTextarea>
        </td>
    </tr>
</table>

Use an xp:button with the following SSJS in the onClick event:

<xp:button value="Save" id="button1">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="complete">
        <xp:this.action>
            <xp:actionGroup>
                <xp:executeScript>
                    <xp:this.script><![CDATA[#{javascript:
var newObservation = parseInt(sessionScope.get("observations")) +1;
document1.replaceItemValue("ObservationTitle" + newObservation,  getComponent("inputText1").getValue());
document1.replaceItemValue("ObservationDesc" + newObservation, getComponent("inputTextarea1").getValue());
document1.replaceItemValue("NoOfObservations", newObservation);
document1.save();}]]></xp:this.script>
                </xp:executeScript>
                <xp:openPage name="/UnpMain.xsp"></xp:openPage>
            </xp:actionGroup>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>

Teamstudio Unplugged: adding more table rows without partial refresh

2 Answers