SharePoint 2013 開發——開發並部署webpart
webpart我們就不詳細闡述了,在APP的開發中,自定義屬性設定通過APP webpart的URL查詢字串傳遞,它通過IFRAME來顯示遠端的內容。廢話不多說,我們開始實際操作。
開啟Visual Studio,新建SharePoint應用程式專案,名字我們就叫做SharePointAppPartTest。
參照上一篇完成專案的建立。 右鍵點選SharePoint專案節點,選擇新增->新建項,選擇客戶端Web部件(宿主Web),起名叫做ClientWebPartTest,點選確定並在下一個對話方塊中保留預設完成新增。
我們可以看到解決方案中是如下圖生成的:
SharePoint工程中有一個Elements.xml元素用來說明我們建立的webpart,託管Web應用程式中的Pages資料夾下生成了一個對應的ASPX頁面。開啟Elements.xml檔案可以看到如下預設生成的內容:
<ClientWebPart Name="ClientWebPartTest" Title="ClientWebPartTest 標題" Description="ClientWebPartTest 說明" DefaultWidth="300" DefaultHeight="200">
<!-- Content 元素標識將在客戶端 Web 部件內呈現的頁面的位置
在查詢字串上使用模式 _propertyName_ 引用了屬性
示例: Src="~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_" -->
<Content Type="html" Src="~remoteAppUrl/Pages/ClientWebPartTest.aspx?{StandardTokens}" />
<!-- 在 Properties 元素中定義屬性。
請記得在上述 Content 元素的 Src 特性上放置屬性名稱。 -->
<Properties>
</Properties>
</ClientWebPart>
我們來新增幾個屬性,在Properties節點下,宣告如下四個屬性(string、int、bool、enum):
<Property
Name="myStrProp"
Type="string"
RequiresDesignerPermission="true"
DefaultValue="String default value"
WebCategory="My Test Apps"
WebDisplayName="A property of type string.">
</Property>
<Property
Name="myIntProp"
Type="int"
RequiresDesignerPermission="true"
DefaultValue="0"
WebCategory="My Test Apps"
WebDisplayName="A property of type integer.">
</Property>
<Property
Name="myBoolProp"
Type="boolean"
RequiresDesignerPermission="true"
DefaultValue="false"
WebCategory="My Test Apps"
WebDisplayName="A property of type boolean.">
</Property>
<Property
Name="myEnumProp"
Type="enum"
RequiresDesignerPermission="true"
DefaultValue="1st"
WebCategory="My Test Apps"
WebDisplayName="A property of type enum.">
<EnumItems>
<EnumItem WebDisplayName="First option" Value="1st"/>
<EnumItem WebDisplayName="Second option" Value="2nd"/>
<EnumItem WebDisplayName="Third option" Value="3rd"/>
</EnumItems>
</Property>
都是我們測試中用的,所以名稱有些隨意,實際應用中請取有意義的名稱。 屬性建立完之後,如何與webpart進行關聯呢?我們需要修改Content節點的Src屬性,修改後的節點如下所示:
<Content Type="html" Src="~remoteAppUrl/Pages/ClientWebPartTest.aspx?{StandardTokens}&StrProp=_myStrProp_&IntProp=_myIntProp_&BoolProp=_myBoolProp_&EnumProp=_myEnumProp_&Editmode=_editMode_" />
藉助這種方式,APP webpart的引數通過URL的查詢字串傳遞到ASPX頁面,接下來我們到ASPX頁面去處理我們定義的引數。開啟ClientWebPartTest.aspx頁面,在空的DIV元素內加入如下控制元件:
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Literal ID="Literal1" runat="server" Text="Hello world from an app part!"></asp:Literal>
開啟後臺程式碼ClientWebPartTest.aspx.cs,在Page_Load方法中加入如下程式碼來獲取傳遞的引數:
var intParam = Request.QueryString["IntProp"];
var strParam = Request.QueryString["StrProp"];
var boolParam = Request.QueryString["BoolProp"];
var enumParam = Request.QueryString["EnumProp"];
var editMode = Request.QueryString["EditMode"];
if ("true" == editMode)
{
Literal1.Text = "The App Part is in edit mode";
}
else
{
Literal1.Text = "myIntProp = " + intParam + "<br>" +
"myStrProp = " + strParam + "<br>" +
"myBoolProp = " + boolParam + "<br>" +
"myEnumProp = " + enumParam;
}
var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
using (var clientContext = spContext.CreateUserClientContextForSPHost())
{
clientContext.Load(clientContext.Web, web => web.Title);
clientContext.ExecuteQuery();
this.Label1.Text = "Site Title: " + clientContext.Web.Title + "<br>";
}
程式碼中我又加了一段之前的CSOM,是想用簡單的組合來告訴大家我們其實可以在其中做很多的事情。
F5生成並部署APP,成功之後彈出瀏覽器窗體:
一樣的東西,預設會跳轉到應用程式的Default頁面,我們回到我們的開發人員網站,點選右上角的設定->編輯網頁,選擇插入選項卡,點選應用程式部件。
點選新增按鈕完成頁面中新增webpart的操作。
好了,webpart中已經顯示了我們讓它顯示的內容。
我們回到編輯狀態,編輯這個webpart,可以看到我們新增的自定義屬性。我們對屬性進行適當的修改並儲存。
以上就是開發APP webpart的大致過程。
另外一點需要說明的是,由於我們在除錯狀態下,並沒有釋出APP,所以需要Visual Studio處於除錯狀態下才可以進行訪問測試。
相關文章
- Sharepoint 開啟發布功能的PowerShell
- sharepoint 2013 網站集解鎖網站
- SharePoint 2013 workflows stop working (Failed on started.)AI
- Flutter Web 開發部署FlutterWeb
- 並行開發基礎並行
- (1)開發部署離線版本
- 規範:開發環境部署開發環境
- Sharepoint 2013搜尋服務配置總結(實戰)
- Granting and Managing Item Level Permission using SharePoint2013 Designer Workflow
- 使用Eclipse開發Java應用並部署到SAP雲平臺SCP上去EclipseJava
- 在 Kyma 雲原生平臺上開發並部署 Node.js 應用Node.js
- spring cloud開發、部署注意事項SpringCloud
- 開發利器JRebel部署SpringBoot專案Spring Boot
- 泰山眾籌商城開發、泰山眾籌DAPP系統開發、泰山眾籌原始碼部署開發APP原始碼
- matlab R2013a 生成exe 脫離matlab開發環境執行Matlab開發環境
- 如何為SAP WebIDE開發擴充套件(Extension),並部署到SAP雲平臺上WebIDE套件
- EthBox以太坊開發套件,一鍵安裝部署以太坊開發環境套件開發環境
- 合約跟單社群系統開發(開發詳細)丨合約跟單社群開發原始碼部署原始碼
- JEESZ分散式框架開發環境部署分散式框架開發環境
- 貨拉拉小程式開發(系統部署)
- 艾倍生系統開發原始碼部署原始碼
- vue-loading外掛開發+npm部署VueNPM
- 跨境商城系統開發原始碼部署原始碼
- Delphi10.3.3 部署android 開發環境Android開發環境
- 致敬社群開源介面平臺並二次開發
- 應用開發機遇與挑戰並存,開發者如何乘風破浪
- 馬蹄鏈開發詳情丨馬蹄鏈系統開發(開發流程)丨馬蹄鏈原始碼部署原始碼
- 工業場景全流程!機器學習開發並部署服務到雲端 ⛵機器學習
- 3分鐘部署mysql並開啟binlogMySql
- 從0開始,手把手教你開發並部署上線一個知識測驗微信小程式微信小程式
- 分趣投開發原理丨分趣投系統開發(開發案例)丨分趣投系統原始碼部署原始碼
- win10+vscode部署java開發環境Win10VSCodeJava開發環境
- 使用next.js完成從開發到部署JS
- dapp上鍊機制模式開發部署搭建APP模式
- Jogger慢跑者NFT系統部署開發搭建
- 新零售模式開發系統部署模式
- 東郊到家小程式開發原始碼部署原始碼
- 騰訊雲 雲開發 部署 Blazor網站Blazor網站
- Hadoop HA叢集 與 開發環境部署Hadoop開發環境