PowerApps コンポーネントフレームワーク : スライダーコントロールの改修と再展開

Last updated at 2019-08-01Posted at 2019-07-15

前回の記事では開発したスライダーコントロールをパッケージ化して展開しましたが、いくつか修正したい場所が出てきました。今回はコントロールを改修して再展開してみます。

マニュフェストの編集と型作成

まずはマニュフェストで変更したい点を追記します。ここでは最小値と最大値が設定できるよう input プロパティを追加します。また型は数値を指定。尚、利用できる方の一覧は以下の通りです。

参照: property

値	説明
Currency	通貨型。-922,337,203,685,477 から 922,337,203,685,477 の値を取る。精度は任意のものか組織レベルの設定を利用。
DateAndTime.DateAndTime	日付型。日付と時間両方を表示。
DateAndTime.DateOnly	日付型。日付のみ表示。
Decimal	精度 10 までの数値型。-100,000,000,000 から -100,000,000,000 の値をとり精度と最小/最大を指定可能。
Enum	配列型。
FP	浮動小数点型。精度 5 までの -100,000,000,000 から-100,000,000,000 の値をとり、精度と最小/最大を指定可能。
Multiple	複数行テキスト型。最大 1,048,576 文字をサポート。
OptionSet	オプションセット型。ユーザーは 1 つの選択肢のみ選択可能。
SingleLine.Email	電子メール形式のテキスト。クリックするとメーラーが起動する。
SingleLine.Phone	電話番号形式のテキスト。クリックするとシステムによって通話アプリが起動する。
SingleLine.Text	一行テキスト。
SingleLine.TextArea	複数行テキスト。最大 4000 文字をサポート。
SingleLine.Ticker	株価用テキスト。クリックするとブラウザー等で株価が表示される。
SingleLine.URL	URL 用テキスト。クリックするとブラウザーが起動する。HTTP, HTTPS, FTP , FTPS, ONENOTE および TEL のみ許可。
TwoOptions	二つのオプションセット。はい/いいえ、暑い/寒いなど二択形式をサポート。
Whole.None	整数型。数字を表示。

1. Visual Studio Code で LinearControl を開き、ControlManifest.Input.xml の control 内に最小値を保持するプロパティを追加。

型は Whole.None で整数を指定
初期値の設定としてのみ使うため、usage で input を指定

ControlManifest.Input.xml

<property 
  name="sliderMinValue" 
  display-name-key="Slider minimum value" 
  description-key="Slider minimum value for the field" 
  of-type="Whole.None" 
  usage="input" 
  required="true" />

2. 同様に最大値用のプロパティも追加。

ControlManifest.Input.xml

<property 
  name="sliderMaxValue" 
  display-name-key="Slider maximum value" 
  description-key="Slider maximum value for the field" 
  of-type="Whole.None" 
  usage="input" 
  required="true" />

3. control のバージョンを変更。
※これを忘れると変更が反映されない。

4. ターミナルより以下コマンドを実行。

npm run build

5. generated\ManifestTypes.d.ts に入力用に追加したプロパティが追加されることを確認。

index.ts の改修

1. init メソッド内、最小値と最大値を設定しているコードを以下の様に変更。

// 最小値と最大値を設定
//this.inputElement.setAttribute("min", "1");
this.inputElement.setAttribute("min", 
	context.parameters.sliderMinValue.raw ? 
	context.parameters.sliderMinValue.raw.toString() : "1");
//this.inputElement.setAttribute("max", "1000");
this.inputElement.setAttribute("max", 
	context.parameters.sliderMaxValue.raw ? 
	context.parameters.sliderMaxValue.raw.toString() : "1000");

2. updateView メソッドの中身を変更して正しいコード修正。

public updateView(context: ComponentFramework.Context<IInputs>): void {
	// 現在のフィールドの値を内部変数に保存
	this._value = context.parameters.sliderValue.raw;
	// スライダーとラベルに設定
	// this.inputElement.setAttribute("value",context.parameters.sliderValue.formatted ? context.parameters.sliderValue.formatted : "");
	this.inputElement.value = context.parameters.sliderValue.raw ? context.parameters.sliderValue.raw.toString() : "";
	this.labelElement.innerHTML = context.parameters.sliderValue.formatted ? context.parameters.sliderValue.formatted : "";
}