Elczar Adame's Shared Points on SharePoint

Archive for August, 2013

Client-Side Rendering in View Form for SharePoint Online and On-Premise


Client-Side Rendering is a new concept available in SharePoint 2013. This number of posts will not discuss the WHATs and WHYs of Client-Side Rendering but it will provide several demonstrations of its HOWs in SharePoint Online and On-Premise.

There are several ways to customize a column in a View Form, but in this piece I will demonstrate the steps that I have followed:

  1. Initially, I have created a Custom List with a choice/dropdown column named View Form Column. The column has a selectable values of Pending, Approved, and Rejected.

    What to be expected after the steps below? The values in the View Form Column will be replaced by graphical representations. This is not to mention that it could be replaced by any HTML object.

  2. Then, I started creating a SharePoint solution in Visual Studio. Since it is designed for SharePoint Online and On-Premise, I have chosen sandboxed solution as its trust level.
  3. In my solution, I have added a List module to create a document library that will hold the .js file that we will be creating in a while. I have named the document library as ViewFormAssets.
  4. Then, I have added a module with ViewForm.js file. This file will be discussed in the succeeding steps. At this point enough to have a blank .js file. Notice that the URL of the .js file is pointed to the document library we have just created.

  5. I have added as well a Site Column or Field Element in my solution. I have named the field as View Form Column. This is the choice/dropdown column that we will customize later. Please note of the JSLink property. It is pointed to the ViewForm.js file that will be stored in the ViewFormAssets library.

  6. Now is the ViewForm.js file. It simple as having three functions.

  7. After building my solution, I have just deployed the .WSP file in the solution gallery and activated the feature.

  8. And finally, I have added the View Form Column in my list. With that I could now enjoy using a customized column in my View Form.

    In my next demonstrations, let us attempt to customize the column in an Add Form, Edit Form, and Display Form.

    Hope this would help.

Tag Cloud