在SharePoint 2013中使用JSLink + Callout 展示信息（2）

上一篇博客在SharePoint 2013中使用JSLink + Callout 展示信息（1）中介绍了JSLink的简单用法，这篇博客继续结合Callout实现一个可以展示信息的自定义field。

上一篇文章中我们已经自定义了一个field，这里需要修改的就是flyscript.js文件，我们将向这个文件中添加callout功能（对于callout功能的介绍请参见SharePoint 2013中创建并使用Callout）。当用户点击field，弹出callout框来展示信息：

首先修改flyscript.js文件中的GetFlyingCallout方法，添加一个感叹号图标，并返回一个div元素：

function GetFlyingCallout(ctx) {
    var flyValue = ctx.CurrentItem.fly; //STSHTMLEncode needed
    var divId = "CalloutDiv" + ctx.CurrentItem.ID;
    return "<div id='" + divId + "' style=\"cursor: pointer;\" οnmοuseenter=\"InitCallout('" + divId + "','" + flyValue + "');\">  <span id=\"ms-pageDescriptionImage\">      " + flyValue + "</span></div>";
}

与上一篇文章有所不同，这里返回了一个div元素，并且为div元素指定了id，绑定了一个事件onmouseenter，当鼠标进入div区域时，将执行InitCallout方法，将callout弹出框附加到div上，InitCallout方法的代码：

function InitCallout(divId, param) {
    SP.SOD.executeFunc('callout.js', 'LoadCallOut', function () { console.log('load callout.js') });
    SP.SOD.executeOrDelayUntilScriptLoaded(function () { AddCallout(divId, param); }, 'callout.js');
}

因为callout的使用依赖于callout.js这个SharePoint提供的文件，所以InitCallout方法首先确保callout.js已经加载，方法中使用了一个技巧，使用SP.SOD.executeFunc调用一个临时的方法，这个方法仅仅向浏览器的console中输出“load callout.js”信息。这样可以加载callout.js文件，然后使用SP.SOD,.executeOrDelayUntilScriptLoaded方法来调用AddCallout方法，这个方法最终向div绑定一个callout弹出框：

function AddCallout(divId, param) {
    var calloutElement = document.getElementById(divId);

    var calloutOptions = new CalloutOptions();
    calloutOptions.ID = 'Callout_' + divId;
    calloutOptions.launchPoint = calloutElement;
    calloutOptions.beakOrientation = 'leftRight';
    calloutOptions.content = 'This is Callout Test Description';
    calloutOptions.title = 'This is Callout Test Title: ' + param;
    CalloutManager.createNewIfNecessary(calloutOptions);
}

这里的divId就是 GetFlyingCallout方法返回的div元素的id，param参数可以传入数据，这里是自定义field的值，你可以根据需要传入不同的值。

因为每次鼠标进入div元素的区域都要执行这个方法，因此使用createNewIfNecessary方法而不是createNew方法来绑定callout，createNewIfNecessary方法会判断div元素是否已经绑定callout，如果已经绑定就不会再次绑定了。

重新部署之后，添加一个item，就会看到图中的效果了。

在实际环境中，可能根据不同的需要，获取不同的数据展示出来，例如展示图表，甚至展示其他列表中的信息都可以。