Sharepoint模態窗體（實戰）

分享人：廣州華軟 無名

 

 

一.  前言

對SharePoint二次開發時，須要知道SharePoint有什麼、沒有什麼，才能在開發過程當中避免重複造輪子。SharePoint提供了許多開箱即用的功能，此次要介紹的就是模態窗體。

二.  目錄

1.什麼是模態窗體

2.模態窗體的做用

3.如何使用模態窗體

3.1前置條件

3.2模態窗體屬性

3.3父窗體代碼

3.4子窗體代碼

4總結

三.  什麼是模態窗體

所謂模態窗體，即在不離開當前頁面的狀況下，彈出一個新的獨立子窗體，同時子窗體能夠和父窗體進行互動。

在sharepoint中，模態窗體隨處可見，例如文件上傳功能、文件共享功能、文件審批等功能。

 

 

四. 模態窗體的做用

在不離開頁面的狀況下，與新窗體進行互動。

五.  如何使用模態窗體

5.1  前置條件

自定義應用程序頁面，需引用SharePoint母版頁

<%@ Page Language="C#" DynamicMasterPageFile="~masterurl/default.master" Inherits=" "       %>

或者，添加以下文件引用

 

<link rel="stylesheet" href="/_layouts/15/1033/styles/Themable/corev15.css?rev=Y" />

其中，1033 表示英語，2052表示簡體中文

<SharePoint:ScriptLink Name="SP.core.js" runat="server" Defer="False" Localizable="false"/>

<SharePoint:ScriptLink Name="SP.js" runat="server" Defer="True" Localizable="false"/>

<Sharepoint:ScriptLink ID="ScriptLink1" Name="sp.ui.dialog.js" LoadAfterUI="true" Localizable="false" runat="server"></Sharepoint:ScriptLink>

 

 

5.2  模態窗體屬性

標題	說明
url	子窗體url地址
html	HTML代碼，和URL二選一
x	子窗體x座標，默認居中
y	子窗體y座標，默認居中
width	寬度
height	高度
showClose	顯示關閉按鈕
autoSize	自動大小
dialogReturnValueCallback	關閉模態窗體回調函數

 

 

5.3 父窗體代碼

<button type=’button’ onclick=’Open1()’>彈出子窗體</button>

function Open1(){ 

  var options = {

            width: 900,//寬度

            height: 550,//高度

            url: 「https://www.***.com?web=1」 //子窗體地址

            dialogReturnValueCallback: function (res, val) {

                //關閉模態窗體回調函數

                //約定： res 值爲1 表示操做成功

                // val 子窗體傳遞給父傳遞值,經過val來實現兩個窗體互動

            }

        };

         

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

}

 

5.4  子窗體代碼

子窗體能夠不作任何操做，但若是須要傳遞值給父窗體，則能夠經過自定義關閉子窗體來實現，參考如下代碼。

<button type=’button’ onclick=’Close1()’></button>

function Close1(){ 

  

window.frameElement.commonModalDialogClose(1/*一般用1表示操做成功*/, ‘操做成功’/*返回給父窗體值，與父窗體互動*/);

 

}

 

六.  總結

 

SharePoint的模態窗體應用場景很是普遍，爲咱們開發相似功能提供了便利。