Hubs Framework

Introduction

A Hub is a place where users can find workspaces and relevant content- all while maintaining context to a holistic area. Hubs allow users to dive deep into these functional areas while making the workflow predictable and easy to navigate between tasks. Key aspects of Hub anatomy include:

• Navigation Panel: Often referred to as the “Nav Bar”, this left-aligned panel serves as the primary, contextual navigation between the Hub’s pages and links.
• Overview Page: This default landing page for Hub surfaces meaningful and timely insights that the user has an interest in or that are relevant to their role. The Overview page orients the user to the space they are in and prompts users to take action, launching the user into their workflow and providing of-the-moment insights.
• Tasks and Report Pages: Configured by app teams. When the user clicks on the navigation item, the task/report associated with the item will be shown on the main section of the Hub.

More Information

More information on the Hubs Framework can be found on the UI Platform website.

Introduction

The Mobile Hubs Framework is the Canvas Mobile-owned equivalent of the Web Hubs Framework supporting Mobile scaling.

A Hub is a place where users can find workspaces and relevant content- all while maintaining context to a holistic area. Hubs allow users to dive deep into these functional areas while making the workflow predictable and easy to navigate between tasks. The main aspects of Hub anatomy are:

• Local navigation to task and reports
• Configurable overview pages utilizing the Mobile Card Framework
• Local navigation to optional child overviews

Elements

Overview Page(s)

All Hubs contain a main Overview page; larger Hubs may also contain child Overview pages for more specific product areas when necessary. On all Overview pages, various types of UI elements are supported.

Sections

Most UI elements on the Overview are grouped into Sections. Title text sizing for the Section is dynamic with OS-level accessibility settings but non-configurable by default. Sections typically consist of standard Mobile Card Framework Cards, such as List and Large Value Cards, with each Card serving as the entry point to a Task and Report.

Quick Actions

Quicks Actions are an optional section type that enables users to access highly used Tasks and Reports without needing to delve deeper into a Hub. Quick Actions should be located at the very top of the Overview page content, though they may be rendered in any quantity or order. The section is always rendered via a Carousel of Secondary Buttons.

Task Sections

If the standard supported UI elements (i.e., Buttons and Cards) do not fulfill the product requirements (e.g., a Table), XO content may be rendered through an alternative called a Task Section. Web Task Sections surface content up front on the Overview, while the mobile equivalent conceals the content under a Task Section Card due to screen restrictions. Task Sections are unique in that they do not need to be part of a Section like the other standard UI elements.

Main Menu

All Hubs contain a main menu that is accessible from the main Overview page Top App Bar dropdown that renders various destinations via List Items and Expandables in a Top Sheet. The main menu dropdown does not persist across other pages within the Hub outside of the main Overview. When more than one destination exists for a grouping, an Expandable is used to house the destinations. When only one destination exists for a grouping, a List Item is used. At the bottom of the Top Sheet is a Suggest Link section, where links are intended to live.

Tasks and Reports

Tasks and Reports accessed via Cards on an Overview or directly through the Main Menu are compatible with all Workday rendering types on Mobile – Bespoke, WebView, MAX Generated UI.

When navigating from a Task and Report via the Top App Bar or completion of a Task and Report, users are brought back to the Overview or Main Menu based on their point of ingress. If a Task or Report is accessed via a Quick Action or Card, users are redirected to the Hub Overview. If a Task or Report is accessed from the Main Menu, the Main Menu will remain open upon back navigation or task completion. The menu stays open to reduce overall time to task, with users often needing to search and scan through multiple destinations to find the correct item within a holistic product area.

Designing with the Framework

When tasked with designing a Mobile Hub, close collaboration and partnership with Web teams or dual-platform oversight is encouraged.

This Quick Start guide contains a Mobile-Specific Checklist to ensure you account for existing mobile features, mobile-only use cases, and mobile form factor. Canvas Mobile additionally offers Mobile Hubs Framework Figma templates and tooling to work from and adapt for your product area.

For help crafting a more intuitive Hub, review the Canvas UX Content Guide for consistency with data naming conventions.

Adapting the Framework

Any changes to the Framework require cross-platform collaboration and prioritization. Adaptations are welcomed under evidence of clear systematic improvement across both platforms. System-level changes impact and are delivered to all code connected with the Framework.

If support gaps are identified in the Framework, please connect with the Canvas Mobile design team for assistance. The team hosts regular Office Hours as an open space to pose questions and ask for help.

Learn More

Further information on the Mobile Hubs Framework may be found in the Mobile Card Framework documentation.

More foundational information on the Framework can be found in UI Platform’s XO developer documentation.