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

 

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.


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 –
    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
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    
    (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 = '
    <div>';
    html += '<select>';
    </select>
    <select>html += '
    <option value="Choice 1">Choice 1</option>';
    </select>
    <select>html += '
    <option value="Choice 2">Choice 2</option>';
    </select>
    <select>html += '
    <option value="Choice 3">Choice 3</option>';
    </select>
    <select id="choiceTitle">html += '
    </select>';
    html += '</div>
    ';
    
    //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;
    });
    }
  4. Edit the code and change\add\remove the following choice values to the ones you need -
    1
    2
    3
    
    html += 'Choice 1';
    html += 'Choice 2';
    html += 'Choice 3';
  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
  7. Edit your form web part and expand the “Miscellaneous” properties at the bottom of the Web Part properties panel –
    Web Part Properties
  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!

SharePoint Data View XSLT Tips and Tricks – Limit text field

SharePoint Data View XSLT Tips and Tricks – Limit text field

Here is an XSLT syntax used to limit the number of characters of a text column (in this example the title field), In case the text is more than 50 characters long this function will substring it from the start and up to its last occurrence of a white space and add 3 points after it –

1
2
3
4
5
6
7
8
<xsl:choose>
  <xsl:when test="string-length(@Title) &gt; 50">
    <xsl:value-of select="concat(substring(@Title, 1, 49 + string-length(substring-before(substring(@Title, 50),' '))),'...')" />
  </xsl:when>
  <xsl:otherwise>
    <xsl:value-of select="@Title" />
  </xsl:otherwise>
</xsl:choose>

If you don’t mind your text being cut off after the limited number of characters you could use this shorter XSLT syntax –

1
2
3
4
5
6
7
8
<xsl:choose>
  <xsl:when test="string-length(@Title) &gt; 50">
    <xsl:value-of select="concat(substring(@Title, 1, 50),'...')" />
  </xsl:when>
  <xsl:otherwise>
    <xsl:value-of select="@Title" />
  </xsl:otherwise>
</xsl:choose>

To count how many characters can fit your designated area you can use this nice online tool.

This is a cool trick to use, but if your text field should fit into one row only, you shouldn’t bother with it and it will be smarter to use this CSS Truncate String with Ellipsis technique which is supported in almost all browsers (even by IE8 believe it or not!).