Clone Record with lightning web component

Question

I want to clone the template, and I want its name to be a concatination between the name of the template that I cloned with the id of the sales that I selected, as a result I want to have a template that like name: "idSalesSelected-NameOfTheTemplateCloned" .

The problem I have now is that I get the templateName as : undifened-undefined and how I can interpret this processing in clone button ?

==> Apex Class :

  @AuraEnabled (cacheable=true)

  public static List<String> getSales(){
  List<Sales__c> orgs = [SELECT  Name  FROM Sales__c ];
  List<String> names = new List<String>();
        for(Sales__c org : orgs){
            names.add(org.Name);
        }
        return names;
      }

      @AuraEnabled (cacheable=true)

      public static Template__c getFormTemplateName(){

        Template__c  template = [SELECT name FROM Template__c LIMIT 1];

        Template__c  eCopy = template .clone( false, false, false, false );

        return eCopy;
      }


      @AuraEnabled (cacheable=true)

      public static Sales__c  getSalesId(){

        Sales__c  salesName = [SELECT  SAP_Sales__c FROM Sales__c LIMIT 1];

        return salesName;
      }


     
}

==> JS

 lstSelected = [];
    @track lstOptions = [];
    @track sales = [];
    @track sales2 = [];
    @track objectFields = [];
    @track templateName;
  
    @wire(getSales)
    getSales({ error, data }) {
        console.log('teste méthode ');
        console.log('teste data '+data);
        if (data) {
            let option = [];
            for (let key in data) {
                option.push({ label: data[key], value: key });
            }
            this.sales = option;
            this.sales2 = option;
        } else if (error) {
            console.log('error' + error);
        }
    }

    closeQuickAction() {
        this.dispatchEvent(new CloseActionScreenEvent());
    }
 
// New US
   
@wire(getFormTemplateName) formTem;
      
get Name() {
    return this.formTem.data  ? getSObjectValue(this.formTem.data, NAME_FIELD) : '';
    
}

@wire(getSalesId) salesOrg;
      
get SAP_Sales__c() {
    return this.salesOrg.data  ? getSObjectValue(this.salesOrg.data, SAP_Sales_FIELD) : '';
    
}

get templateName() {
    return `${this.SAP_Sales_FIELD} ${this.Name_FIELD}`;
}

connectedCallback(){
    console.log('*******************************');
    this.templateName = this.SAP_Sales_FIELD + "-" + this.Name_FIELD;
    console.log(this.templateName);

    
}

==> HTML

<template>
    <lightning-card title="  Duplicate Form ">
            <lightning-dual-listbox name="getSales"
                                    values={sales} 
                                    options={sales}
                                    ></lightning-dual-listbox>
<br><br><br>
               
            <div class="slds-modal__footer">
                <button class="slds-button slds-button_neutral" aria-label="Cancel and close"  type="Cancel" onclick={closeQuickAction}>Cancel</button>
                <button class="slds-button slds-button_brand">Clone</button>
              </div>
           


             

    </lightning-card>
</template>

This is what I added :

handleOnChange(event){
    this.selectedId = event.detail.value;
}

clone(){
    getFormTemplateName({TemplateId : this.recordId})
    .then(data => {
        console.log('data is '+data)

        this.nameTem = data.Name;
        console.log('nom est'+this.nameTem);
    }).catch(err =>  
            console.log('une erreur existe 1'+JSON.stringify(err)))  

    getSalesId({TemplateId : this.recordId})
            .then(data => {
 
this.sapid = data.SAP_Sales__c ;
console.log('sap est '+this.sapid);
}).catch(err => 
            
    console.log('une erreur existe 2'+JSON.stringify(err)))  

this.templateName = this.sapid+ "-"+ this.nameTem ;
console.log('template name is '+this.templateName);

}

}
   

Answer 1

1. If you check the documentation of the sObject clone() method, you can see that if you wish to create a completely separate clone (deep copy) that does not reference the original object's field, you have to pass the second parameter as true, if not, you are just creating a shallow copy of the original object and when modifying a field, it will affect the original.

2. On your dual list box, you have to implement a method associated with the onchange event, like this:

   <lightning-dual-listbox name="getSales"
                                values={sales} 
                                options={sales}
                                onchange={handleOnChange}
                                ></lightning-dual-listbox>
   

Then on the js something like this:

handleOnChange(event){
      this.selectedId = event.detail.value;
}

If you wish to make a separate clone of the original object and assign a different name to it, you just have to do

@AuraEnabled (cacheable=true)
public static Template__c getFormTemplateName(String salesId){

    Template__c  template = [SELECT name FROM Template__c LIMIT 1];

    Template__c  eCopy = template .clone( false, true, false, false );
    eCopy.Form_TemplateID__c = salesId + template.Name;

    return eCopy;
}

Then, link your clone button to a method that calls the getFormTemplateName and pass the sales id as parameter, something like:

clone(){
     getFormTemplateName({salesId: this.selectedId})
     .then(result => console.log(result)).catch(err => console.log(err))
}

You wish in this case to call imperatively the apex method, instead of wiring it, because you wish to select the id first to then call the method.

Just an advice: name better your methods and variables. "getFormTemplateName" doesn't indicate a cloning process, it just suggests that you are fetching a name of a template and nothing else. Something like "cloneTemplate" or "getCopiedFormTemplate" is more adecuate for your scenario.