I am quite excited about the project upon which we are about to embark. I think that those who hang through this will definitely be some of the most awesome 365 Champions 🦸♀️🦸♂️🥇, especially if they remember that #sharingiscaring.
Listen to a recording of this post:
This part of the {low-code} 🚍 journey will guide you step-by-step through the design and build process of an app. We will not be using templates, but the awesome PowerApps engine that powers the {low-code} 🚍 will do a lot of the heavy lifting and generate all the code. From our side, we will take several steps before we get to the app assembly line. We will follow some basic design steps outlined below:
- Identify a problem.
- Propose a solution.
- Create a wireframe based on user feedback to visualize our concept.
- Create a template screen for the app.
- Create a master screen based on the template screen.
- Identify the dataset fields for the app, both the necessary and the “would be nice” ones.
- Select a data platform.
- Create a data source.
- Create the app, from Home Screen to Details Screen to Edit Screen.
While we sometimes create just for the sake of creating, or to learn how to do something, it is best to focus on a problem to solve. In our case, the fictional Hammer Head Turtle Corporation (HHTC) is a growing company that uses several online tools and websites as part of its daily operations. Staff members have expressed their frustration with having to hunt down links all over the place, and management would like a simple environment where all HHTC online business tools are accessible to all users, all the time. However, HHTC is also worried that they may spend money and time developing a solution, but few people will adopt it.
After a number of focus groups, Team Social Cats proposes the following solution: An HHTC Mobile Portal, the equivalent of the old web portals, should be developed using {low-code} to minimize time and resource investment. Focus groups made it clear that it was more likely that HHTC would see a high level of adoption if users could customize the app, allowing them to add personal work tools to their version of the portal and even some personal life links. This would ensure that they would always have the app portal handy. Focus groups also stated that they wanted to have a search function and a filter to make finding what could be a long list of items more usable.
This video covers steps one through three. Creating a wireframe of the app is an important step in the prototyping process that helps potential users get an idea of the design, and guide the development team in their first rendering of the app.
With the wireframes in hand, Team Social Cats can now start building. They have decided to build their first iteration of the HTTC Mobile App portal in landscape format. This makes it easy to use on a desktop computer and a mobile device, such as a tablet or iPad.
To develop the app, we will use a similar approach to Cascading Style Sheets (CSS), which is used to manage colors, fonts, icons, etc., in web development. In our case, we will create a Template Screen to define size, color, and location for a header bar and font and color for screen title, company logo, and colors for icons. From there, we will create a Master Screen with the same header, text, and graphical elements. Rather than defining the characteristics again, we will point to the properties of each element on the template screen. Once we complete the Master Screen, we can make a duplicate of it, and the duplicate will also be pointing at the Template Screen to derive properties. So, in this HHTC Mobile portal, we will make copies of the Master Screen to create the Home Screen, the Details Screen, and the Edit Screen.
This will appear to be tedious at first. Still, the advantage of doing this is that when you have multiple screens where you define the same attributes or properties repeatedly, you will have a cookie cutter in hand that will save time and effort and help keep things consistent. If you make a change to one, you will not have to then make the change again in all the other ones. In addition, the development of a new screen becomes quite a breeze. Further, you can use the Master Screen-Template Screen duo to create similar apps for other users, so you can quickly repurpose the whole thing. This is one of those things that, the more you use it, the higher the payback in the initial investment of time.
In this episode we will stop at the completion of the Master Screen-Template Screen duo. We will build the data source and the Home Screen in the next one. You will be amazed by what you can do with functions and no code. 🤩
Dr. Carlos Solís is Associate Vice President of the Technology Innovation Office.
