クライアント側レンダリングを使用して SharePoint アドインのリスト ビューをカスタマイズするCustomize a list view in SharePoint Add-ins using client-side rendering

SharePoint では、クライアント側レンダリングは、SharePoint ページでホストされる一連のコントロールに対して独自の出力を生成する方法を提供します。In SharePoint, client-side rendering provides a way for you to produce your own output for a set of controls that are hosted on a SharePoint page. この方法では、HTML や JavaScript などの周知のテクノロジを使用して、SharePoint リスト ビューのレンダリング ロジックを定義できます。It enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of SharePoint list views. クライアント側レンダリングでは、独自の JavaScript リソースを指定し、それらをドキュメント ライブラリなど、アドインが使用できるデータ ストレージ オプションにホストできます。With client-side rendering, you can specify your own JavaScript resources and host them in the data storage options that are available to your add-ins, such as in a document library. SharePoint ホスト型アドインに含まれるのは、SharePoint コンポーネントだけです。A SharePoint-hosted add-in includes only SharePoint components. SharePoint ホスト型アドインでは、アドイン Web と呼ばれるホスト Web の分離サブサイトにリソースが存在します。A SharePoint-hosted add-in has its resources in an isolated subsite of the host web, called the add-in web.

この記事の例を使用するための前提条件Prerequisites for using the examples in this article

この例の手順を実行するには、以下が必要です。To follow the steps in this example, you need the following:

ニーズに合った開発環境をセットアップする方法についてのガイダンスは、「2 種類の SharePoint アドイン: SharePoint ホスト型とプロバイダー向けのホスト型」を参照してください。Note For guidance about how to set up a development environment that fits your needs, see Start building Office and SharePoint Add-ins.

クライアント側レンダリングによるリスト ビューのカスタマイズについて理解するために役立つ中心概念Core concepts to help you understand list view customization with client-side rendering

次の表に、リスト ビューのカスタマイズのシナリオに関係する概念を理解するために役立つ記事を示します。The following table lists useful articles that can help you understand the concepts that are involved in a list view customization scenario.

記事のタイトルArticle title 説明Description
SharePoint アドインSharePoint Add-ins エンドユーザー向けの小型で使いやすいソリューションであるアドインを作成できる、Microsoft SharePoint の新しいアドイン モデルについて説明します。Learn about the new add-in model in Microsoft SharePoint that enables you to create add-ins, which are small, easy-to-use solutions for end users.
SharePoint アドインの UX 設計UX design for SharePoint Add-ins SharePoint アドインを作成するときに使用する UX オプションについて説明します。Learn about the UX options that you have when you are building SharePoint Add-ins.
SharePoint のホスト Web、アドイン Web、および SharePoint コンポーネントHost webs, add-in webs, and SharePoint components in SharePoint ホスト Web とアドイン Web の違いについて説明します。SharePoint アドイン に含めることのできる SharePoint コンポーネント、ホスト Web に展開するコンポーネント、アドイン Web に展開するコンポーネント、およびアドイン Web を分離ドメインに展開する方法について説明します。Learn about the difference between host webs and add-in webs. Find out which SharePoint components can be included in a SharePoint Add-in, which components are deployed to the host web, which components are deployed to the add-in web, and how the add-in web is deployed in an isolated domain.

コード例: クライアント側レンダリングを使用してリスト ビューをカスタマイズするCode example: Customize a list view by using client-side rendering

以下の手順では、アドイン Web に展開されるリスト ビューを、クライアント側レンダリングを使用してカスタマイズする方法が示されています。The following steps show you how to customize a list view that is deployed to the add-in web by using client-side rendering.

  1. SharePoint アドイン プロジェクトを作成します。Create the SharePoint Add-in project.

  2. カスタム ビューを使用する新しいリスト定義を作成します。Create a new list definition with a custom view.

  3. JavaScript ファイルにカスタム レンダリング ロジックを指定します。Provide the custom rendering logic in a JavaScript file.

次の図に、クライアント側レンダリングで表示したお知らせリスト ビューを示します。Figure 1 shows a client-side rendered view of an announcements list.

お知らせリストのカスタム ビューCustom view of an announcements list

お知らせリストのカスタム ビュー

