Microsoft 365 Community Introduction to Viva Connections Toolkit, 15 Mar 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Debugging your Viva Connections extensions with VS Code extension

Description

How to use the Viva Connections Toolkit extension to debug your SharePoint Framework solutions directly in the Visual Studio Code.

This video is part of a series in a playlist around using the Viva Connections Toolkit to build Viva Connections extensibility: https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp

➡️ Next video on this series - https://www.youtube.com/watch?v=OmFKAw0g61w&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=6
⬅️ Previous video on this series - https://www.youtube.com/watch?v=jXQFgGlId00&list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp&index=4

#Microsoft365 #MicrosoftViva #MicrosoftTeams #SPFx #SharePoint

In this video, you will learn about
- Getting started on using debugging features in the Viva Connections Toolkit
- Review launch.json configuration for debugging
- How debugging works in the Visual Studio Code
- Adding breakpoints and debugging the code

✨ Demo Presenter
• Hugo Bernier (Microsoft)

📃 Agenda
0:00 Introduction
0:19 Debugging your code in Viva Connections Toolkit
1:30 Review launch.json configuration
2:20 Starting debugging (F5)
3:40 Adding breakpoint to your code

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OW1XNbtsHiFDG___W8wnfHp
• Viva Connections Toolkit at GitHub - https://aka.ms/viva/code -
• Viva Connections Toolkit at VS Code market place - https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections extensibility - https://aka.ms/viva/ace/design
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections - https://aka.ms/viva/ace/learn

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 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

Foreign Hugo from Microsoft, have you tried using the Viva connections, toolkit to build adaptive card extensions? Yet, and if so, did you find yourself adding all sorts of console.log statements to try to debug your code? Well, there's an easy way to debug your code. Let me show you how the Adaptive card extension I built has the next and previous button that's supposed to go between pages, but only the next button works.

A

The previous button does not work so I have added all sorts of console.log statements in my code to try to figure out what's going on now.

A

This is code that I built using the Viva connections toolkit and one of the things that I can do is I can actually just from within the view connection toolkit pane I can actually just start serve with no browser, and so what that's going to do is it's going to do a gulp serve, but it's not launching a browser window and that's important, because I want to set up the debugging first and the other reason why I don't want to start a browser window is because I'm using a different user profile.

A

For my browser instance than I am from debugging, so all I have to do here is I just want to wait for the reload statement. It shows up twice there now one of the cool things that happens with any adaptive card extension projects that are built using the Viva connections toolkit is we already configure your debug functionality for you in the launch.json statement and so you'll see here. I have something that's called the hosted workbench, it actually works with chrome, and this is where I would actually go in.

A

In my case, I put my workbench URL here and there's a few other settings that are pre-configured for us and you can normally just ignore those settings, but one of the things that I need to do because I'm using a different browser profile, is I, want to specify profile directory and my user is called spfx debug.

A

Now the out of the box version. um That's configured for us also starts an incognito session, but I don't want to have to log in every single time that I start debugging.

A

So now that I've got that configured all I need to do is I just need to start the debugging session and what it will do is it will kind of you'll see it activating here and it'll start loading the code directly from the browser and there you go. It's actually launched the browser window. It's again, it's launched it in Chrome and it's launched it against my user profile that I've configured and here, if I, just go, configure my adaptive card extension here to use the large and I refresh here. I'll just go in preview.

A

What I'm able to do when I start clicking next and previous it again? Next Works previous does not work. What's going on. Well, let's go. Take a look at the code.

A

I have the code connected here to my browser instance, and so I happen to know that the code for the next and previous happens on the on action inside the card View. So what I need to do here is I can just go and I'll just remove all these ugly console.log statements, because they were not helping me at all and what I'll do instead is I'll insert a breakpoint, and you see here again: I had all the got here, messages that were just popping up I'll just go, insert a breakpoint and to do this.

A

I just go to the left, wire gin and I, just clicked to insert and now when I go back to the code find out the code. So I want to go back to the browser and I click on. Let me just refresh this and I click on the next button.

A

What will happen is it'll immediately. Stop on that line, and the cool thing now is I can actually just Mouse over the various variables that are defined here to actually get the state. So I can see here that the button was a submit button and that the ID was next and if I actually use the navigation at the top there I can actually go and step over the statement until I get to the part where I can figure out. Okay. What was the ID of this button again?

A

It was next I can continue clicking through here to my switch statement, and it shows me that when I click next it sets the state to change the current page that works now on the previous button. Okay, so it triggers the on action button, that's great and again, if I, if I look, it says that it's calling the previous button and if I use the step over again I can step in and see that the ID is called previous for my button. But look at that in my code.

A

I have the word previous, but it's misspelled, it's missing! A! U so all I need to do here is ADD the U, the missing you that will fix. Hopefully the code. Let's go take a look so again: all I have to do is I have to wait for the reload reload to happen. I can go reload. The browser window and I can just go reconfigure.

A

My webpart or my adaptive card extension and click the button, if I click previous again, it'll actually show me that the action was previous and if I step over all this code, what should happen is, yes, it actually reaches the set State and it's actually decreasing the page number.

A

Let me remove that breakpoint and let's go try that again, click next previous okay, it's working! That's fantastic! Now there are a few cool things that I can do. Well, I mean uh debug mode. So let's actually reinsert our little break point here to make sure that I can trigger that again and I'll go back to my adaptive card click on the previous button to actually reach the breakpoint.

A

Now the cool thing is when I'm in that break point I can actually look at things like run the console to look at variables like action, dot data and it's going to pass me. The information I could execute some code here if I wanted to or I can actually just go, create some watch variables.

A

So here I can, for example, I'll just type action, and when my code hits that point, it'll actually tell me what's going on with the action variable, which is great, if you're trying to find out where the variable is changing and things like that and the other thing that you can do is you can actually just select the variable and say add to watch instead of having to type it in.

A

So all these functionalities are actually built in to visual studio code, but the the ability to actually debug easily that's actually configured as part of your adaptive card project.

A

So there you go, it was that easy to use Visual Studio code to debug adaptive card extension projects that were built using Viva connections. Toolkit I hope that you'll use this functionality to debug your code and that's it for me. I have Marco debug.