Custom NewForm or EditForm
-
10-10-2020 - |
Вопрос
If I use SharePoint 2013 Designer to create a new form, e.g., NewForm1 or EditForm1, and then open it up in (in the Designer) I can further modify the XSL in the DataFormWebPart that will render the HTML for the form.
The XSL is a table of rows; each row having two elements, one for the field name, and the one for the field data; one field per row.
Can someone tell me the best way to modify the XSL in order to put 2 fields on the same row.
Thanks!
Решение
You can simply restructure the HTML table. Assuming the default layout is as follows:
__________________________
|Field1| |
|______|___________________|
|Field2| |
|______|___________________|
|Field3| |
|______|___________________|
And the corresponding code is:
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Field1<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Field2</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Field2" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Field2')}"/>
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Field2" ControlMode="New"/>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Field3</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody" colspan="3">
<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Field3" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Field3')}"/>
<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Field3" ControlMode="New"/>
</td>
</tr>
Restructuring the table to:
<tr>
<td width="60px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Field1<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</td>
<td width="200px" valign="top" class="ms-formbody">
<SharePoint:FormField DisplaySize="30" runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
</td>
<td width="60px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Field2</nobr>
</H3>
</td>
<td width="200px" valign="top" class="ms-formbody">
<SharePoint:FormField DisplaySize="30" runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Field2" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Field2')}"/>
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Field2" ControlMode="New"/>
</td>
</tr>
<tr>
<td width="60px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Field3</nobr>
</H3>
</td>
<td width="200px" valign="top" class="ms-formbody" colspan="3">
<SharePoint:FormField DisplaySize="30" runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Field3" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Field3')}"/>
<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Field3" ControlMode="New"/>
</td>
</tr>
Will give you:
_________________________________________
|Field1| |Field2| |
|______|_____________|______|_____________|
|Field3| |
|______|_____________|
Note that I changed the width of the <td>-elements, added DisplaySize="30" to the <SharePoint:FormField> (otherwise they might get too long) and added colspan="3" to the 2nd <td> element of Field3.