2018.03.16

SkyVisualEditorの帳票画面でバーコード利用 ~「GrapeCity Barcode for Salesforce」と連携 ~

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

4月は新入社員も入社し、新たな出会いのある季節になりましたね。
SkyVisualEditor(以下、SVE)にも良い出会いがあり、グレープシティ社の「GrapeCity Barcode for Salesforce」(以下、GrapeCity Barcode)を SVE の AppComponent にご対応いただきました。

グレープシティ株式会社 ニュースリリース:"SkyVisualEditor"でバーコード自由自在
https://gcsf.grapecity.com/news/newsrelease/20170308.htm

今回のご対応により、SVE で作成した画面や帳票(PDF)画面に GrapeCity Barcode で生成するバーコードを出力することができるようになりました。
ということで、今回のブログは、AppComponent 『GrapeCity Barcode』 の紹介をします。

GrapeCity Barcode とは

グレープシティ社が提供する、Salesforce上のデータをバーコード化できるサービスです。
QRコードやGS1データバー、郵便バーコード、JANコード、ITFなど国内外の標準規格のシンボルをほとんどサポートしており、AppExchangeからインストールするだけですぐに利用することができます。GrapeCity Barcode は今回の対応により、Visualforceページ、Lightningコンポーネントに追加し、SkyVisualEditor上からの利用も可能です。
詳細は、グレープシティ社ウェブサイトをご覧ください。

見積書帳票画面(PDF画面)を作ってみよう

今回作成する見積書:

  • PDF画面である
  • 見積書自体(見積番号)のバーコードが表示されている
  • 各商品(品番マスタコード)のバーコードが表示されている

見積書PDFファイル

手順:

  1. AppComponent 『GrapeCity Barcode』をインストール
  2. SVE画面にAppComponent 『GrapeCity Barcode』を配置、設定
  3. デプロイ

 

手順1: AppComponent 『GrapeCity Barcode』をインストール

テラスカイのホームページ、またはAppExchangeサイトからAppComponent 『GrapeCity Barcode』をSalesforceにインストールしてください。AppComponentの設定詳細はGrapeCity Barcodeのヘルプドキュメントをご確認ください。

テラスカイホームページ AppComponent一覧画面

 

手順2: SVE画面にAppComponent 『GrapeCity Barcode』を配置、設定

a. AppComponent 『GrapeCity Barcode』を配置

SVE Studio画面で見積書ページを作成します。主オブジェクトに「見積」オブジェクト、関連オブジェクトとして「見積明細」オブジェクトを使用してページを作成しているものとします。そこに、ドラッグ・アンド・ドロップでAppComponent 『GrapeCity Barcode』を配置し、プロパティ値を設定します。
バーコード表示は、主オブジェクトの「見積番号」項目、関連オブジェクトの「品番マスタ」項目の値を対象とするので、パネルグリッドとデータテーブル内に配置します。AppComponent 『GrapeCity Barcode』は、ページ直下やパネルグリッド内、データテーブル内等、あらゆる場所に配置可能なコンポーネントになっています。

SVE Studio画面でAppComponentを配置

b. プロパティ設定

主オブジェクト「見積」の「見積番号」項目には下記を設定します。

プロパティ名 設定値 「見積番号」のバーコード設定
バーコード種類 "DataMatrix" を選択
親レコード "{!record}"
バーコード値項目 オブジェクト: データテーブルで使用している関連オブジェクト「見積明細」
項目: 主オブジェクトに関連付いている参照項目「見積」
関連オブジェクト バーコード表示対象項目「見積番号」のAPI参照名 "Name"

関連オブジェクト「見積明細」の「品番マスタ」項目には下記を設定します。

プロパティ名 設定値 「品番マスタ」のバーコード設定
バーコード種 "Code128" を選択
親レコード "{!item.record}"
関連オブジェクトに対するバーコードのため、データテーブルのプロパティ「var」値"item"のレコード情報
バーコード値項目 オブジェクト: データテーブルに表示している関連オブジェクト「見積明細」
項目: バーコード表示対象項目の「品番マスタ」

ところで、バーコードの種類って沢山ありますよね。こんなに種類があるのを知りませんでした ^^;
参考に、グレープシティ社のサイトにある対応バーコード一覧を貼っておきます。詳細はサイトを確認ください。

グレープシティ社サイト -対応バーコード一覧-

c. ページをPDF化

作成したページをPDF化するために、ページプロパティ「PDF化」にチェックを設定します。

ページプロパティ「PDF」の設定

 

手順3: デプロイ

以上で設定が完了したので、デプロイしてページを表示してみます。

PDFページ化した見積書(バーコードあり)

期待通りにバーコード表示がされていますね。

 

最後に

Salesforceから帳票を出力したい。帳票にはバーコードを出力したいというご要望を度々いただいています。
グレープシティ社にご対応頂いたAppComponentで、少しでもご要望を叶えられると嬉しいです。

最後になりますが、AppComponent対応いただきました、グレープシティ株式会社様にこの場を借りまして御礼申し上げます。
ありがとうございました!

1 件

関連する記事