Power Apps CRUD Operations: Business Consultation App [Download Complete Package]

If you want to learn Power Apps, then check out this Power Apps example which explains, Power Apps CRUD operations. This is a business consultation app built using the Microsoft Power Apps canvas app. This app you can download and try it by yourself.

One of our clients recently asked to build a Business Consultation App using Power Apps. We have created an app within the Power Apps canvas App to meet their business requirement. We are adding similar functionality to it.

Business Requirements

A business consultation form in Power Apps is a custom form that allows users to provide information and request a consultation with a business or organization. It typically includes various fields and controls for capturing relevant details from the user, such as their contact information, preferred consultation date, the purpose of their inquiry, etc.

The app will have four screens, according to our business requirements: a welcome screen, an edit/add screen, a details page, and a display screen. The welcome screen contains two buttons that will take you to the edit and details screens, respectively.

Within the Edit screen, the user may input new data and modify the existing data. Similarly, inside the Display screen, the user can review a list of consultations. The app also allows the user to view the specifics of the selected consultation item.

In this Power Apps Tutorial, we will see how to build a Power Apps Business Consultation App and also, we will see how to add a new consultation, how to display the list of consultations within a single screen, how to edit an existing consultation, how to delete a consultation, etc.

Keep continuing the tutorial to build an app to streamline business processes, improve productivity, and reduce manual efforts. Happy exploring!!!

Download the Power Apps CRUD Operations App

As a developer, you can download and try out the business consultation Power Apps app. There will be a read me file with the steps on how to use the app.

Power Apps crud operations

Prepare Data Source and Connect

Before building a Power App, let’s prepare a data source and connect that data source to our app. As a result, we can store new data or edit data to the specified data source.

For this, we have created a SharePoint list based on our business scenarios named Business Consultation having different types of columns such as:

• Single line of text columns
• Number columns
• Date columns
• Yes/no type columns, etc. as shown below:

Let’s build a blank canvas app within the Power Apps and connect the above SharePoint list as a data source to that canvas app.

On the Power Apps canvas app, navigate to Add Data > SharePoint > Choose your connection > Select the list > Connect. As a result, the SharePoint list data source will appear on the Power Apps as shown below:

Now, the SharePoint list will connect to the Power Apps. Next, we will build our app to meet the requirement.

Power Apps Example: Build a Business Consultation App

Below, I have described how to build four different types of screens to convert a single Business Consultation App with all functionalities. Follow the step-by-step guide to start your Business Consultation App.

On the blank canvas app, add four blank screens and rename them as Welcome Screen, Add/Edit Screen, Details Screen, and Display Screen.

• Welcome Screen: The first screen of the app.
• Add/Edit Screen: The second screen is where the user can add a new consultation and edit an existing consultation too.
• Details Screen: The third screen of the app is where the user can see a list of consultations.
• Display Screen: The fourth screen of the app is where it will display all the details of the selected consultation.

Let’s build the Welcome screen.

Business Consultation App- Welcome Screen

Here, we will see how to build a Welcome Screen for the Business Consultation App using the Power Apps.

• Add a background image to the Power Apps blank Welcome Screen.
• Also, add a Power Apps text label control to give a welcome text to the app. (Ex: Welcome to Business Consultation). For this, insert the below text on the Text label’s Text property.
• Set the label’s text alignment as Center.

Text = "!! Welcome !!
                         To
                  Business
              Consultation"

• To navigate to the edit screen, add a Power Apps button control to the above welcome screen and give a name to the button control(Ex: Get Started).
• Insert the below expression on the ‘Get Started’ button’s OnSelect property, navigate to another screen, and appear a new form. (In the Edit screen section, we will see how to work with the Power Apps edit form)

OnSelect = Navigate('Edit Screen') & NewForm(Form1)

Where ‘Edit Screen’ is the name of the Power Apps screen and Form1 is the name of the Power Apps edit form.

• Similarly, add another button control to the above screen and place it beside the ‘Get Started‘ button. Also, rename the button control as ‘View Consultancy‘ and insert the below expression on the button’s OnSelect property.

OnSelect = Navigate('Consultancy Details Screen')

Where ‘Consultancy Details Screen’ is the name of the other Power Apps screen.

Now, we can see the welcome screen will appear as shown below:

This is how to build a welcome screen for Power Apps Business Consultation App.

Business Consultation App- Add/Edit item Screen

Here, we will see how to build an ‘Add/Edit Screen’ within the Power Apps where users can add a new business consultancy from Power Apps to SharePoint data source via a button click as well as edit existing consultation details.

For this, the following steps are:

• On the blank Add/Edit screen, add a Power Apps Image control and expand it on the screen to fit the screen. Also, set the transparency of the screen’s background image.
• Add a Power Apps text label control to give a heading level to the screen. (i.e., Business Consultation Form).
• Next, add a Power Apps Edit form to the above screen and connect the edit form to the SharePoint data source list.
• We can see it will retrieve all the SharePoint data fields to the Power Apps edit form as shown below:

• Next, we will add a button control to the above screen and rename it as Save.
• Insert the below expression on the button’s OnSelect property to submit the data from Power Apps to SharePoint Data source and display a new edit form. Also, it will navigate to the details screen where it will display the details of the inserted item.

OnSelect = If(
    Form1.Valid,
    SubmitForm(Form1) & NewForm(Form1) & Navigate('Consultancy Details Screen') & Notify(
        "Your Business Consultation Process is successfully submitted.",
        NotificationType.Success
    ),
    Notify(
        "Please fill the required fields",
        NotificationType.Error
    )
);

