Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Akash v 6Akash v 6 

How to Concatenate these two field and show in the table from the lightning form

Hi All,

I have Lighting Form with 2 Field if the uses click on the add button then concatenate these two fields and show in the table

2
Best Answer chosen by Akash v 6
AmarpreetAmarpreet
Hi Akash,

Please refer below Code: 

Component: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller= "YouTubeSearchController">
    <aura:attribute name="value1" type="String" default="" />
    <aura:attribute name="value2" type="String" default="" />
    <aura:attribute name="newValueList" type="List" default="[]" />
    
    <lightning:layout horizontalAlign="space">
        <lightning:layoutItem size="4">
            <lightning:input name="input1" value="{!v.value1}" label="Field 1" />
        </lightning:layoutItem>
        <lightning:layoutItem size="4">
            <lightning:input name="input2" value="{!v.value2}" label="Field 2" />
        </lightning:layoutItem>
        
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem size="4">
                <lightning:button variant="base" label="Add Field" title="Add Field" onclick="{! c.handleClick }"/>
            </lightning:layoutItem>
        </lightning:layout>
        
    </lightning:layout>
    <lightning:layout horizontalAlign="space">
        <lightning:layoutItem size="4">
            <aura:iteration items="{!v.newValueList}" var="newVal">
                {!newVal} <br/>
            </aura:iteration>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

JS Controller:  
({
    handleClick : function(component, event, helper) {
        var value1 = component.get("v.value1");
        var value2 = component.get("v.value2");
        
        var newVal = value1+value2;
        
        var newValueList = component.get("v.newValueList");
        newValueList.push(newVal);
        component.set("v.newValueList", newValueList);
                    }
                  
})

 

All Answers

AmarpreetAmarpreet
Hi Akash,

Please refer below Code: 

Component: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller= "YouTubeSearchController">
    <aura:attribute name="value1" type="String" default="" />
    <aura:attribute name="value2" type="String" default="" />
    <aura:attribute name="newValueList" type="List" default="[]" />
    
    <lightning:layout horizontalAlign="space">
        <lightning:layoutItem size="4">
            <lightning:input name="input1" value="{!v.value1}" label="Field 1" />
        </lightning:layoutItem>
        <lightning:layoutItem size="4">
            <lightning:input name="input2" value="{!v.value2}" label="Field 2" />
        </lightning:layoutItem>
        
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem size="4">
                <lightning:button variant="base" label="Add Field" title="Add Field" onclick="{! c.handleClick }"/>
            </lightning:layoutItem>
        </lightning:layout>
        
    </lightning:layout>
    <lightning:layout horizontalAlign="space">
        <lightning:layoutItem size="4">
            <aura:iteration items="{!v.newValueList}" var="newVal">
                {!newVal} <br/>
            </aura:iteration>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

JS Controller:  
({
    handleClick : function(component, event, helper) {
        var value1 = component.get("v.value1");
        var value2 = component.get("v.value2");
        
        var newVal = value1+value2;
        
        var newValueList = component.get("v.newValueList");
        newValueList.push(newVal);
        component.set("v.newValueList", newValueList);
                    }
                  
})

 
This was selected as the best answer
Akash v 6Akash v 6
Hi Amarpreet,
Thanks for your time to reply my question.
Your solution given me some idea..but I was trying to put the cancatenatee value in the table with "Edit" and "Remove" but not sure how to achive that..

Thanks again..
AmarpreetAmarpreet
Are you saving the field values in any object as well?
Akash v 6Akash v 6
No I am not storing the record in the database..just shiwing the the string value in table..
AmarpreetAmarpreet
Okay, you can use "lightning:datatable" to show the field values in a table with Edit and Remove functionality.
AmarpreetAmarpreet
Hi Akash,

Below code should work for you:

