SharePoint App开发随笔------之JSOM(JavaScript Object Model)

1.使用Visual studio 2015，new project->App for SharePoint

本次使用SharePoint-hosted类型的host，至于Provider-hosted和SharePoint-hosted的区别，可以点“Learn more about this choice”看详细介绍，这里不做详细解释；

2.创建好后的文件结构如下：

各个folder的作用“见名知意”，不浪费时间解释；

3.本次通过在APP中添加一个WebPart来学习JSOM（JavaScript Object Model），选中工程，右键Add New Item，在Office/SharePoint中选择Client Web Part(Host Web)，之后工程下面会出现一个和webpart同名的folder，如上图的myselfWP1，同时Pages下也会多出一个和webpart同名的aspx文件myselfWP1.aspx，实际webpart相当于嵌套在主页中的一个子页，按正常的aspx页进行开发即可，这里不多做介绍；

4.在Scripts下添加一个新的JavaScript文件ForMyselfWP1.js，并在myselfWP1.aspx中引用sp.js，sp.runtime.js这两个文件，这相当开发SharePoint程序时引用SharePont的类库，同时引用新添加的JS文件ForMyselfWP1.js，如下图

 ForMyselfWP1.js的功能是在Page加载的时候，访问SharePoint host web和app web上的数据，并把数据显示在WebPart中

var context;
var site;
var web;

$(document).ready(function () {
    QuerySPData();
});

function QuerySPData() {
    var urlParams = getQueryStringParameter();
    var hostWebUrl = urlParams.SPHostUrl || _spPageContextInfo.webAbsoluteUrl;
    var appWebUrl = urlParams.SPAppWebUrl;
    context = new SP.ClientContext(appWebUrl);
    var appContext = new SP.AppContextSite(context, hostWebUrl);
    site = appContext.get_site();
    web = context.get_web();
    context.load(site);
    context.load(web);
    context.executeQueryAsync(ShowContent, FailFunc);
};

function ShowContent(sender, args) {
    $(document.body).html("<div>" + "host web url:" + site.get_url() + " , app web url:" + web.get_url() + "</div>");
}

function FailFunc(sender, args) {
    alert(args.get_message());
}

function getQueryStringParameter() {
    var params = document.URL.split('?')[1].split('&');
    var result = {};
    for (var i = 0; i < params.length; i = i + 1) {
        var pair = params[i].split('=');
        result[pair[0]] = decodeURIComponent(pair[1] || '');
    }
    return JSON.parse(JSON.stringify(result));
}

以上的JS并不复杂，有一定JS功底的都可以看懂，但是13-19行的部分看起来可能会比较陌生，这部分正是标题所提到的JSOM，如果是接触过SharePoint online CSOM的同学，对这一部分的调用方式应该很熟悉，先构造ClientContext，之后一步步的点出来你需要的对象，之后使用load方法加载你需要的对象和对象上的特定属性，最后调用executeQuery方法真正的执行，方法名可能略有不同，但是大体的功能是相同的。

眼尖的可能已经看到了，new SP.ClientContext的时候传入的是appWebUrl，而new SP.AppContextSite传入的是hostWebUrl，这和SharePoint online CSOM调用的方式不太一样， 从App web的url大概能推测出原因，App web url的格式是https://TenantName-apphash.sharepoint.com/sites/SCName/AppName

，App web和host web是处于不同的domain中，所以在App中方法host web中的属于相当于cross domain，cross domain相关的知识可参考Access SharePoint data from add-ins using the cross-domain library中的介绍，如果你的app需要访问同一个site collection下的不同web，就需要以上code中构造context site的方式，如果App只需要访问App web，就不需要new SP.AppContextSite，仅仅使用new SP.ClientContent即可。

5.JS写完了，右键工程deploy，对于没有使用VS部署过App Office 365 site collection，此时会报错，提示“Sideloading of apps is not enabled on this site”，这是由于site collection级别的一个叫做Feature：Enable sideloading of Apps for Office and SharePoint没有开，对应的Feature ID是AE3A1339-61F5-4f8f-81A7-ABD2DA956A7D，使用tool或者写个powershell脚本给激活即可，重新Deploy，部署成功后，会创建出来一个和App name相同的App web。

6.在站点home页中添加App中的web part，但是界面上竟然报错了“access deniedXXXXXXX”，这是怎么回事，看error信息像是权限不够，但是App的权限怎么加呢？回头看下第二步中的截图，会发现一个叫做AppManifest.xml文件，双击文件，如下图

每种权限的具体权限可以点击图中的链接“Learn more about app authentication policy”，根据JS中进行的具体操作来决定给予App什么权限，添加好需要的权限，之后重新Deploy，前台页面会提示App需要的权限，其中包括刚新添加的权限

如果客户对App权限有很高要求，在设置权限时，需要确定好需要的最小权限。

 

结语：以上只是对于JSOM的基本使用的介绍，更深入的调用方式在这不做介绍，日后遇到有需要特别注意地方再行记录。