According to the above expression, if the form is valid, it will submit the data to the data source and notify the user via a success message. Otherwise, an error notice will ask the user to fill in the required field to validate the form.

• Similarly, add another button control for cancelation. When the user clicks on the button, it will cancel the inserted data and reset the form again.
• Rename the button control as ‘Cancel’, fill the control with red color, and insert the below expression on the button’s OnSelect property.

OnSelect = ResetForm(Form1); NewForm(Form1)

• Additionally, we will add a home icon to the above screen; so that when the user clicks on the icon, it will navigate to the welcome screen.

OnSelect = Navigate('Welcome Screen')

This is how to build an edit/add screen of the Business Consultation App within the Power Apps.

Business Consultation App- Display Screen

Here, we will see how to build a Display screen for the Business Consultation App. That will display all the business consultations within a single screen via a Power Apps vertical gallery control. Once the consultation data is submitted, it will display in the gallery.

To implement these functionalities, the following steps are:

• On the Power Apps blank Display screen (i.e., Screen 3), add an image control to give a screen background, and set the transparency of the image control.
• Add a Power Apps Text label control to the app screen and give a text to the label control as ‘List of Business Consultations’.
• Also, add a Power Apps vertical gallery to the screen and connect that gallery to the SharePoint list as the data source. As a result, it will retrieve all the saved data from the SharePoint list data source as shown below:

• In addition, we will put the following expression on the ‘Next Arrow‘ icon’s OnSelect property. As a result, when the user clicks on any of the item’s next arrow icons, it will take that selected item to another screen i.e., Details Screen, and reveal all of the gallery item’s data.

OnSelect = Navigate(Display_Selected_Item_Screen)

Where Display_Selected_Item_Screen is the name of the fourth screen of the Business Consultation App.

• In the above screen, we will add a ‘Add user‘ icon and place it on the screen’s header section. It will let the user add a new user from this screen.
• For this, insert the below expression on the icon’s OnSelect property.

OnSelect = Navigate('Add/Edit Screen') & NewForm(Form1);

Where ‘Add/Edit Screen’ is the name of the second screen of the app and Form1 is the name of the Power Apps edit form control.

According to the above expression, when the user clicks on the icon, it will navigate to the ‘Add/Edit screen,‘ with a new form appearing to allow the user to input a new item.

• Similarly, we will add a home icon to the above Power Apps screen that will navigate to the welcome screen when the icon is clicked. Insert the below expression on the icon’s OnSelect property.

OnSelect = Navigate('Welcome Screen')

This is how to prepare a display screen for the Power Apps Business Consultation App.

Business Consultation App – Details Screen

In this section, we’ll discuss how to build a Power Apps details screen for the Business Consultation app, where users can view all of the details of a selected gallery item within a Power Apps details form. It also lets the user modify the item as well as delete it from the data source.

To implement the above scenario, the following steps are:

• On the blank canvas app screen (i.e., Screen 4), add an image control to give a background and set the transparency of the screen.
• Add a header (Ex: Business Consultation Form) to the screen by using a Power Apps Text label control.
• Add a Power Apps Display form control to the above screen and connect the form to the SharePoint list as a data source.

• Insert the below expression on the display form’s Items property. As a result, it will

Items = LookUp('Business Consultation', ID = Consulation_Gallery.Selected.ID)

Where ‘Business Consultation’ is the name of the data source, ID is the name of the data source item ID, and Consulation_Gallery is the name of the Power Apps vertical gallery that we have used in the Display screen.

• To edit an existing or selected item, we will add an Edit icon to the screen and insert the below expression on the icon’s OnSelect property.

Onselect = EditForm(Form1);Navigate('Add/Edit Screen')

As per the above expression, when the user clicks on the it icon it will redirect to the screen where we build the edit form.

• Similarly, we will add a trash icon to delete that selected item from the gallery as well as the data source. For that insert the below expression on the trash icon’s OnSelect property.

OnSelect = Remove(
    'Business Consultation',
    Consulation_Gallery.Selected
);
If(
    IsEmpty(
        Errors(
            'Business Consultation',
            Consulation_Gallery.Selected
        )
    ),
    Set(
        VarBusinessValue,
        Blank()
    );
    Back()
) 

As per the above expression, when the user clicks on the trash icon, it will be removed that selected item from the data source as well as the gallery. Also, it will back to the previous screen (i.e., the Display screen)

• Again, we will add another back icon that will navigate to the Display screen of the Business Consultation app where the list of consultations is visible.
• Add a back icon and place it in the top left corner of the above screen. Also, insert the below expression on the OnSelect property of the icon.

OnSelect = Navigate('Consultancy Details Screen')

That’s it! Now our application is ready. Just save the app and publish it. This is how we can create a multiscreen Power Apps canvas app based on Business Consultations.

Conclusion

From this Power Apps tutorial, we learned how to build a multiscreen Business Consultation app using Power Apps Canvas app. Where we have learned how to add a new consultation record, how to edit an existing consultation item, how to display the list of consultation records, and how to remove a specific record from the data source.

You can download the Power Apps example.

You may also like the following Power Apps tutorials:

• Power Apps Camera Control
• Power Apps Line Chart
• Power Apps Rich text editor control
• How to Parse JSON Object to Array in Power Automate