XAデザイナーとViewFramerを使用してWord (ヘッダー明細型) の帳票を出力する方法を説明します。
※以下のセットアップが完了していない方は先にご設定ください。
【帳票DX for Salesforce セットアップガイド（1）】インストール&カスタム設定
【帳票DX for Salesforce セットアップガイド（2）】認証情報の登録
＜目次＞
****************************************************************************************************
- 全体の流れ
-
Wordテンプレートの作成
2-1. XAデザイナーにWordファイルをアップロード
2-2. Wordデザイン
2-3. Wordマッピング
2-4. アップロード前のWordブックの検査
2-5. XAデザイナーにマッピング済みWordファイルをアップロード - 接続アプリケーションのインストール
-
ViewFramerの設定
3-1. ViewFramerビュー定義
3-2. ViewFramerマッピング定義 - 出力アクションの作成
****************************************************************************************************
【全体の流れ】
既存のWordテンプレートから作る流れは以下の通りです。
※XAデザイナー 新規追加＞新規テンプレート＞BLANKよりWordファイルをダウンロードすることで、白紙からテンプレートを作成する事も可能です。
【XAデザイナーにWordファイルをアップロード】
１．「XAデザイナー」にログインします。
https://xa.oproarts.com/xad/
※システム連携用ではなく、「帳票DXユーザー」のユーザー名とパスワードでログインしてください。
２．任意のバケットを選択します。
バケットに関する詳細につきましては、以下の記事をご参照ください。
【TECH COLUMN】帳票DXのバケット機能を活用した帳票テンプレートの権限管理
３．画面左上の「新規追加」をクリックし、「ファイルインポート」をクリックします。
４．[Office]タブを開き、テンプレートとして使用するファイルを選択し、[実行]ボタンをクリックします。
テンプレートの作成が成功すると、画面右上に「SUCCESS」という通知が表示されます。
５．作成されたテンプレートを選択し、画面右側の[ダウンロード]ボタンをクリックします。
Officeアドイン 「Document Designer for Office」が挿入されたOfficeファイルがダウンロードされます。
＜Officeアドインを使用しない場合＞
画面右側の「Officeアドインを使用しない」にチェックを入れます。
赤枠のマークを押すと、別ブラウザでOfficeアドイン 「Document Designer for Office」画面が立ち上がります。
「編集」＞「ダウンロード」をクリックしてOfficeファイルを取得します。
【Wordデザイン】
ここでは帳票デザインの例として、非明細部（ヘッダー、フッター）と明細部がある見積書を作成します。
１．ファイルを開きます。
画面右側に「OPRO ドキュメントデザイナー for Office」が表示されていることを確認します。
以下の画面が出る場合は 「承諾して続行」 をクリックします。
以下の画面になっている場合は、「Skip >」 をクリックします。
以下の画面になっている場合は、右の 「XA / OPROARTS」 を選択します。
２．明細部のレイアウトを調整します。
明細部として繰り返したい箇所を、あらかじめテンプレート上に用意します。
■変更前
以下赤枠が明細部の既存レイアウトとします。
■変更後
明細部として繰り返したい行を空行にします。
【Wordマッピング】
帳票デザインを作成した後は、フィールドを追加してマッピングします。
非明細部（ヘッダー / フッター）へのマッピングと、明細部へのマッピングがそれぞれ必要です。
１．非明細部(ヘッダー)にマッピングします。
帳票デザインの項目にあわせたフィールドを追加します。（例：発行日、見積番号、顧客名 など）
「フィールドを追加」の下にあるテキストボックスにフィールド名を入力し、[]ボタンをクリックします。
追加したフィールドの型には 「文字列」 が選択されています。
型を手動で設定する場合は、 [] ボタンをクリックして型を選択します。
フィールド型の詳細については、後述の 【フィールドの型】 で説明します。
２．フィールドのタグを埋め込みたい箇所にカーソルを置き、フィールドの [ ] ボタンをクリックします。
タグが埋め込まれます。
これで非明細部のマッピングが完成しました。
３．明細部にマッピングします。
[＋明細データセットを追加] ボタンをクリックします。
４．明細データセット名を入力し、 [追加] ボタンをクリックします。
「種別：明細」 のデータセットが追加されます。
５．明細部にフィールドを追加します。非明細部と同様のやり方で、フィールド名を入力し、型を選択します。
６．明細部にタグを埋め込みます。
フィールドのタグを埋め込みたい箇所 （セル） を選択し、フィールドの [] ボタンをクリックします。
明細部にタグが埋め込まれます。
以下のような見た目になります。
７．上書き保存をして、ファイルを閉じます。
【フィールドの型】
************************************************************************************************************
Point
データセットに作成するフィールドの型について補足します。
フィールドの型として、選択できる種類は下記の6種類です。
- 文字列
- リッチテキスト
- 数値
- 日付
- 画像
それぞれについてご紹介します。
文字列
文字列を表記する場合に選択します。例えば、氏名を表示したいときに使用します。
リッチテキスト
リッチテキスト項目を表記する場合に選択します。
以下のTECH COLUMNもご参考ください。
【TECH COLUMN】ViewFramerからのWord出力（リッチテキスト対応）
数値
数値を表記する場合に選択します。例えば、金額を表示したいときに使用します。
タグの挿入後、出力書式を選択できます。
日付
日付を表記する場合に選択します。例えば、作成日を表示したいときに使用します。
タグを挿入後、入力書式と出力書式を選択できます。
画像
画像を取り込むフィールドで選択します。
タグを挿入時に、下記3点について、それぞれオン/オフを設定できます。
- 縮小して画像を枠内に収める
- 枠に合わせて画像を拡大する
- 縦横比率を保持
また、タグは、テキストボックスの本文内、または、画像の代替テキストに、埋め込むことが可能です。
テキストボックスの本文内にタグを埋め込んだ場合、タグが書かれている事を一目で把握できます。
画像の代替テキストにタグを埋め込んだ場合、画像に指定された回転等のエフェクトを引き継ぐ事ができます。
画像の代替テキストに画像のタグを指定する方法については以下のページをご覧ください。
テキストボックスや画像の代替テキストにタグを埋め込む方法
ドキュメント内に引用可能な画像については以下のページをご確認ください。
Excel/Word/PowerPoint帳票に関する動作要件と制限事項(帳票DX/Salesforce)
Officeアドイン 「Document Designer for Office」 に関する動作要件や制限事項(帳票DX/Salesforce)
************************************************************************************************************
【アップロード前のWordブックの検査】
アップロード前に、次の手順でドキュメント検査をして、ドキュメントのプロパティと個人情報を削除することを推奨します。
削除しない場合、テンプレートの作成者部分に個人情報が残ったままとなります。
１．［ファイル］タブ＞［情報］の順にクリックします。
２．［問題のチェック］＞［ドキュメント検査］を順にクリックします。
３．［ドキュメントのプロパティと個人情報］を選択し、［検査］ボタンをクリックします。
４．ドキュメント情報がある場合は、［すべて削除］ボタンをクリックします。
【XAデザイナーにマッピング済みWordファイルをアップロード】
１．「XAデザイナー」にログインします。
https://xa.oproarts.com/xad/
※システム連携用ではなく、「帳票DXユーザー」のユーザー名とパスワードでログインしてください。
２．作成したテンプレートを選択し、画面右側の[ファイルを選択]ボタンをクリックします。
３．作成したOfficeファイルを選択します。
４．選択したOfficeファイルが表示されていることを確認し、[アップロード]ボタンをクリックします。
アップロードが成功すると、画面右上に「SUCCESS」という通知が表示されます。
【接続アプリケーションのインストール】
ViewFramerを使用する際、接続アプリケーションのインストールが必要です。
以下のFAQをご参照いただき、必ず設定を行ってください。
【ViewFramerビュー定義】
ヘッダー用と明細用の２つのビューを作成します。
１．ViewFramer ログイン
最初に、https://vfui.ap.oproarts.com/xa_view_framer_ui/ にアクセスし、認証情報を入力してViewFramer にログインします。
********************************************************************************************************************
注意
同じウェブブラウザーで複数のビューやマッピングを参照・編集すると上書きされてしまいます。
必ず１つのタブで操作してください。
既存のビューを参考にしたい場合は、別のブラウザーで参考にしたいビューを開くようお願いいたします。
ただし、同時編集はできませんので参照のみにしてください。
また、別のブラウザーにした場合も複数のビューを開くことは避けてください。
********************************************************************************************************************
２．ヘッダービューの作成
２－１．「ビュー」タブを開いて「新規」ボタンをクリックします。
２－２．Salesforce にログインします。
※以降「現在のセッション情報を継続する」でもログイン可能です。また、以降のスライドではこの画面を省略しています。
２－３．[基本設定]タブの設定をします。
基本設定では、ビューの名前とタグ(任意)を設定します。
タグは ViewFramer 内で作成したビューを検索する際のキーワードで、何も指定しなくても構いません。
ビューの名前を設定し、「次へ」をクリックします。例では、「QuotationHeader」としています。
※ ビュー名は半角英数で入力してください。
２－４．[リレーション設定]タブを設定します。
リレーション設定では、ビューで用いる Salesforce オブジェクトを設定します。
主オブジェクトに「商談」を選択し、ショートネームを入力します。任意ですが、例では以下のように指定しています。
- 商談 = Opportunity
- 取引先 = Account
関連オブジェクトには「取引先」を指定します。設定は以下の画像をご参照ください。
設定をしたら「次へ」をクリックします。
********************************************************************************************************************************************
Point
主オブジェクトと関連オブジェクトについて
主オブジェクトは、起点となるオブジェクトを指定して下さい。
必ずしもボタンを配置するオブジェクトとは限りません。
関連オブジェクトは、帳票上に使用する主オブジェクト以外のオブジェクトです。
参照関係先のオブジェクトも指定する必要があります。
今回は、[取引先名]を表示したいため、取引先オブジェクトを関連オブジェクトとしてリレーションを作成しています。
商談レコードに紐づく取引先レコードを取得するために、関連オブジェクトのリレーション設定では [取引先 ID]=[商談.取引先 ID]
を指定しています。
********************************************************************************************************************************************
２－５．[出力項目設定]タブを設定します。
出力項目設定では、帳票に出力する項目を指定します。
[全項目を追加]ボタンで Salesforce オブジェクトのすべての項目を追加することもできますが、１つずつ追加する場合は
[＋]ボタンをクリックして項目を増やし、[項目ビルダー]から内容を指定します。
[列追加]ボタンをクリックし、オブジェクトと列を選択して追加します。
関数を使用することも可能です。以下、参考記事です。
以下、設定後の画面です。
２－６．[出力条件設定]タブの設定をします。
レコードの抽出条件を設定できる画面です。
商談に条件を追加します。以下のように設定をしてください。
パラメータ名は任意ですが、今回は「ID」としてください。
ヘッダー用のビューが作成できました。次は、明細用のビューを作成します。
３．明細ビューの作成
明細用のビューを作成します。ヘッダー用のビューと同様に新規から作成します。
３－１．[基本設定]タブの設定をします。
明細ビューでは、[商談商品]オブジェクトの定義を行います。
ビューの名前を設定し、「次へ」をクリックします。
３－２．[リレーション設定]タブを設定します。
主オブジェクトに「商談商品」を選択し、ショートネームを入力します。任意の名前ですが、例では以下のように設定していま す。
- 商談商品 = OpportunityLineItem
- 商品 = Product
関連オブジェクトに「商品」を指定します。設定は以下の画像をご参照ください。設定をしたら「次へ」をクリックします。
********************************************************************************************************************************************
Point
主オブジェクトと関連オブジェクトについて
ヘッダービューの時と同様に、参照項目先のオブジェクトとリレーションを作成します。
今回のリレーション設定では、[商品.商品 ID]=[商談商品.商品 ID]を指定しています。
********************************************************************************************************************************************
３－３．[出力項目設定]タブの設定をします。
ヘッダービューと同様に、帳票に出力する項目を指定します。
３－４．[出力条件設定]タブの設定をします。
レコードの抽出条件を設定する画面です。 ヘッダービューと同じように、「商談 ID」が「ID」と「等しい(=)」を指定し、保存します。
【ViewFramerマッピング定義】
各ビューを一つのデータの固まりとしてまとめ、帳票テンプレートと紐づける「マッピング」の定義を行います。
１．マッピングの作成
１－１．[マッピング]タブを開いて[新規]ボタンをクリックします。
１－２．マッピング名とタイプを指定します。
タイプは「ヘッダー明細型」を選択してください。 主データには、ヘッダービューを指定します。
明細データには、明細ビューを指定します。主データと同様に設定を行うことができたら、[次へ]をクリックしてください。
１－３．[出力確認]タブでビューの設定状況を確認します。
※こちらの手順はスキップしても問題ございません。
ビューで設定した内容でSalesforceから想定したデータが取得できているか、確認することができます。
詳細については、以下FAQをご参照ください。
【ViewFramer】マッピングの[出力確認]タブについて(Salesforce)
********************************************************************************************************************************************
point
データ表示の際に、出力バージョン(※)の指定が可能です。
※出力バージョン切り替えの詳細については、以下ページをご参照ください。
ViewFramer 出力バージョン切り替え方法（Salesforce）
ここで指定した出力バージョンが、後に Salesforce 組織に設置する帳票出力ボタンの挙動に影響することはありません。
********************************************************************************************************************************************
２－４．[Documentizer]タブで帳票テンプレートとのマッピングを行います。
テンプレートを選択し、「td1」の「データ」にてヘッダービューを指定します。
画面左側の「データ」に表示されるのは、テンプレートで作成したフィールド名です。
画面右側の「データフィールド」に表示されるのは、ビューの[出力項目設定]タブで設定した「出力項目名」です。
「データ」と「データフィールド」のマッピングを行います。
両方の値が一致していれば[自動マッピング]ボタンより簡単にマッピングすることができます。
「td2」の「データ」には明細ビューを指定します。 マッピングが完了したら、[配備]をクリックしてください。
【出力アクションの作成】
Salesforce のレコード画面に、帳票を出力するための出力アクション（ボタン）を作成します。
ここでは、詳細ページに出力アクションを配置する方法を説明します。リストビューに出力アクションを配置する方法はこの記事の最後にあるリンクよりご確認いただけます。
１．ViewFramer のマッピング一覧画面で、呼び出したいマッピングの[API サンプル]ボタンをクリックします。
２．「サービス」が「Documentizer」、「形式」がテンプレートの形式になっていることを確認し、[Visualforce ページ]ボタンをクリックします。
- PDFの場合：形式「PDF」
- Excelの場合：形式「Excel（アドインでマッピング）」
- Wordの場合：形式「Word（アドインでマッピング）」
- PowerPointの場合：形式「PowerPoint（アドインでマッピング）」
クリックすると、出力スクリプトサンプルのテキストファイルがダウンロードされます。
ダウンロードされたテキストファイルを開き、内容を[Ctrl+C]でコピーしておきます。
３．Salesforceの設定を開き、「Visualforce ページ」を選択します。
４．[新規]ボタンをクリックし、下記のように設定して[保存]ボタンをクリックします。
- 表示ラベル …任意の文字列（例 WordHeaderMeisai ）
- 名前…任意の文字列（例 wordheadermeisai）
- 「Lightning Experience、エクスペリエンスビルダーサイト、およびモバイルアプリケーションで利用可能」 ...チェック
- Visualforce Markupの内容... ２．でコピーした内容を[Ctrl+V]で貼り付ける（出力スクリプトサンプル）
５．アクションを設置するオブジェクトを開き、設定の「オブジェクトを編集」をクリックします。
６． 「ボタン、リンク、およびアクション」を選択して、[新規アクション]をクリックします。
７．下記のように設定して[保存]ボタンをクリックします。
| 設定箇所 | 設定内容 |
|---|---|
| アクション種別 | カスタムVisualforce |
| Visualforce ページ | 作成したVisualforceページ |
| 高さ | 変更なし |
| 表示ラベル | 任意の文字列（例 見積書発行） |
| 名前 | 任意の文字列（例 Quotation） |
８．商談のオブジェクトマネージャ画面に戻り、「ページレイアウト」をクリックし、ボタンを表示させたいページレイアウト の「編集」リンクをクリックします。
９．レイアウト編集画面の「モバイルおよび Lightning のアクション」をクリックし、作成したボタンを「Salesforce モバイルおよび Lightning Experience」セクションにドラッグ＆ドロップします。
１０．[保存]ボタンをクリックしてレイアウトを保存します。
１１．商談の詳細ページにアクションが表示されていることを確認します。
************************************************************************************************************
Point
リストビューページに出力アクションを配置する方法
上記でご紹介した出力アクション作成方法は、オブジェクトの詳細ページに配置する方法ですが、
リストビューに出力アクションを配置することも可能です。
設定手順については、こちらの記事をご確認ください。
【XA】Lightning Experienceのリストビューページ用-ボタン作成-ViewFramer
************************************************************************************************************
手順は以上です。
アクションをクリックすると、帳票が出力されることをご確認ください。