最初の ListView Command Set の拡張機能をビルドするBuild your first ListView Command Set extension

拡張機能は、SharePoint ページのコンテキスト内で実行されるクライアント側コンポーネントです。Extensions are client-side components that run inside the context of a SharePoint page. 拡張機能は SharePoint Online に展開することができ、最新の JavaScript ツールとライブラリを使用して、それらを構築することもできます。Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.

SharePoint PnP YouTube チャンネルのビデオを見て、それらの手順に従うことができます。You can follow these steps by watching the video on the SharePoint PnP YouTube Channel.



拡張機能のプロジェクトを作成するCreate an extension project

  1. 自分の好みの場所に新しいプロジェクト ディレクトリを作成します。Create a new project directory in your favorite location.

    md command-extension
    
  2. プロジェクト ディレクトリへ移動します。Go to the project directory.

    cd command-extension
    
  3. Yeoman の SharePoint ジェネレーターを実行して、新しい HelloWorld の拡張機能を作成します。Create a new HelloWorld extension by running the Yeoman SharePoint Generator.

    yo @microsoft/sharepoint
    
  4. ダイアログ ボックスが表示されたら、次の手順に従います。When prompted:

    • ソリューション名として、既定値の command-extension を受け入れ、Enter キーを押します。Accept the default value of command-extension as your solution name, and then select Enter.
    • [SharePoint Online のみ (最新)] を選択し、Enter キーを押します。Select SharePoint Online only (latest), and select Enter.
    • [現在のフォルダーを使用する] を選択して、Enter キーを押します。Select Use the current folder, and select Enter.
    • [N] を選択して、拡張機能が使用されている場合は各サイトに明示的にインストールするよう要求します。Select N to require the extension to be installed on each site explicitly when it's being used.
    • 作成するクライアント側コンポーネントの種類として [拡張機能] を選択します。Select Extension as the client-side component type to be created.
    • 作成する拡張機能の種類として [ListView Command Set] を選択します。Select ListView Command Set as the extension type to be created.
  5. 次の一連のダイアログ ボックスでは、拡張機能の詳細情報について入力が求められます。The next set of prompts ask for specific information about your extension:

    • 拡張機能名として、既定値の HelloWorld を受け入れ、Enter キーを押します。Accept the default value of HelloWorld as your extension name, and then select Enter.
    • 拡張機能の説明として、既定値の HelloWorld の説明を受け入れ、Enter キーを押します。Accept the default value of HelloWorld description as your extension description, and select Enter.

      Yeoman の SharePoint ジェネレーターにより、拡張機能のソリューションを作成するダイアログ ボックスが表示されます

      この時点で、Yeoman は必要な依存関係をインストールし、ソリューション ファイルを HelloWorld の拡張機能とともにスキャフォールディングします。At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorld extension. これには数分かかる場合があります。This might take a few minutes.

      スキャフォールディングが完了すると、スキャフォールディングが正常に行われたことを示す次のメッセージが表示されます。When the scaffold is complete, you should see the following message indicating a successful scaffold:

      SharePoint のクライアント側ソリューションが正常にスキャフォールディングされました

      エラーのトラブルシューティング方法の詳細については、既知の問題を参照してください。For information about troubleshooting any errors, see Known issues.

  6. スキャフォールディングが完了したら、次のコマンドを実行して、プロジェクトの依存関係のバージョンをロック ダウンします。After the scaffolding completes, lock down the version of the project dependencies by running the following command:

    npm shrinkwrap
    
  7. 次に、コンソールに次のように入力して Visual Studio Code を起動します。Next, type the following into the console to start Visual Studio Code.

    code .
    

    注意

    SharePoint のクライアント側ソリューションは HTML や TypeScript に基づいているため、クライアント側の開発をサポートしている任意のコード エディターを使用して拡張機能を構築できます。Because the SharePoint client-side solution is HTML/TypeScript based, you can use any code editor that supports client-side development to build your extension.

    既定のソリューション構造が、クライアント側 Web パーツのソリューション構造と類似していることに注意してください。Note how the default solution structure looks like the solution structure of client-side web parts. これが基本の SharePoint Framework ソリューション構造であり、ソリューションの種類を問わず類似の構成オプションを持ちます。This is the basic SharePoint Framework solution structure, with similar configuration options across all solution types.

    最初のスキャフォールディングの後に開かれた SharePoint Framework ソリューション

  8. src\extensions\helloWorld フォルダーの HelloWorldCommandSet.manifest.json を開きます。Open HelloWorldCommandSet.manifest.json in the src\extensions\helloWorld folder.

    このファイルは、拡張機能の種類と拡張機能の一意識別子 id を定義します。This file defines your extension type and a unique identifier id for your extension. 後で拡張機能をデバッグして SharePoint に展開するときに、この一意識別子が必要になります。You need this unique identifier later when debugging and deploying your extension to SharePoint.

    マニフェスト ファイル内の実際のコマンド定義に注意してください。Note the actual command definitions in the manifest file. これらは、登録対象に基づいて公開される実際のボタンです。These are the actual buttons that are exposed based on the registration target. 既定のテンプレートには、Command OneCommand Two の 2 つの異なるボタンがあります。In the default template, you find two different buttons: Command One and Command Two.

    ListView Command Set マニフェストの JSON コンテンツ

    現時点では、マニフェストの CDN の絶対的な場所からでないと、適切に画像を参照することができません。これは今後のリリースで改善される予定です。Currently, images are not properly referenced unless you are referring to them from absolute locations in a CDN within your manifest. This will be improved in future releases.

ListView Command Set のコーディングCode your ListView Command Set

src\extensions\helloWorld フォルダーの HelloWorldCommandSet.ts ファイルを開きます。Open the HelloWorldCommandSet.ts file in the src\extensions\helloWorld folder.

ListView Command Set の基底クラスは、ListView Command Set で必要な SharePoint Framework コードを含む sp-listview-extensibility パッケージからインポートされます。Notice that the base class for the ListView Command Set is imported from the sp-listview-extensibility package, which contains SharePoint Framework code required by the ListView Command Set.

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseListViewCommandSet,
  Command,
  IListViewCommandSetListViewUpdatedParameters,
  IListViewCommandSetExecuteEventParameters
} from '@microsoft/sp-listview-extensibility';
import { Dialog } from '@microsoft/sp-dialog';

ユーザー設定ボタンの動作は、onListViewUpdated() および OnExecute() メソッドに含まれています。The behavior for your custom buttons is contained in the onListViewUpdated() and OnExecute() methods.

onListViewUpdated() イベントは、ListView で変更が発生したときに各コマンド (メニュー項目など) ごとに個別に発生し、UI を再表示する必要があります。The onListViewUpdated() event occurs separately for each command (for example, a menu item) whenever a change happens in the ListView, and the UI needs to be re-rendered. 関数パラメーターは、表示されるコマンドに関する情報を表します。eventThe event function parameter represents information about the command being rendered. ハンドラーは、リスト ビューで一定数の項目が選択されたときにのみコマンドを表示する場合など、この情報を使用してタイトルをカスタマイズしたり表示を調整したりすることができます。The handler can use this information to customize the title or adjust the visibility, for example, if a command should only be shown when a certain number of items are selected in the list view. これは既定の実装です。This is the default implementation.

メソッド tryGetCommand を使用するときは、UI に表示されるコマンドの表記である Command オブジェクトを取得します。When using the method tryGetCommand, you get a Command object, which is a representation of the command that shows in the UI. visible などの値を変更して UI 要素を変更することができます。titleYou can modify its values, such as title, or visible, to modify the UI element. SPFx はコマンドを再表示するときにこの情報を使用します。SPFx uses this information when re-rendering the commands. これらのオブジェクトは最後の表示から状態を保持するので、コマンドが visible = false に設定されている場合、コマンドは visible = true に戻されるまで非表示のままです。These objects keep the state from the last render, so if a command is set to visible = false, it remains invisible until it is set back to visible = true.

  @override
  public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    if (compareOneCommand) {
      // This command should be hidden unless exactly one row is selected.
      compareOneCommand.visible = event.selectedRows.length === 1;
    }
  }

OnExecute() メソッドは、コマンドが実行されたときに起こる内容を定義します (たとえば、メニュー項目が選択される)。The OnExecute() method defines what happens when a command is executed (for example, the menu item is selected). 既定の実装では、選択されるボタンに応じて異なるメッセージが表示されます。In the default implementation, different messages are shown based on which button was selected.

  @override
  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    switch (event.itemId) {
      case 'COMMAND_1':
        Dialog.alert(`${this.properties.sampleTextOne}`);
        break;
      case 'COMMAND_2':
        Dialog.alert(`${this.properties.sampleTextTwo}`);
        break;
      default:
        throw new Error('Unknown command');
    }
  }

ListView Command Set のデバッグDebug your ListView Command Set

現時点では、ローカル ワークベンチを使用して SharePoint Framework の拡張機能をテストすることはできません。You cannot currently use the local Workbench to test SharePoint Framework Extensions. テストと開発は、ライブの SharePoint Online サイトに対して直接実行する必要があります。You'll need to test and develop them directly against a live SharePoint Online site. そのために、カスタマイズをアプリ カタログに展開する必要はありません (これにより、デバッグ操作が簡単で効率的になります)。You don't have to deploy your customization to the app catalog to do this, which makes the debugging experience simple and efficient.

  1. 次のコマンドを実行して、コードをコンパイルし、コンパイルしたファイルをローカル コンピューターからホストします。Compile your code and host the compiled files from the local machine by running this command:

    gulp serve --nobrowser
    

    ワークベンチをローカルで起動する必要がないため、--nobrowser オプションを使用します (拡張機能はローカルでデバッグできません)。You use the --nobrowser option because you don't need to launch the local Workbench, since you can't debug extensions locally.

    コードがエラーなしでコンパイルされると、https://localhost:4321からのマニフェストを送信します。When the code compiles without errors, it serves the resulting manifest from https://localhost:4321.

  2. モダン エクスペリエンスを使用して SharePoint Online サイト内の SharePoint リストに移動します。Go to any SharePoint list in your SharePoint Online site by using the modern experience.

    ListView Command Set は localhost でホストされ、実行されているので、固有のデバッグ クエリ パラメーターを使ってリスト ビューでコードを実行することができます。Because our ListView Command Set is hosted from localhost and is running, we can use specific debug query parameters to execute the code in the list view.

  3. 以下のクエリ文字列パラメーターを URL に追加します。Append the following query string parameters to the URL. HelloWorldCommandSet.manifest.json ファイルで入手可能な ListView Command Set 拡張機能の ID に一致するように GUID を更新する必要があります。Notice that you need to update the GUID to match the ID of your ListView Command Set Extension available in the HelloWorldCommandSet.manifest.json file. 詳細については、「URL クエリ パラメーターの詳細」を参照してください。For more information, see More details about the URL query parameters.

    ?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"a8047e2f-30d5-40fc-b880-b2890c7c16d6":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{"sampleTextOne":"One item is selected in the list.","sampleTextTwo":"This command is always visible."}}}
    

    テナント URL とリストの場所によっては、完全な URL は次のようになります。The full URL should look similar to the following, depending on your tenant URL and the location of the list.

    contoso.sharepoint.com/Lists/Orders/AllItems.aspx?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"a8047e2f-30d5-40fc-b880-b2890c7c16d6":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{"sampleTextOne":"One item is selected in the list.","sampleTextTwo":"This command is always visible."}}}
    

あるいは、プロジェクト内の config/serve.json ファイルにサービス構成エントリを作成して、この文書で説明するデバッグ クエリ文字列パラメータの作成を自動化することもできます。 モダン SharePoint ページで SharePoint Framework ソリューションをデバッグしてくださいAlternatively, you can create serve configuration entries in the config/serve.json file in your project to automate the creation of the debug query string parameters as outlined in this document: Debug SharePoint Framework solutions on modern SharePoint pages

  1. ダイアログが表示されたら、デバッグ スクリプトを読み込む を選択して、デバッグ マニフェストの読み込みを承諾します。Accept the loading of debug manifests by selecting Load debug scripts when prompted.

    デバッグ スクリプトの読み込みを承諾する

  2. 新しい [Command Two] ボタンがツールバーに表示されていることに注目してください。Notice the new Command Two button available in the toolbar. そのボタンを選択して、sampleTextTwo プロパティのプロパティとして提供されたテキストを表示します。Select that button to see the text provided as property for the sampleTextTwo property.

    ドキュメント ライブラリのツールバーに表示される [Command Two] ボタン

  3. ドキュメント ライブラリで 1 行選択されるまで、[Command One] ボタンはコードに基づいて表示されません。The Command One button is not visible based on the code, until one row is selected in the document library. ライブラリにドキュメントをアップロードまたは作成し、2 番目のボタンが表示されていることを確認します。Upload or create a document to the library and confirm that the second button is visible.

    ドキュメントを 1 つ選択して [Command One] ボタンを表示する

  4. ListView Command Set が拡張機能の種類として選択されている場合の、ソリューション スキャフォールディングの既定の出力で使用されるダイアログ コントロールの動作を確認するには、[Command Two] を選択します。Select Command Two to see how the dialog control works, which is used in the default output from the solution scaffolding when the ListView Command Set is selected as the extension type.

    ドキュメントを 1 つ選択して [Command One] ボタンを表示する

URL クエリ パラメーターの詳細More details about the URL query parameters

  • loadSPFX=true は SharePoint Framework が確実にページに読み込まれるようにします。loadSPFX=true ensures that the SharePoint Framework is loaded on the page. パフォーマンス上の理由から、少なくとも 1 つの拡張機能が登録されていないと通常はフレームワークは読み込まれません。For performance reasons, the framework is not normally loaded unless at least one extension is registered. 登録されているコンポーネントがないため、フレームワークを明示的に読み込む必要があります。Because no components are registered yet, we must explicitly load the framework.
  • debugManifestsFile は、ローカルに提供されている SPFx コンポーネントを読み込むように指定します。debugManifestsFile specifies that we want to load SPFx components that are being locally served. ローダーはアプリ カタログ (展開したソリューション用) と SharePoint マニフェスト サーバー (システム ライブラリ用) のコンポーネントのみを検索します。The loader only looks for components in the app catalog (for your deployed solution) and the SharePoint manifest server (for the system libraries).
  • customActions は、カスタム アクションをシミュレートします。customActions simulates a custom action. この CustomAction オブジェクトには、ボタンの外観、使い勝手、位置に影響する多くのプロパティを設定できます。以下にそれらをすべて説明します。You can set many properties on this CustomAction object that affect the look, feel, and location of your button; we’ll cover them all later.
    • キー: 拡張機能の GUID。Key: GUID of the extension.
    • 場所: コマンドが表示される場所。Location: Where the commands are displayed. 値は次のいずれかです。The possible values are:
      • ClientSideExtension.ListViewCommandSet.ContextMenu: 項目のコンテキスト メニュー。ClientSideExtension.ListViewCommandSet.ContextMenu: The context menu of the item(s).
      • ClientSideExtension.ListViewCommandSet.CommandBar: リストまたはライブラリの上部のコマンド セット メニュー。ClientSideExtension.ListViewCommandSet.CommandBar: The top command set menu in a list or library.
      • ClientSideExtension.ListViewCommandSet コンテキスト メニューとコマンド バーの両方 (SPUserCustomAction.Location="CommandUI.Ribbon" に対応)。ClientSideExtension.ListViewCommandSet: Both the context menu and the command bar (corresponds to SPUserCustomAction.Location="CommandUI.Ribbon").
    • プロパティ: this.properties メンバーを介して利用できるプロパティを含む、オプションの JSON オブジェクト。Properties: An optional JSON object containing properties that are available via the this.properties member.


ListView Command Set の表示の強化Enhance the ListView Command Set rendering

既定のソリューションは、新しいダイアログ API を利用して、コードから簡単にモーダル ダイアログを表示することができます。The default solution takes advantage of a new Dialog API, which can be used to show modal dialogs easily from your code. 次の手順では、ダイアログ API の使用例を示すために、既定のエクスペリエンスを少し変更します。In the following steps, we'll slightly modify the default experience to demonstrate Dialog API use cases.

  1. コンソールに戻って次のコマンドを実行し、ソリューションにダイアログ API が含まれるようにします。Return to the console, and execute the following command to include the Dialog API in our solution.

  2. Visual Studio Code (あるいは好みのエディター) に戻ります。Return to Visual Studio Code (or your preferred editor).

  3. src\extensions\helloWorld フォルダーから HelloWorldCommandSet.ts ファイルを開きます。Open HelloWorldCommandSet.ts from the src\extensions\helloWorld folder.

  4. ファイルの先頭に Dialogからの @microsoft/sp-dialog クラスのために次のimport文があることを確認します。Ensure at the top of the file the following import statement is present for the Dialog class from @microsoft/sp-dialog. すでに存在するはずです。存在しない場合は、追加します。It should already be there, if not, add it.

import { Dialog } from '@microsoft/sp-dialog';
  1. 以下のようにして、onExecute メソッドを更新しますUpdate the onExecute method as follows:

      @override
      public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
        switch (event.itemId) {
          case 'COMMAND_1':
            Dialog.alert(`Clicked ${strings.Command1}`);
            break;
          case 'COMMAND_2':
            Dialog.prompt(`Clicked ${strings.Command2}. Enter something to alert:`).then((value: string) => {
              Dialog.alert(value);
            });
            break;
          default:
            throw new Error('Unknown command');
        }
      }
    
  2. コンソール ウィンドウで、例外がないことを確認します。In your console window, ensure that you do not have any exceptions. ソリューションを localhost で実行していない場合は、次のコマンドを実行します。If you do not already have the solution running in localhost, execute the following command:

    gulp serve --nobrowser
    
  3. リスト ビューで、HelloWorldCommandSet.manifest.json ファイルで使用可能な拡張機能の識別子と一致する ID で、以前に使用された同じクエリ パラメーターを使用します。In the list view, use the same query parameters used previously with the ID matching your extension identifier available in the HelloWorldCommandSet.manifest.json file.

  4. ダイアログが表示されたら、[デバッグ スクリプトを読み込む] を選択して、デバッグ マニフェストの読み込みを承諾します。Accept the loading of debug manifests by selecting Load debug scripts when prompted.

    デバッグ スクリプトの読み込みを承諾する

    ツール バーには同じボタンがありますが、1 つずつ選択すると、それらのボタンの動作が異なることがわかります。We still have the same buttons in the toolbar, but you'll notice they behave differently if you select them one-by-one. 複雑なシナリオの場合でも、ソリューションで簡単に使用できる新しいダイアログ API を使用しています。Now we are using the new Dialog API, which can be easily used with your solutions, even for complex scenarios.

    デバッグ スクリプトの読み込みを承諾する [OK] ボタン

展開するソリューション パッケージに ListView Command Set を追加するAdd a ListView Command Set to a solution package for deployment

  1. Visual Studio Code (またはお使いのエディター) のソリューションに戻ります。Return to your solution in Visual Studio Code (or to your preferred editor).

  2. ソリューションのルートにある sharepoint フォルダーと assets サブフォルダーを展開し、既存の elements.xml ファイルを表示します。Extend the sharepoint folder and assets subfolder in the root of the solution to see the existing elements.xml file.

    ソリューション構造内の assets フォルダー

elements.xml ファイルを確認するReview the elements.xml file

sharepoint\assets フォルダー内の elements.xml ファイルを開きます。Open the elements.xml file inside the sharepoint\assets folder.

elements.xml 内の次の XML 構造に注意してください。Note the following XML structure in elements.xml. ClientSideComponentId プロパティは、src\extensions\helloWorld フォルダー内の HelloWorldCommandSet.manifest.json ファイルで利用可能な ListView Command Set の一意の ID に自動更新されています。The ClientSideComponentId property has been automatically updated to the unique ID of your ListView Command Set available in the HelloWorldCommandSet.manifest.json file in the src\extensions\helloWorld folder.

これが ListView Command Set であることを定義するために ClientSideExtension.ListViewCommandSet.CommandBar の特定の位置の値を使用することに注意してください。コマンド バーに表示する必要があります。Notice that we use a specific location value of ClientSideExtension.ListViewCommandSet.CommandBar to define that this is a ListView Command Set and it should be displayed in the command bar. また、RegistrationId100RegistrationTypeリストと定義して、このカスタム アクションをジェネリック リストに自動で関連付けます。We also define the RegistrationId as 100 and the RegistrationType as List to associate this custom action automatically with generic lists. ClientSideComponentProperties は、インスタンス固有の構成を提供するために使用できます。ClientSideComponentProperties can be used to provide instance specific configurations. この例では、sampleTextOnesampleTextTwo という既定のプロパティを使用しています。In this case, we are using default properties called sampleTextOne and sampleTextTwo.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

    <CustomAction 
        Title="SPFxListViewCommandSet"
        RegistrationId="100"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>

</Elements>

注意

localhostから実行している間、カスタム アクションはリストとドキュメント ライブラリの両方で動作しますが、 elements.xml が更新されなければ展開されません。While running from localhost the custom action will work on both lists and document libraries, but will not once deployed unless the elements.xml is updated. RegistrationId=100 ドキュメントライブラリ ではなく カスタム アクションをリストと関連付けるだけです 。RegistrationId=100 will only associate the custom action with lists and NOT document libraries. カスタム アクションをドキュメント ライブラリに関連付けるには、 RegistrationId101に設定する必要があります。In order to associate the custom action with document libraries, the RegistrationId must be set to 101. アクションがリストとドキュメント ライブラリの両方で機能するようにするには、別の CustomActionelements.xml ファイルに追加する必要がありますIf you would like the action to work on both lists and document libraries, another CustomAction must be added to the elements.xml file

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

    <CustomAction 
        Title="SPFxListViewCommandSet"
        RegistrationId="100"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>

    <CustomAction 
        Title="SPFxListViewCommandSet"
        RegistrationId="101"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>

</Elements>

ListView Command Set で使用できる可能性のある場所の値:Possible location values that can be used with a ListView Command Set:

  • ClientSideExtension.ListViewCommandSet.CommandBar - リストまたはライブラリのツール バーClientSideExtension.ListViewCommandSet.CommandBar - Toolbar of the list or library
  • ClientSideExtension.ListViewCommandSet.ContextMenu - リスト項目またはライブラリ項目のコンテキスト メニューClientSideExtension.ListViewCommandSet.ContextMenu - Context menu for list or library items
  • ClientSideExtension.ListViewCommandSet - コマンドをツール バーとコンテキスト メニューに登録するClientSideExtension.ListViewCommandSet - Register commands to both the toolbar and to the context menu

定義がビルド パイプライン内で使用されていることを確認するEnsure that definitions are taken into account within the build pipeline

package-solution.jsonconfig フォルダーから開きます。Open package-solution.json from the config folder. package-solution.json ファイルは、次のコードに示されているようにパッケージ メタデータを定義します。The package-solution.json file defines the package metadata as shown in the following code. ソリューションのパッケージ化の際に element.xml ファイルが必ず考慮されるように、既定のスキャフォールディングは、ソリューション パッケージの機能フレームワークのフィーチャー定義を設定するために必要な構成を追加しました。To ensure that the element.xml file is taken into account while the solution is being packaged, default scaffolding added needed configuration to define a feature framework feature definition for the solution package.

{
  "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "command-extension-client-side-solution",
    "id": "690ae189-a4fc-4b98-8f28-d4ec17448b7a",
    "version": "1.0.0.0",
    "features": [
      {
        "title": "Application Extension - Deployment of custom action.",
        "description": "Deploys a custom action with ClientSideComponentId association",
        "id": "e91d5532-3519-4b50-b55e-b142fc74cd8a",
        "version": "1.0.0.0",
        "assets": {
          "elementManifests": [
            "elements.xml"
          ]
        }
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/command-extension.sppkg"
  }
}

SharePoint Online に拡張機能を展開し、ローカル ホストから JavaScript をホストするDeploy the extension to SharePoint Online and host JavaScript from local host

ここまでで、ソリューションを SharePoint サイトに展開し、CustomAction をサイト レベルで自動的に関連付ける準備ができました。Now you are ready to deploy the solution to a SharePoint site and have the CustomAction automatically associated on the site level.

  1. コンソール ウィンドウで次のコマンドを入力して、拡張機能を含むクライアント側のソリューションをパッケージ化すると、パッケージ化できる基本構造を取得できます。In the console window, enter the following command to package your client-side solution that contains the extension so that we get the basic structure ready for packaging:

    gulp bundle
    
  2. 次のコマンドを実行して、ソリューション パッケージを作成します。Execute the following command so that the solution package is created:

    gulp package-solution
    

    このコマンドは、sharepoint/solution フォルダーにパッケージを作成します。The command creates the package in the sharepoint/solution folder:

    command-extension.sppkg
    
  3. 生成されたパッケージをアプリ カタログに展開します。Deploy the package that was generated to the app catalog. そのためには、テナントのアプリ カタログに移動し、SharePoint 用アプリ ライブラリを開きます。To do this, go to your tenant's app catalog and open the Apps for SharePoint library.

  4. sharepoint/solution フォルダーにある command-extension.sppkg をアプリ カタログにアップロードまたはドラッグアンドドロップします。Upload or drag-and-drop the command-extension.sppkg located in the sharepoint/solution folder to the app catalog. SharePoint はダイアログを表示し、クライアント側ソリューションを信頼するよう求めます。SharePoint displays a dialog and asks you to trust the client-side solution.

    この展開ではソリューションをホストする URL を更新していないので、URL はまだ https://localhost:4321 を指していることに注意してください。Note that we did not update the URLs for hosting the solution for this deployment, so the URL is still pointing to https://localhost:4321.

  5. [展開] ボタンを選択します。Select the Deploy button.

    アプリ カタログのアップロードでの信頼操作

  6. コンソールで、ソリューションが実行されていることを確認します。In your console, ensure that the solution is running. 実行されていない場合は、ソリューション フォルダーで次のコマンドを実行します。If it's not running, execute the following command in the solution folder:

    gulp serve --nobrowser
    
  7. SharePoint アセットのプロビジョニングをテストするサイトに移動します。このソリューション パッケージを展開したテナント内の任意のサイト コレクションに移動できます。Go to the site where you want to test SharePoint asset provisioning. This could be any site collection in the tenant where you deployed this solution package.

  8. 上部のナビゲーション バーの右側にある歯車アイコンを選択し、[アプリの追加] を選択して、アプリ ページに移動します。Select the gears icon on the top navigation bar on the right, and then select Add an app to go to your Apps page.

  9. [検索] ボックスで、「extension」と入力し、Enter キーを押して、アプリをフィルター処理します。In the Search box, enter extension, and then select Enter to filter your apps.

    ListView Command Set のサイトへのインストール

  10. command-extension-client-side-solution アプリを選択して、サイトにソリューションをインストールします。Select the command-extension-client-side-solution app to install the solution on the site. インストールが完了したら、F5 キーを押して、ページを更新します。When the installation is complete, refresh the page by selecting F5.

  11. アプリケーションが正常にインストールされたら、[サイト コンテンツ] ページのツール バーで [新規] を選択し、[リスト] を選択します。When the application has been successfully installed, select New from the toolbar on the Site Contents page, and then select List.

    新しいリストを作成する

  12. 名前を Sample とし、[作成] を選択します。Provide the name as Sample, and then select Create.

    ListView Command Set のカスタマイズに基づいて、[Command One] および [Command Two] がツール バーに表示されていることを確認してください。Notice how Command One and Command Two are rendering in the toolbar based on your ListView Command Set customizations.

    ツール バーに表示される追加ボタン

注意

ドキュメントまたは SharePoint Framework に問題が見つかった場合は、sp-dev-docs リポジトリの懸案事項リストを使用して SharePoint エンジニアリングに報告してください。If you find an issue in the documentation or in the SharePoint Framework, report that to SharePoint engineering by using the issue list at the sp-dev-docs repository. よろしくお願いします。Thanks for your input in advance.

関連項目See also