Get Your Code Together!

Key Takeaways

[Music] thank you very much Scott thank you very much everyone I'm really happy to be here today uh yes my name is Marcel FAA I'm a senior product manager in power apps Studio team and I look after Pro developers and code first experiences when creating power apps and I have here with me today my friend appi want to introduce yourself there we go hi ABY um I work a lot with the Power Platform and we've been doing a lot with Fusion development lately so I was discing with Marcel what we could do for this awesome session yes fantastic so yes you are in the session get your code together so let's talk about code in a low code uh platform right and uh I always like to start saying that Power Platform is for everyone including professional developers is an incredible tool and you can create amazing applic applications with less code to maintain which is always a good thing today we show two things we will show the native git integration which is the new feature in public preview now where you can see and control your code for your low code components and you also will see what is the sece code for a canvas app we always know there is a sece code underneath you don't really need to understand the star code to work with power apps but if you do you can get interesting things so let's dive deep a little bit and uh let's get started shall we okay let's start defining sece code what is sece code here is a definition that I like a SCE code is an abstraction that describes my application in a no ambiguous way and usually we write code for humans to understand that's why we write codes we have different levels of abstractions and people like different abstractions as well Some people prefer objects Some people prefer functions and that's all fine as long as you can understand the application but in low code cont text what is SE code we want to empower everyone to create applications so you don't really need to see code to create applications but in the context of low code keep in mind a solution is your searce code every time you create a component every time you create an object you are creating something that you can deploy from environment A to B if you put that in a solution that will make really simple for you and it will make easy to make an Enterprise ready application right so solution is your C code and C code is important exactly because of that and there are different levels of maturity some people they start to work like in only one environment they will create everything very quickly they will realize I need a another environment where I'm not touching all the time and then they start to manually move the code that's a manual Alm very soon they will find that even though it works it's very easy to do mistakes that's when they decide to use tools and creative processes put guard rails in place and use all the knowledge of developers right developers professional developers like us we don't only code we solve problems that we do and we have good practices such as cicd all these things we can benefit as well and uh that's in the level ofm 2.0 that's when Pro developers create and set up these environment for SS and developers to be able to create Enterprise ready applications even though it works can be expensive to set up all of that lots of time so our goal in Power Platform and all the features that you see more and more is to enable a native Alm so you can create Enterprise ready applications from day one uh with not even thinking about it we are teaching the good practices for low code developers so they can do healthy uh healthy software good software right uh so let's go and see that in practice we need a scenario we need an appp to work as I mentioned we will work more with the canvas app but let's start with the plan um if you watch Leon session before he talk about the plan designer that's a new feature which is public preview which is an amazing co-pilot first experiences for you to create uh applications really comprehensive application the scenario that we will see today it is we will create a custom application for managing real estate listings client interactions and property details I I also attached a ERG diagram and the plan designer using intelligent ads uh intelligent um agents created for me my user roles all my scenarios all my data and everything else okay we are not diping deep in the plan designer today what I want to point out it is plan designer will create for you a solution if you don't have or or you can put all your assets within a solution so you have an Alm ready application from day one this is super super important um now that we have a solution uh we are ready to start to use the git native integration okay uh git native integration allow me to connect my environment or my solution to a Azure devops project this is the first step and this is what you are seeing in the video here uh in the public preview you can set up uh your environment to one repo and that's what I'm doing here okay you will connect in seconds no to needed and we are taking this opportunity to do some improvements in this solution solution today natively it uses XML files in the git integration we are updating that to use yo and the reasons for that it is is more sear code friendly less verbos we don't have noisy dips there as well and uh is less overwhelming for makers they don't need to look the code but if they want to yo is easier for them to read and also we are showing the yo seource code which is a combination of Yo and power effects we use that in canvas but we use that in other components as well we will dip deep more in a minute on that but now that we have my environment connected to my Azure devops project I need to set up I need to do my initial commit we will bind our solution to one Azure devops project so I will show you a video about how to do that okay uh here we have our solution let me just be sure the video is playing yes so here we have our Solution that's the real estate application I will open just to show you that even the plan itself I created this with plan designer right but the plan itself is also a object in my solution so I can move across different environments if I want to here I have my app my canas app which we work today and I have more assets as well but here I will connect with sece code this is the experience for the first connection I will select a branch I could create a new Branch I'm using a power Dev Branch here that I already created and I will select a folder and uh what this will do under the hood it will look all my components all my objects and make them ready to commit once it's done the first scan this will take a couple of minutes I am able to commit and this is the experience for you to commit the code as you can see you can do everything here from maker port portal you don't even need to see code if you don't want to that allows makers seats and developers to use sear control without not even look to sear and we all know as developers what are the benefits of the sear code right okay my solution is now in my repository we will see the repository in a minute but I want to Deep dive more on the canvas app do we have a searce code for canvas app if you are working with solution today the native solution you will know if you add a canvas app in a solution when you export you will have a binary file binaries are not good to searce control there's no abstraction there right so how do you sear control a canvas app until today there is no way you can do that in a supported way you should not use this in production but we have a experimental tool where you can unpack a canvas app to a understandable yo that you can seice control okay so what is a canvas app a canvas app is a collection of assets these assets they are basically Json files and a bunch of other files they have not been designed to be Source control so they work well as a calization format but they are not stable across save and load Cycles so they are not good to Source control that's why we did this experiment which worked very well and we build upon that but the message here is please don't use this in reduction if you are using PC CLI or Power Platform CLI and if you're using p solution command don't use the PCA uh parameter uh you can use that to understand the application but avoid to put that in the pipeline you don't want to break your pipeline in production there is a way of doing that in the future the way for you to sear control your canvas app is to use the native git integration with the native git integration what we are doing is is we are opening the box we are being fully transparent we don't have a mess up anymore what you have in this solution is a folder with all the assets that we have for canvas app you have controls you have references and resources we don't support you editing those but they are there so you can see everything we are adding a new folder SRC that's our searce code so you will have one P.O file for your canvas app and you will have one P.O file for each screen of your canvas app and you if you have canvas component you will also have files for these components uh but because of that we have different formats so I just want to show this before I jump in the demo so we see in my machine how it works keep in mind if you are using the experimental format you will get a effects. yo file that's how you know you're using pcli don't use that use pa. ml files with the git native integration okay there are more details in the documentation you need to know these formats exists but let's see in practice let's see in my machine how it works okay I will share here my desktop so I have an application ready for us to dipe deep this is my solution here is connected to git already and is a simple solution that I created with the plan designer um here I have a list of properties the property has details and I have pictures for these properties let's use this application to understand the yo and the evolution that we did across different formats so I will use one control here which is the search input let's see the code of this control this is what a yo looks like okay um we always have on the left the name of the control this name is unique and we use one property call it control this will identify what type of control it is here we can see this is a class classic text input very important this is used to instantiate we don't accept any logic here this is an arbitrary value so don't put Power FX here it will not work once you define the control in the properties these are the properties that you have in your power apps Studio you have full control over here this accepts power effects and all the logic that you want to add in your app let's see more controls here uh in the context uh all of them together I will select this control I will view code this is a container right so container it is a special so the same the name on the left identifies the control this is a unique name so the name of this control is search container to identify what is the control type we have the property control as we talked before but we have an extra keyboard here which is variant variant can change what is the default value of the properties that you have for that control it might add and change the behavior as well not all controls have variants but some of them do and uh is the same as the control you don't add power effect properties here it's very important for you to understand that okay uh now that we understand that uh let's go and dip de a little bit more on the application itself uh in this application we have the list of properties and we have pictures but we don't have a way to add a new picture right and because we can see the code now we are also adding more experiences in power apps studio so you can copy controls and you can paste controls but not only that you can actually create templates for your screens this is what I did here so I did this for several apps I created um I created a new form for me to upload pictures or files and I have that on my repo and I have here open with my vs code so this is my PML file that I got from my repo that I'm using with Git integration uh there is a disclaimer here we are in public preview at this point is read only we will get to edit but at this point is read only important for you to to know that and there is a link for more documentation here with uh more information on the format and uh notice that we add another level here which describe what it is so this is the screens is basically one screen which is called at image and I have all the logic for my screen here now it's time to talk about another Improvement that we did in the control we added a version of the control this is what you have here at at this defines what is the version of the control that you see here in the code okay controls they can have different versions it's important to say that this version is for sear control only you cannot decide what version of the control you will run in studio oring runtime this is just for us to know what properties do we have and then we can deserialize the control correctly so let's do that I will use this screen here and this is a PML file I will just select the whole screen and then I will copy I'm just doing control C and I will go back to Power appsc Studio I will show you that I have only one screen and what I will do it is I will go and paste the code and then I have a new screen so I'm using that as a template and I just added a screen here in seconds this allows me as I mentioned to do scat folding to create very good standard so you can reuse your um your screens so let me just remove this comment here so we can see the app is fully functional if I click the plus then I have my new screen here fantastic we are almost done in the app but something came in I received a message from a user saying hey my app is not working it changed by itself we know that doesn't happen but we have search control so we can investigate what happened right the user is saying the filter is not working anymore and he's giving me a text here to describe what he wants the filter to do I will just uh first I will focus on fixing the problem then I will find uh later on when the problem happened uh the user claims the filter is not working so I will test I will try to type here and I can indeed is not working so let's uh let's fix that let's fix that so imagine I'm not too familiar to power effects or I'm not too familiar to Canvas I can use code view to help me to understand so I know this control is called search input but I'm not sure where the filtering is being done so I can use view code here um to search that so let's go ahead and search input perfect here I I just found the definition of the control I can see yes that's a text input and I have some properties but there is no logic here and if I go to the next I found where it's been used it's been used by records Gallery in the item that's how they filter this perfect I'm learning power FS um let's go and change that so that's the records Gallery that's the item property I want to fix this futter right so let's ask help for co-pilot I'm not too familiar to power effects let's say so I'm deleting the filter and I will ask uh copilot to help me and I will just paste what the user asked me so the user wants to filter based on search input by name address description and also wants to sort the results by price um co-pilot is suggesting me here uh powerx expression I will just accept and I will check if it works let's see I will just type again by the name and yes it is indeed working I want to see if it's sorted by price and yes it is perfect that's how you with the code knowledge and also with the co-pilot help you can start to create uh campus applications pretty quickly uh now that we fix the issue let's investigate a little bit let's see our repository so here I am in my solution that's how I get to my repository I have a link here I already have open so let's see how the repository looks like so this is my solution con a real State I have all the objects that my solution has um let me show you um quickly the solution XML which is now a yo U if you are familiar to solution this is what the former solution X XML looks like as a yo here you have the version of the solution but let's go back to the canvas app and investigate what happened with that canvas app here you would have your msap we are opening the box you don't have an msap anymore you can see everything which is underneath and here we have the new folder SRC this is the folder that you want to search control this is the search code for your application let's have a look on the history of the screen called listings that's where the issue happened if I go to my history I can see when the app has created when they updated the header when they image as added and here I see some magic mystery code if I open the code I will get just what happened it's just one clear diff I can see the user updated the filter and that's when the issue was introduced that helps me to control my searce code I can more be more confident to move across different environments review and everything else right so let's go back to the presentation um we are about to see a cool thing quick summary about the demo we saw the code view you can see all everything what is happening under the hood for app you can search control you can track changes and you can use code Snippets to scaffold and reuse and there is a whole gallery of the community that helps you to create controls copy and paste but again code Clarity is important and I know app likes a lot code just as me app want to help us to understand and a little bit better code yes I definitely want to do that so the first thing when when working with code is that you will see that um you'll probably start thinking about naming things and we all know the quote or at least if you're a developer you probably know the code that um naming things is is hard and naming things is probably one of the harder things in in doing code and the thing with naming things is it will help you speak the same dialect so to say so if you're writing codes you want to make sure that everyone uses the same construct when they build stuff and obviously you can use the outof thee box stuff that you get with with power apps but maybe you want to change up a little bit and the important thing about naming is why do you want to name things well first of all you want to make sure that this is consistent they all have the same naming convention that every control you create is clear that it makes sense and why well to help you with maintainability if other developers or other makers are involved in your project and you all use the same naming it will help you'll know what other people are meaning second you paste it in a really really awesome screen but maybe that uses a different naming convention so you want to make sure that what you're building with your team or with your friends is interchangeable and it helps if you use the same naming convention for that and it will help in AC accessibility it becomes easier to understand um what's being shown on the screen and if you do things with uh with creating new screens you make uh you might want to focus on specific uh names for your screen so that screen readers can pick it up so let's say naming things is is important now we put in a sample um if you used variable one variable two if you use combo box one and it becomes really hard to understand what actually is happening so if you would have a filter where you would say I'm going to filter combo box one on a specific variable it's it's really hard to make sense of what's happening and you saw co-pilot already doing some better suggestion maybe use a variable that describes what's actually in the variable or maybe describe what the search box is for or the combo box is being used for so this is an important thing if you're building your solution if you're building out your app you'll need to think about naming conventions and obviously copilot will uh will help you with that but there are things you can do yourself as well and that's where the git integration really really shy so let's have a look at um at my demo machine and let's have a look you already showed the uh the the solution structure so I can go to my own repo I created um um a branch called pipeline where I built a pipeline and you see that I have the same structure so I have that conosa real estate solution everything is in there I didn't do anything special there no smoke and mirrors but what I did is I added two things first of all I added an Azure Pipeline and in that pipeline I run a script so there's not too much special in the pipeline the only thing that will happen is this pipeline will try to run this specific script and will tell me okay let's have a look at the contoso real estate solution and in that script there is a bunch of logic and we'll have a look at that in a second but what I'm going to do first is I'm going to say I'm going to run my Power Platform pipeline so I'm going to say run pipeline I can say I want to run it against my feature Brands and as soon as I click on run you will see that it will cue the job it will pick up that specific pipeline it will pick up the script and it will start doing the stuff that I identified in the script and what we did in the script is if I go there we created a scoring script and let make let me uh make it a little bit bigger what we do is we do a bunch of things in the script the first thing is we'll install pow shell yl we'll need to process yl as you've shown us there's a lot of yaml and yl is something that as a human I can read but a system probably needs a little bit help so we gave it a PO shell yl bottle which us to create objects based of the gemel then what we do is if we go through it we're going to filter out all the canvas apps that we have in this specific solution so we look for any file called canvas app. Yo which contains all the yl uh that we need and then what we can do is we can go through all those elements and all the stuff that is in there so here you see I have a read app element function that will look at what we pass in and it will go through and see where there are child elements and for each child element is we'll go through it and what we'll do is we'll create a temporary list of things that we can actually go through so what we then can do is we can say well I want to Lo through all the canvas apps that I have I want to list all the canvas apps that I found and then I want to go through all the yl files that are related to a specific um a specific app and what you can then do is you can say well the first thing I want to check is whether there is a onart function created if we do anything in the onart I want to throw a warning that we should name should use name formulas you showed me that name formulas are the new best practice so I figured let's add it the second thing I can do is I can then go back to this recursive function where we go through and we have a look all the elements and then for each element we'll have a look whether it adheres to the naming convention that we're uh defining so what we do is we have a Json file and that Json file contains all the different objects so let me show you I've got my naming conventions here and we defin what that nameing convention is so we say if the control is a 3D object or the control is an error audio button we said this is the naming that it should start with and I can go through my logic you'll see here that at the end what we'll do is we'll list out anything that's not adhering to our naming convention and throw a warning for it and we can say we write it out in our script or we can throw an actual as you can see we do that if it's a pipeline we can throw a warning so what happens if you now run this pipeline you see that the pipeline has successfully executed everything looks good no errors but we did get 80 warnings explaining to us that the the control upload image which is of Type image should start with E EMG according to our naming convention so now what we can do is we can enforce a naming convention and let everyone know that whenever they do something you need to adhere to the naming convention that we decided that so we all speak the same dialect and I think that's where you have some cool stuff to show up next that's really cool UPI thank you very much um uh yes I want to highlight that exactly that uh code is for other humans to understand so get your code together write a good code which is good to understand get some agreement on conventions and yes I love code uh so with code we have options and we have lots of options with Power Platform right what should I use native git do CLI or Power Platform pipeline Azure devops what to use when so yes there's no one size fits all you have options this table might help you to decide what to use important to say the native git integration is now in public preview at this point we support low code components if you are creating code first components using typescript or C PEX is the way to go um but moving forward you will see more and more component supported in the native integration and regarding cicd is the same you have options to create your pipelines power Power Platform pipelines is a a fantastic way for you to get started it's a fantastic way to give the power of cicd for sits and developers you can start really quickly and soon uh but if you want to extend with code if you want to really use more professional tools uh you have options so use this table to help you and also we have an awesome session after that talking about Alm so stay tuned um yes all the example that we show here is part of the contoso real state sample this is a fantastic uh repository that I would I have to give credit to Scott Duro um we extend an example from our Azure friends and uh we use Power Platform to extend that F stch application where we can innovate and you have full access to the code here are the links you have more content in this session as well um so thank you very much for being here with us get your code together and share your code snippet