📢 Attention Salesforce Certified Trailblazers! Maintain your credentials and link your Trailhead and Webassessor accounts by December 6th. Learn more.
close
進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

Visualforce ページを使用したオブジェクト固有のアクションの実装

学習の目的

この単元を完了すると、次のことができるようになります。
  • グローバルアクションと比べた場合のオブジェクトアクションの最も重要な 2 つの要件について説明する。
  • Visualforce ページを使用して Salesforce アプリケーションオブジェクトアクションを実装する。
  • モバイルユーザインターフェースを使いやすくするために、Salesforce Lightning Design System を使用してページにスタイルを設定する。

Visualforce ページを使用したオブジェクト固有のアクションの実装

Visualforce ページを使用してオブジェクト固有のアクションを作成すると、そのページは現在のオブジェクトを使用して実行されます。つまり、特定のレコード ID が Visualforce ページに関連付けられます。

オブジェクト固有のアクションの実装に使用される Visualforce ページでは、そのオブジェクトの標準コントローラを使用する必要があります。標準コントローラは自動的にレコード ID のレコードを読み込みます。

通常、アクションが完了すると、ユーザは元のレコードに関連するページにリダイレクトされます。

オブジェクト固有のアクション用の Visualforce ページの作成

オブジェクト固有のアクションで Visualforce ページを開き、そのページから他のページを呼び出すことができます。最初のページを定義してから、そのページを起動するアクションを作成する必要があります。

商談を成立または不成立として完了する 2 つのボタンがある簡単なウィジェットを提供するオブジェクト固有のアクションを作成しましょう。

  1. 開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「CloseOpportunity」と入力します。
  2. エディタで、任意のマークアップを次のように置き換えます。
    <apex:page docType="html-5.0" standardController="Opportunity" title="Close Opportunity">
    
        <script src='/canvas/sdk/js/publisher.js'></script>
    
        <apex:remoteObjects>
            <apex:remoteObjectModel name="Opportunity" fields="Id,Name"/>
        </apex:remoteObjects>
        
        <div class="mypage">
            <button onclick="closeOpportunity('Closed Won')">Won</button>
            <button onclick="closeOpportunity('Closed Lost')">Lost</button>
        </div>
        
        <script>
            var opportunityId = "{!Opportunity.Id}";
    
            function closeOpportunity(stageName) {
                var opportunity = new SObjectModel.Opportunity();
                opportunity.update([opportunityId], {StageName: stageName}, function(error, records) {
                    if (error) {
                        alert(error.message);
                    } else {
                        Sfdc.canvas.publisher.publish({ name: "publisher.close", payload: {refresh:"true"}});
                    }
                });
        }
        </script>
        
    </apex:page>

このページはきわめて簡単ですが、独自のオブジェクトアクション作成に関して詳細な情報がわかるよい例です。まず、必要に応じて、ページでは商談に標準コントローラを使用しています。ただし、興味深いのは、標準コントローラが商談の詳細を読み込むためにだけ使用されていることです。ここでも、ページではリモートオブジェクトを使用しています。今回は既存のレコードを更新するためです。つまり、ページは標準コントローラを使用してデータを読み込みますが、リモートオブジェクトを使用してデータを更新しており、同じページ上で 2 つの異なるデータアクセス方式を組み合わせています。

中級編

なぜレコードの更新に標準コントローラを使用しないのでしょうか。簡単に言うと、リモートオブジェクトの方が Salesforce アプリケーションで使用されるページ操作モデルに適しているためです。Salesforce アプリケーションで標準の Visualforce を使用することは可能ですが、モバイル環境用にページを最適化するには、リモートオブジェクトや JavaScript Remoting のような Visualforce ツールを使用する方が適しています。sforce.one や Publisher SDK のような JavaScript ベースの Salesforce アプリケーション機能と連携しやすくなります。また、実行される要求が少なくなり、その際のデータペイロードも小さくなるため、モバイルデバイスではパフォーマンスをかなり改善できます。

最後に、[Quick Account (簡易取引先)] ページに定義した関数と似たコールバック関数を使用して商談への正常な更新を処理します。今回以外は、sforce.one ナビゲーション関数を使用するのではなく、Publisher SDK を使用してパブリッシャーを終了し、表示していた商談を更新します。

Visualforce ページを使用したオブジェクト固有のアクションの作成

オブジェクト固有のアクションは特定のオブジェクトに関連付けられているため、[設定] でオブジェクトに対して作成されます。

