App Launcher
- HTML/CSS:Dev Ready
- Layout:Responsive
Sections
You are currently viewing a sandbox preview version of Spring ’21 | Go back to Spring ’21
App launcher
- SC
- MC
- HR
- MM
- CC
- CS
About App Launcher#
The App Launcher is a modal dialog which contains 2 sections of information. The top section is a list of all the applications installed in the organization, and the second section is the list of items in that organization.
The 2 sections are implemented as Expandable Sections and can be expanded or collapsed. Applications and Items are also searchable within the modal via the search input in the modal header.
Base#
App launcher
- SC
- MC
- HR
- MM
- CC
- CS
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher" aria-labelledby="header43" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<header class="slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
Description overflow#
When the tile description is too long to fit on 2 lines, a "more" button
is shown after an ellipsis. Text truncation isn't handled via CSS in the case of an App Launcher Tile due to the responsive nature of the tile size.
Truncate via JavaScript
Multi-line truncation can only be done via JavaScript. You should calculate how many characters will fit over a maximum of 2 lines, depending on the tile width and trim the string accordingly.
On hover or focus, the more button
will display the full description using a Tooltip
The primary internal Salesforce org. Used to run our online sales business...
<div draggable="true" class="slds-app-launcher__tile slds-text-link_reset slds-is-draggable">
<div class="slds-app-launcher__tile-figure">
<span class="slds-avatar slds-avatar_large">
<abbr class="slds-avatar__initials slds-icon-custom-27" title="Sales Cloud">SC</abbr>
Reordering tiles via drag and drop#
App tiles can be re-ordered via mouse drag and drop or with the keyboard via the use of the grab handle button under the avatar. The grab handle button is implemented as a Stateful Icon Button
Communicating to assistive technology
When implementing drag and drop it is important to be able to communicate what is happening visually on the screen to assistive technology users. We do this via an Assertive Live Region, which is placed before the list of tiles, and has
aria-live="assertive"
Tile grabbed#
When a tile is grabbed add the class name of slds-is-grabbed
to the tile class list. When initiating the grab via the stateful button, be sure to set aria-pressed="true"
on the button. Also be sure to update the contents of the live region to communicate what was grabbed, its current position and how to move the item. Something like: "Sales Cloud: current position 1 of 6. Use the up and down arrows to move this app"
App launcher
- SC
- MC
- HR
- MM
- CC
- CS
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher" aria-labelledby="header43" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<header class="slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
Tile moved in list#
When the tile is moved in the list using a keyboard, update the live region for every move to indicate its new position to the user. Something like: "Sales Cloud: new position 3 of 6."
App launcher
- MC
- HR
- SC
- MM
- CC
- CS
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher" aria-labelledby="header43" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<header class="slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
Tile dropped#
Finally, when a tile is dropped into its final position, reset aria-pressed
to be false
on the stateful button, and update the live region to inform the user of the items final position. e.g. "Sales Cloud: final position 4 of 6."
App launcher
- MC
- HR
- MM
- SC
- CC
- CS
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher" aria-labelledby="header43" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<header class="slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
Searching#
When using the search input at the top of the modal, the list of applications and items filters as the user types. The remaining items on display have the matching search term highlighted with the use of the <mark />
element wrapping the matching term. This creates the visual highlight around the term.
App launcher
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher" aria-labelledby="header43" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<header class="slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-app-launcher__tile |
---|---|
Summary | Tile cards that contains the app information, the icon and description |
Support | dev-ready |
Restrict | div |
Variant | True |
Selector | .slds-app-launcher__tile_small Deprecated |
---|---|
Summary | Tile card that containes the just app icon and title |
Restrict | .slds-app-launcher__tile |
Selector | .slds-is-draggable |
---|---|
Summary | Add styles associated with drag and drop of a tile |
Restrict | .slds-app-launcher__tile |
Selector | .slds-is-grabbed |
---|---|
Summary | Add styles associated with a tile being grabbed in drag and drop interaction |
Restrict | .slds-app-launcher__tile |
Modifier | True |
Selector | .slds-app-launcher__tile-figure |
---|---|
Summary | App image or icon |
Restrict | .slds-app-launcher__tile div |
Selector | .slds-app-launcher__tile-figure_small Deprecated |
---|---|
Summary | App image or icon of a small tile |
Restrict | .slds-app-launcher__tile-figure |
Selector | .slds-app-launcher__tile-body |
---|---|
Summary | App title and description |
Restrict | .slds-app-launcher__tile div |
Selector | .slds-app-launcher__tile-body_small Deprecated |
---|---|
Summary | App title, no description |
Restrict | .slds-app-launcher__tile-body |
App Launcher Release Notes
2.10.0
Fixed
- App Launcher did not use brand tokens for
:hover
and:active
states .slds-app-launcher__tile
now uses$brand-accessible
for its:hover
state and$brand-accessible-active
for its:active
state
2.7.0
Changed
- Updated the tile markup for improved accessibility and added features
- Changed the outer element from an
<a/>
to a<div/>
and removedaria-describedby
- Replaced the grab handle icon with a stateful icon button, which will now be the keyboard accessilbe drag and drop control. Please read the new section in the documentation about specific implementation detials
- Moved the tile link to the card title since the whole tile is no longer a link
- Made the "more" overflow a tooltip trigger
- Changed the outer element from an