海外のLightning Componentのサンプルを試してみよう

  • 1
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Salesforce App Cloud Advent Calendar 2015の17日目の記事ということで海外のDeveloperがつくったLightning Componentのサンプルについて投稿したいと思います。

はじめに

今回は海外のDeveloperがつくったLightning Componentのサンプルについて紹介します。サンプル自体は検索するといくつか見つかると思うのですが、今回おもしろいサンプルが2つあったのでそちらを紹介したいと思います。

Drag-and-Drop Profile Pictures

Salesforce Developers Blogで公開されているサンプルコードです。ドラッグ&ドロップで添付ファイルをアップロードできるLightning Componentを試すことができます。
スクリーンショット 2015-12-16 20.10.51.png

Create a Lightning Component for Drag-and-Drop Profile Pictures
https://developer.salesforce.com/blogs/developer-relations/2015/11/create-lightning-component-drag-drop-profile-pictures.html

例えばLightning Experience版のAppBuilderで商談レイアウトに追加できます。
スクリーンショット 2015-12-16 19.23.20.png

このように表示されます。
スクリーンショット 2015-12-16 19.24.37.png

こんな感じで画像をドラッグ&ドロップしてあげると・・・
スクリーンショット 2015-12-16 19.30.11.png

画像が表示され『Uploading...』と表示されます。
スクリーンショット 2015-12-16 19.32.04.png

『Image uploaded』と表示さればUpload完了です。商談レコードに紐付く添付ファイルを1件保存できました。
スクリーンショット 2015-12-16 19.34.07.png

画面をリフレッシュするとメモ&添付ファイルの関連リストに先ほどアップしたファイルが追加されていることを確認できると思います。
スクリーンショット 2015-12-16 19.35.32.png

このようにドラッグ&ドロップでファイルアップロードする方法を確認できる便利なサンプルコードとなっています。

このやり方を覚えておけばいろんな場面で役立ちそうです。

補足

注意点というほどではありませんが、容量の大きいファイルをアップロードしようとするとシステムエラーになりました。(2MB〜3MBぐらいで確認) エラーが発生してアレ?っとなったときはファイルサイズを確認してみてください。

開発ポイント

① force:hasRecordId
implementsで"force:hasRecordId"が宣言されています。force:hasRecordIdはWinter'16で追加された関数でレコードIDを取得できるみたいです。

ProfilePicture.cmp
<aura:component controller="ProfilePictureController" implements="force:hasRecordId">
  <!-- 略 -->
</aura:component>

②DesignとLabel
Lightning ComponentのDesignファイルでlabelを宣言できます。これでAppBuliderで表示する際のラベルをカスタマイズできます。

ProfilePicture.design
<design:component label="Lightning ProfilePicture">
  <design:attribute name="message" label="Message"/>
</design:component>

スクリーンショット 2015-12-16 20.09.21.png

Account Tree

もうひとつはLightning ComponentとLightning Design Systemのサンプルコードです。取引先のツリー表示を試すことができます。
スクリーンショット 2015-12-16 20.16.39.png

How to use Nested Components in Lightning Component Using Salesforce Lightning Design System
https://sushilkumardeveloper.wordpress.com/2015/11/05/how-to-nested-components-in-lightning-component-using-salesforce-lightning-design-system/

先ほどと同じようにAppBuilderでレイアウトに追加します。
スクリーンショット 2015-12-16 23.58.20.png

Lightning Design Systemのツリー表示ができるサンプルで、取引先名をクリックすると取引先責任者一覧の表示/非表示が切り替わります。
スクリーンショット 2015-12-16 23.59.22.png

Lightning Design SystemのJS部分は自分で実装する必要があったので、その辺りの対応方法的なサンプルにもなると思いました。

この取引先ツリー表示コンポーネントを試す時ですが、事前にもう一つコンポーネントを作成する必要があります。Lightning ComponentでのSVG表示部分をコンポーネント化したサンプルです。こちらもかなり参考になるコンポーネントだと思います。

How to use SVG Icon in Lightning Component Using Salesforce Lightning Design System
https://sushilkumardeveloper.wordpress.com/2015/11/05/how-to-nested-components-in-lightning-component-using-salesforce-lightning-design-system/

サンプルコード

今回試したコードはそれぞれのブログ内で紹介されています。自分が試して少しさわってみたコードはGitHubにアップしてあります。

tyoshikawa1106/lightnng-component-global-sample-code
https://github.com/tyoshikawa1106/lightnng-component-global-sample-code

これでドラッグ&ドロップとLightning Design Systemをつかったツリー表示について確認することができました。

その他の参考ブログ

上記で2つのサンプルコードについて紹介しましたが、他にもさまざまなサンプルコードが見つかると思います。興味のある方は検索してみると思わぬコードに出会えるかもしれません。

以上、海外のDeveloperがつくったLightning Componentについてでした。