Okay, so i got this task, where i had to customize a list view web part to show the latest title, details and rules of a list item along with its image from the library. So here is what i did:
1) Create a view showing the latest record (make sure that the item limit is set to one)
2) Add a list view web part of the list/library you wanna show in a site page (set the view the one you created having only one record)
3) Now create a .js file having the below code
window.TESTOBJECT = window.TESTOBJECT || {};var CustomItemHTML = “”;window.TESTOBJECT.CustomItem = {customItemHtml: function (ctx) {CustomItemHTML = “<img src='” + ctx.CurrentItem.AssociatedImage+ “‘ />”;CustomItemHTML += “” + ctx.CurrentItem.CustomDetails + ““;
CustomItemHTML += “” + ctx.CurrentItem.CustomRules + ““;
return CustomItemHTML ;}};(function () {var overrideCtx = {};overrideCtx.Templates = {};overrideCtx.Templates.Header = ““;overrideCtx.Templates.Item = window.TESTOBJECT.CustomItem.customItemHtml;overrideCtx.Templates.Footer = ““;
overrideCtx.BaseViewID = 1;overrideCtx.ListTemplateType = 101;SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);})();$(document).ready(function () {$(“#idCustom”).find(‘#scriptBodyWPQ2’).remove();});
4) Now add the URL to the js in the JS Link section of your list view web part properties
5) Save and Done
Now i will not explain you the layout, i believe you can understand it.
Check the below link for better understanding,
Leave a comment