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.
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:
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.
If you did it the new form looks like this:
Comments
Post a Comment