0

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!

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.