SharePoint ホスト型の SharePoint アドインにカスタム ページとスタイルを追加する

  • [アーティクル]

これは、SharePoint ホスト型の SharePoint アドインの開発の基本に関する記事のシリーズの 7 番目です。最初に、「SharePoint ホスト型の SharePoint アドインの作成を始める | 次の手順」にある「SharePoint アドイン」とこのシリーズの前の記事をよく読んで理解しておいてください。

注:

SharePoint ホスト型アドインに関するこのシリーズを続けて学習してきた方は、このトピックでも引き続き使用できる Visual Studio ソリューションをお持ちです。 また、SharePoint_SP-hosted_Add-Ins_Tutorials でリポジトリをダウンロードし、BeforePage.sln ファイルを開くこともできます。

この記事では、従業員オリエンテーション用 SharePoint アドインにヘルプ ページを追加し、カスタムの CSS スタイル シートを使用するように構成します。

ページの追加

  1. ソリューション エクスプローラーで、Pages フォルダーを右クリックして、[追加]>[新しいアイテム] の順に選択します。 [新しいアイテムの追加] ダイアログ ボックスが Office/SharePoint ノードに開きます。

  2. [ページ] を選択し、名前を Help.aspx とします。

  3. ファイル内で 2 つの asp:Content 要素を検索し、その間に次の 3 つ目の asp:Content マークアップを追加します。

    <asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
  Help
</asp:Content>

  4. PlaceholderAdditionalPageHead の ID を持つ asp:Content 要素を検索し、次のマークアップをそれに追加します。

    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

  5. PlaceHolderMain の ID を持つ asp:Content 要素を検索し、その中のすべての子要素を削除します。

  6. 同じ asp:Content 要素に、次をコンテンツとして追加します。

    <H3>Having a problem with the add-in?</H3>
<p>Call the help line for Fabrikam Add-ins:</p>
<p>1-555-555-5555</p>

  7. ファイルを保存して閉じます。

  8. Default.aspx ファイルを開きます。

  9. PlaceHolderMain の ID を持つ asp:Content 要素を検索し、その末尾に次のマークアップを追加します。

    <p><asp:HyperLink runat="server" NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Pages/Help.aspx';"
  Text="Get help for the Employee Orientation add-in" /></p>

  10. ファイルを保存して閉じます。

スタイル シートにスタイル クラスを追加する

  1. ソリューション エクスプローラーで [目次] フォルダーの app.css ファイルを開き、ファイルに次の行を追加します。

    p {color: green;}

  2. ファイルを保存して閉じます。

アドインを実行してテストする

  1. F5 キーを使用して、アドインを展開して実行します。 Visual Studio が、テスト用 SharePoint サイトにアドインを一時的にインストールして、すぐにアドインを実行します。

  2. アドインの既定のページが開いたら、[従業員オリエンテーション アドインのヘルプの表示] リンクを選択して、ヘルプ ページを開きます。

    カスタム ページが開き、<p> タグに入れた 2 つの行が緑色で表示されます。

    図 1. [ヘルプ] ページ

  3. デバッグ セッションを終了するには、ブラウザー ウィンドウを閉じるか、Visual Studio でデバッグを停止します。 F5 を選択するたびに、Visual Studio によって、以前のバージョンのアドインが取り消され、最新のバージョンがインストールされます。

  4. このアドインおよび他の記事の Visual Studio ソリューションを操作し、ひととおり操作を終了したら前回のアドインを取り消すとよいでしょう。 ソリューション エクスプローラーでプロジェクトを右クリックして、[取り消し] を選択します。

次の手順

このシリーズの次の記事では、SharePoint ホスト型の SharePoint アドインにカスタムのクライアント側レンダリングを追加します。