2017.05.23

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

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画面である
見積書自体(見積番号)のバーコードが表示されている
各商品(品番マスタコード)のバーコードが表示されている

手順：

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

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

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

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

a. AppComponent 『GrapeCity Barcode』を配置

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

b. プロパティ設定

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

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

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

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

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

c. ページをPDF化

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

手順3：デプロイ

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

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

最後に

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

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

1 件

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

GrapeCity Barcode とは