Creating a Display Form / Data View Web Part in SharePoint Online

I had a requirement to display a custom view for a list interface instead of the default list view in SharePoint online, I know couple of jQuery and css scripts which made life quite easier in these scenarios but still I have seen people asking how they can edit page using SharePoint Designer and how can they work on XSLT web part.

In this post, I am using a publishing site where I will not only show how to detach and reattach a page from page layout and how to edit them and will show an example to how we can create a customize interface using a XSLT web part (also called Display form or Data View web parts). These web parts are bit different from Content Query Web Part (CQWP) but both use XSLTand this can be a good example to understand a little XSLT.

We will be achieving above UI at the end of this post, so now follow below steps to achieve this.

Open a SharePoint site in SharePoint Designer and go to pages library under All files –> Pages.

Now select the page on which you want to drop the List View web part. Write click on it and click the Detach from Page Layout. You need to detach the page to open it in designer. Check below image for reference.

It will also show you a warning messaging that you are detaching the page from page layout, say yes to it.

If file is not checked out then you will also get a message to check out the file. Once you are done with detaching the page, click on the page to edit it, It will take you the manage settings page where you have to click on the edit file link to do the customization.

I have created page using blank web part page layout, you can choose any of the page layout at the time of creation as per your requirement.

Now when you clicked edit page in above file, you can see a markup page is showing up with content disabled and you can also view the markup of web part zones tag.

<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_TopLeft%>" ID="TopLeftRow">
        <ZoneTemplate></ZoneTemplate>
     </WebPartPages:WebPartZone>

Here Id and title can be different, in SharePoint Designer 2013 you cannot view the design view of the markup, all you have to do is with the markup only. Now place your cursor in between the <ZoneTemplate></ZoneTemplate>.

Now click on the insert tab on the ribbon and click on the Display Item Form button which will show you the listing of lists and libraries for the current site. This can take some time to load the listing in drop down, for me sometime it has taken 10 minutes and sometime it have shown me the listing without any wait. It will show you the option to add Custom List form so just wait for the system to respond on it J.

This will add the XSLT template for the list view which you can modify as per your requirement. I have to display multiple items listing in the web part in as customized way like a grid view control means with custom display.

Now click on the generated template from ribbon you can see the Data View Tools are available which you can use to modify to add more columns, multiple rows, filtering and sorting data etc. You can view the below picture for reference.

Now I will add my required columns and will remove all extra columns to have the required fields only and for this click on Add/Remove column button. I am sharing screen shots of all these steps which can be helpful for you that how I am making changes.

Click OK to add those fields on the page. Now I am adding paging up-to 30 items so that I can have more then one item and paging is enabled if count goes over 30, below is image for reference.

Now I have to filter the items on a specific criteria. For this I will add a parameter and then will add the filter.

Click on Parameters button which will popup a new window where you can create up-to five types of parameter, most common are Query string and Form as shown below.

I have created the Form based parameter with name paramDepartment and Form field named “Department” with default value of “Sales Engineers”. Department is the name of a custom filed in the list.

We have created the custom parameter with a default value, now create a filter for filtering data on a specific criteria, I have created the parameter to pass value by filter instead of inline value.

Click on the filter button from ribbon which will open a dialog, select field under Field name column and select comparison type equal, Not equal, contains or begins with. In value column, you can directly enter a value or can select a parameter, so here select the paramDepartment parameter.

You can also apply more filters through the filter dialog.

We have completed the information fetching criteria by applying filters, selected custom columns and selected multiple records, now we have to create a custom template or can also modify the existing template which will make it easier to show a custom view.

Save the changes, and view this page in browser to verify that data is showing properly based on the given filters.

You can see the default view is quite, it showing the multiple items but the view is not interactive, now here comes why I was going to write this complete post, we need to modify this view. For this you have to explore the xslt now, search for the “dvt_1.body” template name which is the default name template which displays data.

Below are the two areas in xslt where we are going to make changes, let’s have a look on the xslt content which is showing and iterating the items.

<xsl:choose>
      <xsl:when test="$dvt_IsEmpty">
        <xsl:call-template name="dvt_1.empty"/>
      </xsl:when>
      <xsl:otherwise>
        <table border="0" width="100%">
          <xsl:call-template name="dvt_1.body">
            <xsl:with-param name="Rows" select="$Rows"/>
            <xsl:with-param name="FirstRow" select="1" />
            <xsl:with-param name="LastRow" select="$LastRow - $FirstRow + 1" />
          </xsl:call-template>
        </table>
      </xsl:otherwise>
    </xsl:choose>

This show the basic structure which we will change a little for the customized view. Above xslt template is iterating items to default view. We need to modify it a little as below:

