Download pptx - Salesforce1開発(s1 tour)

Transcript
Page 1: Salesforce1開発(s1 tour)

Salesforce1 開発

Page 2: Salesforce1開発(s1 tour)

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.

Page 3: Salesforce1開発(s1 tour)

3

アジェンダ

• Salesforce1 背景、概要

• 開発1. ポイント&クリックでの開発

2. Visualforce 開発• 3種類のアプローチ

• 画面遷移

• イベント処理

3. Flexible ページ開発

• 技術情報

Page 4: Salesforce1開発(s1 tour)

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

Page 5: Salesforce1開発(s1 tour)

5

2017 年には業務アプリケーションの 90% がモバイル化

20%

Source: Gartner, Ian Finley, Research VP; 2010

モバイルに対応するアプリケーション

2013 2017

90%デスクトップ、モバイルの両方に対応するアプリケーション

Page 6: Salesforce1開発(s1 tour)

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

Page 7: Salesforce1開発(s1 tour)

7

以前のモバイルアプリのポートフォリオ

Salesforce Platform

Content Compensation

CollaborationDashboards Digital Sales Aid Customer AppLog a Call Content Compensatio

nCollaborationDashboardsLog a Call

Page 8: Salesforce1開発(s1 tour)

8

Salesforce1 によるモバイルアプリのポートフォリオ

Digital Sales Aid

Customer App

企業のモバイルアプリのコストを革

命的に激減

Content Compensation

CollaborationDashboardsLog a Call

Page 9: Salesforce1開発(s1 tour)

9

Salesforce モバイル・アプリケーション

Digital Sales Aid

Customer App

企業のモバイルアプリのコストを革

命的に激減

Salesforce Classic

Salesforce Touch

Chatter Mobile

Logger と Forcepad

Page 10: Salesforce1開発(s1 tour)

10

DB

ネイティブコード( Java, Objective

C)

DBDB

モバイルからコールされるWeb サービス

モバイルからコールされるWeb サービス

モバイルから呼ばれる Web アプ

リケーションコード

ただし、このコードはモバイ

ル側に配置することも可能

DB

モバイルから呼ばれる Web アプ

リケーションコード

HTML5 のlocalStorage

で javascript からアクセスできる DB 使用可能

DB

ネイティブアプリ ハイブリッドアプリ HTML5 アプリ

モバイルアプリケーションとはSalesforce 1

ネイティブコード( Java, Objective

C)

Page 11: Salesforce1開発(s1 tour)

11

Salesforce1 アプリケーション

最近 アプリケーション アクション

Page 12: Salesforce1開発(s1 tour)

12

シンプルで汎用的な画面遷移

Page 13: Salesforce1開発(s1 tour)

13

Salesforce1 開発特徴

簡単な画面ならポイント&クリックで開発 レイアウト編集は標準機能のドラッグ&ドロップ デバイスへコードをダウンロードする必要がないため、最小開発環境はブラウ

ザーのみ

ネイティブ( Java や ObjectiveC) 言語の開発は不必要 Android, iOS に対してシングルソースで対応 Visualforce と Apex での画面開発 但しレスポンシブル対応を推奨している

ので Visualforce タグライブラリは使用せず、一般技術( CSS, Javascript, HTML) での画面開発

Canvas アプリケーションのインテグレーション可能なので、既存サービス、 Heroku 上でのアプリケーションの統合が可能

Page 14: Salesforce1開発(s1 tour)

14

Salesforce1 を触ってみましょう

1環境によっては https://ap.salesforce.com ではありません。 https://<server_name>/one/one.app  でアクセスして下さい

2

Page 15: Salesforce1開発(s1 tour)

15

S1 用ユーザフェース

Page 16: Salesforce1開発(s1 tour)

16

開発可能な場所

ナビゲーションメニュー

専用オブジェクトアクション

グローバルアクション

VF ページタブ、 Flexible ページタブ をメニューに追加可能

ポイント&クリックで並び替え可能

ポイント&クリックでアクション作成可能、また

VF 、 Canvas を使用してアクションを作成すること

もできます

ポイント&クリックでアクション作成可能、また VFを使用してアクションを作

成することもできます

ポイント&クリックで表示内容の変更可能

ポイント&クリックで表示内容の変更可能、 VF を追加

することもできる

Page 17: Salesforce1開発(s1 tour)

17

ナビゲーションメニュー

最近使用したレコード • Flexible ページタ

ブ、 Visualforce タブをナビゲーションメニューに追加可能

• 最近使用したレコード以外は並び替え可能

• 最近使用したレコードの並び替えはある程度可能。 PC 画面の検索結果で上位に表示させたいオブジェクトに「最上部に固定」と設定する

• カスタムオブジェクトは最近使用したレコード領域に表示される

Page 18: Salesforce1開発(s1 tour)

18

ナビゲーションメニュー

1

2

3

1. 標準、カスタムオブジェクト

2. Visualforce ページ

3. Flexi ページ

Visualforce ページと Apex を使ってページを作成するため、外部への API 接続など様々なことが可能です。ただし、モバイルアプリのためパフォーマンスには気をつけて下さい。画面遷移は専用のjs オブジェクトを使用して Salesforce1 の標準画

面にも遷移可能です

ビュー、最近参照したレコードが表示されますが、レイアウト

の変更はできません。

Flexible ページは複数オブジェクト一覧を表示するのに優れています。また、アクションを追加することも簡単です。コードでの実装ではなく、 XML での作

成となります。

Page 19: Salesforce1開発(s1 tour)

19

グローバルアクション

グローバルアクションは特定のレコードを自動的に関連させることはできません。アクションには4つのタイプがあります。

アクションタイプ 実装方法 備考

Create a Record ポイント&クリック

現時点では Account, Campaign, Case, Contact, Contract, Event, Custom Object, Lead, Note, Opportunity, Task しか作成できません。

Log a Call ポイント&クリック

Visualforce Apex, VF

Canvas なんでも OK Heroku のような外部プラットフォームが必要

Page 20: Salesforce1開発(s1 tour)

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 ポイント&クリック

オブジェクト専用アクションは特定のレコードを自動的に関連させることはできます。アク

ションには4つのタイプがあります。

Page 21: Salesforce1開発(s1 tour)

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 です。

コンパクトレイアウト:レコード詳細ページ上部に表示される注目エリアです。ポイント&クリックで表示項目を変更できます。

Page 24: Salesforce1開発(s1 tour)

24

ポイント&クリック開発

Page 25: Salesforce1開発(s1 tour)

25

●ナビゲーションメニュー変更

スマート検索項目要素よりも下に配置すると、ナビゲーションメニューの [ アプリケーション ] セクションに表示されます。

1

2

Page 26: Salesforce1開発(s1 tour)

26

●グローバルアクション登録

1

デフォルトで下記アクション群が用意されています。新規ケースアクションを独自に新規作成することも可能です。

2

Page 27: Salesforce1開発(s1 tour)

27

アクション種別(4種類)

Page 28: Salesforce1開発(s1 tour)

28

グローバルアクション登録

1

2

Page 29: Salesforce1開発(s1 tour)

29

●オブジェクト専用アクション登録

1

取引先詳細画面にこのアクションを登録します

3

2

Page 30: Salesforce1開発(s1 tour)

30

オブジェクト専用アクション登録

1

選択した取引先に紐づく商談を作成するアクションを登録

2

商談新規画面のレイアウト編集Salesforce1 実際の画面レイアウト

Page 31: Salesforce1開発(s1 tour)

31

アクションをパブリッシャアクションへ登録

1

取引先のレイアウトエディタ

Salesforce1 実際のパブリッシャアクション

ファイルアクションはネイティブアプリにしか表示されません。この画面はブラウザでの表示です。

Page 32: Salesforce1開発(s1 tour)

32

オブジェクト専用アクション 画面遷移

Page 33: Salesforce1開発(s1 tour)

33

●コンパクトレイアウト変更

1

ロングテキストエリア、リッチテキストエリア、複数選択リスト以外のタイプをサポート

3

2

Page 34: Salesforce1開発(s1 tour)

34

●モバイルカード変更

1

拡張ルックアップを選択し、対象項目をドラッグしてモバイルカード領域へドロップします

3

2

Page 35: Salesforce1開発(s1 tour)

35

VisualforceSalesforce1基礎

Page 36: Salesforce1開発(s1 tour)

36

Visualforce アプローチ

1. Visualforce 単独• Visualforce タグライブラリを使用してページを作成

2. Visualforce + HTML• pageBlock, pageBlockButtons,

pageBlockSectionItem,pageBlockTable は使用しない

• デザインには CSS を使用

3. JavaScript remoting + Static HTML• Salesforce1 にマッチした最善なアプローチ

• JavaScript でのデータへの CRUD操作を行うためパフォーマンス向上

Page 37: Salesforce1開発(s1 tour)

37

1. Visualforce 単独

メリット

• 通常の Visualforce 開発のため新しい知識必要なし

• デスクトップ、モバイル共有ページ

デメリット

• ボタン、リンクなどの部品はデスクトップ用に最適化されているため指でのタッチが難しい

• レスポンシブルデザインに対応していないため、 Salesforce1 デザインに最適化されていない

Page 38: Salesforce1開発(s1 tour)

38

Visualforce 作成

1

3

2

Page 39: Salesforce1開発(s1 tour)

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>

