Регистрация  |  Вход

Создание контакта в модальном окне с указанием имени аккаунта

Необходимо в модальном окошке создать контакт с указанием полей FirstName, LastName, Email и самое главное Account Name. С пустым полем Account Name контакт создается, а вот при его заполнении никак. Вышел из ситуации, создав в методе вручную аккаунт и присвоив ему имя Last+First контакта. Но это наверное не есть гуд, и думаю что можно вписать имя, нажать Save и все будет ок. Подозреваю, что изначально не c того начал, а именно <aura:attribute name="conForm" type="Contact" default="{'sobjectType' : 'Contact'}"/>. и
<lightning:input label="Account Name" name="myname" value="{!v.conForm.Account.Name}"/> не дружат.Наткнулся еще на такую штуку http://sfdcmonkey.com/2017/07/17/re-usable-custom-lookup/ .Вся проблема в lookup. Блин, ну уж очень все громоздко. Кто что скажет?

//Контроллер
public with sharing class ContactListController {

@AuraEnabled
public static List<Contact> getConlist() {
return [SELECT Id, Name, Email, Contact_Level__c, Account.Name, Owner.Name, CreatedBy.Name, CreatedDate FROM Contact ];
}

@Auraenabled
public static List<Contact> delteContactById(String conid)
{
System.debug('In controller delteContactById method..');
Contact delContact=[Select Id from Contact WHERE Id=:conid];
delete delContact;
return [SELECT Id, Name, Email, Contact_Level__c, Account.Name, Owner.Name, CreatedBy.Name, CreatedDate FROM Contact];
}


@AuraEnabled
public static List <Contact> searchContact(String searchKeyWord) {
String searchKey = searchKeyWord + '%';

return [SELECT Id, Name, Email, Contact_Level__c, Account.Name, Owner.Name, CreatedBy.Name, CreatedDate FROM Contact
where Name LIKE: searchKey LIMIT 500];
}

@AuraEnabled
public static void saveDetails (Contact regForm1){
account acc=new account();

acc.Name=regForm1.FirstName +' ' +regForm1.LastName;
insert acc;
regForm1.AccountId=acc.Id;
INSERT regForm1;
}

}

///

//Компонента

<aura:component controller="ContactListController"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="force:refreshView" action="{!c.doInit}" />
<aura:handler event="force:navigateToSObject" action="{!c.doEdit}"/>

<aura:attribute name="pMasterWrapperlist" type="Contact[]"/>
<aura:attribute name="pWrapperlist" type="List"/>
<aura:attribute name="pageSize" type="Integer" default="10"/>
<aura:attribute name="masterlistSize" type="Integer"/>
<aura:attribute name="startPosn" type="Integer" default="0"/>
<aura:attribute name="endPosn" type="Integer"/>
<aura:attribute type="String" name="sortField" />
<aura:attribute name="isAsc" type="boolean" default="true" description="boolean flag for pass sorting condition to apex class"/>
<aura:attribute name="sortAsc" type="boolean" />
<aura:attribute name="name" type="boolean" default="true"/>
<aura:attribute name="email" type="boolean" default="true"/>
<aura:attribute name="contactlevel" type="boolean" default="true"/>
<aura:attribute name="accountName" type="boolean" default="true"/>
<aura:attribute name="owner" type="boolean" default="true"/>
<aura:attribute name="createdBy" type="boolean" default="true"/>
<aura:attribute name="createdDate" type="boolean" default="true"/>

<aura:attribute name="conForm" type="Contact" default="{'sobjectType' : 'Contact'}"/>



<aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>
<aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
<aura:attribute name="TotalNumberOfRecord" type="integer" default="0" description="use for display Number of records"/>

<lightning:spinner variant="brand" size="large" aura:id="Id_spinner" class="slds-hide" />

<!-- SEARCH INPUT AND SEARCH BUTTON-->

<lightning:layout class="slds-page-header slds-page-header--object-home">
<lightning:layoutItem>
<lightning:icon iconName="standard:event" alternativeText="Contact Manager" />
</lightning:layoutItem>

<lightning:layoutItem padding="horizontal-small">
<div class="page-section page-header">
<h2 class="slds-page-header__title slds-hyphenate">Contact Manager</h2>
</div>
</lightning:layoutItem>
</lightning:layout>

