Jun 17

Written by: Thomas Capps
6/17/2019 5:20 AM 

This is Part Three of my app for maintaining data on vehicles found in the video game GTA Online using Microsoft PowerApps. Please see Part One for info on the SQL Server database design and how the screen above was created.

In my last post (Part Two) I got rid of the Delete button code and mentioned that I was going to replace it with something else. The button my app really needs is a way to show that the selected vehicle was purchased by the player, and put into a specific garage in-game.

 

Here again is my database design. By clicking a button on the ViewVehicleDetailScreen, it needs to add a record to GTAVehiclesOwned, including which GarageID the vehicle is stored in. I don’t think I need a whole nother screen just for that, so instead I’ll make a pop-up that will include two dropdowns: CharacterName & their associated GarageNames.

 

First we’ll change the icon, as the trash icon no longer fits since only SOME of the vehicles in GTA Online are trash. 1) Select the control formerly known as IconDelete1 in either the Tree view or Design view. 2) Select the dropdown next to Icon in the Properties menu, and 3) Choose a different icon such as Money.

 

 

Let’s rename the button and then give it a new function. 1) Change IconDelete1 to IconOwnVehicle either by double-clicking the name of the control, or by clicking the ellipsis (…) next to it and selecting Rename. 2) With the control selected, change the OnSelect property (either at the top of the screen or in the Advanced tab under the Properties view) to the following:

 

UpdateContext({boolPopUpOwnership: true})

 

We are once again creating a variable, but instead of a global variable using the Set function, this variable will only be used on this screen, so we can just set a local or context variable using UpdateContext. The syntax is a little more convoluted, with curly braces and colons, similar to updating records in our database using the Patch function. But like Patch, you could update multiple variables at once, separated by commas within the braces.

 

Now it’s time to start building our pop-up screen, but the first thing we need is a layer on top of the existing screen, that will make it look “grayed-out” and bring focus to the pop-up. 1) From the Insert menu, choose Icons, then scroll most of the way to the end until you can choose Rectangle. 2) Let’s give the rectangle a better name by double-clicking the new control’s name or selecting Rename from the menu.

 

We want the rectangle to be gray but somewhat transparent, so we can either use the dropdown at the top of the screen and look each property up one by one, OR click on the name of the property under the Properties tab, which selects it for us above. 1) Since this IS GTA Online, and Rockstar Games has a particularly childish sense of humor, let’s set the Fill (“Color”) to RGBA(169, 169, 169, .69) The final decimal sets the opacity of the rectangle to 69% visible. 2) Now click both Width and Height and set them to match the Width and Height of the Parent (the screen), so if the screen resizes on different phones, the background of our pop-up will match. 3) The X and Y coordinates (top-left corner) can both be set to zero, which you can do right in the boxes provided if you wish.

 

Next we need another Rectangle, this one the background of our pop-up. Just like last time, 1) select Rectangle from the Icons option under the Insert Menu, then 2) give it a better name.

 

We can change each of the window’s attributes one-by-one again from the dropdown, or just hard-code the numbers I’ve provided right into the Properties view. I want to make sure the window stays in the same position and has the same dimensions even if the screen changes.

X = 25

Y = 205

Width = 585

Height = 350

Fill (“Color”) = White //or// RGBA(255, 255, 255, 1)

… or just click the Paint icon and choose the White color.

 

We need a label from our pop-up. 1) From the Insert menu, choose Label. 2) Give it a good name. 3) Rather than change the attributes to get the positioning down to the pixel, you can just click-and-drag the control in the Design view to line up with the top of the window. 4) Change the Text property to read “Choose Character and Garage:” If you’re typing in the Property window, leave the quotes off; they are added automatically.

 

Time for our dropdowns. 1) From the Insert menu again, select the Controls menu, then Dropdown. 2) Click-and-drag the control down below the label inside Design view, then with the dropdown selected, hit Ctrl+C to copy and Ctrl+V to paste a duplicate dropdown, and position it under the first. Leave room for one more control. 3) The dropdowns may be as-wide-as or wider than the window they are placed on, so you can fiddle around with the edges until they are sized and positioned correctly. Note the thin red dotted guideline PowerApps provides to help you keep the controls lined up with one another. 4) Don’t forget to add nice names. Note the controls in the Tree view are in the opposite order than in Design view, because as each control is added to the screen, it goes to the top of the list in Tree view. Also recall that if the control is higher than another in the Tree view, it will be in front of the other in Design view. In our example, the labels and dropdowns are higher than (in front of) the white pop-up window, which is higher than (in front of) the transparent background.

 

Now we need to add data sources to our dropdowns. Note I have a Character dropdown which will show items from the GTACharacters table in my database, and a Garage dropdown which will show... items… from the… GTAGarage -- you get the idea. 1) Making sure the correct dropdown is selected , 2) from the Properties tab, choose Select a data source under the Items property. Our tables don’t exist in this list… yet, so 3) click Add a data source…

 

