SharePoint: Extended DVWP-Part 2: Improved Remove template

Document directory

• Procedure

The last time we copied the default edit template as the original content of our romove template. Therefore, it initially looks similar to editing a template.

Remove template (like the Edit template)

Now, we need to make some modifications to it:

1. We will continue with the above practices, identify different states by color-coded theme styles, and Mark remove as red.

2. Because we delete records, the only column we want users to change is audit Data. This value will be recorded in the audit list before deletion.
3. for two reasons, we will delete the record of a formal employee: resignation or dismissal. Therefore, we want two "save" buttons to mark resignation and dismissal respectively.
4. (optional) if the effective date is in the future, we may want to write it to the audit list, but then start a workflow and delete the list items after the effective date.

If we want to switch to the new remove template in the design view, we will find that it is not in the drop-down list.

No Remove template.

Therefore, when we are editing a page, We need to spoof SPD by exchanging the names of dvt_1.rowedit and dvt_1.rowremove templates. You do not need to modify the content of any other copies we copied from the default template. From:

<xsl:template name="dvt_1.rowedit">    <xsl:param name="Pos" />    <tr>        . . .    </tr></xsl:template><xsl:template name="dvt_1.rowremove">    <xsl:param name="Pos" />    <tr>        . . .    </tr></xsl:template>

......

  <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