Skip to Content

Menu supports data object in Jitterbit App Builder

Menus support the ability to be driven by a data object. This feature supports the following:

  • Dynamic Labels, allowing things like "Welcome {{Username}}"
  • Dynamic Links, including binding criteria in those links
  • Dynamic images like user profiles
  • Conditional Themes
  • Visibility Rules that could control visibility of menu items

Menucontrol

How to configure existing menu with a data object

  1. From the application layer, go to Action Drawer > Design a menu
  2. Locate the existing Menu from the Menu panel and click the corresponding pop-up icon
  3. Click the Edit button
  4. Select the data object to use as the Source Rule value
  5. Click Save

How to configure new menu with a data object

  1. From the application layer, go to Action Drawer > Design a menu
  2. Click Create from the Menus panel
  3. Assign a Name for the menu. For example: North Sales Menu
  4. Click the Menu Item Themes icon to configure any theme information for the menu
  5. Select the appropriate data object from the Source Rule menu
  6. Click Save

After configuring the above information, if you are using a new menu and not the Site Menu you also need to configure this information in the Application Design:

  1. Navigate to the App Builder IDE > Build your application
  2. Click the cog Open Record icon for the application from the Applications panel
  3. Click the pencil edit icon for Menu from the Regions panel
  4. Select the new menu as the Default Control
  5. Click Proceed

How to insert an image in menu

There may be use cases where you want to display an image inside of a Menu. With this new feature you're able to display an image within the Menu region, and that image can be based on information stored in the data object you connect the Menu to. This example assumes you already have a data object with a Column that captures the image UUID information.

Note

Images can be stored in the data object as UUID, base64 string or binary column type with the image itself in there.

Menuimage

To locate a local stored image UUID

  1. Navigate to the App Builder IDE > Design your look & feel
  2. Locate the Collection where you uploaded the image to be stored locally
  3. Drill into Images for that identified Collection
  4. Doubleclick on the Image you want to get the UUID value for
  5. Select the part of the Relative URL value that appears following /image/. For example: 50e85d87-e283-4953-983f-0bc3e18b3a7e
  6. Copy the value to your clipboard
  7. The UUID value is what you want to store in a Column in the data object or rule that gets referenced from the Menu

To add an image to a menu from a data object

  1. From the application layer go to Action Drawer > Design a menu
  2. Locate the Menu to add the image to
  3. Click Create under Menu Items
  4. Select Image as the Control Type
  5. Assign a Name
  6. Click to select the Alignment you're looking for. For example: Right
  7. Under Other control types, set the Source column to the column containing the image URL. For example: Avatar
  8. Navigate back to the application UI layer, refresh your web browser and check results

Additional information

If you're looking to add a custom logo image to an App, please see How to add a logo to an app