Adaptive Card Extension for Viva Connections

This sample demonstrates usage of SharePoint Framework to build an ACE that acts as implementation of Advent Calendar.

The card is pulling data from SharePoint list populated with 24 links and can be activated from 1.12 until 24.12 during so-called "Advent" period. Every day user is presented with different card which is linked with different page on the intranet or internet. When user clicks the card, linked webpage will open in browser.

• SharePoint Framework
• Microsoft 365 tenant

Get your own free development tenant by subscribing to Microsoft 365 developer program

SharePoint list

List "AdventCalendar" based on Custom List template should be created on SharePoint Home site. The list should contain 24 items for 24 different "Doors" on the calendar.

Field "Title" in the list should be re-configured as "Not Required".

In addition to default list fields, list should be extended with 3 additional fields to store:

• image for the Advent Calendar entry
• link to the webpage/SharePoint page which users will visit by clicking on calendar card, and
• ordering sequence, from 1 to 24

Configuration for 3 fields mentioned above:

To configure the Advent Calendar card on the Viva Connections dashboard:

1. Select the Advent Calendar card on the Viva Connections dashboard to add.

The card has below custom properties:

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

• Clone this repository
• Ensure that you are at the solution folder
• in the command-line run:
  • npm install
  • gulp serve

To package the Adaptive Card Extension into an app using Gulp:

1. Go to the terminal where the working directory is the root folder of the project
2. To build the solution in release mode, run the gulp bundle --ship command
3. To make a release mode package of the solution, run the gulp package-solution --ship command
4. The package-solution task created an app package file named spfx-advent-calendar-ace.sppkg in the ./sharepoint/solution folder. This file is your app package. Next, you'll deploy this package into the SharePoint app catalog, which contains all Viva Connections extensions.

If you don't have an app catalog in your tenant, you'll need to create it before you continue this exercise.

1. In a web browser, go to the Microsoft 365 admin center located at https://admin.microsoft.com.
2. From the side menu, select the Show all option
3. From the list of Admin centers, select SharePoint
4. In the SharePoint admin center, from the side navigation, select More features
5. From the Apps section, select the Open button to go to the Apps admin page.
6. Under Apps, select App Catalog
7. If the site opens up, you already have an app catalog and you can skip further steps
8. If the app catalog doesn't exist, you'll be prompted to create one.
9. From the list of options, choose Automatically create a new app catalog site and select OK.
10. Deploy the app to SharePoint app catalog

1. In a web browser, go to the SharePoint app catalog
2. In the SharePoint app catalog, from the side navigation choose Apps for SharePoint
3. Upload/drag and drop the spfx-company-announcements-ace.sppkg file into the list
4. SharePoint will ask you to confirm and deploy the package. It makes the package available to be installed in SharePoint sites.
5. Select Deploy

Once the app is successfully deployed in the app catalog, you'll need to install it on your Home site.

To install the app:

1. In a web browser, go to the Home site
2. From the top navigation, select the Settings (gear) icon
3. From the SharePoint section, select the Add an app link. You'll be taken to the My Apps page
4. In the search box on the page, type Advent and locate the Advent Calendar app
5. To install the app, select the Add button

The Adaptive Card Extension in the app will now be available to add to the dashboard.

• Build your first SharePoint Adaptive Card Extension
• Deploy card to Viva Connections dashboard
• Excercise - Deploy the Adaptive Card Extension to Viva Connections