Page 40: Salesforce1開発(s1 tour)

40

Visualforce タブ作成

1

3

2

Page 41: Salesforce1開発(s1 tour)

41

Visualforce タブ作成

1

2

Page 42: Salesforce1開発(s1 tour)

42

モバイルナビゲーションへ追加

1

3

2

Page 43: Salesforce1開発(s1 tour)

43

Visualforce 単独での実装

1

2

Page 44: Salesforce1開発(s1 tour)

44

2. Visualforce + HTML

メリット

• Visualforce 単独での開発と違って Salesforce1デザインに近い実装が可能

• データの受け渡しは通常の Visualforce 開発と同じ

デメリット

• デスクトップで行われる request-response サイクルのため大量データのやりとりが発生される( ViewState)

• デザインを統一するため CSS の実装必修

Page 45: Salesforce1開発(s1 tour)

45

Visualforce 作成

1

3

2

Page 46: Salesforce1開発(s1 tour)

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>

Page 47: Salesforce1開発(s1 tour)

47

Visualforce タブの作成

1

3

2

Page 48: Salesforce1開発(s1 tour)

48

Visualforce タブの作成

1

2

Page 49: Salesforce1開発(s1 tour)

49

ナビゲーションメニューへ追加

1

2

Page 50: Salesforce1開発(s1 tour)

50

Visualforce + HTML での実装

1

2

Page 51: Salesforce1開発(s1 tour)

51

3. JavaScript Remoting & Static HTML

メリット

• Salesforce1 にマッチした最善なアプローチ

• JavaScript でのデータへの CRUD操作を行うためパフォーマンス向上

デメリット

• コード量の増大

• CSS, JavaScript, Apex, HTML5 での Web アプリケーション開発知識が必修

Page 52: Salesforce1開発(s1 tour)

52

モバイルパックインストール

1

2

http://www2.developerforce.com/en/mobile/services/mobile-packs

Page 53: Salesforce1開発(s1 tour)

53

モバイルパックインストール

1

3

2

Page 54: Salesforce1開発(s1 tour)

54

モバイルパックインストール

1

2

Page 55: Salesforce1開発(s1 tour)

55

モバイルパックインストール

Page 56: Salesforce1開発(s1 tour)

56

Apex 作成

1

3

2

Page 57: Salesforce1開発(s1 tour)

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; } }

Page 58: Salesforce1開発(s1 tour)

58

Visualforce 作成

1

3

2

Page 59: Salesforce1開発(s1 tour)

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>

Page 60: Salesforce1開発(s1 tour)

60

Visualforce タブ作成

1

3

2

Page 61: Salesforce1開発(s1 tour)

61

Visualforce タブの作成

1

2

Page 62: Salesforce1開発(s1 tour)

62

ナビゲーションメニューに追加

1

3

2

Page 63: Salesforce1開発(s1 tour)

63

JavaScript Remoting & Static HTML での実装

1

2

Page 64: Salesforce1開発(s1 tour)

64

Visualforce画面遷移

Page 65: Salesforce1開発(s1 tour)

65

sforce.one JavaScript object

• Salesforce1 用ナビゲーションフレームワーク

• Salesforce1 で動作している Visualforce ページには自動的に sforce.one オブジェクトが追加されるため、特定の JavaScript ライブラリをインクルードする必要なし

Page 66: Salesforce1開発(s1 tour)

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 で指定された編集画面へ遷移

Page 67: Salesforce1開発(s1 tour)

67

navigateToSObject(recordId, view)

recordId で指定したレコードの詳細ページへ遷移。 view パラメータは chatter, related, detail が選択できるが現時点では未実装。 Summer '14 で実装予定

これが recrodId

Page 68: Salesforce1開発(s1 tour)

68

navigateToURL(url)

url は絶対パス、あるいは相対パスをサポート。絶対パスが選択された場合のみ、子供ウィンドウで表示

url パラメータに '/0011000000k8T1j' としてメソッドコールをすると右図の詳細ページへ遷移する

Page 69: Salesforce1開発(s1 tour)

69

navigateToFeed(subjectId, type)

特定の Feed へ遷移、 type は NEWS 、 RECORD は確認済み。 subjectId にユーザレコード ID 、 type に NEWS を設定すると特定のユーザ NewFeed 画面に遷移する。他の Type の値は調査中。

subjectIdに '0011000000k8T1j' とtype='RECORD' を指定

Page 70: Salesforce1開発(s1 tour)

70

navigateToFeedItemDetail(feedItemId)

特定の FeedItem へ遷移。

feedItemId

Page 71: Salesforce1開発(s1 tour)

71

navigateToRelatedList(relatedListId, parentRecordId)

特定レコードの関連リストに遷移

relatedListIdに 'RelatedCaseList' 、 parentRecordIdに '0011000000k8T1j'