<xsl:choose>
      <xsl:when test="$dvt_IsEmpty">
        <xsl:call-template name="dvt_1.empty"/>
      </xsl:when>
      <xsl:otherwise>
        <table border="0" width="100%">
          <tr>
            <td>
            <table border="0" cellspacing="0" width="100%" class="zContacts">
              <tr>
              <th ></th>
              <th>Full Name</th>
              <th>Email</th>
              <th>Office</th>
              <th>Region</th>
              <th>Specialty</th>
            </tr>
              <xsl:call-template name="dvt_1.body">
              <xsl:with-param name="Rows" select="$Rows"/>
              <xsl:with-param name="FirstRow" select="1" />
              <xsl:with-param name="LastRow" select="$LastRow - $FirstRow + 1" />
            </xsl:call-template>
            </table>
          </td>
          </tr>        
        </table>
      </xsl:otherwise>
    </xsl:choose>

We just added a new table with custom css and table headers which you can see in bold text above, now we to go to the other part of xslt which is listing the items. Scroll down to dvt_1.rowview template, here you can see the html markups with some xlst fields which are showing items in the default content.

<xsl:template name="dvt_1.rowview">
    <tr>
      <td>
        <table border="0" cellspacing="0" width="100%">
          <tr>
            <td width="25%" class="ms-vb">
              <b>Full Name:</b>
            </td>
            <td width="75%" class="ms-vb">
              <xsl:value-of select="@Title"/>
            </td>
          </tr><tr>
            <td width="25%" class="ms-vb">
              <b>Image:</b>
            </td>
            <td width="75%" class="ms-vb">
              <img border="0" src="{@Image}" alt="{@Image.desc}" /></td></tr><tr>
            <td width="25%" class="ms-vb">
              <b>Email:</b>
            </td>
            <td width="75%" class="ms-vb">
              <xsl:value-of select="@Email" />
            </td></tr><tr>
            <td width="25%" class="ms-vb">
              <b>Office:</b>
            </td>
            <td width="75%" class="ms-vb">
              <xsl:value-of select="@Office" />
            </td></tr><tr>
            <td width="25%" class="ms-vb">
              <b>Region:</b>
            </td>
            <td width="75%" class="ms-vb">
              <xsl:value-of select="@Region" />
            </td></tr><tr>
            <td width="25%" class="ms-vb">
              <b>Speciality:</b>
            </td>
            <td width="75%" class="ms-vb">
              <xsl:value-of select="@Speciality" />
            </td></tr>
          <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
            <tr>
              <td colspan="99" class="ms-vb">
                <span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span>
              </td>
            </tr>
          </xsl:if>
        </table>
      </td>
    </tr>
  </xsl:template>

You can see this is quite much markup for small task, so we totally change this content to achieve our required output, modify this content.

<xsl:template name="dvt_1.rowview">
    <tr>
      <td > <img border="0" src="{@Image}" alt="{@Image.desc}" /></td> 
      <td> <xsl:value-of select="@Title"/> </td>
      <td > <xsl:value-of select="@Email" /> </td>
      <td > <xsl:value-of select="@Office" />  </td>
      <td > <xsl:value-of select="@Region" /> </td>
      <td > <xsl:value-of select="@Speciality" />  </td>
    </tr>
  </xsl:template>

Now here you can see the difference, this is just a little but smart modification in XSLT Data View web part. Save the page and open in browser to see the changes.

I also remove the title appearance to none for this web part properties through browser. The view is changed and you can see it now showing up in a grid or listing view, now itjust need to apply a small css to do the branding. There are many good examples of css and javascript shared by different sites, I copied a simple css and just changed the color scheme for my view.

table.zContacts {
  font-family: verdana,arial,sans-serif;
  font-size:11px;
  color:#333333;
  border-width: 1px;
  border-color: #C1C8D5;
  border-collapse: collapse;
}
table.zContacts th {
  background:#7caeff;
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #C1C8D5;
}

/* provide some minimal visual accomodation for IE8 and below */
table.zContacts tr{
    background: #c9ddff;
  }
  /*  Define the background color for all the ODD background rows  */
table.zContacts tr:nth-child(odd){ 
    background: #c9ddff;
  }
  /*  Define the background color for all the EVEN background rows  */
table.zContacts tr:nth-child(even){
    background: #eff5ff;
  }
table.zContacts td {
  /*background:#dcddc0 url('cell-grey.jpg'); */
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #C1C8D5;
}

This css will show alternate rows for the custom view. You need to save it in your custom css file. I always create a custom css file in my sharepoint site where I can include the custom css content. Below is the output after adding Css.

After making all the changes, go to the pages library from SharePoint Designer (similar steps as I have mentioned at start of this article) and reattach it to pagelayout and then checkIn the file.

This is how we can add and customize DataView web part (or XSLT Web part) using SharePoint designer.