In This Section
- Concepts
- Data
- Build
- The Composer
- The Page Index
- Context
- Pages
- Models
- Components
- Best Practices
- Debugging Skuid in the Console
- Logic
- Style
- Deploy
- Extend
- Reference
- API Reference
- skuid.debug
- skuid.runtime
- skuid.$
- skuid.actions
- skuid.ajax
- skuid.builder.core
- skuid.builder.core.coreProps
- skuid.calendar
- skuid.component
- skuid.componentType
- skuid.events
- skuid.formula
- skuid.hotkeys
- skuid.label
- skuid.load
- skuid.model
- skuid.model.Model
- skuid.mustache
- skuid.page
- skuid.sfdc
- skuid.snippet
- skuid.time
- skuid.ui
- skuid.utils
- skuid.version
- Component-Specific APIs
- Skuid Model Metadata Object
- Skuid Model Child Relationship Metadata Object
- Skuid Model Condition Metadata Object
- Skuid Model Field Metadata Object
- Skuid Model Record Type Metadata Object
- Page XML API
- skuid CLI
- Skuid Metadata Object Reference
- Skuid Glossary
- Formula and Function Reference
- Early Access Expectations
- Open Source Software Attributions
- API Reference
- Site Administration
- Tutorials
- Legal terms and conditions
In This Topic
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 NLX only*)
- blocking the UI to show messages to the user and unblocking the UI
Show modal¶
Displays the modal.
- Configure modal: Opens modal configuration window, where you build the new modal.
Close modals¶
Closes all open modals.
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.
Show toast 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.
Allow HTML: Determines HTML rendering behavior for Message to display contents. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:
Enabled:
This text is importantDisabled:
<strong>This text is important</strong>
Message to display: The text to be displayed within the toast element. Compatible with merge syntax. Can also contain rendered HTML if Allow HTML is enabled.
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.
Block UI with message¶
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 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 SFX [[]]¶
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 NLX.
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.
- 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.
- To specify route parameters for this navigation action, click fa-plus-circle Add Parameter.
Skuid page or Skuid route: The page or route name. (Start typing and Skuid autopopulates the field.)
Show/hide menu¶
Allows the builder to add a dropdown menu to a button, image, or row action. To construct the menu:
- On the action, click add Add menu section.
- (Optional) If desired, add a label and icon for the menu section.
- On the section, click add Add option.
- Label: The text label for the menu item.
- Icon: (Optional) An icon for the menu item.
- On the new option, add Add action.
- Use the Action Framework to launch actions from the menu item.
Show/hide 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 General 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:
Accordion [[]]¶
Open all sections
Opens all closed sections within the selected Accordion.
Close all sections
Closes all open sections within the selected Accordion.
Toggle section
- Section: Determines which section is toggled open or closed based on the section’s unique Id.
Calendar [[]]¶
Event Source actions
Event Source: The event source that contains the event action.
- On-click: Accesses the event source action that allows users to view or edit that event’s details.
- Create event: Accesses the event action that allows the user to create a new event.
Note
Both On-click and Create event require that these actions already exist on the event source in the Calendar component.
Go to date
Navigates to a date in the calendar. When run, the action will navigate to the date selected (Day and List view); the week containing the date (Week view); or the Month containing the date (Month view).
Date type:
Specific date: Use the date selector to choose the desired day.
Result of a formula:
- Formula context model (optional): Establish context for the formula by selecting the model being referred to with merge syntax.
- Formula: In this field, use merge syntax as well as Skuid’s formula functions to dictate the date.
Select view
Displays the calendar in the specified view.
- Month
- Week
- Day
- List
Note
The selected view must exist within the calendar.
Carousel [[]]¶
Go to previous slide
Progresses the selected Carousel component to the previous slide.
Go to next slide
Progresses the selected Carousel component to the next slide.
Deck [[]]¶
Go to page
Navigates to the Target page in the component.
- Target page:
- First page
- Last page
- Previous page
- Next page
Filter Set [[]]¶
Open all accordion sections
(Only applies to Filter Sets with a Vertical with accordions layout)
Opens all accordion sections in the selected Filter Set.
Close all accordion sections
(Only applies to Filter Sets with a Vertical with accordions layout)
Closes all accordion sections in the selected Filter Set.
Form [[]]¶
Change Form mode
Changes the mode of the selected component.
- Form mode: The mode to switch the selected component to. Available options include:
- Edit
- Read with in-line editing
- Read-only
- Toggle between this and the default mode: When enabled, this option does not set the component to a specific mode, but switches between the selected mode and the mode set in the component’s Default mode property.
List [[]]¶
Go to page
Navigates to the Target page in the component.
- Target page:
- First page
- Last page
- Previous page
- Next page
Open all drawers
Opens drawers for all rows in the selected List.
Close all drawers
Closes drawers for all rows in the selected List.
Message Area [[]]¶
Show message block
Creates a new message block within the selected Message Area, with standard message block properties available.
Clear message blocks
Closes all message blocks currently displayed within the selected Message Area.
Navigation [[]]¶
Expand sub-navigation
Expands all necessary navigation menus to highlight the selected navigation item. This action is useful for displaying deeply nested items, as it can highlight any item, no matter how deeply nested.
- Item: The navigation item to expand to.
Select navigation
Emulates an end user’s click on the selected navigation item, causing whatever actions associated with that navigation item to trigger.
- Item: The navigation item to select.
Page Include [[]]¶
Load current page
Loads the selected Page Include.
- Load in background: If checked, subsequent actions in this action sequence can begin while the included page is being loaded. If unchecked, all subsequent actions hold until the included page is loaded.
- Show loading indicator: If checked, a loading indicator displays while the included page is being loaded.
Load new page
Loads a different page from the one already displayed into the Page Include.
- Skuid page: The Skuid page to load.
- Query string: The URL parameters to send along with the Page Include request. Values must be URL-encoded; multiple parameters are joined with an ampersand (&). This property accepts merge syntax.
Unload
Unloads the currently displayed Page Include.
Table [[]]¶
Change Table mode
Changes the mode of the selected component.
- Table mode: The mode to switch the selected component to. Available options include:
- Edit
- Read with in-line editing
- Read-only
- Data grid
- Toggle between this and the default mode: When enabled, this option does not set the component to a specific mode, but switches between the selected mode and the mode set in the component’s Default mode property.
Export Table data
Exports data from the Table specified in the action’s Component property according to the configuration set in the Table’s Export tab.
Go to page
Navigates to the Target page in the component.
- Target page:
- First page
- Last page
- Previous page
- Next page
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.
Open all drawers
Opens drawers for all rows in the selected Table.
Note
When this action is run, each drawer activates any configured Before load actions. Be aware when drawers have other actions configured—particularly query actions.
Close all drawers
Closes drawers for all rows in the selected Table.
Vertical Navigation [[]]¶
Expand sub-navigation
Expands all necessary navigation menus to highlight the selected navigation item. This action is useful for displaying deeply nested items, as it can highlight any item, no matter how deeply nested.
- Item: The navigation item to expand to.
Select navigation
Emulates an end user’s click on the selected navigation item, causing whatever actions associated with that navigation item to trigger.
- Item: The navigation item to select.
Wizard [[]]¶
Navigate to step
Navigate users to a specific step in the Wizard component.
Most useful if a list of actions requires a user be taken to a specific step, for example if a branch formula determines a user should proceed to an alternate area of the Wizard.
- Step ID: The ID of the step to navigate the end user to. Compatible with merge syntax.
Navigate to previous step
Navigate users to the previous step in the Wizard component.
This works for general purpose Previous button actions without requiring a specific step ID, as with the Navigate to Step action.
Navigate to next step
Navigate users to the next step in the Wizard component.
This works for general purpose Next button actions without requiring a specific step ID, as with the Navigate to Step action.
Change layout
Used to alter the layout of the selected Wizard, which is initially set in the component’s General properties.
When a Wizard’s layout is changed, the user remains on their current step, but the position of the step’s content, as well as any enabled step/progress indicators, will shift.
- Layout: Determines the layout to switch the selected Wizard to.
- Toggle: Switches the Wizard to the opposite layout of what it’s currently set to, e.g. Horizontal > Vertical or vice versa.
- Vertical: Switches the Wizard to the vertical layout. If the Wizard is already in a vertical layout, there is no effect.
- Horizontal: Switches the Wizard to the horizontal layout. If the Wizard is already in a horizontal layout, there is no effect.