管理人がみんなに伝えたい!!と思った知識や学びを気ままに書いています(^^)

【効果あり】カラム値を強調させる方法

【効果あり】カラム値を強調させる方法

本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事!と感じた部分を記事にまとめています。

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

新UI画面の説明

まずはじめに

本記事はこんな人におすすめ!!
  • テーブルViewで入力値を強調させる方法が知りたい人
  • ワンランク上のカラム設定に挑戦したい人
本記事を読んで出来るようになること
  • カラフルなテーブルViewの作成方法
  • ifs()関数の基本と&を用いた構文の作り方

今回の記事内容は中級者以上の内容です。

別に知らなくてもアプリ開発には全く影響ありません笑

でも、実装してあげると「すげーっ!」って言われなくもないようなTIPSです。

視覚的にユーザーに訴えることが出来る設定なので、見栄えにこだわる人はぜひ参考に。

それでは勉強していきましょう(^^)

データの下準備

検証データ

今回用いたデータです。

検証データ

検証テーブルに名前、性別、年齢、血液型の4つのカラムを用意しました(^^)

今回のTIPSが適しているデータの特徴

カラムのデータタイプがenum

アクションボタン(set the value)のカラム

カラムの入力値が決まった値(クリーンな値)を取るカラムに設定すると効果的(^^)

それでは早速取り掛かってみましょう!


カラム値強調の方法

今回用いる方法は、以下のサイトを使用します。

基本的な使い方
画面の説明
  • 赤の部分は幅と高さ(100×50)
  • 青の部分は背景色(3d4070)
  • 緑の部分はテキスト文字(今回の場合は”test”)
作成の手順
virtual columnの追加
app formulaの入力
イメージカラムの表示

ただしこのままの表示イメージでは、決まったイメージ写真しか表示されません・・

そこでifs()関数を用いて汎用性を高めていきます(^^)

カラム値の値を動的に変える

もう一度URLの構成を見てみましょう。

“https://placehold.jp/3d4070/ffffff/100×50.png?text=test

  • 赤の部分は幅と高さ(100×50)
  • 青の部分は背景色(3d4070)
  • 緑の部分はテキスト文字(今回の場合はtest)
  • 黄色下線の部分は文字色(デフォルトはffffffで白色)

次に変更したいカラム値の部分に手を加えてみましょう(^^)

(例)血液型のカラム値の場合

“https://placehold.jp/3d4070/ffffff/100×50.png?text=”&[血液型]

このようにVurtial columnの値を変更すると・・

カラム強調の例

appsheetでは ” と & を組み合わせて文字列を連結させることが可能です(^^)

文字列をつなげる方法は知っておきましょう

参考記事

カラム値によって背景色を動的に変更する

最後にカラムの値によって背景色を動的に変更し、UIを向上させるように修正を加えていきます(^^)

ifs()関数の使い方

ifs(is-true?,then-do-this[,is-true?,then-do-this]…)

第一引数にYes/Noを返す条件、第二引数に第一引数がtrueの場合に実行する処理を指定します。

ifs()関数の特性を活かして、複数の場合分けを考えてみましょう。

“https://placehold.jp/3d4070/ffffff/100×50.png?text=”&[血液型]

背景色を表しているのは青字の部分なので、ここにifs()関数を使用します。

構文の解説

ifs()関数は汎用性の高い関数です

参考記事

記事の内容を真似して実践している場合は、以下の構文をコピーしてご利用ください(^^)

“https://placehold.jp/”&ifs([血液型]=A,”3d4070″,[血液型]=B,”3fd98a”,[血液型]=O,”f5f92f”,[血液型]=AB,”f96cb7″)&”/ffffff/100×50.png?text=”&[血液型]

結果の確認
結果の確認

構文の解説どおり、血液型の値が変わるとカラムの背景にセットした色が付いています。


まとめ

以上、カラム値を強調させる方法についての記事でした。

アプリを作成する上で一番重要なのは、ユーザーの視点に立った入力しやすい、分かりやすいアプリであることだと思います。

こういう小技の引き出しがたくさんあるとそれだけ選択肢が広がるので、これからもどんどんと知識を蓄えていきましょう(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです!

勉強お疲れさまでした(^^)

他にも役立つTIPSをまとめています

参考記事

コメントを残す

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

CAPTCHA