gusuku Customine カスタマインの歩き方 装飾編
2. 実例に学ぶカスタマイズ作成のポイント

2-3. タブの作り方・使用方法

2-3-2. 特定の条件でのタブの表示・非表示
2-3-2-2. スマホで操作する際に特定のタブを初期表示する

前の記事:2-3-2-1. ログインユーザーがレコード作成者の場合のみ個人タブを表示する

次の記事:なし (この記事が最終です)


はじめに

フィールドが多くなってくるとスクロールが大変になりますが、カスタマインのタブ表示機能を使うと、フィールド条件やユーザーによって、表示を切り替えることができます。


また、kintone標準機能であるグループフィールドではグループ内にテーブルを含めることはできませんが、タブにはテーブルを含めることができるので、よりスマートな画面表示を作ることができます。


なお複数のタブが存在する場合には、目的や条件によっては不要なタブは表示させず、必要なタブのみ表示させるようにしたい、初期表示を特定のタブにしたいというケースがあるかもしれません。


今回は、スマートフォンで操作した時に特定のタブを初期表示するカスタマイズをご紹介します。なお、やること「タブを選択する」、条件「現在の画面がスマートフォン版ならば」を使って頂くのがコツとなります。


PCでの表示例


スマートフォンでの表示例


アプリ

アプリは次のように準備してください。

※フィールド名とフィールドコードは同じものを指定します

フィールド名/要素ID

フィールドタイプ

備考

tabs

スペース

縦は細長に、横は広くする

日付

日付


作成者

作成者


部署

文字列(1行)


目標達成度

文字列(1行)


所感・学び

文字列(1行)


添付ファイル

添付ファイル


個人メモ

文字列(1行)




カスタマイズ

カスタマイズは次の通りです。


タブグループを作る

まず、タブグループを作成します。


やること「タブグループを作成する」、条件「追加画面・編集画面・詳細画面のいずれかを表示した時」を用います。また、「場所」に先ほど追加したスペースフィールド(tabs)を設定します。

※スペースフィールドへの要素IDの設定が漏れている場合は、「場所」の選択肢に出てきませんので、注意してください。


また、条件の「一覧画面の鉛筆を押した時」は、このカスタマイズは一覧画面では動かないので「一覧画面の鉛筆を押した時は含めない」にしておきます。


なおタブグループを作っただけだと、タブを置く領域を設定しただけなので、見た目は何も変化しません。


タブグループにタブを追加する(PCで初期表示するタブ)

タブの設定をしていきます。まずはPCで初期表示するタブを作ります。
※1つ目に作成したタブが最初に表示されるタブになります


やること「タブグループにタブを追加する」、条件「他のアクションの実行が完了した時」を用います。


やることの「タブグループ」には先ほどのタブグループを追加したアクションを指定し、「ラベル」にはタブに表示する名前「全て」を入力します。


また、やることの「タブに入れるフィールド」には、「日付」~「個人メモ」までのフィールドを設定します。


タブグループにタブを追加する(レコード作成者のみが見えるタブ)

続いて、レコード作成者のみが見えるタブを作ります。


こちらも、やること「タブグループにタブを追加する」、条件「他のアクションの実行が完了した時」を用います。


やることの「タブグループ」には先ほどと同様にタブグループを追加したアクションを指定し、「ラベル」にはタブに表示する名前「スマホ用」を入力します。


また、やることの「タブに入れるフィールド」には、「日付」~「達成度」のフィールドを選択します。

※「日付」~「達成度」の各フィールドはどちらのタブにも入っているのでどちらのタブを選んでも表示されます。


スマートフォンで表示している時にはスマホ用タブを初期表示する

最後に、スマートフォンで表示している時の初期表示設定を行います。


やること「タブを選択する」、条件「他のアクションの実行が完了した時」「現在の画面がスマートフォン版ならば」を使用します。


全てのタブを追加したあと、やること「タブを選択する」と条件「現在の画面がスマートフォン版ならば」を使えば、スマートフォンで画面表示した時は「スマホ用」タブが初期表示されます。


おわりに

今回は、スマートフォンで操作した時に特定のタブを初期表示するカスタマイズをご紹介しました。

スマートフォンで見た時には、どうしてもフィールドが縦に並んでしまい、スクロールが大変となるケースが多いので、操作感を良くするために、ぜひこのカスタマイズも活用してみてください!


Customineドキュメントサポートページもぜひご活用ください。

また、ご不明点等ございましたら、チャットにてご質問ください!


gusuku Customine カスタマインの歩き方 装飾編
2. 実例に学ぶカスタマイズ作成のポイント

2-3. タブの作り方・使用方法

2-3-2. 特定の条件でのタブの表示・非表示
2-3-2-2. スマホで操作する際に特定のタブを初期表示する

前の記事:2-3-2-1. ログインユーザーがレコード作成者の場合のみ個人タブを表示する

次の記事:なし (この記事が最終です)