Often we need to show more relevant data with respect to a record without impacting user navigation experience & achieving the simplicity. For such need in Canvas apps, where we need to show the Record's 360 view - this component will help to show the 1:N Relationship of those records in Accordion TAB UI format.
Example : #1 - Account 360 View- When a particular Record from Account View Gallery is being selected, the Accordion UI TAB control will fetch the Related Contacts, Opportunities, Cases, Activities & bind them in respective galleries. By default the Contact Tab is expanded & Contact Gallery will show required data in it.
Example : #2 - Account 360 View- When Tab 3 is being selected other tabs will auto collide and it will only show data from the Tab 3 which is Case Records related to selected account in gallery.
The component is configurable & in case if need to change the Tables/Entities can be changed accordingly. HTML Text control is being used for showing the tab as it can be used to have custom development later however button control can also be used to achieve same.
CORE LOGIC :
1. Expand/Collapse Variable - Depending on the number of tabs being chosen we need same number of variable to know if tab is expand or collapsed. At a time only one or less tab can be Expanded while remaining will be collapsed.
isTab1Expanded
2. On Tab Select Set Expand/Collapse Variable - On tab select we need to Either expand or collapsed the tab depending on its current value if true or false.
If(isTab1Expanded, Set(isTab1Expanded,false), Set(isTab1Expanded,true);Set(isTab4Expanded,false);Set(isTab2Expanded,false);Set(isTab3Expanded,false); );
3. Show Hide Gallery with respect TAB's associated Gallery to Expand/Collapse Variable if true or false.
4. Set X & Y coordinates of Gallery & Other TABs with respect to Parent or previous Control Height & X,Y controls.
If(isTab1Expanded,HtmlText_Tab1.Y-5+HtmlText_Tab1.Height+ Gallery_Tab1.Height,HtmlText_Tab1.Y+HtmlText_Tab1.Height-15)
Give a Thumbs Up if you like the component 🙂
