Microsoft 365 Community Community Demos, 8 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: My Emails Viva Connections Adaptive Card Extension

Description

In this 12-minute developer-focused demo, Siddharth Vaghasia shows an Adaptive Card Extension (ACE) that displays emails for the currently logged in user. Presenter steps through the code to show viewers how to get the current user’s email message from the Graph and render it in SPFx ACE Card View with previous and next buttons to navigate between emails. Demonstrates how to modify Quick View to display email details on click of any Email from Card View. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 10, 2022.

Demo Presenter: Siddharth Vaghasia | @siddh_me

Supporting materials:
• Article - How to call and show Graph API data in SPFx Adaptive Card Extensions (ACEs) | https://siddharthvaghasia.com/2022/01/02/how-to-call-and-show-graph-api-data-in-spfx-ace/
• Article - Create your first Adaptive Card Extensions (ACEs) with SPFx | https://siddharthvaghasia.com/2021/12/29/create-your-first-adaptive-card-extension-with-spfx/
• Sample - My Emails | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-MyEmails

Learn more:
• 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

Hello and welcome everyone today I am going to present ace component, my email little bit about myself. I am siddharth vagasi, I am in microsoft, mvp. uh I am an active pnp contributor and these are some of the social handle links through which you would be able to connect with me.

A

So today, I'm going to present adaptive card extension to show current logged in users email addresses. This is the link to the report from where you would be able to find this sample.

A

So the driving factor here for this particular sample was basically. This was my first adaptive card extension which we can say a dynamic extension which was getting actually data from somewhere. So the idea here was to explore the adaptive card extension, how to call a graph api from the elliptic card, extensions understanding, the concepts of the card view and the pq being an spfx developer for so long.

A

This concept is little bit different, but it takes for to understand like how these card views and how the quick views are interconnected with each other, it's it uh needs and practical. So what for same purpose? What I did was, you know basically start getting working on this sample to understand how this card use and wiki would work, how the state management will work between the views this sample.

A

If you can think about it, it will gives us an personalized experience in the viva connection, because it will be able to show the current logged in users. Email addresses in the card view, and then it the user, would be able to navigate between different emails and on click of particular view. They would be able to actually view the detail, email and there is a button also in the quick view, which will take the user to that particular email in the outlook web.

A

So, overall, the uh other concepts which we which were explored here is to how to make the action buttons dynamic, which will basically navigate between the cartwheel, which we will show in the demo, so yeah, let's quickly jump to the demo. So basically, this is the adaptive card extension. If I go to preview mode, if you see right now, it is basically logging and getting my email addresses and click of particular email. It will be able to click the preview of that particular email.

A

I would be able to navigate between the different emails, which are there and then again see the emails.

A

Then, on click of particular email, we would be able to go to the particular outlook, emails or the targeted outlook image. So this is a simple demo, as I said, but the idea here was to basically explore the adaptive card extension and see what we can build with it. This is what we have so going through the code. uh Let's see so again, we would create this using uh yeoman sharepoint generator, wherein we would choose an s component as our component.

A

So uh this would be the main file, uh which is basically a kind of an extension file which would be extended from the better base adapter card extension. uh Here I have my states and the properties, as we have in spfx webpart. Also, the states basically is to hold the emails uh which will get from the graph api. The current index, the current active index, to basically render the quickview and the current email object, which will basically dynamically populate that quickview then in the initialization. This is basically the state initialization.

A

This is similar to what we do with the spfx or with the class based state components. This is where the navigator would navigate and register all the card view. So this is important to understand here. Is that, whichever card we wanted to be part of our solution, we would have to make sure that the card is registered with a particular name and which mapping to that particular component of that card. So in this case, I'm just using cardview and the queue which comes with default solution generators.

A

So it would be just two quick views, but we can have as many quickview as possible. Then this is the method which basically gets the get outlook data. So we are calling the graph api misleads mail, folders inbox messages, which will give me a list of messages from my mailbox uh for getting the data from the graph api. We are using the ms graph client factory, so using the client factory.

A

We would be able to make any graph api call from the message in this case, then we are setting the state here to set the state we are setting the current email address, which would be the zeroth index by default. The first result index would be the zeroth one, and then we are also putting the array of the images which have received from the graph email in the email object.

A

Another important thing to note here is this, which is basically the render card. So here we are basically passing returning the constant which we said. You know the unique identifier for a particular card view. So this is where how the particular card view is getting rendered now. So when we say this particular card, we would be rendered, so we would have a card view component, which would be getting rendered in the cardview component.

A

Again cardboard component would be extended from basic primary text cardview in this case, so we have three types of card views which we can have, one which would be a basic type. One would be a basic primary text and one would be kind of basic primary text, but it also has an image component associated with it. So this one is primary text so which we will in this case we will get basically two things to show on the card view.

A

