Skip to end of metadata
Go to start of metadata

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

  1. Select the Button on which panel needs to slide, marked green ↓.
  2. 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:


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. 

  • No labels