IT从业者必读!Sharepoint模态窗体(实战案例)

作者:广州华软 无名

一. 概述

Sharepoint提供了很多开箱即用的功能,模态窗体就是其中一个。所谓模态窗体,即在不离开当前页面的情况下,弹出一个新的独立子窗体,同时子窗体可以和父窗体进行互动。

在sharepoint中,模态窗体随处可见,例如文件上传功能、文件共享功能、文件审批等功能。

如下图:

IT从业者必读!Sharepoint模态窗体(实战案例)

二. 如何使用sharepoint模态窗体

二.1 前置条件

如果是自定义应用程序页面,需要引用sharepoint默认母版页。

二.2 Sharepoint模态窗体属性

IT从业者必读!Sharepoint模态窗体(实战案例)

二.3 父窗体代码

function Open1(){

var options = {

width: 900,//宽度

height: 550,//高度

url: “https://www.***.com” //子窗体地址

dialogReturnValueCallback: function (res, val) {

//关闭模态窗体回调函数

//约定: res 值为1 表示操作成功

// val 子窗体传递给父传递值,通过val来实现两个窗体互动

}

};

SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

}

二.4 子窗体代码

子窗体可以不做任何操作,但如果需要传递值给父窗体,则可以通过自定义关闭子窗体来实现,参考以下代码。

function Close1(){

window.frameElement.commonModalDialogClose(1/*通常用1表示操作成功*/, ‘操作成功’/*返回给父窗体值,与父窗体互动*/);

}

三. 总结

Sharepoint的模态窗体应用场景非常广泛,为我们开发类似功能提供了一种可选方案。在sharepoint中,推荐使用自带的模态窗口,当然也可以自己写代码或者使用第三方插件来实现。


分享到:


相關文章: