最初のフィールド カスタマイザーの拡張機能を作成するBuild your first Field Customizer 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 field-extension
    
  2. プロジェクト ディレクトリへ移動します。Go to the project directory.

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

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

    • ソリューション名として、既定値の field-extension を受け入れ、Enter キーを押します。Accept the default value of field-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 allow solution to be deployed to all sites immediately.
    • ソリューションに固有の権限が含まれている場合は、質問に対して [N] を選択してください。Select N on the question if solution contains unique permissions.
    • 作成するクライアント側コンポーネントの種類として [拡張機能] を選択します。Select Extension as the client-side component type to be created.
    • 作成する拡張機能の種類として [フィールド カスタマイザー] を選択します。Select Field Customizer 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.
    • 選択するフレームワークとして、既定値の No JavaScript Framework (JavaScript フレームワークなし) を受け入れ、Enter キーを押します。Accept the default value of No JavaScript Framework as the framework selection, 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. コンソールに次のように入力して Visual Studio Code を起動します。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 ソリューション

  7. src\extensions\helloWorld フォルダーの HelloWorldFieldCustomizer.manifest.json を開きます。Open HelloWorldFieldCustomizer.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.

    アプリケーション カスタマイザー manifest json の内容

フィールド カスタマイザーをコーディングするCode your Field Customizer

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

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

import { Log } from '@microsoft/sp-core-library';
import { override } from '@microsoft/decorators';
import {
  BaseFieldCustomizer,
  IFieldCustomizerCellEventParameters
} from '@microsoft/sp-listview-extensibility';

フィールド カスタマイザーのロジックは OnInit()onRenderCell()onDisposeCell() メソッドに含まれています。The logic for your Field Customizer is contained in the OnInit(), onRenderCell(), and onDisposeCell() methods.

  • 拡張機能に必要なすべての設定は、onInit() で実行します。onInit() is where you should perform any setup needed for your extension. このイベントは、this.contextthis.properties が割り当てられた後、ページ DOM の準備ができる前に発生します。This event occurs after this.context and this.properties are assigned, but before the page DOM is ready. Web パーツと同様に、onInit() は非同期操作の実行に使用できる Promise を返します。onRenderCell() は Promise が解決されるまで呼び出されません。As with web parts, onInit() returns a promise that you can use to perform asynchronous operations; onRenderCell() is not called until your promise has resolved. それが必要なければ、Promise.resolve<void>(); だけを返します。If you don’t need that, simply return Promise.resolve<void>();.
  • onRenderCell() は、各セルが表示されるときに発生します。onRenderCell() occurs when each cell is rendered. これは、コードがその内容を書き込むことができる event.domElement HTML 要素を提供します。It provides an event.domElement HTML element where your code can write its content.
  • onDisposeCell() は、event.cellDiv が削除される直前に発生します。onDisposeCell() occurs immediately before the event.cellDiv is deleted. フィールドの表示中に割り当てられたリソースを解放するために使用できます。It can be used to free any resources that were allocated during field rendering. たとえば、onRenderCell() が React 要素をマウントしている場合は、onDisposeCell() を使用して解放しなければなりません。解放しないと、リソース リークが発生します。For example, if onRenderCell() mounted a React element, onDisposeCell() must be used to free it; otherwise, a resource leak would occur.

既定のソリューションでの onRenderCell()onDisposeCell() の内容は次のとおりです。The following are the contents of onRenderCell() and onDisposeCell() in the default solution:

@override
  public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
    // Use this method to perform your custom cell rendering.
    const text: string = `${this.properties.sampleText}: ${event.fieldValue}`;

    event.domElement.innerText = text;

    event.domElement.classList.add(styles.cell);
  }

  @override
  public onDisposeCell(event: IFieldCustomizerCellEventParameters): void {
    // This method should be used to free any resources that were allocated during rendering.
    // For example, if your onRenderCell() called ReactDOM.render(), then you should
    // call ReactDOM.unmountComponentAtNode() here.
    super.onDisposeCell(event);
  }

フィールド カスタマイザーをデバッグするDebug your Field Customizer

現時点では、ローカル ワークベンチを使用して SharePoint Framework の拡張機能をテストすることはできません。You cannot currently use the local Workbench to test SharePoint Framework Extensions. テストと開発は、ライブの SharePoint Online サイトに対して直接実行する必要があります。You 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. 拡張機能をテストするには、最初に、カスタマイザーをテストする場所となるフィールドを作成する必要があります。To test your extension, you will need to first create the field to test the customizer in. フィールド カスタマイザーのテスト場所である SharePoint Online テナント内のサイトに移動します。So move to the site in your SharePoint Online tenant where you want to test the field customizer.

  2. [サイト コンテンツ] ページに移動します。Move to the Site Contents page.

  3. ツールバーで [新規] を選択し、[リスト] を選択します。On the toolbar, select New, and then select List.

    新しいリストを作成する

  4. Orders」という名前の新しいリストを作成し、[作成] を選択します。Create a new list named Orders, and then select Create.

    「Orders」という名前の新しいリストを作成する

  5. プラス記号を選択して、[番号] を選択し、リストの新しい数値フィールドを作成します。Select the plus sign, and then select Number to create a new Number field for the list.

    新しい数値フィールドを作成する

  6. フィールド名を Percent に設定し、[保存] を選択します。Set the name of the field to Percent, and then select Save.

    「Percent」という名前の新しいフィールドを作成する

  7. Percent フィールドに数値の異なるいくつかのアイテムを追加します。このチュートリアルの後半でレンダリングの設定を変更するので、カスタム実装によって異なる数値が表示されます。Add a few items with different numbers in the percent field. We'll modify the rendering later in this tutorial, so the different numbers will be presented differently based on your custom implementation.

    Percent フィールドに異なる数値を設定する形で新しく作成したリストでアイテムを作成する

  8. Visual Studio Code を開き、config フォルダーから serve.json ファイルを開きます。Move back to Visual Studio Code and open serve.json file from config folder. 先ほど作成したフィールド名に基づき、InternalFieldName 属性を Percent として更新します。Update InternalFieldName attribute as Percent based on the field name, which we just created. また、 pageurl属性を、プレビューの手順で作成したリストの URL と一致するように更新します。Update also the pageUrl attributes to match a URL of the list which we just created in the preview steps. 編集後、サービスは次のようになります。After edits your serve.json should look like:

    {
      "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
      "port": 4321,
      "https": true,
      "serveConfigurations": {
        "default": {
          "pageUrl": "https://sppnp.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
          "fieldCustomizers": {
            "Percent": {
              "id": "b909e395-f714-421f-94e0-d638dafeb210",
                "properties": {
                "sampleText": "Value"
              }
            }
          }
        },
        "helloWorld": {
          "pageUrl": "https://sppnp.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
          "fieldCustomizers": {
            "Percent": {
              "id": "b909e395-f714-421f-94e0-d638dafeb210",
              "properties": {
                "sampleText": "Value"
              }
            }
          }
        }  
      }
    }
    
  9. このコマンドを実行して、コードをコンパイルし、コンパイルしたファイルをローカル コンピューターからホストします。Compile your code and host the compiled files from the local machine by running this command:

    gulp serve
    

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

    gulp serve

    また、serve.json ファイルで定義されている URL 内で既定のブラウザーも起動します。This will also start your default browser within the URL defined in serve.json file. なお、少なくとも Windows では、このコマンドの実行前に優先ブラウザーをアクティブ化することにより、どのブラウザー ウィンドウを使用するかを制御できます。Notice that at least in Windows, you can control which browser window is used by activating the preferred one before executing this command.

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

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

    Percent の値が、フィールド カスタマイザーのプロパティとして提供される Value: という追加のプレフィックス文字列でどのように表示されるかを確認してください。Notice how the Percent values are now presented with an additional prefix string as Value:, which is provided as a property for the Field Customizer.

    Percent フィールド用に表示されたフィールド カスタマイザーによるリスト ビュー

フィールド カスタマイザーの表示を拡張するEnhance the Field Customizer rendering

フィールド カスタマイザーの設定不要で使用できる開始点のテストに成功したので、次にロジックを少し変更して、フィールド値をより精緻に表示します。Now that we have successfully tested the out-of-the-box starting point of the Field Customizer, let's modify the logic slightly to have a more polished rendering of the field value.

  1. src\extensions\helloWorld フォルダーの HelloWorld.module.scss ファイルを開いて、スタイルの定義を次のように更新します。Open the HelloWorld.module.scss file in the src\extensions\helloWorld folder, and update the styling definition as follows.

    .HelloWorld {
      .cell {
        display: inline-block;
      }
      .full {
        background-color: #e5e5e5;
        width: 100px;
      }
    }
    
    
  2. src\extensions\helloWorld フォルダーの HelloWorldFieldCustomizer.ts ファイルを開いて、onRenderCell メソッドを次のように更新します。Open the HelloWorldFieldCustomizer.ts file in the src\extensions\helloWorld folder, and update the onRenderCell method as follows.

        @override
        public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
    
            event.domElement.classList.add(styles.cell);
            event.domElement.innerHTML = `
                    <div class='${styles.HelloWorld}'>
                        <div class='${styles.full}'>
                        <div style='width: ${event.fieldValue}px; background:#0094ff; color:#c0c0c0'>
                            &nbsp; ${event.fieldValue}
                        </div>
                        </div>
                    </div>`;
        }
    
  3. コンソール ウィンドウで、例外がないことを確認します。In your console window, ensure that you do not have any exceptions. ソリューションを localhost で実行していない場合は、次のコマンドを実行します。If you do not have the solution running in localhost, execute the following command:

    gulp serve
    
  4. 以前に作成したリストで、デバッグ クエリ パラメーターを使用してブラウザー ウィンドウを更新するか、または gulp serve を使用してブラウザーを再起動します。In your previously created list, refresh the browser window with the debugging query parameters or restart the browser with gulp serve.

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

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


    フィールドの表示スタイルが完全に変更された方法に注意してください。Note how we changed the field rendering style completely. フィールド値は、値のグラフィカル表示を使用して示されます。The field value is indicated by using a graphical representation of the value.

    パーセントをグラフィカルに表示する

展開用のフィールド定義をソリューション パッケージに追加するAdd the field definition to the solution package for deployment

デバッグ モードで正常にソリューションをテストできたので、サイトに展開されるソリューション パッケージの一部として自動展開されるように、これをパッケージ化できます。Now that we have tested our solution properly in debug mode, we can package this to be deployed automatically as part of the solution package deployed to the sites.

  1. ソリューション パッケージをインストールすべきサイトにインストールし、拡張機能マニフェストをホワイト リストに入れて実行できるようにします。Install the solution package to the site where it should be installed, so that the extension manifest is white listed for execution.

  2. フィールド カスタマイザーをサイト内の既存のフィールドに関連付けます。Associate the Field Customizer to an existing field in the site. これは、プログラムで (CSOM/REST)、または SharePoint Framework ソリューション パッケージ内の機能フレームワークを使用して実行できます。You can do this programmatically (CSOM/REST) or by using the feature framework inside of the SharePoint Framework solution package. このチュートリアルでは、機能フレームワーク xml ファイルを使用します。In this tutorial, we will be using feature framework xml files. サイトまたはリスト レベルの SPField オブジェクトに以下のプロパティを関連付ける必要があります。You need to associate the following properties in the SPField object at the site or list level.

    • ClientSiteComponentId は、アプリ カタログにインストールされたフィールド カスタマイザーの識別子 (GUID) です。ClientSiteComponentId is the identifier (GUID) of the Field Customizer, which has been installed in the app catalog.
    • ClientSideComponentProperties は、フィールド カスタマイザー インスタンスにプロパティを提供するために使用される、オプションのパラメーターです。ClientSideComponentProperties is an optional parameter, which can be used to provide properties for the Field Customizer instance.

    package-solution.jsonskipFeatureDeployment 設定を使用して、拡張機能を含むソリューションをサイトに追加する要件を制御できることに注意してください。Note that you can control the requirement to add a solution containing your extension to the site by using the skipFeatureDeployment setting in package-solution.json. ソリューションをサイトにインストールする必要はありませんが、ClientSideComponentId を特定のオブジェクトに関連付けて、拡張機能を表示できるようにしなければなりません。Even though you would not require the solution to be installed on the site, you'd need to associate ClientSideComponentId to specific objects for the extension to be visible.

    たとえば、PnP PowerShell コマンドレットから Set-PnPField コマンドレットを使用し、プログラム手法で拡張機能をサイト内の既存のフィールドに関連付けることができます。You can use for example Set-PnPField cmdlet from PnP PowerShell cmdlets to programatically associate an extension to existing fields in your sites.

    続く手順では、自動作成され、ソリューション パッケージがサイトにインストールされるときに必要な構成を自動的に展開するために使用される既定のフィールド定義を確認します。In the following steps, we review the default field definition, which was automatically created and will then be used to automatically deploy needed configurations when the solution package is installed on a site.

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

  4. ソリューションのルートにある sharepoint フォルダーと assets サブフォルダーを展開し、既存の elements.xml ファイルを表示します。Extend the sharepoint folder and assets sub folder 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 フォルダー内の HelloWorldFieldCustomizer.manifest.json ファイルで利用可能なフィールド カスタマイザーの一意の ID に自動更新されています。The ClientSideComponentId property has been automatically updated to the unique ID of your Field Customizer available in the HelloWorldFieldCustomizer.manifest.json file in the src\extensions\helloWorld folder. このファイルを調整して、フィールドの種類と詳細に一致させる必要があります。You will need to adjust this file matching on your field type and details.

注意

SharePoint スキーマの参照」から、SharePoint フィーチャー フレームワークをサポートしている xml 構造の詳細を確認できます。You can find more details on supported xml structures for SharePoint Feature Framework from the SharePoint schema reference.

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

    <Field ID="{060E50AC-E9C1-3D3C-B1F9-DE0BCAC200F6}"
            Name="SPFxPercentage"
            DisplayName="Percentage"
            Type="Number"
            Min="0"
            Required="FALSE"
            Group="SPFx Columns"
            ClientSideComponentId="7e7a4262-d02b-49bf-bfcb-e6ef1716aaef">
    </Field>

</Elements>

定義がビルド パイプライン内で使用されていることを確認する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.

また、既定では includeClientSideAssets 属性が true に設定されていること、つまり JavaScript アセットが sppkg ファイルに自動的にパッケージ化されることにもご注意ください。Notice also that by default includeClientSideAssets attribute is set to true, meaning that the JavaScript assets are automatically packaged inside of the sppkg file.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "field-extension-client-side-solution",
    "id": "80c04d1b-dca7-4d0a-86c0-9aedf904704f",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "features": [
      {
        "title": "Application Extension - Deployment of custom action.",
        "description": "Deploys a custom action with ClientSideComponentId association",
        "id": "b27507b9-7c2a-4398-8946-7438571f16f6",
        "version": "1.0.0.0",
        "assets": {
          "elementManifests": [
            "elements.xml"
          ]
        }
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/field-extension.sppkg"
  }
}

SharePoint Online にフィールドを展開し、ローカルホストから JavaScript をホストするDeploy the field to SharePoint Online and host JavaScript from local host

ここまでで、ソリューションを SharePoint サイトに展開し、フィールドの関連付けを自動的にフィールドに含める準備ができました。Now you are ready to deploy the solution to a SharePoint site and get the field association automatically included in a field. このパッケージ化で ship オプションを使用し、すべてのアセットがソリューション パッケージ内に自動的にパッケージ化されるようにします。We will use the ship option with this packaging, so that all assets are packaged automatically inside of the solution package.

  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 --ship
    
  2. 次のコマンドを実行して、ソリューション パッケージを作成します。Execute the following command so that the solution package is created:

    gulp package-solution --ship
    

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

    field-extension.sppkg
    
  3. アプリ カタログに生成されたパッケージを展開する必要があります。You now need to 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 フォルダーにある field-extension.sppkg をアプリ カタログにアップロードまたはドラッグアンドドロップします。Upload or drag-and-drop the field-extension.sppkg located in the sharepoint/solution folder to the app catalog.

    SharePoint で信頼ダイアログ ボックスが表示され、ドメインとして SharePoint Online を使用するクライアント側ソリューションを信頼するよう求められることを確認します。Notice how SharePoint displays the trust dialog and asks you to trust the client-side solution with SharePoint Online as the domain. アセットは、テナント設定に応じてアプリ カタログの URL から、または Office 365 パブリック CDN から自動的にホストされます。Your assets will be automatically hosted either from app catalog URL or from Office 365 public CDN, depending on your tenant settings.

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

    ダイアログを展開する

  6. 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.

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

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

    フィールド カスタマイザーをサイトにインストールする

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

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

    新しいリストを作成する

  11. 「請求書」 という名前のリストを作成するCreate a list named Invoices.

  12. 新しいリストが作成されたら、サイト コンテンツ ページで、新しく作成されたリストのメニューから [設定] を選択します。When the new list is created, on the Site Contents page, select Settings from the menu of the newly created list.

    新しいリストの設定リストを表示する

  13. [列] で、[サイト内の既存の列から追加] を選択します。Under Columns, select Add from existing site columns.

  14. SPFx Columns グループの配下で、ソリューション パッケージからプロビジョニングされた Percentage フィールドを選択し、[OK] を選択します。Under the SPFx Columns group, select the Percentage field that was provisioned from the solution package, and then select OK.

    Percentage フィールドをリストに追加する

  15. 新しく作成された請求書リストに移動します。Go to the newly created Invoices list. Percentage 列の値の異なる少数のアイテムをリストに追加し、デバッグ クエリ パラメーターなしでもフィールドが表示されてることを確認します。Add a few items to the list with different values in the Percentage column to determine how the field is rendering without the debug query parameters.

デバッグ クエリ パラメーターなしのフィールド表示

アプリを公開するためのプロセスは、さまざまな拡張機能の種類で同じです。The process for publishing your app is identical among the different extension types.

注意

これは、列の書式設定機能によって実現された機能を備えた比較的簡単なフィールドカスタマイザーです。This was a relatively simple field customizer with functionality that could also have been achieved with column formatting capability. ただし、列の書式設定は、実際のカスタムコードをサポートしていません。Column formatting however does not support actual custom code. フィールドカスタマイザーは、追加のユースケースを有効にするユーザーインターフェイスからエンドユーザーによって変更されないことに注意してください。Notice that field customizers cannot be modified by end users from the user interface which enables additional use cases.

注意

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

関連項目See also