Component: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller= "YouTubeSearchController">
    <aura:attribute name="value1" type="String" default="" />
    <aura:attribute name="value2" type="String" default="" />
    <aura:attribute name="idsList" type="Integer" default="1" />
    
    <aura:attribute name="columns" type="List" default="[]"/>
    <aura:attribute name="data" type="List" default="[]"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <lightning:layout horizontalAlign="space">
        <lightning:layoutItem size="4">
            <lightning:input name="input1" value="{!v.value1}" label="Field 1" />
        </lightning:layoutItem>
        <lightning:layoutItem size="4">
            <lightning:input name="input2" value="{!v.value2}" label="Field 2" />
        </lightning:layoutItem>
        
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem size="4">
                <lightning:button variant="base" label="Add Field" title="Add Field" onclick="{! c.handleClick }"/>
            </lightning:layoutItem>
        </lightning:layout>
        
    </lightning:layout>
    <lightning:layout horizontalAlign="space">
        
        
        <lightning:layoutItem size="4">
            <lightning:datatable
                                 columns="{! v.columns }"
                                 data="{! v.data }"
                                 keyField="id" 
                                 onrowaction="{! c.handleRowAction }"
                                 hideCheckboxColumn="true"/>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

Controller:
  
({
    init:  function(component, event, helper) {
        component.set('v.columns', [
            {label: 'Concatenated Result', fieldName: 'concatenatedResult', type: 'text'},
            {label: 'View', type: 'button', initialWidth: 135, typeAttributes: { label: 'Edit', name: 'edit', title: 'Edit'}},
            {label: 'Remove', type: 'button', initialWidth: 135, typeAttributes: { label: 'Remove', name: 'remove', title: 'Remove'}}
        ]);  
    },
    handleClick : function(component, event, helper) {
        
        var listID= component.get("v.idsList");
        
        // concatenate Strings 
        var value1 = component.get("v.value1");
        var value2 = component.get("v.value2");
        var newVal = value1+value2;
        var data = component.get("v.data");
        var obj = {  "id": listID,
                   "concatenatedResult": newVal};
        data.push(obj);
        component.set("v.data", data);
        component.set("v.idsList", parseInt(component.get("v.idsList"))+1);
    },
    handleRowAction : function(component, event, helper) {
        var action = event.getParam('action');
        var row = event.getParam('row');
        var data = component.get('v.data');
        switch (action.name) {
            case 'edit':
                data = data.map(function(rowData) {
                    if (rowData.id == row.id) {
                        let name = prompt("Enter New Value", row.concatenatedResult);
                        if (name === null) {
                            return;
                        }
                        else{
                            rowData.concatenatedResult = name;
                            component.set("v.data", data);
                            alert(`New value "${name}" has been Updated`);
                        }
                    }
                });
                break;
            case 'remove':
                data = data.map(function(rowData) {
                    if (rowData.id == row.id) {
                        let confirmed = confirm("Are you sure?");
                        if (confirmed === true) {
                            data = data.filter(element => element.id != row.id);
                            component.set("v.data", data);
                            alert("This has been Deleted");
                        }
                        else{
                            return;
                        }
                    }
                });
                break;
        }
    }
})

 
Akash v 6Akash v 6
Thanks Amarpreet..

Let me try this code and let you know..

 
Akash v 6Akash v 6
Hi Amarpreet,

I tried this code and worked like Charm.. Thanks so much for this..

I have only one issue with Prompt window.. I tried to show a modal window but it is only show the prvious record value in the popup not the each row current record can you please guide me the how I can show the current row data in the modal pop.
 
AmarpreetAmarpreet
Could you please share your code that how are you creating and displaying records in modal pop up. I can help you in achieving the same.
Akash v 6Akash v 6
Sure Amarpreet,
Here is my pop code where the user will enter the fields and once click on save it it add to the table.
  
<aura:component implements="forceCommunity:availableForAllPageTypes"
access="global">

<aura:attribute name="isModalOpen" type="boolean" default="false"/>
<aura:attribute name="acc" type="Account" default="{'sobjectType' : 'Account'}"/>
<aura:handler name="init" value="{!this}" action="{!c.init}"/>