<lightning:layout>
<lightning:layoutItem size="3" padding="around-small" >
<lightning:input value="{!v.searchKeyword}"
required="true"
placeholder="search Contacts.."
aura:id="searchField"
label="Contact Name"/>
<lightning:badge label="{!v.TotalNumberOfRecord}" />
<lightning:button onclick="{!c.Search}"
variant="brand"
label="Search"
iconName="utility:search"/>
<lightning:button label="New Contact"
iconName="utility:new_window"
iconPosition="left"
variant="brand"
onclick="{!c.newPopup}"
/>
</lightning:layoutItem>
</lightning:layout>

<aura:if isTrue="{!v.Message}">
<div class="slds-notify_container slds-is-relative">
<div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
<div class="slds-notify__content">
<h2 class="slds-text-heading_small">No Records Found...</h2>
</div>
</div>
</div>
</aura:if>

<div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox1" class="slds-modal slds-modal_large">
<div class="slds-modal__container" style="width: 65%;">
<div class="slds-modal__header">
CONTACT
</div>

<div class="slds-modal__content slds-p-around--medium">
<div class="slds-p-left_xx-large slds-p-right_xx-large">
<div class="slds-page-header" style="padding-top: 9px; padding-bottom: 9px;, padding-right: 9px;, padding-left: 10px;">
<h3 style="font-size: 1rem;" title="">Contact information</h3>
</div>
</div>
<div class="slds-grid slds-p-top_medium">
<div class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
<lightning:input label=" First Name" name="myname" value="{!v.conForm.FirstName}"/>
</div>
<div class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
<lightning:input label="Last Name" name="myname" required="true" value="{!v.conForm.LastName}"/>
</div>
<div class="slds-size_3-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
<lightning:input label="Email" name="myname" required="true" value="{!v.conForm.Email}"/>
</div>
</div>
<div class="slds-grid slds-p-top_x-small">
<div class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >

<p class="title">Contact Level</p>
<ui:inputSelect class="slds-box slds-box_x-small" aura:id="InputSelectSingle" value="{!v.conForm.Contact_Level__c}">
<ui:inputSelectOption text="Primary"/>
<ui:inputSelectOption text="Secondary" value="true"/>
<ui:inputSelectOption text="Tertiary"/>
</ui:inputSelect>
</div>
<div class="slds-size_3-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
<lightning:input label="Account Name" name="myname" value="{!v.conForm.Account.Name}"/>
</div>
</div>
</div>
<div class="slds-modal__footer">
<lightning:button label="Save" onclick="{!c.saveModal}" />
<lightning:button label="close" onclick="{!c.closeNewModal}" />
</div>
</div>
</div>

<div>
<div style="padding-bottom:30px;">
<form class="slds-form--stacked">
<div class="slds-col--padded slds-p-top--large">