Page 72: Salesforce1開発(s1 tour)

72

navigateToList(listViewId, listViewName, scope)

listViewId と listViewName で指定された List view へ遷移

listViewId に '00B10000003hT4l'listViewName に 'You can set title here'scope に 'Account'

Page 73: Salesforce1開発(s1 tour)

73

createRecord(entityName, recordTypeId)

entityName で指定された新規レコード作成画面へ遷移、 recordTypeId は任意

entityName に 'Account' に設定してメソッドを実行すると Account の新規作成ページに遷移

Page 74: Salesforce1開発(s1 tour)

74

editRecord(recordId)

recordId で指定された編集画面へ遷移

recordId に '0011000000k8T1j' を設定

Page 75: Salesforce1開発(s1 tour)

75

Test them

取引先レコード ID を入力

Feed Item ID を入力

ListView ID を入力

次のスライドにある VisualforcePage をコピーし、自分の組織で新規 VisualforcePageを作成、 VisualforceTab 作成、 Salesforce1 にタブ追加するとhttps://ap.salesforce.com/one/one.app から動作確認ができます。

Page 76: Salesforce1開発(s1 tour)

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 を自分の組織へコピーして

Page 77: Salesforce1開発(s1 tour)

77

Visualforceイベント処理

Page 78: Salesforce1開発(s1 tour)

78

Canvas イベント publisher.setupPanel

publisher.showPanel

publisher.clearPanelState

Cancel / Close

cancel

close

publisher.post

Page 79: Salesforce1開発(s1 tour)

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) {}}

);

Page 80: Salesforce1開発(s1 tour)

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 }});

Page 81: Salesforce1開発(s1 tour)

81

オブジェクト専用アクションでテストしてみよう

Page 82: Salesforce1開発(s1 tour)

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>

Page 83: Salesforce1開発(s1 tour)

83

Flexible Page開発

Page 84: Salesforce1開発(s1 tour)

84

Flexible Page とは

• Flexible Page とは、ページレイアウトと Visualforce

ページの中間的なページです。ページレイアウトのようにカスタムアイテムを追加することが可能となっていますが、 Flexible Page はページレイアウトとは違う構造となっています。

• Flexible Page でアプリケーションのホームページを作成、 Salesforce1 のナビゲーションに追加できます。

• グローバルアクションを Flexible Page に割り当てが可能。 Flexible Page 上にある+ボタンを選択するとあなたが割り当てたグローバルアクションが表示されます

Page 85: Salesforce1開発(s1 tour)

85

どんなデータが表示可能 ?

カスタムオブジェクトの最近使用したデータを表示

リストビューを表示、但しサポートされていない

オブジェクトあり

グローバルアクションの追加

Page 86: Salesforce1開発(s1 tour)

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 を追加する

Page 87: Salesforce1開発(s1 tour)

87

Flexible Page ファイルについて

カスタムオブジェクトの最近使用したデータを表示

リストビューを表示

Region名は必ず main とする

パブリッシャアクションアイコンの追加

Page 88: Salesforce1開発(s1 tour)

88

Flexible Page ファイルについて

• flexiPageRegionsエレメントは1つだけ

• ComponentInstance は2種類• filterListCard: リストビューを表示、但しそのビューから最初

の数レコードしか表示しない、またサポートしているのは、Custom Objects, Account, Campaign, Case,

CollablrationGroup, Contact, Contract, Lead, LiveChatTransript,

Opportunity のみ

• recentItems: property で指定したカスタムオブジェクトの最近しようしたデータを表示

詳細はこちらで確認ください

Page 89: Salesforce1開発(s1 tour)

89

1. Flexible Page 作成 Package.xml

FlexiblePage__c とFlexiblePage2__c というカスタムオブジェクトを組織に作成する必要がありま

Page 90: Salesforce1開発(s1 tour)

90

2. package.xml 作成 Package.xml

Page 91: Salesforce1開発(s1 tour)

91

3. Salesforce へ配置Zip ファイル作成

1

2

Page 92: Salesforce1開発(s1 tour)

92

3. Salesforce へ配置

1

2

3

4

成功を確認する

Page 93: Salesforce1開発(s1 tour)

93

4. Flexible タブ作成

1

2

3

Page 94: Salesforce1開発(s1 tour)

94

4. Flexible タブ作成

1

2 3

作成されていることを確認する

Page 95: Salesforce1開発(s1 tour)

95

5. 確認作業

Page 96: Salesforce1開発(s1 tour)

96

サンプルコード

FlexiblePage__c と FlexiblePage2__c というカスタムオブジェクトを組織に作成する必要があ

ります

flexipage_demo.zip

Page 97: Salesforce1開発(s1 tour)

97

技術情報