Salesforce Filesに保存する

Web APIを使って生成したバーコード画像をSalesforce Filesに保存することができます。 Salesforce Filesは、ファイルの保存、整理、共有可能なSalesforceのファイルストレージの1つです。 必要に応じてSalesforce Filesからバーコード画像をダウンロードして印刷したり、バーコード画像をメールに埋め込んで送信したりするなど様々な活用法があります。

RayBarcodeでは、Salesforceとバーコードを連携してセミナー参加者の出席状況管理を自動化するイベント参加者管理デモ環境を提供しています。このデモには上記と同様にSalesforce Filesに保存されているバーコード画像をイベント参加証に格納しキャンペンメンバーにメール送信する処理が含まれています。また、それ以外にもセミナー会場での受付や参加者の状況をレポートで確認などSalesforceの既存機能とRayBarcodeを利用した動作の一連の流れを確認することができます。デモのお申し込みはこちらから可能です。ご利用ください。

ここでは、生成したバーコード画像をSalesforce Filesに保存してそのダウンロードURLを使って画面に画像ファイルを表示する方法について説明します。

まずは、Web APIを使って生成したバーコード画像をSalesforce Filesに保存してそのダウンロードURLを処理の戻り値として呼び出し元に返すコントローラを作成します。

  1. Salesforce Classicの場合、「設定 > ビルド > 開発 > Apexクラス」を開く。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > カスタムコード > Apexクラス」を開く。
  2. SaveBarcodeController.cls を作成する。

RemoteAction アノテーションでは、Visualforceで使用するApexメソッドのJavaScripを介したコールのサポートが提供されます。また、@RemoteAction メソッドは static で、かつ global または public のいずれかである必要があります。

public class SaveBarcodeController  {
    public string Token {get;set;}
    public string ImageData {get;set;}

    @RemoteAction    
    public static String saveBarcodeToSalesforceFiles(String token){   
        String baseURL = 'https://gcbarcode.azurewebsites.net/api/PNG/qrcode?width=300&height=300&value=This%20is%20sample%20Barcode&token=' + token;
        HttpRequest req = CreateHttpRequest(baseURL);        
        try {
            System.HttpResponse response = new Http().send(req);
            ContentVersion content = new ContentVersion();
            content.Title = 'Test PNG Image';
            content.PathOnClient = content.Title + '.png';
            content.VersionData = response.getBodyAsBlob();
            insert content;
            ContentDistribution cd = new ContentDistribution();
            cd.name = content.Title;
            cd.ContentVersionId = content.Id;
            cd.PreferencesAllowOriginalDownload = true;
            cd.PreferencesAllowViewInBrowser = true;
            cd.PreferencesNotifyOnVisit = false;
            cd.PreferencesNotifyRndtnComplete = false;
            cd.PreferencesPasswordRequired = false;
            insert cd;            
            ContentDistribution dist = [Select Id, ContentDownloadUrl From ContentDistribution Where Id = :cd.Id LIMIT 1];
            return dist.ContentDownloadUrl;
        } catch (Exception e) {
            return '';
        }
    }
    
    private static HttpRequest createHttpRequest(string url){
        HttpRequest req = new HttpRequest();
        req.setTimeout(30*1000);
        req.setEndpoint(url);
        req.setMethod('GET');        
        return req;
    }    
}

次に@RemoteAction のアクセス元となるVisualforce Page ShowBarcodeStoredInSalesforceFiles.vfp を作成します。

IMGタグのsrc属性に@RemoteActionの戻り値の画像のダウンロードURLを指定して、画面にバーコード画像を表示します。

  1. Salesforce Classicの場合、「設定 > ビルド > 開発 > Visualforce ページ」を開く。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > カスタムコード > Visualforce ページ」を開く。
  2. 後述の「ShowBarcodeStoredInSalesforceFiles.vfp」を貼り付ける。

    <apex:page controller="SaveBarcodeController">       
    <script src="/soap/ajax/29.0/connection.js" type="text/javascript"></script>
    <script src="/soap/ajax/29.0/apex.js" type="text/javascript"></script>
    <script type="text/javascript">
        sforce.connection.sessionId = "{!$Api.Session_ID}";
        sforce.apex.execute("gcbc.GcBarcodeGlobalAccessTokenGenerator", "UpdateAccessToken", {}, {
            onSuccess: function(){
                var tokenString = "{!$Setup.gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c}";
                let handleResult = function(result, event) {
                    if (event.status) {
                        var pngUrl = result;
                        var image = document.getElementById("barcodeImage");
                        image.src = pngUrl;
                    } else if (event.type === 'exception') {
                        console.log(event);
                    } else {
                        console.log(event);
                    }              
                }
                Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.SaveBarcodeController.saveBarcodeToSalesforceFiles}',tokenString, handleResult, {escape: false});               
            },
            onFailure: function(error) {alert(error);}
        });
    </script>
    <img id="barcodeImage" width="300" height="300" />
    </apex:page>
    
  3. Visualforceページの「Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能」をチェックをオンにする。

  4. 「保存」ボタンをクリックする。

Salesforceアプリから表示できるように、タブをナビゲーションメニューに構成する。

Salesforce Classicの場合:

  1. 「設定 > ビルド > 作成 > タブ」でVisualforceタブを追加する。
  2. 「設定 > 管理 > モバイル管理 > Salesforce ナビゲーション」で、Salesforceアプリのナビゲーションメニューにタブを追加する。

Lightning Experienceの場合:

  1. 歯車アイコンをクリックした後「設定 > プラットフォームツール > ユーザインターフェース > タブ」でVisualforceタブを追加する。
  2. 「設定 > プラットフォームツール > アプリケーション > モバイルアプリケーション > Salesforce > Salesforce ナビゲーション」で、Salesforceアプリのナビゲーションメニューにタブを追加する。

動作を確認します。

次の手順で、このページに表示されているQRコードを読み取れるか確認してください。なお、このQRコードはUTF-8でエンコードされています。

  1. スマートフォンでSalesforceアプリを実行する。
  2. Visualforceページを開発しているSalesforce組織にログインする。
  3. Salesforceアプリのナビゲーションメニューから追加したタブをタップする。
  4. 画面にバーコード画像が表示されることを確認する。
  5. Salesforceアプリのナビゲーションメニューから「すべての項目 > ファイル > 自分が所有者 」をタップし、Salesforce Filesに画像が保存されていることを確認する。
Copyright © 2020 GrapeCity inc. All rights reserved.