Help us understand the problem. What is going on with this article?

Winter'17 リリースノート輪読 ~Lightning編~

More than 3 years have passed since last update.

Winter'17 リリースノート輪読 ~Lightning編~

by zaki-yama
1 / 22

自己紹介


はじめに

リリースノートのうち、

から気になった機能をいくつか紹介します。

ほとんど先日の開発者向け Webinar で話されてたやつです。


目次

:star: は開発者向け Webinar で紹介済み

  • Lightning Experience 編
    • :star: ナビゲーションバー
    • :star: カスタムアプリケーションの作成
  • Lightning Component 編
    • LockerService 延期
    • e.force:navigateToComponent
    • Lightning App での Lightning Design System の使用
    • :star: Lightning アクション
    • :star: Lightning Data Service

Lightning Experience (LEX) 編


ナビゲーションバー

これまでの左側のメニューが刷新され、Classic と同じように上部に表示。

SS_2016-10-27_2_48_48.png

(Winter '17 開発者向け新機能Webセミナー
p9
より引用)


アプリケーションランチャー

どのアプリを開いていても素早くアプリ切り替えが可能に。

SS 2016-10-27 3.12.57.png


カスタムアプリケーションの作成

LEX 用アプリケーション。ロゴやブランドカラーなどカスタマイズ可能。
(設定は アプリケーション > アプリケーションマネージャ から)
SS 2016-10-27 1.49.59.png


(続)カスタムアプリケーションの作成

  • Classic アプリと Lightning アプリが「アプリケーション種別」で区別される
  • アプリケーション種別:Lightning じゃないと LEX では表示されない

SS_2016-10-27_3_03_40.png


気になったので
調べてみたこと


Q. 「アプリケーション種別」の違いって何で生じるの?

A. Classic 画面で作成したアプリは Classic, LEX で作成したアプリは Lightning です。

メタデータ的には CustomApplication
<uiType>Lightning</uiType> がついてるのが Lightning のようです。

(かわりに、Classic には <defaultLandingTab> が入ってたり)


Q. (続)「アプリケーション種別」の違いってどこで生じるの?

Classic から Lightning へは「アップグレード」により変換することができます。
変換といっても Classic 版はそのままで新たに Lightning 版が作成されます。

SS 2016-10-27 2.41.06.png


Q. 結局、ナビゲーションバーに表示できるアイテムは何種類?

A. 基本、ユーザインタフェース > タブ で作成できるタブがそれに該当します。
(Summer'16 までのメニューと変わらず)

  1. カスタムオブジェクト
  2. Visualforce
  3. Lightning Component
    implements="force:appHostable" するやつですね
  4. Lightning ページ
    App Builder で作成したページのこと

加えて、なぜか「アプリケーションランチャー」が選べる

SS_2016-10-27_3_12_06.png


Q. アプリケーションランチャーからアプリを非表示にするには?

A. 「アプリケーションメニュー」という設定があり、そちらで表示/非表示を設定できます。

SS 2016-10-27 2.39.01.png


Lightning Component 編


LockerService の有効化 -> Spring'17 に延期

LockerService については:

元々 Summer'16 でON/OFF切り替え可能、Winter'17 から適用のはずだった

summer-16-web-55-638.jpg


[英語] e.force:navigateToComponent (Beta)

コンポーネント間遷移を実現するイベント。ベータ

navigateToMyComponent : function(component, event, helper) {
  var evt = $A.get("e.force:navigateToComponent");
  evt.setParams({
    componentDef : "c:myComponent",
    componentAttributes: {
      contactName : component.get("v.contact.Name")
    }
  });
  evt.fire();
}

試してないです


Lightning App での Lightning Design System の使用

  • extends="force:slds" つけると LDS が自動で読み込まれます
  • 常に最新バージョン = バージョン固定できない (のはず)。。。

SS 2016-10-27 12.23.39.png


Lightning カスタムアクション

  • レコード詳細画面のボタンから Lightning Component を起動
  • コンポーネントに implements="force:lightningQuickAction" をつける
    • または force:lightningQuickActionWithoutHeader SS_2016-10-27_4_40_10.png

Lightning Data Service (Developer Preview)

  • Visualforce でいう Standard Controller
  • Apex を使わずにレコードの取得や保存が行える
  • FLS(項目レベルセキュリティ)が自動的に考慮される参考
コンポーネント
<force:recordPreview aura:id="propertyService" 
                     recordId="{!v.recordId}" 
                     targetRecord="{!v.property}" 
                     fields="['Id', 'Status__c']"
                     recordUpdated="{!c.recordUpdated}"
                     mode="EDIT" />
コントローラ(JS)
recordUpdated : function(component, event, helper) {
var changeType = event.getParams().changeType;
    if (changeType === "CHANGED") { 
        var service = component.find("propertyService");
        service.reloadRecord();
    }
}

DEMO


余談ですが: Lightning Utility Bar?

  • 画面の下からにょきって出て来るアレ
  • Dreamforce のデモで見たけどリリースノートではまだでした
  • DreamHouse 英語版 の方をインストールすると表示されます

SS 2016-10-27 12.18.45.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away