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中
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 var context; 2 var site; 3 var web; 4 5 $(document).ready(function () { 6 QuerySPData(); 7 }); 8 9 function QuerySPData() { 10 var urlParams = getQueryStringParameter(); 11 var hostWebUrl = urlParams.SPHostUrl || _spPageContextInfo.webAbsoluteUrl; 12 var appWebUrl = urlParams.SPAppWebUrl; 13 context = new SP.ClientContext(appWebUrl); 14 var appContext = new SP.AppContextSite(context, hostWebUrl); 15 site = appContext.get_site(); 16 web = context.get_web(); 17 context.load(site); 18 context.load(web); 19 context.executeQueryAsync(ShowContent, FailFunc); 20 }; 21 22 function ShowContent(sender, args) { 23 $(document.body).html("<div>" + "host web url:" + site.get_url() + " , app web url:" + web.get_url() + "</div>"); 24 } 25 26 function FailFunc(sender, args) { 27 alert(args.get_message()); 28 } 29 30 function getQueryStringParameter() { 31 var params = document.URL.split('?')[1].split('&'); 32 var result = {}; 33 for (var i = 0; i < params.length; i = i + 1) { 34 var pair = params[i].split('='); 35 result[pair[0]] = decodeURIComponent(pair[1] || ''); 36 } 37 return JSON.parse(JSON.stringify(result)); 38 }
以上的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的基本使用的介绍,更深入的调用方式在这不做介绍,日后遇到有需要特别注意地方再行记录。