One of these things...

Owned by Jodie Miners
Last updated: Jul 12, 2020
4 min read

Like the Sesame Street song goes “one of these things is not like the other…”

The top is a Quick Action displayed in a Related Record Component in a narrow region in the Account page. The bottom is very basic LWC using lightning-record-form. WHY are they different?

  1. Font of heading different.

  2. We could add a slot to the LWC but as the options aren’t actually active on the RRC, there is not much reason to.

  3. The RRC displays the fields nicely in in a line - if the text wraps further the white space above the line under Employees will grow. The lines will always align.

    1. At least the Account Phone field does not smush up to directly under the Employees field (like it does in Dynamic Forms and Dynamic Actions.

  4. WHY are the edit icons different in SLDS than in Salesforce - they are darker and larger and a different size, and are on the baseline rather than hovering a little above it.

  5. Why the different field names? Is this only on Standard Fields or is this only on these few random Account fields. The fields are named Rating and Phone in the Object Manager so why Account Rating and Account phone when you retrieve the field from @salesforce/schema/Account.Rating?

  6. You can’t get the field to display with User name and Date from the LWC using just lightning-record-form. You would have to do lightning-view-form and hand-construct it in the JS. Not worth it.

  7. Why is the date format different? Is this something to do with the new ICU locale formats? This org had it enabled, so I disabled it and it went back to displaying 5:20 PM. Why does LWCs display the new format (which I HATE for Australia, but it is the documented change) and standard records NOT display the new formats when the CRUC is enabled?

  8. Why do the LWCs display the link and the RRC doesn’t? Of course the link is better for mobile devices.

  9. Why are the lines shorter in the LWC? Probably because of the edit button being different.

Edit Mode

Fewer differences here and they don’t have as much impact:

  1. The field name is a little further away from the field box on the RRC

  2. The content is cut off on the RRC - more content is displayed in the LWC. It looks like the font is bigger in the RRC but it’s not.

  3. The drop down arrow is not the same size. The field is shorter vertically in the RRC - it looks better in the LWC.

  4. Ah, that’s the reason the content is cut off, the fields are not the same size they are larger in the LWC.

Dropdown Box

  • The LWC has a very different check mark.

  • The list sits below the field, not covering it like the RRC does. The LWC looks better in that regard.

For a company with the vast development resources of Salesforce, and the great thing that is the SLDS that is the published guide as to how to build and style components to look like Salesforce, why are these things an issue? Is it SLDS trying to change standards and base Lightning devs haven’t got around to changing their styles yet? Or is it just a lack of attention to detail? Why? Why do I have to try to explain to my users why things look a little weird between different components on the page?

It is more of an issue because the Dynamic Forms and Dynamic Actions seems to follow the SLDS styling which means their pages look vastly different to the standard pages they used to be. And you can’t put a RRC on a Dynamic Forms page without these styles clashing. And you absolutely NEED to have RRC on Dynamic Forms pages because they don’t handle spanning relationships yet.

Examples are in a chrome browser Version 83.0.4103.116 on Windows 10.

See the Code for this LWC https://github.com/JodieM/BasicLWCs/wiki/Display-Fields