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

  • Drag and drop a Wrapper component onto a Skuid page.
  • 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

Styles Tab [[]]

Style Variant section [[]]

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.

  • Style Variant: Dynamically populates Design Systems created within the Design System Studio as selectable values.

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 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:

    In Skuid Platform

    • File: Setting Data Source Type to REST and Data Source to SkuidLocal lets you access images previously uploaded within the Files tab.

      • File Name: If the file has been correctly uploaded, when you start typing the filename, Skuid will autocomplete.

    • URL: To access an image URL using Skuid Platform, you must change the data source and data source type:

      • Data Source Type: UI-Only.
      • Data Source: UI-Only.
      • Image Source: URL
      • Model: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model the provides the needed model row context.
      • Image URL: Enter the complete URL.

    In Skuid on Salesforce

    • 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: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model the provides the needed model row context.
      • Image URL: Enter the complete URL.

    • 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 transparent symbol to open color selection menu.

  • Color: Choose a color to serve as Wrapper background. Defaults to transparent.

    • Click transparent symbol to open color selection menu.

Height/Scrolling 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
      • Min Height (optional): The minimum height of the Wrapper component. Options are:
        • None
        • Short
        • Medium
        • Tall
        • Custom
    • Fixed Height: Sets an absolute width
      • Height:
        • Fit to Content
        • Short
        • Medium
        • Tall
        • Custom

Interactions tab [[]]

Click add Add Interaction and then select:

  • Action Type: Choose from three possible interactions:
    • Click: best for desktop as well as mobile
    • Swipe: for mobile
    • Press: best for mobile

Click add Add Action on the selected interaction type to add actions, then edit the Action Types:

Display Logic tab [[]]

Standard display logic options are available.

Advanced tab [[]]

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