皆さん、こんにちわー。いやぁ、 いまこのブログが公開されているときには クラウドEXPO でmitoco がお披露目されているんですねぇー。

mitocoはIoT連携等これまでのグループウェアとは異なるビジョンで開発されたソーシャルウェアアプリケーションです！ 同じ製品開発部のメンバーとして期待しています(^-^)

さてさて画面遷移の話です。 SuPICEは"動き"を持ったLightning Componentを作成することを目指し、開発された製品です。

そのため今後の機能強化としては、従来の画面デザインの他にノンプログラミングでの"動き"をつける機能の強化も行います！

今回はその一例、リストを選択して画面遷移+α なLightning Componentを作ってみます！

1.完成画面

こんなLightning Componentを作ります！

普段はよく利用する項目だけを表示させて、たまに利用する項目は「さらに表示ボタン」を押したときだけ表示する。普段はあまり多くの項目を表示しないで画面をスッキリしたいというユースケースです。　具体的に作成するLightning Componentはリストの項目に「取引先」を表示して、レコードを選択したらレコードの「項目」を編集できるようにする。 さらに普段編集を行わない項目に関しては非表示にして、使用するときだけ表示するものを作成します♪♪♪　

動画

作成したLightning Componentを動かしてみました.mp4

2.全体の流れ

• 取引先オブジェクトのリスト画面表示
• レコード編集画面の作成
• レコード編集画面に遷移
• レコード編集画面と詳細画面を非表示に変更
• リストのレコードを選択すると編集用のユニットを表示する遷移を作成
• ボタンクリックで一部項目を表示/非表示
• 取引先オブジェクトのリスト画面に戻る

3.作り方について

3.1 取引先オブジェクトのリスト画面表示

リストを配置して、取引先の項目を表示させます。 リストの設定を開いて、データソースに「取引先」、フィールド（項目）に「取引先名」「従業員数」を設定します。

• リストのデータソースタブの設定

データソース	フィールド
取引先
-	取引先名
-	従業員数

3.2 レコード編集画面の作成

リストの項目をクリックしたら、テキストボックスにリストの他の項目を入れて編集を行いたいと思いますのでテキストボックスを配置し、インタラクション機能の「値の設定」を利用し、リストの値を編集できるようにします。

• レコード編集画面に配置するユニット

ラベル名	ユニットの種類	用途
住所納入先TXT	テキスト	住所納入先フィールドを編集できるようにします。
ヘッダー	ヘッダー	ヘッダーを表示します。
保存	ボタン	編集した項目を保存できるようにします。
さらに表示	ボタン	非表示の項目を表示します。
戻る	ボタン	レコード編集画面を非表示にしてリストを表示します。

インタラクションで「値の設定」を行っているところ

タイトル	トリガー	アクション	フィールド	ターゲットユニット
住所納入先	タッチイベント	値の設定	住所(納入先)	住所納入先TXT

3.3 レコード編集画面に遷移

他の項目を編集するためにテキストボックスを配置します。また、画面をシンプルにするためにあまり使わない機能は「さらに表示」ボタンを押すと入力項目を表示させるようにします。 これらの項目についてもインタラクションで「値の設定」を行います。

「さらに表示」ボタンを押した際に表示するユニットの設定

ラベル名	ユニットの種類	用途
住所請求先TXT	テキスト	住所請求先フィールドを編集できるようにします。

リストのインタラクションタブの設定

タイトル	トリガー	アクション	フィールド	ターゲットユニット
住所請求先	タッチイベント	値の設定	住所(請求先)	住所請求先TXT

3.4 レコード編集画面と詳細画面を非表示に変更

遷移先のレコード編集画面と詳細画面で利用するユニットを全て非表示にします。画像では一つのユニットに対して行っていますが他のユニットについても設定してください。

各ユニットのプロパティの設定

ラベル名	表示
住所納入先TXT	非表示
住所請求先TXT	非表示
ヘッダー	非表示
保存	非表示
さらに表示	非表示
戻る	非表示

3.5 リストのレコードを選択すると編集用のユニットを表示する遷移を作成

リスト1のレコードを選択したら、先ほど非表示にした編集用のユニットを表示できるようにします。



リスト1の方はレコードを選択したら非表示にします。



リスト1のインタラクションの設定

タイトル	トリガー	アクション	フィールド	ターゲットユニット
他のユニットを表示	タッチイベント	表示	-	住所納入先TXT
他のユニットを表示	タッチイベント	表示	-	ヘッダー
他のユニットを表示	タッチイベント	表示	-	保存
他のユニットを表示	タッチイベント	表示	-	さらに表示
他のユニットを表示	タッチイベント	表示	-	戻る
自分の非表示	タッチイベント	非表示	-	リスト1

3.6 ボタンクリックで一部項目を表示/非表示

「さらに表示ボタン」をクリックすると詳細画面が開くようにし、戻るボタンを押すとリストに戻れるようにします。



さらに表示ボタンのインタラクションの設定

タイトル	トリガー	アクション	フィールド	ターゲットユニット
住所請求先を表示非表示	タッチイベント	表示非表示	-	住所請求先TXT

3.7 取引先オブジェクトのリスト画面に戻る

レコード編集画面からリスト画面に戻るために"戻るボタン"のインタラクションの設定を下記のように設定します。

タイトル	トリガー	アクション	フィールド	ターゲットユニット
ユニットを非表示	タッチイベント	表示	-	住所納入先TXT
ユニットを非表示	タッチイベント	表示	-	ヘッダー
ユニットを非表示	タッチイベント	表示	-	保存
ユニットを非表示	タッチイベント	表示	-	さらに表示
ユニットを非表示	タッチイベント	表示	-	戻る
リスト1を表示	タッチイベント	非表示	-	リスト1

4 完成



以上でリストのレコードを選択して、編集画面を開き、さらに詳細画面が開くLightning Componentが完成しました！

そんなわけで今後も動きあるLightning Componentを作れるように強化していますので「こんな機能が欲しい！」ということがありましたら、リクエストお待ちしております！

記載につきまして

本文では 画面遷移と記載しておりますがLightning Componentでは1画面内で表示が変わる（SPA）ということが可能です。SuPICEではそれを実現できます。