Hello All

In my last blog I talked about setting up the database for my gardening app. Today we will be building the interface in Power Apps.

I'm going to start by making sure I'm in the same environment that I set my database up in. Then going to the Create section in Power Apps and selecting Canvas app from blank. I then have to choose between a tablet or phone format and give the app a name. Since I will mostly be using the app on my phone while working on my plants I will select the Phone format.

Screenshot of Create Canvas app from blank screen with Phone format selected and app name of My Garden App

It will take the builder a minute to load, once it does you should see your new app with a single blank screen. I now have to decide how I want to layout my app in terms of screens and then how each screen will be organised. Based on the functionality I decided I wanted previously I will want the following screens.

  • Main/Home screen
  • Add plant screen
  • Add species screen
  • Add schedule screen
  • View plant list screen
  • View/edit plant screen
  • View species list screen
  • View/edit species screen
Screenshot of Power Apps editor with Screens added

Now that I have the screens I believe I'll need I have to figure out how they link to each other and what functions will be on them.

  • The Home screen will be the landing page when I first open the app so it will need to provide links to all of the add screens and the view list screens. Each of those screens in turn will have a link back to the home page and a menu that allows access to each other.
  • The Add Plant screen will have a form with all the fields necessary to create a new record in the individual plant table and a submit button. It will also have a link to the Add species screen as part of the Species ID field.
  • The Add Species screen will have a form with all the fields necessary to create a new record in the plant species table along wil a submit button and a link to the Add schedule screen as part of the water, pruning and fertilising schedule fields.
  • The Add Schedule screen will have a form with all the fields necessary to create a new record in the schedule table and a submit button.
  • The View Plant List screen will have a gallery containing records from the individual plant table where there is a next water date filled in, with the ability to sort and filter by various fields. Each record will have a link to the View/Edit plant screen.
  • The Edit Plant screen will show extended information on the plant by linking information from the plant species table. Only the fields from the individual plant table will be editable from this screen, there will be a link to the Edit Species screen for those fields. There will also be a button to remove plant from scheduling so that I won't get notifications for plants I no longer have.
  • The View Species List screen will have a gallery containing all records from the plant species table, with the ability to sort and filter by various fields. Each record will have a link to the View/Edit species screen.
  • The Edit Species screen will show extended information on the species by linking information from the schedule table. Only the fields for the plant species table can be edited here, there will be a link to the Add Schedule screen if a new schedule is required.

With all of this in mind my first step is to get all of the basics on the page and then I can move things around to look nice later. As I add each component I will rename it with what is, and the component type and screen it's on shortened. For any buttons which are for navigating between screens I will add the functionality at the same time.

Screenshot of HomeScreen with column of buttons with Add Plant button selected with component name AddPlant_B_HS and a navigate expression in the OnSelect formula

In order to see what my galleries looks like properly I need to add some test data into the tables which I will try to do as I build the Add screens. As this is turning out to be somewhat complicated I'm going to focus on the Add screens today and then do the others next time.

In order to add data, based on how I've set up my table structure it needs to be added in a certain order. That is first the schedule since it is not dependant on any other table, then the species as it is dependant on at least one schedule existing and finally the individual plant as that is dependant on the species existing. For the Add schedule screen this is easy as it is just the 3 fields required to add a records to that table. Because I already set the datepart options in my database they are already available in the dropdown.

Screenshot of Add Schedule Screen showing form with 3 fields and a submit form button

The Add Species screen gets a little more complicated because it needs to refer to the list of schedule IDs for certain fields and also needs to add options for blank schedules for 2 of the 3 fields and an option for adding a new schedule for each. To do this I will create 2 different collections, one which includes the blank and one which doesn't. Collections are created when some action is taken in the app, either starting the app or when a button is pressed. Because I want to be able to add schedules it will need to be based on a button press, so I will add the formula to clear and collect the collection each time a button is pressed which will take me into the Add Species screen. To do this I use the below formula where for the first collection the custom items are added before the regular items so that the default will be the blank record and for the second collection the custom item is added after.

ClearCollect(fertPrunSched,{crbbb_scheduleid:""},{crbbb_scheduleid:"Add new schedule"},ShowColumns('Plant Schedules',"crbbb_scheduleid"));ClearCollect(waterSched,ShowColumns('Plant Schedules',"crbbb_scheduleid"),{crbbb_scheduleid:"Add new schedule"});Navigate(AddSpeciesScreen,Fade)

I then need to go and add the collection to the list of items the user can select from when adding a species.

Screenshot showing the fertPrunSched collection as the Items for the Pruning Schedule field

The final step of this is to make sure that when Add new schedule is selected the user is directed to the Add schedule screen and then can come back to this screen. To do this I added a formula to the OnChange property to say that if it was set to Add new schedule to navigate to the Add Schedule screen and modified the submit form button to clearcollect the schedules then take me back to the screen I was previously on.

Screenshot showing OnChange formula to navigate to Add Schedule screen if the selected value is Add new schedule

I then follow similar steps for setting up the link between species and individual plants. Since that is all done, I can now enter some data so that I have some to work with when setting up my galleries for the list view screens and data to be viewed in the edit screens.

Screenshot of initial gallery showing some data on a basil plant that has been entered

Since I'm going to work on the remaining screens next time I will save my app to the cloud and publish the current version so more data can be added in preparation for setting up the galleries.

Now for the real question, how many parts will this garden app blog end up having?