Microsoft 365 Community Viva Connections, 10 Aug 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Viva Connections + Stage View in Microsoft Teams

Description

📺 As a Viva Connections Admin, you can pin multiple Forms in the dashboard, but don’t. In this 9-minute developer-focused demo, Marcus Castro suggests a way to reduce Viva Dashboard clutter. Cleanly open/respond to multiple forms using Stage View accessed from this single custom ACE card or access multiple Power Apps from this custom ACE. Address process and authentication challenges. The benefits will become clear in demo. How does it work - review supporting list structure, ACE card configuration and deep-link generation.

This community call demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 15, 2023.

✨ Demo Presenter
• Marcus Castro (Microsoft)

📖 Supporting materials
• Documentation - Link to a Form | https://learn.microsoft.com/viva/connections/use-the-link-card#link-to-a-form
• Documentation - Link to PowerApps | https://learn.microsoft.com/viva/connections/use-the-link-card#link-to-powerapps
• Sample - Basic Card - Multiple Forms | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-Multiple-Forms-Apps
• Documentation - Overview of Viva Connections | https://learn.microsoft.com/viva/connections/viva-connections-overview
• Documentation - Create deep links | https://learn.microsoft.com/microsoftteams/platform/concepts/build-and-test/deep-links
• Samples – SPFx ACE Samples | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples
• Documentation – Designing Viva Connections Quick Views | https://learn.microsoft.com/sharepoint/dev/spfx/viva/design/designing-quick-view
• Documentation – Viva Connections Adaptive Card Extension Quick View samples | https://learn.microsoft.com/sharepoint/dev/spfx/viva/design/quick-view-samples
• Repo – TeamsDeeplinkHelper (Deep-link Generator App) | https://github.com/ericsche/TeamsDeeplinkHelper

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

A

Product manager and I work in Microsoft teams and today I'm, going to present about stage view with people, connections and custom Ace card that I have built for some customers.

A

So this scenario is I'll, give a connection to the mean I want to be multiple Microsoft forms in the dashboard, so we had some customers that had about 12 different Microsoft forms. So, as you can imagine, there are some problems with that approach. So the way you should do that now would be, you know, create one card perform and we have no custom built-in cards for Microsoft form. So we use a web link and you just add the link to your Microsoft forms and so there's some issues right.

A

You end up with a very big your connections, dashboard with 10 different cards. Also, one issue that we found out is when the customers were using mobile clients. There were some issues with SSO, so when you open Microsoft forms, users would be asked to authenticate and then they would be able to respond to the Microsoft forms, and that would work without authentication for one week or so, and then they would need to authenticate again and and so on.

A

So uh we got some I will show later on view connections how we did to to solve that question. So we developed a custom Ace card and instead of just using the web link, we are opening the Microsoft forms in stage view in teams, and this is the same for powerapps. So exactly the same scenario. I have a question that has 10 different power apps and they want to show those in your viewer connections again the same problem.

A

You will need a lot of different styles there with your dashboard and space can be one more thing to consider, especially for users that are using mobile. Desktop is okay, you have more space, but in a mobile, if you can just bundle all the apps together, it looks much better and other thing that we found out with the powerapps.

A

Is that many times the the the SharePoint to the me and the the river connections that they mean it's, not the team's admin person so true, they would need to ask somebody else to go to teams, admin, Center and upload the app manifest and install that using an app policy for all the users. So then they could start using the app and as I'm going to show you with a stage view you can actually jump that step. You don't need to install the the application for all your users.

A

I'm gonna share my demo here, okay, so we are now in the connections and I have here a normal web link that opens on Microsoft forms. So this is the usual way to do it right, so you just click it and, as you can see, Microsoft forms will open in another tab. So that's one way you should do it. Another way is to form uh the uh stage View and using deep link.

A

I can open here the forms in a stage view one benefit of doing this way already is that the user is kept on River connections. You don't have a separate Tab and you know you just close it and you can open another form, but the way we do with this customized card is with one single card you can have multiple forms and I can open to Open Stage view. I can respond to that. I can close and again open another one.

A

So, as you can see, it's a yeah, it's search better for a user experience for the user. I can also like if it's not a Microsoft form, it's just a external URL, then okay, the user will be redirected to that external URL.

A

Perhaps the same thing so I can just have a web link and just open the app in a separate Tab, and that works like this.

A

But one better approach would be opening stage view. Oh, this is actually I'm actually publishing the powerapps in teams and redirecting the users which that power app. So, as you can see, the load time is is bigger and if the user has to do something else of your connections, I have to go back and again it's just waste of time. For for the user.

A

Another approach that you can do is using stage view, so you just directly open this. The app here in stage view. So again, the user is kept here on the context of viewer connections and it doesn't have to somewhere else to go back youTube. Your connection and another approach is use our custom edit card so again here. I can just bundle multiple, multiple power, apps and just Open Stage View, and do what I need to do here on this app.

A

So if I need to raise an incident, I can go here and I can close and I can just go to another app and do whatever I need again and just close and again uncut here on your connections, other benefit of using the stage view is I'm gonna switch users now so I have one user that does not have installed one or app right.

A

So I have this instant app and if I use the traditional approach of just redirecting the usage, the app it's gonna ask the users to install the app, but if I use the same approach but using stage View, so actually the app opens and the user doesn't even have to install the application so again, I don't need to chase the teams that mean to go there and install and use application policy to install that for every user. It just works.

A

Okay, let me share my slides back again and yeah just to show you how the structure of this customized card works. So basically it's just a SharePoint list and we have only four columns, a title, an image, a description and a link. The link is multiple lines of text just because sometimes with perhaps you have a bigger URL, so more than 255 characters. So the hyperlink column doesn't work for this scenario and basically that's the configuration that you have to do.

A

You just have a title for the card, a description and just a site URL and the grid of of the list, and that's it. You just add there. Your URL of your Microsoft forms or the URL of your power apps and and that's going to work. So it's pretty simple and that's how we generate the the stage view uh it's kind of science here. So basically you have you. You have to science that you're going to open stage and for Microsoft forms.

A

This is the ID of the teams app for Microsoft forms, and then this this is the URL of your forms. So if you try to do that yourself to Open Stage view, that's what you need to do if you want to adjust a single card, but if you use our custom Ace card it does that for you and the same for for our apps, just the app ID that changes.

A

So this is the app ID of the product app in teams and if it's any other URL, it's just gonna, redirect the user to a separate Tab and- and it won't change anything so yeah. That's it from me. uh It's already live there on our samples. You can get here on the chat, the links and also we deep link generator app. One colleague of mine actually created and just helps building these stage view URLs, so it works with a SharePoint page with Microsoft forms with powerapps.

A

You just sometimes just add the ID of the app or the forms. Url and that's gonna generate the stage view link for you. So if you just want to send that to a chat, for example, you can just use this deep link generator and it's a lot easier than do it manually yourself, okay, yeah! That's it! If you have any questions just send here on the chat and I'll be happy to answer.

A

Thank you so much. uh You definitely have to share that link as well for the Deep link, generator.