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