Microsoft 365 Community Experts from the field, 12 Sep 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: How to use modern controls in Power Apps

Description

In this video, I'll walk you through a new set of modern controls available in Power Apps.
These new modern controls are based on the Microsoft Fluent design system increasing the accessibility, usability, and performance providing a more immersive experience in Microsoft 365.
Before we start, let me briefly thank Plumsail.
Plumsail provides tools for web and SharePoint list forms and automated document creation.
Stick around and stay tuned I will tell you more about Plumsail and share the discount coupon.

🔗 Link to Plumsail site:
https://bit.ly/3sj4gSd
Promo code 10% off the first year: powerapps

🔗 Modern Controls Documentation
https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/modern-controls/overview-modern-controls

👇
🔔Don't forget to subscribe to my channel to stay tuned Subscribe: https://www.youtube.com/giulianodeluca?sub_confirmation=1
👆

📺 REQUEST VIDEOS THAT YOU'D LIKE TO SEE
https://forms.office.com/r/NjTNvfaY13

🎬More Videos:
-Microsoft Teams: https://www.youtube.com/playlist?list=PLRKPRVekwUn9D8fI26_6vajIo7tuDScTW
-Microsoft SharePoint: https://www.youtube.com/playlist?list=PLRKPRVekwUn-3UEGYv99TbO6IBE0F1gL5
-Microsoft 365: https://www.youtube.com/playlist?list=PLRKPRVekwUn-kYhf_xj38Dy8umE21Jb66
-Azure: https://www.youtube.com/playlist?list=PLRKPRVekwUn_e8sBXPMxGJBj9WgYrv8YD
-PowerPoint: https://www.youtube.com/playlist?list=PLRKPRVekwUn8cE0BsC-JLQAosfbD1mF1u
-⚙Tools: https://www.youtube.com/playlist?list=PLRKPRVekwUn94drCWUuqYFPtOTa_7aass
-Shorts: https://www.youtube.com/playlist?list=PLRKPRVekwUn8V14C8MVMlD9Fc_7NviD_F

📺My YouTube Channel:
https://www.youtube.com/giulianodeluca

🔗Let’s connect on social:
https://www.facebook.com/delucagiulian
https://www.linkedin.com/in/delucagiuliano/
https://twitter.com/delucagiulian
https://www.tiktok.com/@delucagiulian
https://www.instagram.com/delucagiulian
https://delucagiuliano.com

⏲Timestamps
00:00 Introduction
00:42 Fluent UI System
01:30 How to enable Modern Controls
03:17 Badge
04:11 Button
04:44 Checkbox
05:10 Combobox
05:59 Date picker
06:25 Dropdown
07:00 Information button
07:35 Link
07:48 Progress Bar
08:45 Radio
09:13 Slider
09:42 Spinner
10:34 Tab List
11:29 Text
12:03 Text Input
12:20 Toggle
12:32 Plumsail
14:49 Conclusion

#GiulianoDeLuca #DeLuca

A

Hi everyone in this video I'll walk you through a new set of mother controls available in power apps. This new motor controls are based on the Microsoft fluent design system, increasing the accessibility, usability performance, providing a more immersive experience in Microsoft 365.. Before we start, let me briefly thank Plum, sale, Plum sale provides tools for web and SharePoint list forms and automated document creation stick around and stay tuned. I will tell you more about Plum sale and share the discount coupon. Let's get started.

A

This is the framework the UI framework used by Microsoft in Microsoft 365 to keep the same user experience everywhere and modern controls and powerapps are based on this framework. Now before to jump immediately on powerapps. Let me open a couple of controls, because I want to show you that these are exactly in the same aspect in in powerapps. So this is the control the button and scrolling down.

A

Let me highlight one tab list here: you can have this control horizontal or vertical, and we are going to show you in a bit that in powerapps you have exactly the same control motor control, all right. Let's switch in powerapps now, luckily, I have already a tab open here and let's start to create a new app I'm going to click here to start a creation of a new app start with a page design and then I'm going to use a blank canvas targeting a tablet.

A

Let's get started now to create this this up in order to enable model controls that are not turned on by default. You need to go in the comment bar here and, let's click on settings down below you will find on the left menu here upcoming features clicking on it. Then you can use the search to filter the controls that we want in this case is motor controls and teams. Now, let's turn on this functionality, and here you can see immediately that something is changing.

A

Let me close now this panel and here I have this new capability, which will allow me to define a 10.. This is pretty cool, so I can Define immediately a time that I'm going to use in my powerapps that could be still orange, Platinum, green red and a classic power-ups colors.

A

Now, let's say that I'm ready to play with new this new capability, and here when you click on the plus button, you will see two tabs now the classic user controls and then, moreover, you have modern here under preview, you will find all new, modern controls that we can use.

A

Now, let's start to place one for example batch. Let me play here, we go. My batch control is now placed on my screen in my power app on the right. I have the properties of this control. Let me select the control, and now we can see a bunch of properties. I have content. This means that I can change the text here and I have appearance. I can click on the drop down I have tint, I can select, fill it, for example, or ghost outline, let's go with tint and you can change also the color.

A

There is brand Danger, important, informative and so on the shape. We have three options: circular Square and rounded: let's set circular, let's move with the next control, which is the button. Let me drag and drop a button here, and here we go now: let's explore the properties for this control as well.

A

