コール
タブコンポーネントには最大 25 個のタブを配置できます。このコンポーネントは、
flexipage:richText
リッチテキストコンポーネントを使用して、テキストやシンプルな
HTML
マークアップを
Lightning
ページに追加します。プロパティ
:
•
richTextValue:
表示するHTML
またはテキストメモ: JavaScript、
CSS
、iframe
、およびその他の高度なマークアップは、サポートされていません。高度な
HTML
要素をコンポーネントで使用する場合は、
Visualforce
ページコンポーネントまたはカスタムLightning
コンポーネントを使用することをお勧めします。
リッチテキストコンポーネントは
4,000
文字までに制限されます。このコンポーネ ントは、API
バージョン32.0
以降でサポートされています。flexipage:tab
タブコンポーネントを使用して
Lightning
ページの範囲にタブセットを追加します。標準タブセットから選択するか、カスタムタブを作成して、
Lightning Experience
ユー ザ向けのレコードページを拡張します。Salesforce1
で表示するには、Visualforce
ページで[Salesforce モバイルアプリケー ションおよび Lightning ページでの使用が可能]オプションが選択されている必 要があります。このオプションは、API
バージョン27.0
以降に設定されたページで 使用できます。salesforceIdentity:appLauncherDesktop
アプリケーションランチャーには、ユーザが使用可能な
Salesforce
アプリケーショ ン、およびシステム管理者が設定する接続アプリケーションが表示されます。ユー ザはアプリケーションランチャーを使用してアプリケーション間を移動できます。このコンポーネントは、
API
バージョン35.0
以降でサポートされています。組織の
Lightning
アプリケーションビルダーでアプリケーションランチャーコンポーネントを有効にするには、
Salesforce
にお問い合わせください。wave:waveDashboard
Wave
ダッシュボードコンポーネントを使用して、Wave Analytics
ダッシュボードをLightning
ページに追加します。このコンポーネントは、デスクトップのみでサポートされています。
プロパティ
:
•
dashboard:
表示するダッシュボードの名前。•
height:
ダッシュボードの高さ(
ピクセル単位)
。この値は正の整数である必要があります。このプロパティを空白のままにすると、デフォルトの高さの 300 ピ クセルが割り当てられます。
•
filter:
実行時にダッシュボードに適用する検索条件(JSON
形式)
。たとえば、「{datasetDeveloperName1:{field1:[value]},datasetDeveloperName1:{field1:[value1,value2],field2:["value3, with comma"]}}」などです。
•
showTitle:
ダッシュボードのタイトルの表示を有効にします。•
openLinksInNewWindow:
ダッシュボードから別のアセットへのリンクを、同じウィンドウ内でダッシュボードを置き換えて開くか、新しいウィンドウで開くか。
•
hideOnError:
エラーが発生した場合にWave
ダッシュボードを非表示にするかどうか。
Lightning App Builder
でWave
ダッシュボードコンポーネントを有効にするには、Salesforce
にお問い合わせください。Lightning ページ : 全体像
Lightning
ページにはXML
を作成するだけでは不十分です。作成したら、組織にリリースし、ページを設定して、
Salesforce1
に統合する必要があります。次に、手順全体の概 要を示します。1.
ページを作成する前に、どのコンポーネントを含め、ユーザがどのようなグ ローバルアクションを必要とするかを判断します。2. Lightning
ページXML
ファイルを作成します。3.
ページにアクションを追加します。ページの
XML
でLightning
ページに特定のグローバルアクションを割り当てることができます。
XML
に特定のアクションを定義しない場合は、ページにアクショ ンバーが表示されません。4. Lightning
ページを開発組織にリリースします。5. [Lightning
ページ]
カスタムタブを作成します。6. [Lightning
ページ]
タブをSalesforce1
ナビゲーションメニューに追加します。この章では、ステップ
2
以降のすべてのタスクを、順を追って説明します。開始する 前に、配送運転手が使用しているDeliveries
カスタムアプリケーションをダウンロード する必要があります。作業を開始する前に : Deliveries アプリケーションをダ ウンロードする
前述したように、
Acme Wireless
の配送運転手は、カスタムアプリケーションを使用し て、配送の作成、更新、および追跡を行います。Salesforce1
で表示できるようにLightning
ページを追加したいと考えていますが、これを行うには、カスタムアプリケーション をダウンロードする必要があります。1.
https://github.com/forcedotcom/Salesforce1-Dev-Guide-Setup-Package に移動します。2. [Zip
をダウンロード]
をクリックします。3.
Salesforce1-Dev-Guide-Setup-Package.zipをハードドライブに保存し ます。4.
Salesforce1-Dev-Guide-Setup-Package.zipファイルを抽出します。その中にSalesforce1_Dev_Guide_Deliveries_App.zipがあります。
5.
次に、Salesforce1_Dev_Guide_Deliveries_App.zipファイルを抽出しま す。Deliveries
アプリケーションファイルを抽出した場所に後ほどすぐに戻るため、この場所は記憶しておいてください。
Lightning ページの作成
XML
でLightning
ページを手動で作成し、Force.com
移行ツール、Force.com IDE
、またはワークベンチのいずれかを使用して、
Salesforce
にリリースします。Lightning
ページのレイアウトおよびスタイルは、Salesforce
によって提供されます。カスタムコーディングは必要ありません。
次に、
Lightning
ページXML
ファイルの例を示します。これはDeliveries
アプリケーションの開始コードで、次の練習問題で使用します。
1. Lightning
ページの範囲の開始。Lightning
ページには、1
つの範囲のみを含めることができます。
2.
componentInstancesプロパティの開始3.
flexipage:filterListCardコンポーネントの開始4.
範囲の名前。「main
」である必要があります。5. Lightning
ページのマスタ表示ラベル準備はできましたでしょうか。それでは、作成してみましょう。
実際に試す : Lightning ページを作成する
前述したように、
XML
ファイルとしてLightning
ページを手動で作成する必要がありま す。この作業と次の作業には、XML
エディタが必要です。パッケージを抽出したときに作成されたSalesforce1_Dev_Guide_Deliveries_App フォルダには、flexipagesフォルダがあります。そのフォルダ内には、ここで作成 する最終的な
Lightning
ページファイルのサンプルバージョン(
参照用)
があります。た だし、これから自分でLightning
ページを作成します。コーディングを始めましょう。1.
任意のXML
エディタを開きます。2.
新しいファイルを開きます。3.
このコードブロックをコピーしてXML
エディタに貼り付けます。<?xml version="1.0" encoding="UTF-8"?>
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
<flexiPageRegions>
<componentInstances>
<componentInstanceProperties>
<name>entityName</name>
<value>Delivery__c</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>filterName</name>
<value>Todays_Deliveries</value>
</componentInstanceProperties>
<componentName>flexipage:filterListCard</componentName>
</componentInstances>
<componentInstances>
<componentInstanceProperties>
<name>entityNames</name>
<value>Delivery__c,Return_Item__c</value>
</componentInstanceProperties>
<componentName>flexipage:recentItems</componentName>
</componentInstances>
<name>main</name>
</flexiPageRegions>
<masterLabel>Deliveries</masterLabel>
</FlexiPage>
4.
ファイルをDeliveries.flexipageとしてflexipagesフォルダに保存しま す。重要:
Lightning
ページを保存する場合、拡張子は必ず.flexipageにしてください。
基本的な
Lightning ページを作成しましたが、別のコードブロック (Lightning ページに割
り当てるアクションを指定するセクション
)
を追加する必要があります。XML
はまだ完 成していません。Lightning ページへのクイックアクションの割り当て
「Salesforce1でのアクションの使用」の章では、ポイント
&
クリックツールを使用してアクションを作成および設定し、すべてのクイックアクションについて学習しまし
た。
Lightning
ページで使用するアクションは、まずSalesforce
フルサイトで作成および設定する必要がありますが、アクションを宣言してページレイアウトに追加するオブ ジェクトとは異なり、
Lightning
ページのアクションはXML
で指定する必要があります。Lightning
ページでは、グローバルアクションのみがサポートされます。ユーザが
Salesforce1
やLightning Experience
でアプリケーションページにアクセスすると、ページに指定したアクションのみが表示されます。アクションを何も指定していない と、アクションは表示されません。
この練習問題では、事前設定済みのグローバルアクションを
Lightning
ページに追加し ます。このアクションを使用すると、運転手が運送中に配送をスケジュールできま す。実際に試す : クイックアクションを Lightning ページに追加す る
この章の最初にダウンロードしたサンプルアプリケーションパッケージには、この
Lightning
ページの「新規配送」というグローバルクイックアクションがあります。そのため、
XML
でこれをコールするだけで済みます。1.
まだ開いていない場合、XML
エディタでDeliveries.flexipageファイルを 再度開きます。2.
次のアクションコードブロックをXML
の最後にある</FlexiPage>タグの直 前に追加します。このコードブロックにより、
[
新規配送]
アクションがLightning
ページに関連付 けられます。<quickActionList>
<quickActionListItems>
<quickActionName>New_Delivery</quickActionName>
</quickActionListItems>
</quickActionList>
3.
Deliveries.flexipageファイルを保存します。これで、ユーザがSalesforce1メニューから Deliveries アプリケーションを開くと、Lightning ページにアクションバーが表示されるため、ユーザはアクションバーをタップしてこ のアクションにアクセスできます。
例: 完全なコードブロックは次のようになります。
<?xml version="1.0" encoding="UTF-8"?>
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
<flexiPageRegions>
<componentInstances>
<componentInstanceProperties>
<name>entityName</name>
<value>Delivery__c</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>filterName</name>
<value>Todays_Deliveries</value>
</componentInstanceProperties>
<componentName>flexipage:filterListCard</componentName>
</componentInstances>
<componentInstances>
<componentInstanceProperties>
<name>entityNames</name>
<value>Delivery__c,Return_Item__c</value>
</componentInstanceProperties>
<componentName>flexipage:recentItems</componentName>
</componentInstances>
<name>main</name>
</flexiPageRegions>
<masterLabel>Deliveries</masterLabel>
<quickActionList>
<quickActionListItems>
<quickActionName>New_Delivery</quickActionName>
</quickActionListItems>
</quickActionList>
</FlexiPage>
XML
コードの準備ができました。次に、このコードと残りの配送パッケージを組織に リリースします。Lightning ページのリリース
この章の最初で説明したように、メタデータ
API
経由でLightning
ページをリリースす る必要があります。これは、いくつかの方法(Force.com
移行ツール、Force.com IDE
、ま たはワークベンチ)
で行うことができます。すでにコンピュータにこれらのうちのいくつかが設定されている場合もあると思いま すが、この練習問題の目的に合わせて最も簡単な方法を選択します。ワークベンチを 使用してリリースします。ワークベンチは、システム管理者および開発者が
Force.com
API
経由でSalesforce
組織とやりとりできるように設計されたオープンソースツールのオンラインスイートです。
実際に試す : Lightning ページをリリースする
Lightning
ページXML
を作成できたので、次はDeveloper Edition
組織にアプリケーションと一緒にリリースしましょう。