<table class="slds-table slds-table--bordered slds-table--fixed-layout slds-table--resizable-cols slds-max-medium-table--stacked-horizontal" role="grid">
<thead >
<tr class="slds-line-height--reset " style="line-height: 4;" >
<th class="slds-text-title--caps" scope="col" onclick="{!c.sortByName}">Name
<span> <aura:if isTrue="{!v.Name}"><lightning:icon iconName="utility:arrowup" size="xx-small" alternativeText="Indicates approval"/>
<aura:set attribute="else">
<lightning:icon iconName="utility:arrowdown" size="xx-small" alternativeText="Indicates approval"/>
</aura:set>
</aura:if>
</span>
</th>
<th class="slds-text-title--caps" scope="col" onclick="{!c.sortByEmail}">
<div class="slds-truncate" title="Email">Email
<span> <aura:if isTrue="{!v.email}"><lightning:icon iconName="utility:arrowup" size="xx-small" alternativeText="Indicates approval"/>
<aura:set attribute="else">
<lightning:icon iconName="utility:arrowdown" size="xx-small" alternativeText="Indicates approval"/>
</aura:set>
</aura:if>
</span></div>
</th>
<th class="slds-text-title--caps" scope="col" onclick="{!c.sortBycontactlevel}">
<div class="slds-truncate" title="contactlevel">Contact level
<span> <aura:if isTrue="{!v.contactlevel}"><lightning:icon iconName="utility:arrowup" size="xx-small" alternativeText="Indicates approval"/>
<aura:set attribute="else">
<lightning:icon iconName="utility:arrowdown" size="xx-small" alternativeText="Indicates approval"/>
</aura:set>
</aura:if>
</span></div>
</th>
<th class="slds-text-title--caps" scope="col" onclick="{!c.sortByAccountName}">
<div class="slds-truncate" title="accountName">Account Name
<span> <aura:if isTrue="{!v.accountName}"><lightning:icon iconName="utility:arrowup" size="xx-small" alternativeText="Indicates approval"/>
<aura:set attribute="else">
<lightning:icon iconName="utility:arrowdown" size="xx-small" alternativeText="Indicates approval"/>
</aura:set>
</aura:if>
</span></div>
<th class="slds-text-title--caps" scope="col" onclick="{!c.sortByOwner}">
<div class="slds-truncate" title="owner">Owner
<span> <aura:if isTrue="{!v.owner}"><lightning:icon iconName="utility:arrowup" size="xx-small" alternativeText="Indicates approval"/>
<aura:set attribute="else">
<lightning:icon iconName="utility:arrowdown" size="xx-small" alternativeText="Indicates approval"/>
</aura:set>
</aura:if>
</span></div>
</th>
<th class="slds-text-title--caps" scope="col" onclick="{!c.sortByCreatedBy}">
<div class="slds-truncate" title="owner">CreatedBy
<span> <aura:if isTrue="{!v.CreatedBy}"><lightning:icon iconName="utility:arrowup" size="xx-small" alternativeText="Indicates approval"/>
<aura:set attribute="else">
<lightning:icon iconName="utility:arrowdown" size="xx-small" alternativeText="Indicates approval"/>
</aura:set>
</aura:if>
</span></div>
</th>
<th class="slds-text-title--caps" scope="col" onclick="{!c.sortByCreatedDate}">
<div class="slds-truncate" title="owner">Created Date
<span> <aura:if isTrue="{!v.CreatedDate}"><lightning:icon iconName="utility:arrowup" size="xx-small" alternativeText="Indicates approval"/>
<aura:set attribute="else">
<lightning:icon iconName="utility:arrowdown" size="xx-small" alternativeText="Indicates approval"/>
</aura:set>
</aura:if>
</span></div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.pWrapperlist}" var="con">
<tr class="slds-hint-parent">
<th scope="row" class="slds-cell-edit" data-label="Name">
<div class="slds-truncate" title="Name">
<a href="javascript:void(0);" onclick="{!c.doView}">
<span class="slds-truncate" id="{!con.Id}">{!con.Name}</span>
</a>
</div>
</th>
<th scope="row" class="slds-cell-edit" data-label="Email">
<div class="slds-truncate" title="Email">{!con.Email}</div>
</th>
<th scope="row" class="slds-cell-edit" data-label="contactlevel">
<div class="slds-truncate" title="contactlevel">{!con.Contact_Level__c}</div>
</th>
<th scope="row" class="slds-cell-edit" data-label="Account Name">
<div class="slds-truncate" title="Account Name">
<a href="javascript:void(0);" onclick="{!c.doView}">
<span class="slds-truncate" id="{!con.Account.Id }">{!con.Account.Name}</span>
</a>
</div>
<th scope="row" class="slds-cell-edit" data-label="Contact Owner">
<div class="slds-truncate" title="Contact Owner">{!con.Owner.Name}</div>
</th>
<th scope="row" class="slds-cell-edit" data-label="CreatedBy">
<div class="slds-truncate" title="CreatedBy">{!con.CreatedBy.Name}</div>
</th>
<th scope="row" class="slds-cell-edit" data-label="CreatedDate">
<div class="slds-truncate" title="CreatedBy">{!con.CreatedDate}</div>
</th>
<th>
<button class="slds-button slds-button_destructive" type="button" onclick="{!c.delete}" id="{!con.Id}">Del</button>
</th>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</form>
</div>
<div class="slds-docked-form-footer" >
<div style="width:25%" class="hidePageSize">
<ui:inputSelect aura:id="recordSize" label="Display Record Per Page:" class="testDiv width30px" change="{!c.onSelectChange}">
<ui:inputSelectOption text="10" label="10" value="true"/>
<ui:inputSelectOption text="15" label="15"/>
<ui:inputSelectOption text="20" label="20"/>
</ui:inputSelect>
</div>
<lightning:button variant="neutral" label="First" disabled="{!v.startPosn == 0}"
onclick="{!c.First}" />
<lightning:button variant="neutral" label="Previous" disabled="{!v.startPosn == 0}"
onclick="{!c.previous}" />
<lightning:button variant="brand" label="Next" disabled="{!v.endPosn >= v.pMasterWrapperlist.length-1}"
onclick="{!c.next}" />
<lightning:button variant="brand" label="last" disabled="{!v.endPosn >= v.pMasterWrapperlist.length-1}"
onclick="{!c.Last}" />
</div>
</div>

