どのシステムでも要望されることの多いのが「帳票にバーコードを印刷したい」というもの。もちろんSalesforceプラットフォームを使っている方も例外ではありません。RayBarcodeで追加されたWeb APIを使うと、簡単にAppExchangeパッケージやSalesforceの標準機能にバーコードの画像を引き渡すことができます。
その1例として、NCD日本コンピュータ・ダイナミクス株式会社のSmart Report Meister(以下、スマレポ!)とRayBarcodeの連携方法をご紹介します。
連携をお試しいただくには、まずSalesforceおよびRayBarcodeとスマレポ!のトライアル環境を準備する必要があります。以下をご参照の上、トライアル環境をご準備ください。
今回の連携では、「取引先レコードのIDをバーコード化し、帳票上にバーコードをレイアウトしPDFに出力する」ということを実現したいと思います。IDのバーコード化はRayBarcode、帳票上のレイアウトとPDFへの出力は「スマレポ!」が担当します。この2つのパッケージを連携させることで目的を実現させます。
取引先にカスタム項目を設定する
取引先にIDのバーコード画像を表すカスタム項目を設定します。IMAGE関数 にIDをバーコード化した画像を取得するRayBarcodeのWeb APIを設定します。Web APIに設定するパラメータについての詳細はオンラインヘルプを参照してください。
オンラインヘルプを見る
指定する値
バーコードの種類 | QRコード |
---|---|
幅 | 300 |
高さ | 300 |
値 | 取引先レコードのID |
トークン | Web APIの認証トークン |
IMAGE関数
IMAGE("https://gcbarcode.azurewebsites.net/api/Png/qrcode?Width=300&Height=300&value="+Id+"&token="+ $Setup.gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c,"QRCode",300, 300)
![取引先にカスタム項目を設定](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318094414.png)
パラメータにWeb APIの認証トークンを指定しています。これはRayBarcodeがインストールされている組織、かつ、ライセンスが割り当てられているユーザのみが使用できるカスタム設定の項目になります。このトークンには有効期限があり、Web API実行前に必ず値をリフレッシュする必要があります(後述)。
スマレポ!で帳票を作成する
スマレポ!で帳票を作成します。今回は簡単のために、バーコード画像のみを表示する帳票を作成します。
[帳票新規作成]ボタンを押下します。
![スマレポ!で帳票を新規作成](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318094759.png)
帳票名や用紙の向きを設定(なんでもOK)して[次へ]ボタンを押下します。
![帳票名や用紙の向きを設定](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318094913.png)
基本オブジェクトを取引先に設定して[次へ]ボタンを押下します。
![基本オブジェクトを取引先に設定](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318095007.png)
デフォルトのまま[保存]ボタンを押下します。
![リレーションオブジェクトはデフォルトのまま](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318095055.png)
スマレポ!の帳票ができました。
![スマレポ!の帳票が完成](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318095126.png)
デザイナが表示されるので、さきほど作成したバーコード画像のカスタム項目を配置し[保存]ボタンを押下します。
![バーコード画像のカスタム項目を配置](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318095558.png)
これでスマレポ!側の設定は完了です。
帳票出力を実行するカスタムボタンの作成
帳票出力を実行するカスタムボタンを作成します。スマレポ!には帳票出力を実行するスクリプトを自動生成する機能があります。このスクリプトに対して、Web APIの認証に使うトークンをリフレッシュするコードを加える必要があります。
スマレポ!の[ボタンスクリプト]ボタンを押下してスクリプトを表示します。
![スマレポ!](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318095818.png)
表示されたスクリプトをコピーします。
![スマレポ!のボタンスクリプトのスクリプト](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318095901.png)
新規カスタムボタンを作成します。動作に[JavaScriptを実行]を選択し先ほどのスクリプトをコピーします。
![新規カスタムボタンを作成](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318100003.png)
次に、スマレポ!の帳票出力するコードの前にアクセストークンをリフレッシュするAPEXクラスの実行を追加します。
追加するコード
sforce.apex.execute("gcbc.GcBarcodeGlobalAccessTokenGenerator", "UpdateAccessToken", {}, {onSuccess: function(){;},onFailure: function(error) {alert(error);}});
![スマレポ!の帳票出力するコードの前にアクセストークンをリフレッシュするAPEXクラスの実行を追加](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318100333.png)
ページレイアウトに作成したカスタムボタンを追加します。
![ページレイアウトに作成したカスタムボタンを追加](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318100421.png)
これですべての設定が完了しました。
実行結果の確認
それでは実行結果を見てみましょう。取引先の詳細画面に移動し、先ほど作成したカスタムボタンを押下します。
![実行結果の確認](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318100631.png)
バーコード画像がPDF出力されました。
![バーコード画像がPDF出力](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ray_grapecity/20200318/20200318100718.png)
今回はスマレポ!との連携をご紹介しましたが、RayBarcodeはセールスフォースプラットフォーム上にバーコードを組み込むことができるパッケージです。LightningコンポーネントやVisualforceコンポーネント、Web APIといった複数のインターフェースを提供しており、さまざまな形でセールスフォースプラットフォーム上にバーコードを組み込むことができます。RayBarcodeに関するより詳しい情報、新しいインターフェースの追加や機能改善など、弊社営業部までお気軽にお問合せください。