Lightning Experienceの詳細ページ用　ボタン作成

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

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

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

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

◎Visualforceページの作成

1. ViewFramerのマッピング定義「APIサンプル」列のアイコンからVisualforceページサンプルをダウンロードする。

↓

この時、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 - jokyo</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.60.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',
        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ページ]