This App Builds Power Apps (100% REAL)
HTML-код
- Опубликовано: 23 авг 2024
- I built an app that builds Power Apps and the best part is its freaking real. No, seriously! It generates code that you can copy and paste into Power Apps Studio. And it's amazing. Absolutely no AI is involved at all. Just the magic of creativity + code.
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?
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 RUclips 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 amazing, and I am bold to say it is also a game changer.
Whawww!, this is amazing, thank you for sharing! You really are excited show this tool (Y).
This is amazingly awesome!!
Thank for taking the time to do this!
It was relaxing. I’m glad you liked it.
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.
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!
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.
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.
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 😅
Wow!!.. This is amazing!
This is absolutely great
Glad you liked it.
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.
Amazing, you are really a PowerApps magician !
Oh, I’m just guy a who loves to code and experiment. Thats all 😊
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!
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? :)
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 RUclips comment but I think I’ll do a live stream after Power Platform Conference so I can answer questions like this.
Hi Matthew, any chance that you will share this app?
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.
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.
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?
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!
Bravo!! This is fantastic!
Thank you 😊
One of the best updates
Of all time. Of all time!
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 :)
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.
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.
NO way! just amazing
YES way!
Great video :)
Yo! 😸
Congratulations and thanks for sharing.
Gerald from my hometown!
Excellent stuff
Thank yew. Thank yew.
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.
That's a lot to think about
It really is.
Whaouh! well done!
“Whaouh!” That’s my new word of the day. Love it :)
Take my money?
I want to try it!! ❤
What are you waiting for? GO GO GO!
This is 🤯!!!
It’s da 💣.com
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.
Love it 😍
😻
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.
too cool!
For school 🏫
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.
Wah 😃
Wha-hoo! 🍄