Create apps with code and if we add the power of AI to this we can ask AI to create yaml code for us in short AI will build power app screens so let's check it out in.
[Music] action power apps is the low code development platform that allows us to build custom apps for our business needs and using power apps we can.
Quickly connect to our business data by using the connector ecosystem with canvas apps we get the PowerPoint like drag and drop experience to add controls to our.
Screen and quickly I was able to build a screen to Showcase my data in the power app now we also have a new option that allows us to view the code of a canvas app in.
Understand the app's functionality we can also copy to share and paste the code to create new controls the code view language is yaml.
Code currently we are looking at the code for the image control that I added to my power app here is the code for my header control we also have the option to.
Select multiple controls in a screen by holding the control key or simply select the screen control a to select all the controls in the screen and in one go we can go and copy the.
Code now the code that I've copied I can paste it in the same screen or in a different screen or in a completely different Power.
App the controls are copied over I'm receiving errors because I do not have my data source Linked In this app but once I link it you can see how I was able to bring.
Posts Related:
- Properly Handling Date Grouping in Excel Pivot Tables (Change Grouping, Get All dates)
- Cara Buat Kop Surat Otomatis di Word yang Didesain di PowerPoint
- How To Design Animated Full Screen Nav Menu Using HTML, CSS & JS (Part 2)
The controls in my screen and reuse the
Code now let's see how we can use this code view functionality to create reusable code or screens here I have an app that has a.Container control that has subc controls that performs certain calculations it gives output around profit and loss based on the values provided in these.
Controls and this functional is what I would like to replicate in a different app so I can select this container head over to copy copy.
Code lead over to a different app here's a new screen I'll go and paste that code and just like that I have that same functionality available over here I have the screen that uses a.
Gallery control I have styled this gallery to visualize the data now if I would like to explore the code in this Gallery I can click view code and it will list out the details of.
The code of this Gallery including the child controls and more let's say I would like to share this code with a user James who is building his own power app and would.
Like to reuse this Gallery Style right click the gallery copy code View and I can simply share the code with James directly through.
Teams I'll format the message one of the options is code block the format is yaml so I'll pick yaml I'll paste the code that I copied send it over to.
James now this gallery of m is connected to this SharePoint list called projects so I'll just let James know that make sure to connect to this list if you want to replicate that.
Gallery James gets the message from Resa
That includes the entire yaml code James can simply copy this go to his app James has made the connection to.That SharePoint list right click screen paste paste the code and there is that same Gallery design in James's app reusability of code in action to learn more about the power.
Effects yaml syntax we have good documentation available for this all Expressions must begin with a leading equal to sign single line formulas are written in.
The specific format multi-line are written in the space format and so and so forth so by learning yaml or simply view.
The code of your existing components in your power app copy and paste we can get a lot of work done I am new to this language and I would like to build a brand new screen.
Using the yaml syntax how about we share this information with chat gbt and ask chat GB BT to build us screens I am signed in to chat.
Gbt now first thing I would like to give it some context around the yaml language here is the documentation for the yaml syntax I will right click and save this.
Page here I can upload files from my computer I'll go ahead and upload that HTML file chat gbt has got the context now how about I ask chat gbd to.
Go build me a screen with controls for example I would like to add a label and a text input control to intake username give me the yl code and chat gbd has gone ahead and.
Done that now if I try try copying this code head back to Power app studio and try paste the code it's gone ahead and resulted in an error that's because the syntax is not accurate in this case so.
One of the things that I can quickly do give it an example here I have a screen that has certain set of controls if I just view the code this is the format of the yaml.
Syntax I can just copy this go back to chat gbt and I'll just paste that sample code here for reference it starts understanding the.
Exact format that it expects in this case chat gbd is trying to also add the existing controls I'll be more specific and just ask it to give me the label control and.
The text input control that's the code that I can copy head over to my power app and paste chat GPT was able to create this code for me of course a pretty simple.
Scenario an event registration form now let's try that with chat GPT go add me controls for name email phone number and more chat GPT gives me the yaml code.
Let's copy let's try and paste that right here so I simply needed to start from this point which is username label that's why understanding and.
Learning about the yaml syntax is important and you can treat chat gbd as your co-pilot wherein you and AI are working together so I got the code I'll copy I'll go ahead and paste.
This and just like that it's added controls that allows me to enter the name email and the phone number let's add more to this add fields for date and event.
Type I'll go ahead and copy the code since I'll be pasting the same controls again I'll just select them all and delete now I'll go ahead and paste my.
Code now I have fields for date and event type how about we add validations add required field validations for all the.
Controls and AI goes about updating the yaml I'll copy this code and go and pasted notice there are errors for for this input control it.
Tried self. text it should have been self. value that's because this is a modern text input control and not the classic control I'll ask Char gbt to go ahead.
And update a yaml copy paste there you go these are all required fields if I click submit it's giving me the.
Message that I need to fill out all the required Fields notice in the email it's giving an error here because email is not in the right.
Format same goes for phone number once all the validations are complete it gives me that notification when the user hits submit I would like to patch all this information.
Over to my data source here I have a SharePoint list called event registration so I would like to patch this.
Information on successful validation patch the data to my data source my data source is the SharePoint list called event register registration save name to title text.
Column so I'm being very specific email to email text column ask chat gbd to give me the yaml for button only the on select function code simply.
Just go ahead and copy this go to my submit button and replace that code this leads to an error because I do not have the connection to event registration list in my app so let's go.
