How do you build inline edit behavior when coding a lightning component?

Question

How do you do this in code?

With Visualforce, I had used apex:inlineEditSupport and I was wondering if there was the equivalent when building with lightning. Are there some out of the box components that help you render inputs as read only, but that makes them all editable and handles changing the view for you? Or with lightning would you basically just be changing all this manually with JavaScript and writing it all from the ground up?

I'm about to invest in coding custom object views and I'm trying to wrap my head around Lightning Components and how to build stuff that looks like LEX. My org is still classic now, but I'd be happy making LEX / SLDS looking things in my org over using the classic styles.

As an aside, I don't really care to get too deep into Salesforce specific stuff. If there's no magic convenience like apex:inlineEditSupport, building with React or something seems more appealing.

Answer 1

I contacted Salesforce developer support, who after many weeks and escalations, finally said there was no supported way to build out this native behavior.

Instead, you can just use the Salesforce Lightning Design System's CSS to create the right styles, then add in the interactivity and switching between active editing and read only on your own. https://www.lightningdesignsystem.com/components/panels/#flavor-detail-panel-form-edit-mode

You can do this with the framework of your choice such as React, Angular, Lightning Component, or plain JS. Personally, I've built this out on Backbone Marionette with backbone.stickit for two-way data binding and Dust.js for templating, but anything will do.

If you build out the components on your own, I highly recommend creating partials for each component - with the necessary parameters. This hides the huge amount of markup to make each component. I've done this via Dust, but choose whatever templating language you want.

Alternatively, check out http://aljs.appiphony.com/ or https://lightningdart.com/ for ready to use libraries. Between their flexibility, completeness, and licenses, I found it easier to go out on my own.