Create/Design Adaptive Cards Extensions using OOTB Viva Connections In Teams and SharePoint Site

Adaptive Cards Extensions (ACEs) are new way of displaying the information in a platform-agnostic. These cards are sourced by JSON and can be designed using OOTB or custom.

Microsoft Viva Connections

• Viva connection experience is deployed and access in Microsoft Teams.
• It is an employee experience app in Microsoft Teams that brings relevant news, conversations, resources in one place for every employee.

Setup Viva connections in the M365 admin center

• To add the Adaptive Cards to Viva dashboards webpart, you need set the Viva connection from admin center or PowerShell Scripts.
• Navigate to https://admin.microsoft.com , select 'Setup and select 'Viva Connections'   

 

A. Creating a Connections experience: It creates a standalone, out-of-the-box Connections experience as an app in Teams without the need for an existing intranet portal. A special site container will be created where the dashboard, resources, and overall Viva home experience are hosted and sourced from. Owners can then begin adding their own content. An intranet portal can be added at any time and designated as a home site. 

B. Build from an existing intranet portal: This option is ideal for organizations that already have a SharePoint communications site and would like to use their own content, or would like to add an intranet portal that includes Connections components that can easily be extended to the Web. This option creates a new Connections experience and automatically designates the communications site as a home site (intranet portal) that displays navigational elements, and shares permissions.

Create a Connections Experience

Build from an existing intranet portal to set a Home site

Set permissions

If your home site is part of a multi-geo tenant outside of the main geo you will need to manage your permissions in the SharePoint Admin Center.

Designate Audience

Visitors are set to Everyone in the company except external users by default.

Decide the Order

If your organization has multiple experiences, some audiences may belong to more than one. By setting an order for each experience, you can determine the priority in which experiences will be seen first.

Create and configure the Dashboard in Teams

• We can extend our Viva Connections dashboard with out-of-the-box web parts, custom SPFx web parts, extensions, and now with Adaptive Card Extension, etc.
• Navigate to the Viva Connections app in Teams.

• Select Frontline workers and continue

Adding an Adaptive Cards to Dashboard

• Add Approvals, Top News, Shifts, Assigned Tasks, Card Designer..etc Adaptive cards.
• Note: The above cards can be created from Teams or SharePoint site.
• Edit the Home or any page and add the Dashboard of Viva connections which will display all of you cards

Enable the experience

• Enable each Viva connection experience to make it visible to audiences in Microsoft Teams.
• Select ‘Connection Experience’ and enable it from the Edit Status. 

Pin the Viva Connections app in Teams

The Viva Connections app only needs to be pinned to Teams once after the creation of your first experience, unless you are pinning by policy.

• Navigate to Teams admin center: https://admin.teams.microsoft.com/ > Teams apps > Setup policies.
• Select Global (Org-wide default) which is default > Scroll down to Pinned apps.
• Select + Add apps.

Gulp.ps1 cannot be loaded. The file not digitally signed. You cannot run this script on the current system.

This security error can occur when the PowerShell's execution policy is set to Allsigned or Remotesigned and the script isn't signed.

Check execution policy in Power Shell: Get-ExecutionPolicy and then Get-ExecutionPolicy – list

We can change the execution policy permanently or temporarily

Set-ExecutionPolicy unrestricted

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

This command sets the execution policy to bypass for only the current PowerShell session, when you open again you may need to run again.

Build your first client-side web part using SharePoint Framework

Create a new web part project:

Create a new project directory for your project and change your current folder to that directory.

Create a new project by running the Yeoman SharePoint Generator from within the new directory you created: yo @microsoft/sharepoint

Important Note:

NPM may display warnings and error messages during the installation of dependencies while it runs the npm install command. You can safely ignore these log warnings & error messages.

NPM may display a message about running npm audit at the end of the process. Don't run this command as it will upgrade packages and nested dependencies that may not have been tested by the SharePoint Framework.

Trusting the self-signed developer certificate

The client-side toolchain uses HTTPS endpoints by default. Part of the Set up your development environment process included trusting the development SSL certificate included in the toolchain on your local environment. This is required so your browser will trust the certificate.

Note:Trusting the developer certificate is required. This is a one-time process and is only required when you run your first SharePoint Framework project on a new workstation. You don't need to do this for every SharePoint Framework project.

Run this command: gulp trust-dev-cert

You will be asked to install the certificate. Click Yes

To check the structure of the code: Code .

Update your project's hosted workbench URL

Update the initialPage in serve.json to your SharePoint site and go to Terminal from View menu(If you want to run the command from Code.)

Tip: You can also start the local web server without launching a browser by including the nobrowser argument to the gulp serve command. For example, you may not want to modify the serve.json file in all your projects and instead, use a bookmark to launch your hosted workbench.

gulp serve --nobrowser

Start the local web server & launch the hosted workbench by running this command: 

gulp serve 

Use SharePoint Workbench to preview and test your web part:

After configuring the webpart property pane changes

How to embed an image into an email with Power Automate

There is no OOTB feature to embed an image from the flow actions In Power Automate. This will require a bit of work to get the result. Showing up the Image on email body between MS Outlook or in web browser will be different. Due to security reasons sometimes that image/logo does not display or load properly in Outlook web because Outlook blocks that image content so, we need to manually click on the show blocked content link in the email.

Here are the steps to embed an image into the email body.

I have uploaded the image into Asset library: /SiteAssets/ImageCollection/1.jpg

1. Create the Power Automate flow with "Manually Trigger a flow" action.

2. Add SharePoint action: "Get file content using path" and select your site and provide the Image location in File Path.

3. Now the file content is retrieved with the “Get file content using path” and to embed the image content into the email body, we need to convert that content into base64

base64 is an encoding algorithm that converts any characters, binary data, and even images or sound files into a readable string, which can be saved or transported over the network without data loss.

4. Here we will using the 'Compare' action to convert the content with the below expression.

    base64(outputs('Get_file_content_using_path')?['body'])

5. Now we need to create an image HTML and add base64 converted content to that variable.

    <img src="data:image/png;base64,@{outputs('Compose')}" alt = "My Quote" />

6. Add the "HTMLImage" variable as you want to display it in the "Send an email (V2)" action email body.

booom, here is the output!

Note: Some mail clients do not support base64 encoded images. For example, Gmail does not show any base64 encoded images.

How to upgrade your solution to latest version

Please note it is not compulsory to upgrade your solution, but it is recommended. I personal advise – Only upgrade if you want to add new feature to existing solution because upgrading is not simple task. You also might run in to issues where existing functionality might break because of some latest changes in dependent library.

To find Current and Latest version of global packages:

To find current version and latest version of Yeoman generator we can use below command.

npm outdated –global

Please note we have used — global parameter to find versions of all global packages.

To find current and latest version of libraries used in your Project:

Go to project directory , run below command

npm outdated

Upgrade solution:

To upgrade solution, we need to install all the packages with required version.

npm install <Package Name>@<version> –save

How to install the Microsoft Teams Apps generator - Yo Teams

 The Yeoman generator for Microsoft Teams apps are installed with the following command:

npm install generator-teams --global

How to install the preview versions in SPFx

 If you want to install preview versions of the Teams generator with this command:

npm install generator-teams@preview –global