Wrapper

The Wrapper is a layout component that serves as a container for other components. Using the Wrapper, you can “wrap” other components to more easily control styling and display logic.

Using the Wrapper Component

The Wrapper component exists to give uniformity to components used on your Skuid page. The background image or color, size, and border and padding of each Wrapper can be customized. Controlling these visual details ensures a consistent design across all components contained in the Wrapper.

Beyond visual app design, the Wrapper offers a more efficient way to apply display logic to multiple components. Rendering logic applied to a single Wrapper component becomes uniform for all the components it contains. If you would like to apply the same rendering logic to several components, place the components in a Wrapper, and apply the logic to the Wrapper itself rather than setting up rendering properties for each individual component.

Add Components to the Wrapper

  • Add a Wrapper component to a Skuid.
  • Click, then drag desired components into the Wrapper component.
  • Modify component properties as usual to adjust behavior.
  • Add Interactions that allow end users to launch action when they select the Wrapper.

Note

The visual settings placed on the Wrapper may override visual styles applied to individual components within the Wrapper.

Properties

(Just need to look up a property? Try going directly to the Property Library.)

Component properties

Styles tab [[]]

Style variant section [[]]

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, Skuid 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.
Spacing section [[]]
  • Component Spacing: Sets the spacing of the Header relative to other components on the page. Spacing can be managed for Top margin, Bottom margin, Left margin, Right margin. All margins can be set to one of the following:

    • None
    • Extra Small
    • Small
    • Reduced
    • Regular
    • Increased
    • Large
    • Extra Large
    • Huge

    Note

    These sizes are relative to one another; the baseline is determined by Design System settings.

Background section [[]]

Background type: This controls the appearance of the Wrapper’s background.

  • Default

  • Image: Pulls in an image from a Skuid data source.

    • Data source type: Select the data source type from which you will be pulling the image.

    Note

    Select “Ui-Only” for images associated with Ui-Only models.

    • Data source: Choose the specific data source containing the desired image. (Defaults to “Ui-only” for Ui-only models.)

    • Image Source:

      • Static resource:

        Note

        You must have an image file uploaded as a static resource.

        • Resource name: If the file has been correctly uploaded, when you start typing the filename, Skuid will autocomplete.
      • URL:

        • Model: Skuid presents a list of available Models in the dropdown, and selects one for this field, but you can change it.
        • Image URL: The URL field. The user can select a URL field from the model, enter the complete URL, or use a global merge value to identify the URL.

        Note

        While the latter two options do not require a model to be specified, when using merge fields for the URL, setting the model provides the needed model row context.

    • Size: Control the size of the image.

      • Original: The image will display at its original size, without regard to the size of the Wrapper.
      • Contain: The image will scale so that it will at least meet the top and bottom margins of the Wrapper.
      • Cover: The image will scale so all parts of the Wrapper’s background are covered by the image.
    • Position: Choose the orientation of the image within the Wrapper.

    • Repeat: Determine if the image will repeat vertically, horizontally or both.

      • No Repeat
      • Horizontal
      • Vertical
      • Both
    • Special effects: Add special effects to Wrapper image.

      • No effects
      • Parallax means that, when scrolling, the contents in the grid will scroll over the image
    • Color: Background color behind image. Defaults to transparent.

      • Click the transparent symbol to open color the selection menu.
  • Color: Choose a color to serve as Wrapper background. Defaults to transparent.

    • Click the transparent symbol to open color the selection menu.
Wrapper height section [[]]
  • Height Strategy:

    • Fit to Content: This sizes the wrapper to fit the components within.

      • Max Height (optional): The maximum height of the Wrapper component. Options are:

        • None

        • Short

        • Medium

        • Tall

        • Custom: Uses a custom height.

          • Custom Height: The height of the table, using a number and a sizing unit.
      • Min Height (optional): The minimum height of the Wrapper component. Options are:

        • None

        • Short

        • Medium

        • Tall

        • Custom: Uses a custom height.

          • Custom Height: The height of the table, using a number and a sizing unit
    • Fixed Height: Sets an absolute width.

      • Height:

        • Fit to Content

        • Short

        • Medium

        • Tall

        • Custom: Uses a custom height.

          • Custom Height: The height of the table, using a number and a sizing unit.
  • Overflow: Determines how content that overflows the wrapper is handled.

    • Scroll: The content is scrollable and a scroll bar is displayed.
    • Hide: The content that does not fit into the wrapper remains hidden.
    • Show: The wrapper resizes the content to fit into the wrapper.

Interactions tab [[]]

Click add Add interaction then select:

  • Action type: To initialize the display of the record details, choose the interaction:
    • Click: Best for desktop, as well as mobile.
    • Right-click: The right-click interaction will launch the actions added here. A common pattern is to create a customized context menu by using the Show/hide menu action.
      • Disable the browser’s default menu?: Override the browser’s context menu for the Skuid page, component, or element. If the browser’s context menu is not disabled, then the actions will run while the browser’s context menu appears on screen.

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

Display logic tab [[]]

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

Advanced tab [[]]

  • Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
  • 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, refer to MDN web docs.
    • Banner: Used for defining global site details, such as company name, global search, logos, and similar information.
    • Complementary: Used for content that, while related to the main content area, is not necessary for that main area to stand alone. Typically used for sidebars and other supplementary information.
    • Content Info: Used for footers that appear on each page, which typically contain copyright information, navigation items, or similar content.
    • Form: Used to identify sections that comprise a singular form–even though it may be comprised of multiple components.
    • Main: Used to identify primary focus of the page.
    • Navigation: Used to indicate a section containing links for navigating a site.
    • Region: Used as a more generic landmark in order to indicate an area is relevant, but not categorized under the other available roles.
    • Search: Used to indicate a section contains elements for searching the page or site.