Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Cloud EliteCloud Elite 

need help with lightning component

hello all, 

i put together a lighenting componet with a control to present the lead record fields in table format, however, it is not working. the table came correct but not responsive. i need to be able to edit the fields on it and also save and cancel if edited. i tried lightening data table but it does not list the data/fields in the format it need it. here is my code so far: 

component: 
  
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="lead" type="Lead"/>
			<lightning:recordViewForm aura:id="viewForm" recordId="{!v.lead.Id}" objectApiName="Lead">
                 <div class="slds-media">
                  <div class="slds-scope">
    <lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />
    <div class="slds-table_edit_container slds-is-relative">
       <table class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_cell-buffer"> 
        <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered"> 
        <thead>
            <tr class="slds-text-title_caps slds-text-heading--label">
                <th scope="col" class="slds-cell-buffer_left">
                  <div class="slds-truncate" title="Class">Class</div>  
                </th>
                <th scope="col" class="slds-cell-buffer_left">
                  <div class="slds-truncate" title="Scheduled">Scheduled</div>      
                </th>
                <th scope="col" class="slds-cell-buffer_left">
                 <div class="slds-truncate" title="Claimed">Claimed</div>      
                </th>
                <th scope="col" class="slds-cell-buffer_left">
                 <div class="slds-truncate" title="Allowed">Allowed</div>       
                </th>
                <th scope="col" class="slds-cell-buffer_left">
                  <div class="slds-truncate" title="CUD">CUD</div>      
                </th>
                <th scope="col" class="slds-cell-buffer_left">
                 <div class="slds-truncate" title="Status">Status</div>       
                </th>     
            </tr>
        </thead>
        <tbody>
            <tr>
                <td scope="row" >
                    Secured
                </td>
                <td>
                 <lightning:outputField fieldName="Secured_Scheduled_Amount__c"/>
                </td>
                <td> 
                  <lightning:outputField fieldName="Secured_Claimed_Amount__c"/>
                </td>
                <td>
                  <lightning:outputField fieldName="Secured_Allowed_Amount__c"/>
                </td>
                <td>
                    <lightning:outputField fieldName="Secured_CUD__c"/>
                </td>
                <td>
                    <lightning:outputField fieldName="Secured_Claim_Status__c"/>
                </td>
            </tr>
            <tr>
                <td scope="row" >
                    Unsecured 
                </td>
                <td>
                  <lightning:outputField fieldName="Unsecured_Scheduled_Amount__c"/>
                </td>
                <td> 
                  <lightning:formattedNumber value="{!v.Lead.Unsecured_Claimed_Amount__c}" style="currency"/>
                </td>
                <td>
                  <lightning:formattedNumber value="{!v.Lead.Unsecured_Allowed_Amount__c}" style="currency"/>
                </td>
                <td>
                    {!v.Lead.UnSecured_CUD__c}
                </td>
                <td>
                    {!v.Lead.Unsecured_Claim_Status__c}
                </td>
            </tr>
            <tr>
                <td scope="row" >
                    Priority 
                </td>
                <td>
                  <lightning:formattedNumber value="{!v.Lead.Priority_Scheduled_Amount__c}" style="currency"/>
                </td>
                <td> 
                  <lightning:formattedNumber value="{!v.Lead.Priority_Claimed_Amount__c}" style="currency"/>
                </td>
                <td>
                  <lightning:formattedNumber value="{!v.Lead.Priority_Allowed_Amount__c}" style="currency"/>
                </td>
                <td>
                    {!v.Lead.Priority_CUD__c}
                </td>
                <td>
                    {!v.Lead.Priority_Claim_Status__c}
                </td>
            </tr>
            <tr>
                <td scope="row" >
                    Admin 
                </td>
                <td>
                <lightning:formattedNumber value="{!v.Lead.Admin_Scheduled_Amount__c}" style="currency"/> 
                </td>
                <td> 
                 <lightning:formattedNumber value="{!v.Lead.Admin_Claimed_Amount__c}" style="currency"/>
                </td>
                <td>
                 <lightning:formattedNumber value="{!v.Lead.Admin_Allowed_Amount__c}" style="currency"/>
                </td>
                <td>
                    {!v.Lead.Admin_CUD__c}
                </td>
                <td>
                    {!v.Lead.Admin_Claim_Status__c}
                </td>
            </tr>
            <tr>
                <td scope="row" >
                    Admin503B 
                </td>
                <td>
                 <lightning:formattedNumber value="{!v.Lead.Admin503B_Scheduled_Amount__c}" style="currency"/>
                </td>
                <td> 
                 <lightning:formattedNumber value="{!v.Lead.Admin503B_Claimed_Amount__c}" style="currency"/>
                </td>
                <td>
                 <lightning:formattedNumber value="{!v.Lead.Admin503B_Allowed_Amount__c}" style="currency"/>
                </td>
                <td>
                    {!v.Lead.Admin503B_CUD__c}
                </td>
                <td>
                    {!v.Lead.Admin503B_Claim_Status__c}
                </td>
            </tr>
            <tr>
                <td scope="row" >
                    Totals  
                </td>
                <td>
                   <lightning:formattedNumber value="{!v.Lead.Scheduled_Total__c}" style="currency"/> 
                </td>
                <td>
                  <lightning:formattedNumber value="{!v.Lead.Claimed_Total__c}" style="currency"/>
                </td>
                <td>
                   <lightning:formattedNumber value="{!v.Lead.Allowed_Total__c}" style="currency"/>
                </td>
                <td>
                    
                </td>
                <td>
                    
                </td>
            </tr>
        </tbody> 
    </table>
    </table>
                      </div>
    </div>
                </div>
	</lightning:recordViewForm>
