進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

Visualforce ページを使用したグローバルアクションの実装

学習の目的

この単元を完了すると、次のことができるようになります。
  • グローバルアクションとオブジェクト固有のアクションの違いを説明する。
  • Visualforce ページを使用して Salesforce モバイルグローバルアクションを実装する。
  • モバイルユーザインターフェースを使いやすくするために、Salesforce Lightning Design System を使用してページにスタイルを設定する。

Visualforce ページを使用したグローバルアクションの実装

クイックアクションを使用すると、Salesforce および Salesforce モバイルアプリケーションでユーザが実行できる操作が増えます。カスタムクイックアクションを使用してユーザが最も重要な情報に簡単にアクセスできるようにすることで、ユーザの操作やワークフローがスムーズになります。たとえば、レコードの作成および更新や活動の記録を、Chatter フィードで直接実行したり、ユーザのモバイルデバイスから実行したりできます。

モバイルユーザは、Salesforce アプリケーションのアクションバーやアクションメニューからよく使用するタスクや機能にすばやくアクセスできます。[さらに表示] アイコン ([アクションメニュー] アイコン) をタップすると、使用可能なアクションすべてのリストが含まれるアクションメニューが開きます。

アクションバーとアクションメニュー
アクションは、グローバルまたはオブジェクト固有にすることができます。
  • グローバルアクションは、特定のオブジェクトのコンテキストでは動作しません。
  • オブジェクト固有のアクションは、特定のレコードに対して動作します。

グローバルアクションとナビゲーションメニュー項目は何が違うのでしょうか? ナビゲーションメニュー項目と同様に、グローバルアクションは、特定のレコードのコンテキストでは動作しません。グローバルアクションは、数項目を記入して新しいレコードを作成する簡易入力フォームなど、マイクロタスクの実装に特に適しています。ナビゲーションメニュー項目は概して、より複雑なプロセスやアプリケーション全体の実装に使用します。

Visualforce を使用すると、グローバルおよびオブジェクト固有の両方のカスタムアクションを作成できます。まずこの単元でグローバルアクションについて説明し、次の単元でオブジェクト固有のアクションを取り上げます。

グローバルアクション用の Visualforce ページの作成

グローバルアクションで Visualforce ページを開き、そのページから他のページを呼び出すことができます。最初のページを定義してから、そのページを起動するアクションを作成する必要があります。
取引先名だけを取得してすばやく取引先を作成できるグローバルアクションを作成しましょう。
メモ

メモ

これまでと同様に、この例はわかりやすいように単純化されています。この例を参考にし、独自の Salesforce アプリケーションを作成するときに拡張してください。

  1. 開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「QuickAccount」と入力します。
  2. エディタで、任意のマークアップを次のように置き換えます。
    <apex:page docType="html-5.0" title="Create Account">
        
        <apex:remoteObjects >
            <apex:remoteObjectModel name="Account" fields="Id,Name"/>
        </apex:remoteObjects>
        
        <div class="mypage">
            Account Name:
            <input type="text" id="accountName"/>
            <button onclick="createAccount()">Create Account</button>
        </div>
        
        <script>
            function createAccount() {
                var accountName = document.getElementById("accountName").value;
                var account = new SObjectModel.Account();
                account.create({Name: accountName}, function(error, records) {
                    if (error) {
                        alert(error.message);
                    } else {
                       sforce.one.navigateToSObject(records[0]);
                    }
                });
            }
        </script>
        
    </apex:page>

これまでと同様に、[Preview (プレビュー)] ボタンをクリックしてページを表示した場合、Salesforce アプリケーションバージョンではなく標準のデスクトップビューに表示されます。[Quick Account (簡易取引先)] ページをアプリケーション内で表示するためには、事前に Salesforce アプリケーションに追加しておく必要があります。これは、この後すぐに行います。

また [Latest Accounts (最新の取引先)] と同様に、[Quick Account (簡易取引先)] は標準コントローラを使用せず、代わりにリモートオブジェクトを使用して動作します。[Latest Accounts (最新の取引先)] が既存のデータを読み込むためだけにリモートオブジェクトを使用するのに対し、[Quick Account (簡易取引先)] ページはリモートオブジェクトを使用して実際に Salesforce にレコードを作成します。リモートオブジェクトは、データの更新や、適切な場合はデータの削除にも使用できます。非常に多彩なツールで、Salesforce アプリケーションでの使用に適しています。

中級編

リモートオブジェクトについては特に学習しませんが、取引先が正常に作成されるとリモートオブジェクトがどのように sforce.one を使用して取引先詳細ページに移動するかを知っておくとよいでしょう。重要なのは次の create へのコールです。

account.create({Name: accountName}, function(error, records) {
    if (error) {
        alert(error.message);
    } else {
       sforce.one.navigateToSObject(records[0]);
    }
});

create 関数は 2 つの引数を受け入れます。第 1 引数は言うまでもなく、名前-値ペアを含むブロックで、新規取引先の項目値を指定します。[Quick Account (簡易取引先)] フォームに他の項目がある場合、このブロックに適切な名前-値ペアを追加するだけで、追加の項目値を含む取引先レコードを作成できます。第 2 引数は、コールバック関数です。この関数は、リモートオブジェクト操作が完了した後、その結果を使用してコールされます。

コールバック関数は、イベントおよび非同期操作を処理する JavaScript の標準的な手法です。リモートオブジェクトは、このパターンを使用して、その非同期操作の応答を処理します。リモートオブジェクト操作を呼び出す場合、操作のパラメータや、必要に応じてコールバック関数を指定します。JavaScript コードは、操作を呼び出した後も中断されずに継続します。リモート操作が完了して結果が返されると、コールバック関数が呼び出されて、操作の結果を受信します。

ここで使用するコールバック関数は非常に単純です。コールされるとき、エラーオブジェクトと、操作によって影響を受けたレコードが含まれる配列という、2 つの値を受け取ります。エラーがある場合、コールバックはエラーをアラートに表示します(本番での使用には適していませんが、ここで探索する間は問題ありません)。レコードが正常に作成された場合、sforce.one.navigateToSObject 関数を使用して影響を受けたレコードの配列の第 1 項目に移動します。これは、作成された取引先になるはずです。うまくいきました!

Visualforce ページを使用してグローバルアクションを作成する

グローバルアクションは特定のオブジェクトに関連付けられていないため、[設定] の独自のセクションで作成します。

QuickAccount ページをグローバルアクションとして使用する手順は、次のとおりです。

  1. [設定] から、[クイック検索] ボックスに「Visualforce ページ」と入力し、[Visualforce ページ] を選択して、モバイルアプリケーションのページを有効にします。
    モバイルアプリケーションのページを有効にする方法については、前の単元で説明しました。
  2. グローバルアクションを定義します。
    1. [設定] から、[クイック検索] ボックスに「アクション」と入力し、[グローバルアクション] を選択します。
    2. [新規アクション] をクリックします。
    3. [アクション種別] ドロップダウンリストで、[カスタム Visualforce] を選択します。
    4. [Visualforce ページ] ドロップダウンリストで、[QuickAccount] を選択します。
    5. [ラベル] 項目で、「Quick Account (簡易取引先)」と入力します。
      他のデフォルト値はそのままで構いません。
      新しいページを使用してグローバルアクションを作成
    6. [保存] をクリックします。
  3. パブリッシャーレイアウトにグローバルアクションを追加します。
    1. [設定] から、[クイック検索] ボックスに「パブリッシャーレイアウト」と入力し、[パブリッシャーレイアウト] を選択します。
    2. [グローバルレイアウト] の左にある [編集] をクリックします。
    3. [Salesforce モバイルおよび Lightning Experience アクション] セクションで、[定義済みアクションを上書き] をクリックします。
    4. パレットの [Salesforce モバイルおよび Lightning のアクション] カテゴリから、[Quick Account (簡易取引先)] アクションを [Salesforce モバイルおよび Lightning Experience アクション] セクションにドラッグします。先頭に配置します。
      グローバルパブリッシャーレイアウトに [Quick Account (簡易取引先)] アクションを追加する
    5. [保存] をクリックします。

