接上一篇 http://blog.csdn.net/farawayplace613/article/details/8669388。
本篇继续讲 SharePoint hosted app,将讲述MenuItemCustomAction和RibbonCustomAction。
MenuItemCustomAction和RibbonCustomAction这两个功能可以在宿主网站(Host Web)或应用网站(app web)的添加custom caction,当用点击这些action的link 时可以跳转到指定页面,并转递指定参数(可以在这个网站找到参数说明http://msdn.microsoft.com/en-us/library/jj163816.aspx)。
可以在这些跳转的目标页面解析参数并做相应处理:
1. 新建SharePoint hosted app,这一步的详细就不展开了,不知道怎么弄的同学参考上一篇 http://blog.csdn.net/farawayplace613/article/details/8669388
2. 新建一个MenuItemCustomAction
- 右击项目节点,选择"New Item"
- 选择 “Menu Item Custom Action” 点击 OK
- 选择Host Web , scope 选择“Custom List”, 点击Next
- 输入 "go to app" 作为action的label, 点击finish
3.配置和处理UrlAction
- 打开新建Menu Item Custom Action的Elements.xml,将UrlAction节点修改为:
<UrlActionUrl="~appWebUrl/Pages/CustomAction.aspx?itemId={ItemId}&listId={ListId}" />
- 在pages节点下新建 CustomAction.aspx
<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />
<script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.debug.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>
<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!-- Add your JavaScript to the following file -->
<script type="text/javascript" src="../Scripts/CustomAction.js"></script>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<div>
<p id="parametersPlaceHolder">
<!-- The following content will be replaced with the user name when you run the app - see App.js -->
initializing...
</p>
</div>
</asp:Content>
- 在Script下新建CustomAction.js并中加入如下javascript 块
var context;
var web;
var user;
// 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 () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retriveUserInfo);
});
function retriveUserInfo() {
context = SP.ClientContext.get_current();
web = context.get_web();
getUserName();
}
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
user = web.get_currentUser();
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
// This function is executed if the above OM call is successful
// It replaces the contents of the 'helloString' element with the user name
function onGetUserNameSuccess() {
var itemId = getQueryStringParameter("itemId");
var listId = getQueryStringParameter("listId");
var html = "itemId =" + itemId + "<br>";
html += "listId=" + listId;
$('#parametersPlaceHolder').html(html);
}
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
alert('Failed to get user name. Error:' + args.get_message());
}
function getQueryStringParameter(urlParameterKey) {
var params = document.URL.split('?')[1].split('&');
var strParams = '';
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split('=');
if (singleParam[0] == urlParameterKey)
return decodeURIComponent(singleParam[1]);
}
}
4. 发布(同样不展开了,不知道操作的同学参考前一篇)
5. 效果
RibbonCustomAction 这里就不细讲了,基本上操作都是一样的。