Anatomy of Elements Container

FormBuilder

Examples

Map

Microblog

Popup

PowrElementsContainer
ElementLimitNotifier
PowrDrilldownPrototypeSection
PowrDrilldown
PowrDrilldown
PowrDrilldown

PowrButton

Unpacking Popup...

Unpacking FormBuilder...

PowrElementsContainer
ElementLimitNotifier
PowrPagePrototypeSection
Page
Element

PowrDrilldown

PowrPagePrototypeSection
Page
Element

PowrDrilldown

Popup Overhaul new layout goal

PowrElementsContainer
ElementLimitNotifier
PowrDrilldownPrototypeSection
PowrDrilldown
PowrDrilldown
PowrDrilldown

PowrButton

New DataStructure

This is the first step, in the future, we may be able to add more form elements to popup.
This is type "form", we could have "countdown-timer" in the future.

So how do we build it?

PowrElementsContainer
ElementLimitNotifier
PowrDrilldownPrototypeSection
PowrDrilldown
PowrDrilldown
PowrDrilldown

PowrButton

Page Structure?
Visually yes, but that does not really cover this nested data idea.
Combination of Drilldown + PowrDrilldownPrototypeSection?
Nope, because add, delete, duplicate, sort all methods assume we are performing operations on model data

Snippet from onDuplicate

Snippet for adding new element

Content Section

PowrElementsContainer

LimitNotifier

PowrElementsDrilldownContainer

PowrElementDrilldown

NestedElementsDrilldownContainer

PowrElementsDrilldownContainer

PowrElementDrilldown

PowrButton / PowrElementPicker / PowrElementModa

Also contains the PowrDrilldownContentInner
(aka the settings on the element)

Some other changes

Before passed to PowrElementsContainer

new helpers on observable store

new helpers on observable store added from the <appname>.js(x) afterInitialize function

Lastly....

90% changes in MR are not related to ticket.
I changed the scope hugely and it impacted our sprint, was a bad idea and should have been handled well.
Will follow up on a later date with better approach for future learnings.
I did not do a 100% cleanup because that would explode even further.

deck