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

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

まずはマニュフェストで変更したい点を追記します。ここでは最小値と最大値が設定できるよう 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 : "";
}

3. ターミナルより npm start を実行して動作を確認。

再パッケージと展開

コードを修正したので再パッケージして展開します。

1. SampleSolution\Other\Solution.xml でバージョン情報を更新。

2. 以下コマンドでパッケージをビルド。

msbuild /p:configuration=Release

3. https://make.powerapps.com に接続。管理者権限でログイン。任意の環境で Solutions を選択し、Import をクリック。

4. インポート時にパッケージが更新される旨が表示されるので、そのまま次へ。

5. 次の画面も既定のまま「インポート」をクリック。

6. インポートが終わったら Entities | 取引先企業 | Forms | 取引先企業を開く。

7. 「Switch to classic」をクリック。

8. UI コントロールを設定した「従業員数」のプロパティからカスタムコントロールを開いて新しいプロパティがあることを確認。

9. 鉛筆のアイコンをクリックして値を設定。任意のフィールドの値に設定することもできるがここでは静的な値としてバインド。

10.　設定を確認して閉じる。

11. フォームを「保存」して「公開」。

動作確認

最後に動作の確認です。既に作成済のアプリから動作を確認。

まとめ

修正自体は簡単ですがバージョンの設定を間違うと、展開しても反映されないため注意してください。少し面倒な気もしますが、CDS/Dynamics 365 CE では展開を最適化するため、差分更新が採用されているため必須です。

次回はグリッドのカスタムコントロールを開発してみます。

目次へ戻る
 次の記事へ