Follow

Link > Menu

The menu option enables you to turn any list of links in the web application into a mobile-friendly dropdown menu in your Zapp. To capture a Menu, click the "Link" button in the Simplify Toolbar. Then click "Menu" in the dropdown menu.

 

Menu.png

 

Hover over the list of items or menu you would like to include in your Zapp. Click to confirm your selection.


Screen_Shot_2017-05-22_at_2.32.00_PM.png

 

By clicking, only the first item will be captured. If you wish to include more items in the menu, you must continue to select them. Hover over each item and click to include it.

 

Screen_Shot_2017-05-22_at_2.32.16_PM.png

 

Alternatively, you can use the Alt key (Option key on a Mac) + click to manually select your menu items. If the Designer cannot automatically recognize all the menu items, you may be prompted to select all the relevant entries manually.

 

Screen_Shot_2017-05-22_at_2.33.04_PM.png 

 

Click twice to save the drop down menu or continue selecting items to include in your menu.

 

Screen_Shot_2017-05-22_at_2.33.14_PM.png

 

The Designer will ask whether all the items selected are correct. Click either “correct” or “incorrect” then follow the instructions to change the items (if incorrect).



Screen_Shot_2017-05-22_at_2.33.25_PM.png

 

Display Options

 

Even if you capture all menu items from the web application, you can choose which to make available in the Zapp.

 

To edit which options are available, hover over the menu in the zapp and click on the wrench icon then go to the Properties tab.

 

Screen_Shot_2017-05-22_at_2.34.48_PM.png

 

Select "All options" if you want all the menu options to be available in the zapp. To only display select options, click "some options and then check the options you would like to be available in the zapp.

 

You can also rename the options you selected.

 

Note: Once you select "Some options," the menu becomes static and new options that are available in the web applications will not be automatically made available to the user unless you edit the Zapp and select them.

 

The following is an example of a Zapp menu.


Screen_Shot_2017-05-22_at_2.33.43_PM.png


 

Styling Options

 

To invoke the In Line Editor (ILE), hover over the element in the Zapp and click on the pencil.

 

Screen_Shot_2017-05-22_at_2.33.58_PM.png

 

 Several options are available via the ILE:

  • Presets: Select a predefined mobile style preset for the dropdown.

  • Display: Set the dropdown's width and background color.

  • Use Client Side Filtering: Use this option to filter the available options from the dropdown as the user types. This is done on the mobile device and not in the web app.

  • Show as Modal: By default the dropdown options are displayed as a popover in the page, when the dropdown is opened. If this option is turned on, the open dropdown will be displayed as a full page.

  • Content: Set placeholder and tooltip text.

  • Text: Adjust line height, text size, and color.

  • Label: Specify a label and style its text.

  • Margins: Change the margins for the dropdown menu.

  • Suggest Recent Values: Displays recent values first to streamline the user experience.

An example of capturing a menu is illustrated in the following video.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.