How to use the New Icon Button to create Modern PowerApps
ฝัง
- เผยแพร่เมื่อ 25 ก.ค. 2024
- In this video, we cover the updated Modern Button Control. Learn how to add icons to buttons as well as other tips and tricks to use the Modern Button Control to create Modern-looking PowerApps
Follow me on LinkedIn: / victorsanwoolu
Video ID: #PP_0016
Table of Contents:
00:00 Intro
00:41 App Intro
01:09 Classic Button Control
02:29 Modern Button Control - Base Structure
05:36 Animated Buttons
09:58 Button Styles and Theme
13:17 Current Limitations
14:52 Specific Fill Modern Buttons
19:43 Transparent Buttons
📥 App and Dataset Download for Members (on TH-cam or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For Patreon Members: Download links will be available on the Patreon Page
For TH-cam Members: Check the membership tab on the channel page for the download links.
🎁Not a member yet. Join the Tolu Victor Community:
Patreon- / toluvictor
TH-cam- / @toluvictor
#powerapps #powerplatform #copilot #moderncontrol #crashcourse #canvasapps #ui/ux #uidesign #button #icon - วิทยาศาสตร์และเทคโนโลยี
You are such an inspiration to the Power App world
😊 Thanks
Great videos! I'm new to Power Apps and your videos have help me increase my skill level.
Many thanks Victor for sharing such nice tips and tricks.. 🙏🏻
I am always amazed by your wonderful UI ideas. Thank you so much! This video was very helpful as well. I can't wait for your next one.
You are welcome! Happy to know you liked the video
This channel is truly amazing for inspiration. I would however like to see you tackle a model driven app to see how you approach UI when designing with data first so your UI and UX principles and best practices carry through to the deployed app.
At some point in the future, I will definitely make a video on this topic
Great video!
Thank you. Thank you. Thank you!
Lol. You're welcome (×3) 🙂
Thanks for information, glad to have this option.
Yeah. It's really cool
Thank you so much for this. After I saw your video I immediately went to try it on an app of mine. A limitation I noticed is that you can't change the size of the icon. So this doesn't work well for larger buttons unfortunately. They should have the size of the icon scale with the font size.
Great video! TY!
Glad you enjoyed it!
I liked the video before I started watching it. Good job! Keep it up.
🙂
Tolu, I came back to this tutorial to learn the tricky applied to rotate the icon, then I heard you saying about animating svg in power apps? Have you done so? Is there any video of yours doing so for power apps?
Your videos are amazing!!!
By the way, is there anything you need to set up first before you can use this button feature?
You only need to make sure "Modern Controls" are enabled in the App settings
Hey there! Thanks for all the great info! I found it so useful that I actually subscribed with both my work and personal accounts so I can follow along at work.
I have a quick question about the icons in the button. Is there any way to adjust the size of the icons to make them bigger without changing the button size?
Thanks a lot for the support 😊
And Yes, I noticed this bug when doing my Initial testing and planned to call it out in the "Current Limitations" chapter of my video but while recording I discovered the bug has been fixed in the latest PowerApps version. So just change your PowerApps version if it hasn't changed already (3.24062.17 and higher) and do a hard refresh of your browser.
After that, the icon should also respond to font size changes regardless of button size
Hi Victor, pretty impressed by your work! Can I become a member and download the apps you've made to edit them according to my clients' requirements?
Yes, of course
Nice one. As always splendid design. I have already started using this. But there is a problem. We are not getting Tool-tip property. Imagine if you are setting up a button with just an icon, without a tooltip it would be hard for users. How would you solve this?
Yh, that is another limitation.
They already added "Accessible Label" property for the screen readers, they might as well just add tooltip.
Wow thats amazing, Is there any way to add custom icons to the button, like using svg
At this point, no
But hopefully in the future
Do you know if the design system is already in figma with modern objects?
Hmm. I don't know
How to assign the modern button a specific color of hex value
Hi. Check 16:50 . I showed a "trick" to do this
What a nice trick! If we create a component to be used as pop up, does this mean we can customize our own spinner?
Yeah. Pretty cool
Hey Victor, first of all, love your Tutorials.
I got a little Question tho. I am trying to make a Button with the Modern Button Component, but i want a specific color so i set it to Transparent and in a Container with the color i want.
Now i have the Problem tho, that it doesnt react to hovering or being pressed. I even tried putting a rectangle behind it and changing the rectangles field on hover an being pressed, but when i do that, if the button is set to transparent it still doesnt react. And if i set it to subtle, It just reacts wrong. Like it sets the fill to white while you hover. But i have white text on it, so u cant see shit when u hover on it.
Do you have any idea on how to work around that problem without having to use the old Method of creating Buttons?
Hi
Unfortunately we still can't set specific hover fill for Modern Button so if you want a specific hover fill, you'd have to use the Classic Button control
@@toluvictor Alright, sad. Gotta remake some stuff then. But thanks for your quick answer :D
Any suggestions on how to increase height/width of icon inside button?
If I increase height/width of button or increase the font size, still icon height/width remains the same so it looks very small compared to higher height/width of button
Yeah I noticed this bug when doing my Initial testing and planned to call it out in the "Current Limitations" chapter of my video but while recording I discovered the bug has been fixed in the latest PowerApps version. So just change your PowerApps version if it hasn't changed already (3.24062.17 and higher) and do a hard refresh of your browser.
After that, the icon should also respond to font size changes
Thank you so much
Am new to power app and WOW!!! How do join so that i get to download the templates
Hi. Thanks for the support.
The templates are available for download on my Patreon - www.patreon.com/ToluVictor
It is also to TH-cam channel members, you can click the join button on my TH-cam page. Once you've joined, check the membership tab on my TH-cam Page. There is a post for each video. So, look for the particular one you want, expand the post and there will be a Google Drive link to a folder that contains the files
@@toluvictor Thank you but seems I need to upgrade membership for me to access the files
Man, I didn't know that. Thank you very much, hugs from Brazil. 🟩🟨
😊 You're welcome
Pls tolu request to make complete app video
I've planned a complete project walk-through as a future video 👍
do you have a course?
Hi, I don't have any courses at the moment, but I'm considering it for the future
Too lengthy
Your commentary is 😂😂😂😂😂😂
Noice 😂😂