Power Apps: Using Collections
Microsoft Power Apps is a suite of applications, services, and a is also a data platform. The best use of the Power Apps is that it offers a rapid development environment to build custom applications as per the business needs. Power Apps are extremely useful when your business user needs a customized application instantly as per the need e.g. Construction Supervisor needs an application where he needs to enter in and out time of Construction worker. A Doctor just needs a small and handy application where he can enter medicine subscribed details to the patient. In these cases, although we can provide a web interface application or may be a mobile application to such business users, but these types of apps take a time to develop with high interactive UI using various server-Side as well as Front-End technologies like ASP.NET Core, Angular, React, etc. But what if the customer only needs a simple but yet powerful UI application with desired functionality? The Power Apps is the solution for it.
To develop Power Apps, we need the Power App Subscription. Please visit this and this link to grab more information about it.
The Power Apps is a part of the Microsoft Power Platform. This platform has Power Apps, Power BI, Power Automate, Power Pages, etc. Power Apps applications can connect to data stored in Microsoft Dataverse, a data platform or many online data stores e.g. Azure SQL and other Cloud Databases as well as on-premises data sources e.g. SharePoint, SQL Server, etc.
In this article, we will design and develop the Power Apps application that uses Collections. In Power Apps, the Collections are used to store data that is stored in our Power App Application.
Power Apps Collections
- A collection in Power Apps is essentially an array that holds data in memory. This data can be used within the app, and it can be saved to various data sources e.g. Excel, Databased as well as SharePoint.
- The Application can use the collection to perform Read and Write Operations. We can also perform advanced operations on collection like Grouping, Joining and Summarizing data.
Let's create the Power Apps application.
Step 1: Open the browser and enter the URL as https://make.powerapps.com. Enter the credentials. The Power Apps Page will be displayed with the default environment as shown in the Figure 1.
Figure 1: The Power Apps Landing Page
Step 2: Click on the Blank app, this will open the Dialog Box where it shows various options to create Power Apps application as shown in Figure 2.
Figure 2: The App Creation Dialog Box
we have following options to create Power Apps
- Blank canvas app
- This can be used to design the application from scratch. Here we can design UI with Drag-Drop of controls.
- Blank app based on Dataverse
- This can be used when we have Tables created in Microsoft's Data Platform that is Dataverse. We can have various tables, Views, and Forms created in Dataverse to create a Model-Driven application.
- Power pages website:
- This helps to create a website with no code for internal and external users.
Step 3: To create Canvas Application, click on the Create button of Blank canvas app. This will open the Dialog box where we can enter the App name and app format as shown in the Figure 3.
Figure 3: The App Name
This will take time to create the application. Once the application is created, we can design the UI. We will be creating a Visitor Management application for a Office use where the app will collect data of VisitorName, Address, CommingFrom, ContactNo, PersonToVisit, and the DepartmentName. We will create 3 Screen application to show List of Visitors, Add Visitor and Edit Visitor.
Step 4: The browser will show the app created with a default screen in it as shown in Figure 4.
Figure 4: The App with Default screen
As shown in Figure 4, we have area where we have list of App Screens and Components in the application. The area for App design is where we can drag-drop controls. We have app control, area where we have options for Control Properties, Save and Preview (Running) the application. We can write the formula for data processing and setting properties for controls using the Formula Expression area. We can select the Properties and Events for the controls from the Event and the Property area. We can view all controls, click on +Insert where we can see list of controls those, we can use to design the UI. Figure 5 shows list of controls.
Figure 5: List of Controls
We have general purpose controls like TextInput, Button, Label, etc.
Step 5: To use the collection we will use the formula to define collection at application level. Click on the App in the screen area and select the OnStart from the Event and Property area event behavior. In the formula expression enter the following formula for defining the collection as shown in Listing 1.
Collect(Visitors, {
VistorId:0,
VisitorName:"",
CommingFrom:"",
City:"",
MobileNumber:0,
ContactPerson:"",
ContactDepartment:"",
Purpose:""
});
Listing 1: The Collection formula
The Collect() method is used to define the collection. This method has 2 parameters. The first is the collection name and the second is the collection schema item properties. We need to initialize these properties. This will create a default record in the Collection.
Rename the 'Screen1' to 'VisitorList'. On this screen add The Vertical Gallery control from the +Insert menu. The moment the Vertical Gallery is added on the Screen, the Data option will be shown with the Visitors collection in it as shown in Figure 6.
Figure 6: The Data Options in the Vertical Gallery
Once the Visitors collection is selected the Vertical Gallery will be shown with its child UI Controls as shown in Figure 7.
Figure 7: The Vertical List with Child UI Controls
From the Vertical Gallery, delete Subtitle, Image1, and NextArrow1 controls. Copy and Paste the Title two times. Name the Title1 as VistorName, Title1_1 as ContactPersonName and Title1_2 as CommingFrom. Each entry in the Vertical Gallery is referred using the ThisItem object. Bind the VisitorName to ThisItem.VisitorName, ContactPersonName to ThisItem.ContactPersonName and CommingFrom to ThisItem.CommingFrom as shown in Figure 8.
Figure 8: The Vertical Gallery Binding to Collection
Modify the VisitorList Screen by Adding Label and set its Text property to The Visitor Management List also change its Font Size, Color and Background color as shown in Figure 9.
Figure 9: Adding Label to the Screen
Step 6: Add a new Blank Screen in the App by clicking on the + New screen option. Name this screen as AddNewVisitor. Design this screen by adding TextInput and TextLabel Controls as shown in Figure 10.
Figure 10: The AddNewVisitor Screen
Here we have designed the screen to capture visitor's information. We will be using this screen to add new visitor's information.
Step 7: Visit back to the VisitorList screen and add + icon on the screen next to the Screen Title label The Visitor Management List. We need to change the color of this icon to yellow. Figure 11 show the design. Name this icon as icon add.
Figure 11: The navigation icon
On the OnSelect event of this icon add the code as shown Listing 2 to navigate to the AddNewVisitorScreen acreen.
Navigate(AddNewVisitor)
Listing 2: Navigate to the Add Visitor Screen
This code will navigate to the AddNewVisitor screen. The Navigate() formula expression will be used to navigate to the other screen.
Step 8: Visit back to AddNewVisitor screen and change the name of the TextInput to the label terxt shown on the screen. E.g. TextInput for label Visitor Id will be named as txtvisitorid. The button Save and Back to List will be named as btnsaveandbacktolist. The button Reset as btnresetform. The left arrow on this screen will be named as arrowback as sown in Figure 12.
Figure 12: The AddNewVisoitor screen names for control
On the OnSelect event of the Save and Back to List button, add the code shown in Listing 3 to add new record in the Visitors Collection.
Collect(Visitors, {
VistorId:Value(txtvisitorid.Text),
VisitorName:txtvisitorname.Text,
CommingFrom:txtcommingfrom.Text,
City:txtcity.Text,
MobileNumber:Value(txtmobilenumber.Text),
ContactPerson:txtcontactperson.Text,
ContactDepartment:txtdepartment.Text,
Purpose:txtpurpose.Text
});
Navigate(VisitorList)
Lising 3: The Code to add new record in Visitors collection
The code shown in Listing 3 uses the Collect() function that accepts tow parameters. The first parameter is the collection name, and second parameter is the record this record has the schema of the data aka record to add it into the collection. This record reads values entered in TextInputs. Since the default type of the value entered into the TextInput control is string. we need to use the Value() function to convert string type data to the number data type. Once the data is stored into the collection the navigation will takes place to the VisitorList screen.
When the AddNewVisitor Screen is loaded we need to clear all TextInput so on the OnVisible event of the AddNewVisitor Screen as well as to Clear all TextInput controls on this screen on the Reset button's OnSelect event add the code as shown in Listing 4.
Reset(txtvisitorid);
Reset(txtvisitorname);
Reset(txtcommingfrom);
Reset(txtcity);
Reset(txtmobilenumber);
Reset(txtcontactperson);
Reset(txtdepartment);
Reset(txtpurpose);
Listing 4: The Code for Resetting all TextInputs
The Reset() function will be used to reset values entered into the TextInput controls. On this screen, on the Left Arrow icon's OnSelect event to navigate back to the VisitorList screen as shown in Listing 5.
Navigate(VisitorList)
Listing 5: The VisitorList Navigation
Step 9: Visit back to VisitorList screen and on the The Visitor Management List label add the X icon. We will use this icon to clear the Visitor List. We will change the color of this icon to yellow. Figure 13 shows the UI. We need to change the name of this icon to iconclear as shown in Figure 13.
Figure 13: The Visitor List Delete Icon
On the OnSelect event of this icon we will add code to clear the Colloection as shown in Listing 6.
Clear(Visitors)
Listing 6: Code to Clear collection
The Clear() function accepts the collection name as input parameter. This collection will be cleared using the Clear() function.
Step 10: Save the application, visit bavk to VisitorList screen and run it by clicking on the command palate as shown in Figure 14
Figure 14: The Save and Run the application
The Visitor List screen will be loaded as shown in Figure 15.
Figure 15: The Visitor List
Click on the + button, it will navigate to the Add Visitor Screen where we can enter the Visitor Details as shown in Figure 16.
Figure 16: The Add New Visitor Screen Data Entry
Once the Save and Back to List button is clicked, the Visitor List will be displayed as shown in Figure 17.
Figure 17: Visitor List
Please note that the first row is empty because which we have created collection, we had the empty schema in the collection. See Step 5.
Step 11: Now we will start working on the Edit feature for the record. To do this, select the first record in the Vertical Gallery of the Visitor List screen and add the Edit icon on the first record, this will automatically generate Edit icon for all records as shown in Figure 18.
Figure 18: The Edit Icon
Rename the Edit icon to editicon. We will use this icon for editing the record and navigation to the EditVisitor screen.
Step 12: Since the EditVisitor screen is same as AddNewVisitor screen, copy the AddNewVisitor Screen by right clicking on the AddNewVisitor screen and select Duplicate screen option this will generate new screen with same UI on it, the option is shown in Figure 19. Rename it to EditVisitor.
Figure 19: The Screen Duplicate
Change the Text of the New Visitor label to Edit Visitor, the EditVisitor screen will be shown in Figure 20
Figure 20: The EditVisitor Screen
Please note that the note of each TextInput element will be suffixed by _1 e.g. txtpurpose_1 also each label name is also changed same for the button name will also change.
Step 13: To show the record to be edited, we need to add code for the Edit button on the Visitor List screen. Visit back to the Visitor List screen and on the Edit icon button's OnSelect event we will add formula expression for defining the global variable using the Set() function, to this function we will pass two parameters. The first parameter is the Global Variable name, and second parameter is the data that is stored in the Global variable. Since the Edit icon button is part of the record in Vertical Gallery, the selected record's value will be stored in the ThisItem property. Once the Global Variable is declared we can navigate to the EditVisitor screen with the selected record (ThisItem). The code in Listing 7 shows the code.
Set(Visitorrecord, ThisItem);
Navigate(EditVisitor, ScreenTransition.Fade,ThisItem)
Listing 7: The Global Variable and the Navigation
The second parameter of the Navigate() method is the screen transition effect to load the EditVistor screen.
Step 14: To show the selected visitor data into the EditVisitor screen, navigate back to the EditVisitor Screen and for each of the TextInput control and sets its Default property to the property of the collection as shown in Figure 21
Figure 21: Setting the default property for TextInput
To edit the record from the collection, add the code as shown in Listing 8 in the OnSelect event of the Save and Back to List button.
/* Update the Collection */
Patch(Visitors,
LookUp(Visitors, VistorId=Visitorrecord.VistorId),
{
VisitorName:txtvisitorname_1.Text,
CommingFrom:txtcommingfrom_1.Text,
City:txtcity_1.Text,
MobileNumber:Value(txtmobilenumber_1.Text),
ContactPerson:txtcontactperson_1.Text,
ContactDepartment:txtdepartment_1.Text,
Purpose:txtpurpose_1.Text
}
);
Navigate(VisitorList);
Listing 8: The Edit Code
The code in Listing 8 shows that we have used the Pacth() Method, this method accepts the first parameter as the Collection Name, since the update needs the record to be searched, we are using the LookUp() method as a second parameter to the Patch() method. The LookUp() method search the Visitor record from the Visitors collection based on the VisitorId. Once the record is found, then its property values will be replaced by the values entered in the TextInput controls.
Since the EditVisitor screen is a duplicate screen of the AddNewVisitor screen, the code for the Left Arro Icon and the Rest button will be as it is. (The code for the Reset button will use the new named for the TextInput elements).
Step 15: Visit back to the VisitorList screen and add the Cancel (X) Icon before Icon and name it as deleteicon. On the OnSelect event of the deleteicon add the code shown in Listing 9 to remove record from the collection.
/*Delete the Record from the Colection */
Remove(Visitors,ThisItem)
Listing 9: The Delete Record Code
The Figure 22 shows the VisitorList with Delete Icon
Figure 22: The Delete Button on the VisitorList Screen
Run the Application and Test all Functionality.
Conclusion: The Power App offers an easy mechanism to build End-User Interactive applications rapidly. The Collections provides an In-Memory storage to hold that data that can processed from the Applicaiton UI.
