PowerAppsでオリジナルのレーティングコントロールを作成

#概要
- PowerAppsには「評価コントロール」が用意されており、5段階評価といった入力/表示にスターレーティングを使用できます。
- ただし現状星型しか選べない、標準機能で星0に戻せないなど若干の不満があります(ローコード開発にそんなカスタマイズは不要って？)
- ギャラリーコントロールを駆使してオリジナルのスターレーティングを作成している事例を見かけたので、自分も作ってみました。

#完成形
以下のようなものをコンポーネントとして作成し、再利用可能にしました。
タップやスワイプで入力フィールドとしても使用可能です。
![StarRating.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/8cc374a9-b9d4-a80e-1de2-5b4a0d7710d5.gif)

#作成方法
- タップで設定できるコンポーネントの作成方法を解説します。
- ギャラリーコントロールとSvg画像を駆使して作成します。


##コンポーネントに配置するもの
・ボタン
・ギャラリー
　　・画像コントロール(ギャラリー内)

##コンポーネントの設定

プロパティの設定

| プロパティ名  | タイプ | データ型 | 説明               | 関数                             |
|---------------|--------|----------|--------------------|----------------------------------|
| MaxScore      | 入力   | 数値     | 最大スコア(10まで) | 初期値5                           |
| DefaultScore  | 入力   | 数値     | 初期スコア         | 初期値0                           |
| IsEditMode    | 入力   | Bool     | 編集可否           | 初期値true                        |
| OutputScore   | 出力   | 数値     | 出力スコア         | CurrentScore                     |
| TemplateWidth | 出力   | 数値     | アイコンの幅       | Self.Width /   (Self.MaxScore+1) |

OnReset：```Set(CurrentScore,Self.DefaultScore)```
→フォームで循環参照を避けるために一旦変数に格納(DefaultScore変更時にOnResetが働くよう設定)
Height：```Self.TemplateWidth```

##ギャラリーの設定
Items：FirstN([1,2,3,4,5,6,7,8,9,10],Parent.MaxScore)
　→1～MaxScoreまでのコレクションを設定
OnSelect：Set(CurrentScore,ThisItem.Value)
　→クリックしたときに変数に数値を代入
DisplayMode：If(Parent.IsEditMode,DisplayMode.Edit,DisplayMode.View)
　→フォームが表示モードのとき動作しないように

その他
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/05288914-8ad7-5993-8997-d6f2ae1fa456.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/38a59d66-63b8-d79f-e635-7dc0dacf1b74.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/bff16660-41dd-d839-ad89-aff57305e786.png)

##画像の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/1be28c50-b973-8794-766b-bc62c32942bc.png)
OnSelect：Select(Parent)
Image：

```JavaScript:Image
With(
{StarColor:If(ThisItem.Value <= FireRating.OutputScore ,"Orangered","LightGray")},
"data:image/svg+xml;utf-8, " & 
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' fill='" & StarColor &"' viewBox='0 0 24 24'><path d='M8.625 0c.61 7.189-5.625 9.664-5.625 15.996 0 4.301 3.069 7.972 9 8.004 5.931.032 9-4.414 9-8.956 0-4.141-2.062-8.046-5.952-10.474.924 2.607-.306 4.988-1.501 5.808.07-3.337-1.125-8.289-4.922-10.378zm4.711 13c3.755 3.989 1.449 9-1.567 9-1.835 0-2.779-1.265-2.769-2.577.019-2.433 2.737-2.435 4.336-6.423z'/></svg>"
)
)
```
- With関数は第一引数で変数と値を定義し、第二引数でその変数を使用する処理を記述します。
- StarColorは出力スコア(コンポーネント名.OutputScore)とThisitem.Valueを比較し、色を分岐されます。
- アイコンはsvgを使って描画し、fillの部分にStarColor変数を指定します。
- アイコンSVGのPathはこちらから入手しました→https://iconmonstr.com/

その他
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/0accc406-ddb6-7e01-5cba-2eb79d01e3a6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/e4bb4866-ce33-bcbf-523f-12810f10d03f.png)

##ボタンの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/b958c15c-f122-6b12-0a08-134852903a1f.png)
OnSelect：Set(CurrentScore,0)
→クリックしたときにスコアを0に設定
DisplayMode：If(Parent.IsEditMode,DisplayMode.Edit,DisplayMode.View)
Text："↺"
Size：Parent.TemplateWidth*0.8
→テキストサイズをコンポーネントの幅に合わせて設定
Width：Parent.TemplateWidth
Height：Parent.Width


#使用方法
- 評価値を入れるための数値フィールドを持ったテーブルをデータソースとしたEditFormを作成
- コンポーネントをEditForm外に配置。
    - ※EditForm内に入れると上手く動作しませんでした。フォームへの挿入は正式にサポートされていないようです。
- MaxScoreに評価の最大値、例えば5を入力
- DefaultScoreにDataCard_評価値.Defaultを設定(評価値データカードのDefault)
- DataCardのUpdateにコンポーネント名.OutputScoreを設定
- 必要に応じて、IsEditModeプロパティを設定。(編集モード時はTrue、表示モード時はFalsになるように)
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/17d584b0-bb17-0115-a154-914355264a86.png)

コンポーネントの既知の制限：ギャラリーまたはフォームにコンポーネントを挿入することはできません。
https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/create-component#known-limitations



#その他
スワイプ式も作成しましたがいまいち操作性が良くないので解説しません。
スライダーコントロールを使って星の真ん中にドラッグバーが来るように調整しています。
![SwipeRating.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/03607bed-1eb1-8495-3a52-b75bc19afb84.gif)
参考にした動画では値の表示のみですが、それをカスタマイズしてクリックで設定できるようにしました。

#参考にした情報
https://youtu.be/ZK0Y-Jvk-_k