How to perform CRUD Operations in Power Apps

How to perform CRUD Operations in Power Apps

•  
• Prathamesh Dhopare
•  
•  
•  
• Nov 10, 2024

 

•  
•  
• 283
•  
• 0
•  
• 1
•  
•  

 

Introduction

The best way to manage records within a custom app is to implement a CRUD application in Power Apps. The core of data management systems lies in CRUD operation, which means Create, Read, Update, and Delete. Using Power Apps, you can create an intuitive application that facilitates performance of these functions with efficiency to provide a streamlined experience in managing student details. In this article we will explore implementing CRUD functionality in Power Apps, converting raw data into an interactive user-friendly application.

Scenario

In this case, we will develop a student management application from which the staff will be able to view and manage the records of students. The app will include options such as adding new student details and including those in the list, viewing lists, updating records, and deleting entries in case they are needed for removal. This functionality is most suitable for educational institutions that have a central management solution for managing student information with minimal technical setup and maintenance.

Objective

In the following article, we'll walk through how to create a CRUD application in Power Apps to manage student information. Thereby, you will gain an understanding on how to set up basic CRUD operations with a Power Apps application, design intuitive screens for add, view, update, and delete actions of student records, and finally implement validation and user feedback to make the usability of the app comfortable for the end users.

By the end of this article, you will have created a fully functional student management CRUD application and learned how to use Power Apps to create effective data management solutions.

To build this solution we will need the following key controls and components.

• Forms-To capture and update student information
• Galleries-To display a list of student records
• Icons and Buttons-To navigate and for CRUD operations.
• Data Source: The students' data can be a SharePoint list, an Excel table, or some other approved data source for recording the data of the students.

Step 1. A SharePoint list is created.

Make a new SharePoint list to hold the training information.

Step 2. Connect to Data Source.

Include the data source ‘Student Information’, which is a SharePoint list.

Step 3. Design the screen and Build the First Gallery.

Add a label and its title, as shown in the screenshot below.

Click on Option Insert and Add text label

Add a Blank Vertical gallery.

When we add the gallery, the Gallery prompts us to add its data source. Then Connect it to our SharePoint list which is Named Student Information in my Case.

After selecting the data source, the gallery will be blank as shown below. It will not add anything because it is a blank gallery. To show data we would need to add labels. To add labels first select the gallery and then click on that Pen-like label and then from Insert add 3 labels. Once we add labels, the title or any other column will be linked by default. The screen will look like as shown below. In the below screen, three of the values on the gallery label are shown which are coming from the list Title column value.

Step 4. Add a Form on the Screen to Enter Student Information.

After the above process now add the Form from the Insert section and Connect it to the SharePoint List that we have created then on that Form automatically data fields will be shown that are Name, Email, and Phone as shown in the below Screenshot.

Now in your form, if you want all fields compulsory filled only at that time the Submit button is enabled then you have put this Below Formula on OnChange Property of DataCardValue of Name, Email, and Phone.

Before that, you have to put this formula on the OnVisible screen.

UpdateContext({ isProfileValid: false });

JavaScript

Copy

After this, You have to add this Formula on Every OnChange Property of DataCardValue of Name, Email, and Phone.

UpdateContext({
    isProfileValid: !IsBlank(DataCardValue1.Text) &&
                     !IsBlank(DataCardValue2.Text) &&
                     !IsBlank(DataCardValue3.Text)
});

JavaScript

Copy

Also, one thing if you Validate the Email Datacard field means you want Emails to be Entered only in this Format ___@____.com.

then you can use this Formula.

If(
    !IsMatch(DataCardValue2.Text, "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$"),
    Notify("Enter a valid email address", NotificationType.Error)
)

JavaScript

Copy

Same with the Phone we can also use the formula for Validation that Digits should be exactly 10 Digits

If(
    !IsMatch(DataCardValue3.Text, "^\d{10}$"),
    Notify("Enter a valid 10-digit phone number", NotificationType.Error)
)

JavaScript

Copy

you can see in the above Screenshot that if the Data Fields in the forms are Empty or not filled then the Submit button is Disabled and if you fill all the Fields completely then the Submit button gets Enabled to Submit the Student Information

Now if you want to Submit the Details into the SharePoint list that you have created then You have to add one Button as shown in the Above Screenshot and give a name to Submit on the Text Property of the button.

you have to Put this Formula OnSelect property on the Button.

SubmitForm(Form1);
If(
    Form1.Valid,
    Notify("Record updated successfully!", NotificationType.Success);
    Navigate(Screen1, ScreenTransition.Fade)
);
ResetForm(Form1);

JavaScript

Copy

SubmitForm is used to Submit the Entered Details and ResetForm is used to clear the DataFields in the form that you have entered so that when you go to add new Data at that time form Should be Blank.

Step 5. Add 4 Buttons to Perform CRUD Operation.

Now you must add 4 buttons to Perform CRUD operations that are New, View, Edit, and Delete as shown the below Screenshot.

Now you have to add a formula on the OnSelect Property of each button respectively.

New button

ResetForm(Form1);

JavaScript

Copy

NewForm(Form1);

JavaScript

Copy

View Button

ViewForm(Form1);

JavaScript

Copy

Edit Button

EditForm(Form1);

JavaScript

Copy

Delete Button

Remove(
    'Student Information',
    Gallery1.Selected
);

JavaScript

Copy

I have added one Screenshot for reference of how to add the above formulas.

Step 6. Add Search Bar.

Now if you must add a Search Bar to find the student's records then you have to add one Input TextBox as shown in the image.

Now you have to use the Below formula on the Items property of Gallery which you have Added.

Item’s Property of Gallery.

If(
    IsBlank(SearchBar.Text),
    'Student Information', // Show all records when search is empty
    Filter(
        'Student Information',
        StartsWith(Name, SearchBar.Text)
    )
)

JavaScript

Copy

For reference, I have added the below Screenshot.

Conclusion

Building this basic CRUD app will be a great way to start with Power Apps and understand how it can help you to control your data. With this knowledge of the basics, you're now ready to discover more and get started building even bigger and more powerful apps. Power Apps lets you build tools that fit different needs, and more importantly, after practice, you will end up developing even more helpful solutions for projects. Keep learning, and you will soon see just how fantastic Power Apps is!