[Salesforce]Lightning ExperienceのLightningアクション作成 : 取引先詳細画面で取引先責任者レコード作成する

1.Lightning Component作成

quickcontact.cmp

<aura:component controller="QuickContactController" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:lightningQuickAction">

    <aura:attribute name="account" type="Account" />
    <aura:attribute name="newContact" type="Contact"
        default="{ 'sobjectType': 'Contact' }" /> <!-- default to empty record -->
    <aura:attribute name="hasErrors" type="Boolean"
        description="Indicate if there were failures when validating the contact." />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <!-- Display a header with details about the account -->
    <div class="slds-page-header" role="banner">
        <p class="slds-text-heading--label">{!v.account.Name}</p>
        <h1 class="slds-page-header__title slds-m-right--small
            slds-truncate slds-align-left">Create New Contact</h1>
    </div>

    <!-- Display form validation errors, if any -->
    <aura:if isTrue="{!v.hasErrors}">
        <div class="recordSaveError">
            <ui:message title="Error" severity="error" closable="true">
                The new contact can't be saved because it's not valid.
                Please review and correct the errors in the form.
            </ui:message>
        </div>
    </aura:if>

    <!-- Display the new contact form -->
    <div class="slds-form--stacked">

        <div class="slds-form-element">
            <label class="slds-form-element__label" 
                for="contactFirstName">First Name: </label>
            <div class="slds-form-element__control">
              <ui:inputText class="slds-input" aura:id="contactFirstName"
                value="{!v.newContact.FirstName}" required="true"/>
            </div>
        </div>
        <div class="slds-form-element">
            <label class="slds-form-element__label" 
                for="contactLastName">Last Name: </label>
            <div class="slds-form-element__control">
              <ui:inputText class="slds-input" aura:id="contactLastName"
                value="{!v.newContact.LastName}" required="true"/>
            </div>
        </div>

        <div class="slds-form-element">
            <label class="slds-form-element__label" for="contactTitle">Title: </label>
            <div class="slds-form-element__control">
              <ui:inputText class="slds-input" aura:id="contactTitle"
                value="{!v.newContact.Title}" />
            </div>
        </div>

        <div class="slds-form-element">
            <label class="slds-form-element__label" 
                for="contactPhone">Phone Number: </label>
            <div class="slds-form-element__control">
              <ui:inputPhone class="slds-input" aura:id="contactPhone"
                value="{!v.newContact.Phone}" required="true"/>
            </div>
        </div>
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="contactEmail">Email: </label>
            <div class="slds-form-element__control">
              <ui:inputEmail class="slds-input" aura:id="contactEmail"
                value="{!v.newContact.Email}" />
            </div>
        </div>

        <div class="slds-form-element">
            <ui:button label="Cancel" press="{!c.handleCancel}"
                class="slds-button slds-button--neutral" />
            <ui:button label="Save Contact" press="{!c.handleSaveContact}"
                class="slds-button slds-button--brand" />
        </div>

    </div>

</aura:component>

2.Lightning Controller作成

quickcontactController.js

({
    doInit : function(component, event, helper) {

        // Prepare the action to load account record
        var action = component.get("c.getAccount");
        action.setParams({"accountId": component.get("v.recordId")});

        // Configure response handler
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS") {
                component.set("v.account", response.getReturnValue());
            } else {
                console.log('Problem getting account, response state: ' + state);
            }
        });
        $A.enqueueAction(action);
    },

    handleSaveContact: function(component, event, helper) {
        if(helper.validateContactForm(component)) {
            component.set("v.hasErrors", false);

            // Prepare the action to create the new contact
            var saveContactAction = component.get("c.saveContactWithAccount");
            saveContactAction.setParams({
                "contact": component.get("v.newContact"),
                "accountId": component.get("v.recordId")
            });

            // Configure the response handler for the action
            saveContactAction.setCallback(this, function(response) {
                var state = response.getState();
                if(component.isValid() && state === "SUCCESS") {

                    // Prepare a toast UI message
                    var resultsToast = $A.get("e.force:showToast");
                    resultsToast.setParams({
                        "title": "Contact Saved",
                        "message": "The new contact was created."
                    });

                    // Update the UI: close panel, show toast, refresh account page
                    $A.get("e.force:closeQuickAction").fire();
                    resultsToast.fire();
                    $A.get("e.force:refreshView").fire();
                }
                else if (state === "ERROR") {
                    console.log('Problem saving contact, response state: ' + state);
                }
                else {
                    console.log('Unknown problem, response state: ' + state);
                }
            });

            // Send the request to create the new contact
            $A.enqueueAction(saveContactAction);
        }
        else {
            // New contact form failed validation, show a message to review errors
            component.set("v.hasErrors", true);
        }
    },

	handleCancel: function(component, event, helper) {
	    $A.get("e.force:closeQuickAction").fire();
    }
})

3.Lightning Helper作成

quickcontactHelper.js

({
	validateContactForm: function(component) {
        var validContact = true;

        // First and Last Name are required
        var firstNameField = component.find("contactFirstName");
        if($A.util.isEmpty(firstNameField.get("v.value"))) {
            validContact = false;
            firstNameField.set("v.errors", [{message:"First name can't be blank"}]);
        }
        else {
            firstNameField.set("v.errors", null);
        }
        var lastNameField = component.find("contactLastName");
        if($A.util.isEmpty(lastNameField.get("v.value"))) {
            validContact = false;
            lastNameField.set("v.errors", [{message:"Last name can't be blank"}]);
        }
        else {
            lastNameField.set("v.errors", null);
        }

        // Verify we have an account to attach it to
        var account = component.get("v.account");
        if($A.util.isEmpty(account)) {
            validContact = false;
            console.log("Quick action context doesn't have a valid account.");
        }

        // TODO: (Maybe) Validate email and phone number

        return(validContact);
	}
})

4.取引先でアクション追加

オブジェクト名 :  取引先

アクション種別 :  Lightning コンポーネント

Lightning コンポーネント : c. quickcontact

高さ : 250ピクセル

表示ラベル : Quick Contact

名前 : Quick_Contact

5.取引先のページレイアウトにLightningアクションを追加

6.Lightning画面にて取引先の詳細画面で、「Quick Contact」アクション押下する。

投稿者: kinkun

保有資格 Salesforce Certified Platform App Builder T Salesforce Certified Platform Developer I Salesforce Certified Platform Developer II Salesforce Certified Administrator

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です