function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Kalaivani KKalaivani K 

I need code with inline edit to show the text box when th value selected from drop down . If you any code please let me know.

I need Aura component code with inline edit (as shown in below image format) to show the text box when th value selected from drop down . If you any code please let me know.User-added image
Deepali KulshresthaDeepali Kulshrestha
Hi Kalaivani,
You can use "lightning:recordEditForm" for inline editing. A lightning:recordEditForm component is a wrapper component that accepts a record ID and is used to display one or more fields and labels associated with that record. To create editable fields, use the lightning:inputField component inside the lightning:recordEditForm. The lightning:outputField component and other display components such as lightning:formattedName can be used to display read-only information in your form. If you want to display read-only data only, use lightning:recordForm or lightning:recordViewForm.
Yo can go through the following code as it may be helpful in solving your problem:
Component: 
<aura:component>
    <aura:attribute name="disabled" type="Boolean" default="false" />
    <aura:attribute name="saved" type="Boolean" default="false" />
    <aura:attribute name="showSpinner" type="Boolean" default="true" />
    <aura:if isTrue="{!v.showSpinner}">
        <lightning:spinner />
    </aura:if>
    <aura:if isTrue="{!!v.saved}">
        <lightning:recordEditForm
            onload="{!c.handleLoad}"
            onsubmit="{!c.handleSubmit}"
            onsuccess="{!c.handleSuccess}"
            recordId="a00R0000000jq5eIAA"
            objectApiName="Account">
            <!-- the messages component is for error messages -->
            <lightning:messages />

            <lightning:inputField fieldName="Name" />
            <lightning:inputField fieldName="AccountNumber" />
            <lightning:inputField fieldName="AccountSource" />
            <lightning:inputField fieldName="AnnualRevenue" />
            <lightning:inputField fieldName="BillingCity" />
            <lightning:inputField fieldName="BillingCountry" />
            <lightning:inputField fieldName="BillingStreet" />
            <div class="slds-m-top_medium">
                <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
            </div>
        </lightning:recordEditForm>
        <aura:set attribute="else">
            <p>Saved!</p>
        </aura:set>
    </aura:if>

</aura:component>

Controller:
({

    handleLoad: function(cmp, event, helper) {
        cmp.set('v.showSpinner', false);
    },

    handleSubmit: function(cmp, event, helper) {
        cmp.set('v.disabled', true);
        cmp.set('v.showSpinner', true);
    },

    handleError: function(cmp, event, helper) {
        // errors are handled by lightning:inputField and lightning:nessages
        // so this just hides the spinnet
        cmp.set('v.showSpinner', false);
    },

    handleSuccess: function(cmp, event, helper) {
        cmp.set('v.showSpinner', false);
        cmp.set('v.saved', true);
    }
});

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
Kalaivani KKalaivani K
Thank You Deepali!!!!! Its working..Do you have any idea with Inline Edit(with pen symbol to Edit)  component in similar way...
Deepali KulshresthaDeepali Kulshrestha
Hi Kalaivani,

You can use the "utility: edit" button icon to fulfill your need and use an aura: if every time the button is clicked. Please refer to the following code snippets as it  may assist you in solving your problem: 
<div class="slds-p-around_medium">
            <table class="slds-table slds-table_bordered slds-table_striped slds-scrollable_x" style="table-layout: fixed;">
                <thead>
                <tr class="slds-line-height_reset">
                    <th class="slds-text-title_caps slds-cell-wrap " scope="col" title="NAME">
                        <div class="slds-truncate slds-text-align_center">NAME</div>
                    </th>
                    <th class="slds-text-title_caps slds-cell-wrap " scope="col" title="BASE">
                        <div class="slds-truncate slds-text-align_center">BASE</div>
                    </th>
                    <th class="slds-text-title_caps slds-cell-wrap " scope="col" title="AMOUNT">
                        <div class="slds-truncate slds-text-align_center">AMOUNT</div>
                    </th>
                    <th class="slds-text-title_caps slds-cell-wrap " scope="col" title="PRICE">
                        <div class="slds-truncate slds-text-align_center">PRICE</div>
                    </th>
                    <th class="slds-text-title_caps slds-cell-wrap " scope="col" title="DISCOUNT">
                        <div class="slds-truncate slds-text-align_center">DISCOUNT</div>
                    </th>
                    <th class="slds-text-title_caps slds-cell-wrap " scope="col" title="TOTAL">
                        <div class="slds-truncate slds-text-align_center">TOTAL</div>
                    </th>
                    <th class="slds-text-title_caps slds-cell-wrap " scope="col" title="ACTION">
                        <div class="slds-truncate slds-text-align_center">ACTION</div>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr class="slds-hint-parent">
                                <th scope="row" class="slds-cell-wrap ">
                                    <div class="slds-truncate slds-text-align_center"><b>Case1</b></div>
                                </th>
                                <th scope="row" class="slds-cell-wrap ">
                                    <div class="slds-truncate slds-text-align_center">0</div>
                                </th>
                                <td class="slds-cell-wrap ">
                                    <aura:if isTrue="{!pro.isEditable}">
                                        <lightning:input label="" variant="label-hidden" type="number" value="0" name="quantity" onchange="{!c.changeQuantity}"/>
                                        <aura:set attribute="else">
                                            <div align="right" class="slds-truncate slds-text-align_center">
                                                    1
                                            </div>
                                        </aura:set>
                                    </aura:if>
                                </td>
                                <th scope="row" class="slds-cell-wrap ">
                                    <div class="slds-truncate slds-text-align_center">120</div>
                                </th>
                                <td class="slds-cell-wrap slds-text-align_center">
                                    <aura:if isTrue="{!pro.isEditable}">
                                        <lightning:input label="" variant="label-hidden" type="number" value="0%" name="discount" onchange="{!c.changeQuantity}"/>
                                        <aura:set attribute="else">
                                            <div align="right" class="slds-truncate slds-text-align_center">
                                                    0%
                                            </div>
                                        </aura:set
                                    </aura:if>
                                </td>
                                <td class="slds-cell-wrap ">
                                    <div class="slds-truncate slds-text-align_center">120</div>
                                </td>
                                <td class="slds-truncate slds-text-align_center">
                                    <lightning:buttonIcon alternativeText="Edit" iconName="utility:edit" variant="border" onclick="{! c.editButtonClicked }" title="Edit" tabindex="{!tabIndex}"  />
                                 </td>
                            </tr>
                </tbody>
            </table>
        </div>
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha