The Magical Demo Record Page

Owned by Jodie Miners
Last updated: Oct 09, 2023
5 min read

This is a record page that was on a recent demo from Dreamforce, and that was doing the rounds of twitter after Benioff tweeted it. It is a great demo, but there is something unsettling about it. Something uncanny valley about it. So I tried to make it myself. Spoiler, you can’t make this page layout without custom code or magical Salesforce only components.

The Demo Page

  • Wow the Email button is front and center, and that is exactly what they are demoing.

  • Wow, the details page is so nicely formatted.

  • Wow it looks so crisp and bold.

My Attempt

Yes, it is zoomed out a bit, but it just doesn’t look the same. Even the font looks bolder in their demo. This is on a Summer '23 org.

Here’s the things that I could not do:

  1. They did not show it in a Console App (I could maybe get a bit closer to the demo in the console app).

  2. They don’t use Utility Bars in DemoWorld (DemoWorld is as magical as BarbieWorld).

  3. The biggest thing I could not do is do two narrow columns and one big middle column - there is no out of the box page layout for that (I thought there was previously - the one with the fixed left hand panel - but even then it would not look like theirs).

    1. SEE UPDATE BELOW. You need to create a brand new Lightning Page, and then use the Pinned Header template.

  4. This is a SINGLE COLUMN PAGE LAYOUT - who does that? Who?

    1. And when this is in a narrow column it defaults to Comfy Mode and then negates all the goodness of Compact mode.

  5. Where are my Activity Buttons? No. Us mere mortals can NOT get Activity Buttons to show anywhere else except on the Activity panel. (Except in Cases where we DO NOT want it on the Feed Layout, and we have no choice there either). Maybe this is the mythical Actions Button Bar that was in pilot many years ago and has never seen the light of day.

    1. And see below they don’t follow SLDS standards

    2. AND they don’t even have the drop down button with the newly released features from Spring or Summer '23.

    3. AND in narrow column the buttons wrap terribly.

  6. Being that the related Lists component is in the narrow Column it won’t show as Lists the way they are showing it, only tile And no, Dynamic Related Lists still shows as tile in a narrow column.

  7. No I don’t use Einstein Prediction Builder. And how is it saying a Contact is Closing in 6 months? WHAT ARE YOU CLOSING?

  8. Where is Chatter? Why aren’t you using Chatter? And Check for Duplicates component, and many many many more

Bonus: What is the icon next to outdoor adventures? Surely it’s not Account Logos that have been retired in Winter 24? (I’ve never seen them as they never worked outside of the USA).

 

NOTE: I picked on this one first as it was straightforward. Next up is a critique of all the colourful side panels showcased at Dreamforce, and in the extended version of this demo.

 

Comments

OK let’s address some of the comments:

  • YES you probably can build this with a custom page layout, however that was not the point of this exercise.

  • YES you probably can build this button bar with a custom LWC (no I don’t think I’ve ever seen a custom LWC with those coloured icons on the buttons though, and how to exactly replicate standard functionality on LWCs I’m not sure either. I don’t think it would be easy, but you may be able to build something completely custom with lots of dollars).

    • Eg here are those 4 icons with standard SLDS coding. So they have not even stuck with the SLDS for their Custom LWC. So they would have had to have gone to the effort of a custom button base component and then built it up from there.

  • No Changing a lightning Page Layout in Console doesn’t give you extra options - this is the only 3 region layout. But this demo is not in console.

  • No it’s NOT Dynamic Forms - you can tell by the ridiculously oversized page layout sections in Dynamic Forms.

A bit Closer

  • OK, I did manage to get a bit closer thanks to one tip on LinkedIn from Sascha Löffler…. it involves completely creating a new page rather than changing an existing page.

  • I had mentioned above I was sure there was a pinned region somewhere, even though I know the demo was not based on a pinned region. The pinned regions are only available when you create a brand new page.

  • When you create a new page you get extra options

  • So I added a page based on Pinned Header, but then displayed it in a regular app. In a Console App the Tabs are below the header, but in a standard app it looks better.

  • So here’s the result

  • Still not right. Still no button bar at the top - so the Add a new related record button becomes front and center and not very useful.

  • I still would not create a single column layout. Plus narrow section components defaults to Comfy mode so you completely negate the benefits of Compact mode.

  • The ugly activity button wrapping in narrow column is just not good. This is also why I always put Chatter first.