cancel
Showing results for 
Search instead for 
Did you mean: 

Participate in challenges and sweepstakes

Accordion UI Control Canvas Apps Component

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.

Nitinsapkal_0-1628483094143.png

 

 

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.

 

Nitinsapkal_1-1628483094145.png

 

 

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  😊