Salesforce Filesに保存する

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

    public void updateToken(){
        gcbc.GcBarcodeGlobalAccessTokenGenerator.UpdateAccessToken();
    }
    
    @RemoteAction
    public static String saveBarcodeToSalesforceFiles(){
        String currentUserId = UserInfo.getUserId();
        String token = '';
        List<gcbc__GcBarcodeSetting__c> currentUserSettings =[Select SetupOwnerId, gcbc__AccessToken__c From gcbc__GcBarcodeSetting__c Where SetupOwnerId=:currentUserId];
        gcbc__GcBarcodeSetting__c currentUserSetting = null;
        if (currentUserSettings.size() > 0){
            currentUserSetting = currentUserSettings.get(0);
            token = currentUserSetting.gcbc__AccessToken__c;
        } 
        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ページ「ShowBarcodeStoredInSalesforceFiles.vfp」を作成します。

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

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

    <apex:page controller="SaveBarcodeController" action="{!updateToken}">
    <script src="/soap/ajax/29.0/apex.js" type="text/javascript"></script>
    <script type="text/javascript">
        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}', handleResult, {escape: false});
    </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 © 2023 MESCIUS inc. All rights reserved.