One would be the primary text and one would be the description and then the buttons which would be displayed on the component, so only we would be able to add only this three component in the card view we don't depending on which kind of card view which we are using. We won't get anything more. So if it is an image card, we would probably get an image card also which uh image placeholder also, which we can use so considering.

A

First see how we are getting particular data, so in this case there would be an data method which is overridden method and because it is of a type primary text text card, we would have an option to return an object wherein we can send primary text and description which would be rendered in the component. So in this case, what I'm doing is basically as soon as we have the emails which are loaded, I'm getting reading from the state of the email object, the subject and the from email address.

A

So this is where we are seeing the email addresses, email address and the subject from the particular mail.

A

Then. The second important thing here is to understand is the card button method. This is basically the method which will return the buttons. So in my case the buttons would be the previous and next button, but I need to make that buttons dynamic, depending on which is the current index of that particular email. So if the current index is greater than 0, it means I know that I have to push the previous button so that user can navigate to previous email.

A

If it is less than the current index is less than the length of the email it means. I know this is the last. This is not the last email. That's when I I need to push the next button, so this is how we are able to show and hide the previous next buttons maximum for a card cardview component. We can only have two buttons: okay and that too the card view which we would be rendering should be rendered with the size as large with medium size.

A

We would be only able to render one card one button on the card.

A

Then there is an action method. So, basically, here what we are doing is when we are pushing the button. We are saying the action is of type submit and I am passing a parameter id which basically identifies that particular button, whether it is a previous button or whether it is a next button, and here if the type is submit what we are doing is and if the id, when then we get the data of that particular. Whatever parameters, we would have passed in the action in the extend.data method.

A

Here we are comparing it with the choice between. If it is a previous, I am decrementing the index and loading the current email by decrementing the index. If it is next, we are setting incrementing the index and also setting the current email object to particular thing right now. After all of this, what the next thing which would be having is, we will do when a particular card is being selected right. So that's where we want to basically open the quick view. So this is the method which basically can have either two types of written object.

A

One can be a quick view card action or it can be an external link. So if you want to open an external link, the type can be an external link in the parameter. We would have a url of the particular external link where we want user to redirect, but in this particular case, what I wanted to do is I wanted to open that particular quickview. So I'm just this would be a default method which would be coming when you are rendering the code. But if you want to customize it, you can always customize it.

A

So here I am saying that, okay, if then, the user card has been clicked, we need to basically open the quick view registry so quickly going to preview component card. We would be able to basically place that in this particular fig view component, it would be extended by a base adaptive card view. It will also uh the parameters would be also password in the properties. State would be, if you think about this particular preview component. It is very much simple, considering what it needs is.

A

Basically, a adaptive json object, which we wanted to render when the user clicks on it right, but because an adaptive card a template cannot be just which we wanted to render.

A

We would specifically need to pass some data to it and it needs to be little bit dynamic and contextual in the base of what the adaptive cart is meant, for uh it will basically return the particular json the template, json object and using the get data method, the data method, which is there wherein we can particular we can pass any object which we wanted to pass.

A

So, in my case, what I did is I created basically, a iq data object wherein I'm just passing a single email message, object to that particular adaptive card and then using the properties of that particular object. We are making the adoptee card dynamic. So now, let's quickly go to the template. The adaptive card template so here in the top body part. What we are seeing is the email subject. So if you look at any email, so this is the email subject which we are getting, then I have a column set wherein I need two columns.

A

That is because, when I need to show the image and also the from email address and the created date, so this is how the column set would be. In the first column, I need an image which to be displayed. In the second column, I need the from email addresses and the date which is getting displayed. All of these are, depending on the adaptive card designers. You can use adapter card designer dot, io and design the adapter card, which we want, use the template and just paste it here and make it dynamic.

A

The way we want it to dynamic make it dynamic. Then this is the date. Then we have the body preview, which is getting displayed once the on the below path. So this is the body preview and also there is a button which says view button.

A

So basically that button is coming because we have an action attribute here when I am saying that I need and button, which is view, and what I wanted to do is my action type is open url, so it will redirect user to that particular webmail, and I'm using beveling property of the message object to basically send the user to that particular email addresses. So this is how we would be able to use and make the adaptive card extension getting data from the graph api.

A

The last point which I wanted to highlight is the permissions, because this permissions again works in the same way, because, as components are built with spfx, we can provide the permission request, which we are using as a part of our component, which we are creating.

A

So in this case, we are using mail.read basic and mail.read to basically get the current logged in users, email addresses and then the graph client factory would be able to use the token for the current logged in user, because this would be rendered in the sharepoint itself and will be able to get that data. So that's how, as I said, it was a just a first dynamic s component, which I was exploring and when I created it, I have wrote an article also about it.

A

You know how to create it and just come together to the sample. That's it from my site, patrick over to you.

B

Awesome very great stuff, very cool demo. There uh excited to see more use of these aces uh adaptive card extensions out there in the community encourage folks to definitely check those out. If you haven't, it's really fun way to extend sharepoint framework.