Skip to Content

Hide specific control UI elements in Jitterbit App Builder

Overview

App Builder's Look and Feel area lets you customize the appearance of your applications through themes, which pair a target UI element with the style properties applied to it; see Style themes for how themes, components, and styles fit together. This page walks through two examples of using a custom style to hide a small, built-in UI element on a control, in both cases by setting the element's Display property to none:

Hide the up-down control on a numeric field

Numeric fields show an up-down control, a small spinner with up and down arrows, by default when the field is in the edit state, letting users increment or decrement its value by clicking the arrows instead of typing. Since this spinner isn't a predefined Theme Interface, hiding it means first creating one, then applying a hiding style to it, either across your entire app or to one specific control.

image.png

Example showing the up-down control visible

shipcostthemed.png

Example showing the up-down control hidden

To hide the up-down control:

Create the Up-Down Control Theme Interfaces

Create a custom Theme Interface for each browser engine, following the general procedure in Configure theme interfaces:

  • Chrome, Safari, Edge, and Opera: Set Real Estate to Controls, Group to Fields, Collection to the collection you want the Theme Interface to belong to (for example, Customer), Name to Up-Down Control, and Selector to input::-webkit-outer-spin-button, input::-webkit-inner-spin-button.
  • Firefox: Set Real Estate to Controls, Group to Fields, Collection to the same collection as above, Name to Up-Down Control (Firefox), and Selector to input[type=number].

With both Theme Interfaces created, apply the hiding style to them using one of the two methods below.

Apply the style sitewide

Follow these steps to apply the hiding style across your entire app, by adding it to your app's Base Theme:

  1. Select IDE > Look and Feel.
  2. Select the Collection assigned to your app.
  3. Go to the Base Theme, which applies across your entire app.
  4. Select Controls under Components, matching the Real Estate you set when creating the Theme Interface.
  5. Select Fields under Subcomponents, matching the Group you set.
  6. Click the + Style button.

  7. Provide the following inputs:

    • Area: Set to Up-Down Control.
    • Style Type: Set to Display.
    • 1-Display: Set to ; -webkit-appearance: none; margin: 0.
    • 2-Opacity: Set to 0.

  8. Click Save.

  9. Click the + Style button again and provide the following inputs:

    • Area: Set to Up-Down Control (Firefox).
    • Style Type: Set to Display.
    • 1-Display: Set to ;-moz-appearance: textfield.

  10. Click Save.

Apply the style to a specific control

Follow these steps to apply the hiding style at a more granular level, to one specific control instead of your entire app:

  1. Select IDE > Look and Feel.
  2. Select the Collection you created the Theme Interfaces in.
  3. Click the + Theme button, to create a new custom theme for this control.
  4. Assign a Theme Name. For example: Hide Up-Down Control.
  5. Set the Type to Field.
  6. Click Save.
  7. Select Controls under Components, matching the Real Estate you set when creating the Theme Interface.
  8. Select Fields under Subcomponents, matching the Group you set.
  9. Click the + Style button.

  10. Provide the following inputs:

    • Area: Set to Up-Down Control.
    • Style Type: Set to Display.
    • 1-Display: Set to ; -webkit-appearance: none; margin: 0.
    • 2-Opacity: Set to 0.

  11. Click Save.

  12. Click the + Style button again and provide the following inputs:

    • Area: Set to Up-Down Control (Firefox).
    • Style Type: Set to Display.
    • 1-Display: Set to ;-moz-appearance: textfield.

  13. Click Save.

Assign the theme to the control

Creating the custom theme above doesn't apply it to anything by itself. Assign it to the specific control you want to hide the up-down control on:

  1. Navigate to the page with the control to modify.
  2. Select Action Drawer > Live Designer.
  3. Select the control from the page design view.
  4. Select More > Styles.
  5. Click + Conditional Formatting.
  6. Select Unconditional, so the style always applies regardless of the control's value.
  7. Click the Choose Style button.
  8. Locate the custom theme you created above. For example: Hide Up-Down Control.
  9. Click the + Choose button.
  10. Refresh the browser and confirm the up-down control no longer appears on the control.

Hide the chevron on a text field with an event

A text field with an event attached shows a small chevron icon by default, hinting that clicking it does something. To remove that visual cue with a custom style, follow these steps:

  1. Select IDE > Look and Feel.
  2. Select the Collection containing the application theme.
  3. Open the theme for editing.
  4. Select Controls under Components.
  5. Click the + Style button.
  6. Select Chevron for the Area.
  7. Select Display as the Style Type.
  8. Select none for the Display value.
  9. Click Save.