Microsoft 365 Community Microsoft Viva, 15 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Calling custom Azure AD secured APIs from Viva Connections ACEs (series 2/4)

Description

In this video, you can see how to build Adaptive Card Extensions (ACEs) for Microsoft Viva Connections consuming Azure AD secured multi-tenant APIs.

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
- Scenario ACEs Implementation Details - https://github.com/pnp/spfx-reference-scenarios/blob/main/samples/ace-pnp-contoso-orders/docs/ACEs-Implementation-Details.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 video about cooling, custom measure, id secure, the pis from viva connections, adaptive card extensions, I'm paolo pelorsi and I'm a proud member of the microsoft 365 pmp team.

A

This is the second episode of a series of four videos about how to create adaptive card extensions for microsoft, viva connections being able to consume a backend multi-tenant api.

A

In this video we will understand how we can actually consume those apis and with an adapter card extension built with sharepoint framework, we can easily do that using the aad http client object, which is available in sharepoint framework in any sharepoint framework component, including the adaptive card extensions.

A

You simply need to create an instance of the client via the aadhcp client factory, providing the unique uri of the api that you want to consume. Then using the adhdp client, you can do the actual consumption of the backend api. As long as you configure proper permissions for your solution, which can be done, configuring, the web api permission, request section in the package solution.json file of your sharepoint framework solution, and once you have the solution ready to be uploaded in the app catalog.

A

You upload the sppkg in the app catalog and you go to the api access page of sharepoint online admin ui to grant the permissions needed by your application in order to consume the backend api once you've done that you can do the data binding of the results of your apis to the ui of the adaptive card, extensions which can be done targeting the card views and, for example, configuring.

A

The content of the primary text of the description or of the image that you will show through the card views of your adaptive card extension or you can configure the binding in your quick views using the adapter card, syntax and creating whatever kind of ui. You like, like a grid, a list or any advanced ui scenario based on the adaptive cards. Syntax.

A

So let me move to the demo environment. Let me show you how to do that with adaptive card extensions.

A

So here we have the sharepoint framework solution in visual studio code, and we can see that in the outline of the solution. We have the src folder, where we have the adaptive card extensions and specifically the list orders and the managed folders plus we have a services folder where we define the service to consume the backend api.

A

Let's start having a look at the manage orders, adaptive card extension in that one we have defined interface for the properties where we have some methods that we can use to make it possible for the cards like card views and quick views to access the load, add update and delete order methods of our adaptive card extension. Plus we have this data where we define the property called orders, which is an array of order objects where the order object is defined in the services and simply declare how an order is made.

A

Then, in the uninit method of the adapted card extension after registering all of the cards because remember, you can have multiple cards using quick views for every single adaptive card extension. We create an instance of the aadhtp client object using the adhdp client factory available in the context of spfx, and we do a get client method invocation, providing the unique uri of the api that we want to consume. This will be an item registered and configured in azure, active directory that you will see in the episode number four.

A

Once we have the ad client stored in the private variable of our extension. We can then configure all of the methods in the properties and asynchronously using a set timeout. We load the orders after half a second.

A

The load orders method will simply rely if there are the settings for the service based url can rely on the order service object that we will see shortly, providing the ad client object and the url of the service and simply using a set of methods like get orders, add order and stuff like that available through the order service api.

A

Well, once we have the orders, we can simply set the orders property of the state in order to bind the information, the ui of our adaptive card extension in the order service. We simply have an interface defining the methods provided by the order service itself and, as you can see, those are the create read, update, delete and query methods of any data access api.

A

Then we have the constructor where we get the http client and the service url, and then we have all of the methods implemented and, for example, let's have a look to the get orders 1, which is in asynchronous method returning a promise of array of order. Here we simply use the adhdp client object that we get through the constructor and we make a get request for the endpoint to get the list of orders.

A

And if the response will be successful, we simply get the json and we convert it to an array of order objects that we return as the result of our method invocation.

A

And then we can configure in the package solution.json file that in the web api permission request, we want to have access to the pmp.contoso.orders, which is the name of the api we are going to consume with permission, scope, orders, dot full control, which is the permission scope. We need to read and manage all of the orders in our backend api.

A

Once we have done the consumption of the api, we can, for example, in the quick view, do the data binding of the list of orders in the ui. So here in the list orders quick view. We have a. I list order, quickview data, where we define again the orders property as an array of order objects and in the data method.

A

Here we simply return the collection of orders as the content of the order's property of the state variable of our context and then in the json template of the adapted card we can render, through data binding the title and the subtitle, all the headers of the table that we show, and here we have a container bound to the collection of orders in the data source of our adapter card and for each and every order.

A

We simply render the id of the order, the date and time of the order properly formatted and this status with some logic to properly present the status of the order, as well as leveraging the action, toggle visibility of adaptive cards syntax. We can play nicely play with the chevron up and down to show or hide the panel to edit a specific order. So really simple and straightforward. You create an adhd client object.

A

You use it to consume the backend api and you have to remember to configure the permissions in the web api permission request, and then you simply do the data binding of your data in the ui of the adaptive cards. Extensions that you implemented.

A

If you want to dig more into the topics covered in this video here, you can find some useful resources like, for example, the source code of the end-to-end reference solution that we are using an overview of viva connections, a tutorial about how to build sharepoint adaptive card extensions, as well as an introduction to developing card views and quick views using spfx.

A

That said, thank you for watching this video. I hope you found it interesting and let's see you again in one of the upcoming episodes of this series of videos about building a microsoft, viva connections, adaptive card extensions, consuming backend, multi-tenant, apis.