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 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　这里就不细讲了，基本上操作都是一样的。