PowerAppsにSVG(Scalable Vector Graphics)を組み合わせるとできることが拡がる
Contents
01│まず動画をご覧ください
左側のギャラリーにある+アイコンを押すと、右側のギャラリーに商品が追加されます。
御覧の通り、商品が増えるたびに斜線の始点が下がっていきます。
また、選択数が0および5の場合は斜線を表示しません。
02│PowerAppsでSVGを使う方法
SVGを使うには、ImageコントロールのImageプロパティにコードを埋め込みます。
HTMLと異なり、svgタグ内は二重引用符ではなく引用符を使うことに注意してください。
また、他コントロールや関数の値を参照させたい場合は、“&参照値&”とすれば実現できます。
"data:image/svg+xml,"
&EncodeUrl("
<svg viewBox='0 0 550 500' xmlns='http://www.w3.org/2000/svg'>
表示させたい内容
</svg>")
03│行数を調べるときはCountRowsを使って調べる
今回実現したいことは行数に応じて斜線の始点を下げるです。
そのため、ギャラリーの行数(アイテム数)を調べなければいけません。
行数についてはCountRows関数を使用します。
CountRows 関数は、テーブルのレコード数をカウントします。
Power Apps | Microsoft Docsから引用
CountRows( Table ) Table – 必須。 カウントするレコードのテーブル。
04│斜線をSVGと関数で表示する
からくりは単純です。
- まずGalleryコントロールを設置します。サイズは550*500としました。
- つぎにギャラリーの上に同じサイズのImageコントロールを重ねて配置します。
- そのImageプロパティのに下記コードをコピペするだけです。
"data:image/svg+xml,"
&EncodeUrl("
<svg viewBox='0 0 550 500' xmlns='http://www.w3.org/2000/svg'>
<line x1='0' y1='"&CountRows(Gallery02.AllItems)*100&"' x2='550' y2='500' stroke='#666666'/>
</svg>")
あとは行数が増えるたびに斜線の始点を下げればよいのです。
CountRows(Gallery02.AllItems)*100の部分ですね。この記述で行数が1つ増えるたびに、斜線の始点yが100ずつ下がるを表現しています。
CountRowsの中は直接コレクションを指定しても同じように動作します。
ギャラリーをスクロールさせる必要がある場合は、SVG化したImageコントロールが邪魔してスクロールバーを選択できません。ギャラリーよりも背面に配置しましょう。
05│0行や表示上限行数を超えたときに斜線を表示しない方法
特定条件で斜線を表示させたくない場合がありますよね。
サンプルでは0行と上限5行になります。
どう計算しようか悩むかもしれませんがこれも単純です。
CountRows(Gallery02.AllItems)の結果が0に等しい、または上限以上となる場合にSVGを非表示にすればよいのです。
コードは下記を参照してください。
CountRows(Gallery02.AllItems) || CountRows(Gallery02.AllItems)>=5
06│まとめ
とりあえずSVGは素晴らしいってことですね。
今回は斜線を引くことに活用しましたが、標準アイコンにはない形を用意するときにも使えます。
PowerAppsのアイコンというかシェイプは回転できないので不便ですよね。
そういった問題も解決できるので是非SVGの自作にチャレンジしてみてください。
今後もSVGを使った案件を紹介していきますので気長にお待ちください。
請求書などは後から改ざんされないよう空欄は斜線を引くのが一般的です。
せっかくアプリ化したのに印刷したあとわざわざ定規使って線を引く、これって無駄だと思いませんか?
今回はそんな悩みを解決すべく、PowerAppsで斜線引きを実現してみます。