きーんくん ブログ

Salesforceからコールアウトを実行して、外部サービスを受信する。

GETの例

Http http = new Http();
HttpRequest request = new HttpRequest();
request.setEndpoint('https://th-apex-http-callout.herokuapp.com/animals');
request.setMethod('GET');
HttpResponse response = http.send(request);
// If the request is successful, parse the JSON response.
if (response.getStatusCode() == 200) {
    // Deserialize the JSON string into collections of primitive data types.
    Map<String, Object> results = (Map<String, Object>) JSON.deserializeUntyped(response.getBody());
    // Cast the values in the 'animals' key as a list
    List<Object> animals = (List<Object>) results.get('animals');
    System.debug('Received the following animals:');
    for (Object animal: animals) {
        System.debug(animal);
    }
}

VisualforceからCSV出力することについて共有します。

１．Visualforce作成する。

Visualforceページ名　：　VFTab

<apex:page contentType="text/csv;charset=Shift_JIS;#fileName.csv" standardController="Contact" recordSetVar="contacts">Id,Name
    <apex:repeat value="{!contacts}" var="con">
{!con.Id},{!con.Name}
    </apex:repeat>
</apex:page>

説明

①　text/csv

CSV出力

②　charset

Excelで開くためにシフトJISを指定

③　#fileName.csv

ファイル名指定

④　Id,Name

ヘッダ部

⑤　{!con.Id},{!con.Name}

データ部

Salesforceはデフォルトの文字コードがUTF-8である。

２．Visualforceタブ作成、手順１．Visualforceページを設定する。

Visualforceタブ名：VFTab

３．動作確認するする。

手順２．で作成じたタブ「VFTab」を押下する。

「filename.csv」ファイルがダウンロードされることを確認する。

ファイル中身は以下のようです。

Id	Name
0030K00001p3ReGQAU	Barr Tim
0030K00001p3ReHQAU	Bond John
0030K00001p3ReJQAU	Boyle Lauren
0030K00001p3ReLQAU	Davis Josh
0030K00001p3ReQQAU	D'Cruz Liz
0030K00001rMwdWQAS	ddd
0030K00001p3ReCQAU	Forbes Sean
0030K00001p3ReRQAU	Frank Edna
0030K00001p3ReBQAU	Gonzalez Rose
0030K00001p3ReSQAU	Green Avi
0030K00001p3ReMQAU	Grey Jane
0030K00001p3ReOQAU	James Ashley
0030K00001rMylnQAC	ｊｊｊ
0030K00001p3ReKQAU	Levy Babara
0030K00001p3ReUQAU	Llorrac Jake
0030K00001p3ReTQAU	Nedaerk Siddartha
0030K00001p3ReIQAU	Pavlova Stella
0030K00001p3RePQAU	Ripley Tom
0030K00001p3ReDQAU	Rogers Jack
0030K00001p3ReNQAU	Song Arthur

開発環境としてVSCodeのExtensionを用いることについて共有します。

1. Salesforce CLIをインストール

sfdx plugins --core

２．VS Codeに拡張機能のインストール

https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode

３．ローカルにプロジェクトを作成

コマンドパレットを開き(Widnowsの場合：Ctrl+Shift+P　/　Macのばあい：Cmd+Shift+P)、SFDX: Create Project with Manifestを選択し、プロジェクト名入力しEnterする。

保存場所を選択する。

例えば、Projectというフォルダ名を指定すると、指定したProjectフォルダの下に、入力したプロジェクト名のフォルダに新たに作成されます。

作成したProjectの下に以下のフォルダ、ファイルが作成されます。
.sfdx
.vscode
config
force-app
manifest
.forceignore
.gitignore
.prettierignore
.prettierrc
README.md
sfdx-project.json

４．組織に接続

表示> コマンドパレットから、SFDX: Authorize an Orgを選択、組織の種類（Sandbox/Production）を選択して、プロジェクト名称を入力する。

ブラウザが起動し、その組織にログインする。

