Microsoft 365 Community SharePoint Framework, 15 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction on building and using multi-tenant Azure AD APIs in Viva Connections (series 1/4)

Description

In this video, you can see an introduction about building Adaptive Card Extensions (ACEs) for Microsoft Viva Connections using Microsoft SharePoint Framework (SPFx). This is the first video of a series of 4 episodes about consuming Azure AD secured multi-tenant APIs from ACEs.

Here you can find the source code of an end to end reference solution used in the videos: https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders

Video Presenter: Paolo Pialorsi (PiaSys) | @paolopia

Here you can find additional information about the topic covered:
- Playlist on the four video series -
- PnP Contoso Orders - Reference Solution - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/Introduction.md
- Overview of Viva Connections Extensibility - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections
- Build your first Viva Connections Adaptive Card Extension - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension

Additional resources:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Welcome to this introduction on building and using multi-tenant azure ready apis in viva connections, I'm paulo pelorsi and I'm a proud member of the microsoft 365 pmp team. This is the very first video of a series of four videos which will introduce you to developing solutions for microsoft, viva connections, creating adaptive cards which can consume a backend multi-tenant api.

A

So, in order to make it easier to explain you the topics we are using a reference solutions which is called pnp contoso orders just a fixture solutions that we are using and it is an end-to-end reference solution to explain you how to develop real-life adaptive card extension with sharepoint framework consuming a multi-tenant kpi, and through this solution you can learn how to develop, deploy and configure such kind of solution. It has been built with sharepoint framework and internally we provide two different card: extensions, a list orders and the manage orders. One.

A

The backend of the solution is based on a.net core azure function, app, which provides a rest api configured to be multi-tenant.

A

You can either use this solution just for the sake of playing with it, and you can easily set it up in your own target tenant using a powershell script that we provide you or you can dig into it, having access to the source code of the solution and going through a step-by-step guidance that we are providing through these videos and through some documents available online on github. So let's move to the demo environment and let's have a first look at the solution by itself.

A

So here we have the adaptive card, extensions in action in the workbench of sharepoint online, and specifically, we have the list orders, one which will allow us to click on the shortest button. On this card view. In order to see the list of orders in the quick view of the adaptive card as well as we have the manage orders, one through which we can still see the list of orders. But we can also edit the status of the order.

A

For example, this one can become delivered instead of shipped and we can easily do that using this ui as well as we can eventually delete an item. But we can also add a new order, so it could be, for example, order one two three 2021 for customer one, two three it will be placed today and the status will be shipped. For example, I can insert the order all good, and now I have 11 orders and if I click on shortest, I can see the new one that I just inserted.

A

So this is just to give you an idea of the overall user experience for these adaptive card extensions. If you want to dig into them here we have the repository on github, where we have the source code under spfx reference scenario.

A

In the pmp organization we have the aspmp contoso orders and in there you can find the docs folder with an introduction and implementation detail about the adaptive card, extensions implementation and about the api's implementation, as well as the minimal path to awesome, to see what to do in order to set up the solution in your target environment.

A

Moreover, in the src folder, you can find the source code of the sharepoint framework solution, which defines the two adaptive card: extensions and the source code of the dot net core function, app that implements the back-end multi-tenant api plus in the script folder. You can find a ps1 file that you can use to set up the solution in your target environment.

A

So let me show you in powershell how you can set up this solution in your target environment.

A

You simply need to run the register pmp code to order ps1 script, targeting the tenant name, that you want to use as the target, and eventually you can specify a set of credentials or that you want to use browser-based authentication and by running the script and providing your credentials like I'm doing right now, you will be able to set up the solution, meaning that the sppkg package file will be uploaded in the target app catalog of your tenant, and then you will be prompted with the constant ui from azure active directory to consent and register the application.

A

The multi-tenant application in your target tenant I'm using this user right now, I'm granting accepting to register the application in my target tenant and once I've done that, I will be redirected to the api access page of sharepoint online admin center in order to grant the permissions to consume the api from sharepoint framework. So I will click on the approve button. Click on approve right here and now.

A

If I go to the workbench, I can refresh this page and I will be able to add, for example, the list orders, adaptive card extension and I can configure the url of the api that I want to use and for the sake of simplicity, you can use this url, which is the one already hosted by microsoft in order to provide a ready to go solution for you.

A

So if you see here, we already have 10 order items because we are using the backend api provided by microsoft and we can see the list of orders in our web browser.

A

So here you can find some reference useful links. For example, the link to the pmp contoso orders end-to-end solution that we are using in these videos, as well as an overview of viva connection extensibility and a tutorial about how to build your first sharepoint adaptive card extensions.

A

Let's say thank you for watching this video and stay tuned on this series of videos about building adaptive card extensions for viva connections, consuming multi-tenant apis.