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

このチュートリアルでは、ユーザーが列に値を入力するのではなく、ビジュアルスライダーを使用して数値を変更するために使用できる線形スライダーコードコンポーネントを構築します。

モデル駆動型アプリの線形入力コントロール。

完成した線形スライダーコードコンポーネントのサンプルコードは、PowerApps-Samples/component-framework/LinearInputControl/ にあります。

線形スライダーコードコンポーネントをビルドするには、次の手順を実行します。

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

前提条件

このチュートリアルでは、次のコンポーネントをインストールします。

Visual Studio Code (VSCode) ([パスに追加 オプションが選択されていることを確認します)
Node.js (LTS バージョンをお勧めします)
Microsoft Power Platform CLI (power Platform Tools for Visual Studio Code または Power Platform CLI for Windowsを使用)
.NET次のいずれかのオプションをインストールして、ツールをビルドします。少なくとも、ワークロード .NET build toolsを選択します。
- Visual Studio 2022
  - Visual Studio 2022 for Windows &Mac。
  - Build Tools for Visual Studio 2022。
- Visual Studio 2019
  - Visual Studio 2019 ダウンロード。

注意

Visual Studio用ビルドツールの代わりに、.NET 6.x SDK を使用することをお選びになる場合があります。この場合、を使用する代わりに、を使用します。

チップ

ソース管理用の git をインストールします。

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

このチュートリアルでは、にあるフォルダーから始めますが、任意のフォルダーを使用できます。コードをチェックインするフォルダーを選択します。

という名前の新しいフォルダーを作成します。
Visual Studio Codeを使用して、LinearInput フォルダーを開きます。

最も簡単な開始方法は、コマンドプロンプトウィンドウを使用することです。フォルダーに移動し、「」と入力します。
```
c:\repos\LinearInput>code .
```
このコマンドを実行すると、コンポーネントプロジェクトがVisual Studio Codeで開きます。
Terminal ->New ターミナルを使用して、Visual Studio Code内で新しいターミナルを開きます。
ターミナルプロンプトで、 pac pcf init コマンドを使用して基本パラメーターを渡して、新しいコンポーネントプロジェクトを作成します。
```
 pac pcf init --namespace SampleNamespace --name LinearInputControl --template field --run-npm-install
```
また、コマンドを実行して、プロジェクトビルドツールを設定します。
```
Running 'npm install' for you...
```
注意

エラーが発生した場合は、 node.js (LTS バージョンをお勧めします) とその他のすべての前提条件をインストールしてください。

マニフェストの実装

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

コントロールノードは、コードコンポーネントの名前空間、バージョン、および表示名を定義します。

ツールによってコントロール要素が生成されます。コントロールの開始点として適しています。

チップ

属性が別々の行に表示されるように XMLをフォーマットすると、読みやすくなる場合があります。 Visual Studio Code Marketplace で選択した XML 書式設定ツールを検索してインストールします: xml 書式設定拡張機能の検索。

以下の例は、読みやすくするために、属性を別々の行にしたフォーマットにしています。

属性	説明
`namespace`	コードコンポーネントの名前空間。
`constructor`	コードコンポーネントのコンストラクター。
`version`	コンポーネントのバージョン。コンポーネントを更新するたびに、バージョンを更新してランタイムの最新の変更を確認します。
`display-name-key`	UI に表示されるコードコンポーネントの名前。
`description-key`	UI に表示されるコードコンポーネントの説明。
`control-type`	コードコンポーネントの種類。この値は、コントロールです。

コメントされた領域を無視してドキュメントの書式を設定すると、自動的に生成されたマニフェストが表示されます。

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="SampleNamespace"
   constructor="LinearInputControl"
   version="0.0.1"
   display-name-key="LinearInputControl"
   description-key="LinearInputControl description"
   control-type="standard">
   <external-service-usage enabled="false">
   </external-service-usage>
   <property name="sampleProperty"
      display-name-key="Property_Display_Key"
      description-key="Property_Desc_Key"
      of-type="SingleLine.Text"
      usage="bound"
      required="true" />
   <resources>
      <code path="index.ts"
         order="1" />
   </resources>
</control>
</manifest>

この開始点から、次の変更を行います:

type-group 要素の追加
プロパティ要素を編集する
resources 要素の編集

type-group 要素の追加

型グループ要素の定義を「 (name) 」という名前で内要素に追加します。この要素はコンポーネント値を指定し、整数、通貨、浮動小数点、または 10 進数値を含めることができます。

機能はこのコントロールで使用されないため、要素を要素に置き換えます。

以前
その後

<control namespace="SampleNamespace"
   constructor="LinearInputControl"
   version="0.0.1"
   display-name-key="LinearInputControl"
   description-key="LinearInputControl description"
   control-type="standard">
   <external-service-usage enabled="false">
   </external-service-usage>
   <property name="sampleProperty"
      display-name-key="Property_Display_Key"
      description-key="Property_Desc_Key"
      of-type="SingleLine.Text"
      usage="bound"
      required="true" />
   <resources>
      <code path="index.ts"
         order="1" />
   </resources>
   </control>

<control namespace="SampleNamespace"
   constructor="LinearInputControl"
   version="0.0.1"
   display-name-key="LinearInputControl"
   description-key="LinearInputControl description"
   control-type="standard">
   <type-group name="numbers">
      <type>Whole.None</type>
      <type>Currency</type>
      <type>FP</type>
      <type>Decimal</type>
   </type-group>
   <property name="sampleProperty"
      display-name-key="Property_Display_Key"
      description-key="Property_Desc_Key"
      of-type="SingleLine.Text"
      usage="bound"
      required="true" />
   <resources>
      <code path="index.ts"
         order="1" />
   </resources>
   </control>

プロパティ要素を編集する

要素内の生成されたプロパティ要素を編集します。この要素は、列のデータ型など、コードコンポーネントのプロパティを定義します。

属性	説明
`name`	プロパティの名前。
`display-name-key`	UI に表示されるプロパティの表示名。
`description-key`	UI に表示されるプロパティの説明。
`of-type-group`	属性を使用して、特定の型グループの名前を参照します。この場合は、前の手順で作成したという名前のを参照してください。
`usage`	との 2 つのプロパティがあります。 - バインドされたプロパティは、列の値にのみバインドされます。 - 入力プロパティは、列にバインドされるか、静的な値を許可します。
`required`	プロパティが必須かどうかを定義します。

次のコードに示すように、プロパティノードを編集します。

<property name="sampleProperty"
   display-name-key="Property_Display_Key"
   description-key="Property_Desc_Key"
   of-type="SingleLine.Text"
   usage="bound"
   required="true" />

<property name="controlValue"
   display-name-key="Control Value"
   description-key="Control value description."
   of-type-group="numbers"
   usage="bound"
   required="true" />

resources 要素の編集

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

生成されたマニフェストには、コード要素の定義がすでに含まれており、属性値が設定されています。これらの値を使用します。次の「コードコンポーネントにスタイルを追加する」セクションでは、コントロールの CSS スタイルを追加します。その手順をサポートするには、マニフェストを編集して、開いている間に追加します。

resources ノードを編集し、以下の css 要素を追加します:

以前
その後

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

<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="0.0.1"
      display-name-key="LinearInputControl"
      description-key="LinearInputControl description"
      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="Control Value"
         description-key="Control value description."
         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>

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

次のコマンド使用してファイルを生成します。

npm run refreshTypes

出力は次のように表示されます。

PS C:\repos\LinearInput> npm run refreshTypes

> pcf-project@1.0.0 refreshTypes
> pcf-scripts refreshTypes

[12:38:06 PM] [refreshTypes]  Initializing...
[12:38:06 PM] [refreshTypes]  Generating manifest types...
[12:38:06 PM] [refreshTypes]  Generating design types...
[12:38:06 PM] [refreshTypes]  Succeeded

結果を確認するには、ファイルを開いて、生成された型を確認します:

/*
*This is auto generated from the ControlManifest.Input.xml file
*/

// Define IInputs and IOutputs Type. They should match with ControlManifest.
export interface IInputs {
   controlValue: ComponentFramework.PropertyTypes.NumberProperty;
}
export interface IOutputs {
   controlValue?: number;
}

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

マニフェストファイルを実装した後、TypeScript を使用してコンポーネントロジックを実装します。ファイル内にコンポーネントロジックを実装します。 Visual Studio Codeで index.ts ファイルを開くと、4 つの重要な関数 (init、 updateView、getOutputs、および destroy) が事前に定義されています。次に、コードコンポーネントのロジックを実装します。

任意のコードエディターでファイルを開き、次の変更を行います:

コントロールのプロパティを追加する
関数をイベントハンドラーとして追加する
関数を更新する
関数を編集する
関数を編集する
関数を編集する

コントロールのプロパティを追加する

export class LinearInputControl
implements ComponentFramework.StandardControl<IInputs, IOutputs>
{
/**
   * Empty constructor.
*/
constructor() {}

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;
/**
   * Empty constructor.
*/
constructor() {}

関数をイベントハンドラーとして追加する

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

関数を更新する

前
後に

public init(
   context: ComponentFramework.Context<IInputs>,
   notifyOutputChanged: () => void,
   state: ComponentFramework.Dictionary,
   container: HTMLDivElement
   ): void {
      // Add control initialization code
   }

public init(
   context: ComponentFramework.Context<IInputs>,
   notifyOutputChanged: () => void,
   state: ComponentFramework.Dictionary,
   container: HTMLDivElement
   ): void {
      // Add control initialization code
   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 updateView(context: ComponentFramework.Context<IInputs>): void {
   // Add code to update control view
}

public updateView(context: ComponentFramework.Context<IInputs>): void {
   // Add code to update control view
   // 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 {};
}

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

関数を編集する

より前に
後で

public destroy(): void {
   // Add code to cleanup control if necessary
   }
}

public destroy(): void {
   // Add code to cleanup control if necessary
   this.inputElement.removeEventListener("input", this._refreshData);
   }
}

完成したファイルは次のようになります:

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;
/**
   * Empty constructor.
*/
constructor() {}

/**
   * Used to initialize the control instance. Controls can kick off remote server calls 
      and other initialization actions here.
   * Data-set values are not initialized here, use updateView.
   * @param context The entire property bag available to control via Context Object; 
      It contains values as set up by the customizer mapped to property names defined 
      in the manifest, as well as utility functions.
   * @param notifyOutputChanged A callback method to alert the framework that the 
      control has new outputs ready to be retrieved asynchronously.
   * @param state A piece of data that persists in one session for a single user. 
      Can be set at any point in a controls life cycle by calling 'setControlState' 
      in the Mode interface.
   * @param container If a control is marked control-type='standard', it will receive 
      an empty div element within which it can render its content.
*/
public init(
   context: ComponentFramework.Context<IInputs>,
   notifyOutputChanged: () => void,
   state: ComponentFramework.Dictionary,
   container: HTMLDivElement
): void {
   // Add control initialization code
   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();
}

/**
   * Called when any value in the property bag has changed. This includes field values, 
      data-sets, global values such as container height and width, offline status, control 
      metadata values such as label, visible, etc.
   * @param context The entire property bag available to control via Context Object; 
      It contains values as set up by the customizer mapped to names defined in the manifest, 
      as well as utility functions
*/
public updateView(context: ComponentFramework.Context<IInputs>): void {
   // Add code to update control view
   // 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
      : "";
}

/**
   * It is called by the framework prior to a control receiving new data.
   * @returns an object based on nomenclature defined in manifest, 
      expecting object[s] for property marked as "bound" or "output"
*/
public getOutputs(): IOutputs {
   return {
      controlValue: this._value,
   };
}

/**
   * Called when the control is to be removed from the DOM tree. 
      Controls should use this call for cleanup.
   * i.e. cancelling any pending remote calls, removing listeners, etc.
*/
public destroy(): void {
   // Add code to cleanup control if necessary
   this.inputElement.removeEventListener("input", this._refreshData);
      }
}

