Skip to Content

Image Viewer widget in Jitterbit App Builder

The Image Viewer widget displays an image with additional sizing parameters. It is shipped as part of the App Builder collection, so it doesn't require downloading or uploading a widget archive.

Add the Image Viewer widget

  1. Open the control, using either the Live Designer or the App Workbench. For steps, see Convert an existing control to an Image control.

  2. On the Image tab, set Image Purpose to Photo.

  3. On the Edge Case tab, use the Widget dropdown to select Image Viewer. A new Widget Properties section appears below Edge Case.

  4. In Widget Properties, configure the following fields:

    • Interface Mode: Select Always or Mobile Only.

    • Active Mode: Select Edit Only, View and Edit, or View Only.

  5. Click Save.

  6. (Optional) To set widget parameters:

    1. Next to the Widget field, click the Param button. The Widget Parameters dialog opens.

    2. Click Create. The dialog changes to the Widget Parameter view. Configure the following fields:

      • Widget Parameter: Select a parameter from the dropdown. The Default value and a description of the parameter's values appear on the form.

      • Parameter Type: Select Column, Control, or Static Value. The remaining fields depend on the type you select. For details on each type, see Widget API.

      • Use Formatted Value: Leave this checked (default) to use the formatted display value.

      • Active: Leave this checked (default) to apply the parameter.

    3. Click Save.

To remove the widget, click the x next to the Widget field, then click Save.

Parameters

This widget supports the following parameters. Parameters with the Grid suffix apply to grid style panels.

Parameter Default Description
autoResize 0 Resizes the image automatically as the panel resizes, such as when a user maximizes a panel.
height auto Height of the image.
heightGrid 5 Height of the image on grid style panels.
maxWidth 95% Maximum width of the image.
maxWidthGrid 95% Maximum width of the image on grid style panels.
minHeight auto Minimum height of the image.
minHeightGrid 5 Minimum height of the image on grid style panels.
objectFit contain How the image fills the control area.
objectPosition auto Used with objectFit to specify how the image is positioned with x/y coordinates inside the control.
verticalAlignment top How the image is aligned vertically.
width auto Width of the image.
widthGrid auto Width of the image on grid style panels.

Size values

The height, heightGrid, minHeight, minHeightGrid, width, and widthGrid parameters accept relative units, pixels, or any other CSS height or width value. The widget help text refers to relative units as Zudy units.

Example Meaning
10 10 relative units
200px Pixels
100% Percentage
auto Auto sizing

autoResize values

Value Behavior
0 Does not automatically resize.
1 Dynamically resizes.

objectFit values

Value Behavior
fill Does not preserve the aspect ratio. The image is resized to fill the control.
contain Preserves the aspect ratio and fits the image inside the control without clipping.
cover Preserves the aspect ratio and fills the control, clipping any overflow.
none Does not resize the image.
scale-down Scales the image down to the smaller of the none or contain results.

objectPosition values

Value Behavior
auto Uses the control Alignment setting.
positionX positionY Specifies the position of the image inside the control. The first value controls the x-axis and the second value controls the y-axis. Each value can be a string (left, center, or right) or a number in pixels or percent. Negative values are allowed.

verticalAlignment values

Value Behavior
top Top align.
center Center align.
bottom Bottom align.