- Видео 7
- Просмотров 24 591
Ryan Johnston
Добавлен 26 дек 2006
Microsoft Power Platform is changing the face of software development worldwide. Stay on top of the latest tips and tricks to leverage Power Apps, Power Automate, Copilot Studio, Power BI, Dataverse, and the full suite of Microsoft Business Applications as I showcase the innovations and techniques needed to get the MOST out of the Power Platform!
Create Buttons with Inline Progress/Confirmation status for smooooth Canvas Apps Form UX
When it comes to saving form data in your Power Apps, give some love to the "Save" experience! Inline saving with real-time feedback is what all the cool kids are doing, and it's not hard to accomplish. In this tutorial, you'll learn a great technique for showing progress and confirmation right in the save button itself. Added bonus: check out the UI for these form controls - it's pretty slick!
00:00 Intro and Challenges
03:03 Tutorial begins
03:40 Slick Input Component
04:50 Create the Button/Container
16:10 The logic of an Inline Save Button
17:40 SVG Icons
25:15 Creating a delay using Power Automate Flow
29:36 Final demo
30:10 Closing thoughts
Grab the source code/solution to follow along! githu...
00:00 Intro and Challenges
03:03 Tutorial begins
03:40 Slick Input Component
04:50 Create the Button/Container
16:10 The logic of an Inline Save Button
17:40 SVG Icons
25:15 Creating a delay using Power Automate Flow
29:36 Final demo
30:10 Closing thoughts
Grab the source code/solution to follow along! githu...
Просмотров: 3 582
Видео
Learn how to add Style to Input Controls in Power Apps
Просмотров 6 тыс.9 месяцев назад
Adding creativity and style to your Canvas Apps is as simple as applying style properties to your Input Controls while also making use of Container Controls for things like shadows, borders, and fill. This simple tutorial serves as a great starting point to expand your app-making abilities and upskill your creativity. Download the solution file on GitHub and follow along! See the link below! 00...
MOUSE HOVER in Power Apps | It's like an OnMouseOver Event for your Canvas Apps
Просмотров 6 тыс.10 месяцев назад
OnMouseOver is a beloved JavaScript event conspicuously absent from Power Apps (for now...). BUT that doesn't mean your UI/UX plans are ruined! In this tutorial, learn how to simulate Mouse Hover via Power Apps Component Framework and learn a TON about designing attractive UI along the way. 00:00 Mouse Hover Intro 01:43 Tutorial starts 04:56 Create chart template component 26:51 PCF OnHover com...
Make Interactive SVG Icons in a Menu using a simple Custom Component
Просмотров 2,8 тыс.10 месяцев назад
Extend the functionality of SVG icons by changing their colors dynamically and deploying them in a custom menu interface, all achieved by creating a single component in your Power Apps Canvas App. Miss part one? Learn how to use SVG Icons and where to find them: ruclips.net/video/p9QhHHWYMFI/видео.html 00:00 SVG Menu Tutorial Intro 00:36 Tutorial begins 06:41 Adding interactive elements to our ...
SVG Icons for the WIN in PowerApps - why/when/how to use/where to find
Просмотров 3,3 тыс.10 месяцев назад
Designing great Canvas Apps includes being CREATIVE, and the built-in Power Apps icons are, well, NOT creative. So, level up your app with SVG icons. In this video, you'll learn: - Why to use SVG icons and when you might NOT want to use them - Where to find 500,000 FREE SVG icons for your apps - How to implement them quickly and easily 00:00 SVG Icon Tutorial Start 01:04 Why would you want/not ...
Step-by-step Data Validation for Power Apps Canvas Apps
Просмотров 1,1 тыс.10 месяцев назад
Great Power App developers don't assume their users will give them good data, and with Canvas Apps lacking built-in data validation, we have to create it ourselves! Follow this step-by-step tutorial for one of many ways to handle data validation in a custom Canvas App form. 00:00 Why do we need Data Validation in Canvas Apps? 00:50 Step-by-step begins! 04:10 Using IsMatch() to validate email ad...
Four SIMPLE Tips for Creating Beautiful UI in Canvas Apps
Просмотров 1,6 тыс.10 месяцев назад
YOU can make the next amazingly beautiful Power App, just follow the simple tips I outline in the video below, excerpted from the January 18, 2024 Microsoft Power Platform Community Call. I cover: - Simple but beautiful effects using the HTML Text control - Theming across apps by storing color palettes externally - Customized input controls that look fiiiiiiiine - Resources to supercharge your ...
Hi Ryan, this is fantastic solution. Thank you for posting this and a very thorough onboarding tutorial. This should have been done by Powerapps, but glad to see it done by you!
How did you move the container in the hierarchy using the keyboard?
I’m wondering this too?
Ah it’s asked and answered below
Can we have separate on-hover effects for each of the two bars?
Assuming timer option if you aren't using premium license for users
Thanks Ryan from India . Can you make video on this pop up msg making form blur. One more thing we(my powerapps friends) following you more for the more crazy ideas on UI part. Thanks once again
1:33 Check the OnChange event on modern TextInput control, you will be amazed ;) Make sure you set the DelayOutput to true set the OnChange property to a Select(btnYourButton) And on your Button OnSelect Just fire a random event, eg. change Self.Color ... after few seconds on not typing your even will fire, keeping your Focus in that TextInput 🤯🤯🤯🤯
Looking forward to the auto-save video. Congrats on PowerApps911!
Thank you Ryan for this awesome video. Possible to style the same for ComboBox...?
Great timing and video.
Can you show how to achieve the wide format higher res design which appears like it is for desktops? Build from scratch, showing the resolution setting and working up to a responsive app would be simply awesome
See the above comment and its response. I probably need to do a video on this :-) the actual width in the display setting is just the standard 16:9 landscape. But the containers which hold the content are responsive, so they are based on the screen’s width, usually with a maximum of 1880 pixels or so, which I find to be a nice with on 1920 X 1080 screens.
@@PowerPlatformRyan Hi Ryan. Great video.. please do a video on how you set up your layout to look larger and longer than normal. It will go a long way on some of my projects. Thanks!
First, thank you for the work you put into this and for sharing it. Just a thought…I would add one thing to this great video…change the display mode for any controls to disabled until the variable is “ready”. This stops the user from changing any values in the text fields. Just in case it takes a little extra time for the patch to complete. I would do this for any navigation controls so that they can’t leave the screen. I usually add a semi transparent container to the whole screen that stops them from doing anything
This is brilliant! Thanks for the great suggestion.
Ryan! I love your approach to power apps and your focus on form.its so true. If the apps looks like a power app, then you are lacking in design. Looking forward to see more of your content. I'd like to see more how you go about working with gradients and html
Excellent suggestion, I will add that to my list.
hello great video! just a question what screen size do you used on the sample app? it looks larger than the default set-up thanks!
Great question! It is actually just a standard 16:9 landscape display setting. However I never use fixed-width containers. It’s all responsive, so the main container is always set to Parent.Width and Parent.Height. Within that page container, I will add a main container for all content that is centered and then I constrain it usually to a max of the screen width or 1880 pixels, whichever is less (so that it shrinks on mobile).
Hey Ryan! Amazing tutorial! Something that wasn't mentioned though and it literally took me almost an hour to figure out, pay attention to the "Auto-Disable" on the OnSelect (on the button) as it activates the DisabledFill/DisabledColor and DisabledBorder properties which for me were full-blown white! Made everything disappear and didn't know if I did something wrong or the flow just doesn't work properly for me. Hope this helps!
Good catch! Glad you caught that and mentioned it in the comments, hopefully that will be a help to someone else as well.
Mate, love this video although tried to download the template from github and when I try to import it to Powerapps I get an error message - Something went wrong. Is it me or the download?? Will check out your other videos now. I have hit the subscribe button!!
Hmmm, not sure, did you ever get it to work? Not seeing any issue on my end or when I download it to a dummy account. Hope you were able to figure it out.
Can you make a video on progress bars?
Yeah, great idea! Adding to my list
Awesome content!
Appreciate it!
Instead of changing the size of the icon so it isn't as big as the container, just change the icon padding. That way the touch area is the same size as your container, and you'll have a more pleasant UX
Slick! I love that. Thanks!
Or just use modern controls lol.
Modern controls just aren’t ready for primetime. There are so many properties you can’t control, with font size being a prime example. I still find the classic controls far more customizable, and while there are some neat visual features of modern controls, they ultimately provide a less customizable experience as a maker, so I just do not use them as a matter of course. Hopefully in the near future, they will be workable!
You are my new BFF !
lol!
Thank you Ryan for this video. I got introduced to power app out of the need to give a UI solution to data visualization. I am glad to find your channel, now I can standout in my solution and portfolio project.
Fantastic!
Does anyone know how to implement the animated loader icon, I've tried to go to the same website but it won't work when I input the raw code into HTML Text :(
Are you making sure that you have the UTF8 text at the front end, and then everything in the EncodeURL formula?
Your videos are great, I have learned several things to implement, it would be ideal if you have a guide for responsive design. ❤
Great suggestion! I’ve got one planned soon!
I can't tell you how many times I've viewed examples and no one goes to the detail you do to make subtle changes which makes a PowerApp appear very polished. Thank you very much for sharing this. Will look forward to your other videos. Much appreciated.
Thanks! It’s great to know that this kind of content meets a need. I look forward to keeping it up!
Great video. When an image disappears, you can also edit any property of the image control in the formula bar to make it reappear. I usually delete then re-type the last character in the formula bar to "wake up" the control. Also, you asked about the pronunciation of the "Lato" font, which I was curious about as well. Evidently, "lato" means "summer" in Polish, so it would be pronounced LAH-toe (sounds similar to "lotto" in English). I love that font as well!
This is pure gold! Thanks for the tip on both matters! Love it!
Very nice. Simple but a lot of cool design and easy to follow. Going to use some of this going forward. Thanks. =)
That’s great to hear!!
Thanks for the video! I used this in my own app where on each form, users could save the form in a style. Now the problem is when onselect set(varSaveStatus, "confirmed") is working well. I do not need a saving step so I used just 2 steps save will show onstart and after onselect saved will show and after 1 second delay it will go back to set(varSaveStatus, "ready") which is Save. The thing is when I added delay.run(1) the button goes all white and after the delay function, shows normal as it is. I searched the video but couldn't find if I missed something or not. Where did I do wrong? Thanks in advance
Ah, good question! So, once you click a button, it automatically goes into "Disabled" Display Mode. So, whatever colors are set for DisabledFill, DisabledBorderColor, and DisabledColor all become active and the button is no longer clickable UNTIL the OnSelect actions are all completed, including your delay. So, if you don't want the color to change, just set DisabledFill to Self.Fill or Self.PressedFill, as you prefer. Same thing with DisabledBorderColor and DisabledColor. Hope that helps!
@@PowerPlatformRyan yup, that solved it! Thanks again. I learned a new thing again. 🎉
Can we use these svg for commercial uses???
Always check the licensing and terms of the icon source you use, but icons from Syncfusion Metro are commercially licensed, as are icons downloaded from Envato Elements with a valid subscription.
Thanks for sharing Ryan! I really appreciate your UX-perspective-solution-approach. Very inspiring! Well done again!
Thanks!
🔥🔥🔥THANK YOU Ryan for a fantastic presentation and many little 🪙🪙 treasure tips for a more compelling Power App experience!
Thanks, Robert, I appreciate it!
how you move the container position from top to bottom by just clicking some keys ?
CTRL + [ and CTRL + ]
thanks for your response@@PowerPlatformRyan . But after selecting the control and clicking CTRL+ whole screen size Zoomed ...
@@2007pradipta Sorry, I think my instructions were unclear. The + doesn't mean you hit CTRL and the + key. I meant that you hit CTRL "plus the" [ key. That is, CTRL and the Square Bracket key. CTRL with the Left Square Bracket [ moves the layer down, and CTRL with the Right Square Bracket ] moves the layer up.
@@PowerPlatformRyan Appreciate your effort to clarify ..It working ..thanks a lot.
First time viewer here, subscribed! Love this vid, thank you for sharing!
Awesome!
Love your videos, Ryan! There is a workaround to auto-save for text fields, even for galleries, without losing focus in the next field. It’s kind of a pain, but it works well. Obviously it doesn’t fire until you move off the text input control, but it doesn’t break tab order or lose focus on the next control you selected.
Ooh, could you share in the comments? I’ve looked for PCF controls that fake it, but haven’t come across the right solution. Would love to take a look at what you’ve found!
Great video - already changing how we do confirmation in our apps. Thank you!
That’s great!
Can you also give me the link of that figma file
Here ya go, adding it to the description. Thanks! www.figma.com/community/file/886554014393250663/free-icon-pack-1700-icons
Great video 🎉🎉 Loved the channel idea about not looking like PowerApps apps.
Thanks!
Simply brilliant
You’re very kind!
Nicely done!
Thanks!
Hi Ryan, Excellent Video !! Could you make a video about restyling other kind of controls : dropdown, combobox...
Good suggestion, I’ll put that on the list!
Well done!! 👍👌👌
Thank you! 😃
Thank you so much for this. My Home Screen is now styling.
Love it!
Very much enjoy your content. I'd like to suggest improving your audio quality. Room is quite echoy, but more important the keyboard typing is very loud and distracting. Just a suggestion. Thanks again.
Thanks for the feedback!
This is great, Ryan. This is great. Thank you for sharing. Wishing you and your channel every success.
Thanks!
This great tips just wanted to What is shortcut you are using for reordering the container?
Thanks! Reorder items with CTRL+ [ or ], depending on whether you are moving up or down.
This comment needs to get pinned!!!
This is amazing. Thanks for making such a great content 👍
Thanks! Glad it’s helpful!
Thanks Ryan for this, user friendly and clear buttons are really significant
but I couldn't see in the source file the components you show on the video, just save button..
Yes they are!
So creative Ryan! This is a great jumping off point into PCF controls for a super common scenario. Really been enjoying your content lately 🙂
Fantastic! Thanks so much :) I’ll keep it coming :)
realy nice video
Thanks so much! Hope it was a help!
You must always compensate for the border width... box-sizing 😉 There are only two makers who center on X by (Parent.Width-Self.Width)/2 or Parent.Width/2-Self.Width/2 Another makes will set all border-radius to 999 :) Great work... Keep them coming!
Awesome work. Thanks
My pleasure!