salesforce1開発(s1 tour)
Post on 15-Jan-2015
353 Views
Preview:
DESCRIPTION
TRANSCRIPT
Salesforce1 開発
2
Safe Harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
3
アジェンダ
• Salesforce1 背景、概要
• 開発1. ポイント＆クリックでの開発
2. Visualforce 開発• ３種類のアプローチ
• 画面遷移
• イベント処理
3. Flexible ページ開発
• 技術情報
4
モバイルコンピューティングの台頭
Source: Strategy Analytics. “Global Smartphone Shipments Hit Record 230 Million Units in Q2 2013.” July 2013.Source. Gartner. July 2013.
社員、顧客
企業
iOS/Android デバイス2 億 3,000 万台
販売台数
2008 Q3 2009 Q2 2010 Q1 2010 Q4 2011 Q3 2012 Q2 2013 Q1
PC7,600 万台
2013 Q2
5
2017 年には業務アプリケーションの 90% がモバイル化
20%
Source: Gartner, Ian Finley, Research VP; 2010
モバイルに対応するアプリケーション
2013 2017
90%デスクトップ、モバイルの両方に対応するアプリケーション
6
モバイルアプリ開発と展開の困難さ
Mobile Apps Are Critical
Mobile Apps Deployed
60%
40%
20%
App Gap
Less than
1/2have
deployed apps
Perc
ent
of
Resp
ond
ents
2013 Study of1,300 Global Executives“The State of the Customer-Led Economy”
Complexity of Form Factors
Limited Number of Developers
Multiple Operating Systems
Multiple Platforms
7
以前のモバイルアプリのポートフォリオ
Salesforce Platform
Content Compensation
CollaborationDashboards Digital Sales Aid Customer AppLog a Call Content Compensatio
nCollaborationDashboardsLog a Call
8
Salesforce1 によるモバイルアプリのポートフォリオ
Digital Sales Aid
Customer App
企業のモバイルアプリのコストを革
命的に激減
Content Compensation
CollaborationDashboardsLog a Call
9
Salesforce モバイル・アプリケーション
Digital Sales Aid
Customer App
企業のモバイルアプリのコストを革
命的に激減
Salesforce Classic
Salesforce Touch
Chatter Mobile
Logger と Forcepad
10
DB
ネイティブコード（ Java, Objective
C)
DBDB
モバイルからコールされるWeb サービス
モバイルからコールされるWeb サービス
モバイルから呼ばれる Web アプ
リケーションコード
ただし、このコードはモバイ
ル側に配置することも可能
DB
モバイルから呼ばれる Web アプ
リケーションコード
HTML5 のlocalStorage
で javascript からアクセスできる DB 使用可能
DB
ネイティブアプリ ハイブリッドアプリ HTML5 アプリ
モバイルアプリケーションとはSalesforce 1
ネイティブコード（ Java, Objective
C)
11
Salesforce1 アプリケーション
最近 アプリケーション アクション
12
シンプルで汎用的な画面遷移
13
Salesforce1 開発特徴
簡単な画面ならポイント＆クリックで開発 レイアウト編集は標準機能のドラッグ＆ドロップ デバイスへコードをダウンロードする必要がないため、最小開発環境はブラウ
ザーのみ
ネイティブ（ Java や ObjectiveC) 言語の開発は不必要 Android, iOS に対してシングルソースで対応 Visualforce と Apex での画面開発 但しレスポンシブル対応を推奨している
ので Visualforce タグライブラリは使用せず、一般技術（ CSS, Javascript, HTML) での画面開発
Canvas アプリケーションのインテグレーション可能なので、既存サービス、 Heroku 上でのアプリケーションの統合が可能
14
Salesforce1 を触ってみましょう
1環境によっては https://ap.salesforce.com ではありません。 https://<server_name>/one/one.app でアクセスして下さい
2
15
S1 用ユーザフェース
16
開発可能な場所
ナビゲーションメニュー
専用オブジェクトアクション
グローバルアクション
VF ページタブ、 Flexible ページタブ をメニューに追加可能
ポイント＆クリックで並び替え可能
ポイント＆クリックでアクション作成可能、また
VF 、 Canvas を使用してアクションを作成すること
もできます
ポイント＆クリックでアクション作成可能、また VFを使用してアクションを作
成することもできます
ポイント＆クリックで表示内容の変更可能
ポイント＆クリックで表示内容の変更可能、 VF を追加
することもできる
17
ナビゲーションメニュー
最近使用したレコード • Flexible ページタ
ブ、 Visualforce タブをナビゲーションメニューに追加可能
• 最近使用したレコード以外は並び替え可能
• 最近使用したレコードの並び替えはある程度可能。 PC 画面の検索結果で上位に表示させたいオブジェクトに「最上部に固定」と設定する
• カスタムオブジェクトは最近使用したレコード領域に表示される
18
ナビゲーションメニュー
1
2
3
1. 標準、カスタムオブジェクト
2. Visualforce ページ
3. Flexi ページ
Visualforce ページと Apex を使ってページを作成するため、外部への API 接続など様々なことが可能です。ただし、モバイルアプリのためパフォーマンスには気をつけて下さい。画面遷移は専用のjs オブジェクトを使用して Salesforce1 の標準画
面にも遷移可能です
ビュー、最近参照したレコードが表示されますが、レイアウト
の変更はできません。
Flexible ページは複数オブジェクト一覧を表示するのに優れています。また、アクションを追加することも簡単です。コードでの実装ではなく、 XML での作
成となります。
19
グローバルアクション
グローバルアクションは特定のレコードを自動的に関連させることはできません。アクションには４つのタイプがあります。
アクションタイプ 実装方法 備考
Create a Record ポイント＆クリック
現時点では Account, Campaign, Case, Contact, Contract, Event, Custom Object, Lead, Note, Opportunity, Task しか作成できません。
Log a Call ポイント＆クリック
Visualforce Apex, VF
Canvas なんでも OK Heroku のような外部プラットフォームが必要
20
オブジェクト専用アクション
アクションタイプ 実装方法 備考
Create a Record ポイント＆クリック 作成できるオブジェクトは専用アクションが設定されているオブジェクトに依存します。例えば、 Account 専用アクションではaccount, case, contact, contract, event, note, opp, or task のレコードを作成できます。また Case の場合いには , case, event, or task
レコードを作成できます
Log a Call ポイント＆クリック
Visualforce Apex, VF Visualforce ページのコントローラは必ずそのオブジェクトの StandardController を使用しなければいけません
Update a Record ポイント＆クリック
オブジェクト専用アクションは特定のレコードを自動的に関連させることはできます。アク
ションには４つのタイプがあります。
21
レコード詳細
モバイルカード：拡張ルックアップ、 Visualforce ページを埋め込むことができます。 Visualforce ページを作成する場合は必ず StandardContoller を使用する必要があります。また、拡張ルックアップの種類は選択したオブジェクトによって変わります。例えば Account’ のレコード詳細での拡張ルックアップは Account Owner, Created By, Last Modified By, and Parent Account です。また、 Opportunitiy では Account Name, Created By, Last Modified By, Opportunity Owner, Primary Campaign です。
コンパクトレイアウト：レコード詳細ページ上部に表示される注目エリアです。ポイント＆クリックで表示項目を変更できます。
22
Salesforce1対応 appexchangeアプリ
23
Salesforce1対応 appexchangeアプリ
24
ポイント＆クリック開発
25
●ナビゲーションメニュー変更
スマート検索項目要素よりも下に配置すると、ナビゲーションメニューの [ アプリケーション ] セクションに表示されます。
1
2
26
●グローバルアクション登録
1
デフォルトで下記アクション群が用意されています。新規ケースアクションを独自に新規作成することも可能です。
2
27
アクション種別（４種類）
28
グローバルアクション登録
1
2
29
●オブジェクト専用アクション登録
1
取引先詳細画面にこのアクションを登録します
3
2
30
オブジェクト専用アクション登録
1
選択した取引先に紐づく商談を作成するアクションを登録
2
商談新規画面のレイアウト編集Salesforce1 実際の画面レイアウト
31
アクションをパブリッシャアクションへ登録
1
取引先のレイアウトエディタ
Salesforce1 実際のパブリッシャアクション
ファイルアクションはネイティブアプリにしか表示されません。この画面はブラウザでの表示です。
32
オブジェクト専用アクション 画面遷移
33
●コンパクトレイアウト変更
1
ロングテキストエリア、リッチテキストエリア、複数選択リスト以外のタイプをサポート
3
2
34
●モバイルカード変更
1
拡張ルックアップを選択し、対象項目をドラッグしてモバイルカード領域へドロップします
3
2
35
VisualforceSalesforce1基礎
36
Visualforce アプローチ
1. Visualforce 単独• Visualforce タグライブラリを使用してページを作成
2. Visualforce + HTML• pageBlock, pageBlockButtons,
pageBlockSectionItem,pageBlockTable は使用しない
• デザインには CSS を使用
3. JavaScript remoting + Static HTML• Salesforce1 にマッチした最善なアプローチ
• JavaScript でのデータへの CRUD操作を行うためパフォーマンス向上
37
1. Visualforce 単独
メリット
• 通常の Visualforce 開発のため新しい知識必要なし
• デスクトップ、モバイル共有ページ
デメリット
• ボタン、リンクなどの部品はデスクトップ用に最適化されているため指でのタッチが難しい
• レスポンシブルデザインに対応していないため、 Salesforce1 デザインに最適化されていない
38
Visualforce 作成
1
3
2
39
ソースコード
<apex:page standardController="Account"><apex:form> <apex:pageBlock title="{!Account.Name}"> <apex:pageBlockSection title= "Warehouse Details" columns= "1"> <apex:inputField value="{!Account.Name}" /> </apex:pageBlockSection> <apex:pageBlockButtons location="bottom"> <apex:commandButton action="{!quickSave}" value="Save" /> </apex:pageBlockButtons> </apex:pageBlock></apex:form></apex:page>
40
Visualforce タブ作成
1
3
2
41
Visualforce タブ作成
1
2
42
モバイルナビゲーションへ追加
1
3
2
43
Visualforce 単独での実装
1
2
44
2. Visualforce + HTML
メリット
• Visualforce 単独での開発と違って Salesforce１デザインに近い実装が可能
• データの受け渡しは通常の Visualforce 開発と同じ
デメリット
• デスクトップで行われる request-response サイクルのため大量データのやりとりが発生される（ ViewState)
• デザインを統一するため CSS の実装必修
45
Visualforce 作成
1
3
2
46
ソースコード
<apex:page standardController="Account"><style> html, body, p { font-family: sans-serif; } </style><apex:form > <h1>{!Account.Name}</h1> <h2>Account Details</h2> <div id="theForm"> <div> <apex:outputLabel for="Name" value="Name"/> <apex:inputField id="name" value="{! Account.Name}"/> </div> </div> <div id="formControls"> <apex:commandButton action="{!quickSave}" value="Save"/> </div></apex:form></apex:page>
47
Visualforce タブの作成
1
3
2
48
Visualforce タブの作成
1
2
49
ナビゲーションメニューへ追加
1
2
50
Visualforce + HTML での実装
1
2
51
3. JavaScript Remoting & Static HTML
メリット
• Salesforce1 にマッチした最善なアプローチ
• JavaScript でのデータへの CRUD操作を行うためパフォーマンス向上
デメリット
• コード量の増大
• CSS, JavaScript, Apex, HTML5 での Web アプリケーション開発知識が必修
52
モバイルパックインストール
1
2
http://www2.developerforce.com/en/mobile/services/mobile-packs
53
モバイルパックインストール
1
3
2
54
モバイルパックインストール
1
2
55
モバイルパックインストール
56
Apex 作成
1
3
2
57
ソースコード
global with sharing class AccountEditor{
public AccountEditor(ApexPages.StandardController ctl){ }
@RemoteAction global static Boolean saveAccount(String name) { Account acc = new Account(); acc.Name = name; upsert acc; return true; } }
58
Visualforce 作成
1
3
2
59
ソースコード<apex:page standardController="Account" extensions="AccountEditor" showHeader="false" standardStylesheets="false" docType="html-5.0" applyHtmlTag="false" applyBodyTag="false">
<apex:stylesheet value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.css')}"/> <apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery-1.9.1.min.js')}"/> <apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.js')}"/><head><style> html, body, p { font-family: sans-serif; } input { display: block; }</style><script> function saveAccount() { // Call the remote action to save the record data Visualforce.remoting.Manager.invokeAction( '{!$RemoteAction.AccountEditor.saveAccount}', $('#account_name_value').val(), function(result, event){; if(event.status){ console.log(accountId); $('#action_status').text('Record updated.'); } else if (event.type === 'exception'){ console.log(result); $('#action_status').text( 'Problem saving record.'); } else { // unexpected problem... } }); } </script></head>
<body>
<div id="detailPage"> <div class="list-view-header" id="account_name"></div> <div id="action_status"></div>
<section> <div class="content"> <h3>取引先 </h3> <div class="form-control-group"> <div class="form-control form-control-text"> <label for="account_name"> Name</label> <input type="text" id="account_name_value" /> </div> </div> </div> </section>
<section class="data-capture-buttons one-buttons"> <div class="content"> <section class="data-capture-buttons one-buttons"> <a href="#" id="updateAccount" onClick="saveAccount();">save</a> </section> </div> </section></div> <!-- end detail page -->
</body>
</apex:page>
60
Visualforce タブ作成
1
3
2
61
Visualforce タブの作成
1
2
62
ナビゲーションメニューに追加
1
3
2
63
JavaScript Remoting & Static HTML での実装
1
2
64
Visualforce画面遷移
65
sforce.one JavaScript object
• Salesforce1 用ナビゲーションフレームワーク
• Salesforce1 で動作している Visualforce ページには自動的に sforce.one オブジェクトが追加されるため、特定の JavaScript ライブラリをインクルードする必要なし
66
提供されている画面遷移メソッド
メソッド コメントnavigateToSObject(recordId, view) recordId の詳細ページへ遷移、 view はオプ
ションで chatter, related, detail を選択できる。View パラメータは Summer '14 で実装予定
navigateToURL(url) url は絶対パス、相対パスをサポート。絶対パスが選択された場合のみ、子供ウィンドウで表示
navigateToFeed(subjectId, type) 特定の Feed へ遷移、 type は NEWS,RECORD他は？？？
navigateToFeedItemDetail(feedItemId) 特定の FeedItem へ遷移navigateToRelatedList(relatedListId, parentRecordId)
relatedListId で指定した関連リストに遷移、 parentId
navigateToList(listViewId, listViewName, scope)
listViewId と listViewName で指定された List view へ遷移
createRecord(entityName, recordTypeId)
entityName で指定された新規レコード作成画面へ遷移、 recordTypeId は任意
editRecord(recordId) recordId で指定された編集画面へ遷移
67
navigateToSObject(recordId, view)
recordId で指定したレコードの詳細ページへ遷移。 view パラメータは chatter, related, detail が選択できるが現時点では未実装。 Summer '14 で実装予定
これが recrodId
68
navigateToURL(url)
url は絶対パス、あるいは相対パスをサポート。絶対パスが選択された場合のみ、子供ウィンドウで表示
url パラメータに '/0011000000k8T1j' としてメソッドコールをすると右図の詳細ページへ遷移する
69
navigateToFeed(subjectId, type)
特定の Feed へ遷移、 type は NEWS 、 RECORD は確認済み。 subjectId にユーザレコード ID 、 type に NEWS を設定すると特定のユーザ NewFeed 画面に遷移する。他の Type の値は調査中。
subjectIdに '0011000000k8T1j' とtype='RECORD' を指定
70
navigateToFeedItemDetail(feedItemId)
特定の FeedItem へ遷移。
feedItemId
71
navigateToRelatedList(relatedListId, parentRecordId)
特定レコードの関連リストに遷移
relatedListIdに 'RelatedCaseList' 、 parentRecordIdに '0011000000k8T1j'
72
navigateToList(listViewId, listViewName, scope)
listViewId と listViewName で指定された List view へ遷移
listViewId に '00B10000003hT4l'listViewName に 'You can set title here'scope に 'Account'
73
createRecord(entityName, recordTypeId)
entityName で指定された新規レコード作成画面へ遷移、 recordTypeId は任意
entityName に 'Account' に設定してメソッドを実行すると Account の新規作成ページに遷移
74
editRecord(recordId)
recordId で指定された編集画面へ遷移
recordId に '0011000000k8T1j' を設定
75
Test them
取引先レコード ID を入力
Feed Item ID を入力
ListView ID を入力
次のスライドにある VisualforcePage をコピーし、自分の組織で新規 VisualforcePageを作成、 VisualforceTab 作成、 Salesforce1 にタブ追加するとhttps://ap.salesforce.com/one/one.app から動作確認ができます。
76
Visualforce ページ<apex:page standardController="Account" extensions="AccountEditor"
showHeader="false" standardStylesheets="false"
docType="html-5.0" applyHtmlTag="false" applyBodyTag="false">
<head>
<script>
function createRecord() {
sforce.one.createRecord("Account");
}
function navigateToSObject() {
// http://salesforce.stackexchange.com/questions/22246/salesforce1-javascript-method-navigatetosobjectrecordid-view-not-changing-tab
// view parameter is not supported yet
sforce.one.navigateToSObject(getAccount(), 'related');
}
function navigateToAbsoluteURL() {
sforce.one.navigateToURL('http://www.google.com');
}
function navigateToRelativeURL() {
sforce.one.navigateToURL('/'+getAccount());
}
function navigateToFeed() {
sforce.one.navigateToFeed(getAccount(), 'RECORD');
//sforce.one.navigateToFeed('005100000021nht', 'NEWS');
}
function navigateToFeedItemDetail() {
var feed_item_id = getFeedItemId();
sforce.one.navigateToFeedItemDetail(feed_item_id);
}
function navigateToRelatedList() {
sforce.one.navigateToRelatedList('RelatedCaseList', getAccount());
}
function navigateToList() {
sforce.one.navigateToList(getListViewId(), 'You can set title here', 'Account');
}
function editRecord() {
sforce.one.editRecord(getAccount());
}
function back() {
sforce.one.back(true);
}
function getAccount() {
return document.getElementById('account_id').value
}
function getFeedItemId() {
return document.getElementById('feed_item_id').value
}
function getListViewId() {
return document.getElementById('list_view_id').value
}
</script>
</head>
<body>
<p>
1. You do not need to enter any value<br/>
<a href="#" onClick="navigateToAbsoluteURL();">navigateToURL(absolute url)</a><br/>
<a href="#" onClick="createRecord();">createRecord(recordId, view)</a><br/>
</p>
<hr/>
<p>
2. Enter Account Record ID : <input type="text" id="account_id" /> <br/>
<a href="#" onClick="navigateToSObject();">navigateToSObject(recordId, view)</a><br/>
<a href="#" onClick="navigateToRelativeURL();">navigateToURL(relative url)</a><br/>
<a href="#" onClick="navigateToRelatedList();">navigateToRelatedList(relatedListId, parentRecordId)</a><br/>
<a href="#" onClick="editRecord();">editRecord(recordId)</a><br/>
<a href="#" onClick="navigateToFeed();">navigateToFeed(subjectId, type)</a><br/>
</p>
<hr/>
<p>
3. Enter Feed Item ID : <input type="text" id="feed_item_id" /> <br/>
<a href="#" onClick="navigateToFeedItemDetail();">navigateToFeedItemDetail(feedItemId)</a><br/>
</p>
<hr/>
<p>
4. Enter ListView ID of Account : <input type="text" id="list_view_id" /> <br/>
<a href="#" onClick="navigateToList();">navigateToList(listViewId, listViewName, scope)</a><br/>
</p>
</body>
</apex:page>
上記 Visualforce を自分の組織へコピーして
77
Visualforceイベント処理
78
Canvas イベント publisher.setupPanel
publisher.showPanel
publisher.clearPanelState
Cancel / Close
cancel
close
publisher.post
79
Subscribe
Sfdc.canvas.publisher.subscribe(
{ name : "publisher.post", onData:function(e) {} }
);
Sfdc.canvas.publisher.subscribe(
{ name : "publisher.setupPanel", onData:function(e) { }}
);
Sfdc.canvas.publisher.subscribe(
{ name : "publisher.showPanel", onData:function(e) {}}
);
Sfdc.canvas.publisher.subscribe(
{ name : "publisher.clearPanelState", onData:function(e) {}}
);
80
Publish
Sfdc.canvas.publisher.publish({ name : "publisher.setValidForSubmit", payload:"true"});
Sfdc.canvas.publisher.publish({ name : "publisher.setValidForSubmit", payload:"false"});
Sfdc.canvas.publisher.publish({ name : "publisher.close", payload : { refresh:"true" }});
Sfdc.canvas.publisher.publish({ name : "publisher.refresh", payload : { feed:true }});
81
オブジェクト専用アクションでテストしてみよう
82
テスト用サンプル Visualforce
• <apex:page docType="html-5.0" showHeader="false" sidebar="false" standardController="Account" standardStylesheets="false">
• <meta charset="UTF-8" />
• <apex:includeScript value="/canvas/sdk/js/publisher.js" />
• <script>
• function setValidForSubmitTrue() {
• Sfdc.canvas.publisher.publish({ name : "publisher.setValidForSubmit", payload:"true" });
• }
•
• function setValidForSubmitFalse() {
• Sfdc.canvas.publisher.publish({ name : "publisher.setValidForSubmit", payload:"false" });
• }
•
• function publisher_close() {
• Sfdc.canvas.publisher.publish({ name : "publisher.close", payload : { refresh:"true" }});
• }
•
• function publisher_refresh() {
• Sfdc.canvas.publisher.publish({ name : "publisher.refresh", payload : { feed:true }});
• }
•
• Sfdc.canvas.publisher.subscribe(
• { name : "publisher.post", onData:function(e) { alert('Post Event'); } }
• );
• Sfdc.canvas.publisher.subscribe(
• { name : "publisher.setupPanel", onData:function(e) { alert('SetupPanel Event'); }}
• );
•
• Sfdc.canvas.publisher.subscribe(
• { name : "publisher.showPanel", onData:function(e) { alert('ShowPanel Event'); }}
• );
• Sfdc.canvas.publisher.subscribe(
• { name : "publisher.clearPanelState", onData:function(e) { alert('ClearPanelState Event'); }}
• );
•
• </script>
•
• <a href="#" onClick="setValidForSubmitTrue()">setValidForSubmit payload: true</a><br/>
• <a href="#" onClick="setValidForSubmitFalse()">setValidForSubmit payload: false</a><br/>
• <a href="#" onClick="publisher_close()">publisher.close</a><br/>
• <a href="#" onClick="publisher_refresh()">publisher.refresh</a><br/>
• </apex:page>
83
Flexible Page開発
84
Flexible Page とは
• Flexible Page とは、ページレイアウトと Visualforce
ページの中間的なページです。ページレイアウトのようにカスタムアイテムを追加することが可能となっていますが、 Flexible Page はページレイアウトとは違う構造となっています。
• Flexible Page でアプリケーションのホームページを作成、 Salesforce1 のナビゲーションに追加できます。
• グローバルアクションを Flexible Page に割り当てが可能。 Flexible Page 上にある＋ボタンを選択するとあなたが割り当てたグローバルアクションが表示されます
85
どんなデータが表示可能 ?
カスタムオブジェクトの最近使用したデータを表示
リストビューを表示、但しサポートされていない
オブジェクトあり
グローバルアクションの追加
86
Flexible Page 開発ステップ1. 開発する前に
• どのリストビューを表示させるか？
• 何の「最近使ったデータ」を表示させるか？
• どのグローバルアクションを追加するのか？（任意）
2. Xml ベースの Flexible Page の作成グローバルアクションを追加する場合には XML に記述する必要があ
ります。記述していないと Flexible Page にはパブリッシャアクションアイコン（＋）が表示されません。
3. Force.com Migration Tool 、 Force.com IDE 、 Workbench のいずれかのツールを使用してファイルを自分の組織へデプロイする
4. Flexible Page カスタムタブの作成
5. Salesforce1 のナビゲーションタブへ Flexible Page を追加する
87
Flexible Page ファイルについて
カスタムオブジェクトの最近使用したデータを表示
リストビューを表示
Region名は必ず main とする
パブリッシャアクションアイコンの追加
88
Flexible Page ファイルについて
• flexiPageRegionsエレメントは１つだけ
• ComponentInstance は２種類• filterListCard: リストビューを表示、但しそのビューから最初
の数レコードしか表示しない、またサポートしているのは、Custom Objects, Account, Campaign, Case,
CollablrationGroup, Contact, Contract, Lead, LiveChatTransript,
Opportunity のみ
• recentItems: property で指定したカスタムオブジェクトの最近しようしたデータを表示
詳細はこちらで確認ください
89
1. Flexible Page 作成 Package.xml
FlexiblePage__c とFlexiblePage2__c というカスタムオブジェクトを組織に作成する必要がありま
す
90
2. package.xml 作成 Package.xml
91
3. Salesforce へ配置Zip ファイル作成
1
2
92
3. Salesforce へ配置
1
2
3
4
成功を確認する
93
4. Flexible タブ作成
1
2
3
94
4. Flexible タブ作成
1
2 3
作成されていることを確認する
95
5. 確認作業
96
サンプルコード
FlexiblePage__c と FlexiblePage2__c というカスタムオブジェクトを組織に作成する必要があ
ります
flexipage_demo.zip
97
技術情報
98
情報
• Salesforce1 App スタイルガイドライン
• Salesforce1 App開発ガイド
• Salesforce1 Cheetsheet
• ISV向けSalesforce1 Webinar by Nakajima Kazuki
• Using Visualforce in Salesforce1
top related