Easy Tabs v-5 for SharePoint 2013

Easy Tabs v-5 for SharePoint 2013

Easy Tabs v-5 is a great script you can use to bind your SharePoint web parts in Tabs that’s been around since MOSS 2007!
The best thing about this tabs script is that it’s generic and that it works in a “Copy & Paste” kinda way, so that it can be used simply by any end-user without knowing JavaScript.
It binds all the web parts inside the same web part zone in tabs and uses their titles for their related tab title.
You can generate the script here at the User Managed Solutions site
But they haven’t released a 2013 version.. Luckily Venkatesh Ramasamy fixed the code so that it would work in SharePoint 2013.
His code along with instructions for using the script can be found here.
I got to use this script lately and it worked perfectly, I’ve made some CSS adjustments and added some CSS3 simple transitions to make it look more modern as you can see here:

Easy Tabs 2013

Easy Tabs 2013

Also I’ve added some documentation to the script, to make changes easier, you can copy my modified script from here –

{code type=css}

{code type=javascript}


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 }

    function renderTitle(ctx) {

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


    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;

  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’;

  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.


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!