Component-specific best practices

Review the guidance below to ensure your application's table displays, button groups, and search functionality follow Workshop design best practices.

Tables and lists

When adding Object Tables, Object Lists, or Pivot Tables to your application, you should practice the following:

• Always include counts to indicate the length of tables and lists by configuring a Metric Card widget in the table's section header. Choose Tag as your layout style.

• Ensure each section renders enough information for row selection; use collapsible detail panels for additional data instead of overlays, which can obstruct the base layer of information.

• Validate that your table or list adheres to Workshop's scrolling best practices.
• Use the Display & formatting section of the Widget setup panel to customize your table's display.

Button groups

When adding a Button Group to your application, you should practice the following:

• Ensure each button clearly guides user actions by matching its color to the user's mental model of the accompanying action's outcome or risk. Review the available button color options and apply the appropriate color based on the button's Intent.

  • None: Renders a gray hue; best used for secondary actions.
    • Examples: Back, Skip, or Cancel.
  • Primary: Renders a blue hue; best used as the main call to action or to advance the user's journey in your application.
    • Examples: Create, Add new, Next, or Continue.
  • Success: Renders a green hue; best used for completion actions or those denoting a positive outcome.
    • Examples: Submit, Save, Complete, Approve, or Enable.
  • Warning: Renders an amber hue; best used for actions that require a user's attention or awareness but are not destructive. The actions may also denote moderate risk.
    • Examples: Review required, Pending approval, Archive, or Suspend.
  • Danger: Renders a red hue; best used for destructive actions that cannot be easily undone. You can also use Danger for error states or critical alerts.
    • Examples: Delete or Remove.

• Add icons to buttons to help users understand their backing actions. Additionally, you should organize buttons from left to right based on their importance and visual load, with each button group containing a primary action. Refer to the table below for specific examples.

• Label your buttons using natural, user-friendly language in sentence case. Avoid repetitive copy when adding a Button Group to a section header where the context is clear.

• Add buttons in close proximity to their related section or widget. As an example, if you configure two Object Table widgets which render Equipment and Part objects, then you should add buttons with their relevant actions to each Object Table's specific header.

• Organize buttons hierarchically by adjusting their size, border, and color intensity in the Display & formatting section of the Widget setup panel.

• Do not apply distinct colors to every button, as this can create visual clutter and distract users. Instead, you should identify the primary action within a button group and assign the corresponding color.

Learn more about the Button Group widget.

Searching and filtering

When adding one of Workshop's filtering widgets to your application, such as Filter List or Exploration Filter Pills, practice the following:

• Use a Filter List's Vertical filter layout if the object list requires users to apply multiple filters simultaneously. This layout is also best used for complex filtering scenarios and provides a clear overview of available filtering options.

• Use a Filter List's Pills filter layout for compact, beginner-friendly visual filtering. The Pills layout is ideal for limited screen space or frequent filter changes. You can also use the Exploration Filter Pills widget for this same purpose.

• Add an Exploration Search Bar to enable comprehensive searches with complex filtering capabilities. This is best suited for experienced users requiring detailed, precise querying functionality. The Exploration Search Bar supports keyword searches, property filtering, and complex queries.