これで新しいアクションをテストする準備ができました。前の単元では各手順を 1 つずつ説明してきましたが、ここからはスピードアップします。

新しいグローバルアクションをテストするには、Salesforce モバイルアプリケーションを強制的に再読み込みします。次に、アプリケーションに表示されている [アクションメニュー] アイコン をタップして、[Quick Account (簡易取引先)] アクションをタップします。取引先をすぐに作成できるページが表示されます。
[Quick Account (簡易取引先)] アクションページを表示

ぜひ試してみてください。取引先を作成して、Salesforce モバイルアプリケーションでその取引先の詳細ページにアクセスできるはずです。簡単ですが役立ちます。

モバイルデバイス用のアクションページのスタイル設定

SLDS (Salesforce Lightning Design System) を使用すると、アクションの Visualforce ページにスタイルを設定できます。ページにスタイルを設定すると、モバイルデバイス向けに Salesforce アプリケーションのデザインが最適化されます。
  1. 開発者コンソールを開き、[File (ファイル)] | [Open (開く)] をクリックしてページを開きます。
  2. マークアップを次のコードに置き換えます。
    <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    
      <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
          <meta charset="utf-8" />
          <meta http-equiv="x-ua-compatible" content="ie=edge" />
          <title>SLDS QuickAccount Page in Salesforce Mobile</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
    
          <!-- Import the Design System style sheet -->
          <apex:slds />
        </head>
    
        <apex:remoteObjects >
          <apex:remoteObjectModel name="Account" fields="Id,Name"/>
        </apex:remoteObjects>
    
        <body>
    
          <!-- REQUIRED SLDS WRAPPER -->
          <div class="slds-scope">
    
            <!-- PRIMARY CONTENT WRAPPER -->
            <div class="myapp">
    
              <!-- INPUT FIELD -->
    
              <div class="slds-form-element">
                <label class="slds-form-element__label slds-text-heading_medium 
                              slds-p-bottom_medium" for="text-input-id-1">Account Name:</label>
                <div class="slds-form-element__control">
                  <input type="text" id="accountName" class="slds-input"> </input>
                </div>
              </div>
    
              <!-- / INPUT FIELD -->
    
              <!-- BUTTON -->
    
              <button class="slds-button_neutral slds-size_1-of-1 
                             slds-m-top_x-small slds-p-bottom_x-small slds-p-top_x-small" 
                             onclick="createAccount()">Create Account</button>
    
              <!-- / BUTTON -->
    
            </div>
            <!-- / PRIMARY CONTENT WRAPPER -->
    
          </div>
          <!-- / REQUIRED SLDS WRAPPER -->
    
          <!-- JAVASCRIPT -->
    
          <!-- / JAVASCRIPT -->
        </body>
      </html>
    </apex:page>
    このコードは入力項目とボタンを作成し、Lightning Design System を使用して Salesforce アプリケーションのデザインと一致するスタイルをページに設定します。
  3. <!-- JAVASCRIPT --> の下に次のコードを追加します。これは、この単元で以前に記述した JavaScript コードです。
    <script>function createAccount() {
      var accountName = document.getElementById("accountName").value;
      var account = new SObjectModel.Account();
      account.create({Name: accountName}, function(error, records) {
        if (error) {
          alert(error.message);
        } else {
          sforce.one.navigateToSObject(records[0]);
        }
      });
    }</script>
    
  4. アプリケーションを再読み込みして変更を確認します。各自のページが表示されない場合は、モバイルアプリケーション向けのページをもう一度有効にします。
    モバイルスタイル設定後の [Latest Accounts (最近の取引先)] ページ

はるかによくなりました! 以前と同様に、テキスト、入力項目、およびタップターゲットは大きくなり、タッチベースのデバイスにより適したものになりました。