Apps Bar
- Matt Birtch
- Eric Sethna
Implementation in progress
Important Links
(See the various flows in this link in the sidebar on the left) |
All plugins that support the new app bar will display in this new home for Apps.
When admins add apps to the server
When new apps are added by admins, they will display in the app bar by default. Users can unpin them if they choose.
Moving current plugins
The following apps could/should move from the Channel Header to the new App Bar:
To-do
Notes
Incident Collaboration
Focalboard
The only apps that stay in the Channel Header are video conferencing tools like Zoom that can add a new meeting invite in to the channel. Having said that, video conferencing tools may eventually have a space in the App Bar if there are other more global interactions available.
Drag to Reorder Apps in the App Bar
Apps in the App Bar can be reordered by dragging items vertically - similar to how the Team Sidebar items can be rearranged.
Collapsing the App Bar
When the App Bar is open and users hover over that area of the screen, a small collapse button displays. Clicking this button collapses the App Bar.
When No Apps are Available in the Apps Bar
When there are no apps available on the server that support the Apps Bar, the Apps Bar is displayed in the collapsed state for Admins and entirely hidden for end users (until apps are available to install for all users).
Access to the Plugin/Apps Marketplace (Admin Only)
In phase 1, the Plugin/App Marketing place will be available for Admins only (as is currently today). Users can access the App Marketplace through the Apps Icon Button on the bottom of the App Bar.
Initially, this will open the plugin marketplace in its current state, but eventually we’ll transition to the new App Marketplace and open it in a slide-up panel (See Iterative Updates section).
App Bar Menu
Apps can also be interacted with through the app bar menu (accessed in the bottom of the app bar).
Sort Order
Apps in the App Bar Menu sort in alphabetical order. This sorting is independent of how apps are displayed in the App Bar.
Menu Item States
When an app menu item is hovered, it displays the settings icon to provide access to configure that app.
| Pinned | Unpinned |
Default | ||
Hover |
|
|
Pinning/Unpinning Apps in the App Bar
User can choose which apps they want to see in their App Bar by pinning or unpinning what they want. When pinning/unpinning items do not resort. The resort only happens when you open the menu next.
When all apps are unpinned, the app bar transitions into the collapsed state.
Interacting with Unpinned Apps in the App Bar Menu
When an app is unpinned, it can still be accessed through the App Menu at the bottom of the App Bar.
Clicking on the left side of the item in the menu will open the App and temporarily display it in the App Bar.
Once a user switches away from the app or closes the panel, the app’s icon is hidden from the app bar again.
App Item States
Default | Hover | Active | Collapsed | Expanded |
App Badges
Apps can bring attention to users using App Badges. Badges are softer, visual notifiers of new content or activity. App Badges display in the app bar and in the App Menu
No Badge | Notifier Badge | Count Badge |
NOTE: App Badges do not trigger notifications.
Apps with Subitems
Some apps may have sub-items in the app bar. For example, the Github plugin has subitems for Open pull requests, Pull requests needing review, Assignments and Messages.
Collapsed | Expanded | Subitem Hover | Subitem Active |
Expanding and Collapsing Subitems
When collapsed, an App with sub-items will display an arrow when hovering over the app item. Clicking on the App Item will expand the sub-items. Clicking on it again will collapse the sub-items.
Persisting the Expanded/Collapsed State
The expanded/collapsed state will remain in its state until the user has collapsed or expanded again.
Sample Interaction
App Interactions
Eventually, all Apps in the App Bar will always open up the RHS canvas (see below). However, for the first version of the app bar, apps/plugins will simply perform the actions they currently do.
App Right Sidebar (RHS) Canvas
One of the big benefits of the app bar, beyond giving apps a proper home, is that they can now utilize the RHS for content. Similar to how the current Github plugin, the Incident Collaboration plugin, or the Todo Plugin use the RHS, any app could use this space. This gives users the ability to multitask with their app content in the Right Sidebar while still viewing conversations in the main channel content area.'
For more information on the Right Sidebar Canvas and other Apps Canvases, view the Apps Framework Component Documentation
End Users Connecting App Accounts
The RHS area can also be used for end-users to connect their accounts rather than requiring them to use slash commands as they do right now.
App Settings
Admin Settings
Apps that need to be configured will show a state in the RHS prompting admins to configure the app for the server. This configuration can be accessed through the settings icon
Should we consider also surfacing this configuration in the System Console? Admins may expect to see it there since that’s where plugin config is currently
User Settings
If an app has user settings/preferences, they can be accessed through the RHS panel via a settings icon button.
Responsive Layout
For vewports that are below 820px, the Apps bar is hidden as part of the sidebar UI and collapsed in to a single icon. When the icon is tapped or clicked, the apps menu opens (rather than the app bar) since all apps are accessible via this menu.
For more details on the responsive layout, view this page.
Apps Bar Onboarding
In order to help orient and guide users with the new features of the app bar, some new tour points are proposed for the app bar when it first becomes available.
In-product notice
The first step of onboarding the apps bar is to display an in-product notice to users when they access the product for the first time after the feature is released.
Conditions
Server must support new apps bar
Server must have apps/plugins installed that are supported
User hasn’t yet seen this notice
Tour points
If users choose to “See how it works” from the in-product notice, display the first tour point in the sequence.