</aura:component>

////////

// Контроллер Js

({
delete : function(component, event, helper) {
if(confirm('Are you sure?'))
helper.deleteContact(component, event);
},

newPopup : function(component, event, helper){
var cmpTarget = component.find('Modalbox1');
var cmpBack = component.find('Modalbackdrop');
$A.util.addClass(cmpTarget, 'slds-fade-in-open');
$A.util.addClass(cmpBack, 'slds-backdrop--open');
},
saveModal : function(component, event, helper){
var regForm = component.get("v.conForm");
var action = component.get("c.saveDetails");
action.setParams({regForm1 : regForm});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
$A.get('e.force:refreshView').fire();
var cmpTarget = component.find('Modalbox1');
var cmpBack = component.find('Modalbackdrop');
$A.util.removeClass(cmpBack,'slds-backdrop--open');
$A.util.removeClass(cmpTarget, 'slds-fade-in-open');

}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
}
else {
console.log(response.getReturnValue());
}
}
});
$A.enqueueAction(action);
},

closeNewModal : function(component, event, helper){
var cmpTarget = component.find('Modalbox1');
var cmpBack = component.find('Modalbackdrop');
$A.util.removeClass(cmpBack,'slds-backdrop--open');
$A.util.removeClass(cmpTarget, 'slds-fade-in-open');
},

Search: function(component, event, helper) {
var searchField = component.find('searchField');
var isValueMissing = searchField.get('v.validity').valueMissing;
// if value is missing show error message and focus on field
if(isValueMissing) {
searchField.showHelpMessageIfInvalid();
searchField.focus();
}else{
// else call helper function
helper.SearchHelper(component, event);
}
},

doInit:function(component,event,helper){
helper.getContacts(component);
},
next:function(component,event,helper){
helper.next(component);
},
previous:function(component,event,helper){
helper.previous(component);
},
sortByName: function(component, event, helper) {
helper.sortBy(component,helper, "Name");
var a=component.get("v.sortAsc");
component.set("v.Name",a);
},
sortBycontactlevel: function(component, event, helper) {
helper.sortBy(component,helper, "contactlevel");
var a=component.get("v.sortAsc");
component.set("v.contactlevel",a);
},
sortByEmail: function(component, event, helper) {
helper.sortBy(component,helper, "Email");
var a=component.get("v.sortAsc");
component.set("v.email",a);
},
sortByOwner: function(component, event, helper) {
helper.sortBy(component,helper, "owner");
var a=component.get("v.sortAsc");
component.set("v.owner",a);
},
sortByAccountName: function(component, event, helper) {
helper.sortBy(component,helper, "accountName");
var a=component.get("v.sortAsc");
component.set("v.accountName",a);
},
sortByCreatedBy: function(component, event, helper) {
helper.sortBy(component,helper, "CreatedBy");
var a=component.get("v.sortAsc");
component.set("v.CreatedBy",a);
},
sortByCreatedDate: function(component, event, helper) {
helper.sortBy(component,helper, "CreatedDate");
var a=component.get("v.sortAsc");
component.set("v.CreatedDate",a);
},
First:function(component,event,helper){
helper.First(component);
},
Last:function(component,event,helper){
helper.Last(component);
},

doView: function(component, event, helper) {
var editRecordEvent = $A.get("e.force:navigateToSObject");
editRecordEvent.setParams({
"recordId": event.target.id
});
editRecordEvent.fire();
},

doEdit: function(component, event, helper) {
var recordId = event.getParam("recordId");
window.location.href = '/one/one.app#/sObject/'+recordId+'/view';

},

onSelectChange: function(component, event, helper) {
component.set("v.pageSize",component.find("recordSize").get("v.value"));
helper.paginate(component);
}
})