アクセスを許可しますか? が表示される、「許可」ボタン押下する。

VSCodeで以下のように出力されれば接続できています。

Successfully authorized xxxx@xxx.xxx with org ID 00Dxxxxxxxxxxxxxxx
You may now close the browser

５．メタデータの取得とデプロイ

force-appのエクスプローラで右クリックするとSFDX: Retrieve Source from OrgとSFDX: Deploy Source to Orgが利用できる。
特定のフォルダやファイルに対してこのコマンドを選択すると、そのフォルダやファイルに対してのみ取得・デプロイされる。

６．ファイル保存時の自動デプロイを有効化する

.vscode/settings.jsonに"salesforcedx-vscode-core.push-or-deploy-on-save.enabled": trueを追加し、VS Codeを再起動する。

作成したLightningコンポーネントを削除する手順を共有します。

１．開発コンソル開く

２．コンポーネントコントローラ開いて、FileメニューでDeleteする。

３．コンポーネントヘルパー開いて、FileメニューでDeleteする。

４．コンポーネントCSS開いて、FileメニューでDeleteする。

５．コンポーネントを開いて、FileメニューでDeleteする。

Lightningアクションのレコード作成について共有します。

１．アクション作成

例えば、取引先の新規アクションボタン押下する。

アクション種別　：　レコードを作成

対象オブジェクト　：　取引先責任者

表示ラベル　：　取引先責任者作成

名前　：　ContactCreate

保存ボタン押下する。

２．定義済み項目設定

アクションの定義済み項目セクションの新規ボタン押下する。

３．レイアウトを編集する。

配置する。

４．アクションを配置する。

取引先　＞　ページアウト

５．動作確認する。

Lightningコンポーネントのヘルパーについて共有します。

コンポーネント

<!-- 手順6 -->
<aura:component controller="LeadController" implements="force:appHostable">
<!--
<aura:component implements="force:appHostable">
-->
    <!-- 手順2 -->
	<aura:attribute name="target" type="String" default="world"/>
    <!-- 手順3 -->
    <aura:attribute name="switch" type="Boolean" default="false" />
    
    <!-- 手順１ -->
    <h1>Hello, Lightning Component!!</h1>
    
    <!-- 手順2 -->
    <h1>Hello, {!v.target}!</h1>
    
    <!-- 手順3 -->
    <h1>ボタンクリックでON/OFF</h1>

    <!-- 手順3 -->
    <aura:If isTrue="{!v.switch}">
        <p>ON</p>
        <aura:set attribute="else">
            <p>OFF</p>
        </aura:set>
    </aura:If>
    
    <!-- 手順3 -->
    <ui:button label="{!v.switch ? 'OFFにする' : 'ONにする' }" press="{!c.toggle}"/>


    <!-- 手順4 -->
    <ui:inputText aura:id="input" label="名前" value=""/>
    <ui:outputText aura:id="output" value=""/><br/>
    
    <ui:button aura:id="submit" label="設定" press="{!c.set}"/>
 
     <!-- 手順5 -->
    <div class="white">白</div>
    <h3>黒</h3>
    <ul>
        <li class="red">赤</li>
        <li class="blue">青</li>
        <li class="green">緑</li>
    </ul>  
    
    <!-- 手順6 -->
    <!-- Leadオブジェクトの配列を属性にもつ -->
    <aura:attribute name="leads" type="Lead[]"/>

    <!-- 表示ライフサイクル中に発火されるinitイベント購読 -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <h3>リード表示</h3>

    <ul>
        <aura:iteration items="{!v.leads}" var="lead">
            <li>
                <p>
                    {!lead.Company}<br/>
                    {!lead.LastName}
                </p>
            </li>
        </aura:iteration>
    </ul>  

    <!-- 手順７ -->
    <h3>リード登録</h3>

    <aura:attribute name="lead" type="Lead" default="{ 'sobjectType': 'Lead', 'LastName': '', 'Company': '' }"/>

    <form>
        <ui:inputText aura:id="company" label="会社名" value="{!v.lead.Company}" required="true"/>
        <ui:inputText aura:id="lastname" label="姓" value="{!v.lead.LastName}" required="true"/>
        <ui:button label="登録" press="{!c.createLead}"/>
    </form>

    <!-- 手順8 -->
    <h3>リード表示</h3>
    <ui:button label="更新" press="{!c.refresh}"/>
    <ul>
        <aura:iteration items="{!v.leads}" var="lead">
            <li>
                <p>
                    {!lead.Company}<br/>
                    {!lead.LastName}
                </p>
            </li>
        </aura:iteration>
    </ul>

