ポスト
「どうした？元気がないぞ～」(笑)
そうなんです。まだまだLightning元気がないのです。
なぜでしょうか？
イベント会場などでお客様とLightningについて話す機会があるのですが、みなさんざっくりとフワッとした イメージのようなのです。
「グラフがすごいんだよね？」とか、「データの分析がいろいろな角度で出来るんですよね？」
「なんか、好きなようにシステム管理者がアプリを作れるんですよね！」などなど
確かに、間違ってはないとは思います。
データの分析がいろいろな角度で出来る これは若干、「Salesforce Wave Analytics」のデモを見られた方かもしれません(笑)
でも、AppExchangeで見つければ、もしくは、Lightningコンポーネントを頑張って作れば可能かもしれません。 それをシステム管理者がLightningアプリケーションビルダーでLightningコンポーネントを配置すればいいのですから・・・
しかし、その「Lightningコンポーネントを頑張って作れば」これがハードルが高いのではないでしょうか？
Visualforce ＋ Apexで今までは開発してきたのですが、Lightningコンポーネントとなりますと、Javascriptが プラスされる、というより主にJavascriptになり、 Apexの知識も場合によっては必要になるということです。
それを、一般のシステム管理者様でも簡単にというわけにはいかないと思います。
そこで、「ドラック＆ドロップのマウス操作でLightningコンポーネントが作成出来たらいいな。」 という願いをかなえる製品、 それが本日紹介します「SuPICE」というものになります。 このツールでLightningが元気になればいいなという思いで開発し、 2月24日にリリースされた製品です。
でも、まだまだお試しいただけていない方もいらっしゃると思いますので、 今回は「SuPICE」をつかって、
Lightningコンポーネントをノンコーディングで作成してみたいと思います。
Lightningコンポーネント！ 3分クッキング
さて本日の材料ですが、「 https://appexchangejp.salesforce.com/results?keywords=SuPICE 」こちらでご用意ください。
画面を開発する為に「SuPICE Studio」が必要になります。
そして、出来上がりましたLightningコンポーネントを動かすための「SuPICE Runtime」の2つが必要になります。
それと隠し味にあなたのやる気を少々ご用意いただけるとよいかと思います。
それでは準備ができましたら始めたいと思います。
AppExchangeをインストールできましたらアプリケーションを「SuPICE」に切り替えてください。
タブから「Studio」をクリックし開きましょう。
Studioが開きましたでしょうか？
操作は簡単！画面左のユニット達をドラック＆ドロップで配置して内容を設定。
プレビューで確認をしてデプロイという作業をするだけです。
これから作るLightningコンポーネントはこちら
ToDoをスワイプ操作で完了をし、最新の状態に更新するというLightningコンポーネントを作成していきます。
ヘッダーの作成
プロパティの設定
それでは初めにヘッダーユニットをキャンバスへ配置します。
配置をしたら歯車アイコンをクリックしユニットセッティングウィンドウを開きます 。
プロパティタグで名前項目ToDoListとしておきます。
名前の項目はスタジオでのユニットを識別するのに使用します。
次に、ラベル項目です。
ここには実際に表示される表示ラベルを入力します。
スタイルを設定する
次に隣のスタイルタブへ移動しタイトルの飾り付けをしてみます 。
色の項目、ここは文字色を設定しますここではwhiteとしておきます。
背景色をorangeにしてみます。
これでヘッダーの設定は終了です。
スワイプリストの作成
データソース
次にスワイプリストを配置し設定していきます。
歯車アイコン → 3つ目のタブ。データソースの設定をします。
データソースではスワイプリストに表示する項目を指定することができます。
始めにオブジェクトを選択します。今回はToDoを選択します。
選択したオブジェクトから表示したい項目を選び、表示項目追加ボタンをクリックします。
この時点でプレビューではどのように表示されるかは確認できるかと思います。
配置項目の個別設定
次にリストの中の見た目の部分を変更していきます。
件名の部分を少し目立つようにします。
残りの項目も同様に設定します。ここで表示の順番も変更することができます。
インタラクションを設定する
次にインタラクションの設定です。
インタラクションとはなにかの操作、例えばクリック、タッチ、スワイプなどした際に 再描画したり、保存したりといったアクションを設定する物です。
今回はスワイプ操作でいろいろと動作設定をしていきます。
まず1つ目のインタラクションです。
右スワイプしたら、ステータスを完了にするために「状況」の項目の値を「Complete」にします。
次に2つ目のインタラクション。
右スワイプしたらリストを保存です。
最後に3つ目。
右スワイプしたらリストを更新して最新の状態にする。
さあ、これで完成です。
デプロイボタンを押して、コンポーネントをデプロイしてみましょう。
簡単にLightningコンポーネントができたと思います。
デプロイ後のLightningコンポーネントは、「Lightning アプリケーションビルダー」で配置してもよし、Visualforceに埋め込むもよし、Lightningコンポーネントタブを作ってもよし、お好みでお使いください。
Lightningコンポーネントをおいしくいただく為に
デプロイ後ですが、組織で必要な設定がございます。Lightningコンポーネントが表示されない等ございましたら 下記のSuPICEのヘルプサイトをご確認ください。
https://doc.terrasky.com/pages/viewpage.action?pageId=12750229
それでは、皆さんLightningを元気にしていきましょう！
製品開発部の河本でした。