Необходимо в модальном окошке создать контакт с указанием полей FirstName, LastName, Email и самое главное Account Name. С пустым полем Account Name контакт создается, а вот при его заполнении никак. Вышел из ситуации, создав в методе вручную аккаунт и присвоив ему имя Last+First контакта. Но это наверное не есть гуд, и думаю что можно вписать имя, нажать Save и все будет ок. Подозреваю, что изначально не c того начал, а именно <aura:attribute name="conForm" type="Contact" default="{'sobjectType' : 'Contact'}"/>. и
 <lightning:input label="Account Name" name="myname" value="{!v.conForm.Account.Name}"/> не дружат.Наткнулся еще на такую штуку http://sfdcmonkey.com/2017/07/17/re-usable-custom-lookup/ .Вся проблема в lookup. Блин, ну уж очень все громоздко. Кто что скажет? 
[code]

//Контроллер
public with sharing class ContactListController {

     @AuraEnabled
     public static List<Contact> getConlist() {
         return [SELECT Id, Name, Email, Contact_Level__c, Account.Name, Owner.Name, CreatedBy.Name, CreatedDate FROM Contact ];
     }

     @Auraenabled
    public static List<Contact> delteContactById(String conid)
    {
        System.debug('In controller delteContactById method..');
        Contact delContact=[Select Id from Contact WHERE Id=:conid];
        delete delContact;
        return [SELECT Id, Name, Email, Contact_Level__c, Account.Name, Owner.Name, CreatedBy.Name, CreatedDate FROM Contact];
    }
  
     
     @AuraEnabled
 	public static List <Contact> searchContact(String searchKeyWord) {
  		String searchKey = searchKeyWord + '%';

 		return [SELECT Id, Name, Email, Contact_Level__c, Account.Name, Owner.Name, CreatedBy.Name, CreatedDate FROM Contact
                                   where Name LIKE: searchKey LIMIT 500];
     }

     @AuraEnabled
    public static void saveDetails (Contact regForm1){ 
    	account acc=new account();
       
        acc.Name=regForm1.FirstName +' ' +regForm1.LastName;
        insert acc;
        regForm1.AccountId=acc.Id; 
        INSERT regForm1;
    }
     
}
[/code]

///[code]
//Компонента

<aura:component controller="ContactListController"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    <aura:handler event="force:navigateToSObject" action="{!c.doEdit}"/>
    
    <aura:attribute name="pMasterWrapperlist" type="Contact[]"/>
    <aura:attribute name="pWrapperlist" type="List"/>
    <aura:attribute name="pageSize" type="Integer" default="10"/>
    <aura:attribute name="masterlistSize" type="Integer"/>
    <aura:attribute name="startPosn" type="Integer" default="0"/>
    <aura:attribute name="endPosn" type="Integer"/>
    <aura:attribute type="String" name="sortField" />
    <aura:attribute name="isAsc" type="boolean" default="true" description="boolean flag for pass sorting condition to apex class"/> 
    <aura:attribute name="sortAsc" type="boolean"  />
    <aura:attribute name="name" type="boolean" default="true"/>
    <aura:attribute name="email" type="boolean" default="true"/>
    <aura:attribute name="contactlevel" type="boolean" default="true"/>
    <aura:attribute name="accountName" type="boolean" default="true"/>
    <aura:attribute name="owner" type="boolean" default="true"/>
    <aura:attribute name="createdBy" type="boolean" default="true"/>
    <aura:attribute name="createdDate" type="boolean" default="true"/>
    
    <aura:attribute name="conForm" type="Contact" default="{'sobjectType' : 'Contact'}"/>
    
   
    
    <aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>
    <aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
    <aura:attribute name="TotalNumberOfRecord" type="integer" default="0" description="use for display Number of records"/>
  	
    <lightning:spinner variant="brand" size="large" aura:id="Id_spinner" class="slds-hide" />

       <!-- SEARCH INPUT AND SEARCH BUTTON--> 

        <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:event" alternativeText="Contact Manager" />
        </lightning:layoutItem>
            
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h2 class="slds-page-header__title slds-hyphenate">Contact Manager</h2>
            </div>
        </lightning:layoutItem>
    	</lightning:layout>
   
            <lightning:layout>
            <lightning:layoutItem size="3" padding="around-small" >
                 <lightning:input value="{!v.searchKeyword}"
                                 required="true"
                                 placeholder="search Contacts.."
                                 aura:id="searchField"
                                 label="Contact Name"/>
                 <lightning:badge label="{!v.TotalNumberOfRecord}" />
                <lightning:button onclick="{!c.Search}"
                                  variant="brand"
                                  label="Search"
                                  iconName="utility:search"/> 
                <lightning:button label="New Contact"
                      iconName="utility:new_window"
                      iconPosition="left"
                      variant="brand"
                      onclick="{!c.newPopup}"
                      /> 
            </lightning:layoutItem>
    		</lightning:layout>
     
    <aura:if isTrue="{!v.Message}">
            <div class="slds-notify_container slds-is-relative">
                <div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
                    <div class="slds-notify__content">
                        <h2 class="slds-text-heading_small">No Records Found...</h2>
                    </div>
                </div>
            </div>
        </aura:if>
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox1" class="slds-modal slds-modal_large">
        <div class="slds-modal__container" style="width: 65%;">
            <div class="slds-modal__header">
                CONTACT
            </div>
            
            <div class="slds-modal__content slds-p-around--medium">
                <div class="slds-p-left_xx-large slds-p-right_xx-large">
    <div class="slds-page-header" style="padding-top: 9px; padding-bottom: 9px;, padding-right: 9px;, padding-left: 10px;">
                        <h3 style="font-size: 1rem;" title="">Contact information</h3>
                    </div> 
                </div>    
                <div class="slds-grid slds-p-top_medium">
                    <div class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
            <lightning:input label=" First Name" name="myname" value="{!v.conForm.FirstName}"/> 
                    </div>
                     <div class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
          <lightning:input label="Last Name" name="myname"  required="true" value="{!v.conForm.LastName}"/> 
                    </div>
                    <div class="slds-size_3-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
               <lightning:input label="Email" name="myname"  required="true"  value="{!v.conForm.Email}"/>  
                    </div>
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <div class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
      
                        <p class="title">Contact Level</p>
