A lot of PowerApps devs underrate the new YAML feature, I believe the possibilities with this are endless. Custom Code Generators like in this video, custom app templates and even AI generated YAML with ChatGPT or Copilot.
This is awesome Matthew!! you are really at the bleeding edge with PowerApps :) I've done done some experimenting with this too specially to make sure a team of low coders to stick to naming standards and properties for the components on every app. Keep the great work man!!
@@matthewdevaney3912 Basically what we have is a central repository where you can find the code for every type of component with the necessary properties pre-configured referencing a variables for style (CSS like). By using this method we enforce that any component used on the apps maintains the same configurations starting by naming conventions, and applying all the necessary styles used on every app. This has reduced a lot of time for creating new apps, since they only need to copy and paste all the components from the repository without having to remember all the setting they need to specify each time. I have some experience working with YAML files from my own HomeAssistant experiments, and I love how I can switch to the code editor view to modify the YAML properties for every thing I can see on the screen and easily duplicate previous customizations this way in HomeAssistant, so when I found this feature in Power Apps, I was more than happy to put it to good use for my team . here is an example of my CSS variable:
I use this code on a button in the apps header to switch between Dark and Light theme: Set(varTheme,!varTheme); And then all the components are associated to those variables to be able to change their properties across the entire app. This is an input text YAML: - Txt_Input_2: Control: TextInput Properties: Appearance: ='TextInputCanvas.Appearance'.Outline BasePaletteColor: =RGBA(215, 100, 19, 1) BorderColor: |+ =Switch(varTheme, true , varStyles.DarkBorder, varStyles.Border ) BorderRadius: =5 Font: =varStyles.PrimaryFont FontColor: |- =Switch(varTheme, true , varStyles.DarkFont, varStyles.Font ) FontSize: =varStyles.P FontWeight: =varStyles.SecondaryWeight Value: '= ' Height: '=36 ' Width: =Parent.Width
@@matthewdevaney3912 I have no idea why my first response was removed. Anyway, the way I've used this is by storing all the YAML for every component in a central "repository" (we use a shared OneNote for the team). Each components has the necessary settings so they use our pseudo-CSS code and the option to change between dark and light themes in every app. The guys only need to copy and paste the YAML code for the component they are going to use and it will always have the proper name, and all the other settings. I had some experience with YAML since I've used it before on my HomeAssistant severs and I always found really useful the option to switch to code view in order to edit the YAML for every element that you want to configure inside HA, and I was a happy camper when I found it was also available on Power Apps, really well implemented, but not really sure why it was not published as a major milestone for the platform, since it opens up the door to a world of possibilities as you just showed on your video. Anyway these are my 2 cents, keep the great work and keep inspiring us to push further.
Thanks, Matthew, for sharing this interesting video. In Microsoft ecosystem the idea of code generation dates back to around 2001 when C# became available, and we even produced a number of multi-tier apps with this functionality by creating a code generator. I hope we can achieve something similar in Power Apps. It would be great if Microsoft added features to allow us to create controls on screens on the fly/dynamically by leveraging YAML.😊
@@matthewdevaney3912It took us around 4 months to develop the initial version, and we updated it whenever new features were added to .NET or C#. This approach is used by many software companies to save time producing repetitive code and to help create standardized, readable code.I looked for this feature in Power Apps, but because we cannot save each screen separately in a file, it is not possible to achieve something similar to what we have in Visual Studio.
@@matthewdevaney3912 It took us around 4 months to develop the initial version, and we updated it whenever new features were added to .NET or C#. This approach is used by many software companies to save time producing repetitive code and to help create standardized, readable code.I looked for this feature in Power Apps, but because we cannot save each screen separately in a file, it is not possible to achieve something similar to what we have in Visual Studio
Absolute game changer! Blending creativity and YAML code concepts is going to exponentially accelerate code standardization and app maker experiences. Thanks for sharing this impressive code generator 💣
By far the best example of power apps coding. and tricks thanks so much for sharing.🤓 I have been working on a power app for my job, used power app to generate form, and now its all in alphabetical order which is not what I want.
Keen to learn more about the 'Auto Generate' function - how did you retrieve those fields from the table only? :) Wonder if this can be done on or for a particular form for an entity.
It's good to see you making longer videos. Previous video about delegation was great. This one is next level obviously. I hope you'll be able to produce such gold on weekly basis :)
You are a true legend!!!! How were you able to add components to the screen with just code and no ui interaction. (What is the code for the add field button)
Hey Matthew! Great App! You have some more plans on the roadmap? It would be cool if the app had like a section where you can set your UI preferences. Also I see a lot of potential with AI generated YAML
Next steps: - Add support for Lookups and Choices columns - Select/Deselect table columns to include - Change field order - Support for both Dataverse Tables and Collections as the Datasource.
It’s amazing what can be done with a little bit of free time. Hard to find it while I’m working. But spending one of my vacation afternoons was easy to justify.
@@matthewdevaney3912 haha, I should take more vacation afternoons too by the way how did you create an asterix to mark the field as mandatory? Is that a modern control feature?
This is great! I've spent sooo much time customizing input forms and screens - I'm both sad I can't get that time back and excited to not have to do that again.
I want the generation code. If you don't supply it, I'll be kitten you not - I will resort to purr-suasion and bribe your cat to cough it up like a furball!
Any idea why I get this message "Pasting the YAML code for screen, is not yet supported", when trying to paste YAML code into a screen? It's not from the generator, but actual code from another screen?
I created a component 2-3 weeks ago for navigation (4 levels of nested gallery) using view code/paste code, and it was working and still works in components. The problem is that now I can not insert it on any screen or copy and paste it from a component I think because it was using this feature. Any idea how I can insert it on screens?
Helloooo to Matthew Devaney! Love your site, it has helped me out SO MUCH! Thank you for your ever-generous helping spirit! Love from Holly S, mommy of two four-leggers!
Hi Matthew, Can pls help me How to create a roadmap for project, from jan to dec in single screen Using powerapps Can you pls creat video on this this will help me a lot.
No, I did not share the app anywhere. Just wanted to share what I built without having to package it up and write documentation. I think it would be a good user group or livestream topic for me to demonstrate how to build.
Not publicly released right now. Lack of time is the biggest factor. I need to add a few more minor features and write documentation. Most probable thing I will do next is have a user group presentation or do a live streaming session where I partially build it. And take Q&A.
A lot of PowerApps devs underrate the new YAML feature, I believe the possibilities with this are endless.
Custom Code Generators like in this video, custom app templates and even AI generated YAML with ChatGPT or Copilot.
I can only imagine the wonderful UI templates you would create with this Tolu
converting html code to YAML 😎
This is awesome Matthew!! you are really at the bleeding edge with PowerApps :) I've done done some experimenting with this too specially to make sure a team of low coders to stick to naming standards and properties for the components on every app.
Keep the great work man!!
Tell me more about what you’ve done with this. I want to hear it all.
@@matthewdevaney3912 Basically what we have is a central repository where you can find the code for every type of component with the necessary properties pre-configured referencing a variables for style (CSS like). By using this method we enforce that any component used on the apps maintains the same configurations starting by naming conventions, and applying all the necessary styles used on every app.
This has reduced a lot of time for creating new apps, since they only need to copy and paste all the components from the repository without having to remember all the setting they need to specify each time.
I have some experience working with YAML files from my own HomeAssistant experiments, and I love how I can switch to the code editor view to modify the YAML properties for every thing I can see on the screen and easily duplicate previous customizations this way in HomeAssistant, so when I found this feature in Power Apps, I was more than happy to put it to good use for my team .
here is an example of my CSS variable:
Set(varStyles,
{
//Light Mode
Primary: RGBA(0,0,0,1),
Secondary: RGBA(0,0,0,1),
Accent: RGBA(0,0,0,1),
Alert: RGBA(0,0,0,1),
Warning: RGBA(0,0,0,1),
Error: RGBA(0,0,0,1),
Border: RGBA(0,0,0,1),
Font: RGBA(0,0,0,1),
ButtonText: RGBA(0,0,0,1),
//Dark Mode
DarkPrimary: RGBA(0,0,0,1),
DarkSecondary: RGBA(0,0,0,1),
DarkAccent: RGBA(0,0,0,1),
DarkAlert: RGBA(0,0,0,1),
DarkWarning: RGBA(0,0,0,1),
DarkError: RGBA(0,0,0,1),
DarkBorder: RGBA(0,0,0,1),
DarkFont: RGBA(0,0,0,1),
DarkButtonText: RGBA(0,0,0,1),
//Typography
H1: 24,
H2: 18,
P: 14,
Button: 15,
Small: 12,
PrimaryFont: Font.'Lato Light',
PrimaryWeight: FontWeight.Semibold,
SecondaryFont: Font.'Lato Light',
SecondaryWeight: FontWeight.Normal
}
);
I use this code on a button in the apps header to switch between Dark and Light theme:
Set(varTheme,!varTheme);
And then all the components are associated to those variables to be able to change their properties across the entire app.
This is an input text YAML:
- Txt_Input_2:
Control: TextInput
Properties:
Appearance: ='TextInputCanvas.Appearance'.Outline
BasePaletteColor: =RGBA(215, 100, 19, 1)
BorderColor: |+
=Switch(varTheme,
true , varStyles.DarkBorder,
varStyles.Border
)
BorderRadius: =5
Font: =varStyles.PrimaryFont
FontColor: |-
=Switch(varTheme,
true , varStyles.DarkFont,
varStyles.Font
)
FontSize: =varStyles.P
FontWeight: =varStyles.SecondaryWeight
Value: '= '
Height: '=36 '
Width: =Parent.Width
@@matthewdevaney3912 I have no idea why my first response was removed. Anyway, the way I've used this is by storing all the YAML for every component in a central "repository" (we use a shared OneNote for the team). Each components has the necessary settings so they use our pseudo-CSS code and the option to change between dark and light themes in every app.
The guys only need to copy and paste the YAML code for the component they are going to use and it will always have the proper name, and all the other settings.
I had some experience with YAML since I've used it before on my HomeAssistant severs and I always found really useful the option to switch to code view in order to edit the YAML for every element that you want to configure inside HA, and I was a happy camper when I found it was also available on Power Apps, really well implemented, but not really sure why it was not published as a major milestone for the platform, since it opens up the door to a world of possibilities as you just showed on your video.
Anyway these are my 2 cents, keep the great work and keep inspiring us to push further.
This was fantastic! This will make app development on Power Apps so much more streamlined! Thank you for this video, Matthew!
Hoping I can build this out more!
Only the cool kids write code generators. 😎😎👍👍
Does this mean I am finally cool Darren?
Thanks, Matthew, for sharing this interesting video. In Microsoft ecosystem the idea of code generation dates back to around 2001 when C# became available, and we even produced a number of multi-tier apps with this functionality by creating a code generator. I hope we can achieve something similar in Power Apps. It would be great if Microsoft added features to allow us to create controls on screens on the fly/dynamically by leveraging YAML.😊
Oh man. I want to hear more about this. How far did you take it with your app generator? What features did it include?
@@matthewdevaney3912It took us around 4 months to develop the initial version, and we updated it whenever new features were added to .NET or C#. This approach is used by many software companies to save time producing repetitive code and to help create standardized, readable code.I looked for this feature in Power Apps, but because we cannot save each screen separately in a file, it is not possible to achieve something similar to what we have in Visual Studio.
@@matthewdevaney3912 It took us around 4 months to develop the initial version, and we updated it whenever new features were added to .NET or C#. This approach is used by many software companies to save time producing repetitive code and to help create standardized, readable code.I looked for this feature in Power Apps, but because we cannot save each screen separately in a file, it is not possible to achieve something similar to what we have in Visual Studio
Hi where can we get this app?
Hi Mathew, big fan of your work. Thank you for posting the eye opening feature in such a great way!
You’re welcome. This was just me having fun. And not trying too hard to do anything other than scratch my own itch.
Absolute game changer! Blending creativity and YAML code concepts is going to exponentially accelerate code standardization and app maker experiences. Thanks for sharing this impressive code generator 💣
GEETHA! So nice to see you in my UA-cam comments.
@@matthewdevaney3912 Always a big fan of your passion & brilliance! Thank YOU
How much fun are you having! Awesome job Matthew, thank you.
Yup, the whole goal was just to have fun and not think about it too much. Not worrying about the goal leads to better creativity!
@@matthewdevaney3912 please post also videos on youtube choose one of the latest and interesting topic from you blogs and make video here
This is amazingly awesome!!
Thank for taking the time to do this!
It was relaxing. I’m glad you liked it.
By far the best example of power apps coding. and tricks thanks so much for sharing.🤓
I have been working on a power app for my job, used power app to generate form, and now its all in alphabetical order which is not what I want.
Keen to learn more about the 'Auto Generate' function - how did you retrieve those fields from the table only? :)
Wonder if this can be done on or for a particular form for an entity.
It's good to see you making longer videos. Previous video about delegation was great. This one is next level obviously. I hope you'll be able to produce such gold on weekly basis :)
Weekly would be tough. But I’m not opposed to doing more videos someday.
You are a true legend!!!!
How were you able to add components to the screen with just code and no ui interaction. (What is the code for the add field button)
Tough to explain in a UA-cam comment but I think I’ll do a live stream after Power Platform Conference so I can answer questions like this.
Hey Matthew! Great App!
You have some more plans on the roadmap? It would be cool if the app had like a section where you can set your UI preferences.
Also I see a lot of potential with AI generated YAML
Next steps:
- Add support for Lookups and Choices columns
- Select/Deselect table columns to include
- Change field order
- Support for both Dataverse Tables and Collections as the Datasource.
Great stuff, as always!
More and more, it seems the future will be about ready-made apps.
Ready made apps with modifications for the customer, yes.
Whawww!, this is amazing, thank you for sharing! You really are excited show this tool (Y).
This is insane amazing! 😁😁
Definitely allows a more consistent UI to the form creation , especially for quick prototyping.
It’s amazing what can be done with a little bit of free time. Hard to find it while I’m working. But spending one of my vacation afternoons was easy to justify.
@@matthewdevaney3912 haha, I should take more vacation afternoons too
by the way how did you create an asterix to mark the field as mandatory? Is that a modern control feature?
I did this inside of an HTML control because you can use multiple colors there.
thank you for sharing this tip!
I got to take more afternoon vacation to get this creative 😅
This is great! I've spent sooo much time customizing input forms and screens - I'm both sad I can't get that time back and excited to not have to do that again.
Go forth and build your own now. You can do it!
Awesome feature for sure! Great video, thank you!
How did you make the copy button to get the yaml code?
There is a Copy() function in PowerFx that allows you to copy text to the clipboard :)
Awesome explainer, and thanks for showing some of the code that runs this, enough to get me going, Excited to see where this leads.
Sounds liked I achieved my mission to get your mind going to new and exciting places. Best of luck on your own code generator app!
Amazing, you are really a PowerApps magician !
Oh, I’m just guy a who loves to code and experiment. Thats all 😊
I want the generation code. If you don't supply it, I'll be kitten you not - I will resort to purr-suasion and bribe your cat to cough it up like a furball!
It’s easy. Just take still frames as I scroll through the app formulas code Darren. 😂
@@matthewdevaney3912 Very good. thank you, my friend.
Any idea why I get this message "Pasting the YAML code for screen, is not yet supported", when trying to paste YAML code into a screen? It's not from the generator, but actual code from another screen?
This is awesome! Could you share the file for this app so we can use it as a reference to build our own YAML code generators? :)
I created a component 2-3 weeks ago for navigation (4 levels of nested gallery) using view code/paste code, and it was working and still works in components. The problem is that now I can not insert it on any screen or copy and paste it from a component I think because it was using this feature. Any idea how I can insert it on screens?
Bravo!! This is fantastic!
Thank you 😊
Hi Matthew, any chance that you will share this app?
This is awesome, are you making the zip available?
This is amazing, and I am bold to say it is also a game changer.
Matthew you are Awesome
please also make videos as you posted blogs
its easy to understand and get more details
Would love to but it’s hard to find the time to do both!
Hopefully we could someday edit the YAML code straight from the Power Apps.
I’m sure it will happen. Just not the first step for this feature.
Helloooo to Matthew Devaney! Love your site, it has helped me out SO MUCH! Thank you for your ever-generous helping spirit! Love from Holly S, mommy of two four-leggers!
That is great Matthew .... could you share the power app file with us?
No planned release at this time. It’s a proof of concept.
This is absolutely great
Glad you liked it.
Wow!!.. This is amazing!
One of the best updates
Of all time. Of all time!
Hi Matthew,
Can pls help me
How to create a roadmap for project, from jan to dec in single screen Using powerapps
Can you pls creat video on this this will help me a lot.
what's behind the auto-generate button?
The auto generate button runs a flow to get the table columns and their types. I used the EntityDefinitions endpoint in the Dataverse WebAPI.
Incredibly impressive!
Now I want to know who among us has taken this concept even further?
@@matthewdevaney3912 -- Could this idea be put into a Component Library and then sold somehow?
It could. Developers are a hard market to sell to. Many times they build their own or grab something open source.
Congratulations and thanks for sharing.
Gerald from my hometown!
NO way! just amazing
YES way!
Excellent stuff
Thank yew. Thank yew.
Whaouh! well done!
“Whaouh!” That’s my new word of the day. Love it :)
Great video :)
Yo! 😸
That's a lot to think about
It really is.
Did you share the app anywhere?
No, I did not share the app anywhere. Just wanted to share what I built without having to package it up and write documentation. I think it would be a good user group or livestream topic for me to demonstrate how to build.
Copy. Just making sure I didn’t miss anything
No problem.
I want to try it!! ❤
What are you waiting for? GO GO GO!
Hi where can we get this app?
Not publicly released right now. Lack of time is the biggest factor. I need to add a few more minor features and write documentation.
Most probable thing I will do next is have a user group presentation or do a live streaming session where I partially build it. And take Q&A.
This is 🤯!!!
It’s da 💣.com
Love it 😍
😻
too cool!
For school 🏫
Take my money?
Wah 😃
Wha-hoo! 🍄