The Data pop-out opens, so we select SQL Server. (Again, note the additional data types we could use. If we had a list of items we wanted to populate our dropdown from in a separate Excel spreadsheet, we could use that instead.)

 

Our list of tables now displays, so choose the correct table for the correct dropdown and then click Connect. Repeat all steps from the last three paragraphs for the second dropdown, then close the Data pop-out window.

 

Now the first dropdown has a list of my characters, and the second dropdown has a list of all my garages. ALL my garages. “Arena Workshop” shows up twice because they are owned by two separate characters. I want to filter the second dropdown based on what is selected in the first dropdown, and to do that we will use… Filter.

 

The Items property of the second dropdown was set to the unfiltered GTAGarages table. To change that we can either A) update the property at the top of the screen to:

 

Filter('[dbo].[GTAGarages]', CharacterID = VVCharacterDropdown.Selected.ID)

 

Alternatively, you can B) click on Depends on… beneath Value in the Properties tab, and use the wizard to show the relationship between one control and the other. Either way, we are filtering the Garages list to only show those entries where CharacterID matches the ID value of the first dropdown.

 

Next let’s add the Submit button, that will save this relationship between the vehicle purchased in-game and the garage it’s going into. To add a button, 1) on the Insert menu, click Button. 2) Give it a name. 3) Click-and-drag the control in the Design view to line up with the bottom of the pop-up, using the guidelines provided. 4) To change the Text that shows on the face of the button, you have many options: change the Text attribute in the Properties tab, add it to the top of the screen under Text (using quotes), or even double-click the button itself in Design view.

 

Unfortunately we can’t add the code to make the button update the GTAVehiclesOwned table, because we haven’t added that table as a data source yet. There also doesn’t seem to be an easy method for adding it the same way we added it to the dropdowns. Instead, we can view existing data sources and add new ones 1) under the View menu, by clicking Data sources. Our friendly Data pop-out window returns, and we follow the same steps used previously: 2) click Add data source, 3) select SQL Server, 4) and finally the table we want to reference and click Connect.

 

Now we can safely add the code to our button, again using the Patch function to add a new record to our database. With the button control selected, change the OnSelect property to the following:

 

Patch(

    '[dbo].[GTAVehiclesOwned]',

    Defaults('[dbo].[GTAVehiclesOwned]'),

    {

        VehicleID: SelectedVehicleID,

        GarageID: VVGarageDropdown.Selected.ID

    }

);

Refresh('[dbo].[GTAVehiclesOwned]');

UpdateContext({boolPopUpOwnership: false})

 

Like we did when adding a new vehicle to the database, we use Patch to reference the GTAVehiclesOwned table, use the Defaults function of the same table to flag that it’s a new item, then provide the two fields for that item: setting the VehicleID to the selected vehicle (stored in our global variable), and GarageID to the selected value from the second dropdown. Once we’ve done that, we will refresh that data source so that the change will update on other screens, and use our local variable created earlier to flag that the pop-up can now be disabled.

 

We need one more button: the Cancel button. Note how I’ve positioned the pop-up window so the vehicle name is still slightly visible; this button will give someone the option to back out of this pop-up if they chose the wrong vehicle. 1) Use the Button option under the Insert menu again, and again 2) rename that puppy. 3) Move the button by clicking-and-dragging, and resize by dragging the edges. Instead of placing this button next to the Submit button, I’m adding it to the upper right corner like a Window Close button. 4) Update the OnSubmit property to the following:

 

UpdateContext({boolPopUpOwnership: false})

 

And finally, 5) update the Text property to say “Cancel” or “X” or something useful for the user.

 

Our pop-up is ready, our button should work if we click it, BUT our pop-up won’t disappear yet. We need to set the visibility of all the controls we have added to match the local-variable Boolean we’ve been turning on and off with various buttons. However, rather than changing each control’s Visible property one-by-one, we can group all of these controls together, then change the visibility of the entire group at once.

1) Select all the new controls by clicking on one, then holding down Ctrl and clicking all the others. 2) Then under the Home menu, choose the Group option under the Group menu.

 

Now that the controls are grouped (you can check by re-expanding the group), you can: 1) ugh, do I really have to say it again? RENAME IT! 2) Set the Visible property to match the “boolPopUpOwnership” variable; when it is true the pop-up controls will all be visible, when it’s false they won’t be. This one you will have to change at the top of the screen; the Visible attribute on the Properties tab is just a toggle switch, but clicking the title Visible will help you find the correct attribute to change at the top of the screen quicker.

 

All done! We can now test the pop-up (F5 on your keyboard or by clicking the Play button in the upper-right) to make sure it appears and disappears by clicking the Money icon on the title bar and the “X” cancel button, how the options in the second dropdown change when the first dropdown is changed, and how the database updates when you click the Add Vehicle button. To indicate ownership of a different vehicle, hit the back arrow on the upper-left and choose a different vehicle.

Thanks for reading! Don’t forget to save your work under File > Save!