0
0 Comments

Thanks for coming in :-). The title of this post is long, but I needed to get this right. I am trying to produce a .js file that I can link to via JS link on a List View Web Part that is displayed on a Wiki page. I have culled the web fairly deeply on this and have found MANY bits and pieces for the job, but nothing all-together yet. Maybe we can get this done for our “people”. Here are the requirements I want to satisfy:

  1. Open List View field of type Hyperlink in a modal window on-click; NOT “Title” field
  2. Implement proper Minimal Download Strategy (MDS) for the page; best practice & performance
    • Referenced Info… – I want to implement the Namespace-type of script per his example; MDS appears to mandate it’s use.
  3. Implement targeted behavior so that the JS link applied to the web part will not alter other web parts on the dashboard

I am just now cutting my teeth on JavaScript, as it looks like the future of SharePoint development, and I am not able to get this worked through so far :-(. I think the web could really benefit on a holistic approach to this all saved in one place. Up for the challenge?

Here is my code attempt:
//Handle MDS Garbage Collection via MS Ajax
Type.registerNamespace(‘Alan’)

//Declare Namespace for JS
Alan.Demos=Alan.Demos || {};
Alan.Demos.Templates=Alan.Demos.Templates || {}
Alan.Demos.Functions=Alan.Demos.Functions || {}

Alan.Demos.Functions.Display = function (context) {
//var itemLink=context.CurrentItem.link
var viewModal=context.CurrentItem.link;
var itemID=context.CurrentItem.ID;
var itemTitle=context.CurrentItem.Title;
var url=context.CurrentItem.link;
var urlDesc=context.CurrentItem[‘link.desc’];
return “<a href=’#’ onclick=\”viewModal(‘”+url+”‘,'”+itemTitle+”‘)\”>” +urlDesc+ “</a>”;
}

Alan.Demos.Templates.Fields = {
‘link’: {
‘DisplayForm’: Alan.Demos.Functions.Display,
‘View’: Alan.Demos.Functions.Display,
‘NewForm’: null,
‘EditForm’: null
}
}

Alan.Demos.Functions.viewModal = function (url,title) {
var options = {
title: “Item: “+title,
//Undefined width & height = autosized modal
//width: 600,
//height: 600,
url: url
}//;
SP.UI.ModalDialog.showModalDialog(options);
//    return false;
}

Alan.Demos.Functions.RegisterField = function () {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(Alan.Demos)
}

Alan.Demos.Functions.MdsRegisterField = function () {
var thisUrl = _spPageContextInfo.siteServerRelativeUrl
+ “zWebDev.js”;
Alan.Demos.Functions.RegisterField();
RegisterModuleInit(thisUrl, Alan.Demos.Functions.RegisterField)
}

if (typeof _spPageContextInfo != “undefined” && _spPageContextInfo != null) {
Alan.Demos.Functions.MdsRegisterField()
}

else {
Alan.Demos.Functions.RegisterField()
}

I keep getting the error that viewModal is undefined, but else seems to work. Please give me a hand. Thanks!

(Visited 125 times, 1 visits today)
Add a Comment