ClientSideRendering basics 2

In my last post I extended the view of a list. The goal was to add the unit of measurement next to a numeric value. Now I want to extend it by adding the unit into the forms (new, edit and display) of this list.
This is how the form usually looks like:


At first we need to write the code.


All we need is the Client Side Rendering context as before. Also we are adding custom templates for the field "Power". The difference this time is that we adding the template to the forms instead of the view. Then we will render an input field and we are adding the unit behind it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
(function () { 
 // create a CSR Context
    var csrContext = {}; 
    csrContext.Templates = {}; 
 // set a new template for the field horsepower
 // add templates for the three forms
    csrContext.Templates.Fields = { 
        "Power": { 
   "NewForm": horsepowerInputFieldTemplate, 
            "EditForm": horsepowerInputFieldTemplate,
   "DisplayForm": horsepowerDisplayFieldTemplate
  } 
    };  
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(csrContext); 
})(); 
 
function horsepowerInputFieldTemplate(ctx) { 
 var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);  
    // register a callback just before submit 
    formCtx.registerGetValueCallback(formCtx.fieldName, function () { 
        return document.getElementById('inputPower').value; 
    });  
    // return an input that contains the existing value and add the unit of measurement
    return "<input id='inputPower' value='" + formCtx.fieldValue + "'/> HP"; 
}
function horsepowerDisplayFieldTemplate(ctx) { 
 var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);  
    // return only the value (no input in display form) with the unit of measurement
    return  formCtx.fieldValue + " HP"; 
}

Adding the JSLink is a bit different this time. We need to open the list. In there we can navigate in the ribbon "LIST" to the option "Form Web Parts". Here we have the choice between the three forms.

The following steps are required for each form. Clicking on the form will open it. In the opened page we can enter the edit page mode. In this mode you will see the form is just a WebPart on a site with the same seconds as the ListView WebPart from before. So at this point adding the JSLink is the same as before.

If you did it the new form looks like this:


Comments

Post a Comment

Popular posts from this blog

Refresh the User Information List in SharePoint

If you are going into the User Information List, you will sometimes see it is not up to date. There are two jobs (User Profile to SharePoint Quick Sync and User Profile to SharePoint Full Sync). The quick sync will only add new member into your list and somehow it does not work sometimes. So you need to trigger the full sync. The question is how.. there is no point in the UI to do so and not even PowerShell is able to start it. The good old stsadm will rescue us. There are two commands you need to execute in your SharePoint Managing Shell (as administrator).
More »

Get the mail address from a FieldUserValue Client Side vs Server Side

In SharePoint are two ways to code by using an object model. The one way is the Client-Side Object Modell (CSOM) and the other side is the Server-Side Object Model (SSOM). At the first look they both look the same the only difference is how the objects are looking for example the is the 'Site'-object (client side) is called 'SPSite' on server side. A good way to demonstrate the difference is to get the mailaddress of a userfield. That sounds easy, but needs more lines that I thought at first. So let's say you got a SharePoint 2013 and want to read the mailaddress on client side. That would look like this: 1 2 3 4 5 6 7 8 9 // get the userfield of the item e.q. Author FieldUserValue Author = (FieldUserValue)currentItem[ "Author" ]; // ask the web to find a user with the id in the field (only works if the user visited the site) var user = web.SiteUsers.GetById(Author.LookupId); // load the data with the context context.Load(user); context.ExecuteQue...
More »