Creating a Viva Connections Dashboard Using Microsoft Lists Formatting

By João Ferreira Jul 17, 2024 Formatting 2 Comments

I’m a fan of Viva Connections Dashboard. It’s got a cool look on SharePoint pages. But here’s the thing, it only works within Viva Connections. That means I can’t use it on other sites that aren’t part of Viva Connections. Bummer, right?

But hey, I’m not one to back down from a challenge. I decided to create a custom list that looks like the ACEs cards from Viva Connections. The best part? You can use this list on any site, Viva Connections or not. Let me walk you through how to do this.

Step 1 – Let’s Get Started

First off, you’ll need to create a list. Here are the fields you’ll need:

Name	Column type
Title	Single line of text
Description	Multiple lines of text
Thumbnail	Image
Icon	Image
Link	Hyperling

Make all the fields mandatory except for the Thumbnail.

Step 2- Add Some Items

Once you’ve got your list, go ahead and add some items. This will give you a sneak peek of what it’ll look like once you apply the formatting.

Step 3 – Time to Format

1. Create a new View or just edit the existing one.
2. Go to Format current view, paste the following code and hit Save.

   {
     "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
     "height": 190,
     "width": 168,
     "hideSelection": true,
     "fillHorizontally": true,
     "formatter": {
       "elmType": "div",
       "attributes": {
         "class": "sp-card-container"
       },
       "children": [
         {
           "elmType": "button",
           "attributes": {
             "class": "sp-card-defaultClickButton",
             "role": "presentation"
           },
           "customRowAction": {
             "action": "defaultClick"
           }
         },
         {
           "elmType": "div",
           "style": {
             "border-radius": "8px"
           },
           "attributes": {
             "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
           },
           "children": [
             {
               "elmType": "div",
               "attributes": {
                 "class": "sp-card-previewColumnContainer"
               },
               "children": [
                 {
                   "elmType": "div",
                   "style": {
                     "height": "80px",
                     "overflow": "hidden",
                     "display": "=if ([$Thumbnail] , 'block', 'none')"
                   },
                   "attributes": {
                     "class": "sp-card-imageContainer"
                   },
                   "children": [
                     {
                       "elmType": "div",
                       "style": {
                         "width": "100%",
                         "height": "auto"
                       },
                       "attributes": {
                         "class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
                       },
                       "children": [
                         {
                           "elmType": "img",
                           "style": {
                             "width": "100%",
                             "height": "auto"
                           },
                           "attributes": {
                             "class": "sp-card-imagePreview",
                             "src": "=getThumbnailImage([$Thumbnail], 300, 300)"
                           }
                         }
                       ]
                     }
                   ]
                 }
               ]
             },
             {
               "elmType": "div",
               "style": {
                 "margin": "=if ([$Thumbnail] , '8px 12px 8px 12px', '-2px 12px 8px 12px')",
                 "display": "inline-block"
               },
               "attributes": {
                 "class": "sp-card-displayColumnContainer"
               },
               "children": [
                 {
                   "elmType": "img",
                   "style": {
                     "width": "20px",
                     "height": "20px",
                     "margin-right": "8px"
                   },
                   "attributes": {
                     "class": "sp-card-imagePreview",
                     "src": "=getThumbnailImage([$Icon], 300, 300)"
                   }
                 },
                 {
                   "elmType": "span",
                   "style": {
                     "display": "inline-block",
                     "font-size": "13px",
                     "line-height": "20px",
                     "position": "absolute",
                     "max-width": "98px",
                     "overflow": "hidden",
                     "text-overflow": "ellipsis",
                     "white-space": "nowrap"
                   },
                   "attributes": {
                     "title": "[$Title]",
                     "role": "heading",
                     "aria-level": "3"
                   },
                   "txtContent": "=if ([$Title] == '', '–', [$Title])"
                 }
               ]
             },
             {
               "elmType": "div",
               "style": {
                 "margin": "-5px 12px 8px 12px",
                 "display": "inline-block"
               },
               "attributes": {
                 "class": "sp-card-displayColumnContainer"
               },
               "children": [
                 {
                   "elmType": "span",
                   "style": {
                     "font-size": "14px",
                     "font-weight": "600",
                     "max-width": "136px",
                     "overflow": "hidden",
                     "-webkit-line-clamp": "2",
                     "-webkit-box-orient": "vertical",
                     "display": "-webkit-box",
                     "word-break": "break-word"
                   },
                   "attributes": {
                     "title": "[$Description]",
                     "role": "heading",
                     "aria-level": "3"
                   },
                   "txtContent": "[$Description]"
                 }
               ]
             }
           ]
         }
       ]
     }
   }
   

And just like that, your list will look like a Viva Connections ACE card.

What’s Different?

These cards are a bit different from the original ACE cards. They only let you go to another location. They don’t show a second level of data. Also, all the cards are squares. In Viva Connections, you can have squares and rectangles.

Add the List to a SharePoint Page

If you want to add the list to a SharePoint page, just use the lists web part. What you see in the image is the list formatting, not the Viva Connections dashboard.

Want to Try This Out?

If you want to give this a shot, or if you want to make a template for others to use, check out the following article that guides you through the process of creating a template step by step.

• How to add custom list templates to Microsoft Lists