<aura:if isTrue="{!v.isModalOpen}">
             
        <!-- Modal/Popup Box starts here-->
        <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">
                 <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"> YourAddress </h2>
                    </header>
                  
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                            <fieldset class="slds-form-element slds-form-element_compound slds-form-element_address">
                                    <div class="slds-form-element__control">
                                      <div class="slds-form-element__row">
                                        <div class="slds-size_1-of-1">
                                          <div class="slds-form-element">
                                            <label class="slds-form-element__label" for="form-element-id-04"> Address 1</label>
                                            <div class="slds-form-element__control">
                                                <lightning:input aura:id="addressLine1Id" name="myname" value="{!v.acc.AddressLine1__c}"/>
                                            </div>
                                            <label class="slds-form-element__label" for="form-element-id-04">Mailing Address 2</label>
                                            <div class="slds-form-element__control">
                                                <lightning:input aura:id="addressLine2Id" name="myname" value="{!v.acc.AddressLine2__c}"/>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                      <div class="slds-form-element__row">
                                        <div class="slds-size_4-of-6">
                                          <div class="slds-form-element">
                                            <label class="slds-form-element__label" for="form-element-id-05">City</label>
                                            <div class="slds-form-element__control">
                                                    <lightning:input aura:id ="cityId" name="myname" value="{!v.acc.City__c}"/>
                                            </div>
                                          </div>
                                        </div>
                                       
                                      <div class="slds-form-element__row">
                                        <div class="slds-size_4-of-6">
                                          <div class="slds-form-element">
                                            <label class="slds-form-element__label" for="form-element-id-07">Zip/Postal Code</label>
                                            <div class="slds-form-element__control">
                                                    <lightning:input aura:id ="zipId" name="myname" value="{!v.acc.zip__c}"/>
                                            </div>
                                          </div>
                                        </div>
                                        </div>
                                       
                                      </div>
                                    </div>
                                  </fieldset>
                    </div>
                    <!--Modal/Popup Box Footer footer here-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral"
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand"
                                          label="Add"
                                          title="OK"
                                          onclick="{!c.saveAaccout}"/> 
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>

--
Thanks,
Akash



 
Akash v 6Akash v 6
Hi Amarpreet,

I tried many way but could not get the edit button working.. Here is my complete code could you please assist me with edit button..

Thanks again for your help.


cmp code:
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="value1" type="String" default="" />
    <aura:attribute name="value2" type="String" default="" />
    <aura:attribute name="idsList" type="Integer" default="1" />
    
    
    <aura:attribute name="isModalOpen" type="boolean" default="false"/>
	<aura:attribute name="acc" type="Account" default="{'sobjectType' : 'Account'}"/>
    
    <aura:attribute name="columns" type="List" default="[]"/>
    <aura:attribute name="data" type="List" default="[]"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <aura:if isTrue="{!v.isModalOpen}">
             
        <!-- Modal/Popup Box starts here-->
        <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">
                 <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"> YourAddress </h2>
                    </header>
                  
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                            <fieldset class="slds-form-element slds-form-element_compound slds-form-element_address">
                                    <div class="slds-form-element__control">
                                      <div class="slds-form-element__row">
                                        <div class="slds-size_1-of-1">
                                          <div class="slds-form-element">
                                            <label class="slds-form-element__label" for="form-element-id-04"> Address 1</label>
                                            <div class="slds-form-element__control">
                                                <lightning:input aura:id="addressLine1Id" name="myname" value="{!v.acc.AddressLine1__c}"/>
                                            </div>
                                            <label class="slds-form-element__label" for="form-element-id-04">Mailing Address 2</label>
                                            <div class="slds-form-element__control">
                                                <lightning:input aura:id="addressLine2Id" name="myname" value="{!v.acc.AddressLine2__c}"/>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                      <div class="slds-form-element__row">
                                        <div class="slds-size_4-of-6">
                                          <div class="slds-form-element">
                                            <label class="slds-form-element__label" for="form-element-id-05">City</label>
                                            <div class="slds-form-element__control">
                                                    <lightning:input aura:id ="cityId" name="myname" value="{!v.acc.City__c}"/>
                                            </div>
                                          </div>
                                        </div>
                                       
                                      <div class="slds-form-element__row">
                                        <div class="slds-size_4-of-6">
                                          <div class="slds-form-element">
                                            <label class="slds-form-element__label" for="form-element-id-07">Zip/Postal Code</label>
                                            <div class="slds-form-element__control">
                                                    <lightning:input aura:id ="zipId" name="myname" value="{!v.acc.zip__c}"/>
                                            </div>
                                          </div>
                                        </div>
                                        </div>
                                       
                                      </div>
                                    </div>
                                  </fieldset>
                    </div>
                    <!--Modal/Popup Box Footer footer here-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral"
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand"
                                          label="Add"
                                          title="OK"
                                          onclick="{!c.handleClick}"/> 
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
    
    
    <lightning:layout horizontalAlign="space">
       
        
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem size="4">
                <lightning:button variant="base" label="Add Field" title="Add Field" onclick="{! c.OpenPop }"/>
            </lightning:layoutItem>
        </lightning:layout>
        
    </lightning:layout>
    <lightning:layout horizontalAlign="space">
        
        
        <lightning:layoutItem size="4">
            <lightning:datatable
                                 columns="{! v.columns }"
                                 data="{! v.data }"
                                 keyField="id" 
                                 onrowaction="{! c.handleRowAction }"
                                 hideCheckboxColumn="true"/>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

