Edit

Designing Viva Connections Quick Views

  • Article

Principles

Create quick views to provide a bit more detailed information (for example: a detailed list with data) or to accomplish quick tasks (for example a simple form) without opening an app.

Here are a few examples of quick views:

Screenshot of various examples of quick views.

Tip

Sample adaptive card designs for the quick views are available from GitHub

The Quick View experience works across different platforms and form-factors based on a single JSON. This introduces certain limitations in terms of available styling and placement on controls. You should not expect identical or pixel perfect comparison of a quick view rendered on web / iOS or Android.

Tip

JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays (or other serializable values). It is a common data format with a diverse range of functionality in data interchange including communication of web applications with servers. JSON is a language-independent data format. It was derived from JavaScript, but many modern programming languages include code to generate and parse JSON-format data. JSON filenames use the extension .json.

Layout

Screenshot of a card with a focus on the header and content area, which includes containers, elements, and inputs.

  1. Header
    1. Dismiss quick view
    2. Card name​​​​​​​, defined by the Dashboard card title
    3. Open linked app (optional)​​​​​​​
  2. Content area - Scrollable, can contain the following elements defined by Adaptive cards schema:
    1. Containers
      1. Container
      2. ImageSet
      3. FactSet
      4. ColumnSet
      5. Table
    2. Elements
      1. TextBlock
      2. RichTextBlock
      3. Image
      4. Media
      5. ActionSet
    3. Inputs
      1. Input.Text
      2. Input.Date
      3. Input.Time
      4. Input.Number
      5. Input.ChoiceSet
      6. Input.Toggle

Interaction

Quick views are vertically scrollable independent of the rest of the underlying interface and should not be horizontally scrolled.

Back stack

Avoid adding too many navigation levels within the Quick view. It's best to keep it simple so that it's easy for users to accomplish their task quickly.

While you can open several children quick views from the parent quick view, we recommend not to navigate more than one level down.

Moving image of accessing the registration form task which leads to the registration F A Q card.

Quick views vs Web views

Despite being visually similar, they are two different surfaces for different use cases.

Screenshot of the registration form card and of a web browser tab of Microsoft dot com.

Quick view

This UI surface is built using JSON code. Serves as a mean to perform fast actions or fill pout simple forms or render more information with faster load times compared to a web page called via Web view.

Web view

Can be used to load web pages with everything they can offer including more complex layouts and better styles, can be way slower to load than a than Quick view.

Any web page opened on mobile is going to be rendered within a web view, while it's going to be a new browser tab if opened on SharePoint.

Theming

We​​​​​​​b

Quick views will follow SharePoint default and custom company-created themes.

Screenshot that shows how a card viewed on webpages appears in light mode and dark mode.

Mobile

Currently dark themes are not supported for quick views on iOS and Android mobile.

Screenshot that shows how a card viewed on mobile appears in light mode and dark mode.

We plan to introduce dark theme support in Quick View in Viva Connections Mobile for both iOS and Android in early Q4 of CY23. (context.sdks.microsoftTeams.teamsJs.app.getContext()) to get the theme in which Quick View is rendered of the Quick View will be available in SPFx 1.18.1 package.

Screenshot that shows how a card quickview viewed on mobile will appear in light mode and dark mode.

Important

Please test your existing cards using Adaptive Card designer to make sure that the icons and images used in light mode for Quick View of the existing cards are compatible with dark mode as some discrepancies have been observed. Tenant admins will also be able to test their card Quick Views in dark mode. To update your card for the new theming, please follow the tutorial 'Making your Quick View compatible with Dark Mode in Mobile'.

For some cards, you will use links to URLs. Depending on the location of the content, links to URLs may display content in Microsoft Teams or elsewhere and Single sign-on (SSO) behavior can differ. Get more information about how links to URLs and SSO behave depending on the location of the content you are linking to. Learn more