Action hub
Use when
Use action hubs to present prescriptive calls to action for things users must, should, or could do within an area of the system. They are often appropriate as landing pages for main navigation items but can also be descendant pages.
Don't use when
Don't use action hubs to present information that is not actionable. Analyze information for users to provide context and make it actionable.
Common actions
You can include up to three secondary buttons to provide quick access to common tasks, such as adding a record. If you need to group multiple related actions, use a menu button.
Needs attention
Display actions that users must perform based on business requirements or best practices, and link users to the place where they can complete the action, such as a modal, split view page, or record page.
Start each item in the list with a verb that communicates the action to perform. After the verb, include the number of items that require attention and a succinct description.
Order the items by workflow order, or by importance if they are not part of the same workflow.
Consider ways to operationalize strategic tasks by breaking them down into smaller, achievable chunks of work.
Content area
Additional content should reflect one of the following sets of principles.
Operational but optional
Content that is operational but optional should:
- be operational in nature, reflecting work that the user does on a regular basis to run the business
- provide contextual information to help the user decide whether to act
- be elevated to a needs attention item after a specific threshold is met
Strategic and prescriptive
Content that is strategic and prescriptive should:
- be strategic in nature, oriented towards longer term organizational goals rather than day to day tasks
- prescribe one or more actions which may take place inside or outside the system
- be synthesized and provide a context for comparison — don't require the user to figure out what the information means
Strategic and tied to a needs attention item
Content that is strategic and tied to a needs attention item should:
- be strategic in nature, oriented towards longer term organizational goals rather than day to day tasks
- represent progress towards an outcome that is impacted by a least one existing needs attention item
- be synthesized and provide a context for comparison — don't require the user to figure out what the information means
Key information call to action
Use key information calls to action when the condition for prescribing an action can be distilled to a single piece of information.
Charts
Action hubs are not intended for analytical tasks. If you include charts, scope the data set to the appropriate strategic or operational view for the user. You can use one filter if necessary to swap between relevant contexts.
Page links
Groups of links to include and display in the following order.
Related links
Display up to 10 links to related pages in alphabetical order.
Recently accessed
Display up to five items in reverse chronological order to indicate what users accessed most recently.
Settings
Optionally include links to the settings applicable to functionality within the action hub and its descendant pages.
Needs attention
Navigation
Link needs attention items to the place where users can complete the action, such as a modal, split view page, or record page.
Empty state
When no needs attention items are available, an empty state message indicates that users are caught up.
Columns
When more than six needs attention items are available in a viewpoint that is 768 pixels or larger, the content splits into two columns.
Settings
Open settings forms in modals.
Responsiveness
Action hubs reflow content in small viewports.
Guidelines
Components
- NPM package
@skyux/pagesView in NPM | View in GitHub None found.- Install with NPM
npm install --save-exact @skyux/pagesNone found.
import { SkyActionHubModule } from '@skyux/pages';
Selector: sky-action-hub
Creates an action hub to direct user attention to important actions and provide quick access to common tasks.
Inputs
needsAttention: SkyActionHubNeedsAttentionInput | undefined
The list of actions that users must perform based on business requirements or best practices, or "loading" to display a wait indicator.
parentLink: SkyPageLink | undefined
Links back to a parent page.
recentLinks: SkyRecentLinksInput
The list of recently accessed links, or "loading" to display a wait indicator.
Default: []
relatedLinks: SkyPageLinksInput
The list of related links, or "loading" to display a wait indicator.
Default: []
settingsLinks: SkyPageModalLinksInput
The list of settings with modal parameters, or "loading" to display a wait indicator.
Default: []
title: string
The page title.
Default: ""
Selector: sky-action-hub-content
Displays additional content after the action items.
Selector: sky-action-hub-buttons
Displays buttons after the page title.
Example
<a class="sky-btn sky-btn-default" href="path/to/new">New</a>
interface SkyActionHubNeedsAttentionClickHandlerArgs {
item: unknown;
}Properties
item: unknown
type SkyActionHubNeedsAttentionClickHandler = (_: SkyActionHubNeedsAttentionClickHandlerArgs) => void
A list of actions that users must perform based on business requirements or best practices.
type SkyActionHubNeedsAttentionInput = SkyActionHubNeedsAttention[] | "loading"
Specifies action items that require attention and directs users to pages where they can resolve them.
interface SkyActionHubNeedsAttention {
click?: SkyActionHubNeedsAttentionClickHandler;
message?: string;
permalink?: { route?: { commands: any[]; extras?: NavigationExtras }; url?: string };
title: string;
}Properties
The click handler for the action item.
message?: string
Text to display after the title.
permalink?: { route?: { commands: any[]; extras?: NavigationExtras }; url?: string }
The link to resolve the action item.
title: string
The title of the action item.
Displays links to related information or recently accessed items.
interface SkyPageLink {
label: string;
permalink: { route?: { commands: any[]; extras?: NavigationExtras }; url?: string };
}Properties
label: string
The link text.
permalink: { route?: { commands: any[]; extras?: NavigationExtras }; url?: string }
The link destination.
type SkyPageLinksInput = SkyPageLink[] | "loading" | undefined
Displays links to related information or recently accessed items.
interface SkyPageModalLink {
label: string;
modal?: { component: any; config?: SkyModalConfigurationInterface };
permalink?: { route?: { commands: any[]; extras?: NavigationExtras }; url?: string };
}Properties
label: string
The link text.
modal?: { component: any; config?: SkyModalConfigurationInterface }
The modal parameters.
permalink?: { route?: { commands: any[]; extras?: NavigationExtras }; url?: string }
The link destination.
type SkyPageModalLinksInput = SkyPageModalLink[] | "loading" | undefined
Link that also has a date field to sort by.
interface SkyRecentLink {
label: string;
lastAccessed: string | Date;
permalink: { route?: { commands: any[]; extras?: NavigationExtras }; url?: string };
}Properties
label: string
The link text.
lastAccessed: string | Date
The date when the link was last accessed. Valid types are a Date object or ISO-8601 string.
permalink: { route?: { commands: any[]; extras?: NavigationExtras }; url?: string }
The link destination.
Recently accessed links to display in a link list component.
type SkyRecentLinksInput = SkyRecentLink[] | "loading" | SkyRecentlyAccessedGetLinksArgs | undefined
Parameters for retrieving a list of recently accessed links.
interface SkyRecentlyAccessedGetLinksArgs {
requestedRoutes: { app: string; route: string }[];
}Properties
requestedRoutes: { app: string; route: string }[]
The links to retrieve.
SKY UX test harnesses are built upon Angular CDK component harnesses. For more information see the Angular CDK component harness documentation.
import { SkyActionHubHarness } from '@skyux/pages/testing';
Harness for interacting with an action hub component in tests.
Methods
getNeedsAttentionBlock(): Promise<SkyNeedsAttentionHarness>
getNeedsAttentionItems(filter = {}): Promise<SkyNeedsAttentionItemHarness[]>
Get the testing harnesses for items within the needs attention block.
Parameters
filter = {}
Returns
Promise<SkyNeedsAttentionItemHarness[]>
getRecentLinks(): Promise<SkyLinkListHarness>
getRelatedLinks(): Promise<SkyLinkListHarness>
getSettingsLinks(): Promise<SkyLinkListHarness>
getTitle(): Promise<undefined | string>
Gets the title of the action hub.
Returns
Promise<undefined | string>
SkyActionHubHarness.with(filters: SkyActionHubHarnessFilters): HarnessPredicate<SkyActionHubHarness>
Gets a HarnessPredicate that can be used to search for a
SkyLinkListHarness that meets certain criteria.
Parameters
filters: SkyActionHubHarnessFilters
Returns
HarnessPredicate<SkyActionHubHarness>
A set of criteria that can be used to filter a list of SkyActionHubHarness instances.
interface SkyActionHubHarnessFilters {
dataSkyId?: string | RegExp;
}Properties
dataSkyId?: string | RegExp
Only find instances whose data-sky-id attribute matches the given value.
import { SkyNeedsAttentionHarness } from '@skyux/pages/testing';
Harness for interacting with the needs-attention component in tests.
Methods
getEmptyListText(): Promise<undefined | string>
Gets the text from an empty list. If there are items in the list, this will return undefined.
Returns
Promise<undefined | string>
getTitle(): Promise<undefined | string>
Gets the component's heading text. If there are no links, this will return undefined.
Returns
Promise<undefined | string>
hasItems(): Promise<boolean>
Whether the link list is showing a list of links.
Returns
Promise<boolean>
SkyNeedsAttentionHarness.with(filters: SkyNeedsAttentionHarnessFilters): HarnessPredicate<SkyNeedsAttentionHarness>
Gets a HarnessPredicate that can be used to search for a
SkyNeedsAttentionHarness that meets certain criteria.
Parameters
filters: SkyNeedsAttentionHarnessFilters
Returns
HarnessPredicate<SkyNeedsAttentionHarness>
A set of criteria that can be used to filter a list of SkyNeedsAttentionHarness instances.
interface SkyNeedsAttentionHarnessFilters {
dataSkyId?: string | RegExp;
}Properties
dataSkyId?: string | RegExp
Only find instances whose data-sky-id attribute matches the given value.
import { SkyNeedsAttentionItemHarness } from '@skyux/pages/testing';
Harness for interacting with a needs attention item in tests.
Methods
click(): Promise<void>
Clicks the item.
Returns
Promise<void>
getText(): Promise<string>
Gets the text content of the item.
Returns
Promise<string>
SkyNeedsAttentionItemHarness.with(filters: SkyNeedsAttentionItemHarnessFilters): HarnessPredicate<SkyNeedsAttentionItemHarness>
Gets a HarnessPredicate that can be used to search for a
SkyNeedsAttentionItemHarness that meets certain criteria.
Parameters
filters: SkyNeedsAttentionItemHarnessFilters
Returns
HarnessPredicate<SkyNeedsAttentionItemHarness>
A set of criteria that can be used to filter a list of SkyNeedsAttentionItemHarness instances.
interface SkyNeedsAttentionItemHarnessFilters {
dataSkyId?: string | RegExp;
text?: string;
}Properties
dataSkyId?: string | RegExp
Only find instances whose data-sky-id attribute matches the given value.
text?: string
Only find instances whose text content matches the given value.
import { SkyLinkListHarness } from '@skyux/pages/testing';
Harness for interacting with a link list component in tests.
Methods
getHeadingText(): Promise<undefined | string>
Gets the link list's heading text. If there are no links, this will return undefined.
Returns
Promise<undefined | string>
getListItems(filter = {}): Promise<SkyLinkListItemHarness[]>
isVisible(): Promise<boolean>
Whether the link list is showing a list of links.
Returns
Promise<boolean>
isWaiting(): Promise<boolean>
Gets the status of the wait indicator.
Returns
Promise<boolean>
SkyLinkListHarness.with(filters: SkyLinkListHarnessFilters): HarnessPredicate<SkyLinkListHarness>
Gets a HarnessPredicate that can be used to search for a
SkyLinkListHarness that meets certain criteria.
Parameters
filters: SkyLinkListHarnessFilters
Returns
HarnessPredicate<SkyLinkListHarness>
A set of criteria that can be used to filter a list of SkyLinkListHarness instances.
interface SkyLinkListHarnessFilters {
dataSkyId?: string | RegExp;
}Properties
dataSkyId?: string | RegExp
Only find instances whose data-sky-id attribute matches the given value.
import { SkyLinkListItemHarness } from '@skyux/pages/testing';
Harness for interacting with a linked list item in tests.
Methods
click(): Promise<void>
Clicks the item.
Returns
Promise<void>
getText(): Promise<string>
Gets the text content of the item.
Returns
Promise<string>
SkyLinkListItemHarness.with(filters: SkyLinkListItemHarnessFilters): HarnessPredicate<SkyLinkListItemHarness>
Gets a HarnessPredicate that can be used to search for a
SkyLinkListItemHarness that meets certain criteria.
Parameters
filters: SkyLinkListItemHarnessFilters
Returns
HarnessPredicate<SkyLinkListItemHarness>
A set of criteria that can be used to filter a list of SkyLinkListItemHarness instances.
interface SkyLinkListItemHarnessFilters {
dataSkyId?: string | RegExp;
text?: string;
}Properties
dataSkyId?: string | RegExp
Only find instances whose data-sky-id attribute matches the given value.
text?: string
Only find instances whose text content matches the given value.
Loading...