<ui:inputSelect class="slds-box slds-box_x-small" aura:id="InputSelectSingle" value="{!v.conForm.Contact_Level__c}">
            				<ui:inputSelectOption text="Primary"/>
            				<ui:inputSelectOption text="Secondary" value="true"/>
            				<ui:inputSelectOption text="Tertiary"/>
            				</ui:inputSelect>     
                    </div>
                    <div class="slds-size_3-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
   <lightning:input label="Account Name" name="myname" value="{!v.conForm.Account.Name}"/> 
                    </div>
                </div>
            </div>
            <div class="slds-modal__footer">
                <lightning:button label="Save" onclick="{!c.saveModal}" />
                <lightning:button label="close" onclick="{!c.closeNewModal}" />
            </div>
        </div>
    </div>

    <div>
        <div style="padding-bottom:30px;">
            <form class="slds-form--stacked">
                <div class="slds-col--padded slds-p-top--large">
                 
                    <table class="slds-table slds-table--bordered slds-table--fixed-layout slds-table--resizable-cols slds-max-medium-table--stacked-horizontal" role="grid">
                        <thead >
                            <tr class="slds-line-height--reset " style="line-height: 4;" >
                                <th class="slds-text-title--caps" scope="col" onclick="{!c.sortByName}">Name
 <span>  <aura:if isTrue="{!v.Name}"><lightning:icon iconName="utility:arrowup"  size="xx-small" alternativeText="Indicates approval"/>
              <aura:set attribute="else">
 <lightning:icon iconName="utility:arrowdown"  size="xx-small" alternativeText="Indicates approval"/>
                                        </aura:set>
                                        </aura:if>
                                    </span>
                                </th>
     <th class="slds-text-title--caps" scope="col" onclick="{!c.sortByEmail}">
       <div class="slds-truncate" title="Email">Email
  <span>  <aura:if isTrue="{!v.email}"><lightning:icon iconName="utility:arrowup"  size="xx-small" alternativeText="Indicates approval"/>
       <aura:set attribute="else">
    <lightning:icon iconName="utility:arrowdown"  size="xx-small" alternativeText="Indicates approval"/>
                 </aura:set>
                    </aura:if>
                      </span></div>
                          </th>
  <th class="slds-text-title--caps" scope="col" onclick="{!c.sortBycontactlevel}">
  <div class="slds-truncate" title="contactlevel">Contact level
 <span>  <aura:if isTrue="{!v.contactlevel}"><lightning:icon iconName="utility:arrowup"  size="xx-small" alternativeText="Indicates approval"/>
      <aura:set attribute="else">
       <lightning:icon iconName="utility:arrowdown"  size="xx-small" alternativeText="Indicates approval"/>
                   </aura:set>
                      </aura:if>
                    </span></div>
                    </th>
    <th class="slds-text-title--caps" scope="col" onclick="{!c.sortByAccountName}">
