Friday, December 22, 2017

JS Link use to display image hyperlink to List view column

Hi All,

I had a task to display an image hyperlink for the list view column. By clicking the image it will navigate to a page which is styled in print view of page.

At first, I added a single line of text field - PrintForm. Then I create a custom standard view- Print View. 'PrintForm' will be available in 'PrintView.aspx'.
I edit the page at first and then edit the web part which contains the web part.
I wrote a small JS code to achieve the functionality.

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  Templates: {
Fields: {
           'PrintForm': {'View':function(ctx) {         
           return String.format("<a href='<CustomizedDisplayForm>.aspx?ID={0}' target='_blank'><img src='<ImageUrl>' width='42' height='42'></a>",  ctx.CurrentItem.ID);
}}

        }//Fields
  }//Templates
});
})


Once I completed the JS code, I appended the path of .js file to JS link in Miscellaneous section. After I saved the changes, the view would like as shown below.






Thanks for reading my post, I'll write another for print section.

No comments:

Post a Comment