完了したら、変更をファイルに保存します。

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

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

重要

CSS を使用してコードコンポーネントにスタイルを実装する場合は、コンポーネントのコンテナー要素に適用される自動的に生成された CSS クラスを使用して、CSS のスコープがコントロールに設定されていることを確認します。

CSS のスコープがグローバルに設定されている場合、コードコンポーネントがレンダリングされるフォームまたは画面の既存のスタイルが壊れる可能性があります。

サードパーティの CSS フレームワークを使用している場合は、既に名前空間が設定されているフレームワークのバージョンを使用するか、手動で、または 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;
}

ファイルを保存します。
ファイルには、リソース要素内にリソースファイルが既に含まれています。これは、前の「マニフェストの実装」セクションでその手順が完了したためです。
```
<resources>
<code path="index.ts"
  order="1" />
<css path="css/LinearInputControl.css"
  order="1" />
</resources>
```

注意

Power Appsコンポーネントフレームワークでは、RESX Web リソースを使用して、任意のユーザーインターフェイスに表示されるローカライズされた文字列を管理します。ノードには、ローカライズをサポートするリソースも登録されています。

この最初のチュートリアルには、ローカライズ機能は含まれていません。ローカライズは他のチュートリアルに含まれています。

Web リソースを使用してコードコンポーネントをローカライズする方法については、ローカリゼーション API のサンプルを参照してください。

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

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

