Vertical menu with expand and collapse feature

by Super User on ‎02-14-2018 10:12 AM

This blog briefly talks about the main features used to build the vertical menu which will horizontall expand and collapse. A copy of the MSAPP has been attached for you to download and explorer.

 

Capture.PNG

 

Following are the three main ingredients which provides the UI look and feel.

 

  1. Global Variables
  2. Controls
  3. Formulas

 

1 - Global variables


 - Six of them whose default values are set on Screen1's Onstart
 - These variables dictate when the timer control should run and how smooth the animation of the text control should appear
 - The variables also decided when the group of Text control and Rectangle Icon should expand and collapse

 

Capture2.PNG

 

2 - Controls
 - There are two controls used, Timer and Text control
 - The timer control is used to give the animated feeling of the Text control with Rectangle Icon expand and collapse
 - In this case a Text control is used as an example to prove that controls can be grouped together to give the same animation

 

Capture3.PNG

 

3- Formulas
 - IF function is the main formula used to dictate how and when the group should expand and collapse
 - We've also used the '+' function to sort the locations of the buttons and the groups.

 

Capture4.PNG

 

Capture4b.PNG

 

This no-code solution which utlizes the combination of variables, controls and simple formulas produces an amazing user experience!

 

Attachment
Comments
by beans
on ‎03-02-2018 04:10 PM

Hi Daniel,

 

Neat look!  thanks for sharing.  Question, can one have text input fields and drop down fields in each section or group?  We have a long form and not all sections are necessarily filled out. 

Meet Our Blog Authors