In a Canvas App, efficiently presenting complex customer data such as recent orders, their statuses, product details, delivery tracking, and payment information can result in a cluttered and difficult-to-navigate user interface.
High level resolution steps
To address this, a Fast Tab design is implemented, enabling the display of multiple data components in an organized, streamlined manner. This approach ensures users can quickly access and interact with critical information without overwhelming the app’s visual layout.
Detailed resolution steps
Step 1: Added the labels and up and down arrow icon which will help us to open and close the fast tab as shown in the below image:
Step 2: After adding the details and history label we need to add the container which contains the product info and delivery status history which shows the status of product.
Note: Component and Gallery are overlapping but after the invisible and visible code it will appear perfectly.
Step 3: Now OnVisible property of the screen we will set the below variable.
| OnVisible property of Details Tab Screen:- UpdateContext( { isDetailsVisible: true, ishistoryVisible: false } ); |
Explanation:
The OnVisible property of the Details Tab Screen uses UpdateContext to set the following:
- isDetailsVisible: true: Makes the “Details” section visible when the Details Tab Screen is shown.
- ishistoryVisible: false: Hides the “History” section by setting ishistoryVisible to false.
Step 4: Now for Onselect and visible property of down and up arrow for the label called “details label”, add the below code:
| OnSelect property of down and up arrow for details label:- UpdateContext({isDetailsVisible: !isDetailsVisible, ishistoryVisible: false}) |
Explanation: Function toggles the visibility of a “Details” section by flipping the isDetailsVisible boolean value, while ensuring that the “History” section (isHistoryVisible) is set to false (hidden).
| Visible property on details down arrow:- !isDetailsVisible |
Explanation:
- If isDetailsVisible is true, !isDetailsVisible will become false.
- If isDetailsVisible is false, !isDetailsVisible will become true.
| Visible property on details up arrow: isDetailsVisible |
Explanation:
- If isDetailsVisible is true, !isDetailsVisible will become false.
- If isDetailsVisible is false, !isDetailsVisible will become true.
| Visible property of Container_productinfo: isDetailsVisible |
Step 5: Now the Onselect and visible property of down and up arrow for a label called “history label” add the below code.
| OnSelect property of down and up arrow of history label: UpdateContext({ishistoryVisible: !ishistoryVisible, isDetailsVisible: false}) |
Explanation: Function toggles the visibility of the “History” section by flipping the ishistoryVisible boolean value, while ensuring that the “Details” section (isDetailsVisible) is set to false (hidden).
| Visible property on history down arrow: !ishistoryVisible |
Explanation:
- If ishistoryVisible is true, !ishistoryVisible will become false.
- If ishistoryVisible is false, !ishistoryVisible will become true.
| Visible property on history up arrow: ishistoryVisible |
Explanation:
- If ishistoryVisible is true, !ishistoryVisible will become false.
- If ishistoryVisible is false, !ishistoryVisible will become true.
| Visible property of Gallery_history: ishistoryVisible |
Step 6: Now “Y” axis of history group label we need to add the below code.
| Y property of Group_historyheader:- If(isDetailsVisible, Container_productinfo.Y + Container_productinfo.Height + 75, Container_productinfo.Y + Container_productinfo.Height + -645) |
Explanation:
This formula adjusts the Y-position of Container_productinfo(details container)based on the visibility of the details section:
- If isDetailsVisible is true, it moves the History label 75 units down.
- If isDetailsVisible is false, then it moves the History label back -645 units up.
Note: After adding all the above code for Icon_up_details and Icon_up_history, now you should move this icon position similar to the Icon_down_details and Icon_down_history respectively.
Output
When I click on the details down icon – details container will appear with the up arrow and down arrow will not be visible. Same way it works for history tab as well.