npm run build

出力は次の結果のようになります。

> pcf-project@1.0.0 build
> pcf-scripts build

[2:05:41 PM] [build]  Initializing...
[2:05:41 PM] [build]  Validating manifest...
[2:05:41 PM] [build]  Validating control...
[2:05:42 PM] [build]  Running ESLint...
[2:05:43 PM] [build]  Generating manifest types...
[2:05:43 PM] [build]  Generating design types...
[2:05:43 PM] [build]  Compiling and bundling control...
[Webpack stats]:
asset bundle.js 6.56 KiB [emitted] (name: main)
./LinearInputControl/index.ts 4.9 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 2049 ms
[2:05:45 PM] [build]  Generating build outputs...
[2:05:45 PM] [build]  Succeeded
PS C:\repos\LinearInput\LinearInputcontrol>

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

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

注意

eslint ルールは、構成方法に応じて、ビルドに影響を与える可能性があります。ビルド中にエラーが発生した場合:

[12:58:30 PM] [build]  Failed:
[pcf-1065] [Error] ESLint validation error:
C:\project\LinearInput\LinearInputControl\index.ts
  10:26  error  'EventListenerOrEventListenerObject' is not defined  no-undef

で eslint ルールを確認し、リンティングルールをに設定します。エラーが表示された場合など:

