For the second challenge, we will blend the low-code world into some pro-dev stuff. Relax, I know the charm of low-code is that everyone can do it. This challenge won’t be different although it will show what source control can mean to you as a low-code developer.
Challenge instructions
If you came to this place, we probably agree that creating canvas apps is pure fun. Creating all the functionality you want with the out-of-the-box functionality is just a blast. But changing the app just for aesthetics? That task can be too repetitive to still be joyful. Or reading the more complex functions? That means constantly expanding and collapsing the function bar.
Ulgh!
If this is causing some frustration at your end, keep reading! This challenge will make the app available in source code, which makes the above-mentioned tasks way easier to execute. This challenge is based on the first steps by Microsoft to make co-authoring (multiple editors working on the app simultaneously) in Power Apps available. That by itself is a feature you might be anticipating for. A more finalized version of that is expected later this year, but the first steps of co-authoring are useful during the monotonous tasks described earlier.
Basically, we will make the app in source code available, so you get an overview and more control of your functions within your app. Just follow the steps below and enjoy this powerful feature.
Go to GitHub and sign up. If you already have a GitHub account, you can skip this step.
Create a new Repository. You can do this by clicking on your account in the top right, selecting Your repositories, and clicking New.
Name your new repo (e.g. Challenge002) and select Create repository. This will create a repository where the source code of your app will be exported.
To enable Power Apps to read and write to your repository, it should have access to your account and repository. This can be done by creating a Personal access token. Click on your account and go to Settings. Towards the end of the list, you will see Developer settings listed. Click on it and select Personal access tokens. Here you can generate a new access token. The note cannot be blank, so enter something like Challenge_002_token. For the sake of this challenge, an expiration of 7 days would be sufficient, so that option is advised. Select the repo, admin:repo_hook, and delete_repo checkboxes. Then select Generate token.
DON’T MOVE AWAY! This token is only visible now. So be sure to copy it and save it somewhere. This is it on the GitHub side. easy-peasy.
Now that we have a repository that we can use for our source code, we want to get our app there right? Already curious what the source code will look like? Just continue and you will find out.
We need to select an app that we want to make available in source code. If you have a test app that you want to use, feel free to use it. It is recommended to use an app within you developer tenant to make sure it all works. If you don’t have an app there yet, no worries. Just create a new canvas app and make sure it is saves to your environment.
Open the app in Power Apps Studio (edit the app). Go the the settings of the app (File > Settings), go to Upcoming features, Select the Experimental tab and toggle on Show the Git version control setting. Notice it will add a Git version control section within Settings.
Navigate to the Git version control section and select connect. Fill in the fields. The GitHub repository URL in my case would be https://github.com/miguelverweij/Challenge002.
The power of Git is within branching, so you can split up the development, but that is out of the scope of this challenge. For now you can just enter main.
We haven’t created a directory (folder) within our repository. You can just ander something you like (e.g. Challenge002App).
Click Apply.
Now you will have to enter the credentials to your Github repository. At the Username field just enter your username from Github. At Password, you should not enter you GitHub password (weird, I know), but your Personal access token. This is why you should have saved it somewhere. Note that once you will open the app again, you will have to enter the Personal access token again.
Select Sign in. Because the directory we entered doesn’t exist, it will ask you if you want to create it. Just select Yes.
On the Power Apps side, it doesn’t seem like much has happened. But just have a look at your GitHub repository. You can see that a directory has been created. Pretty cool right? Just have a look for a minute to see what is in there. Notice that in the Src folder there are screen names you should recognize. If you just created an app, you would see a file named Screen1.fx.yaml.
Open the Screen1.fx.yaml file. It doesn’t show much yet at this stage.
In a different tab, go to your app again in edit mode, add a control (e.g. button) and save the app.
Now refresh your GitHub tab. Do you see that Button1 as Button with some properties has been added? pretty cool right?
This is already helping to see all the elements on one page. But adjusting it from this overview can be helpful as well. That is the last step (and most fun) step of this challenge.
On the GitHub tab, press the period (.) key. This will open a GitHub dev version, which essentially is Visual Studio Code in your browser. For those familiar with Git, feel free to clone your repo to your local drive and manage it from there. If not, this is a lovely way to directly interact with your GitHub files.
On the left ribbon, click on the explorer. You will see all the files from your repository just like you would have it in file explorer. Selecting a file will show its content, which you can instantly adjust.
Look for the Screen1.fx.yaml file we identified earlier.
Once it is opened, you can adjust the X value of the button (e.g. 0). Notice that once you adjust something within the file, you will see that the file has been modified and a count has popped up on the left ribbon. Click on that button (Source Control).
Here are all the changes that you have made listed. On the top, there is a message bar, which needs some info. Enter button replaced, and click on commit (hover over the buttons all the way on the top).
Blimey! You have just used a pro-dev tool for your low-code app. It wasn’t that hard right? But you probably want to see what the result looks like in your app.
Go back to the tab where you have your app opened in edit mode. All the way to the top there is a refresh button. This button became visible when you changed the setting of the app. If you click on it, it will retrieve the data from GitHub and update it accordingly. You see your button moved all the way to the left? Pretty cool right?
Now we take it one step further. The yaml file in GitHub only contains information that is different compared to the default control. So, if you know what the name of a control property in Power Apps is, you can enter it here and it will override it in the app. In the Button control, create a new line that states Fill: =Red.
Again, enter a message and commit. If something pops up, select Sync.
Navigate back to the tab where you edit the app and click on the Git refresh button. Now your button is red.
Now that you know how this works, you know how to get a quick overview of what is on your page, quickly adjust multiple controls, or even copy-paste properties easily. You don’t have to know much about pro-dev to make use of it.