SharePoint Online 开发篇:App Part替代Content web part

歆萌 2020-01-17

Blog链接:https://blog.51cto.com/13969817

Webpart基本上是每个Portal项目中必不可少的,但是对于SharePoint Online中开发webpart并不是很随意,已经不能像On-Permise环境中可以随意开发visual webpart了,我们需要根据具体的功能进行具体的分析。

比如:Visual Studio在App.js中创建一个带有hello-worldish脚本的应用程序。该脚本检索当前用户的显示名,并将其放入默认App页面default .aspx的中。

Sample Code:

‘use strict‘;
?
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
?
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
?getUserName();
});
?
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
?context.load(user);
?context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
?
// This function is executed if the above call is successful
// It replaces the contents of the ‘message‘ element with the user name
function onGetUserNameSuccess()
?$(‘#message‘).text(‘Hello ‘ + user.get_title());
}
?
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
?alert(‘Failed to get user name. Error:‘ + args.get_message());

为了提高效率,首先我们需要分析某个区域的信息显示能否通过SharePoint的OOB的Webpart来实现,而不是需要每个Webpart都要自己开发。如果确实OOB的Webpart无法实现,我们在考虑使用App Part来实现。

对于app part上面中需要的js和css尽量使用CDN的方式引入,因为如果一个app包中包含多个app part并且在同一个页面上添加这些app part,会导致请求过多有些app site中css和js无法加载。使用CDN的方式能减少部分请求,也可以避免部分这样的问题。

为了避免多个App Part使用一个App Site,如果同一页面放了很多这样的app part会导致对这个app site的请求资源过多,带来意想不到的问题,最好每个app part单独开发一个app.
尽量减少请求次数,对于不必须要的请求我们可以通过App part的属性来替代,例如:一个完整功能的app part内部可能需要点击item跳转到view item页面,那么这个URL可以通过属性来配置,而不是通过REST API单独请求一次。

比如SharePoint Host的App Part 借助SharePoint REST API 或者JSOM来获取数据,并且画出我们想要的效果,但是这种方式我们过于依赖于SharePoint站点,也就是我们需要用到的css和js都在SharePoint站点中存在,如果我们把这个Webpart移植到另一个站点中,这个站点也必须部署相应的js和css文件,依赖性比较强。这里我们要求使用SharePoint Host App的app part来代替,因为app part实际上是一个Iframe,我们开发的App part 中使用到的js和css都是独立存在app site中的,这样便于移植。

希望本文总结对大家日后开发有所帮助。

相关推荐