線形入力コンポーネントの実装

このサンプル コンポーネントは、フォームの数値型を操作する際のユーザー エクスペリエンスを変更します。 数値をタイプ入力する代わりに、線形入力コンポーネントは線形スライダーを提供し、その属性の値を使用してフォームに設定できます。

注意

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

このコンポーネントを実装するには、まず マニフェスト ファイルを定義し、TypeScript でカスタム ロジックを実装します。

以下に使用できます

モデル駆動型アプリとキャンバス アプリ

コード

完全なサンプル コンポーネントは、こちら からダウンロードできます。

このサンプルでは 種類のグループ が定義され、マニフェストのそのグループに10進数、整数型、浮動小数点型、通貨値型を含む numbers として名前が付けられます。 このグループはコンポーネント プロパティをバインドするために使用されます。

min と maxの値がそれぞれ 1 と 1000 に設定されたタイプrangeの入力要素が作成されます。 スライダの位置に関する値を示すラベル要素が作成されます。 コンポーネントの入力のeventlistenerに関数refreshDataを追加します。 [コンテキスト](../reference/context.md) とnotifyOutputChanged` を保存するローカル変数を作成します。 init 関数の一部として渡されるパラメータから 、コンテキストと notifyOutputChanged を割り当てます。

refreshData 関数のロジックを実装します。 サンプルで明らかなように、inputElement から値を取得して、コンポーネントの値と labelElement の innerHTML プロパティを設定し、そして変更がフレームワーク層の上に伝播されるように notifyOutputChanged を呼び出します。

public refreshData(context: ComponentFramework.IPropBag<InputsOutputs.IInputBag>) 
{ 
   this._value = (this.inputElement.value as any)as number; 
   this.labelElement.innerHTML = this.inputElement.value; 
   this._notifyOutputChanged(); 
} 

updateView 関数で、context.parameters から属性の値を取得して、コンポーネント値とコンポーネントの入力要素を格納する値変数に設定します。

public updateView(context: ComponentFramework.IPropBag<InputsOutputs.IInputBag>): void 
 { 
    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 : ""; 
   } 

関連トピック

サンプル コンポーネントをダウンロード
サンプルコンポーネントの使用方法
Power Apps Component Framework API の参照
Power Apps component framework のマニフェスト スキーマ リファレンス

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。