error 'EventListenerOrEventListenerObject' is not defined no-undef

を開いてルールを編集し、値をルールに追加します:

    "rules": {
      "no-unused-vars": "off",
      "no-undef": ["warn"]
    }

eslint ルールを更新した後は、エラーなしでコントロールをビルドする必要があります。

コードコンポーネントをデバッグする

コードコンポーネントロジックの実装が完了したら、次のコマンドを実行してデバッグプロセスを開始します。詳細については、「コードコンポーネントのデバッグ」を参照してください。

npm start watch

出力は次の結果のようになります。

> pcf-project@1.0.0 start
> pcf-scripts start "watch"

[2:09:10 PM] [start] [watch] Initializing...
[2:09:10 PM] [start] [watch] Validating manifest...
[2:09:10 PM] [start] [watch] Validating control...
[2:09:11 PM] [start] [watch] Generating manifest types...
[2:09:11 PM] [start] [watch] Generating design types...
[2:09:11 PM] [start] [watch] Compiling and bundling control...
[Webpack stats]:
asset bundle.js 6.56 KiB [emitted] (name: main)
./LinearInputControl/index.ts 4.9 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 2060 ms
[2:09:13 PM] [start] [watch] Generating build outputs...
[2:09:13 PM] [start] [watch] Starting control harness...

Starting control harness...

[Browsersync] Access URLs:

 ----------------------------
 Local: http://localhost:8181
 ----------------------------

