GrapeCity inc.

Salesforceをもっと便利に、もっと快適に。

活用ブログ

活用ブログではGrapeCity for Salesforceに関する技術的なトピックスや話題を取り上げてご紹介いたします。

2017.03.08

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

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

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

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

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

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

SkyVisualEditorにログイン

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

SkyVisualEditor Studioのボタンを押下

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

Salesforce.comにログイン

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

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

レイアウトマネージャ画面

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

初期レイアウト画面

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

取引先名を配置

SkyVisualEditorの左側にあるタブを「コンポーネント」に切り替え、AppComponentにあるGrapeCity Barcodeをページブロックセクション(Component2)の右側の列に配置します。

GcBarcodeを配置

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

取得対象フィールド設定の表示。オブジェクト、取引先IDを選択済み

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

主オブジェクト項目 追加取得

3)Salesforceへのデプロイ

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

デプロイ画面

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

デプロイ完了ダイアログ

4)実行結果の確認

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

実行結果画面

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

PDF形式で出力

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

活用ブログの一覧に戻る

無料で30日間フル機能をお試しいただけます

GrapeCity for Salesforceは、AppExchangeサイトからトライアルできます。
無料で30日間フル機能をお試しいただけます。