SharePoint アドインのホスト Web にカスタムのリボンボタンを作成する

[アーティクル]
04/08/2023

これは、SharePoint ホスト型 SharePoint アドインの開発の基本に関する一連の記事の 9 番目です。 SharePoint アドインとこのシリーズの前の記事については、「 SharePoint ホスト型 SharePoint アドインの作成の概要」|次の手順。

注:

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

すべての SharePoint アドインは、アドインのタイルをクリックすることによって、ホスト Web の [サイトコンテンツ] ページから実行できます。 SharePoint アドインの機能は、カスタムアクション (カスタムリボンボタンまたはカスタムメニュー項目) としてホスト Web に公開することもできます。この記事では、ホスト Web 上のリボンにボタンを追加します。

ホスト Web を準備する

ホスト Web の予定表のリボンにボタンを追加するには、SharePoint 開発者向けサイトの UI で次の手順を実行します。

サイトのホームページで、[サイトコンテンツ]>[追加とアドイン]>[予定表] の順に選択します。
[予定表の追加] ダイアログで、[名前] に「新入社員オリエンテーションのスケジュール」と入力してから、[作成] を選択します。
予定表が開いたら、いずれかの日付にカーソルを合わせて [追加] リンクが表示されるまで待機し、その後 [追加] をクリックします。
[社員オリエンテーションスケジュール - 新しいアイテム] ダイアログで、[タイトル] に「Cassi Hicks に対するオリエンテーション」と入力します。他のフィールドを既定のままにし、[保存] を選択します。

予定表は、次のようになります。

図 1. カスタムの予定表

重要

次の手順では、Visual Studio の UI に予定表を表示する必要がありますが、予定表を作成したときに Visual Studio が開いていた場合はそうなりません。続行する前に、Visual Studio を閉じて、開発者向けサイトにサインインしているすべてのブラウザーウィンドウと PowerShell コンソールからもサインアウトします。

リボンカスタムアクションを追加する

ソリューションエクスプローラーで、EmployeeOrientation プロジェクトを右クリックして、[追加]>[新しいアイテム]>[Office/SharePoint]>[リボンカスタムアクション] の順に選択します。「RunOrientationAdd-in」という名前を付けて、[追加] を選択します。

[リボンのカスタムアクションの作成] ウィザードがいくつか質問します。次の表の中から回答し、[完了] を選択してください。

プロパティの質問	回答
カスタムアクションの公開先はどこにしますか?	[ホスト Web] を選択します。
カスタムアクションのスコープ先はどこにしますか?	[リストインスタンス] ([リストテンプレート] ではない) を選択します。
どの特定の項目をカスタムアクションのスコープ先にしますか?	[社員オリエンテーションのスケジュール] を選択します。
コントロールはどこにありますか?	ドロップダウン選択は使用しません。代わりに、「`Ribbon.Calendar.Events.Actions.Controls._children`」と入力します。 (3 番目の部分である Events はリボンのタブを識別し、4 番目の部分である Actions はボタンのグループを識別します。)
メニュー項目のテキストは何ですか?	「社員オリエンテーション」と入力します。
カスタムアクションの移動先はどこですか?	ドロップダウン選択は使用しません。代わりに、「`~appWebUrl/Lists/NewEmployeesInSeattle`」と入力します。これはリストのリストビューページであり、アドイン Web 上にあるため、ホスト Web 上のリボンボタンを使用すると、ページはアドイン Web ページで開きます。

アドイン Web フィーチャーを検査する

ソリューションエクスプローラーで、Features フォルダーを展開し、NewEmployeeOrientationComponents フィーチャーを選択します。フィーチャーデザイナーが開きます。

作成したカスタムアクション RunOrientationAdd-in は、[フィーチャー内のアイテム] ではなく、[ソリューション内のアイテム] にリストされていることに注意してください。これは、フィーチャーはアドイン Web に展開されますが、カスタムアクションはホスト Web に展開されるためです。

運用環境への展開用にアドインを Visual Studio にパッケージ化するか、Visual Studio で F5 キーを押すと、Office Developer Tools for Visual Studio は特別なホスト Web フィーチャーを作成し、カスタムアクションを追加し、それをホスト Web に展開します。ホスト Web フィーチャーは決して編集しないでください。フィーチャーがパッケージ化の時点まで作成されないのはこのためです。

図 2. フィーチャーデザイナー

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

F5 キーを使用して、アドインを展開して実行します。 Visual Studio はテスト用 SharePoint サイトにアドインを一時的にインストールし、すぐにアドインを実行します。
SharePoint アドインの既定のページが開きます。開発者向けサイトのホームページ (つまり、ホスト Web) に移動します。ページの左上に階層リンクがあります。
ホスト Web のホームページで、[サイトコンテンツ] を選択し、[サイトコンテンツ] ページで、[社員オリエンテーションのスケジュール] 予定表 ([社員オリエンテーション] アドインではない) をクリックします。
予定表が表示されたら、[Cassie Hicks に対するオリエンテーション] イベントをクリックします。リボンの [イベント] タブが自動的に開かない場合は、手動で開いてください。次のようになります。

図 3. カスタムボタンがあるリボンのイベントタブ
リボンの [アクション] グループで、[社員オリエンテーション] をクリックします。 [シアトルの新入社員] のリストビューページが開きます。
デバッグセッションを終了するには、ブラウザーウィンドウを閉じるか、Visual Studio でデバッグを停止します。 F5 を選択するたびに、Visual Studio によって、以前のバージョンのアドインが取り消され、最新のバージョンがインストールされます。
このアドインおよび他の記事の Visual Studio ソリューションを操作し、ひととおり操作を終了したら前回のアドインを取り消すとよいでしょう。 ソリューションエクスプローラーでプロジェクトを右クリックして、[取り消し] を選択します。

次の手順

このシリーズの次の記事では、JavaScript を SharePoint アドインに追加し、JavaScript オブジェクトモデルを使用して SharePoint データにアクセスします: SharePoint データで動作するように SharePoint JavaScript API を使用する。

SharePoint アドインのホスト Web にカスタムのリボン ボタンを作成する