Microsoft 365 Community SharePoint, 7 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to React Yammer Praise sample for Microsoft Teams and SharePoint

Description

In this 9-minute developer focused demo, Ramin Ahmadi shares an idea for orgs that use Yammer. His web part allows users to Praise colleagues from a Teams tab or Sharepoint page. In the web part, you can search for people, add a message, select a Yammer Group, select a praise representation icon and preview the post in Yammer. The web part uses the Yammer REST API SPFx web part, React hooks, SPFx people picker control, and gets tokens for authenticating to M365 resources from Azure AD. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded May 7, 2020.

Presenter: Ramin Ahmadi (Content and Code) | @raminahmadi1986

Supporting materials:
• Sample: React Yammer API https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-yammer-api
• Sample: React Yammer Praise https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-yammer-praise

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

A

Hey every one of your you and your family are healthy and safe you're in these uncertain times. So today, I'm going to show you a demo how we can post a place to Yammer. So in content and code we use the an appraised to basically motivate our colleagues and I thought.

A

It's a good idea to have a web part that we can just post the price from SharePoint or within teams, but before I show you, the UI I just want to show you different ways of communicating with the Yammer API, so there's already a sample in repo. You can find a real camera API. So basically, if he uses a choice, Yammer Javas, JavaScript SDK to communicate with the Amir API.

A

So for using this this sample, you need to create a creative application in with Yammer, and after that you can get a client, ID and client secret and also the redirect URI URI, and you can keep them in your web part and after that, by adding the SDK into the page.

A

Here you can just call whatever you want. You can get their status of the current user and also if the user is not logged in or sign in, you can use an iframe to basically go through the Oz flow to get the get the app authorized, and then you can just communicate with the Yammer API.

A

What I had some problems with with this approach approach and, first of all, you need to keep the client ID and the reader who you are somewhere in your web part and if you want to deploy it to different environments, you have to change and update the client ID and the redirect URI and second is right. I think so, not with a good idea to ask the users again to log in to the page, because they're already signed in to office, 365 and I thought. Okay might be a better way to do this.

A

Actually we have, we have already easier way to do that, so we can achieve that and get the talk and with a ad talking provider class. So this class allows you to obtain hours to tokens for majority and also helps you helps you to authenticate the user from the share homepage to other services such as Yammer exchange, power, bi, etc, and the only thing you need to do is at pulling this piece of code to your honey on in its function.

A

So yeah. With this get token method, you can request an access to a resource which is Yammer in this example, and it returns the token if the user does currently logged in has access to that resource. And what, once you get that working? You can just easily communicate with the amore Pia, but to be able to access this resource. You need to go to the app registration that, basically you we have two options.

A

You can have your own app registration or you can just open the SharePoint Online app registration at the permission to Yammer and there's only one option available now, which is in preview, user, impersonation and after adding that and grant admin consent for that resource. You are able to basically get the token from SharePoint Sherpa, Trevor pepper, but before I just explain some of these codes. Let me just do a really quick overview of this UI.

A

So this is the web part. You can search for people.

A

And the message.

A

You can select a group from Yammer and select an icon, and you can see a preview preview of that post in Yammer and after clicking the post going to send it to Yammer and by clicking on this link, you can see that was in Yammer.

A

So if you go back to the code, so here are the token that we got in the previous from here. Basically, I think only needs function and for hosting the praise you can just communicate with this important message. Jason and what you need is just a comment back on and the user ID and to get the user ID. You can just call this function and we're passing the email address of the user. You can get the user ID and here is the meta together. Yammer groups, basically, and also here, is the report code.

A

I try to use react hogs in this example, which are I, think pretty great, because it just make your code already readable and solve function, components basically and here's the peacock ticker, which comes from.

A

Aesthetics controls react, you can just install this library and it's really easy to use these controls and.

A

That's it I think it's really easy to just reuse. This approach to get the talk in here helps you a lot I'm sure most people here, just aware of aad httpclient. That is really useful to communicate this. Some of your resources like a graph API, but sometimes it's not easy to you- know, get access to some of your resources, which Yammer is one of them and I think this is the class that you can use to get access to Yammer exchange power view of some of your resources.

A

That is not easy to have them, read a DHCP client and also for basically adding this to the or installing this to into Microsoft teens. You can just easily open the manifest file that your hosted supporter, custard-like, Teamster and Kim's personal app, and when you deploy your code to app catalog, you can just select your solution and by clicking on same two teams, it just easily fail at each easily add your application to the teams and many open teams.

A

You can go to apps and if you click on build for your turn-ons, it just show you this web part number clicking and clicking that you can add it to your personal tabs or you can add it to existing mocha. So existing team as a tab and as you can see, is just the same UI you can use here.

A

And here is it: we can just post a praise from also Microsoft things.

B

A

That's pretty much it.

B

Thank you, Thank You Raman. Thank you. It's a nice really clean implementation and looks, looks polished. You have even the nice-looking logos on the team site for the manifesto. No that's a really nice job and well some people like Yammer. Some people use memory. Some people don't but those organizations which use it widely for community purposes, and this is really really useful. Definitely for for them to take advantage as well. So thank you remain for that. One.