SharePoint 2013 app ---SharePoint hosted app 实战(2)

接上一篇 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}&amp;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 informationfunction 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 namefunction 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 failsfunction 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　这里就不细讲了，基本上操作都是一样的。