</aura:component>

コンポーネントコントローラ

({
    toggle: function(component, event, helper) {
   	//-- 手順3 --
    	var status = component.get("v.switch");
        component.set("v.switch", !status);

    },
    
      set: function(component, event, helper) {
	　　	//-- 手順4 --

        // 入力コンポーネントから属性値取得
        var inputValue = component.find("input").get("v.value");

        // 入力コンポーネントへ属性値セット
        var output = component.find("output");
        output.set("v.value", inputValue);


        // コンポーネントの属性値取得(仕組みを把握するためのコードでこの変数"target"は利用しない)
        var target = component.get("v.target");

        // コンポーネントの属性値セット
        component.set("v.target", inputValue);
    }, 
    
    
    doInit: function(component, event, helper) {
    	//-- 手順6 --
	    // initイベント処理
        // Apexコントローラのアクションを取得
        var action = component.get("c.findAll");
        // Apexコントローラ処理後のコールバック設定
        action.setCallback(this, function(a){
            component.set("v.leads", a.getReturnValue());
        });
        // 実行アクションキューに追加
        $A.enqueueAction(action);
    },
    
        createLead: function(component, event, helper) {
        //-- 手順7 --

        var isValid = true;
        var company = component.find("company");
        var lastName = component.find("lastname");


        // エラークリア
        //company.setValid("v.value", true);
        //lastName.setValid("v.value", true);

        if ($A.util.isEmpty(company.get("v.value"))) {
            // エラーセット
            //company.setValid("v.value", false);
            //company.addErrors("v.value", [{message:"会社名を入力してください。"}]);
            isValid = false;
        }
        if ($A.util.isEmpty(lastName.get("v.value"))) {
            // エラーセット
            //lastName.setValid("v.value", false);
            //lastName.addErrors("v.value", [{message:"姓を入力してください。"}]);
            isValid = false;
        }


        if (isValid) {
            var lead = component.get("v.lead");
            var action = component.get("c.create");
            action.setParams({
                "ld": lead
            });

            action.setCallback(this, function(a){
                // Salesforce1イベント発火（トーストメッセージ表示）
                /*
                var toastEvent = $A.get("e.force:showToast");
                if (action.getState() === 'SUCCESS') {
                    toastEvent.setParams({
                        "title": "Success",
                        "message": "正常に登録が完了しました"
                    });
                    company.set("v.value", "");
                    lastName.set("v.value", "");
                } else {
                    toastEvent.setParams({
                        "title": "Error",
                        "message": "エラーが発生しました"
                    });
                }
                toastEvent.fire();
                */
            });

            $A.enqueueAction(action);
        }
    },
    
    doRefreshInit: function(component, event, helper) {
        helper.getLeads(component);
    },
    refresh: function(component, event, helper) {
        helper.getLeads(component);
    },
})

ヘルバー

({
    getLeads: function(component) {
    var action = component.get("c.findAll");
    action.setCallback(this, function(a){
        component.set("v.leads", a.getReturnValue());
    });
    $A.enqueueAction(action);
}
})

動作確認する。

https://[ yourdomain ]/c/CreateComponentAppliction.app
例えば、
https://testdaeheuitest-test11-dev-ed.lightning.force.com/c/CreateComponentAppliction.app

結果

エラーあし