Inline Editing In Salesforce Lightning Component

As a modern, UI component framework for web apps, Lightning’s dynamic applicability lends itself to more tenable productivity use-cases. Parent components and Data-Tables, support Child Components over them to offer dynamic addition and removal of row-entries. Without Child Components, this would’ve needed revisions to the component codebase for each entry update – an arduous undertaking as updates get bulkier and frequent.

 

For context, Lightning Component is a responsive framework for platform apps on its Lightning Platform Interface written in Apex and JavaScript.

And for our part, here’s a code illustration for Inline Editing through Javascript text fields from within a single Data-Table. It lets you edit entries without unrolling a tab-trail for each update. Field Records are updated at the backend for any Object of choice in real-time.

For Live Demo Click Here

Step 1 : Create Apex Controller : inlineEdit.apxc

Step 2 : Create Child Lightning Component : inlineEditRow.cmp

Step 2.1: JavaScript Controller – inlineEditRowController.js

Step 2.2: style – inlineEditRow.css

Step 3 : Create Parent Lightning Component : inlineEditTable.cmp

Step 3.1: JavaScript Controller – inlineEditTableController.js

Step : 3.2 JavaScript Helper- inlineEditTableHelper.js

Conclusion:

Go on! Use the Lightning component platform to make your own convenient, single-page Edit Tables with Inline Editing. For further assistance with using Lightning Components to create more dynamic constructs, please reach out to us at [email protected].

Our Location worldwide
India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
SR Tower 2nd Floor Hydel Gate Haldwani Uttarakhand 263126 +91-5946359996
USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818