このセクションの記事

ViewFramerで作成した帳票をLightning Experience画面で使用する方法についての記事です。
Lightning Experience画面では、アクション（ボタン）を作成することで帳票生成を行うことができるようになります。

以下、詳細ページ向けアクションの作成方法です。

リストビューページ向けのアクションの作成方法は以下の記事をご覧ください。

Lightning Experienceのリストビューページ用　ボタン作成

 

◎Visualforceページの作成

1. ViewFramerのマッピング定義「APIサンプル」欄にある[APIサンプル]ボタンからVisualforceページサンプルをダウンロードする。

mceclip0.png

↓

mceclip1.png

この時、PDF以外の出力形式の時にはそれを選択してからダウンロードを行います。
(Excel[DDO]、Word[DDO]、D3Workerなど)

以下の内容のテキストファイルがダウンロードされます。

<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ページを作成する。

[設定] -> [カスタムコード] -> [Visualforceページ]

 

[新規]ボタンをクリックします。

以下のように設定します。

  • 表示ラベル：任意名
  • 名前：任意名（英数字）
  • Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能：チェックをいれる
  • 内容（Visualforce Markup）に、1でダウンロードしたテキストファイルの中身を貼り付ける

lightning_button_faq_detailver_edit.PNG

出力条件にパラメータを指定している場合、パラメータに渡す値が正しく記載されているかどうか確認してください。
基本的には「{!JSENCODE(Account.Id)}」のようにオブジェクトIDを渡すように記載がされています。ID以外を渡すようにしたい場合はそのようになるように記述してください。

また、OPROARTS Connectorのバージョンが 2.0 以降の場合、31行目付近の以下の部分の「/*」と「*/」を削除し、コメントを有効にしてください。

/* nsPrefix:'oproarts1', */

3. 保存する

 

◎アクションの作成

1. アクションを置くオブジェクトの編集ページを開きます。

[設定]の[オブジェクトマネージャ]からオブジェクトを選ぶか、オブジェクトのページから「オブジェクトを編集」で画面遷移可能です。

↓

 

・「ボタン、リンク、およびアクション」を開く

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

  • アクション種別：カスタムVisualforce
  • Visualforceページ：作成したVisualforceページを選択する
  • 表示ラベル：アクション名　※任意
  • 名前：任意（英数字）

ここまででアクションの作成ができました。

 

◎アクションの表示

1.  ページレイアウト」からアクションを表示するページレイアウトを選択する。

 

2. レイアウトに表示する。

「モバイルおよびLightningのアクション」の中から作成したアクションを選択し、下部の「SalesforceモバイルおよびLightning Experienceのアクション」にドラッグ＆ドロップで表示します。

保存をします。

 

ここまででアクションの作成から表示までができました。

レコードの詳細ページの右上のアクション群に表示がされますので、それをクリックすることで帳票のダウンロードが可能になります。

 

(旧システム FAQ#9299)



関連記事