Today is a special day. We are completing the build of the Hammerhead Turtle Co. mobile portal app. The {low-code} 🚍 journey is reaching a major milestone. Wow, what a journey it has been!
Listen to a recording of this post:
And the Microsoft 365 Champions 🦸♀️🦸♂️🥇 that have been part of it should feel pretty awesome with this whole new set of superpowers.
Let’s get going because we are going to build three major elements. First, we will learn how to sort things alphabetically. This is a property we will define for the BrowseGallery in the home screen of the app. In other words, we will sort the applications that the app launches, by name. If you recall, the items in the BrowseGallery are defined by the Items property. We tell the App where the items are stored, and we use the Fields property, to tell it which fields to display in the BrowseGallery. To sort the items, we will use the SortByColumns command and instruct the app where to find the things we want to sort, by which column we want to sort it, and whether it should be done in ascending or descending mode. In the case of our app, it will look like this:
Items = SortByColumns(‘HTTC Portal Data’,”Title”,Ascending)
This means: in the BrowseGallery show the Items contained in the HTTC Portal Data[table] sorting them by the Title column, Ascending.
Check out this video to see it in action.
In the previous step we modified the Items property by ‘wrapping’ it with a SortByColumns command. That was quite simple and intuitive. The next leg of the journey is probably the most complex piece of this build.
This step, is a lot more complex because we want the items presented sorted by Title in ascending order, but only after they have been filtered by the Selected Category Value and narrowed down by the content of the Search Box. Wow, this is like wrapping a chalupa, in a gordita in a burrito. Or, a TurDukEn! Wow.
The whole property of the Items specification is broken down below. There are a few values that we define with app controls, that are worth mentioning here:
- We created a drop-down list, Dropdown1, to hold the categories value.
- We created a text input, SearchBox, to contain our search criteria targeting the title field.
- We pointed the Filter function at Dropdown1.
- We pointed the Search function to the SearchBox content.
SortByColumns(
Search(
Filter(
‘HTTC Portal Data’,
If(
Category.Value = Dropdown1.SelectedText.Value,
true,
Dropdown1.SelectedText.Value = “None”
)
),
SearchBox.Text,
“Title”
),
“Title”
)
See the whole process in action in this video.
Now that we have finished those two stages, it feels like the application is complete. But we can still improve it by re-examining the interface. The top feels cluttered and has some impractical elements to it, which can impact adoption. So let’s take a look at how to reduce clutter and make it more usable and attractive. Just deleting a couple of pieces that serve no real function will create more space. Also, playing around with the font size will give the user some breathing room.
Once we complete those pieces, we will also look at how we can adjust colors. For example, using a conditional statement, and assigning them based on category. After adding a bar at the top of each element in the BrowseGallery, we will assign it a color based on the category using the Fill command below.
Fill=If(ThisItem.Category.Value=”Work”,DarkGreen,ThisItem.Category.Value=”Tools”,IndianRed,GoldenRod)
What the above statement says: if that, for the decorative bar element, make the Fill DarkGreen if the Category is Work, make IndianRed if the category is Tools, or make the Fill GoldenRod it the Category is neither of the previous ones.
The video above introduces you to the ColorFade command to define Fill or Color. The video also shows you how to continue to take advantage of our Master and Template work earlier, to modify fonts and colors easily.
Like every journey, which has taken some time, and a number of things have taken place, getting to the end is both fun and sad. It is also hard to remember all that has happened, so, in the next episode, we will do a recap to make sure we can take in all the lessons learned. In the meantime, give yourself a pat on the back, because this build had a lot of elements in it. I hope you gained an appreciation of how much is possible by embracing the low code journey. Until next time.
Dr. Carlos Solís is Associate Vice President for the Technology Innovation Office.
