クラウド画面開発サービス「SkyVisualEditor」によるバーコード帳票の実現

株式会社テラスカイから提供されているSkyVisualEditorは、マウスのドラッグ&ドロップだけで、Salesforceの画面を簡単にデザインできるクラウドサービス型の画面開発ツールです。このSkyVisualEditorでは、基本機能を拡張できるAppComponentという機能があり、現在ではデータ入力支援や帳票作成などさまざまなAppComponentが各社から公開されています。従来のWeb APIによる連携に加え、このAppComponentにも対応していますので、バーコードをレイアウトした画面をSkyVisualEditorによりコーディングレスで開発することができます。

今回の記事をお試しいただくには、SalesforceおよびRayBarcodeとSkyVisualEditorのトライアル環境を準備する必要があります。以下をご参照の上、トライアル環境をご準備ください。

raykit.grapecity.com

今回は、「取引先レコードのIDと取引先名をレイアウトし、そのうちIDについてはバーコードで表示させる」ということを実現したいと思います。IDのバーコード化はRayBarcode、それ以外の画面レイアウトはSkyVisualEditorが担当します。

1)SkyVisualEditorとSalesforceにログインする

SkyVisualEditorへのログインページにIEでアクセスしログインします。

SkyVisualEditorのログイン画面
SkyVisualEditorのログイン画面

次にSkyVisualEditor Studioのボタンを押下します。

SkyVisualEditor Studioのボタンを押下
SkyVisualEditor Studioのボタンを押下

さらにSalesforce.comログインが表示されるので、RayBarcodeがインストールされているSalesforceのユーザ名とパスワードを入力しSalesforce組織にログインします。

Salesforce.comにログインする
Salesforce.comにログインする

2)画面をレイアウトする

ファイルメニューの[新規]をクリックします。レイアウトマネージャが表示されたら、そのまま「Salesforceレイアウト」を選択し、オブジェクトに「取引先:Account」 を指定し[OK]ボタンを押下します。ここでデザインした画面はVisualforceページとして作成されます。

レイアウトを選択
レイアウトを選択

初期のレイアウト画面では、ページブロック(Component1)とページブロックセクション(Component2)のみが配置されています。このレイアウトをそのまま利用します。

初期のレイアウト

SkyVisualEditor左側の「オブジェクト」タブ内の配置項目種別を「表示」に切り替えます。次に主オブジェクトから「取引先名」をページブロックセクション(Component2)の左側の列に配置します。

配置項目種別を「表示」に切り替え

RayBarcodeを選択した状態で、SkyVisualEditor右側にあるタブを「コンポーネント」に切り替え、「バーコード値項目」プロパティの[…]ボタンをクリックし、「取得対象フィールド設定」を表示します。ここでは、オブジェクトに「取引先:Account」をリストから選択します。その後、「取引先ID」を選択済に設定し[OK]ボタンを押下します。

RayBarcodeを選択

RayBarcodeを選択した状態で、SkyVisualEditor右側にあるタブを「コンポーネント」に切り替え、「バーコード値項目」プロパティの[…]ボタンをクリックし、「取得対象フィールド設定」を表示します。ここでは、オブジェクトに「取引先:Account」をリストから選択します。その後、「取引先ID」を選択済に設定し[OK]ボタンを押下します。

「取引先:Account」リストを選択

SkyVisualEditorでは、画面内に配置したオブジェクト項目のみデータを取得する仕様となります。今回のように未配置のオブジェクト項目を使用する場合には、SkyVisualEditor右側の「ページ」タブ内にある「Apexクラス拡張」の「主オブジェクト項目 追加取得」でオブジェクト項目を選択します。
ここでは、「取引先ID」をチェックボックスで選択し、[閉じる]ボタンを押下します。

オブジェクト項目を選択

3)Salesforceへのデプロイ

ファイルメニューの[デプロイ]をクリックし、ここまで作成してきた画面をVisualforceページとしてSalesforceにデプロイします。デプロイ確認が表示されますので、1.でログインしているSalesforce組織の環境を選択し、[デプロイ]ボタンを押下します。

Salesforceへデプロイ

デプロイ完了のダイアログボックスが表示されますので、URLをクリックしてページを開きます。

デプロイ完了

4)実行結果の確認

Visualforceページ名にパラメータとして取引先IDを設定したURLをブラウザでアクセスすることでデータが表示されます。

データの表示

ページタブ内のPDF化をチェックしてからデプロイすることで、PDF形式で出力することも可能です。

PDF出力

RayBarcodeはこれまでセールスフォースプラットフォーム上にバーコードを組み込むことができるパッケージとして、LightningコンポーネントやVisualforceコンポーネント、Web APIのインターフェースを提供して参りましたが、SkyVisualEditorへの対応により、さらに簡単にバーコードが利用できることが実感いただけたかと思います。RayBarcodeに関するより詳しい情報、新しいインターフェースの追加や機能改善など、弊社営業部までお気軽にお問合せください。

raykit.grapecity.com