How to achieve more menu functionality in vFlow

[Nikhil.Dhanda]

How can we make functionality of more menu as in google email and many more places…

[Nikhil.Dhanda]

To achieve this in vFlow we have to follow these steps-

For FV Component:

1. Navigate to the Component tab and click on the Add Component button to open the component list.
2. Select the FV component from the list.
3. Enter basic details, select the appropriate properties, select Template 4 in the UI properties section and submit the component.
4. Navigate to the Element tab and click on Add Elements button to open the Elements list.
5. Select the Group Element from the list.

6. Enter the appropriate icon from google fonts in the Element Name section which is to be displayed as more menu icon.
7. Go to the Properties section, check isMenu checkbox to show the group element as popup menu panel.
8. In Element Mapping, provide comma separated sequence numbers of elements to be shown in the menu panel.
9. Mention leading or trailing icons if needed and submit.
10. To show a close icon on the menu panel, check ‘Show Close Menu Icon’ in the property section.

[Nikhil.Dhanda]

Some Screenshots for this functionality are -

[Nikhil.Dhanda]

For Header Section:

1. Navigate to the Header tab and click on the Add Header button to open the header component.
2. Enter the basic details and click on submit.
3. Navigate to the Element tab and click on Add Elements button to open the Elements list.
4. Select the Group Element from the list.

5. Enter the appropriate icon from google fonts in the Name section which is to be displayed as the trigger to open more menu panel.
6. Check the ‘Show More Icon’ checkbox to show the icon as the menu trigger instead of button.
7. In Element Mapping, provide comma separated sequence numbers of elements to be grouped.
8. Mention leading or trailing icons if needed and submit.
9. To show a close icon on the menu panel, check ‘Show Close Menu Icon’ in the property section.