PowerApps│ギャラリーの空欄に斜線を引く方法

七草あんこ

請求書などは後から改ざんされないよう空欄は斜線を引くのが一般的です。

せっかくアプリ化したのに印刷したあとわざわざ定規使って線を引く、これって無駄だと思いませんか?

今回はそんな悩みを解決すべく、PowerAppsで斜線引きを実現してみます。

いきなり結論

PowerAppsにSVG(Scalable Vector Graphics)を組み合わせるとできることが拡がる

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 関数は、テーブルのレコード数をカウントします。
CountRows( Table ) Table – 必須。 カウントするレコードのテーブル。

Power Apps | Microsoft Docsから引用

04│斜線をSVGと関数で表示する

からくりは単純です。

  1. まずGalleryコントロールを設置します。サイズは550*500としました。
  2. つぎにギャラリーの上に同じサイズのImageコントロールを重ねて配置します。
  3. その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を非表示にすればよいのです。

コードは下記を参照してください。

Image.Visibleプロパティ
CountRows(Gallery02.AllItems) || CountRows(Gallery02.AllItems)>=5

06│まとめ

とりあえずSVGは素晴らしいってことですね。

今回は斜線を引くことに活用しましたが、標準アイコンにはない形を用意するときにも使えます。

PowerAppsのアイコンというかシェイプは回転できないので不便ですよね。

そういった問題も解決できるので是非SVGの自作にチャレンジしてみてください。

今後もSVGを使った案件を紹介していきますので気長にお待ちください。

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ) 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。