株式会社テラスカイから提供されているSkyVisualEditorは、マウスのドラッグ&ドロップだけで、Salesforceの画面を簡単にデザインできるクラウドサービス型の画面開発ツールです。このSkyVisualEditorでは、基本機能を拡張できるAppComponentという機能があり、現在ではデータ入力支援や帳票作成などさまざまなAppComponentが各社から公開されています。従来のWeb APIによる連携に加え、このAppComponentにも対応していますので、バーコードをレイアウトした画面をSkyVisualEditorによりコーディングレスで開発することができます。
今回の記事をお試しいただくには、SalesforceおよびRayBarcodeとSkyVisualEditorのトライアル環境を準備する必要があります。以下をご参照の上、トライアル環境をご準備ください。
今回は、「取引先レコードのIDと取引先名をレイアウトし、そのうちIDについてはバーコードで表示させる」ということを実現したいと思います。IDのバーコード化はRayBarcode、それ以外の画面レイアウトはSkyVisualEditorが担当します。
1）SkyVisualEditorとSalesforceにログインする
SkyVisualEditorへのログインページにIEでアクセスしログインします。
次にSkyVisualEditor Studioのボタンを押下します。
さらにSalesforce.comログインが表示されるので、RayBarcodeがインストールされているSalesforceのユーザ名とパスワードを入力しSalesforce組織にログインします。
2）画面をレイアウトする
ファイルメニューの［新規］をクリックします。レイアウトマネージャが表示されたら、そのまま「Salesforceレイアウト」を選択し、オブジェクトに「取引先:Account」 を指定し［OK］ボタンを押下します。ここでデザインした画面はVisualforceページとして作成されます。
初期のレイアウト画面では、ページブロック（Component1）とページブロックセクション（Component2）のみが配置されています。このレイアウトをそのまま利用します。
SkyVisualEditor左側の「オブジェクト」タブ内の配置項目種別を「表示」に切り替えます。次に主オブジェクトから「取引先名」をページブロックセクション（Component2）の左側の列に配置します。
RayBarcodeを選択した状態で、SkyVisualEditor右側にあるタブを「コンポーネント」に切り替え、「バーコード値項目」プロパティの［…］ボタンをクリックし、「取得対象フィールド設定」を表示します。ここでは、オブジェクトに「取引先:Account」をリストから選択します。その後、「取引先ID」を選択済に設定し［OK］ボタンを押下します。
RayBarcodeを選択した状態で、SkyVisualEditor右側にあるタブを「コンポーネント」に切り替え、「バーコード値項目」プロパティの［…］ボタンをクリックし、「取得対象フィールド設定」を表示します。ここでは、オブジェクトに「取引先:Account」をリストから選択します。その後、「取引先ID」を選択済に設定し［OK］ボタンを押下します。
SkyVisualEditorでは、画面内に配置したオブジェクト項目のみデータを取得する仕様となります。今回のように未配置のオブジェクト項目を使用する場合には、SkyVisualEditor右側の「ページ」タブ内にある「Apexクラス拡張」の「主オブジェクト項目 追加取得」でオブジェクト項目を選択します。
ここでは、「取引先ID」をチェックボックスで選択し、［閉じる］ボタンを押下します。
3）Salesforceへのデプロイ
ファイルメニューの［デプロイ］をクリックし、ここまで作成してきた画面をVisualforceページとしてSalesforceにデプロイします。デプロイ確認が表示されますので、1.でログインしているSalesforce組織の環境を選択し、［デプロイ］ボタンを押下します。
デプロイ完了のダイアログボックスが表示されますので、URLをクリックしてページを開きます。
4）実行結果の確認
Visualforceページ名にパラメータとして取引先IDを設定したURLをブラウザでアクセスすることでデータが表示されます。
ページタブ内のPDF化をチェックしてからデプロイすることで、PDF形式で出力することも可能です。
RayBarcodeはこれまでセールスフォースプラットフォーム上にバーコードを組み込むことができるパッケージとして、LightningコンポーネントやVisualforceコンポーネント、Web APIのインターフェースを提供して参りましたが、SkyVisualEditorへの対応により、さらに簡単にバーコードが利用できることが実感いただけたかと思います。RayBarcodeに関するより詳しい情報、新しいインターフェースの追加や機能改善など、弊社営業部までお気軽にお問合せください。