<div class="slds-truncate" title="accountName">Account Name
 <span>  <aura:if isTrue="{!v.accountName}"><lightning:icon iconName="utility:arrowup"  size="xx-small" alternativeText="Indicates approval"/>
    <aura:set attribute="else">
   <lightning:icon iconName="utility:arrowdown"  size="xx-small" alternativeText="Indicates approval"/>
          </aura:set>
          </aura:if>
          </span></div>
   <th class="slds-text-title--caps" scope="col" onclick="{!c.sortByOwner}">
        <div class="slds-truncate" title="owner">Owner
       <span>  <aura:if isTrue="{!v.owner}"><lightning:icon iconName="utility:arrowup"  size="xx-small" alternativeText="Indicates approval"/>
     <aura:set attribute="else">
   <lightning:icon iconName="utility:arrowdown"  size="xx-small" alternativeText="Indicates approval"/>
           </aura:set>
       </aura:if>
          </span></div>
            </th>
        <th class="slds-text-title--caps" scope="col" onclick="{!c.sortByCreatedBy}">
    <div class="slds-truncate" title="owner">CreatedBy
   <span>  <aura:if isTrue="{!v.CreatedBy}"><lightning:icon iconName="utility:arrowup"  size="xx-small" alternativeText="Indicates approval"/>
   <aura:set attribute="else">
 <lightning:icon iconName="utility:arrowdown"  size="xx-small" alternativeText="Indicates approval"/>
                    </aura:set>
                   </aura:if>
                 </span></div>
              </th>
  <th class="slds-text-title--caps" scope="col" onclick="{!c.sortByCreatedDate}">
                <div class="slds-truncate" title="owner">Created Date
   <span>  <aura:if isTrue="{!v.CreatedDate}"><lightning:icon iconName="utility:arrowup"  size="xx-small" alternativeText="Indicates approval"/>
     <aura:set attribute="else">
         <lightning:icon iconName="utility:arrowdown"  size="xx-small" alternativeText="Indicates approval"/>
                                            </aura:set>
                                            </aura:if>
                                        </span></div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <aura:iteration items="{!v.pWrapperlist}" var="con">
                                <tr class="slds-hint-parent">  
                                    <th scope="row"  class="slds-cell-edit" data-label="Name">
                                        <div class="slds-truncate" title="Name">
                                            <a href="javascript:void(0);" onclick="{!c.doView}">
                                                <span class="slds-truncate" id="{!con.Id}">{!con.Name}</span>
                                            </a>
                                        </div>
                                    </th>
           <th scope="row"  class="slds-cell-edit" data-label="Email">
	        <div class="slds-truncate" title="Email">{!con.Email}</div>
                                    </th>
   <th scope="row"  class="slds-cell-edit" data-label="contactlevel">
               <div class="slds-truncate" title="contactlevel">{!con.Contact_Level__c}</div>
                                    </th>
	 <th scope="row"  class="slds-cell-edit" data-label="Account Name">
               <div class="slds-truncate" title="Account Name">
                <a href="javascript:void(0);" onclick="{!c.doView}">
                <span class="slds-truncate" id="{!con.Account.Id }">{!con.Account.Name}</span>
                  </a>
                  </div>
               <th scope="row"  class="slds-cell-edit" data-label="Contact Owner">
                      <div class="slds-truncate" title="Contact Owner">{!con.Owner.Name}</div>
              </th>
               <th scope="row"  class="slds-cell-edit" data-label="CreatedBy">
             <div class="slds-truncate" title="CreatedBy">{!con.CreatedBy.Name}</div>
                 </th>
                <th scope="row"  class="slds-cell-edit" data-label="CreatedDate">
                   <div class="slds-truncate" title="CreatedBy">{!con.CreatedDate}</div>
                        </th>
                           <th>
   <button class="slds-button slds-button_destructive" type="button" onclick="{!c.delete}" id="{!con.Id}">Del</button>
      </th>	
                </tr>          
                       </aura:iteration>                       
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
        <div class="slds-docked-form-footer" >
            <div style="width:25%" class="hidePageSize">
               <ui:inputSelect aura:id="recordSize"  label="Display Record Per Page:" class="testDiv width30px" change="{!c.onSelectChange}">
                    <ui:inputSelectOption text="10" label="10" value="true"/>
                    <ui:inputSelectOption text="15" label="15"/>
                    <ui:inputSelectOption text="20" label="20"/>
                </ui:inputSelect>
            </div>
            <lightning:button variant="neutral" label="First" disabled="{!v.startPosn == 0}"
                              onclick="{!c.First}" />
            <lightning:button variant="neutral" label="Previous" disabled="{!v.startPosn == 0}"
                              onclick="{!c.previous}" />
            <lightning:button variant="brand" label="Next" disabled="{!v.endPosn >= v.pMasterWrapperlist.length-1}"
                              onclick="{!c.next}" />
            <lightning:button variant="brand" label="last" disabled="{!v.endPosn >= v.pMasterWrapperlist.length-1}"
                              onclick="{!c.Last}" />
        </div>
    </div>
 

 </aura:component>

