[SalesForce] InLine Editing Lightning Styling

I'm currently working on a Lightning component that I can include in my object. The main goal is to divide the fields I have created for that object in various tabs. There are too many fields to have them in just one tab. Additionally, I would like to implement some visibility logic for some of the fields.

I was able to figure out the MVC concept by watching this session (https://www.youtube.com/watch?v=BK-jYea5ogo) but currently I'm stuck at the styling. Is there an example to style the input fields so they look like in the Lightning design (incl. inline editing). I have a screenshot how it should look like:

http://imgur.com/YHFLSRW

I wasn't able to find anything in the Lightning Design Ressource Center.

Edit:
I guess the only thing I have to change is to have a different view / style when it's in viewing mode and once I double click it changes into the editing / input field mode.

Best Answer

New for Spring 17:

You can use the Related Record Component

Just add it in your app builder, then you can select an "Action" for current record, or for a related object record.

Let's say you want to create that for the Opportunity object. So for displaying specific records from the opportunity, add an "Update a Record" action to the opportunity object, then from the Opportunity record home app builder - add a Related Record Component, and select the Opportunity action that you have just added.

If you want to display account details of this opportunity - create an action for the account, and then from the Opportunity record home app builder - add a Related Record Component, and select the Account action that you have just added.

Hope this helps!

Related Solutions

[SalesForce] How to Style a Lightning Component with Bootstrap Styling

I will recommend not to style it with bootstrap instead use lightning design system. So, that your component looks consistent with rest of the app. However, if you wan to use bootstrap use

<ltng:require styles="{!$Resource.resourceName}" />

or if you want to use multiple file then

styles="{!join(',', 
    $Resource.myStyles + '/stylesheetOne.css', 
    $Resource.myStyles + '/moreStyles.css')}"

Please refer to following article for more information.

[SalesForce] Lightning system datepicker icon not in input box

<ui:inputDate> generates a few elements when it gets rendered. The ones we're concerned with are an <input> element, and an <a> element that is used for your icon.

The CSS class .slds-input is applied to the <input> element and has the property width: 100% which is causing your <a> element to wrap because it comes after the <input> element in your DOM. There are a few ways to get around this:

Reduce the width of your date picker in the Style portion of your component
Add white-space: nowrap to the div that contains your <ui:inputDate> element.

I'm no CSS/HTML wizard, there may be some better solutions here, but your problem is definitely the <a> element wrapping.

Best Answer

Related Solutions

[SalesForce] How to Style a Lightning Component with Bootstrap Styling

[SalesForce] Lightning system datepicker icon not in input box

Related Topic