ポスト
お待たせしました！SuPICE V2.0リリースしました。
こんにちは、製品開発部の河本です。もう12月になりました。皆さん体調崩していないでしょうか？
今年ももう少しです。がんばりましょう！
それでは、今回のブログの内容に入って行きたいと思います。
お待たせいたしましした。Lightningコンポーネント作成ツールであります「SuPICE」がバージョンアップしました。
今回のバージョンは2.0ということでメジャーバージョンアップでございます。
その中でも河本が特にお勧めする機能をこのブログで紹介したいと思います。
まずバージョンV1.0では、モバイル端末を対象にコンポーネントを作成するというものでした、今回のV2.0ではデスクトップ画面に最適化したコンポーネントも作成できるようになりました。
テーブルレイアウト
入力項目が1列だったものが、テーブルレイアウトを配置することにより2列・3列、1行・2行といったレイアウトができるようになりました。
データテーブル
データテーブルコンポーネントが追加されました。これによりオブジェクトのレコードを一覧形式で表示できるようになりました。詳細ボタンで各レコードの詳細情報を表示することもできます。
検索条件について
データテーブルには検索条件を指定できます。なお、検索条件は、既存のリスト系コンポーネント「リスト」・「スワイプリスト」・「アコーディオンリスト」でも設定できるようになりました。
検索条件では、「フィルター条件」・「レコード上限」・「表示順」の設定ができます。
フィルター条件で項目の値や、コンポーネントに入力された値を使った複雑な条件設定、日付や日時項目ではSalesforceで指定できる「昨日・今日・翌月」などのリテラル値を使用することもできます。
また、それらの条件を「AND」や「OR」を使い組み合わせることもできます。
レコード上限では取得するレコード数の上限の設定ができます
表示順では取得したレコードの表示順番の指定ができます。単純な昇順・降順の設定だけでなく、空白値の順番指定もできます。
また、表示していない項目についても表示順の設定ができるようになっています。
インタラクションで「カスタムコード」指定ができる
バージョンは2.0からインタラクションでJavaScriptを記述してカスタムコードを実行することができるようになりました。
これにより、より複雑な処理もできるようになりました。
現状のインタラクション設定では、項目の値による条件分岐の処理までは設定できません。
例えば、以下のような処理、「チェックボックスがOnになるとテキスト項目が入力可・不可が切り替わる」というものを紹介します。
チェックボックスの項目・テキストの項目配置
まず、チェックボックスの項目とテキストの項目を配置します。
チェックボックスの項目・テキストの項目のIDを確認します。
チェックボックス項目のユニットセッティングウインドウを開く、IDをコピーしておく、同様にテキスト項目においてもIDをコピーしておきましょう。
インタラクションの設定をする
- タイトル：任意で入力します
- トリガー：値が変更されたとき
- アクション：カスタムコードの実行
- コード： コードを記述します。 （以下サンプルです）
// 設定対象ユニット全体 var components = self.state.components;
//対象とするチェックボックスを取得 var checkBox01 = components.CheckBox_id_1481539120781;
//入力を許可するまたは不可とする入力項目を取得 var textBox01 = components.TextBox_id_1481539125046;
// チェックの条件によって状態を切り替える if (checkBox01.properties.value) { // 入力可能 textBox01.properties.readOnly = false; } else { // 入力不能 textBox01.properties.readOnly = true; }
まとめ
いかがでしょうか？河本がお勧めするSuPICE2.0の新機能を紹介しました。
他にもいろいろありますが、詳しくはリリースノートをご確認ください。
