• Athira Venugopal
  • NEWBIE
  • 20 Points
  • Member since 2020

  • Chatter
    Feed
  • 0
    Best Answers
  • 1
    Likes Received
  • 0
    Likes Given
  • 18
    Questions
  • 9
    Replies
I am working on Lightning aura components. The problem is in my servide side apex controller, its not returning the expected result. Te result is [Object,Object]

BoatSearchResults.cmp

<aura:component controller = "BoatSearchResults" implements="flexipage:availableForAllPageTypes" access="global" >
   <aura:attribute name="boats" type="Boat__c[]"/>

     <lightning:layout multipleRows="true">
           <lightning:button variant="brand" label="Search" onclick="{! c.searchBoat }" aura:id="SearchButton" />
        <aura:if isTrue="{!v.boats.length > 0}">
            <aura:iteration items="{!v.boats}" var="bot">
                <lightning:layoutItem  size="3" flexibility="grow" class="slds-m-around_small">
                    <c:BoatTile boat="{!bot}" />
                </lightning:layoutItem>
            </aura:iteration>
            <aura:set attribute="else">
                <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                    <ui:outputText value="No boats found" />
                </lightning:layoutItem>
            </aura:set>
        </aura:if>
    </lightning:layout>
  
</aura:component>

js file

({
       searchBoat : function(component, event) {
            let action = component.get("c.getBoats");
            action.setCallback(this, function(response){
            let state = response.getState();
            if (state === "SUCCESS") {
                console.log('TEST ' + response.getReturnValue());//  this ouput is [Object, Object]
                component.set("v.boats", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
       },
    
   
})

BoatSearchResults.apxc

public with sharing class BoatSearchResults {
    @AuraEnabled
    public static List<Boat__c> getBoats() {
     return [select id,Name,BoatType__c,Contact__c,Picture__c from Boat__c];
    
    }
  
}


BoatTile.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="boat" type="Boat__c"/>

    <lightning:button class="tile">
        <!-- Image -->
        <div style="{!'background-image: url(\'' + v.boat.Picture__c + '\')'}" class="innertile">
            <div class="lower-third">
                <h1 class="slds-truncate">{!v.boat.Name}</h1>
            </div>
        </div>
    </lightning:button>
</aura:component>


 
HTML

<lightning-input label="Upload" name="file uploader"
onchange={handleFilesChange}
type="file" ></lightning-input>

<lightning-button label="Save" variant="brand" onclick={handleClick} ></lightning-button>

JS
import { LightningElement , wire, track, api} from 'lwc';
import newClient from '@salesforce/apex/PriceFetch.newClient'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; export default class PriceScreen extends LightningElement {

@track fileName = '';
filesUploaded = [];
file;
fileContents;
fileReader;
content;
MAX_FILE_SIZE = 1500000;

handleFilesChange(event) {
if(event.target.files.length > 0) {
this.filesUploaded = event.target.files;
this.fileName = event.target.files[0].name;
this.uploadHelper();
} }

uploadHelper() {
this.file = this.filesUploaded[0];
if (this.file.size > this.MAX_FILE_SIZE) {
window.console.log('File Size is to long'); return ; }
// create a FileReader object
this.fileReader= new FileReader();
// set onload function of FileReader object
this.fileReader.onloadend = (() => {
this.fileContents = this.fileReader.result;
let base64 = 'base64,';
this.content = this.fileContents.indexOf(base64) + base64.length; this.fileContents = this.fileContents.substring(this.content);
// call the uploadProcess method }); this.fileReader.readAsDataURL(this.file); }

handleClick(event) {

newClient({base64Data: encodeURIComponent(this.fileContents)}) .then(result => {
const evt = new ShowToastEvent({ title: 'Saved succesfully', variant: 'success', });
this.dispatchEvent(evt); }) .catch(error => {
this.error = error; alert("FAILURE" + error); }); } }

APEX CLASS

@AuraEnabled(cacheable = false)
public static Boolean newClient(String base64Data ){
base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8'); String imageSource = Url.getFileFieldURL(Photo,EncodingUtil.base64Decode(base64Data))//error in this line 'unknown label 'Photo';

Client__c client = new Client__c();
client.Photo__c = '<img src="'+imageSource+'" />';
try {
insert client;
return true;
}
catch (Exception e) {
throw new AuraHandledException('exceptionText' + e.getMessage()); } }

In the above line, EncodingUtil.base64Decode(base64Data) is the 'VersionData'. While deploying to org, It shows an error, unknown label 'Photo'. Is there any mistake in my code?
Does anyone have a sample code?

I am working in Lightning web components.

HTML

<template>
<lightning:card>
<lightning-file-upload label="Attach receipt" name="fileUploader" accept={acceptedFormats} record-id={recordId} onuploadfinished={handleUploadFinished}> </lightning-file-upload>
<lightning-button label="Save" variant="brand" onclick={handleClick}></lightning-button>
</lightning:card>
</template>

js

import { LightningElement , wire, track, api} from 'lwc';
export default class PriceScreen extends LightningElement { fileName ;
@api recordId;
get acceptedFormats() { return ['.pdf', '.png','.jpg','.jpeg']; }

handleUploadFinished(event) {
// Get the list of uploaded files
  this.fileName =  event.detail.files[0].Id;  
}
handleClick(event) {
newClient({ photo:this.fileName })
.then(result =>
{ const evt = new ShowToastEvent({ title: 'Saved succesfully', variant: 'success', });
this.dispatchEvent(evt); }) 
.catch(error => { this.error = error; });
}

APEX

@AuraEnabled(cacheable = false)
public static Boolean newClient(String photo ){
Client__c client = new Client__c();
client.Photo__c = photo;
try { insert client; return true; }
catch (Exception e) {
throw new AuraHandledException('exceptionText' + e.getMessage()); } }

'Client' is a custom object, having a rich text area field 'Photo'. I am uploading the photo using lightning:file:upload. But the uploaded image is not getting saved into the custom object. Is there any mistake in my code? Actually, I don't know how to save an image into a custom object via apex code.
Hi, I am working on a Lightning web component page.I have created a custom lightning page using Lightning web components, having a custom picklist in it, and I am trying to autopopulate the custom picklist on the click of the custom lookup field 'Project'.. Project and Unit is in a Master-detail relationship.

html
<lightning-record-edit-form>
<lightning-card>
<p class="slds-var-p-horizontal_small">
<lightning-record-edit-form object-api-name="Price__c">
<lightning-input-field field-name="Project__c" onchange={projectChange}>
</lightning-input-field>
</lightning-record-edit-form>
<select class="slds-select" >
<option value="Select">Select</option>
<template for:each={options} for:item="option">
<option key={option.label} class="uiInputSelectOption" value={option.value}>{option.value}</option>
</template>
</select>
</p>
</lightning-card>

JS

import { LightningElement , wire, track} from 'lwc';
import getUnit from '@salesforce/apex/PriceFetch.getUnit';
export default class PriceScreen extends LightningElement {
@track options;
projSelected;

projectChange(event) {
this.projSelected = event.detail.value[0];
getUnit({ projId:this.projSelected })
.then(result => { this.options = result; })
.catch(error => { this.options = undefined; }); } }

APEX CLASS

public with sharing class PriceFetch {
@AuraEnabled(cacheable = true)
public static List<Unit__c> getUnit(Id projId) {
return [SELECT Id, Name FROM Unit__c where Project__c = :projId ]; } }

Is there any mistake in my code?

I have created a report chart in VF page, Instead of using this refresh button(showRefreshButton="true"), can I refresh this report chart using REST API
<apex:page>
    <analytics:reportChart reportId="00O2w000006idAJEAY" showRefreshButton="true" size="tiny" hideOnError="true"/>.
</apex:page>

Anyone have any idea? Is there any way to do this?
I am using the lightning:datatable for my custom object. Is there any way to refresh the lightning:datatable after adding some data into it.
I have tried using apex:iframe, but it displays a blank page

<apex:page showheader="true" sidebar="true">
<apex:iframe src="/01Z2w000000ooGVEAY/" height="600px" width="70%"/>
</apex:page>
Then I had tried using wave:dashboard
<apex:page showheader="true" sidebar="true">
<wave:dashboard dashboardId="01Z2w000000ooGVEAY" showTitle="true" height="800px" openLinksInNewWindow="true" /> </apex:page>
HTML
<template>
   
   <lightning:card>
    <lightning-button variant="brand"
    label="New Entry"
    title="Open Modal"
    onclick={openModal}
    class="slds-var-m-left_x-small"></lightning-button>
       
    <!-- modal start -->        
 <template if:true={bShowModal}>
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
       <div class="slds-modal__container">
          <!-- modal header start -->
          <header class="slds-modal__header">
             <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                <lightning-icon icon-name="utility:close"
                   alternative-text="close"
                   variant="inverse"
                   size="small" ></lightning-icon>
                <span class="slds-assistive-text">Close</span>
             </button>
             <h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">Quotation</h2>
          </header>
          <!-- modal body start -->
          <lightning-card>
          <p class="slds-var-p-horizontal_small">
 
 
            <lightning-input label="Date" name="datefld" type="date" value={fDate} onchange={handledChange} ></lightning-input>
            <lightning-input label="Quotation Name" name="enquiry" type="textarea" value={enq} onchange={handledChange} ></lightning-input>
  
            <lightning-record-edit-form object-api-name="Price__c">
               <lightning-input-field field-name="Project__c" onchange={projectChange}>
               </lightning-input-field>
               </lightning-record-edit-form>
        <lightning-record-edit-form object-api-name="Price__c">
        <lightning-input-field field-name="Unit__c"  onchange={unitChange} value ={unitVal}>
        </lightning-input-field>
        </lightning-record-edit-form>
    
     
   <lightning-input label="Unit Rate" name="rate" type="Double" value={rNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Additional cost" name="cost" type="Double" value={cNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Discount" name="dis" type="Double" value={dNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Agreement cost" name="agree" type="Double" value={aNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Remarks" name = "remark" type="textarea" value={resultsum} onchange={handledChange}></lightning-input> 
   
     <lightning-button label="Save" variant="brand" onclick={handleClick}></lightning-button>
    
    
           </p>
          
           </lightning-card>
          <!-- modal footer start-->
        
       </div>
    </section>
 
 </template>
 <!-- modal end -->
   
    <div if:true={accList}>
        <lightning-datatable data={accList} columns={columns} key-field="Id" >
        </lightning-datatable>
      </div>
    <div if:true={error}>
        {error}
    </div>
  
   </lightning:card>
 
</template>

JS



import { LightningElement , wire, track} from 'lwc';
import getAccountList from '@salesforce/apex/PriceFetch.getAccountList';
import calculate2Numbers from '@salesforce/apex/PriceFetch.calculate2Numbers';
import sentMail from '@salesforce/apex/PriceFetch.sentMail';
import getUnit from '@salesforce/apex/PriceFetch.getUnit';
import priceMail from '@salesforce/apex/PriceFetch.priceMail';
import newPrice from '@salesforce/apex/PriceFetch.newPrice';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class PriceScreen extends LightningElement {
    datefld;
    enquiry;
    projSelected;
    unitSelected;
    rate;
    cost;
    dis;
    agree;
    remark;
    recp;
    
    @track aNumber;
    @track unitVal;
    @track disName;
    @track finalCost;
    @track bShowModal = false;
       @track Name;
    @track columns = [
        {  
            label: "Name",  
            fieldName: "recordLink",
            type: "url",  
            typeAttributes: { label: { fieldName: "Name" },  target: "_self" }  
           },
             ];
 
    wiredDataResult;
    @track error;
    @track accList ;
  
    @wire(getAccountList)
    wiredAccounts({
        error,
        data
    }) {
        if (data) {
            var tempOppList = [];  
            for (var i = 0; i < data.length; i++) {  
                
             let tempRecord = Object.assign({}, data[i]); //cloning object  
             tempRecord.Name = tempRecord.Name;
             tempRecord.recordLink = "/" + tempRecord.Id;  
            
             tempOppList.push(tempRecord);  
            }  
            console.log('hHIIII' + data)
            this.accList = tempOppList;
            this.wiredDataResult = tempOppList;
        } else if (error) {
            this.error = error;
        }
    }
 
     
 
    handledChange(event){
      if(event.target.name==='datefld'){
 
            this.datefld = event.target.value;
        }
        else if(event.target.name==='enquiry'){
         this.enquiry = event.target.value;    
 
       }
        else if(event.target.name==='rate'){
        this.rate = event.target.value;    
          }
       else if(event.target.name==='cost'){
          this.cost = event.target.value;    
       }
       else if(event.target.name==='dis'){
        this.dis = event.target.value;    
        calculate2Numbers({ unitRate: this.rate,addtnlCost:this.cost,     discount:this.dis })
 
        .then(result => {
         this.aNumber = result;
 
           // this.error = undefined;
 
 
        })
 
 
        .catch(error => {
 
 
            this.aNumber = undefined;
 
 
            //this.error = error;
 
 
        });
 
 
    }
    else if(event.target.name==='agree'){
 
 
        console.log('handle Change'+event.target.value)
 
 
        this.agree = event.target.value;    
 
 
    }
    else if(event.target.name==='remark'){
 
 
        console.log('handle Change'+event.target.value)
 
 
        this.remark = event.target.value;    
 
 
    }
    }
 
   
    
    projectChange(event) {
       
        alert("PROJECT" + event.detail.value[0]);
       this.projSelected = event.detail.value[0];
 
       getUnit({ projId:this.projSelected })
 
       .then(result => {
 
        this.unitVal = result;
              })
 
       .catch(error => {
        this.unitVal = undefined;
 
 
       });
 
   
    }
    unitChange(event) {
        this.unitSelected = event.detail.value[0];
    }
 
   
 
   handleClick(event) {
    this.bShowModal = false;
    
  
    newPrice({ entryDate: this.datefld, enqName : this.enquiry, proj:this.projSelected, unit:this.unitSelected,
        unitRate:this.rate, addtnlCost:this.cost, discount:this.dis, agreeCost:this.agree,rem:this.remark })
      
 
   .then(result => {
    const evt = new ShowToastEvent({
        title: 'Saved succesfully',
        variant: 'success',
    });
    this.dispatchEvent(evt);
    console.log("Opps updated!" + result)
       return refreshApex(this.wiredDataResult); //HERE I AM CALLING REFRESHING THE DATATABLE, BUT ITS NOT GETTING REFRESHED
     
   })
 
   .catch(error => {
        this.error = error;
        alert("FAILURE" + error);
         //this.error = error;
   });
    }
 
 /* javaScipt functions start */ 
    openModal() {    
        // to open modal window set 'bShowModal' tarck value as true
        this.bShowModal = true;
    }
    closeModal() {    
        // to open modal window set 'bShowModal' tarck value as true
        this.bShowModal = false;
    }
  
     
}

APEX CONTROLLER

public with sharing class PriceFetch {
    @AuraEnabled(cacheable=true)
    public static List<Price__c> getAccountList() {
        System.debug('HII');
        return [SELECT Id,  Name
            FROM Price__c ];
    }
    @AuraEnabled(cacheable=true)
    public static Double calculate2Numbers(Double unitRate,Double addtnlCost, Double discount){
     
        return ((unitRate+addtnlCost)-discount);
    }
    @AuraEnabled(cacheable = true)
    public static List<Unit__c> getUnit(Id projId) {
      
        return [SELECT Id,  Name FROM Unit__c where Project__c = :projId ];
    }
    @AuraEnabled
    public static Boolean newPrice(Date entryDate, String enqName, Id proj, Id unit,Double unitRate,Double addtnlCost, Double discount,Double agreeCost, String rem ){
     
       Price__c price = new Price__c();
       price.Date__c = entryDate;
       price.Name = enqName;
       price.Project__c = proj;
       price.Unit__c = unit;
       price.Unit_Rate__c = unitRate;
       price.Additional_cost__c = addtnlCost;
       price.Discount__c = discount;
       price.Agreement_cost__c = agreeCost;
       price.Remarks__c = rem;
       try {
        insert price;
        return true;
           
       } catch (Exception e) {
           throw new AuraHandledException('exceptionText' + e.getMessage());
         
       }
      
    }


 
}
In the js file, there is a method handleClick(), inside that method, I am trying to refresh the lightning:datatable after saving some data into it, but its not getting refreshed. Is there any mistake in my code?
I am working in Visual studio code. On the click of a lightning:button, I am calling a javascript method, inside the method I am calling a visual force page using window.open(url), submiting the form in visual force page, I am calling the apex class method to send an email. I got the message as 'Email Sent !!!,  but the mail was not received.

portion of JS

 openMail(event) {
 window.open('/apex/TestMail', 'Popup','height=500,width=600,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,status=no');
  
}
VF Page
TestMail


<apex:page controller="singleEmailExample">
 <apex:form >
Email Address : <apex:inputText value="{!toAddress}" />
 <apex:commandButton value="SendEmail" action="{!sendingEmail}"/> <br/>
  Email Status :<b> {!message}  </b>
 </apex:form>
</apex:page>

apex class

public with sharing class singleEmailExample {
    public string toAddress{get;set;}
    public string message{get;set;}
    public PageReference sendingEmail(){
        Messaging.SingleEmailMessage semail = new Messaging.SingleEmailMessage();
        String[] sendingTo = new String[]{toAddress};
        semail.setToAddresses(sendingTo);
        //String[] sendingToBccAdd = new String[]{‘XXXX@gmail.com’};
       // semail.setBccAddresses(sendingToBccAdd);
       // String[] sendingTocAdd = new String[]{‘XXXXX@gmail.com’};
      // semail.setCcAddresses(sendingTocAdd); */
        semail.setSubject('Single Email message Example');
        semail.setPlainTextBody('Hello!!!!!This is a test email to test single email message program');
        Messaging.sendEmail(new Messaging.SingleEmailMessage[] {semail});
        message='Email Sent !!!';
        return null;
    }
}

Please help me , I tried a lot, and got disappointed
HTML TEMPLATE
<template>
    <lightning-card title="Custom Search Functionality in LWC" icon-name="standard:account">
        <div if:true={errorMsg} style="margin-left: 3%;">
            <p style="color: red;">{errorMsg}</p>
        </div>
        <lightning-layout multiple-rows="true" vertical-align="end">
            <lightning-layout-item size="12" small-device-size="10" medium-device-size="8" large-device-size="6" padding="around-small">
                    <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                    <lightning-input type="text" 
                                                     label="Enter Customer Name" name ="cusName"
                                                     onchange={handleCustomerName} ></lightning-input>
                            </div>
                        </div> 
            </lightning-layout-item>
            <lightning-layout-item size="12" small-device-size="2" medium-device-size="2" large-device-size="2" padding="around-small">
                    <lightning-button label="Search" 
                                      variant="brand" 
                                      onclick={handleSearch}></lightning-button>
                </lightning-layout-item>
            </lightning-layout><br/>
            <template if:true={show}>
                <div class="acc-container">
                    {recordId}
                    <lightning-record-view-form record-id={recordId} object-api-name="Client__c">
                        <div class="slds-grid">
                            <div class="slds-col slds-size_1-of-2">
                                <lightning-output-field field-name="Name"></lightning-output-field>
                                <lightning-output-field field-name="Date_of_Birth__c"></lightning-output-field>
                            </div>
                            <div class="slds-col slds-size_1-of-2">
                                <lightning-output-field field-name="Photo__c"></lightning-output-field>
                                <lightning-output-field field-name="Booking_Date__c"></lightning-output-field>
                            </div>
                        </div>
                    </lightning-record-view-form>
                </div>
            </template>
           
      
    </lightning-card>
</template>

js

import { LightningElement, track } from 'lwc';
import getDetail from '@salesforce/apex/PriceFetch.getDetail';
export default class ClientDefinition extends LightningElement {
    cusName;
    @track show = false;
    @track recordId;
    handleCustomerName(event) {
        this.cusName =  event.target.value;
    }
    handleSearch() {
       /* if(this.cusName.equals('')) {
            this.errorMsg = 'Please enter customer name to search.';
          
            return;
        }*/
        alert(this.cusName);
     
        getDetail({ clientName: this.cusName})
          
        
           .then(result => {
            this.show = true;
            alert(result);
            this.recordId = result;
           })
        
           .catch(error => {
                this.error = error;
                alert("FAILURE" + error);
                 //this.error = error;
           });
            
    }
}

Apex controllr class

public with sharing class PriceFetch {
  
    @AuraEnabled
    public static String getDetail(String clientName) {
       
        String search = '%' + clientName + '%';
       
       List<Client__c> clients = new List<Client__c>();
         clients = [
            SELECT Id, Name, Unit__c, Total_cost__c, Remarks__c, Project__c,Profession__r.Name,Photo__c,PAN__c,Father_Spouse__c,Email_id__c,
            Date_of_Birth__c,Contact_Number__c,Communication_address__c,Booking_Date__c,Booking_Amount__c,Agreement_Date__c,Aadhar_Number__c
            FROM Client__c
            WHERE Name LIKE :search
            LIMIT 1];
            if(clients.size() == 0) {
                 throw new AuraHandledException('exceptionText');
            }
            
           return clients.get(0).Id;
        
    }


 
}

Is there any mistake in my code?
Im not getting the recordId.
I am working in Visual studio code, I am passing some values to this priceMail() method while calling from the js file. I have got the 'success' msg, but the mail is not send
 @AuraEnabled
    public static String priceMail(String name, String email, Double cost) {
        // Create an email message object
        String sMessage='';
        String subject = 'Price List';
        String body = 'Dear ' + name + '/n' + 'ggg' + cost;
        try{
        Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();
        String[] toAddresses = new String[] {email};
        mail.setToAddresses(toAddresses);
        mail.setSubject(subject);
        mail.setPlainTextBody(body);
        // Pass this email message to the built-in sendEmail method 
        // of the Messaging class
       Messaging.sendEmail( new Messaging.SingleEmailMessage[] { mail });
        sMessage='Success';
        }
        catch(Exception ex){
            sMessage=ex.getLineNumber()+'\n'+ex.getCause()+'\n'+ex.getMessage()+'\n'+ex.getStackTraceString();
        }
        return sMessage;
      
    
    }

 
Here is my entire code, I am working in Visual studio code 
I have created a custom object 'Price', having two custom look up fields (Project, Unit) and some other fields,. I am trying to insert values into this custom object, but the look up field values(Project, Unit) are not getting inserted, all other fields got inserted.

Html template
<template>
  <lightning-card>
          <p class="slds-var-p-horizontal_small">

            <lightning-input label="Date" name="datefld" type="date" value={fDate} onchange={handledChange} ></lightning-input>
            <lightning-input label="Enquirer" name="enquiry" type="textarea" value={enq} onchange={handledChange} ></lightning-input>
    <lightning-record-edit-form object-api-name="Price__c">
    <lightning-input-field field-name="Project__c" required onchange={projectChange}>
    </lightning-input-field>
    </lightning-record-edit-form>
    <lightning-record-edit-form object-api-name="Price__c">
        <lightning-input-field field-name="Unit__c"  onchange={unitChange}>
        </lightning-input-field>
        </lightning-record-edit-form>
    
    
   <lightning-input label="Unit Rate" name="rate" type="Double" value={rNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Additional cost" name="cost" type="Double" value={cNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Discount" name="dis" type="Double" value={dNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Agreement cost" name="agree" type="Double" value={aNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Remarks" name = "remark" type="textarea" value={resultsum} onchange={handledChange}></lightning-input> 
    
     <lightning-button label="Save" onclick={handleClick}></lightning-button>
    
    
           </p>
           </lightning-card>
</template>

JS
import { LightningElement ,api, wire, track} from 'lwc';

import newPrice from '@salesforce/apex/PriceFetch.newPrice';
export default class PriceScreen extends LightningElement {
    datefld;
    enquiry;
    projSelected;
    unitSelected;
    rate;
    cost;
    dis;
    agree;
    remark;
 
    handledChange(event){

        if(event.target.name==='datefld'){

            console.log('handle Change'+event.target.value);

            this.datefld = event.target.value;

        }
        else if(event.target.name==='enquiry'){

            console.log('handle Change'+event.target.value)

            this.enquiry = event.target.value;    
       }

        else if(event.target.name==='rate'){

            console.log('handle Change'+event.target.value)

            this.rate = event.target.value;    
       }
       else if(event.target.name==='cost'){

        console.log('handle Change'+event.target.value)

        this.cost = event.target.value;    

    }
    else if(event.target.name==='dis'){

        console.log('handle Change'+event.target.value)

        this.dis = event.target.value;    
        
   
    }
    else if(event.target.name==='agree'){

        console.log('handle Change'+event.target.value)

        this.agree = event.target.value;    

    }
    else if(event.target.name==='remark'){

        console.log('handle Change'+event.target.value)

        this.remark = event.target.value;    

    }
    }
    projectChange(event) {
        projSelected = event.detail;
    }
    unitChange(event) {
        unitSelected = event.detail;
    }
   handleClick(event) {
        newPrice({ entryDate: this.datefld, enqName : this.enquiry, proj:projSelected, unit:unitSelected,
             unitRate:this.rate, addtnlCost:this.cost, discount:this.dis, agreeCost:this.agree,rem:this.remark })

        .then(result => {

            this.result = result;
           if(this.result == 'true') {
               alert("SUCCESS");
           }
        })
        .catch(error => {
             this.error = error;
             alert("FAILURE" + error);
              //this.error = error;
        });
    }
}
PriceFetch.cls (Apex controler class)
public with sharing class PriceFetch {
  
 
    @AuraEnabled
    public static Boolean newPrice(Date entryDate, String enqName, Id proj, Id unit,Double unitRate,Double addtnlCost, Double discount,Double agreeCost, String rem ){
     
       Price__c price = new Price__c();
       price.Date__c = entryDate;
       price.Name = enqName;
       price.Project__c = proj;
       price.Unit__c = unit;
       price.Unit_Rate__c = unitRate;
       price.Additional_cost__c = addtnlCost;
       price.Discount__c = discount;
       price.Agreement_cost__c = agreeCost;
       price.Remarks__c = rem;
       try {
        insert price;
        return true;
           
       } catch (Exception e) {
           throw new AuraHandledException('exceptionText' + e.getMessage());
         
       }
      
    }
}


Is there any mistake in my code
 
I have used lightning data table for my custom object, no data got displayed in the table
html
<template>
    <h2> Project Datatable</h2>
    <template if:true={accList}>
        <lightning-datatable data={accList} columns={columns} key-field="Id">
        </lightning-datatable>
    </template>
    <template if:true={error}>
        {error}
    </template>
</template>

JS
import { LightningElement ,api, wire, track} from 'lwc';
import getAccountList from '@salesforce/apex/PriceFetch.getAccountList';
export default class PriceScreen extends LightningElement {
    @track columns = [{
           api: 'BuildingNo__c',
            label: 'BuildingNo',
            fieldName: 'BuildingNo',
            type: 'text',
            sortable: true
        },
        {   api:'Location__c',
            label: 'Location',
            fieldName: 'Location',
            type: 'text',
            sortable: true
        }
    
    ];
 
    @track error;
    @track accList ;
    @wire(getAccountList)
    wiredAccounts({
        error,
        data
    }) {
        if (data) {
            this.accList = data;
        } else if (error) {
            this.error = error;
        }
    }
}
PriceFetch.cls (Apex class)
public with sharing class PriceFetch {
    @AuraEnabled(cacheable=true)
    public static List<Project__c> getAccountList() {
        return [SELECT Id,BuildingNo__c, Location__c
            FROM Project__c];
    }
}
 An empty table is the output, Please helpme
Here is my visual force page and apex controller:
StudentDisplay.vfp

<apex:page Controller="StudentDetails" >
    <apex:form >
        <apex:pageBlock title="New Student">
            <apex:pageBlockSection columns="1">
                <apex:inputField value="{!stud.Name}"/>
                <apex:inputField value="{!stud.Class__c}"/>
                <apex:inputField value="{!stud.DOB__c}"/>
                <apex:inputField value="{!stud.Physics__c}"/>
                 <apex:inputField value="{!stud.Chemistry__c}"/>
                 <apex:inputField value="{!stud.Maths__c}"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons >
                <apex:commandButton action="{!addNewStudent}" value="Save"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

StudentDetails .apxc
public class StudentDetails {
 public StudentData__c stud { get; set; }

    // Here initialize the book object
    public StudentDetails() {
        stud = new StudentData__c();
    }

    public PageReference addNewStudent() { 
       
        insert stud; 
        return null; 
    }
}
ContactComponent.cmp
<aura:component controller ="ContactController " implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name = "conList" type = "Contact"></aura:attribute>
    <lightning:input type ="text" label = "First Name" value="{!v.conList.FirstName}" ></lightning:input>
     <lightning:input type ="text" label = "Last Name" value="{!v.conList.LastName}"></lightning:input>
     <lightning:input  type ="tel" label = "Phone" value="{!v.conList.Phone}"></lightning:input>
     <lightning:input type ="email" label = "Email"  value="{!v.conList.Email}" ></lightning:input>
     <lightning:button variant="brand" label="Create" onclick="{!c.handleClick}" class="slds-m-left_x-small"></lightning:button>
</aura:component>

ContactComponentController.js

({
    handleClick : function(component, event, helper) {
        
        console.log("HIIIIIII" + conlist);
        var action = component.get("c.createContact");
        action.setParams({
           ac : component.get("v.conList")
        });
        action.setCallback(this,function(response){
            if(response.getState() == 'SUCCESS') {
            alert("Updated successfully");
            
        }
        });
    $A.enqueueAction(action);
    }
})

ContactController.apxc

public class ContactController {
    @auraEnabled
    public static void createContact( Contact c) {
      
        insert c;
    }

}

Is there any mistake in my code
<template>
<lightning-tabset>
<lightning-tab label="Item One">
One Content !
</lightning-tab>
<lightning-tab label="Item Two" title="2nd tab extended title">
Two Content !
</lightning-tab>
<lightning-tab label="Item Three">
Three Content !
</lightning-tab>
</lightning-tabset>
</template>

I am deploying using VSCODE
public class AccountProcessor {
 
    public AccountProcessor() {
      
    }
    public static void countContacts() {
       
        Account acc = [Select Id, Name from Account where name = 'chandra'];
Contact[] con = [SELECT Id,FirstName,LastName FROM Contact where AccountId =:acc.Id];
        acc.Number_of_Contacts__c = con.size();
        update acc;
        
        
    }
}
I am trying to update the 'Number of contacts' field in Account object.
Tried to call the countContacts() from anonymous window, But this exception occurs
AccountProcessor.countContacts();
public class AccountProcessor {
 
    public AccountProcessor() {
      
    }
    public static void countContacts() {
       
        Account acc = [Select Id, Name from Account where name = 'chandra'];
Contact[] con = [SELECT Id,FirstName,LastName FROM Contact where AccountId =:acc.Id];
        acc.Number_of_Contacts__c = con.size();
        update acc;
        
        
    }
}
I am trying to update the 'Number of contacts' field in Account object.
Tried to call the countContacts() from anonymous window, But this exception occurs
AccountProcessor.countContacts();
I am working on Lightning aura components. The problem is in my servide side apex controller, its not returning the expected result. Te result is [Object,Object]

BoatSearchResults.cmp

<aura:component controller = "BoatSearchResults" implements="flexipage:availableForAllPageTypes" access="global" >
   <aura:attribute name="boats" type="Boat__c[]"/>

     <lightning:layout multipleRows="true">
           <lightning:button variant="brand" label="Search" onclick="{! c.searchBoat }" aura:id="SearchButton" />
        <aura:if isTrue="{!v.boats.length > 0}">
            <aura:iteration items="{!v.boats}" var="bot">
                <lightning:layoutItem  size="3" flexibility="grow" class="slds-m-around_small">
                    <c:BoatTile boat="{!bot}" />
                </lightning:layoutItem>
            </aura:iteration>
            <aura:set attribute="else">
                <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                    <ui:outputText value="No boats found" />
                </lightning:layoutItem>
            </aura:set>
        </aura:if>
    </lightning:layout>
  
</aura:component>

js file

({
       searchBoat : function(component, event) {
            let action = component.get("c.getBoats");
            action.setCallback(this, function(response){
            let state = response.getState();
            if (state === "SUCCESS") {
                console.log('TEST ' + response.getReturnValue());//  this ouput is [Object, Object]
                component.set("v.boats", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
       },
    
   
})

BoatSearchResults.apxc

public with sharing class BoatSearchResults {
    @AuraEnabled
    public static List<Boat__c> getBoats() {
     return [select id,Name,BoatType__c,Contact__c,Picture__c from Boat__c];
    
    }
  
}


BoatTile.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="boat" type="Boat__c"/>

    <lightning:button class="tile">
        <!-- Image -->
        <div style="{!'background-image: url(\'' + v.boat.Picture__c + '\')'}" class="innertile">
            <div class="lower-third">
                <h1 class="slds-truncate">{!v.boat.Name}</h1>
            </div>
        </div>
    </lightning:button>
</aura:component>


 
HTML

<lightning-input label="Upload" name="file uploader"
onchange={handleFilesChange}
type="file" ></lightning-input>

<lightning-button label="Save" variant="brand" onclick={handleClick} ></lightning-button>

JS
import { LightningElement , wire, track, api} from 'lwc';
import newClient from '@salesforce/apex/PriceFetch.newClient'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; export default class PriceScreen extends LightningElement {

@track fileName = '';
filesUploaded = [];
file;
fileContents;
fileReader;
content;
MAX_FILE_SIZE = 1500000;

handleFilesChange(event) {
if(event.target.files.length > 0) {
this.filesUploaded = event.target.files;
this.fileName = event.target.files[0].name;
this.uploadHelper();
} }

uploadHelper() {
this.file = this.filesUploaded[0];
if (this.file.size > this.MAX_FILE_SIZE) {
window.console.log('File Size is to long'); return ; }
// create a FileReader object
this.fileReader= new FileReader();
// set onload function of FileReader object
this.fileReader.onloadend = (() => {
this.fileContents = this.fileReader.result;
let base64 = 'base64,';
this.content = this.fileContents.indexOf(base64) + base64.length; this.fileContents = this.fileContents.substring(this.content);
// call the uploadProcess method }); this.fileReader.readAsDataURL(this.file); }

handleClick(event) {

newClient({base64Data: encodeURIComponent(this.fileContents)}) .then(result => {
const evt = new ShowToastEvent({ title: 'Saved succesfully', variant: 'success', });
this.dispatchEvent(evt); }) .catch(error => {
this.error = error; alert("FAILURE" + error); }); } }

APEX CLASS

@AuraEnabled(cacheable = false)
public static Boolean newClient(String base64Data ){
base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8'); String imageSource = Url.getFileFieldURL(Photo,EncodingUtil.base64Decode(base64Data))//error in this line 'unknown label 'Photo';

Client__c client = new Client__c();
client.Photo__c = '<img src="'+imageSource+'" />';
try {
insert client;
return true;
}
catch (Exception e) {
throw new AuraHandledException('exceptionText' + e.getMessage()); } }

In the above line, EncodingUtil.base64Decode(base64Data) is the 'VersionData'. While deploying to org, It shows an error, unknown label 'Photo'. Is there any mistake in my code?
Does anyone have a sample code?
I am using the lightning:datatable for my custom object. Is there any way to refresh the lightning:datatable after adding some data into it.
HTML
<template>
   
   <lightning:card>
    <lightning-button variant="brand"
    label="New Entry"
    title="Open Modal"
    onclick={openModal}
    class="slds-var-m-left_x-small"></lightning-button>
       
    <!-- modal start -->        
 <template if:true={bShowModal}>
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
       <div class="slds-modal__container">
          <!-- modal header start -->
          <header class="slds-modal__header">
             <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                <lightning-icon icon-name="utility:close"
                   alternative-text="close"
                   variant="inverse"
                   size="small" ></lightning-icon>
                <span class="slds-assistive-text">Close</span>
             </button>
             <h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">Quotation</h2>
          </header>
          <!-- modal body start -->
          <lightning-card>
          <p class="slds-var-p-horizontal_small">
 
 
            <lightning-input label="Date" name="datefld" type="date" value={fDate} onchange={handledChange} ></lightning-input>
            <lightning-input label="Quotation Name" name="enquiry" type="textarea" value={enq} onchange={handledChange} ></lightning-input>
  
            <lightning-record-edit-form object-api-name="Price__c">
               <lightning-input-field field-name="Project__c" onchange={projectChange}>
               </lightning-input-field>
               </lightning-record-edit-form>
        <lightning-record-edit-form object-api-name="Price__c">
        <lightning-input-field field-name="Unit__c"  onchange={unitChange} value ={unitVal}>
        </lightning-input-field>
        </lightning-record-edit-form>
    
     
   <lightning-input label="Unit Rate" name="rate" type="Double" value={rNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Additional cost" name="cost" type="Double" value={cNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Discount" name="dis" type="Double" value={dNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Agreement cost" name="agree" type="Double" value={aNumber} onchange={handledChange}></lightning-input>
    <lightning-input label="Remarks" name = "remark" type="textarea" value={resultsum} onchange={handledChange}></lightning-input> 
   
     <lightning-button label="Save" variant="brand" onclick={handleClick}></lightning-button>
    
    
           </p>
          
           </lightning-card>
          <!-- modal footer start-->
        
       </div>
    </section>
 
 </template>
 <!-- modal end -->
   
    <div if:true={accList}>
        <lightning-datatable data={accList} columns={columns} key-field="Id" >
        </lightning-datatable>
      </div>
    <div if:true={error}>
        {error}
    </div>
  
   </lightning:card>
 
</template>

JS



import { LightningElement , wire, track} from 'lwc';
import getAccountList from '@salesforce/apex/PriceFetch.getAccountList';
import calculate2Numbers from '@salesforce/apex/PriceFetch.calculate2Numbers';
import sentMail from '@salesforce/apex/PriceFetch.sentMail';
import getUnit from '@salesforce/apex/PriceFetch.getUnit';
import priceMail from '@salesforce/apex/PriceFetch.priceMail';
import newPrice from '@salesforce/apex/PriceFetch.newPrice';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class PriceScreen extends LightningElement {
    datefld;
    enquiry;
    projSelected;
    unitSelected;
    rate;
    cost;
    dis;
    agree;
    remark;
    recp;
    
    @track aNumber;
    @track unitVal;
    @track disName;
    @track finalCost;
    @track bShowModal = false;
       @track Name;
    @track columns = [
        {  
            label: "Name",  
            fieldName: "recordLink",
            type: "url",  
            typeAttributes: { label: { fieldName: "Name" },  target: "_self" }  
           },
             ];
 
    wiredDataResult;
    @track error;
    @track accList ;
  
    @wire(getAccountList)
    wiredAccounts({
        error,
        data
    }) {
        if (data) {
            var tempOppList = [];  
            for (var i = 0; i < data.length; i++) {  
                
             let tempRecord = Object.assign({}, data[i]); //cloning object  
             tempRecord.Name = tempRecord.Name;
             tempRecord.recordLink = "/" + tempRecord.Id;  
            
             tempOppList.push(tempRecord);  
            }  
            console.log('hHIIII' + data)
            this.accList = tempOppList;
            this.wiredDataResult = tempOppList;
        } else if (error) {
            this.error = error;
        }
    }
 
     
 
    handledChange(event){
      if(event.target.name==='datefld'){
 
            this.datefld = event.target.value;
        }
        else if(event.target.name==='enquiry'){
         this.enquiry = event.target.value;    
 
       }
        else if(event.target.name==='rate'){
        this.rate = event.target.value;    
          }
       else if(event.target.name==='cost'){
          this.cost = event.target.value;    
       }
       else if(event.target.name==='dis'){
        this.dis = event.target.value;    
        calculate2Numbers({ unitRate: this.rate,addtnlCost:this.cost,     discount:this.dis })
 
        .then(result => {
         this.aNumber = result;
 
           // this.error = undefined;
 
 
        })
 
 
        .catch(error => {
 
 
            this.aNumber = undefined;
 
 
            //this.error = error;
 
 
        });
 
 
    }
    else if(event.target.name==='agree'){
 
 
        console.log('handle Change'+event.target.value)
 
 
        this.agree = event.target.value;    
 
 
    }
    else if(event.target.name==='remark'){
 
 
        console.log('handle Change'+event.target.value)
 
 
        this.remark = event.target.value;    
 
 
    }
    }
 
   
    
    projectChange(event) {
       
        alert("PROJECT" + event.detail.value[0]);
       this.projSelected = event.detail.value[0];
 
       getUnit({ projId:this.projSelected })
 
       .then(result => {
 
        this.unitVal = result;
              })
 
       .catch(error => {
        this.unitVal = undefined;
 
 
       });
 
   
    }
    unitChange(event) {
        this.unitSelected = event.detail.value[0];
    }
 
   
 
   handleClick(event) {
    this.bShowModal = false;
    
  
    newPrice({ entryDate: this.datefld, enqName : this.enquiry, proj:this.projSelected, unit:this.unitSelected,
        unitRate:this.rate, addtnlCost:this.cost, discount:this.dis, agreeCost:this.agree,rem:this.remark })
      
 
   .then(result => {
    const evt = new ShowToastEvent({
        title: 'Saved succesfully',
        variant: 'success',
    });
    this.dispatchEvent(evt);
    console.log("Opps updated!" + result)
       return refreshApex(this.wiredDataResult); //HERE I AM CALLING REFRESHING THE DATATABLE, BUT ITS NOT GETTING REFRESHED
     
   })
 
   .catch(error => {
        this.error = error;
        alert("FAILURE" + error);
         //this.error = error;
   });
    }
 
 /* javaScipt functions start */ 
    openModal() {    
        // to open modal window set 'bShowModal' tarck value as true
        this.bShowModal = true;
    }
    closeModal() {    
        // to open modal window set 'bShowModal' tarck value as true
        this.bShowModal = false;
    }
  
     
}

APEX CONTROLLER

public with sharing class PriceFetch {
    @AuraEnabled(cacheable=true)
    public static List<Price__c> getAccountList() {
        System.debug('HII');
        return [SELECT Id,  Name
            FROM Price__c ];
    }
    @AuraEnabled(cacheable=true)
    public static Double calculate2Numbers(Double unitRate,Double addtnlCost, Double discount){
     
        return ((unitRate+addtnlCost)-discount);
    }
    @AuraEnabled(cacheable = true)
    public static List<Unit__c> getUnit(Id projId) {
      
        return [SELECT Id,  Name FROM Unit__c where Project__c = :projId ];
    }
    @AuraEnabled
    public static Boolean newPrice(Date entryDate, String enqName, Id proj, Id unit,Double unitRate,Double addtnlCost, Double discount,Double agreeCost, String rem ){
     
       Price__c price = new Price__c();
       price.Date__c = entryDate;
       price.Name = enqName;
       price.Project__c = proj;
       price.Unit__c = unit;
       price.Unit_Rate__c = unitRate;
       price.Additional_cost__c = addtnlCost;
       price.Discount__c = discount;
       price.Agreement_cost__c = agreeCost;
       price.Remarks__c = rem;
       try {
        insert price;
        return true;
           
       } catch (Exception e) {
           throw new AuraHandledException('exceptionText' + e.getMessage());
         
       }
      
    }


 
}
In the js file, there is a method handleClick(), inside that method, I am trying to refresh the lightning:datatable after saving some data into it, but its not getting refreshed. Is there any mistake in my code?
I am working in Visual studio code. On the click of a lightning:button, I am calling a javascript method, inside the method I am calling a visual force page using window.open(url), submiting the form in visual force page, I am calling the apex class method to send an email. I got the message as 'Email Sent !!!,  but the mail was not received.

portion of JS

 openMail(event) {
 window.open('/apex/TestMail', 'Popup','height=500,width=600,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,status=no');
  
}
VF Page
TestMail


<apex:page controller="singleEmailExample">
 <apex:form >
Email Address : <apex:inputText value="{!toAddress}" />
 <apex:commandButton value="SendEmail" action="{!sendingEmail}"/> <br/>
  Email Status :<b> {!message}  </b>
 </apex:form>
</apex:page>

apex class

public with sharing class singleEmailExample {
    public string toAddress{get;set;}
    public string message{get;set;}
    public PageReference sendingEmail(){
        Messaging.SingleEmailMessage semail = new Messaging.SingleEmailMessage();
        String[] sendingTo = new String[]{toAddress};
        semail.setToAddresses(sendingTo);
        //String[] sendingToBccAdd = new String[]{‘XXXX@gmail.com’};
       // semail.setBccAddresses(sendingToBccAdd);
       // String[] sendingTocAdd = new String[]{‘XXXXX@gmail.com’};
      // semail.setCcAddresses(sendingTocAdd); */
        semail.setSubject('Single Email message Example');
        semail.setPlainTextBody('Hello!!!!!This is a test email to test single email message program');
        Messaging.sendEmail(new Messaging.SingleEmailMessage[] {semail});
        message='Email Sent !!!';
        return null;
    }
}

Please help me , I tried a lot, and got disappointed
I am working in Visual studio code, I am passing some values to this priceMail() method while calling from the js file. I have got the 'success' msg, but the mail is not send
 @AuraEnabled
    public static String priceMail(String name, String email, Double cost) {
        // Create an email message object
        String sMessage='';
        String subject = 'Price List';
        String body = 'Dear ' + name + '/n' + 'ggg' + cost;
        try{
        Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();
        String[] toAddresses = new String[] {email};
        mail.setToAddresses(toAddresses);
        mail.setSubject(subject);
        mail.setPlainTextBody(body);
        // Pass this email message to the built-in sendEmail method 
        // of the Messaging class
       Messaging.sendEmail( new Messaging.SingleEmailMessage[] { mail });
        sMessage='Success';
        }
        catch(Exception ex){
            sMessage=ex.getLineNumber()+'\n'+ex.getCause()+'\n'+ex.getMessage()+'\n'+ex.getStackTraceString();
        }
        return sMessage;
      
    
    }

 
public class AccountProcessor {
 
    public AccountProcessor() {
      
    }
    public static void countContacts() {
       
        Account acc = [Select Id, Name from Account where name = 'chandra'];
Contact[] con = [SELECT Id,FirstName,LastName FROM Contact where AccountId =:acc.Id];
        acc.Number_of_Contacts__c = con.size();
        update acc;
        
        
    }
}
I am trying to update the 'Number of contacts' field in Account object.
Tried to call the countContacts() from anonymous window, But this exception occurs
AccountProcessor.countContacts();

Hello everyone, i need any help

i passed in the step5 superbadge aura components specialist however when i click on picture, it's no Highlight the Selected Boat.

my code:

BoatSelect.evt

<aura:event type="APPLICATION">
    <aura:attribute name="boatId" type="String"/>
</aura:event>

BoatTile.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:registerEvent name="boatSelect" type="c:BoatSelect"/>
    <aura:attribute name="boat" type="Boat__c"/>
    <aura:attribute name="selected" type="Boolean" default="false"/>
    <lightning:button class="{!v.selected ? 'tile selected' : 'tile'}" onclick="{!c.onBoatClick}">
        <div style="{!'background-image: url(\'' + v.boat.Picture__c + '\')'}" class="innertile">
            <div class="lower-third">
                <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
            </div>
        </div>
    </lightning:button>
</aura:component>

BoatTileController.js
({
    onBoatClick: function(component, event, helper) {
        var boatId = component.get('v.boat.Id');
        var createEvent = component.getEvent('boatSelect');
        createEvent.setParams({
            'boatId': boatId
        });
        createEvent.fire();
        console.log('BoatTile=boatId: ' + boatId);
    }
})

BoatTile.css

.THIS.tile {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 220px;
    padding: 1px !important ;
    margin: 7px;
}
.THIS.tile.selected {
    border: 3px solid rgb(0, 112, 210);
}
.THIS .innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

BoatSearchResult.cmp
<aura:component controller="BoatSearchResults" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="BoatSelect" event="c:BoatSelect" action="{!c.onBoatSelect}"/>
    <aura:registerEvent name="formsubmit" type="c:FormSubmit"/>
    <aura:attribute name="boats" type="Boat__c[]"/>
    <aura:attribute name="boatTypeId" type="String"/>
    <aura:attribute name="selectedBoatId" type="String"/>
    <aura:method name="search" action="{!c.doSearch}">
        <aura:attribute name="boatTypeId" type="String"/>
    </aura:method>
    <lightning:layout horizontalAlign="center" verticalAlign="center" multipleRows='true'>
        <aura:if isTrue="{!v.boats.length > 0}">
            <lightning:layoutItem flexibility="grow">
                <aura:iteration items="{!v.boats}" var="boat">
                    <c:BoatTile boat="{!boat}" selected="{!boat.Id == v.selectedBoatId ? true : false}"/>
                </aura:iteration>
            </lightning:layoutItem>
            <aura:set attribute="else">
                <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                    <ui:outputText value="No boats found"/>
                </lightning:layoutItem>
            </aura:set>
        </aura:if>
    </lightning:layout>
</aura:component>

BoatSearchResultController.js
({
    doInit: function(component, event, helper) {
        helper.onSearch(component);
    },
    doSearch: function(component, event, helper) {
        var params = event.getParam('arguments');
        component.set('v.boatTypeId', params.boatTypeId);
        helper.onSearch(component);
    },
    onBoatSelect: function(component, event, helper) {
        var params = event.getParam('boatId');
        component.set('v.selectedBoatId', params);
    }
})