5

enter image description here

In the SharePoint List NewForm.aspx I have to design the form like two text boxes side by side with the headings? Is it Possible to design like that? Can any one help me on this issue?

0

You can use JSLink to achieve this. I have published a post on how you can do this. Check out Customizing SharePoint Forms using JSLink

2

I tried it now in SharePoint 2013 and with SharePoint Designer.

First you have to do the steps Amit described here: show-list-fields-side-by-side

  1. Open the site which contains the list in SharePoint Designer 2013.
  2. Select the List from List and Libraries section.
  3. Select your list.
  4. Under the forms section, click on New.
  5. On the popup, provide your form name and select New\Edit\Display.
  6. Check the set as default form.... checkbox and click on 'Ok'.
  7. Now a form will be opened. You can change its layout as you want and save the changes.

Then if you create a new CustomNewForm.aspx you can change everything you want.

I created a list called side-by-side with the columns:

  1. Title
  2. Available
  3. YTD

My final result after changing the CusomNewForm is this:

enter image description here

Not perfect, but a step into the right direction. Here are the essential parts of my CustomNewForm.aspx (row 106 - 126):

<xsl:template name="dvt_1.rowedit">
        <xsl:param name="Pos" select="position()"/>
        <tr>
            <td>
                <table border="0" cellspacing="0" width="100%">
                    <tr>
                        <td width="100px" valign="top" class="ms-formlabel">
                        </td>
                        <td width="190px" valign="top" class="ms-formlabel">
                        </td>
                        <td style="padding-right:10px" width="190px" valign="top" class="ms-formlabel">
                            <H3 class="ms-standardheader">
                                <nobr>Available</nobr>
                            </H3>
                        </td>
                        <td width="190px" valign="top" class="ms-formlabel">
                            <H3 class="ms-standardheader">
                                <nobr>YTD</nobr>
                            </H3>
                        </td>
                    </tr>

And row 127 - 148:

<tr>
                        <td width="100px" valign="top" class="ms-formlabel">
                            <H3 class="ms-standardheader">
                                <nobr>Title<span class="ms-formvalidation"> *</span>
                                </nobr>
                            </H3>
                        </td>

                        <td style="padding-right:10px" width="190px" 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>

                        <td style="padding-right:10px" width="190px" valign="top" class="ms-formbody">
                            <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Available" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Available')}"/>
                            <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Available" ControlMode="New"/>
                        </td>
                        <td width="190px" valign="top" class="ms-formbody">
                            <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="YTD" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@YTD')}"/>
                            <SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="YTD" ControlMode="New"/>
                        </td>
                    </tr>

Also important, if you want to get the fields smaller, you have to add a css snippet in your form. I used:

<style>
.ms-long{width:100px;}
</style>

Hope this will help you a little bit.

  • Hi Patrick. Is it possible in javascript or css? My requirement is to do in custom code that too javascript or css and not by visual studio – Gracy Feb 25 '16 at 13:52
  • puhhh, That's above my knowledge. I'm sorry. – Patrick Feb 25 '16 at 14:06
  • how to implement the section-wise UI Form for newform.aspx in SPLIST in SP online – SaMolPP Apr 1 at 15:25

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.