このセクションの記事

[toc]

概要

このガイドでは、ViewFramerで作成した帳票をSalesforce Lightning Experience画面で使用するために、アクション（ボタン）を作成する方法を説明します。 Visualforceページの作成からページレイアウトへの表示まで、順を追って解説します。

💡
補足

リストビューページ用のボタン作成方法については、Lightning Experienceのリストビューページ用ボタン作成をご参照ください。

 

Visualforceページの作成

1. APIサンプルからVisualforceページをダウンロードする

  1. ViewFramerのマッピング定義画面を開きます。

  2. 「APIサンプル」欄にある「[APIサンプル]」ボタンをクリックします。


     

  3. PDF以外の出力形式を使用する場合（Excel[DDO]、Word[DDO]、D3Workerなど）は、該当する形式を選択してからダウンロードを行います。
    ダウンロードされたテキストファイルには、以下のようなVisualforceページのコードが含まれています。

    <apex:page standardController="Account" standardStylesheets="false"
showHeader="false" sidebar="false" showQuickActionVfHeader="false"
applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ViewFramer - TECHCOLUMN_DL</title>
<apex:slds />
</head>
<body>
<div class="slds-scope">
<div class="slds-p-vertical_x-small">
<h1 class="slds-text-heading_small">実行しています...</h1>
<p class="slds-text-body_regular">
<a href="#" onclick="submitAction();">自動的に開始されない場合はこのリンクをクリックしてください。</a>
</p>
</div>
</div>
<apex:includeScript value="/canvas/sdk/js/publisher.js" />
<apex:includeScript value="https://s.oproarts.com/viewframer/js/viewframer-1.70.js" />
<script type="text/javascript">
function isMobile() { return '{!JSENCODE($User.UIThemeDisplayed)}' === 'Theme4t'; }
function s1Version() { return isMobile() ? '49.0' : ''; }
function submitAction() {
/* if (!window.confirm('実行しますか?')) { return; } */

VIEWFRAMER.action({
mappingNm:'jokyo',
fileName:'jokyo',
/* nsPrefix:'oproarts1', */
ID:'{!JSENCODE(Account.Id)}',

api:['{!JSENCODE($Organization.Id)}','{!JSENCODE($User.Id)}',
'{!JSENCODE($Api.Session_ID)}','{!JSENCODE($Api.Partner_Server_URL_400)}']
}).url('').withS1(s1Version()).pdf();

VIEWFRAMER.publisherClose();

/* if (!isMobile()) { window.setTimeout(function () { window.history.back(); }, 1000); } */
}
VIEWFRAMER.addOnLoadHandler(function () { submitAction(); });
</script>
</body>
</html>
</apex:page><!-- END -->

     

2. Salesforce環境でVisualforceページを作成する

  1. Salesforceにログインし、「設定」に移動します。

  2. クイック検索から「Visualforceページ」を検索し、「カスタムコード」→「Visualforceページ」を開きます。

     

  3. 「新規」ボタンをクリックします。

  4. 以下の項目を設定します。

    項目 設定内容
    表示ラベル 任意の名前を入力してください。
    名前 英数字で任意の名前を入力してください。
    Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能 チェックボックスをオンにしてください。
    内容（Visualforce Markup） 手順1「APIサンプルからVisualforceページをダウンロードする」でダウンロードしたテキストファイルの内容を貼り付けてください。

     

3. パラメータの確認と調整

出力条件にパラメータを指定している場合、パラメータに渡す値が正しく記載されているか確認してください。 基本的には{!JSENCODE(Account.Id)}のようにオブジェクトIDを渡すように設定されています。 ID以外の値を渡す必要がある場合は、該当部分を修正してください。

 

4. OPROARTS Connector バージョン2.0以降の場合の設定

OPROARTS Connectorのバージョンが2.0以降の場合、ダウンロードしたコードの31行目付近にある以下の部分のコメント記号（「/*」と「*/」）を削除してください。

修正前

/* nsPrefix:'oproarts1', */

修正後

nsPrefix:'oproarts1',

 

5. ページを保存する

「保存」ボタンをクリックしてVisualforceページを保存します。

 

アクションの作成

1. アクション作成画面を開く

  1. 「設定」から「オブジェクトマネージャ」を開き、アクションを配置するオブジェクトを選択するか、オブジェクトのページから「オブジェクトを編集」で移動します。

     

  2. 「ボタン、リンク、およびアクション」セクションを開きます。
  3. 「新規アクション」ボタンをクリックします。
     

2. アクションを設定する

以下の項目を設定します。

項目 設定内容
アクション種別 カスタムVisualforceを選択してください。
Visualforceページ 前のセクションで作成したVisualforceページを選択してください。
表示ラベル アクション名を任意に入力してください。
名前 英数字で任意の名前を入力してください。

 

3. アクションを保存する

「保存」ボタンをクリックしてアクションを保存します。
 

アクションをページレイアウトに表示する

1. ページレイアウトを開く

  1. オブジェクトマネージャで、アクションを表示するページレイアウトを選択します。

     

  2. レイアウトを表示します。
     

2. アクションをドラッグ＆ドロップで配置する

  1. 「モバイルおよびLightningのアクション」セクションから、作成したアクションを選択します。

  2. 下部の「SalesforceモバイルおよびLightning Experienceのアクション」エリアにドラッグ＆ドロップします。

     

3. ページレイアウトを保存する

「保存」ボタンをクリックしてページレイアウトを保存します。

 

確認方法

  1. Salesforceで対象レコードの詳細ページを開きます。

  2. 右上のアクション群に、作成したアクションが表示されていることを確認します。

     

  3. アクション名をクリックして、帳票が正常にダウンロードされることを確認します。

関連記事