Lightning Component もくもく会 #5

Lightning Component × SLDS

Taiki Yoshikawa

- Profile -

Taiki Yoshikawahttp://tyoshikawa1106.hatenablog.com/

@tyoshikawa1106

+TaikiYoshikawa

tyoshikawa1106

tyoshikawa1106

• Lightning ComponentとLightning Design Systemの話 • Lightning Experienceの話

- Agenda -

※タイトルのSLDSとはSalesforce Lightning Design Systemの略です

Winter’16でLightning ComponentがGAになりました！

新しいUIのLightning Experienceもリリースされました

SalesforceのCSS Framework - Lightning Design Systemも登場しています。

https://www.lightningdesignsystem.com/#role=regular&status=all

今日はこの3つでどんなアプリが開発できるかのデモと 開発時に気をつけるポイントを紹介します。

DEMO！！

Lightning ComponentとSLDSをつかって こんな感じのアプリが作成できました！

それでは開発で気をつけるポイントについて 紹介したいと思います。

Lightning ComponentとSVG

Lightning ComponentとSVG

Lightning ComponentではSVGのuseタグをそのまま利用できません。

Lightning ComponentとSVG

CDATAで囲ってRenderer.jsとHelper.jsでreplaceが必要です。

Lightning ComponentとSVG

同じaura:idを指定して一括置換できます。

Controller.jsとApexの命名規則

Controller.jsとApexの命名規則

開発中に謎のエラーに遭遇しました。

Controller.jsとApexの命名規則

原因はController.jsとApexの名前の付け方だと思われます。 どちらも[c.doSaveNewEvent]で呼び出すから？

this.superAfterRender();

this.superAfterRender();

Modal側で編集/保存した結果が呼び出し元に反映されませんでした。 　Renderer.jsの処理に『this.superAfterRender()』を宣言したら解決。

aura:iterationとaura:if

aura:iterationとaura:if

IDが無くなったら非表示。 問題なさそう ？

aura:iterationとaura:if

・・ところが関係ないレコードまで非表示になるケースがありました。 詳しい原因は不明。実装方法で間違いがあるだけかも。

リストから非表示にするときは、きちんと除外処理を実装するか クエリで取得し直すのが良さそう。

Salesforce1 MobileとSLDS

Salesforce1 MobileとSLDS

Lightning Design SystemのModalコンポーネントがS1モバイルアプリで 少し表示がおかしかったです。

ページ高さの判定方法がS1モバイルの場合は他と違うのかも。 Modalコンポーネント以外は大丈夫そうです。

Lightning Experienceとhref=“#”

最後にLightning Experience開発での注意点を 1つ紹介します。

Lightning Experienceとhref=“#”

aタグにhref=“#”を宣言するとLightning Experienceの場合は、 トップページに戻る仕組みみたいです。(※Winter’16で確認)

以上、Lightning開発で押さえておきたいポイントでした

Thank you