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

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.

    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.

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 source: This controls 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 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<http://www.yoursite.com/%7B%7B$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.”

    • 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.
Size and scrolling section [[]]
  • Height Strategy: Sets the way height is determined. Values are set using a number and a sizing unit.

    • Fit to Content: Height adjusts based on what’s needed to fit nested elements.

      • Min height (optional): The minimum height, even when accounting for nested elements.
      • Max height (optional): The maximum height, even when accounting for nested elements.
    • Fixed Height: Sets an absolute height.

      • Height: The absolute height to render at.
  • Width strategy: Sets the way width is determined. Values are set using a number and a sizing unit.

    • Fill available space: Width stretches horizontally to the edge of the next parent container—whether that be another component or the entire page

      • Min width (optional): The minimum width, even when accounting for nested elements.
      • Max width (optional): The maximum width, even when accounting for nested elements.
    • Fixed width: Sets an absolute width.

      • Width: The absolute width to render at.
  • Overflow x-axis and Overflow y-axis: Determines how to handle nested elements that overflow from within horizontally (x-axis) and vertically (y-axis). These properties and their values mirror their CSS property equivalents

    • Auto: Elements that overflow are clipped and scrollable, but scrollbars only display when elements overflow.

    • Scroll: Elements that overflow are clipped and scrollable, and scrollbars display regardless of whether or not elements overflow.

      Note

      macOS may hide scrollbars regardless of this value, depending on the user’s operating system settings.

    • Hide: Elements that overflow are clipped and inaccessible to the user.

    • Visible: Elements that overflow spill outside of the component without adding a scrollbar.

Interactions tab [[]]

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:

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.