Elczar Adame's Shared Points on SharePoint


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.

Advertisements

Comments on: "Client-Side Rendering in View Form for SharePoint Online and On-Premise" (6)

  1. […] same with my previous post on Client-Side Rendering in View Form, this post will not discuss as well the WHATs and WHYs of Client-Side Rendering but it will provide […]

  2. […] my previous posts on Client-Side Rendering in View Form and Client-Side Rendering in New Form, the implementation in Display Form is as well straight […]

  3. […] complete my previous posts on Client-Side Rendering in View Form, Client-Side Rendering in New Form, and Client-Side Rendering in Display Form, I am sharing the […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: