We show how to work with Side sliding panels to create various kinds of menus or contextual pages in your application.
You can see below a left burger type menu and a photo slider made out of sliding side panels in the GoodDeeds application use case, described here. Obviously, you can make it into any design you want.
As you can see, the menu can fit most design requirements, can change design or color to show which page you are on, have icons of different sizing.
Watch a video of how can this be done - or- Follow the steps below:
Step 1 - Activate the side panel
Both left and right side panels are available on the screen. You can see its content in screen's tree panel
To see the panel visually go to Screen's Properties on you right side
and set visibility to SHOW.
You will see the needed panel slide out and be able to visually edit its content.
Step 2 - Fill in the panel with needed design and actions
Just use all the usual tools to design you panel design and actions.
NOTE - that the sample panel below has SUB-menus, which are easily made by hide and show properties of screen components, as described here.
Step 3 - Add buttons to slide the panel in and out
For example on a sample app, we used a "burger" font Awesome element to open the menu, which you place somewhere in your interface.
and "cross" elements to close the menu, which you place anywhere on the OPENED side panel, as it will enact closing the panel.
Obviously you can choose any design of open/close element as you need to better tell users what is in that panel.
Step 4 - Add OPEN and CLOSE actions to the buttons
- Select the Button on which panel needs to slide, marked green ↓.
- Open Actions panel and add a standard Action to the button called "Set Component Property", marked orange ↓ :
3. Select for which component you want to perform the Action, marked red ↑ - in this case the Screen itself, and then Screen's property for which you perform the Action (left panel in this case), and then set state to SHOW.
4. Save! Marked blue ↑.
5. REPEAT the 1-4 for the CLOSING element in your design, but at the last step set as HIDE:
SAVE THE APP!!!
Now, both of your buttons, burger and cross, will show and hide the left panel on the particular screen.
Step 5 - Placing the same panel on all screens
It is important to remember, that each of your screens CAN have their own panels. This is often needed in logic of some apps.
So you can have different panels on each screen, or you can have the same one on every screen. For this you need to either copy a Drawer (which contains the panel) or just copy a flex row, which contains a full design of your panel (recommended):
1. Select the needed FlexRow and copy it to buffer
2. Go to the other screen and PASTE it to Drawer in the components tree:
Step 6 - Switch off panel's visibility
Go back to the properties of the screen and set the panel to back to the default "Hide" position.
Save the screen.
Thats all.
Let as know if you need more options in setting up the sliding panels.