Monday, March 13, 2017

JS Link Example: Display Images, Remove lookup's hyperlink, Change column names

(function () {

// function to give images in the column based on the values in o0ther columns.
    function GetTitleFieldDynamicUrl(ctx) {
        var days = ctx.CurrentItem.DaysInWorkshop;
        if(days == 0 || days == 1)
        return '<img src="/sites/03813/18/SiteAssets/Images/green.png"/>';
        if(days == 2)
        return '<img src="/sites/03813/18/SiteAssets/Images/yellow.png"/>';
    if(days >= 3)
        return '<img src="/sites/03813/18/SiteAssets/Images/red.png"/>';
    }
  // function to remove Lookup column's  link from the view
    function GetVSFieldDynamicUrl(ctx) {
    return ctx.CurrentItem.VehicleStatus[0].lookupValue;    }

function preTaskFormRenderer(renderCtx) {
       modifyColumns(renderCtx);      
    }

// function to change the names of columns in the views
    function modifyColumns(renderCtx)
    {
      var arrayLength= renderCtx.ListSchema.Field.length;
        for (var i=0; i < arrayLength;i++)
        {
           if(renderCtx.ListSchema.Field[i].DisplayName == 'OrderNo(D2S)')
             {
               var newTitle= "Order # (D2S)";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
             if(renderCtx.ListSchema.Field[i].DisplayName == 'PartsNo')
             {
               var newTitle= "Part #";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
if(renderCtx.ListSchema.Field[i].DisplayName == 'VehicleStatus')
             {
               var newTitle= "Status";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
             if(renderCtx.ListSchema.Field[i].DisplayName == 'SubStatus')
             {
               var newTitle= "Sub-Status";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
             if(renderCtx.ListSchema.Field[i].DisplayName == 'OutgoingDate')
             {
               var newTitle= "Outgoing Date";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
             if(renderCtx.ListSchema.Field[i].DisplayName == 'IncomingDate')
             {
               var newTitle= "Incoming Date";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
             if(renderCtx.ListSchema.Field[i].DisplayName == 'LicenseName')
             {
               var newTitle= "License #";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
             if(renderCtx.ListSchema.Field[i].DisplayName == 'JobCardNumber')
             {
               var newTitle= "Job Card #";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
             if(renderCtx.ListSchema.Field[i].DisplayName == 'CustomerName')
             {
               var newTitle= "Customer Name";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
             if(renderCtx.ListSchema.Field[i].DisplayName == 'DaysInWorkshop')
             {
               var newTitle= "Days in Workshop";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
             if(renderCtx.ListSchema.Field[i].DisplayName == 'AgreementChoice')
             {
               var newTitle= "Acknowledgement";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }

         }
    }
    var fieldJSLinkOverride = {};
    fieldJSLinkOverride.Templates = {};
    fieldJSLinkOverride.ListTemplateType = 100;
    fieldJSLinkOverride.OnPreRender = preTaskFormRenderer;
    fieldJSLinkOverride.Templates.Fields = {
        'StatusFlag': { 'View': GetTitleFieldDynamicUrl },
        'VehicleStatus': { 'View': GetVSFieldDynamicUrl }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJSLinkOverride);
})();

No comments:

Post a Comment

Clearing Person/Group Values

To clear out or empty the values in person or group columns, how you do it depends on if the column is single-value or multi-value. For ...