</aura:component>
controller: 
  
({
    navToRecord : function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.lead.Id")
        });
        navEvt.fire();
    },
    editRecord : function(component, event, helper) {
    var editRecordEvent = $A.get("e.force:editRecord");
    editRecordEvent.setParams({
        "recordId": component.get("v.lead.Id")
    });
    editRecordEvent.fire();
}
})


 
Best Answer chosen by Cloud Elite
Alain CabonAlain Cabon
Hi,

You don't need a datable given that there is no loop here.  There is only one record of a lead shown with a nice SLDS charter.

Inline editiing is not standard in Lex component (excepted for lightning:listView) 

    <lightning:outputField fieldName="Secured_Scheduled_Amount__c"/> is not transformed automatically in <lightning:inputField fieldName="Secured_Scheduled_Amount__c"/>  like with a Visualforce page.

To mimic the inline editing, we need to add all the pencils and use <aura:if> like in this sample:   https://www.forcetalks.com/blog/inline-edit-support-in-custom-component-in-salesforce-lightning/

Pencil button: 
 <button onclick="{!c.EditName}" class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Name">

if ... else ... end-if is written like that in a component:

<aura:if isTrue="{!v.nameEditMode == false}">
               <lightning:outputField>  <button onclick="{!c.EditName}" class="slds-button  slds-cell-edit__button">
<aura:set attribute="else">      
             <lightning:inputField>
</aura:if> 
  
EditName : function(component,event,helper){  
        component.set("v.nameEditMode", true);
        setTimeout(function(){
            component.find("inputId").focus();
        }, 100);
    },

<aura:if isTrue="{!v.nameEditMode == false}">
        <span class="slds-truncate" title="Name">{!v.singleAccount.Name}</span>
        <button onclick="{!c.EditName}" class="slds-button  slds-cell-edit__button" tabindex="0" title="Edit Name">
<aura:set attribute="else">   
      <ui:inputText   value="{!v.singleAccount.Name}" />  
</aura:if> 
<aura:if isTrue="{!v.nameEditMode == false}">
                    <span class="slds-truncate" title="Name">{!v.singleAccount.Name}</span>
                    <button onclick="{!c.EditName}" class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Name">
                        <lightning:icon iconName="utility:edit" size="xx-small" alternativeText="edit"/>
                    </button>
  <!-- Inline Edit Section in else case-->                     
     <aura:set attribute="else">                        
 <section  tabindex="0" class="slds-popover slds-popover_edit" role="dialog" style="position: absolute; top: 0px">                             <div class="slds-popover__body">                                
 <div class="slds-form-element slds-grid slds-wrap">                                  
   <div class="slds-form-element__control slds-grow">                                       
  <ui:inputText class="slds-input" labelClass="slds-form-element__label slds-form-element__label_edit slds-no-flex"                                                       aura:id="inputId"                                                       blur="{!c.closeNameBox}"                                                       change="{!c.onNameChange}"                                                       required="true"                                                       label="Name"                                                       value="{!v.singleAccount.Name}" />          
      </div>                                
    </div>                             
  </div>
</aura:if>

https://www.forcetalks.com/blog/inline-edit-support-in-custom-component-in-salesforce-lightning/

When there are many recurrent code like here, the temptation is to create a new component with parameters to encapsulate the code above.

Without a new component, you can test this solution on one field and just duplicate it (it is not very complicated but your page will be quite huge at the end).

That could be interesting to find a new workaround on forums less verbose and I will try to write the encapsulated component meanwhile.

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

