Hello All

Today I will be building more of the basic layout for the remaining screens for my gardening app. I'll do the 2 view list screens first and then the edit screens that they link to. I'm starting to realise through this process that there may be changes I'll need to go back and make to my database to account for how certain functions will work but that's ok. That is part of the process of building an app and I will make any changes as required through building and testing processes until I'm happy with the end result.

For the basic layout of the view list screens I want to use a gallery component which will list the entries in a table and I want to have some kind of separator between each item. To do this I add a rectangle icon into my gallery, set it's height to 2 and it's width to be equal to the gallery it is in. For the placement it is important to note that the X and Y values of any components within a gallery are relative to the item or template within the gallery not the screen. Within the gallery settings you can see settings for Template size and Template padding, these affect the size and padding of each item listed within the gallery rather than the overall size and padding of the gallery. Because this is a vertical gallery the template size relates to height where if it was a horizontal gallery it would relate to width.

Screenshot of the plant list gallery showing the template size default formula resulting in a template size of 280 while the height of the overall gallery is 1036

So if I set the X value to 0 the rectangle will start at the left edge of the gallery even if the gallery is not aligned with the left edge of the screen and for the Y value I use a formula to take the template height of the gallery and subtract 2, the height of my rectangle, so that the bottom of the rectangle is flush with the bottom of each item. Now even if I decide to change the height of the template so I can fit more details the rectangle will move relative to that.

Screenshot showing the rectangle component with its Y value set relative to the template height

My next step is deciding what data I want to show on this screen and adding label components both to contain the data and also for titles of what each data item is. For example, last time I added a bunch of labels with data from the Individual Plants table but I didn't bother to add descriptions of what the data was so now I have a screen which shows 2 different names and 2 different dates, I can figure out what the names are meant to represent but the dates could be in relation to any of the many date fields in the table. I may also want to change the format of these dates just to save a bit of space.

Screenshot of view plant list with cleaner labelled data

I have added separate labels for the titles of each field so I could format the titles differently to the data and renamed the components so that I know what each one is rather than having them listed as Label_1, Label_2, etc. The final component I need to add to this screen is an edit icon on each gallery item to allow the user to go to the edit screen for that particular plant. For this I am simply going to add the Edit icon into the gallery and add the Navigate formula into its OnSelect property.

Screenshot of edit icon addition with OnSelect property set to the default of selecting the parent with the navigation to the edit screen added after that

Rather than repeating all these steps manually for the view species screen I am going to copy this gallery onto that screen and change the names of the components and what tables and data they point at. As you can see in the below I ended up changing the sizing of a few things as some of the fields are longer and I had to use a different formula to get data out of the multi-choice field for the sow period.

Screenshot of view species screen showing concat formula to get all selected values for the sow period

For my 2 edit screens I want to not only have the edit forms but also the ability to view additional detail from other tables based on the selected item. To make this possible I need a scrollable screen with multiple sections. The default blank screens that I created for these screens early on does not have this capability and it can not be added using any of the items in the Insert toolbar. The only way I have found to add this ability to an existing screen is to create a new scrollable screen and copy the Canvas component across to the screens you want to have this functionality on.

Screenshot showing Canvas component copied onto existing Edit Species screen from new scrollable screen

I then set the Y values of these canvas components to 100 and deleted the new screen as it was no longer needed. At this point I'm going to need to look a bit more into how these scrollable screens work and how I can create a form within it as when I try using the toolbar at the top to add a form it adds it outside the Canvas. I want to see if I can copy the existing forms I used for the add screens but I may just need to recreate them and copy any relevant formulas. This will be a task for next time.

Now for the real question, how much info is the right amount to include on these screens so that they will have what is needed but also not get so bulky I can't be bothered scrolling all the way through them?