[CloseOpportunity (商談の完了)] ページに商談に対するアクションを作成するには、次の手順を実行します。

  1. [設定] から、[クイック検索] ボックスに「Visualforce ページ」と入力し、[Visualforce ページ] を選択して、モバイルアプリケーションのページを有効にします。
    モバイルアプリケーションのページを有効にする方法については、前の単元で説明しました。
  2. オブジェクトのアクションを定義します。
    1. [設定] から、[クイック検索] ボックスに「オブジェクトマネージャ」と入力し、[オブジェクトマネージャ] | [商談] | [ボタン、リンク、およびアクション] をクリックします。
    2. [新規アクション] をクリックします。
    3. [アクション種別] ドロップダウンリストで、[カスタム Visualforce] を選択します。
    4. [Visualforce ページ] ドロップダウンリストで、[CloseOpportunity (商談の完了)] を選択します。
    5. [ラベル] 項目に、「商談の完了」と入力します。
      他のデフォルト値はそのままで構いません。
      オブジェクト固有のアクションの作成
    6. [保存] をクリックします。
  3. アクションをパブリッシャーレイアウトに追加します。
    1. [設定] から、[クイック検索] ボックスに「オブジェクトマネージャ」と入力し、[オブジェクトマネージャ] | [商談] | [ページレイアウト] をクリックします。
    2. [商談レイアウト] の右にあるドロップダウンから [編集] を選択します。
    3. [Salesforce モバイルおよび Lightning Experience アクション] セクションで、[定義済みアクションを上書き] をクリックします。
    4. パレットで [Salesforce モバイルおよび Lightning のアクション] をクリックし、[Close Opportunity (商談の完了)] アクションを [Salesforce モバイルおよび Lightning Experience アクション] セクションにドラッグします。
      商談レイアウトへのアクションの追加
    5. [保存] をクリックします。
新しいグローバルアクションをテストするには、Salesforce モバイルアプリケーションを強制的に再読み込みします。次に、商談レコードに移動し、[アクションメニュー] アイコン をタップしてアクションメニューにアクセスし、[商談をクローズ] アクションをタップします。ページが表示され、商談を完了できるようになりました。
[Close Opportunity (商談の完了)] アクションページ

当然、有能な営業担当であるあなたは商談を「成立」として完了します。ただし、その報酬を使う前に、他にもいくつか作業を行う必要があります。

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

SLDS (Salesforce Lightning Design System) を使用してアクションの Visualforce ページにスタイルを設定することで、モバイルデバイス用に最適化し、Salesforce アプリケーションと一致させます。

ここでも、ページのデザインを更新します。

  1. 開発者コンソールを開き、[File (ファイル)] | [Open (開く)] をクリックしてページを開きます。
  2. マークアップを次のコードに置き換えます。
    <apex:page standardController="Opportunity" 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 CloseOpportunity 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="Opportunity" fields="Id,Name"/>
        </apex:remoteObjects>
    
        <body>
    
          <!-- REQUIRED SLDS WRAPPER -->
          <div class="slds-scope">
    
            <!-- PRIMARY CONTENT WRAPPER -->
            <div class="myapp">
    
              <!-- CREATE BUTTONS -->
    
                <div class="slds-grid slds-wrap">
                  <div class="slds-col slds-size--1-of-1">
                    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small slds-theme_default" 
                                onclick="closeOpportunity('Closed Won')">Won</div> 
    
                  </div>
                  <div class="slds-col slds-size--1-of-1">
                    <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small slds-theme_default" 
                                onclick="closeOpportunity('Closed Lost')">Lost</div>
                  </div>
                </div>
    
              <!-- / CREATE BUTTONS  -->
    
            </div>
            <!-- / PRIMARY CONTENT WRAPPER -->
    
          </div>
          <!-- / REQUIRED SLDS WRAPPER -->
    
          <!-- IMPORT PUBLISHER SDK -->
    
          <script src='/canvas/sdk/js/publisher.js'></script>  
    
          <!-- / IMPORT PUBLISHER SDK -->
    
          <!-- JAVASCRIPT -->
    
          <!-- / JAVASCRIPT -->
        </body>
      </html>
    </apex:page>
    このコードはボタンを作成し、Salesforce アプリケーションのデザインと一致するスタイルをページに設定します。
    メモ

    メモ

    SLDS マークアップについては、Salesforce アプリケーションの単元の「Visualforce ページでの SLDS の使用」で詳しく説明します。

  3. <!-- JAVASCRIPT --> の下に次のコードを追加します。これは、この単元で以前に記述した JavaScript コードです。
      <script>
      var opportunityId = "{!Opportunity.Id}";
    
    function closeOpportunity(stageName) {
      var opportunity = new SObjectModel.Opportunity();
      opportunity.update([opportunityId], {StageName: stageName}, function(error, records) {
        if (error) {
          alert(error.message);
        } else {
          Sfdc.canvas.publisher.publish({ name: "publisher.close", payload: {refresh:"true"}});
        }
      });
    }
    </script>
  4. アプリケーションを再読み込みして変更を確認します。
    モバイルスタイル設定後の [Latest Accounts (最近の取引先)] ページ

何度も言っていますが、スタイルの変更を実装することで、作成するアクションがわずかな作業で大幅に使いやすくなります。成功です。