Lighting componentワークブック（s1コンタクトリストコンポーネント）

Lightning Component ハンズオンS1アプリ用コンタクトリストコンポーネント

株式会社セールスフォース・ドットコム

S1用コンタクトリストコンポーネント

コンタクトリスト表示コンタクト新規画面

コンタクト編集画面

S1用コンタクトリストコンポーネント

コンタクト詳細画面

関連ケースリスト表示

ContactController Apex作成

1

3

2

次ページのソースコードをコピー &ペーストして下さい

ソース

public with sharing class ContactController {@AuraEnabled public static List<Contact> getContacts() { List<Contact> contacts = [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact];

//Add isAccessible() check return contacts; } @AuraEnabled // Retrieve all primary contacts public static List<Contact> getPrimary() { List<Contact> primaryContacts = [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact WHERE Level__c = 'Primary'];

//Add isAccessible() check return primaryContacts; }}

1

3

2

4


contactList Lightningコンポーネント作成

ソース<aura:component> <aura:attribute name="contact" type="Contact"/>  <div class="{!v.contact.Level__c == 'Primary' ? 'row primary' : 'row '}" >

 <div class="col-sm-4"> <ui:outputText value="{!v.contact.Name}" click="{!c.gotoRecord}"/> </div> <div class="col-sm-4"> <ui:outputEmail value="{!v.contact.Email}"/> <ui:outputPhone value="{!v.contact.Phone}"/>

 <div onclick="{!c.editRecord}"> <img src="/img/icon/custom51_100/pencil16.png" alt="Edit Contact" title="Edit Contact" /> </div> </div> <div class="col-sm-4"> <ui:outputTextArea aura:id="address" value="{!v.contact.MailingStreet}" click="{!c.navigate}"/> </div>

 <ui:button label="View Cases" press="{!c.relatedList}"/> </div></aura:component>

contactList CSS 作成

1

2


3

ソース

.THIS.primary{ background: #4ECDC4 !important;}

.THIS .uiOutputText { width: 25%; float: left; font-weight: bold;}

.THIS .uiOutputPhone { color: #2574A9;}

.THIS .uiOutputTextArea { float:clear;}

.THIS .uiOutputEmail { float: right;}

.THIS .uiButton { margin-top: 20px !important;}

contacts Lightningコンポーネント作成

1

2

contacts Lightningコンポーネント作成


1

2

ソース

<aura:component controller="ContactController" implements="force:appHostable">  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

 <aura:handler event="aura:waiting" action="{!c.showSpinner}"/> <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>

 <aura:attribute name="contacts" type="Contact[]"/>

 <ui:inputSelect aura:id="selection" change="{!c.select}"> <ui:inputSelectOption text="All Contacts" label="All Contacts"/> <ui:inputSelectOption text="All Primary" label="All Primary"/> </ui:inputSelect> <div class="icons"> <img src="/img/icon/custom51_100/chalkboard16.png" alt="Create New" title="Create New" onclick="{!c.createRecord}"/> </div> <div><center><ui:spinner aura:id="spinner"/></center></div>  <aura:iteration var="contact" items="{!v.contacts}">  <c:contactList contact="{!contact}"/> </aura:iteration></aura:component>

13

2


contacts コントローラー作成

ソース

({ doInit : function(component, event, helper) { // Retrieve contacts during component initialization helper.getContacts(component); },

showSpinner : function (component, event, helper) { var spinner = component.find('spinner'); var evt = spinner.get("e.toggle"); evt.setParams({ isVisible : true }); evt.fire(); }, hideSpinner : function (component, event, helper) { var spinner = component.find('spinner'); var evt = spinner.get("e.toggle"); evt.setParams({ isVisible : false }); evt.fire(); },//Delimiter for future code})

contacts ヘルパー作成

1

2

3


ソース ({ getContacts : function(cmp) { // Load all contact data var action = cmp.get("c.getContacts"); var self = this; action.setCallback(this, function(response) { var state = response.getState(); if (cmp.isValid() && state === "SUCCESS") { cmp.set("v.contacts", response.getReturnValue()); }

// Display toast message to indicate load status var toastEvent = $A.get("e.force:showToast"); if (state === 'SUCCESS'){ toastEvent.setParams({ "title": "Success!", "message": " Your contacts have been loaded successfully." }); } else { toastEvent.setParams({ "title": "Error!", "message": " Something has gone wrong." }); } toastEvent.fire(); }); $A.enqueueAction(action); }})

contacts CSS作成

3


2

ソース

.THIS.row { background: #fff; max-width:90%; border-bottom: 2px solid #f0f1f2; padding: 10px; margin-left: 2%; margin-bottom: 10px; min-height: 70px; border-radius: 4px;}

.THIS.uiInputSelect { width: 80%; padding-left: 10px; min-height: 28px; margin-bottom: 20px; margin-left: 20px; margin-top: 40px;}

.THIS img { float: right; padding-right:5%; padding-top: 20px;}

.THIS.icons { height:60px;}

Salesforce1への統合

1

3

2

4

タブの追加

1 2

画面確認

1

2

1

イベントの追加

3

2

4


5

ソース({ gotoRecord : function(component, event, helper) { // Fire the event to navigate to the contact record var sObjectEvent = $A.get("e.force:navigateToSObject"); sObjectEvent.setParams({ "recordId": component.get("v.contact.Id"), "slideDevName": 'related' }) sObjectEvent.fire(); }, editRecord : function(component, event, helper) { // Fire the event to navigate to the edit contact page var editRecordEvent = $A.get("e.force:editRecord"); editRecordEvent.setParams({ "recordId": component.get("v.contact.Id") }); editRecordEvent.fire(); }, navigate : function(component, event, helper) { // Navigate to an external URL var address = component.find("address").get("v.value"); var urlEvent = $A.get("e.force:navigateToURL"); urlEvent.setParams({ "url": 'https://www.google.com/maps/place/' + address }); urlEvent.fire(); },

relatedList : function (component, event, helper) { // Navigate to the related cases var relatedListEvent = $A.get("e.force:navigateToRelatedList"); relatedListEvent.setParams({ "relatedListId": "Cases", "parentRecordId": component.get("v.contact.Id") }); relatedListEvent.fire(); }})

イベントの追加

1

3

2


4

ソースcreateRecord : function (component, event, helper) { // Open the create record page var createRecordEvent = $A.get("e.force:createRecord"); createRecordEvent.setParams({ "entityApiName": "Contact" }); createRecordEvent.fire();},

select : function(component, event, helper){ // Get the selected value of the ui:inputSelect component var selectCmp = component.find("selection"); var selectVal = selectCmp.get("v.value"); // Display all primary contacts or all contacts if (selectVal==="All Primary"){ var action = component.get("c.getPrimary"); action.setCallback(this, function(response){ var state = response.getState(); if (component.isValid() && state === "SUCCESS") { component.set("v.contacts", response.getReturnValue()); } }); $A.enqueueAction(action); } else { // Return all contacts helper.getContacts(component); }}

Lighting componentワークブック（s1コンタクトリストコンポーネント）

Engineering

Transcript of Lighting componentワークブック（s1コンタクトリストコンポーネント）