Note: Nintex Apps is in beta release.

Image

The Image component lets you add images—plus alternative accessibility text that describes the images—to headers, drawers, modals, and other components.

Using the Image Component

Create visual context for your end users with the image component. Add an Image component to a page and then adjust the image properties:

  • Select the image source ( General tab): Images can be sourced from previously uploaded files or external URLs.
  • If desired, add alternative text to describe the image for access/assistive technologies such as screen readers.
  • Configure the image properties
    • Add any desired behaviors for the image, and set up the interactions these behaviors will trigger.
  • Preview, and adjust as needed

Properties

Component properties

  • Image source: Determines where to source the image file from.

    • URL: Displays the image available at the specified URL.

      • Image URL: The URL of the image to display.

        Note: 

        You may also use merge syntax in the URL field. If a merge model is specified, you can reference fields with standard merge variables like {Name}. If no merge model is specified, you can still use global merge syntax.

        For example, if you host an account's logo image at a particular URL, and you want it displayed next to a record, you could use www.YourSite.com/{{$Model.Account.data.0.Name}} for the image URL.

        If you choose to do this, ensure that the variable pulled in by the merge syntax is URL encoded— no spaces.

    • File: Displays an image previously uploaded within Settings > Files.

      • File name: The file to display. Provides autocomplete options based on uploaded files.

    • Attachment: Displays an image that has been uploaded and attached to a record within a model.

      Note: 

      This option only accepts lookup relationship fields that have File as the related object.

      The object must have a custom attachment field created on it.

      • Image field: Click the field picker to select the attachment image's ID field.

        Note: 

        You may need to click next to the image field's name to access and select the actual attachment field ID. You need to select this, not the reference field, for the image component to work.

        If the image field is a Photo URL field, use URL as the image source.

  • Merge model / Model: The selected model provides values for merge syntax or record options for attachments.

  • Alternative text: Determines the descriptive text about the image that can be used by access/assistive technologies, such as screen readers, and conforms to Web Accessibility Initiative—Accessible Rich Internet Applications ( WAI-ARIA ) specifications. This property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

    Note:  If no alternative text is specified, assistive technologies will either ignore the image or (in some cases) speak a generic label, such as "Image displayed."

  • Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Click add Add interaction then select:

  • Action type: Determines the type of user interaction that triggers the action script.

In the dots-vertical More Options menu on the selected interaction, click Add action, then edit the Action Type:

Note:  Use the Show/hide menu action to add a dropdown menu to the image.

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

    Note: 

    To refresh available style variant options, click refresh Refresh style variants.

    This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • Margin: Sets a component's margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click All.
    • To set margins for each side individually, click Separate.

    Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.

  • Height ( optional ): The height of the Image component.
  • Width ( optional ): The width of the Image component.

Standard display logic options are available to display or hide the component or feature.