5月 2019 - きーんくんブログ

[Salesforce]Lightningコンポーネント削除

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

１．開発コンソル開く

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

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

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

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

[Salesforce]Lightningアクションのレコード作成

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

１．アクション作成

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

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

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

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

名前　：　ContactCreate

保存ボタン押下する。

２．定義済み項目設定

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

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

配置する。

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

取引先　＞　ページアウト

５．動作確認する。

[WordPress]プラグインSearch Everything

WordPressブログサイトの中で検索するプラグインとしてSearch Everythingがよくつかわれているものの一つなので、共有する。

１．インストール、有効化

WordPress　＞　ダッシュボード　＞　プラグイン　＞　新規　＞　検索欄に、「Search Everything」入力して検索する。

インストールして、有効化する。

２．配置されていることを確認する。

ブログ画面右上の配置される。

[Salesforce]Lightning コンポーネント‐手順８：ヘルパー

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

結果

エラーあし

[Salesforce]Lightning コンポーネント‐手順７：データ登録

データ登録内容を共有します。

Apexコントローラ

public class LeadController {

	//手順６
    @AuraEnabled
    public static List<Lead> findAll() {
        return [SELECT Id, LastName, Company FROM Lead ORDER BY LastModifiedDate DESC LIMIT 50];
    }
     
    //手順７ 
    @AuraEnabled
    public static Lead create(Lead ld) {
        insert ld;
        return ld;
    }
}

コンポーネント

<!-- 手順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>


</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);
        }
    }
})

動作を確認する。

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

結果

登録される。

[Salesforce]Lightning コンポーネント‐手順６：データの一覧表示

Lightningコンポーネントのデータのリスト表示を共有します。

Apexコントローラ

public class LeadController {

    @AuraEnabled
    public static List<Lead> findAll() {
        return [SELECT Id, LastName, Company FROM Lead ORDER BY LastModifiedDate DESC LIMIT 50];
    }
        
}

コンポーネント

<!-- 手順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>  
</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);
    }
})

動作確認する。

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

結果

[Salesforce]Lightning コンポーネント‐手順５：CSS

LightningコンポーネントでCSSについて共有します。

<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>    
</aura:component>

CSS

.THIS {
	background-color: white;
}

.THIS .white {
    background-color: white;
}

.THIS .red {
    background-color: red;
}

.THIS .blue {
    background-color: blue;
}

.THIS .green {
    background-color: green;
}

動作確認する。

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

結果

[Salesforce]Lightning コンポーネント‐手順４：入力値表示

手順３の続きとして、入力値表示を共有します。

コンポーネント

<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}"/>
    
</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);
    }
})

動作確認する。

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

[Salesforce]Lightning コンポーネント‐手順３：コンポーネントコントローラ

コンポーネント

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

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

コントローラ

({
    toggle: function(component, event, helper) {
        var status = component.get("v.switch");
        component.set("v.switch", !status);
    }
})

動作確認する。

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

初期画面は以下のように表示される。

Hello, Lightning Component!!
Hello, world!
ボタンクリックでON/OFF
OFF
「ONにする」ボタン

「ONにする」ボタン押下時以下のように表示される。

Hello, Lightning Component!!
Hello, world!
ボタンクリックでON/OFF
OFF
「OFFにする」ボタン

[Salesforce]Lightning コンポーネント‐手順２：コンポーネント属性

前回手順１の続きとして、Lightningコンポーネント属性を共有します。

属性を追加する。

<aura:component implements="force:appHostable">
	<aura:attribute name="target" type="String" default="world"/>
    <h1>Hello, Lightning Component!!</h1>
    <h1>Hello, {!v.target}!</h1>
</aura:component>

説明：


	<aura:attribute name="target" type="String" default="world"/>

属性

<h1>Hello, {!v.target}!</h1>

属性と関連されている。

動作確認する。

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

結果

Hello, Lightning Component!!
Hello, world!