Skip to Content

How to remove the title bar and toolbar from a panel in Jitterbit App Builder

The method for hiding panel elements depends on your App Builder version.

App Builder 4.61 and later

Use the Built-in settings on the panel's properties. These settings control whether each element is rendered.

Hide the title bar

  1. Open the page that contains the panel you want to modify.
  2. Expand the Action Drawer and click Live Designer.
  3. Select the panel, then click the Built-in tab in the properties panel on the right.
  4. In the Panel Header section, toggle Show Entire Header off.

To hide individual elements within the header instead of the entire header, leave Show Entire Header on and uncheck any of the following:

  • Show Panel Title: Hides the panel title.
  • Show Maximize: Hides the maximize button.
  • Show Action Drawer: Hides the action drawer button.

Hide the toolbar

  1. Open the page that contains the panel you want to modify.
  2. Expand the Action Drawer and click Live Designer.
  3. Select the panel, then click the Built-in tab in the properties panel on the right.
  4. In the Toolbar section, toggle Show Entire Toolbar off.

App Builder 4.60 and earlier

Use a theme to apply CSS styles that hide the title bar or toolbar.

Create a theme to hide the title bar

  1. Navigate to the App Workbench.
  2. Click Look & Feel.
  3. Click + Theme from the Themes panel.
  4. Provide a Theme Name (for example, Sans-panel title).
  5. Select a Collection. The collection must be associated with the application to use the theme.
  6. Click Save.
  7. In the Components panel, select the Panel component.
  8. In the Styles panel, click + Style.
  9. Provide the following:
    • Area: Title Bar
    • Style Type: Display
    • Display: none

Create a theme to hide the toolbar

Follow steps 1–6 above to create or reuse a theme, then:

  1. In the Components panel, select the Panel - Toolbar component.
  2. In the Styles panel, click + Style.
  3. Provide the following:
    • Area: Toolbar
    • Style Type: Display
    • Display: none

Apply the theme to a panel

  1. Navigate to the page containing the panel you want to modify.
  2. Expand the Action Drawer and click Live Designer.
  3. Select the panel and click the Edge Case tab.
  4. Set Theme to the theme you created.
  5. Click Save.
  6. Refresh your app to see the panel without the title bar or toolbar.