<xsl:template name="dvt_1.rowremove"> <xsl:param name="Pos" /> </xsl:template><xsl:template name="dvt_1.rowremove"><tr> . . . </tr></xsl:template>Procedure
Let's analyze the changes we want and implement them step by step.
1. Continue to implement color Encoding
In the Code pane, we need to change the outer box to red to provide a visual clue for the current working status. If you are following the previous two articles, you should already have the corresponding css class, through which you can implement the red border:
.dl-l {border-left:medium red ridge;}.dl-r {border-right:medium red ridge;}.dl-t {border-top:medium red ridge;}.dl-b {border-bottom:medium red ridge;}
Only in the remove template, change each ed-to dl-, and then go back to the design pane to switch to the edit template (now we actually display the remove template ), let's take a look at the current interface effect:
It looks like editing a template, except for changing the blue border to red
2. Only keep the Effective Date Field editable.
Very simple. Hover your mouse over the Worker control and change Format as: to Label. Repeat this operation on all controls other than Effective Date. After the Label is changed, it looks like text, but still allows us to access the control from the workflow.
Modify display attributes in the design pane
[NOTE: When we modify anything in the Code pane, click the design pane again and it will be restored to the default template. We will have to select Edit template in data view preview again. However, this problem does not occur if we modify the Format As attribute in the design pane.]
Only valid Date can be edited. All fields can be referenced through jQuey or workflow.
3. Make two different save buttons
Just as we did before, we will create a new button by copying the existing Save button, and then modify it as required. At this time, we will find that the button is rendered by a separate template, depending on the current Mode.
<xsl:choose> <xsl:when test="$Mode = 'edit'"> <tr> <td class="ms-buttonactivehover" width="1%" nowrap="" align="center"> <a href="javascript: {code}">Save</a> </td> </tr> <tr> <td class="ms-buttonactivehover" width="1%" nowrap="" align="center"> <a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">Cancel</a> </td> </tr> </xsl:when> <xsl:when test="$Mode = 'insert'"> <tr> <td class="ms-buttonactivehover" width="1%" nowrap="nowrap" align="center"> <a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">Save</a> </td> </tr> <tr> <td class="ms-buttonactivehover" width="1%" nowrap="nowrap" align="center"> <a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">Cancel</a> </td> </tr> </xsl:when> <xsl:otherwise> <tr> <td class="ms-vb" width="1%" nowrap=""> <a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}">update</a> </td> <td class="ms-vb" width="1%" nowrap="" style="border-left:1px black solid; padding-left:3px"> <a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_removekey={',$KeyValue,'}'))}">remove</a> </td> </tr> </xsl:otherwise></xsl:choose>
Now, we only need to copy a button and rename it. We will then set its operation:
<xsl:choose> <xsl:when test="$Mode = 'edit'"> . . . </xsl:when> <xsl:when test="$Mode = 'remove'"> <tr> <td class="ms-buttonactivehover" width="1%" nowrap="" align="center"> <a href="javascript: {code}">Terminated</a> </td> </tr> <tr> <td class="ms-buttonactivehover" width="1%" nowrap="" align="center"> <a href="javascript: {code}">Resigned</a> </td> </tr> <tr> <td class="ms-buttonactivehover" width="1%" nowrap="" align="center"> <a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">Cancel</a> </td> </tr> </xsl:when> <xsl:when test="$Mode = 'insert'"> . . . </xsl:when> <xsl:otherwise> . . . </xsl:otherwise></xsl:choose>
Oh, wait! This means we need to set the Mode somewhere.
Take a look at the code above, we will see that Mode is a parameter of the dvt_1.automode template:
<xsl:template name="dvt_1.automode"> <xsl:param name="KeyField" /> <xsl:param name="KeyValue" /> <xsl:param name="Mode" /> <xsl:param name="Pos" />
Therefore, we only need to pass "remove" to Mode when calling this template from the dvt_1.rowremove template. But remember, we name it dvt_1.rowedit. So make sure that the editing is correct:
<xsl:template name="dvt_1.rowedit"> <xsl:param name="Pos" /> <tr> <td class="ms-vb dl-l dl-t"> <asp:Label runat="server" id="ff19{$Pos}" text="{@Title}" {code} /></td> <td class="ms-vb dl-t"> <asp:Label runat="server" id="ff20{$Pos}" text="{@Positions}" {code} /></td> <td class="ms-vb dl-t"> <asp:Label runat="server" id="ff22{$Pos}" text="{@WorkShift}" {code} /></td> <td class="ms-vb dl-r dl-t"> <asp:Label runat="server" id="ff23{$Pos}" text="{@FTE}" {code} /></td> </tr> <tr> <td class="ms-vb dl-b dl-l"> <strong>Site/Department: </strong><br /> <asp:Label runat="server" id="ff18{$Pos}" text="{@LocDept}" {code} /></td> <td class="ms-vb dl-b"> <strong>Group: </strong><br /> <asp:Label runat="server" id="ff21{$Pos}" text="{@Group12}" {code} /></td> <td class="ms-vb dl-b"> <strong>Effective Date: </strong><br /> <SharePoint:FormField runat="server" id="ff17{$Pos}" controlmode="Edit" fieldname="EffDate" itemid="{@ID}" {code} /></td> <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1"> <td class="ms-vb dl-b dl-r" width="1%" nowrap=""> <xsl:call-template name="dvt_1.automode"> <xsl:with-param name="KeyField">ID</xsl:with-param> <xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" /> <xsl:with-param name="Mode">remove</xsl:with-param> <xsl:with-param name="Pos" select="$Pos"/> </xsl:call-template> </td> </xsl:if> </tr></xsl:template>
In the last 7th rows, we can see that the Mode parameter "remove" can be passed to dvt_1.automode.
Well, this article is really long... let's take a break. Next time, we will modify the operations behind these two buttons. But at least now we can see its appearance (remember: to view the remove template, You need to click the update button because we have changed the name ):
Modify the remove template and its buttons for the appearance (though not implemented)
Next time: Now, our standby editing template is built. Next we will update the form operations of the Terminated and Resigned buttons and associate them with the workflow to continue our journey of extending DVWP.
References
SharePoint: Extending the DVWP-Part 28: Massage the Remove Template