Properties - Top Menu

In Vizlib Sheet Menu, the Top Menu settings (Figure 1) allow you to configure the properties for the navigation panel located at the top of your sheet.

Figure 1: Top Menu

This topic contains the following sections:

Logo and Title

In Logo and Title (Figure 2) you can apply your own branding to your app by enabling Show Logo and adding an image to your navigation panel, by uploading or entering a URL. You can make changes to the Logo Mode by selecting Stretch, Scale, or Auto, set the logo Opacity and alter the logo position using the cursor controls. You can also choose to trigger a Vizlib Action after a user clicks the logo by selecting Add Action. If you want more information about working with actions, please click here.

Figure 2: Logo and Title

If you enable the Title settings (Figure 2) , you can customize the display of the Title Content, the font color and the font size.

Figure 3: Title

Note: If you are using a version of Vizlib Sheet Menu lower than v3.0.0, this section of the property panel will be called Sheet Menu Items.

Menu Items (Figure 4) contains settings related to generating Sheet Menu items (e.g. groups or individual sheets). To start, you can open the Menu Wizard to re-organize your sheet menu items, choose display modes in Show in modes, and also whether to add an Element to link to another sheet or group.

Note: We recommend that you use the Menu Wizard to create any sheet menu items.

Figure 4: Menu Items

When you add an Element (Figure 5), you can choose from a wide range of customization settings.

  • Choose the Element Type and Name, set the Top Margin and select a sheet menu item from the <select a value> list.

  • Display an Icon, selecting the icon type and position.

  • Enable Tooltip, where you can enter Tooltip Text, and also Font Color, Font Size, Font Style, Font Family, Background Color and Opacity.

  • Setting Visibility to Conditional hides the element unless a condition is met.

  • You can choose whether any Actions are triggered Before or After navigation in the sheet, and set Sheet Exit Actions to be triggered when leaving a sheet. For more information about Vizlib Actions properties please see our article here.

  • Click Add Element to add a new element.

Figure 5: Elements

Native Buttons

Native Buttons contains settings which manage buttons in the navigation bar of the top menu. You can choose to display these buttons, or only display them when a condition is fulfilled, as well as entering your own text descriptions and adding tooltip text.

Note: All native buttons have the same Enable Tooltip settings, where you can enter Tooltip Text, and set the Font Color, Font Size, Font Style, Font Family, Background Color and Opacity.

Navigation, Save, Stories, Bookmarks, Prev Sheet, Next Sheet, Application and Duplicate all contain settings to enter a Show/Hide Condition for displaying the button, customizing an Icon, entering Button Text and Enable Tooltip (Figure 6).

Note: Duplicate only appears when the user doesn’t have edit privileges for the original sheet in the app.

Figure 6: Native Buttons

The Edit button (Figure 7) has the same customization controls as Figure 6, but also has settings for Edit mode button text, Edit mode color, Edit mode font color and Enable Tooltip.

Figure 7: Edit

Sheets (Figure 8) shows the same customization controls as shown in Figure 6, but also includes settings for Title Content.

Figure 8: Sheets

Custom Buttons

Custom Buttons contains settings for you to create your own custom button, and enable it to perform user-defined actions (e.g. making selections, opening) or display tooltips (Figure 9). There are settings to enter a Show/Hide Condition for displaying the button, customizing an Icon, entering Button Text and Enable Tooltip, where you can enter Tooltip Text, and set the Font Color, Font Size, Font Style, Font Family, Background Color and Opacity.

Figure 9: Custom Buttons

When you click on Add Button (Figure 10), you'll open a new menu of settings where you can add a Custom Icon, and include a Show/Hide Condition to only display the button when a condition is met. You can enter Button Text as a description and Enable Tooltip, where you can enter Tooltip Text, and set the Font Color, Font Size, Font Style, Font Family, Background Color and Opacity.

Figure 10: Add Button

If you click on Add Action, you'll open the Actions settings (Figure 11), which you can use to run an action after the button is clicked. You can use Pick Action to select the action, and add a Field and Field Value. If you'd like to add more than one action to the button, click Add Action again. If you'd like to know more about individual Actions, you can find a full reference in our article here.

Figure 11: Actions

Custom Text

Custom Text allows you to enter text within the top navigation bar (Figure 12), appearing by default in the top right corner of the sheet. It includes settings to enter a Show/Hide Condition for displaying the button, entering Text, and selecting the Font Size and Font Color.

Figure 12: Custom Text