Visual Navigation

Visual navigation actions manage the what the end user sees in the browser:

  • showing and hiding modals, sliding panels, and components
  • sending the user to a specific URL or Skuid page (Skuid Platform only)
  • blocking the UI to show messages to the user and unblocking the UI

Close all Modals

Closes all open modals.

Close topmost Modal

Closes only the topmost—or most recently opened—modal. (Handy for modals within modals.)

Show Modal

Displays the modal.

  • Configure Modal: Opens modal configuration window, where you build the new modal.

Show Message

Displays a toast message in the bottom left of the screen. Commonly used to alert the end user of page changes or other necessary notifications. If you require a message that prevents additional user input until the message is gone, consider the Show message and block UI action.

  • Message to display: The text to be displayed within the toast element. Compatible with merge syntax.

  • Display duration: Limits how long the message is displayed on screen.

  • Click to dismiss: Determines whether the message can be closed if the end user clicks the toast element. When disabled, a message will only disappear after the length of time entered in the Display duration property.

  • Message type: Determines which Toast message variant to use when displaying the message.

    • Default: Refers to the Default style variant
    • Error: Refers to the Error style variant
    • Warning: Refers to the Warning style variant

    Note

    Other Toast variants are not currently available.

Show message and block UI

Blocks the UI and displays a message. Commonly used to notify the end user about page updates or to prevent the user from interrupting any impending actions.

  • Message: The text for the message, for example, “Loading…”

  • Subtext: Smaller text that displays beneath the Message text. Typically used to explain more information about the displayed message.

  • Timeout (seconds): Limits how long the UI is blocked.

    • 0.5-10: Increments of seconds until the UI is unblocked.

    • Never: The UI is never unblocked unless an Unblock the UI action occurs.

      Warning

      Only use the Never timeout option when there is also an Unblock the UI action later in the script.

  • Show Spinner: When enabled, displays a spinning icon that loops as long as the message is displayed. Intended primarily for when the message is used as a loading indicator.

  • Style: Determines which UI Blocker variant to use when displaying the message.

    • default & Light: Refer to the Default style variant
    • Dark: Refers to the Dark style variant

    Note

    Other UI blocker variants are not currently available.

Unblock the UI

Unblocks the UI once the actions between this and Show message and block UI have completed.

Go to URL

Sends the end user to another web page, which can be a Skuid page or an external website.

  • URL: The URL to send a user to.

    • A URL
    • An ID field for a Salesforce Object
    • A page parameter

  • Open URL in:

    • Current Window:

      • If using the button within an iFrame, opens the URL in the current iFrame.

        Note

        Other content blocks on the page remain the same.

      • If not using the button within an iFrame, opens the URL in the current window.

    • Blank Window: Opens the URL in a new tab.

    • Parent Window: Opens the URL in the current window, whether or not the button is within an iFrame.

      When working with Skuid Lightning components:

      • Choose Current Window to redirect only the contents of the Skuid Lightning component.
      • Choose Parent Window to redirect the entire page.

Skuid on Salesforce [[]]

To redirect to the standard Salesforce version of the Skuid page you are on, input the following merge syntax: /{{Model.KeyPrefix}}/o?nooverride=1.

When working with Skuid Lightning components, for Open URL in property:

  • Choose Current Window to redirect only the contents of the Skuid Lightning component.
  • Choose Parent Window to redirect the entire page.

Encoding URLs [[]]

Ensure that characters within the URLs are URL-encoded where necessary. Some characters can break URLs in certain situations, so they may require the use of their percent-encoded equivalents. This can be especially important when dealing with URL parameters, merge syntax, or using them in tandem.

For example, use this:

https://example.skuidsite.com/app/page?who_id={{ContactId}}&retURL=skuid__ui%3Fpage%3DPage%26id%3D{{Another.Id}}

Not this:

https://example.skuidsite.com/app/page?who_id={{ContactId}}&retURL=skuid__ui?page=Page&id={{Another.Id}}

If you’re more JavaScript-savvy, consider using the encodeURI() or the encodeURIComponent()functions where appropriate.

Go to Skuid Page

Note

This action is only available in Skuid Platform.

When Skuid loads a web browser, it must first load all of the backend code to support the page. Using this action, that code stays loaded in the browser while only the Skuid page itself is replaced, resulting in better load times.

  • Navigation Type:

    • Skuid Page: Links to a specific Skuid page, regardless of route.

      Note

      This links to a preview of the specified Skuid page.

    • Route: Links to a specific route.

      • To specify route parameters for this navigation action, click fa-plus-circle Add Parameter.
        • Key: The route parameter to pass a value to.
        • Value: The value to set the route parameter to.

  • Skuid Page or Skuid Route: The page or route name. (Start typing and Skuid autopopulates the field.)

Open Sliding Panel

This opens (or toggles) the sliding panel for this specific action.

Note

To keep this panel open, uncheck Close When User Clicks Outside Of Panel in the sliding panel properties.

  • Configure Panel: Opens the panel configuration window. For more information about building sliding panels, see the sliding panels topic.

  • Behavior:

    • Open: The button displays the panel.

      Note

      If Open is selected, and the action script containing this action occurs again, the sliding panel is not closed. To toggle the panel open and closed, select Toggle as the behavior.

    • Toggle: The button hides or shows the panel, depending on whether the panel is already showing on the page.

Close Sliding Panel

Closes one or all open sliding panels, depending on the selected behavior.

  • Behavior:
    • Close all: The button closes all open panels.
    • Close topmost: The button closes the topmost panel only.

Toggle Component

Hides or shows selected a selected Skuid UI element—typically a component. Other elements that have unique Ids, such as Field Editor fields and Navigation items, may also be toggled with this action.

  • Behavior:

    • Toggle: The button hides or shows the component, depending on whether the component is already showing on the page.
    • Show: The button displays a hidden component.
    • Hide: The button hides a displayed component.

  • Component: Select which component toggle. Components are listed by their type and unique ID. When a component is selected, a flashing yellow outline indicates the chosen component within the canvas.

    Note

    Each component’s unique Id is viewable under its Advanced properties tab; other elements may also list this property in the Basic properties tab.

Run Component Action

Activates component-specific features within the UI.

  • Component: The Skuid component instance to run the action on. Components are listed by component type and unique Id.
  • Action to Run: The component-specific action to run. Available actions vary by component:

Field Editor [[]]

  • Change Edit/Read Mode: Updates the edit mode of the selected component.
    • Toggle Mode: Alternates the component between edit and read modes.
    • Edit Mode: Sets the component’s editing mode to edit, enabling end user input.
    • Read Mode: Sets the component’s editing mode to read, disabling end user input.

Table [[]]

  • Show table configuration modal: Displays the Table Settings popup, which allows the end user to reorder columns on the page and/or choose whether a column will be visible—or hidden—on the page.
  • Change Edit/Read Mode: Changes the mode of the selected component.
    • Toggle Mode: Alternates the component between edit and read modes.
    • Edit Mode: Sets the component’s editing mode to edit, enabling end user input.
    • Read Mode: Sets the component’s editing mode to read, disabling end user input.
  • Toggle row mode: Change the mode of the selected row.
  • Toggle: Alternates the row between edit and read modes.
  • Edit: Sets the row’s editing mode to edit, enabling end user input.
  • Read: Sets the row’s editing mode to read, disabling end user input.

Wizard [[]]

  • Navigate to Step: Refreshes the selected Wizard component to the chosen step