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

To 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 basic JS lines we need for the Edit Form.

Hope this would help.

Advertisements

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

Continuing 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 forward.

We only need to write some lines in our JS file.

Hope this would help.

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

The 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 a demonstration of its HOWs in SharePoint Online and On-Premise.

What to be expected after the steps below? Based on user permission, the column New Form Column will be accessible. NOTE: This post will not demonstrate a column-level permission solution but it will guide us on how to manipulate a column in a New Form.

1. I started by 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.
2. 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 View Form Assets.
3. Then, I have added a module with NewForm.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.

1. I have added as well a Site Column or Field Element in my solution. I have named the field as New Form Column. This is the text column that we will manipulate later. Please note of the JSLink property. It is pointed to the NewForm.js file that will be stored in the New Form Assets document library.

1. Now is the NewForm.js file. It simple as having few functions.

NOTE: As I have mentioned above, this post will not demonstrate a column-level permission solution but it would fundamentally guide us on how to manipulate a column in a New Form. This is the reason that I have not included a screen capture of the PortalIntegrators.HasPermission function.

1. After building my solution, I have just deployed the .WSP file in the solution gallery and activated the feature.
2. And finally, I have added the New Form Column in my list. With that I could now enjoy using a customized column in my New Form.

   

   Hope this would help.

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.