Tab Layout Component: New tab component for Appian!

[robinsultan]

Work Item Type

• New Component
• New Pattern
• New Layout
• Component Update
• Pattern Update
• Layout Update
• Documentation Fix

Component Details

Name: Lab Layout
SAIL Components: a!tabLayout()
Category: Layouts

Requirements

Purpose & Use Cases

Primary Purpose: Tab Layout will help to improve our component library, making it faster to achieve better UI results for AI and humans, and it will also set us up for introducing a tabbed-form component for handling the most complex form use cases.

Main Use Cases:

• Users are unable to use an OOTB solution for tabs and previous relied on custom sail (cards/buttons and links).
• Users who implemented custom SAIL tabs struggled with scalability and responsiveness when it came to long tab names, a large number of tabs, and varying screen widths. The new Tab Layout component has all of this baked in.

Variants

Required Variants:
No variants right now. We are aware that vertical tabs are needed, but they are currently deprioritized based on competing priorities.

Usage (Optional)

When to Use:

• Tab Layout is typically used as secondary navigation. Use it in combination with pages and page groups on sites/portals as well ass sections, headings, and boxes to additionally help separate the screen.

When NOT to Use:

• Do not use Tab Layout in lieu of pages. Tabs do not have unique URLs.
• Do not use Tab Layout inside of a form layout when sequential completion of the form is required. Use the wizard layout to ensure users are completing each step in the form before moving on.

Special Considerations:

• When used inside of a form, or another instance where a button will validate the UI, all tab contents will be validated at once. For example, if you have 5 tabs and are currently on tab 1, hitting submit will validate tabs 1-5, not just tab 1. You must then resolve all validations before submitting, similar to other layouts.

Accessibility Requirements (Optional)

• This component has been reviewed by the platform a11y engineer. Any questions/issues should be raised to the PAO for triaging.

Reference Materials

• Design documentation: THIS IS COMING SOON!
• Existing SAIL documentation: Secondary Navitgation
• Related components: Wizard Layout,
• Design examples/inspiration: THIS IS COMING SOON!
• UX Content guidance [Link if available]

Acceptance Criteria

• Component documentation follows established structure
• All specified variants are documented with working SAIL code examples
• Usage guidance is specific and actionable
• Code examples are syntactically correct and tested
• Visual examples (screenshots/images) are included where helpful
• File is saved in correct directory with proper naming