NewForm and EditForm simple Field Rendering with JSLink in SharePoint 2013

NewForm and EditForm simple Field Rendering with JSLink in SharePoint 2013

I was requested to change the Title column of a tasks list to a “Choice” type of column, obviously you can’t do that with OOTB capabilities, but using JSlink CSR you can!

The end result of this post will render out our Title field like this –

Title Choice drop-down

Field Rendering with JSLink in SharePoint 2013

 

Instead of this –

Title Single line of text

 

If you are completely unfamiliar with JS link and Client Side Rendering (CSR) available in SharePoint 2013 you could start by reading this recommended tutorial on learningsharepoint.com, but if you don’t feel like it let me just say that JSlink can be used to customize List views and list forms using client side code and that you don’t have to be a SharePoint developer to use it. Field Rendering with JSLink in SharePoint 2013:


So in order to change your “Title” column into a “Choice” type column simply follow these easy steps:

  1. Open SharePoint Designer and go to your SiteAssets library.
  2. Create a new JavaScript file in your SiteAssests Library and name it “JSLink_TitleChoiceField.js”. (or you can download the script from here and upload it).
  3. Edit your file and copy the following code on to it –

    {code type=javascript}
    (function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
    ‘Title’: { ‘NewForm’: renderTitle, ‘EditForm’: renderTitle }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();

    function renderTitle(ctx) {

    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

    RegisterCallBacks(formCtx);

    var fieldVal = ctx.CurrentFieldValue ? ctx.CurrentFieldValue.toString() : null;

    var html = ‘

    ‘;
    html += ‘


    ‘;
    html += ‘

    ‘;

    //In case we open our edit form auto select the current column value
    if(fieldVal) {
    html = html.replace(‘value=\”‘+fieldVal, ‘selected=\”true\” value=\”‘+fieldVal)
    }
    return html;
    }
    //registers call back functions from SharePoint
    function RegisterCallBacks(formCtx) {
    //This is what happens when the user clicks save\submit
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {
    //get the choosen value from the select element
    var e = document.getElementById(“choiceTitle”);
    return e.options[e.selectedIndex].text;
    });
    }
    {/code}

  4. Edit the code and change\add\remove the following choice values to the ones you need –

    {code type=javascript}
    html += ‘Choice 1’;
    html += ‘Choice 2’;
    html += ‘Choice 3’;
    {/code}

  5. Go to your list and from your list settings ribbon choose ‘Form Web Parts > Default New Form’ –
    Form Web Part choice
  6. This will open your list form in edit page mode –

    Edit Form Web Part Mode

    Field Rendering with JSLink in SharePoint 2013

  7. Edit your form web part and expand the “Miscellaneous” properties at the bottom of the Web Part properties panel –

    Web Part Properties

    Field Rendering with JSLink in SharePoint 2013

  8. Copy this reference to the JS Link slot “~site/siteassets/JSLink_TitleChoiceField.js” (you can also use “~sitecollection” instead of “~site” but you have to use one of those tokens a full or relative URL just won’t work.
  9. Save the changes for your web part and follow steps 5 to 9 for your “Default Edit Form” web part.

That’s all you have to do! Short and simple! Now when you open your new item form or edit an item you should see your choice drop down instead of your single line of text title.

Credit

I used these great posts that are way more advanced than my simple solution for reference –

Lester Sconyers Jr – Custom Field Rendering with JSLink

Ross Bradbrook’s Blog – Customizing the NewForm with JSLink

I highly recommend them, thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *