最初のコンポーネントを作成する

[アーティクル]
06/20/2022

このチュートリアルでは、ユーザーが列に値を入力する代わりに、視覚的なスライダーを使用して数値を変更できるようにする線形スライダーコードコンポーネントを作成する方法を示します。

注意

エンティティとテーブルの違いがわかりませんか？ Microsoft Dataverse で「開発者: 用語を理解する」を参照してください。

線形スライダーコードコンポーネントを構築するには、次の手順が必要です。

新しいコンポーネントプロジェクトを作成する
マニフェストの実装
TypeScript を使ってコンポーネントロジックを実装する
コードコンポーネントにスタイルを追加する
コードコンポーネントを構築する
コードコンポーネントのパッケージ化
コンポーネントをモデル駆動型アプリに追加する
コンポーネントをキャンバスアプリに追加する

前提条件

このチュートリアルでは、次のコンポーネントをインストールする必要があります。

Visual Studio Code (VSCode) ([パスに追加] オプションが選択されていることを確認してください)
node.js (LTS バージョンが推奨されています)
Microsoft Power Platform CLI (Visual Studio Code 拡張機能または MSI インストーラーのいずれかを使用します)
次のいずれかをインストールして、.NET ビルドツールを作成します: (少なくとも、ワークロード .NET build tools を選択します。)
- Visual Studio 2022
  - Windows および Mac 用 Visual Studio 2022。
  - Visual Studio 2022 用ビルドツール。
- Visual Studio 2019
  - Visual Studio 2019 のダウンロード。

注意

Visual Studio 用ビルドツールの代わりに、.NET 5.x SDK を使用したいと思うかもしれません。この場合、msbuild を使用する代わりに dotnet build を使用します。

ヒント

ソース管理用 git をインストールすることもお勧めします。

新しいコンポーネントプロジェクトを作成する

新しいプロジェクトを作成するには:

コマンドプロンプトウィンドウを開きます。次のコマンドを使用してプロジェクトの新しいフォルダを作成します:
```
 mkdir LinearInput
```
Visual Studio Code 内の LinearInput フォルダを開きます。開始する最も簡単な方法は、プロジェクトディレクトリに入ったら、cd LinearInput を使用して、コマンドプロンプトから code . を実行することです。このコマンドは、 Visual Studio Code にあるコンポーネントプロジェクトを開きます。
ターミナル -> 新しいターミナル を使用して Visual Studio Code 内部に新しいターミナルを開きます。
ターミナルプロンプトで、コマンドを使用して基本パラメータを渡すことで新しいコンポーネントプロジェクトを作成します。
```
 pac pcf init --namespace SampleNamespace --name LinearInputControl --template field
```
上記のコマンドは、プロジェクトのビルドツールを設定する npm install コマンドも実行します。
```
Running 'npm install' for you...
```
注意

The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. というエラーメッセージが表示された場合、node.js (LTS 版を推奨) とその他すべての前提条件がインストールされているかどうかを確認してください。
npm をインストールした後で、以下のコマンドを使用して、このディレクトリに ManifestDesignTypes.d.ts ファイルを生成する必要があります。"
```
npm run refreshTypes
```

マニフェストの実装

コントロールマニフェストは、コードコンポーネントのメタデータを含む XML ファイルです。また、コードコンポーネントの動作も定義します。このチュートリアルでは、LinearInputControl サブフォルダーでマニフェストファイルが作成されます。 Visual Studio Code で ControlManifest.Input.xml ファイルを開く場合、マニフェストが一部のプロパティに定義済であることがわかります。詳細: マニフェスト。

次のように定義済みマニフェストファイルへの変更を実施します:

コントロールノードは、コードコンポーネントの名前空間、バージョン、および表示名を定義します。ここでは、ここで示すように、制御ノードの各プロパティを定義します:
- 名前空間: コードコンポーネントの名前空間。
- コンストラクター: コードコンポーネントのコンストラクター。
- バージョン: コンポーネントのバージョン。コンポーネントを更新すると、実行時に変更を表示するの最新バージョンに更新する必要があります。
- 表示名前キー: UIに表示するコードコンポーネントの名前。
- 表示名キー: UIに表示するコードコンポーネントの説明。
- control-type: コードコンポーネントの種類。コードコンポーネントの標準タイプのみがサポートされています。
```
<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="SampleNamespace" constructor="LinearInputControl" version="1.1.0" display-name-key="LinearInputControl_Display_Key" description-key="LinearInputControl_Desc_Key" control-type="standard">
```
プロパティノードは、列のデータ型の定義など、コードコンポーネントのプロパティを定義します。プロパティノードに、control 要素下で子要素として指定されます。ここに示されている通り、プロパティノードを定義します:
- 名前: プロパティの名前。
- 表示名前キー: UIで表示するプロパティの表示名。
- 表示名キー: UIに表示するプロパティの説明。
- of-type-group: of-type-group は 3 つ以上のデータ型列が必要な場合に使用されます。 of-type-group 要素をマニフェストの property 要素の兄弟として追加します。 of-type-group はコンポーネント値を指定し、整数、通貨、浮動小数点、または 10 進数値を含めることができます。
- 使用: 2 つのプロパティ、バインド と入力を持っています。バインドされたプロパティは、列の値にのみバインドされます。入力プロパティは、列にバインドされるか、静的な値を許可します。
- 必須: プロパティが必須かどうかを定義します。
```
<property name="controlValue" display-name-key="controlValue_Display_Key" description-key="controlValue_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
```

リソースノードは、コードコンポーネントのビジュアル化を定義します。これはコードコンポーネントのビジュアル化とスタイル化を構築するすべてのリソースが含まれています。コードは、リソース要素下で子要素として指定されます。以下に示されるように、リソースを定義します:

コード: すべてのリソースファイルが設置されるファイルパスを参照します。

<resources>
   <code path="index.ts" order="1" />
   <css path="css/LinearInputControl.css" order="1" />
</resources>

マニフェストファイル全体は、次のように表示されます。

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="SampleNamespace" constructor="LinearInputControl" version="1.1.0" display-name-key="LinearInputControl_Display_Key" description-key="LinearInputControl_Desc_Key" control-type="standard">
      <type-group name="numbers">
         <type>Whole.None</type>
         <type>Currency</type>
         <type>FP</type>
         <type>Decimal</type>
      </type-group>
      <property name="controlValue" display-name-key="controlValue_Display_Key" description-key="controlValue_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
    <resources>
      <code path="index.ts" order="1" />
      <css path="css/LinearInputControl.css" order="1" />
    </resources>
  </control>
</manifest>

ControlManifest.Input.xml ファイルに加えた変更を保存します。

コンポーネントロジックの実装

マニフェストファイルを実行した後の次の手順は、TypeScript を使用してマニフェストファイルをコンポーネントのロジックに実装することです。コンポーネントのロジックは、index.ts ファイル内で実装する必要があります。 Visual Studio Code で index.ts ファイルを開くと、4 つの重要な関数が事前定義されていることがわかります。次に、コードコンポーネントのロジックを実装します。

任意のコードエディタで index.ts ファイルを開きます。
次のコードで LinearInputControl クラスを更新します。

import { IInputs, IOutputs } from "./generated/ManifestTypes";

export class LinearInputControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
   private _value: number;
   private _notifyOutputChanged: () => void;
   private labelElement: HTMLLabelElement;
   private inputElement: HTMLInputElement;
   private _container: HTMLDivElement;
   private _context: ComponentFramework.Context<IInputs>;
   private _refreshData: EventListenerOrEventListenerObject;

   public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void {
      this._context = context;
      this._container = document.createElement("div");
      this._notifyOutputChanged = notifyOutputChanged;
      this._refreshData = this.refreshData.bind(this);

      // creating HTML elements for the input type range and binding it to the function which refreshes the control data
      this.inputElement = document.createElement("input");
      this.inputElement.setAttribute("type", "range");
      this.inputElement.addEventListener("input", this._refreshData);

      //setting the max and min values for the control.
      this.inputElement.setAttribute("min", "1");
      this.inputElement.setAttribute("max", "1000");
      this.inputElement.setAttribute("class", "linearslider");
      this.inputElement.setAttribute("id", "linearrangeinput");

      // creating a HTML label element that shows the value that is set on the linear range control
      this.labelElement = document.createElement("label");
      this.labelElement.setAttribute("class", "LinearRangeLabel");
      this.labelElement.setAttribute("id", "lrclabel");

      // retrieving the latest value from the control and setting it to the HTMl elements.
      this._value = context.parameters.controlValue.raw!;
      this.inputElement.setAttribute("value", context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "0");
      this.labelElement.innerHTML = context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "0";

      // appending the HTML elements to the control's HTML container element.
      this._container.appendChild(this.inputElement);
      this._container.appendChild(this.labelElement);
      container.appendChild(this._container);
   }

   public refreshData(evt: Event): void {
      this._value = (this.inputElement.value as any) as number;
      this.labelElement.innerHTML = this.inputElement.value;
      this._notifyOutputChanged();
   }

   public updateView(context: ComponentFramework.Context<IInputs>): void {
      // storing the latest context from the control.
      this._value = context.parameters.controlValue.raw!;
      this._context = context;
      this.inputElement.setAttribute("value", context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "");
      this.labelElement.innerHTML = context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "";
   }

   public getOutputs(): IOutputs {
      return {
         controlValue: this._value
      };
   }

   public destroy(): void {
      this.inputElement.removeEventListener("input", this._refreshData);
   }
}

index.ts ファイルへの変更を保存します。

コードコンポーネントにスタイルを追加する

開発者およびアプリ作成者は、CSS を使用してコードコンポーネントを表するためのスタイルを定義できます。 CSS は、スタイル、、色、レイアウトやフォントを含む、コードコンポーネントのプレゼンテーションを開発者が説明できるようにします。線形入力コンポーネントの init メソッドは、入力の要素を作成し、クラス属性を linearslider に設定します。 linearslider クラスのスタイルは別に CSS ファイルで定義されます。 CSS ファイルのような追加のコンポーネントリソースをコードコンポーネントに含め、さらにカスタマイズをサポートすることができます。

重要

CSS を使用してコードコンポーネントにスタイルを実装する場合は、コンポーネントのコンテナー DIV 要素に適用される自動生成された CSS クラスを使用して、CSS がコントロールにスコープ設定されていることを確認してください。 CSS がグローバルにスコープ設定されている場合、コードコンポーネントが表示されるフォームまたは画面の既存のスタイルが損なわれる可能性があります。サードパーティの CSS フレームワークを使用している場合は、すでに名前空間が設定されているフレームワークのバージョンを使用するか、手動で、または CSS プリプロセッサを使用して、そのフレームワークを名前空間にラップします。

LinearInputControl フォルダの下に新しい css サブフォルダを作成します。
css サブフォルダの中に新しい LinearInputControl.css ファイルを作成します。

以下のスタイルコンテンツを LinearInputControl.css ファイルに追加します:

.SampleNamespace\.LinearInputControl input[type=range].linearslider {   
   margin: 1px 0;   
   background:transparent;
   -webkit-appearance:none;
   width:100%;padding:0;
   height:24px;
   -webkit-tap-highlight-color:transparent
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider:focus {
   outline: none;
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-webkit-slider-runnable-track {   
   background: #666;
   height:2px;
   cursor:pointer
}   
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-webkit-slider-thumb {   
   background: #666;   
   border:0 solid #f00;
   height:24px;
   width:10px;
   border-radius:48px;
   cursor:pointer;
   opacity:1;
   -webkit-appearance:none;
   margin-top:-12px
}    
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-moz-range-track {   
   background: #666;   
   height:2px;
   cursor:pointer  
}   
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-moz-range-thumb {   
   background: #666;   
   border:0 solid #f00;
   height:24px;
   width:10px;
   border-radius:48px;
   cursor:pointer;
   opacity:1;
   -webkit-appearance:none;
   margin-top:-12px
}   
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-ms-track {   
   background: #666;   
   height:2px;
   cursor:pointer  
}    
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-ms-thumb {   
   background: #666;   
   border:0 solid #f00;
   height:24px;
   width:10px;
   border-radius:48px;
   cursor:pointer;
   opacity:1;
   -webkit-appearance:none;
}

LinearInputControl.css ファイルを保存します。
ControlManifest.Input.xml ファイルには、リソース要素内に CSS リソースファイルが含まれていることに注意してください。
```
<resources> 
  <code path="index.ts" order="1"/> 
  <css path="css/LinearInputControl.css" order="1"/> 
</resources> 
```

注意

Power Apps component framework は、ローカライズされた文字列の管理に使用される文字列 (resx) Web リソースを実装する概念を使用し、任意のユーザーインターフェイスに表示されます。詳細: 文字列 (Resx) Web リソース。 resx Web リソースを使用してコードコンポーネントをローカライズする方法については、ローカライズ API サンプルを参照してください。

コードコンポーネントを構築する

マニフェスト、コンポーネントロジック、スタイルの追加が完了したら、次のコマンドを使用してコードコンポーネントをビルドします:

npm run build

ビルドは、LinearInputControl/generated フォルダーの TypeScript 型の宣言ファイルを作成および更新します。コンポーネントは out/controls/LinearInputControl フォルダにコンパイルされます。構築アーティファクトには以下が含まれます:

bundle.js – バンドルされたコンポーネントのソースコード。
ControlManifest.xml – Microsoft Dataverse にアップロードされるコンポーネントマニフェストファイル。

コードコンポーネントのデバッグ

コードコンポーネントロジックの実装が完了したら、以下のコマンドを実行してデバッグ処理を開始します。詳細: コードコンポーネントのデバッグ

npm start watch

コードコンポーネントのパッケージ化

ソリューションファイルを作成してインポートするには、次の手順に従います:

LinearComponent フォルダー内の新しいフォルダー ソリューション を作成し、フォルダーに移動します。
次のコマンドを使用して LinearInputControl フォルダに新しいソリューションプロジェクトを作成します。
```
  pac solution init --publisher-name Samples --publisher-prefix samples 
```
注意

publisher-name と publisher-prefix の値は、既存のソリューション発行者、またはターゲット環境で作成する新しい値と同じである必要があります。
新しいソリューションプロジェクトを作成したら、その作成したコンポーネントが配置される場所を参照する必要があります。以下のコマンドを使用して参照を追加できます:
```
 pac solution add-reference --path ..\
```
注意

ここで提供されるパスは、LinearInputControl フォルダー下に作成された現在の ソリューション フォルダーに関連付けられています。また、絶対パスも提供できます。
ソリューションプロジェクトから zip ファイルを生成するには、cdsproj ソリューションプロジェクトのディレクトリ内で、以下のコマンドを使用します。
```
msbuild /t:restore
```
または、.NET 5 SDK をインストールした場合は
```
dotnet build
```
再度、次のコマンドを実行します:
```
msbuild
```
注意

Missing required tool: MSBuild.exe/dotnet.exe というエラーを受け取った場合。パス環境変数に MSBuild.exe/dotnet.exe を追加するか、Developer Command Prompt for Visual Studio Code を使用します。前提条件で説明したように、.NET ビルドツールをインストールする必要があります。

ヒント

msbuild コマンドを使用したソリューションファイルをビルドして、Dataverse にインポートしてソリューションチェッカーを実行している場合は、eval 関数やその機能的に同等なものは使用しないでください というメッセージが表示されます。コマンド msbuild/property:configuration=Release を使用してソリューションファイルを再構築し、ソリューションを Dataverse に再インポートして、ソリューションチェッカーを実行します。詳細: コードコンポーネントのデバッグ。
生成されたソリューションの zip ファイルは、Solution\bin\debug フォルダーにあります。
zipファイルが準備ができたらWeb ポータルを使用して、手動でソリューションを Dataverse にインポートするか、 Microsoft Power Platform Build Tools を使用して自動的にインポートします。

注意

アンマネージドソリューションをインポートする場合は、カスタマイズを手動で公開します。

モデル駆動型のアプリのコードコンポーネントの追加

線形入力コンポーネントのようなコードコンポーネントを追加するには、記事列とテーブルにコンポーネントを追加するに記載されている手順に従ってください。

キャンバスアプリにコードコンポーネントを追加する

コードコンポーネントをキャンバスアプリに追加するには、記事キャンバスアプリにコードコンポーネントを追加するの手順に従ってください。

ポータルへのコードコンポーネントの追加

コードコンポーネントをポータルに追加するには、ポータルでコードコンポーネントを使用するの記事の手順に従ってください。

最初のコンポーネントを作成する

前提条件

新しいコンポーネントプロジェクトを作成する

マニフェストの実装

コンポーネントロジックの実装

コードコンポーネントにスタイルを追加する

コードコンポーネントを構築する

コードコンポーネントのデバッグ

コードコンポーネントのパッケージ化

モデル駆動型のアプリのコードコンポーネントの追加

キャンバスアプリにコードコンポーネントを追加する

ポータルへのコードコンポーネントの追加

関連項目

フィードバック

最初のコンポーネントを作成する

前提条件

新しいコンポーネント プロジェクトを作成する

マニフェストの実装

コンポーネント ロジックの実装

コード コンポーネントにスタイルを追加する

コード コンポーネントを構築する

コード コンポーネントのデバッグ

コード コンポーネントのパッケージ化

モデル駆動型のアプリのコード コンポーネントの追加

キャンバス アプリにコード コンポーネントを追加する

ポータルへのコードコンポーネントの追加

関連項目

フィードバック

新しいコンポーネントプロジェクトを作成する

コンポーネントロジックの実装

コードコンポーネントにスタイルを追加する

コードコンポーネントを構築する

コードコンポーネントのデバッグ

コードコンポーネントのパッケージ化

モデル駆動型のアプリのコードコンポーネントの追加

キャンバスアプリにコードコンポーネントを追加する