Exploring Microsoft Graph Toolkit Lap as a non-developer -Part 3
This is part 3 of my blog series about the Microsoft Graph ToolKit Lap — a very hands-on approach by the Microsoft Graph Team to engage the developer community to start using the Toolkit. If you haven’t read the first parts, please catch up here. So you know that I am not a developer, but I just began to learn about how this set of web components works and how easily even I could change the look and feel of them by using some CSS. As a code newbie, this was not the most natural thing — but as with the provided resources, I was able to achieve the desired outcome — and thanks to the author MVP Hugo Bernier I learned much new stuff as well.
#MSGraphToolkitLap Day 5
In this part, MVP Fabio Franzini will continue, and I need to confess, when I first skimmed the post, I felt seriously intimidated. But Fabio explained everything in a very concise and well-structured way so I could follow.
templates
Wow, my learning curve is steep. I can tell you! A few days ago, I didn’t even have a clue that something like the Toolkit exists or what is a component or the fact that you style it using CSS custom properties — and today, I will learn how to use templates to change the UI. Learned that I could just add a element inside of a web component. I tried out the mgt-agenda component both in the MGT Playground and on my site. But perhaps, the way it renders is not how we want it to behave. So Fabio suggests to
- display date and time of the event
- to link to the calendar on click of the title
- to show all participants
- show the description of the event
data-type
You can change a lot in components- to tell the component which part of the template you want to modify, you need to use data-type. We will use event view, no data view, and loading view as an example, whereas event view will teach us the most (and will be the hardest to do as well), which is why we focus on it.
We will need to be able to call functions directly from the template. Whoa, what? Let’s read that again. Calling a function? I knew that already from a JavaScript online course that I started to do a while ago. So I read docs.microsoft.com and had a look at the GitHub Repo and then eventually understood how I could extend the context of the template with the stuff I needed like variables and functions. To me, it sounded like shopping
¯_(ツ)_/¯
So let’s go shopping in the mall of functions 🙂 I take three functions to format dates properly:
- getDate
- getTime
- formatDate
Additionally, I want a function to open the calendar:
- openWebLink
and one function to get me the text from within the body of the event for the description:
- getTextFromHTML
I loved how structured Fabio guided me through the lesson, so I understood what he wrote while reading it.
Parallels to my maker life
The remarkable thing for me is that I am so used to build stuff in Power Automate / Power Virtual Agent, that my mind tried to “translate” what Fabio teaches me about code and functions to expressions and actions in a flow . In essence, I need to say: it’s pretty similar. Not because of the same or similar syntax or code, but just the way how I would think about a solution.
- First divide the monster into easily digestible chunks
- Get the all the small pieces together
- Then put everything together
- Try to make it more pretty /add some styling
- Explain it to someone, who has no clue about it
open calendar link
Think this was the hardest part, but again, I learned something very new, as Fabio introduced me to doubled braces like {{event.subject}} — which is just like dynamic content from a variable.
As we want to do different things in our event card we will need two div. To make this even more elegant, we can use conditional expressions. They work just like an if formula in Excel ¯_(ツ)_/¯: We want to display the date for the end of the event, if it is not the same as the start of the event. Otherwise, it will show the second div. Not that hard to understand, as it makes sense, but the syntax of dates caused me some headache. Need to confess, that I couldn’t write these lines without mistakes on my own for the first two times, but succeeded at the third attempt without needing to look up the code in the blog post / GitHub Repo.
show attendees
To show attendees, we can use the mgt-person control and the data-for attribute. I wish, I had a bit more context here, as I didn’t fully understand how this worked, but I was happy enough, that it worked 🙂
Putting everything together
All our puzzle tiles fit perfectly together — thank you for designing them with so much care! The biggest issue for me was that I needed to look up how the CSS part worked. I should spend some time learning that as well.
So I put together everything that I first explored in the MGT Playground into my HTML file, and I realized that my code seriously did what it should do! You can’t beat that feeling, or better: I can’t beat it. Very similar to “Your flow ran successfully 🙂 I would have never guessed that I would be able to do something like this. I Don’t know where this will lead to, but I like what it does with my mind. I love building those bricks and think about how I can modify something pre-built to make it like I want to be.
What’s next & Feedback
If this blog helped you to get started with MGT, please clap and follow me on twitter. Also, reach out to me and share your views. I appreciate any kind of feedback. And please stay tuned, as I will publish the next part of my learning journey soon.
My name is
Luise Freese
You May Also Like
How to organize your homeoffice with NFC tags and Apple
tl;dr With NFC tags and an iPhone you can quickly build a nice system …
How to use Azure OpenAI with data in your SharePoint libraries
tl;dr We can index documents from a SharePoint library with Azure …
How to add and remove owners from a Power Automate flow with CLI Microsoft 365
tl;dr Using CLI Microsoft 365 you can easily add and remove owners of …