[/code]

////////
[code]
// Контроллер Js

({
     delete : function(component, event, helper) {        
        if(confirm('Are you sure?'))
    	helper.deleteContact(component, event);        
    },
 	 
    newPopup : function(component, event, helper){
        var cmpTarget = component.find('Modalbox1');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open');
	},
        saveModal : function(component, event, helper){
        var regForm = component.get("v.conForm");
        var action = component.get("c.saveDetails");
        action.setParams({regForm1  : regForm});
        action.setCallback(this, function(response) {
            var state = response.getState();          
            if (state === "SUCCESS") {
                $A.get('e.force:refreshView').fire();
                var cmpTarget = component.find('Modalbox1');
                var cmpBack = component.find('Modalbackdrop');
                $A.util.removeClass(cmpBack,'slds-backdrop--open');
                $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
                
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                    errors[0].message);
                    }
                } 
                else {
                    console.log(response.getReturnValue());
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    closeNewModal : function(component, event, helper){
        var cmpTarget = component.find('Modalbox1');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
    },
 	
    Search: function(component, event, helper) {
        var searchField = component.find('searchField');
        var isValueMissing = searchField.get('v.validity').valueMissing;
        // if value is missing show error message and focus on field
        if(isValueMissing) {
            searchField.showHelpMessageIfInvalid();
            searchField.focus();
        }else{
          // else call helper function 
            helper.SearchHelper(component, event);
        }
    },

    doInit:function(component,event,helper){
        helper.getContacts(component);
    },
    next:function(component,event,helper){
        helper.next(component);
    },
    previous:function(component,event,helper){
        helper.previous(component);
    },
    sortByName: function(component, event, helper) {
        helper.sortBy(component,helper, "Name"); 
        var a=component.get("v.sortAsc");
        component.set("v.Name",a);
    },
    sortBycontactlevel: function(component, event, helper) {
        helper.sortBy(component,helper, "contactlevel");
        var a=component.get("v.sortAsc");
        component.set("v.contactlevel",a);
    },
    sortByEmail: function(component, event, helper) {
        helper.sortBy(component,helper, "Email");
         var a=component.get("v.sortAsc");
        component.set("v.email",a);
    },
    sortByOwner: function(component, event, helper) {
        helper.sortBy(component,helper, "owner");
         var a=component.get("v.sortAsc");
        component.set("v.owner",a);
    },
    sortByAccountName: function(component, event, helper) {
        helper.sortBy(component,helper, "accountName");
         var a=component.get("v.sortAsc");
        component.set("v.accountName",a);
    },
    sortByCreatedBy: function(component, event, helper) {
        helper.sortBy(component,helper, "CreatedBy");
         var a=component.get("v.sortAsc");
        component.set("v.CreatedBy",a);
    },
    sortByCreatedDate: function(component, event, helper) {
        helper.sortBy(component,helper, "CreatedDate");
         var a=component.get("v.sortAsc");
        component.set("v.CreatedDate",a);
    },
    First:function(component,event,helper){
        helper.First(component);
    },
    Last:function(component,event,helper){
        helper.Last(component);
    },
    
    doView: function(component, event, helper) {
        var editRecordEvent = $A.get("e.force:navigateToSObject");
        editRecordEvent.setParams({
            "recordId": event.target.id
        });
        editRecordEvent.fire();
    },
    
        doEdit: function(component, event, helper) {
        var recordId = event.getParam("recordId");
        window.location.href = '/one/one.app#/sObject/'+recordId+'/view';
 
    },
    
    onSelectChange: function(component, event, helper) {
        component.set("v.pageSize",component.find("recordSize").get("v.value"));
        helper.paginate(component);
    }
})
[/code]



Слепил из того про что и писал.

Слепил из того про что и писал.