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

[前回の記事](https://qiita.com/kenakamu/items/5e3825900c80c5accc07) では開発したスライダーコントロールをパッケージ化して展開しましたが、いくつか修正したい場所が出てきました。今回はコントロールを改修して再展開してみます。

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

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

[参照: property](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/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 を指定

```xml: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\. 同様に最大値用のプロパティも追加。

```xml: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 のバージョンを変更。
※これを忘れると変更が反映されない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/df30460f-1f60-da63-7d73-183178e69cf7.png)

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

```shell
npm run build
```

5\. generated\ManifestTypes.d.ts に入力用に追加したプロパティが追加されることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/ff76c7c9-16e5-f788-9ee2-41a8da35e8e9.png)

# index.ts の改修

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

```typescript
// 最小値と最大値を設定
//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 メソッドの中身を変更して正しいコード修正。

```typescript
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 でバージョン情報を更新。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/76e96854-2b34-a6d6-f1cc-28639cc6fccf.png)

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

```shell
msbuild /p:configuration=Release
```
3\. https://make.powerapps.com に接続。管理者権限でログイン。任意の環境で Solutions を選択し、Import をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/2074fd3d-0de0-96d7-8c09-20ffceb8b62b.png)

4\. インポート時にパッケージが更新される旨が表示されるので、そのまま次へ。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/306d37b4-1711-8769-10fd-781094c82a96.png"/>

5\. 次の画面も既定のまま「インポート」をクリック。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/38ad3369-ebf0-647b-e66e-5524c7f7b982.png"/>

6\. インポートが終わったら Entities | 取引先企業 | Forms | 取引先企業を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/1b2b90cf-da1e-0135-0b3f-29ea2b2add42.png)

7\. 「Switch to classic」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/6fe506a3-f1e9-5e3d-8c04-8ac25ca0c356.png)

8\. UI コントロールを設定した「従業員数」のプロパティからカスタムコントロールを開いて新しいプロパティがあることを確認。
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/d9061c94-893f-00d9-da40-762b97210f14.png"/>

9\. 鉛筆のアイコンをクリックして値を設定。任意のフィールドの値に設定することもできるがここでは静的な値としてバインド。
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/056da510-8fd6-7ca1-1854-ec8b97df030d.png"/>

10\.　設定を確認して閉じる。
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/ba054f2f-6f4f-c46b-414f-68ae65edcd6d.png"/>

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

# 動作確認

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

# まとめ

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

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

[目次へ戻る](https://qiita.com/kenakamu/items/5dd4c64b14c453fa7d85)
[次の記事へ](https://qiita.com/kenakamu/items/ef1b0e9250817ac6e814)