Building an app from the ground up, data source and home screen

Building an app from the ground up, data source and home screen

In the previous episode we took steps to lay down the foundation for the app we are building from the ground up.  In trying to stay true to process, we worked first on identifying a problem and producing a user-centered design.


Listen to a recording of this post:


From there we created a master and template screen for the mobile portal app. The latter were put in place to allow us to move a bit faster through the build process, so we could quickly create screens that shared a common design. We will see here how that work will now enable us to create screens quickly. We will create the home screen for the mobile portal by duplicating the Master Screen we created previously. But, before we do that, we will get into designing and building our data source.

Even though we are building an app, those traveling with the {low-code} 🚍 will also learn some other skills that make them Microsoft 365 Champions 🦸‍♀️🦸‍♂️🥇.  Of course, to be a champion they will also need to remember that #sharingiscaring.

What are we learning this time around, besides {low-code}? Glad you asked. In our previous builds we have used Excel as our data source. In those cases, not only did we have to enter field names, but we also had to take extra steps to format sheets into tables, rename tables, and create separate tables to populate pull down lists. If we wanted the PowerApps engine to know that a field should contain an image, we had to append ‘[image]’ to the field name so it would create the appropriate type of controls in the app. In the videos below, I introduce you to another way to do things. In this case, after looking at the needed fields to meet the proposed design solutions, we look at how SharePoint lists are a powerful alternative to Excel in creating a data source for PowerApps.  SharePoint lists have been around for a while but have recently become more popular since you can now create and access them from Microsoft Teams.

Let’s look at the data requirements for the Mobile Portal App for the Hammerhead Turtle Co. (HHTC).

Having identified the fields and the types of fields best suited for this project, we can now move forward and build the SharePoint list.

Once the list is in place, we will populate it with some links.

🎓 Learning Note: There are issues associated with SharePoint lists and PowerApps when lists exceed 2000 records. For applications such as this one, this should not be a problem. If you want to learn more about SharePoint lists, take a look at the Microsoft Support document, or the Teams Lists App.

Armed with our PowerApps Master, Template Screens, and data source in SharePoint, we can now proceed to building the Mobile Portal App for HHTC. You will be amazed by how quickly this all takes place.

By the end of this episode, you will have a portal home screen. It will personalized by having taken advantage of the 365 Users data connector. And yes, I am going to say it again, we have completed this without having written any code. Also, I do recognize that we have had to learn things like connecting to data sources, and some functions. But the structure of the latter is relatively intuitive, and soon you will be making educated guesses as you experiment.

🎓 Learning Note: Something to highlight here is the use of dynamic text to identify buttons based on the Item category. If you remember, we have a field called Category that can have values of work, based on how the associated web application has been classified. In the Home Screen Build video, you saw we added a button to indicate the category of the web application. Instead of labeling it with a “hard code,” we pull the category value for the associated item using the function ThisItem.Category.Value. This is a function that immediately makes sense as we read it and it is super practical. If we change the category for an item in the database, the portal is immediately updated, without someone having to re-code it. Pretty awesome.

Stay tuned for the next episode, where we will build the details and edit screens.

In the meantime, keep it {low-code}.

Dr. Carlos Solís is Associate Vice President of the Technology Innovation Office.

Print Friendly, PDF & Email