js code:
  
({
    init:  function(component, event, helper) {
        component.set('v.columns', [
            {label: 'Concatenated Result', fieldName: 'concatenatedResult', type: 'text'},
            {label: 'View', type: 'button', initialWidth: 135, typeAttributes: { label: 'Edit', name: 'edit', title: 'Edit'}},
            {label: 'Remove', type: 'button', initialWidth: 135, typeAttributes: { label: 'Remove', name: 'remove', title: 'Remove'}}
        ]);  
    },
    handleClick : function(component, event, helper) {
        
        var listID= component.get("v.idsList");
       
        
        var address1 = component.find("addressLine1Id").get("v.value");
        var address2 = component.find("addressLine2Id").get("v.value");
        var citycode =  component.find("cityId").get("v.value");
        var zipcode =  component.find("zipId").get("v.value");
        
        
        // concatenate Strings 
       
        var newVal = address1+','+address2+','+citycode+','+zipcode;
        var data = component.get("v.data");
        var obj = {  "id": listID,
                   "concatenatedResult": newVal};
        data.push(obj);
        component.set("v.data", data);
        component.set("v.idsList", parseInt(component.get("v.idsList"))+1);
    },
     closeModel: function(component, event, helper) {
    // Set isModalOpen attribute to false  
     component.set("v.isModalOpen", false);
    },
    
    OpenPop: function(component, event, helper) {
    // Set isModalOpen attribute to false  
     component.set("v.isModalOpen", true);
    },
    handleRowAction : function(component, event, helper) {
        var action = event.getParam('action');
        var row = event.getParam('row');
        var data = component.get('v.data');
        switch (action.name) {
            case 'edit':
                data = data.map(function(rowData) {
                    if (rowData.id == row.id) {
                        let name = prompt("Enter New Value", row.concatenatedResult);
                        if (name === null) {
                            return;
                        }
                        else{
                            rowData.concatenatedResult = name;
                            component.set("v.data", data);
                            alert(`New value "${name}" has been Updated`);
                        }
                    }
                });
                break;
            case 'remove':
                data = data.map(function(rowData) {
                    if (rowData.id == row.id) {
                        let confirmed = confirm("Are you sure?");
                        if (confirmed === true) {
                            data = data.filter(element => element.id != row.id);
                            component.set("v.data", data);
                            alert("This has been Deleted");
                        }
                        else{
                            return;
                        }
                    }
                });
                break;
        }
    }
})

--
Thanks
Akash