kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- データタイプShowの基本的な使い方を知りたい人
- 入力画面に画像を挿入させることが出来る
- 入力タブを用いて入力者にわかりやすいUIに仕上げることが出来る
- Desktop modeを用いることでdetail画面を分割する方法がわかる
今回の記事内容は、中級者以上の内容です。
AppSheetでアプリを開発している皆さん、こんなことを考えたことありませんか？
データ入力の時に画像で入力補助が出来たら・・
もっとわかりやすい入力画面に仕上げたい
そんなときに役に立つのがデータタイプShowになります。
設定方法は非常に簡単ですので、ぜひマスターしてほしい内容です。
それでは勉強していきましょう(^^)
※2023.5.10追記
当初まとめていた記事の設定では、Google Drive上の閲覧権限や、PCのキャッシュの影響で、上手に写真が表示されない可能性がありました。
それを回避する方法を別の記事でまとめ直したので、入力画面に画像を挿入したい方は、こちらの記事を参考にしてください(^^)
入力タブを入力画面で作る方法
以下のようなデータ構成で確認します。シート名はアンケートとしています。
このデータをAppSheetに送り、設定を行います。
設定は以下の手順を参考にしてください。
質問タブに好意的な意見と表示させるためのカラム
質問タブに否定的な意見と表示させるためのカラム
Page styleはTabsを選択、Column orderで表示させるカラムの順番を変更する
好意的な意見タブを選択している場合、表示されるのはカラム1、カラム2、カラム3
否定的な意見タブを選択している場合、表示されるのはcol1、co2、col3
このように、選択するタブによって入力画面をコントロールすることが可能です。
分かりやすい、入力しやすいアプリを作成するTIPSとして、知っておいて損はないと思います(^^)
Desktop modeとShowカラムの組み合わせ
Desktop modeとShowカラムを使い、視覚的に訴えかけるDetail Viewを作成することも可能です。
作成の手順としては、
- Desktop modeの使用をONにする
- Detail ViewのColumn orderの設定をする
になります。
作成手順は以下を参考にしてください(^^)
Desktop modeはパソコンで使うアプリならONにした方がいいです
プレリリース機能であるDesktop modeについて学べます(^^)
【プレリリース！】Desktop modeの基本を学ぶ(^^)
Settings → General → Desktop mode をONにする。
対象テーブルのDetail ViewにあるColumn orderを上図の順番にセットする。
全画面表示で登録データを確認すると・・
Showカラムで区切ったカラム群を1つのカテゴリーとして、住み分けることが可能(^^)
まとめ
以上、データタイプShowで出来ることについてまとめた記事でした。
この設定をアプリに組み入れることで、見慣れたAppSheetから逸脱したUXを提供することが可能です。
ぜひ一度トライしてみてください(^^)
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)