SharePoint 2013 app---SharePoint hosted app実戦(2)


続きをつけるhttp://blog.csdn.net/farawayplace613/article/details/8669388.
本編ではSharePoint hosted appに続き、MenuItemCustomActionとRibbonCustomActionについて説明します.
MenuItemCustomActionとRibbonCustomActionの2つの機能は、ホストサイト(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
  • をクリック
    SharePoint 2013 app ---SharePoint hosted app 实战(2)_第1张图片
  • actionのlabelとして「go to app」を入力しfinish
  • をクリック
    3.UrlActionの構成と処理
  • 新しいMenu Item Custom ActionのElementsを開く.xml,UrlActionノードを:
  • に変更
           
  • 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.効果
     
    SharePoint 2013 app ---SharePoint hosted app 实战(2)_第2张图片
     
    RibbonCustomActionここでは詳しくは言いませんが、基本的に操作は同じです.