Wrapper

• Unique Id: (Required) An automatically generated alphanumeric identifier for the component. You can rename if needed.

• 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. 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.

  Note: 

  • To refresh available style variant options, click 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.

• ARIA label: Determines what description will be read by assistive technology, such as screen readers, by setting the aria-label HTML attribute, which is part of the Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) spec.

  Used to describe elements where text may not be visible, this property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

• ARIA role: Determines which type of user interface element the component represents for assistive technology. The available options all refer to standard landmark ARIA roles. For more technical information on each role type, see MDN web docs.

  • Banner: Use to define global site details, such as company name, global search, logos, and similar information.

  • Complementary: Use to add content that, while related to the main content area, is not necessary for that area to stand alone. Typically applied to sidebars and other supplementary information.

  • Content Info: Use to create footers that appear on each page, which typically contain copyright information, navigation items, or similar content.

  • Form: Use to identify sections that make up a single form, even if it contains multiple components.

  • Main: Use to identify primary focus of the page.

  • Navigation: Use to indicate a section containing links for navigating a site.

  • Region: Use as a more generic landmark in order to indicate an area is relevant, but not categorized under the other available roles.

  • Search: Use to indicate a section contains elements for searching the page or site.

• Height strategy:

  • Fit to content: Sizes the wrapper to fit the components within.

    • Min height: Sets the minimum height for the component, using a number and a sizing unit.

    • Max height: Sets the maximum height for the component, using a number and a sizing unit.

  • Fixed height: Sets an absolute height.

    • Height: Sets the height for the component, using a number and a sizing unit.

For more information, see Sizing measurements.

• Width strategy:

  • Fill available space: Sizes the Wrapper to fill the available space within its container.

    • Min width: Sets the minimum width for the component, using a number and a sizing unit.

    • Max width: Sets the maximum width for the component, using a number and a sizing unit.

  • Fixed width: Sets an absolute width.

    • Width: Sets the width for the component, using a number and a sizing unit.

For more information, see Sizing measurements.

• Overflow x-axis: Determines how content is displayed when it overflows beyond the specified width.

  • Default: Users can scroll the content if it exceeds the Wrapper’s width. A horizontal scroll bar appears when needed.

  • Visible: The overflow content is not hidden. The content is visible outside the Wrapper's specified width.

  • Scroll: A scroll bar is added inside the Wrapper so users can scroll the content horizontally.

  • Hidden: The content that does not fit into the Wrapper remains hidden.

  • Auto: The Wrapper resizes its content to fit its own width.

• Overflow y-axis: Determines how content is displayed when it overflows beyond the specified height.

  • Default: Users can scroll the content if it exceeds the Wrapper’s height. A vertical scroll bar appears when needed.

  • Visible: The overflow content is not hidden. The content is visible outside the Wrapper's specified height.

  • Scroll: A scroll bar is added inside the Wrapper so users can scroll the content vertically.

  • Hidden: The content that does not fit into the Wrapper remains hidden.

  • Auto: The Wrapper resizes its content to fit its own width.

• Margins: 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.

  Set margins using spacing variables defined in the design system. Custom or arbitrary values are not allowed. For more information, see Spacing.

Background source: Determines the appearance of the Wrapper's background.

• Design system: The background is determined by the Wrapper's style variant.

• Image: The background is an image file.

  • Image source: Determines the source of the image file.

    • 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 such as {Name}. If no merge model is specified, you can still use Global Merge Variables / Functions.

        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. Make sure the variable pulled in by the merge syntax is URL encoded and contains no spaces.

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

      • File name: The name of the file where the image is stored.

    • 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. For more information, see Object Relationships Overview.

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

        Note: 

        For the image component to work correctly, make sure to select the actual attachment field ID, not the reference field. You may need to click next to the image field name to access and select it. 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 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 both. For more information, see Merge syntax.

  • Size: Determines the size of the image.

    • Original: Displays the image at its original size, without adjusting to the Wrapper’s size.
    • Contain: Scales the image so it fits within the Wrapper, reaching the top and bottom edges.
    • Cover: Scales the image to cover the entire Wrapper, filling all parts of the background.

    • Position: Determines the orientation of the image within the Wrapper

  • Special effects: Adds special effects to the Wrapper image.

    • No effects: The image displays without any special effects.

    • Parallax: When scrolled, the content inside the Wrapper moves over the background image.

  • Repeat: Determines if the image repeats vertically, horizontally, or both.

    • No Repeat
    • Horizontal
    • Vertical
    • Both

• Color: Select a color from the dropdown to use as the Wrapper’s background. Defaults to transparent.

Interactions trigger Action flows based on typical ways an end user may interact with a page element or component. You can configure Interactions on various elements. Options vary, but may include:

• Click

• Right click

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