金額が一定以上だったら着色する判定条件がたくさんある場合の着色まとめギャラリーの表示内容で背景色を動的に変更する前回、ギャラリーコントロール(Gallery)を使ってGoogleスプレッドシートの内容を一覧表示できるようにしました。必要なデータは表示したものの、ちょっと味気なかったですね。アプリの画面は見やすくしてナンボの世界です。そこで今回はギャラリーに表示されている内容を判定して、ギャラリーの背景色を変更するという作り込みをしてみます。Excelやスプレッドシートで言うところの条件付き書式というに近いです。ギャラリーの背景色の変更ギャラリーの背景色の定義は、ギャラリーコントロールの「TemplateFill」の値で指定できます。1で対象のギャラリーコントロールをクリックします。2プロパティ名は「TemplateFill」を選択します。3色の値を指定します。0」が指定されています。PowerAppsで色を指定する場合、RGBA関数とColorValue関数があります。今回はもともと入力されていたRGBA関数を使います。コンピュータで色を表現する方法の1つに、赤(R)、緑(G)、青(B)の3色を混ぜ合わせる方法があり、これらの値の頭文字を取ってRGBと呼んでいます。値の範囲は、それぞれ0~255です。最後のAはアルファ値と言って、色の透過度を示すものです。これにより半透明の着色が可能です。値の範囲は0~1です。どれぐらい透過させるかを少数またはパーセンテージで指定します。このような感じで指定すると、薄緑に変更できます。透過度の0.3は30%と指定することもできます。いろいろな色を試してみてください。今回使わなかったもう一つのColorValue関数ですが、こちらはスタイルシート(CSS)と同じで16進数のカラーコードで色指定ができます。次はギャラリーに表示されている内容によって、背景色を動的に変更してみましょう。動的に変更する、ということはギャラリーの内容によって色を変更する処理を作る必要があります。プログラムを書きます。金額が一定以上だったら着色する「もし、販売金額が5,000円以上だった場合は、背景色を薄い赤色にする」ということをしたいので、これをコードで書きます。コードと言ってもPowerAppsの場合はプログラム言語と比較すると簡単で、エクセルの関数を使ったがあればすぐに書けます。さきほどのやりたいコードをコードで書くと、次のようになります。条件によって処理を分岐するには、IF関数を使います。0))実際に書いて動かしてみると、次のようになります。前回の記事で触れましたが、ギャラリーの各データはThisItemという名前でアクセスできます。よって今回は、各データの販売金額が5,000円以上という比較式を書くことになりますので、このように記載します。5,000円以上の販売記録に着色できましたね。これで高額販売記録を目立たせて表示することができます。一行で書くと分かりづらいコードも、通常のプログラムのようにインデントをつけて階層化して書くとわかりやすいです。行頭のIFはIF関数と言って、第1引数の式が成り立つなら第2引数の処理を実行、成り立たないなら第3引数の処理を行うというものです。0)⇒白というコードになります。販売金額は数値として取得する必要があるので、Value関数を使っています。これを使わないと”5000′′という文字列として取得してしまい不等式が正しく動作しなくなりますので注意が必要です。今度は、販売した人で色分けしてみましょう。データを薄緑に着色するコードを書いてみます。これもIF関数で条件を指定して、色つけ処理を分岐します。0))次は他の人にも色付けしてみましょう。IF関数は、条件と条件を満たした時の処理をつなげて書いていき、最後にどの条件にも当てはまらなかった場合の処理を書きます。0))うまく色分け処理が作れたと思います。このままでも良いのですが、コードが長くなってくると読みづらくなり、後で見た時に「これなにやってるんだっけ?」となってしまいますので、このぐらい長くなってきたら、やはりインデントつけて整形しておいた方がよいと思います。IF関数の代わりにSwitch関数を使うIF関数も条件が増えるとその分条件式ごと追加する必要があり、読みにくくなります。条件となる項目が同じでそれに該当するかどうかという判定を行う場合は、次のようにSwitch関数で書き換えることができます。私はSwitchが使えるなら使う派です。0))スポンサーリンクまとめ今回はギャラリーコントロールの背景色を制御することで、見栄えをよくする方法を紹介しました。見栄えだけでなく、着色すると直感的に印象付けることができるため、アプリのデザインをしていく上で重要なポイントだったりします。有効なデータ以外を灰色で表示し、残っているデータがなにかをビジュアル的に表現することでひと目で状況がわかるようになります。重要なデータは暖色で表示し、低いデータは寒色で表示することで目的のデータを注視させることも可能です。Appsは、スマートフォン用のアプリやパソコン用のWebアプリなどを、コードを書かずに作成できるノーコード/ローコードツール(ソリューション)です。必要なパーツをPowerPointの感覚で配置し、必要な制御をExcelの関数の感覚で記載することでアプリを作成できます。今回はデータの一覧表示部分として使っているギャラリーコントロールに画像を追加する方法を紹介します。コピーばったん(プロフ詳細)をフォローするばったん(プロフ詳細)関連記事IT【PowerApps】ギャラリーのソート順を変更する以前、PowerAppsのギャラリーでスプレッドシートの内容を一覧表示するアプリを作りました。PowerApps上で一覧表示するデータが入ったスプレッドシートを指定するだけで簡単に一覧表示してくれる優れものでした。前回はPowerAppsでポップアップウインドウを作るところまでやってみました。動かすところまでをメインでやったため、デザイン的にちょっとダサいまま終わってしまいました。Apps(パワーアップス)を使うと簡単にデータを操作できるアプリが作成できます。アプリを作ると割りと早めにメッセージをポップアップ通知したいシーンが出てきます。PowerAppsのアプリでもポップアップでメッセージを表示することができます。PowerAppsを使うには、Microsoftのアカウントが必要です。PowerAppsで作成したアプリはMicrosoftのアカウントに紐づいた状態でクラウド上に保存されます。そんな方向けの記事です。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。最近はマネジメント業務ばかりやっていますが、エンジニアとしていつまでも現役でありたいので、時々手を動かしていますが、歳を重ねると物忘れがひどくなる一方なので、備忘録としてブログを運営しています。Reserved.ホーム検索トップサイドバータイトルとURLをコピーしました。