3

I've been playing around with the brand-spanking-new lightning:appHomeTemplate interface. I was able, for example, to create a template with a 1-column header, a 4-column region that responsively pops to 2 and 2 on smaller widths, and a 1-column footer. Which is great, as this really opens up layout possibilities we didn't have before.

It's occurred to me that I can also include conditionally hidden elements like accordions, tab sets, etc in the template. The only trouble is, when it displays in App Builder I can't actually add components to hidden sections. So suppose I have a lightning:accordion with 3 lightning:accordionSections in the template. If only the first is shown and open on load, I cannot drag anything into the second or third. And App Builder isn't responsive to having those sections clicked to open other sections of the accordion.

Any creative ideas to make this more manageable? Is there anything my Template Component can do to sniff out the fact that it's actually being displayed as a mockup in App Builder and auto-show all sections, but then still behave properly when used in a Lightning Page?

One thing I tried was seeing if I could use Design attributes to toggle visibility of sections while in App Builder, but alas Template Components do not support that type of Design attributes.

  • Hmm I have a possible idea... create a blank supplementary component with Design attributes (e.g. activeSectionName property). When the supplementary component is initialized, it would fire a component event that the template listens to and uses that to fill the activeSectionName. So then in App Builder, I'd be able to flip from one accordion section to the next by changing the properties on the supplementary component. – Charles T Oct 22 '17 at 15:38
  • Also it should be possible to include some "guide text" that only appears in App Builder by using CSS selectors for classes such as flexipageEditorComponent, flexipageEditorRegion, flexipageEditorPage. In cases where the show/hide of a component is purely CSS controlled I could also use these classes to fully show everything in the App Builder (tradeoff: this means that in normal operation the elements spend time & bandwidth rendering only to be hidden until used). – Charles T Oct 22 '17 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.