[Browsersync] Serving files from: C:\repos\LinearInput\out\controls\LinearInputControl

[Browsersync] Watching files...

また、ブラウザーが PCF コントロールサンドボックスに表示されるので、コントロールを確認してテストできます。

PCF コントロールサンドボックスの線形入力コントロール

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

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

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

パブリッシャー名とパブリッシャープレフィックスの値は、既存のソリューションパブリッシャーまたはターゲット環境で作成する新しいパブリッシャーのいずれかと一致する必要があります。

現在の値の一覧を取得するには、ターゲット環境で次のクエリを実行します。

[Environment URI]/api/data/v9.2/publishers?$select=uniquename,customizationprefix

詳細については、「 Web API を使用したデータのクエリ」を参照してください。

pac solution init コマンドの出力は次のようになります。
```
Dataverse solution project with name 'solutions' created successfully in: 'C:\repos\LinearInput\linearinputcontrol\solutions'
Dataverse solution files were successfully created for this project in the sub-directory Other, using solution name solutions, publisher name Samples, and customization prefix samples.
Please verify the publisher information and solution name found in the Solution.xml file.
PS C:\repos\LinearInput\linearinputcontrol\solutions> 
```
新しいソリューションプロジェクトを作成した後、作成されたコンポーネントの場所への参照を追加します。次のコマンドを使用します。
```
pac solution add-reference --path ..\..\
```
注意

指定したパスは、LinearInputControl フォルダーの下に作成した現在のソリューションフォルダーに関連付けられます。また、絶対パスも提供できます。

コマンドの出力は次のようになります。
```
Project reference successfully added to Dataverse solution project.
```
ソリューションプロジェクトから zip ファイルを生成するには、ソリューションプロジェクトディレクトリ内で次のコマンドを使用します。
```
msbuild /t:restore
```
または、.NET 6 SDK をインストールした場合は、次のコマンドを使用します。
```
dotnet build
```
再度、次のコマンドを実行します:
```
msbuild
```
注意

エラー Missing required tool: MSBuild.exe/dotnet.exe が発生した場合は、Path 環境変数に MSBuild.exe/dotnet.exe を追加するか、Developer Command Prompt for Visual Studio Code を使用します。 Prerequisites で説明したように、ビルドツール.NETインストールする必要があります。

チップ

コマンドを使用してソリューションファイルをビルドし、Dataverse にインポートしてソリューションチェッカーを実行すると、というメッセージが表示されます。コマンドを使用して、ソリューションファイルをリビルドします。ソリューションを Dataverse に再インポートし、ソリューションチェッカーを実行します。詳細については、「コードコンポーネントのデバッグ」を参照してください。
生成されたソリューションの zip ファイルは、フォルダーにあります。
zip ファイルの準備ができたら、Power Apps を使用して手動でソリューションを Dataverse にインポートするか、または Microsoft Power Platform Build Tools を使用して自動的にインポートします。

注意

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

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

アプリにコードコンポーネントを追加するには、次の記事の手順に従います:

モデル駆動型アプリの列またはテーブルにコンポーネントを追加する
キャンバスアプリにコードコンポーネントを追加する
ポータルでコードコンポーネントを使用する

参照

サンプルコンポーネントをダウンロード
Power Apps コンポーネントフレームワークを学ぶ
ALM で使用されるツールとアプリの概要
Power Apps コンポーネントフレームワーク API リファレンス
 Power Apps コンポーネントフレームワークの概要
コードコンポーネントのデバッグ

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-07

次の方法で共有

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

前提条件

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

マニフェストの実装

type-group 要素の追加

プロパティ要素を編集する

resources 要素の編集

完成したマニフェスト

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

コントロールのプロパティを追加する

関数をイベント ハンドラーとして追加する

関数を更新する

関数を編集する

関数を編集する

関数を編集する

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

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

コード コンポーネントをデバッグする

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

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

参照

フィードバック

その他のリソース

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

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

関数をイベントハンドラーとして追加する

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

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

コードコンポーネントをデバッグする

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

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