Custom NewForm or EditForm

Question

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!

Answer 1

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.