You need to use child component for inline editing in lightning slds table. However, if you use lightning dataTable then one component is sufficient.

Please refer to the below links which might help you further with the above issue.

http://sfdcmonkey.com/2017/12/08/lightning-data-table-inline-editing/

https://www.linkedin.com/pulse/lightning-table-edit-view-delete-actions-kalloori-ramesh/

https://akotha.com/miscellaneous/inline-editing-in-lightning-data-table-salesforce-summer-18-release-update/


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas
Alain CabonAlain Cabon
Hi,

You don't need a datable given that there is no loop here.  There is only one record of a lead shown with a nice SLDS charter.

Inline editiing is not standard in Lex component (excepted for lightning:listView) 

    <lightning:outputField fieldName="Secured_Scheduled_Amount__c"/> is not transformed automatically in <lightning:inputField fieldName="Secured_Scheduled_Amount__c"/>  like with a Visualforce page.

To mimic the inline editing, we need to add all the pencils and use <aura:if> like in this sample:   https://www.forcetalks.com/blog/inline-edit-support-in-custom-component-in-salesforce-lightning/

Pencil button: 
 <button onclick="{!c.EditName}" class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Name">

if ... else ... end-if is written like that in a component:

<aura:if isTrue="{!v.nameEditMode == false}">
               <lightning:outputField>  <button onclick="{!c.EditName}" class="slds-button  slds-cell-edit__button">
<aura:set attribute="else">      
             <lightning:inputField>
</aura:if> 
  
EditName : function(component,event,helper){  
        component.set("v.nameEditMode", true);
        setTimeout(function(){
            component.find("inputId").focus();
        }, 100);
    },

<aura:if isTrue="{!v.nameEditMode == false}">
        <span class="slds-truncate" title="Name">{!v.singleAccount.Name}</span>
        <button onclick="{!c.EditName}" class="slds-button  slds-cell-edit__button" tabindex="0" title="Edit Name">
<aura:set attribute="else">   
      <ui:inputText   value="{!v.singleAccount.Name}" />  
</aura:if> 
<aura:if isTrue="{!v.nameEditMode == false}">
                    <span class="slds-truncate" title="Name">{!v.singleAccount.Name}</span>
                    <button onclick="{!c.EditName}" class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Name">
                        <lightning:icon iconName="utility:edit" size="xx-small" alternativeText="edit"/>
                    </button>
  <!-- Inline Edit Section in else case-->                     
     <aura:set attribute="else">                        
 <section  tabindex="0" class="slds-popover slds-popover_edit" role="dialog" style="position: absolute; top: 0px">                             <div class="slds-popover__body">                                
 <div class="slds-form-element slds-grid slds-wrap">                                  
   <div class="slds-form-element__control slds-grow">                                       
  <ui:inputText class="slds-input" labelClass="slds-form-element__label slds-form-element__label_edit slds-no-flex"                                                       aura:id="inputId"                                                       blur="{!c.closeNameBox}"                                                       change="{!c.onNameChange}"                                                       required="true"                                                       label="Name"                                                       value="{!v.singleAccount.Name}" />          
      </div>                                
    </div>                             
  </div>
</aura:if>

https://www.forcetalks.com/blog/inline-edit-support-in-custom-component-in-salesforce-lightning/

When there are many recurrent code like here, the temptation is to create a new component with parameters to encapsulate the code above.

Without a new component, you can test this solution on one field and just duplicate it (it is not very complicated but your page will be quite huge at the end).

That could be interesting to find a new workaround on forums less verbose and I will try to write the encapsulated component meanwhile.
This was selected as the best answer
Cloud EliteCloud Elite
Alain, I tried this solution with using everything the same and only two fields on my end. When I added the component to the page layout it lagged. It does not respond. Now I am stuck I can’t remove it. Working on it.
Cloud EliteCloud Elite
I also tried using datatable but it does not work, it list the fields in columns while i need to list them in rows and columns. the solution you posted Alain may work. but i am finding it complicated to list my rows and columns within it. 
Alain CabonAlain Cabon
Honestly, it is not easy to play with the Lex components plus a complication with an approximated imitation of the inline editing (complication in addition). If Salesforce don't provide the inline editing in standard, that suggests a technical problem not so easy to solve with lex components.

It is simpler to just have the <lightning:inputField> without the <aura:if> at first.

The posted example works with its own ids ( aura:id="inputId" ).

You have already built a great component but the inline editing will remain complicated.
I will do some tries because it is an interesting problem.

"I can’t remove it": if you close all and reopen the component, that should be possible.