Launchpad¶

Usage¶

When to use¶

• Use a launchpad to give the user the possibility to launch apps or switch between apps easily within one application.

Best practices¶

• If there are a lot of apps, it's recommended for this component to include recently used apps, frequently used apps.
• If the list is a manageable size, include all apps or products available on the system.
• Allow users to manage the applications.
• Only use the launchpad for more than two apps.

Design¶

Elements¶

A launchpad consists of the following elements:

(1) Title, (2) Sub-title [optional], (3) App with icon, (4) App with logo, (5) Close, (6) App name, (7) System name [optional]

The app is represented by the app logo or alternatively by an icon.

States¶

(1) Current app, (2) Hover state, (3) Focused, (4) Disabled

Categories (optional)¶

(1) Category title

If there is a large number of applications it is possible to organize and group them for a better overview. Apps should be grouped in a logical and meaningful way.

Favorites (optional)¶

For a better overview, the concept of favorites allows the user to only show the most important apps at at a glance and to hide less frequent used ones.

(1) Title, (2) Expand/Collapse-toggle, (3) Favorite app, (4) Standard app

In the expanded view, the user can click on the star-icon to mark the app as a favorite one. The app will then be part of the favorite apps category. To unstar an app the user simply clicks on the star-icon again.

Both concepts of Categories and Favorites can be mixed if necessary.

Launch of external app (optional)¶

(1) Launch of external app

External apps must be indicated with an additional element-export icon and opened in a new browser-tab. The origin tab remains open to allow a fast and easy return to the previous app.

Responsive behavior¶

By decreasing the viewport size the apps within the launchpad will be stacked.

Code¶

The launchpad (si-launchpad-factory) ist part of the application header.

Wrap it inside a ng-template and provide the template to the si-application-header component.

<si-application-header [launchpad]="launchpad">
  ...
</si-application-header>

  <ng-template #launchpad>
    <si-launchpad-factory [apps]="myAppsOrCategories" />
  </ng-template>

Example¶

SiLaunchpadFactoryComponent API Documentation¶

Input Properties¶

Name	Type	Default	Description
apps ¶	(App[] | AppCategory[])		All app items shown in the launchpad.
closeText ¶	TranslatableString	$localize`:@@SI_LAUNCHPAD.CLOSE:Close launchpad`	Text to close the launchpad. Needed for a11y.
enableFavorites ¶	boolean	false	Allow the user to select favorite apps which will then be displayed at the top.
favoriteAppsText ¶	TranslatableString	$localize`:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorite apps`	Title of the favorite apps section.
showLessAppsText ¶	TranslatableString	$localize`:@@SI_LAUNCHPAD.SHOW_LESS:Show less`	Title of the show less apps button.
showMoreAppsText ¶	TranslatableString	$localize`:@@SI_LAUNCHPAD.SHOW_MORE:Show more`	Title of the show more apps button.
subtitleText ¶	TranslatableString	$localize`:@@SI_LAUNCHPAD.SUBTITLE:Access all your apps`	Subtitle of the launchpad.
titleText ¶	TranslatableString	$localize`:@@SI_LAUNCHPAD.TITLE:Launchpad`	Title of the launchpad.

Output Properties¶

Types Documentation¶