From the top left-hand corner select My apps > My Groups
Here you will see all the M365 groups and AD Security groups you are a member of. Click in the group you need to find the ID for and on the next page you will see more details of that group. In the address bar you will the group ID after “objectId=”
Modal dialog boxed are a great way to enhance the user experience by displaying confirmation messages after an interaction is made within an app. Unfortunately the out of the box options are limited in PowerApps so this tutorial will outline how to create a responsive modal dialog like the following:
Firstly within a Screen add a Vertical container. This will be the main container and act as an overlay to hide the content of the screen. We’ll refer to this as the main_container.
Ensure the container is staring the top left corner of the screen so set the X and Y properties to 0. We also want this container to stretch to the to the size of the canvas (or its Parent) and to do this you will need to set the Height and Width as follows:
Set the Fill property to a dark shade with some transparency, I like to use RGBA(0, 0, 0, 0.5)
Fill: RGBA(0, 0, 0, 0.5)
Set the Justify (vertical) to Center. Set the Align (horizontal) to Center. This will keep the contents in the center of the screen.
Add another Vertical container within the main_container. This will be used to hold the contents of the modal dialog. We’ll refer to this as the modal_container. You can get clever with this but for this post we’ll keep it simple and just show a Text label with a Button which hides the modal dialog.
Set the Fill of this modal_container to a white background.
Fill: RGBA(255, 255, 255, 1)
You can set the Height and Width accordingly but for this tutorial set the Flexible height property to Off and set the Height to 300 and Width to 500. Set the Justify (vertical) to Center. Set the Align (horizontal) to Center. This will keep the contents in the center of the modal dialog box.
Within the modal_container add a Label control and give it some text. Next add a Button control and give it text accordingly:
Now back on the Screens OnVisible property create a context variable called “showModal” and set it to false. This will create and set a variable when ever the Screen is opened:
OnVisible: UpdateContext({showModal: false})
Now set the main_container Visible property to this context variable. This should hide the main container and the modal dialog we created earlier.
Visible: showModal
On your screen there would be some button or action to show the modal dialog. For example if you have a form which has a Cancel or Submit button, somewhere in its OnSelect property you would set it to update the context variable to true in order to show the modal dialog. For this example lets just insert a Button on the Screen (make sure it is outside the main_container) and set it’s OnSelect property to the following:
OnSelect: UpdateContext({showModal: true})
By clicking this button the modal dialog should appear again. Finally we need a way to hide the modal dialog. Select the button in the modal dialog and set its OnSelect property to:
OnSelect: UpdateContext({showModal: false})
Now clicking this will subsequently hide the modal dialog. You can optionally navigate away from the screen by adding the Navigate() function to the same button.
Hopefully you found this tutorial useful and simple to create a basic responsive modals. You can do many other clever things with this basic technique and I hope to create more tutorials around this topic but let me know in the comments if there are other type of modal dialogs you would like me to cover.
I love creating PowerApps but sometimes I want to make my apps look different to what PowerApps provide out of the box. However I’m not a designer and I normally would use a nice UI style library like Fluent UI (formerly Office Fabric UI) to do the design work for me. You can do the same in PowerApps but it takes a bit of up front work and in this blog I will show you how to do just that.
Pick an existing UI library
First of all find a UI library or UI controls that you like. I will be using the Fluent UI Button control:
NOTE: The PowerApps “Office Blue” theme is very similar style to Fluent UI but you can apply the same concepts using any UI library.
Now use the developer tools of the browser and inspect the control. I’m using Google chrome to right-click the button control and select Inspect:
Now from the Developer tools pop out menu in the Elements tab you will see the HTML code for the control you are inspecting (you might need to click around the different divs):
Then look in the Styles area where you will see the CSS properties:
Look for the relevant CSS property that corresponds to the PowerApps control property. For reference, below is a table to show you comparisons. I’m only using common Color and border properties and some Size and location properties for a control because these are most of what you need to style controls the way you want.
Bonus tip: Create CSS global variable in PowerApps
I found this neat trick to create a CSS like global variable, which makes it easier to set properties for controls and then update all of them at once if you ever want to. For more details see this excellent article by Summit Bajracharya: https://summitbajracharya.com.np/css-in-powerapps/
So for a Fluent UI Button I made note of the relevant CSS properties and using the table above I matched them to PowerApps control properties. Then I create a global variable in the App’s OnStart property, which you can find below:
Now in PowerApps drop a Button control onto your canvas and for each of its properties set them to the corresponding variables we just created. For example in the BorderColor property type the variable name then the matching value – “fluentUIButtonCSS.borderColor”
Once you are done setting all the properties you will see the end result. Here is a before and after comparison:
You can apply these same tricks to other controls like Text input, Dropdowns, Checkboxes etc. Also using the same concepts you can style your PowerApps controls using inspiration from other UI styles and libraries like Material UI, Bootstrap etc.
The more I use Teams the more I try to get people to stop sending me emails. I’ve been guilty of having thousands of unread emails in my inbox and been through the fun of creating folders to try organise the clutter of project related emails.
Using Microsoft Teams there are a number of ways you can reduce that clutter and make emails more exclusive again.
Quick email question vs. Instant message using Chat
Instead of sending an email to someone or even a group of people just to ask a quick question, use Teams to start a Chat for an instant message or write that same email as a Post in a Team
You don’t need to switch to Outlook to start an email
You can keep your Chats history instead of a cluttered inbox with back and forth email responses
More chance of getting an instant responses and not have your email lost in the other persons busy inbox
No more forgetting to “Reply to all” in a group email. Everyone is kept in the loop in a group chat.
You won’t need to find the email if you need to refer to it, you can use the search option in Teams
Attach file to email vs. Add attachment to Posts/ Chats
Instead of sending a file and asking someone to edit the file and send it back, upload the file in a Post or Chat and have them edit it directly in Teams and save it automatically in Teams
No need to switch over to Outlook and then find the file to attach
No need for recipients to save the attachment, edit it, save it somewhere, attach it and send it back
If sending to a group of people they can all edit the document, even at the same time!
You will always have the most up to date version of the file. Every-time someone updates the file a new version is created automatically making it easy to restore it back to a previous version if needed
Suresh Memmi 