So here you have the classic text property the type this could be a primary, a secondary outline, subtle and transparent. Let's go with the primary, and this is the most important properties that you can change for this control. Now, let's move with another control, and it is in this case the checkbox control as properties we have label. You can change the text here on this label. Let me remove box, for example, and we have now just check and then you can also Define. If you want to display this control as check it or not.

A

Let me add the next one, which is the combo box. The combo box is now dropped in the property panel in data source I'm, going to Target the accounts table coming from dataverse here. I can select the view that I want to display. Let me go with all accounts and then I can Define if I want to allow multiple selection or not, and if I want to search in this combo box. Let me play the app so we can see some content in this combo box.

A

We have some users inside and Rita Mueller Mark, Wilbur, Paul, Green I can search the user and I have the multi-selection enabled next one is date picker. This is a new revamped date, picker control, it's pretty nice right now in the property panel you can set the placeholder. The format could be short, long abbreviated and year month.

A

Now let me play just to show you the usability of this control, and here we go. You can set very easily the date in this date. Picker, let's go with the drop down control. This is another nice control and let's set something here: I'm going to reuse, always the existing table in databers.

A

In this case, it's the table accounts here you can set if this field is required or not, and the connections to the items and if I play now this control, we can see all items contained here and you can set easily the item that you want to display in the drop down.

A

The information button is also pretty nice to see it's very useful. If you place it next to the to the fields and it offer you a nice USB user experience explaining the meaning of a specific field, you can change the the size of the icon and the content. If I click on play, I can now click on this one and I have this panel showing up on top info button content. You can change the content in the properties panel. Of course, all right, let's move on with the next one. This is the Classic Link control.

A

This is a very easy as as control you have the text and then you have the URL to add. Let's move with the progress bar. This is another nice control. If you don't know the percentage of your background process or your operation that you are performing, you can set in this control day in determinate property to on. In this way, the user will wait until the event or the process will terminate.

A

You have additional properties like accessible label. The thickness could be large, for example, and the shape could be rounded or square. The color could be success if the operation is completed, warning and error. These are all the possibility, if you set in the terminate to off, you, have the ability to set the current value and the maximum value of this progress bar.

A

Finally, let's go with the radio button, and here like for the combo box and checkbox, we have more or less the same user experience just to for the sake of this demo, I'm going to Target, always the accounts table here, you can find the view that you want for that table and, if I play now, we can see the this checkbox control all right. Let's move with the next one, it is the slider. This is also another user full control.

A

If you need to configure a specific value for something you have in fact, in the property panel, the value accessible label the size could be smaller, for example, minimum value and maximum value. The layout could be horizontal or could be even vertical. This is also nice nice to have finally moving to the next. We have the spinner. Let me place it in this one here.

A

This is also useful if you want to process something, and if you want to provide the information to the user, that the process it takes a while or some time as a parent, you can have primary or inverted the label position could be after before, above or below. You can just set a text, let's say loading and now in the label position you can have above, for example, the spinner size could be tiny extra, small, small, large extra, large and huge, let's go with the huge and that's it for a spinner perspective, the table list.

A

It is the control that we have seen before in the web page of fluent UI. This offer the ability, as always, to set a data source in this case I'm going to set the table. We have three items here: you can display the The View that you want, let's go with none and then the sides, large medium and the alignment could be horizontal or vertical. This is pretty useful. In the case, you are planning to build a navigation, for example. This could be definitely an option.

A

You can have this navigation on top of your app and then you can display a different screen according to the selection of the user. Now let me select this one. If I make it a little bit larger, we can see now the three options available, showing up all right. Now, let's move with the text.

A

This is a classic label label control. Here you have the text as a property, you have the font, size, font, weight, font style. You can set and style a bit. This control the alignment could be vertical in Middle top of the button. The line could be start and Center justify how to hate. This is also useful and that's it from this text control. Finally, the text input.

A

This is quite common. We have the blazeholder, we have the mode as will single line or multiple multi-line. And finally, we have the toggle this last one. It's also pretty nice to see as properties. You have the label. The label position and you have check it or not.

A

Plan say forms, allows you to design model SharePoint forms with the support of lists, libraries, content, types and folders. You can work with data from different sites and edit all the relevant information in a single responsive form create depending cascading drop downs with no code and customize their appearance.

A

A data table control allows you to design forms with child items without creating separate lists, ink sketch to collect and written signatures and notes and like scale for long questionaries. The collected data will be saved to the fields of the same list.

A

Glam sale forms also provides a powerful form builder for web forms that you can publish to any website or share with a link. You can create online forms from scratch or start from one of the ready to go.

A

Templates choose from different form types registrations, feedback and surveys, reservations, orders, applications, create multi-step forms and split Fields into logical sections, collect repeating data in a structured form with the data table, control, allow user to attach files leave and written notes and signatures and more collect data with plant cell forms and merge submissions to create custom documents with another tool. Plumstate documents: it's a template based solution for automated document creation, transform documents into reusable templates and populate them with data from your systems, for example, create reports from your CRM employment contracts from your HR software.

A

Deliver documents by email send for insignature store in the cloud or use any of our 2000 Integrations.

A

You can try all plan sale products for free for one month find a link under the video with the promo code powerapps. You will get 10 of your first year subscription. Let me know what do you think about motor controls in powerapps I hope you enjoyed this video. If, yes, please consider to subscribe, I hope to see you next time. Bye.