SharePoint アドイン プロジェクトを作成するにはTo create the SharePoint Add-in project

  1. 管理者として Visual Studio 2015 を開きますOpen Visual Studio 2015 as administrator. (これを行うには、[スタート] メニューの [Visual Studio] アイコンを右クリックし、[管理者として実行] を選択します)。Open Visual Studio as administrator. (To do this, right-click the Visual Studio icon on the Start menu, and choose Run as administrator.)

  2. SharePoint アドイン テンプレートを使用して、新しいプロジェクトを作成します。Create a new project using the SharePoint Add-in template.

    次の図は、[テンプレート] > [Visual C#] > [Office/SharePoint] > [Office アドイン] の下の Visual Studio 2015 の SharePoint アドイン テンプレートの場所を示しています。Figure 2 shows the location of the SharePoint Add-in template in Visual Studio 2015, under Templates > Visual C# > Office/SharePoint > Office Add-ins.

    Visual Studio の SharePoint アドイン テンプレートFigure 2. Add-in for SharePoint Visual Studio template

    SharePoint 用アプリの Visual Studio テンプレート

  3. デバッグに使用する SharePoint Web サイトの URL を入力します。Provide the URL of the SharePoint website that you want to use for debugging.

  4. アドインのホスティング オプションとして、[ SharePoint ホスト型] を選択します。Select SharePoint-hosted as the hosting option for your add-in.

新しいリスト定義を作成するにはTo create a new list definition

  1. SharePoint アドイン プロジェクトを右クリックし、新しい リスト項目を追加します。お知らせを基にしたカスタマイズ可能なリストを作成してください。Right-click the SharePoint Add-in project, and add a new List item. Create a customizable list based on Announcements.

  2. 次のマークアップをコピーし、リスト フィーチャーの Schema.xml ファイル内の Views 要素に貼り付けます。マークアップは以下のタスクを実行します。Copy the following markup and paste it in the Views element in the Schema.xml file of your list feature. The markup performs the following tasks:

    • BaseViewID=2 の Overridable という名前の新しいビューを宣言します。Declares a new view named Overridable with a BaseViewID=2.

    • JSLink 要素の値を指定します。この値はアドインでプロビジョニングされた JavaScript ファイルを参照します。Provides a value for the JSLink element that points to a JavaScript file that is provisioned with the add-in.

      注意

      JSLink プロパティは、アンケート リストやイベント リストではサポートされません。SharePoint の予定表は、イベント リストです。The JSLink property is not supported on Survey or Events lists. A SharePoint calendar is an Events list.

      <View BaseViewID="2" 
        Name="8d2719f3-c3c3-415b-989d-33840d8e2ddb" 
        DisplayName="Overridable" 
        Type="HTML" 
        WebPartZoneID="Main" 
        SetupPath="pages\viewpage.aspx" 
        Url="Overridable.aspx"
        DefaultView="TRUE">
      <ViewFields>
        <FieldRef Name="Title" />
      </ViewFields>
      <Query />
      <Toolbar Type="Standard" />
      <XslLink>main.xsl</XslLink>
      <JSLink Default="TRUE">~site/Scripts/CSRListView.js</JSLink>
      </View>
      


JavaScript ファイルでカスタム レンダリング ロジックを定義するにはTo provide the custom rendering logic in a JavaScript file

  1. [Scripts] フォルダーを右クリックし、新しい JavaScript ファイルを追加します。Right-click the Scripts folder, and add a new JavaScript file. Name the fileCSRListView.js. ファイルに CSRListView.js という名前を付けます。Name the file CSRListView.js.

  2. 次のコードをコピーし、CSRListView.js ファイルに貼り付けます。コードは以下のタスクを実行します。Copy the following code and paste it in the CSRListView.js file. The code performs the following tasks:

    • PreRender イベントと PostRender イベントのイベント ハンドラーを用意します。Provides event handlers for the PreRender and PostRender events.

    • ヘッダー、フッター、およびアイテム テンプレート セットのテンプレートを用意します。Provides templates for the Header, Footer, and Item template sets.

    • テンプレートを登録します。Registers the templates.

      
      (function () {
        // Initialize the variable that stores the objects.
        var overrideCtx = {};
        overrideCtx.Templates = {};
      
        // Assign functions or plain html strings to the templateset objects:
        // header, footer and item.
        overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B>" +
            "<hr><ul id='unorderedlist'>";
      
        // This template is assigned to the CustomItem function.
        overrideCtx.Templates.Item = customItem;
        overrideCtx.Templates.Footer = "</ul>";
      
        // Set the template to the:
        //  Custom list definition ID
        //  Base view ID
        overrideCtx.BaseViewID = 2;
        overrideCtx.ListTemplateType = 10057;
      
        // Assign a function to handle the
        // PreRender and PostRender events
        overrideCtx.OnPreRender = preRenderHandler;
        overrideCtx.OnPostRender = postRenderHandler;
      
        // Register the template overrides.
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
      })();
      
      // This function builds the output for the item template.
      // It uses the context object to access announcement data.
      function customItem(ctx) {
      
        // Build a listitem entry for every announcement in the list.
        var ret = "<li>" + ctx.CurrentItem.Title + "</li>";
        return ret;
      }
      
      // The preRenderHandler attends the OnPreRender event
      function preRenderHandler(ctx) {
      
        // Override the default title with user input.
        ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
      }
      
      // The postRenderHandler attends the OnPostRender event
      function postRenderHandler(ctx) {
      
        // You can manipulate the DOM in the postRender event
        var ulObj;
        var i, j;
      
        ulObj = document.getElementById("unorderedlist");
      
        // Reverse order the list.
        for (i = 1; i < ulObj.children.length; i++) {
            var x = ulObj.children[i];
            for (j = 1; j < ulObj.children.length; j++) {
                var y = ulObj.children[j];
                if(x.innerText<y.innerText){                  
                    ulObj.insertBefore(y, x);
                }
            }
        }
      }
      


ソリューションをビルドして実行するにはTo build and run the solution

  1. F5 キーを選択します。Select the F5 key.

    注意

    F5 キーを押すと、Visual Studio がソリューションをビルドして、アドインを展開し、アドインのアクセス許可ページを開きます。When you press F5, Visual Studio builds the solution, deploys the add-in, and opens the permissions page for the add-in.

  2. [信頼する] ボタンを選択します。Select the Trust It button.

  3. (ホスト Web ドメインではなく) アドイン Web ドメインのアドイン ディレクトリに対する相対アドレスで「/Lists/<your_list_instance>」を入力してカスタム リストに移動します。Go to your custom List by entering the /Lists/<your_list_instance> address relative to your add-in directory in the add-in web domain (not the host web domain). Add one or two announcements. On the ribbon, choose the Overridable view. 1 つか 2 つのお知らせを追加します。Add one or two announcements. リボンの上書き可ビューを選択します。On the ribbon, select the Overridable view.

関連項目See also