Skip to Content

How to create a menu in Jitterbit App Builder

Menus are the primary way of letting users navigate your applications. They can provide access to specific pages by grouping and listing them in a format that's easy to understand and use. Some are automatically set up when you create an application. Other menus you must set up yourself. This page describes the process of creating and configuring a new menu in App Builder.

Default menus

By default, every new application has these menus:

  • Home Page is the default home page menu for the app.

  • Application Menu is the menu set to be visible in the application toolbar.

  • Mobile defines menus that are visible only on mobile devices.

You can create your own menus as well as change which ones are shown on your app.

Create a menu

To create a menu, follow these steps:

  1. Select App Workbench > UI Layer - Menu. The Menus panel opens.

  2. The Menus panel lists the menus that currently exist. The Menu Diagram panel illustrates the structure of the selected menu, including any sub-menus and their items.

  3. Click the + Menu button on the Menu panel.

  4. Enter the following information:

    create a menu

    1. Name: A name for the new menu. This is the only mandatory field.

    2. Width: A fixed width value for the new menu.

    3. Menu Item Themes: If you use themes, choose one here to apply styling to the menu items.

    4. Source Rule: Pick an underlying source rule.

    5. Public: Enable to allow the menu to be used in another application.

  5. Click the Save button. You can now interact with the Menu Items panel to add items to your newly-created menu (see Add menu items to learn more).

When a new application is created, App Builder automatically sets up a menu called Home Page to be the home page menu and one called Application Menu to be shown on the right side of the top toolbar, visible on all pages. You can change these visibility settings, like selecting your own menus to fill those roles, by following these steps:

  1. Go to the App Workbench.

  2. Click the App Settings tab.

  3. In the App Settings panel, click More > Edge Case.

  4. Pick the Regions - Controls tab:

    application menu

    1. Under Application Menu, select which menu should be visible on the right side of the top toolbar. The default is the menu with the same name.

    2. Under Home Page, select a page to be the home page. The default is Home.

    3. Under Mobile Menu, select which menu will be seen by users on mobile devices. The default is the Mobile menu.

    4. Under System Menu, select a menu to be visible on the left side of the top toolbar. By default, there isn't one.

      Note

      In the dropdown, there is a system-created option called System Menu. When selected, it displays icons with some useful settings such as audit, user profile, languages, and others. However, all these settings are also available in the hamburger menu to the right of the top toolbar.

Add menu items

To add items to a menu, locate it by accessing App Workbench > UI Layer - Menu, and finding it in the Menus panel.

Once you've found the menu you want to add items to, you can click the icon, or double click either its row or its name in the Menu Diagram panel to see a breakdown of its items.

The Menu Items panel will show all the existing items in that menu. To add a new item, click the + Menu Item button and the Menu Item dialog will open, containing the following tabs:

  • Settings: In this tab, the following fields are available:

    • Menu Control Types: Select Menu Item if you are adding an option to a menu or Nested Menu if you are creating a new sub-menu.

    • Parent Menu: Select the parent menu of the item you're creating.

    • Position: Enter a number to define the display order of this item.

    • Name: Enter the name of the new item.

    • Link To Page: Use the dropdown to select which of your application's pages this item should link to.

  • Link Options: In this tab, the External Link field is available. Use it if you want the item to link to an external web resource. The URL entered must start with either https:// or http://.

  • Display Options: In this tab, the following fields are available:

    • Label: Define a label that will appear in the menu.

    • Tooltip Label: Define the tooltip text that will appear when a user hovers on the item.

    • Image: Use the dropdown to select an image to associate with the item.

    • Icon: Use the dropdown to select an icon to associate with the item.

    • Label Visibility: Select whether the label should be Visible or Hidden in the application.

    • Theme: If you use themes, choose one here to apply styling to the item.

    • Active: This checkbox determines if the item will be displayed in the menu (enabled by default).

Click Save to confirm your settings and save the new item.