Navigation¶

The Navigation component is a layout component used to create custom navigation items that allow end users to navigate Skuid apps, go to different web pages, or perform Action Framework actions.

Using the Navigation Component¶

Navigation is a vital element of a user interface and can guide users through an app, as well as any necessary workflow actions, more efficiently. Use the Navigation component to build custom navigation bars that are intuitive and tailored to unique processes.

In addition to facilitating traditional navigations, the Navigation component can be used to build handy dropdown menus within a Skuid page that are connected to a broad range of actions with the Action Framework.

Warning

If using the Navigation component within your Skuid pages, the Item Source property must be set to Manual. All other source options will result in errors within Salesforce communities.

Manually Add Items to the Navigation¶

Add a Navigation component to a Skuid page.
Format the Navigation component.
Add navigation items to the component: Click the component in the canvas, then click Add nav item; rename the new navigation item in the property pane.
- To remove an item, click delete Remove.
- Configure items by clicking them, then editing in the Navigation Properties pane. (Optional)

Properties¶

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

Component properties¶

General tab [[]]¶

Type: Controls the visual orientation of the Navigation component.
- Horizontal: Navigation items align in a straight line from left to right.
  - Overflow to menu navigation: If true, any navigation items that do not fit within the horizontal navigation—based on screen size—will be placed into a dropdown menu.
  - Screen Size to Collapse Item Text:
    - Never: The navigation component will not respond to screen size.
    - Tablets and smaller: Navigation will respond to widths of 1024 pixels or smaller.
    - Phones: Navigation will respond to widths of 480 pixels or smaller.
  - Alternate format: Available if Screen Size to Change Format is set to either Tablets and smaller or Phones.
    - Collapse to Menu: The horizontal list will transform into a dropdown menu type at the set screen size.
    - Wrap Centered: The horizontal list will transform into a vertical menu at the set screen size, with navigation items centered in the navigation menu.
  - Menu Icon: Select the icon of the drop down menu (optional).
- Drop Down: All navigation items are collapsed into a dropdown menu indicated by a down arrow.
  - Use Icon: If true, an icon will display beside items in the drop down.
  - Label: Creates a custom label for the collapsed dropdown menu.
    
    Note
    
    If the item source selected is Salesforce Apps, the Navigation defaults to the first app listed. To change the label, insert a custom value for the Label Property.
Item source: Choose the source of navigation menu items.
Manual

Salesforce tabs for current app

Salesforce apps

Salesforce apps with tabs

Salesforce user menu
Note

Other than Manual, all options automatically populate menu items.

Advanced tab [[]]¶

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

Styles tab [[]]¶

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.
Margin: Sets a component’s margin (the space around it) relative to other components on the page.
- To set margins for all sides, click border-all All.
- To set margins for each side individually, click border-separate Separate.
Margin values can be set to any configured spacing variable for the page’s design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Display logic tab [[]]¶

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

Nested elements¶

Navigation item properties¶

These properties control the behavior and look of the individual navigation items within the Navigation component.

General tab [[]]¶

Label: The text that appears within each navigation item. Used to indicate where the navigation item will take the end user or what the item will do when clicked.
Icon: A unique visual element that appears next to each navigation item. Used to indicate where the navigation item will take the end user or what the item will do when clicked..
Unique ID (optional): Skuid automatically generates an alphanumeric ID for the navigation item; if preferred, give it a practical name.

Actions tab [[]]¶

Customize the actions taken when an end user clicks a navigation item:

Click add Add action, then select:

Action Type: Use the Action Framework to launch actions.

Note

Navigation items default to the Go to URL Action Type, but this property, Associated URL, and Open URL in can be changed in the Properties pane.

Styles Tab [[]]¶

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.

Display logic tab [[]]¶

Note

For information on individual condition properties, see the Display Logic docs.

Render conditions [[]]¶

These conditions govern when an element or component will display.

Render if…: The conditions that must be met to enable the element’s display.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
  - Condition logic: The custom logic for grouping and applying one or more conditions.
If hidden, model field changes should be: (only available on Field rendering tabs) If the field is hidden by conditional rendering, this property determines whether any changes made to this field (via Action Framework or JavaScript) are saved in the model, or canceled.

Note

Depending on the needs of your org, it could be bad user experience to update fields without direct user input especially when that user may be unaware of they are doing so.
- Retained in model (the default)
- Cancelled

Enable conditions [[]]¶

These conditions govern when a displayed element may or may not be enabled for use.

Enable if…: The model conditions that must be met to enable the field’s editing.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
  - Condition logic: The custom logic for grouping and applying one or more conditions.
Message to show when disabled: A brief explanation for why the field is disabled.

Selected conditions [[]]¶

These conditions govern when a navigation item displays with “selected” styling.

Display as selected if…: The model conditions that must be met to style the navigation item.
- All Conditions are met
- ANY Conditions are met
- Custom Logic is met
  - Condition Logic: The custom logic for grouping and applying one or more conditions.

Style variant conditions [[]]¶

These conditions govern which style variant is applied and displayed on a component or element.

Note

You can create one, or more, style variant conditions and set each individually.

Click add Add a new condition to add a new style variant condition.
Then, click the new style variant condition and configure.

When Skuid executes the display logic, the style variant conditions are evaluated in order.

Use this Style Variant if…: The model conditions that must be met to enable the styling.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
  - Condition logic: The custom logic for grouping and applying one or more conditions.
- Style variant: The style variant to be rendered if condition(s) are met.

Render conditions [[]]¶

These conditions govern when an element or component will display.

Render if…: The conditions that must be met to enable the element’s display.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
  - Condition logic: The custom logic for grouping and applying one or more conditions.
If hidden, model field changes should be: (only available on Field rendering tabs) If the field is hidden by conditional rendering, this property determines whether any changes made to this field (via Action Framework or JavaScript) are saved in the model, or canceled.

Note

Depending on the needs of your org, it could be bad user experience to update fields without direct user input especially when that user may be unaware of they are doing so.
- Retained in model (the default)
- Cancelled

Enable conditions [[]]¶

These conditions govern when a displayed element may or may not be enabled for use.

Enable if…: The model conditions that must be met to enable the field’s editing.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
  - Condition logic: The custom logic for grouping and applying one or more conditions.
Message to show when disabled: A brief explanation for why the field is disabled.

Selected conditions [[]]¶

These conditions govern when a navigation item displays with “selected” styling.

Display as selected if…: The model conditions that must be met to style the navigation item.
- All Conditions are met
- ANY Conditions are met
- Custom Logic is met
  - Condition Logic: The custom logic for grouping and applying one or more conditions.

Navigation¶

Using the Navigation Component¶

Manually Add Items to the Navigation¶

Add actions to individual navigation items¶

Properties¶

Component properties¶

General tab [[]]¶

Advanced tab [[]]¶

Styles tab [[]]¶

Display logic tab [[]]¶

Nested elements¶

Navigation item properties¶

General tab [[]]¶

Actions tab [[]]¶

Styles Tab [[]]¶

Display logic tab [[]]¶