Skip to Content

Button control in Jitterbit App Builder

A Button control places a clickable button on a panel. Clicking a button can execute an event, link to another page, or link to another panel, depending on how you configure it. This page describes how to add a Button control, configure what happens when it's clicked, control where it appears on the panel, and apply styles to it.

Add a Button control

To add a Button control to a panel:

  1. Open the desired page and select Action Drawer > Live Designer. Alternatively, open the desired page's edit screen by going to App Workbench > Pages.
  2. If you're using the Live Designer, select the panel where you want to add the button; its options populate the Live Designer. If you're in the App Workbench, select the panel where you want to add the button and click its Controls button.

  3. Click + Control. The Add a Control dialog opens:

    Add a control

  4. (Optional) If the button should be associated with an underlying column, select it in the Column field.

  5. Set Control Type to Button.
  6. Enter a Name. This value appears as the button's label.

  7. In the Control Subtype field, select whether the button should appear as Primary or Secondary:

    • Primary: Displays as a main button on the panel.
    • Secondary: Displays as a secondary button on the panel, with a lighter appearance than a Primary button.

  8. Click Next.

  9. Configure what the button does when clicked. See Configure button click behavior below.
  10. Click Next, review the changes App Builder proposes, and click Finish.

After creating the button, you can set its location or apply styles from its settings.

Configure button click behavior

In the second step of the Add a Control dialog, choose what happens when a user clicks the button:

  • Execute an Event: Select an event to run.
  • Link to Page: Select a page to navigate to.

  • Link to Panel: Select a target panel on the same page to bring into view.

    Note

    The availability of the Link to Panel option depends on the App Builder version:

    • In App Builder 4.64 and earlier, Link to Panel is available only on pages with the Wizard layout.
    • In App Builder 4.65 and later, Link to Panel is available on any page layout.

    Link to Panel also behaves differently depending on the panel's layout:

    • On a Wizard page, clicking the button switches to the step that contains the target panel. See Wizard pages for details.
    • If the target panel is in an unselected tab within a panel group that uses the Tabbed layout, clicking the button also selects that tab, revealing the panel. See Panel groups for more on Tabbed panel groups.

Button location

Button controls can be placed in one of four areas on a panel. To set this:

  1. If you're using the Live Designer, select the panel containing the button and click its Open record icon. If you're in the App Workbench, select the panel containing the button and click its Open record icon.
  2. Open the Control Properties tab.

  3. In the Location field, select one of the following options:

    • Body: (Default.) Displays inline on the panel.
    • Header: Displays in the header region of the panel, defaulting to the right-hand side.
    • Panel (Menu): Displays in a nested menu on the panel, in the top-right region.
    • Toolbar: Displays in the toolbar region of the panel, defaulting to the right of any existing update method buttons (for example, Create or Audit).

    The four possible button locations are illustrated below:

    buttonlocations.png

  4. Click Save.

Style a button

Use Styles to further customize the appearance of a Button control, such as its size, color, and font weight. You can customize a style if you need more granular control.

  1. Open the page where the button is and select Action Drawer > Live Designer. Alternatively, open the page's edit screen by going to App Workbench > Pages.
  2. If you're using the Live Designer, select the button; its options populate the Live Designer. If you're in the App Workbench, select the panel where the button is and click its Controls button, then click the button's Open record icon.
  3. Go to More > Styles. The Styles dialog opens.
  4. Click + Style.
  5. Select Buttons from Style Categories.
  6. Locate the desired style and click its + Add button.
  7. Exit the styles and edit screens, then refresh the browser to confirm the update.

Change an icon's fill from solid to regular

App Builder ships with Icon images that use the Solid icon state by default, meaning the icon appears with a solid fill. On a button that already has an icon assigned, you can configure a style to override this and use the Regular icon state instead, so the icon appears as an outline of the shape without a fill. See Icon categories for the other icon sets available when selecting an icon.

The following examples show the same address-card icon on a Button control in each state:

Solid address card

Regular address card

After reaching the Styles dialog (steps 1-4 above):

  1. Select Font from Style Categories, so the style list narrows to font-related options.
  2. Locate Font Weight 400 and click its + Add button. This adds a font weight style to the control that you can then edit.
  3. Click x to exit the Style screen.
  4. Click the Open record icon for the style you just created, to open its full record.
  5. Click the Edit Style button.
  6. Select Controls from the Components panel, since you're styling a control rather than a page or panel.
  7. Click Create under Styles.
  8. Select Icon from Button as the Area, so the style targets the icon shown on a Button control specifically.
  9. Select Font as the Style Type, to match the Font Weight property you're about to set.
  10. Set Font Weight to normal. This overrides the 400 weight added in step 2, which is what changes the icon from solid to regular.
  11. Click Save.
  12. Refresh the application view to confirm the icon now appears in its Regular state.