Introduction:
If you are familiar with PowerApps, then you must already know how inconvenient it is when the PowerApps form contains too many fields in one screen. This overcrowding results in reduced usability when fields are rendered. In this blog, we will teach you how you can solve this issue by using tabbed forms. Let’s dive into it.
Create a list
Before creating a corresponding form in PowerApps, we must first create a SharePoint list. For the purpose of this blog, we have chosen A Student Information Gathering List. The name of the list is “Student_Info”
The list contains the following columns:
Create a PowerApp
Create a new PowerApp and design it as shown below. The “Student Info", "Parent Info,” and “Addresses” are the buttons with the “Border radius” of about 17. There are two styled labels, the “Student Information Gathering Form” and “Please Enter Address” labels.
Adding Functionality
In the “OnSelect” functionality of the “Student Info,” enter the following code:
The different columns of SharePoint will have the show and hide functionality based on the value of the variables.
In the “OnSelect” functionality of “Student Info” enter the following code
Set(
StudentInfo,
true
);
Set(ShowText,"Please Enter Student Info");
Set(
ParentsInfo,
false
);
Set(
AddressInfo,
false
);
In the “OnSelect” functionality of “Parent Info” enter the following code
Set(
StudentInfo,
true
);
Set(ShowText,"Please Enter Student Info");
Set(
ParentsInfo,
false
);
Set(
AddressInfo,
false
);
In the “OnSelect” functionality of “Parent Info” enter the following code
Set(
StudentInfo,
false
);
Set(
ParentsInfo,
true
);
Set(ShowText,"Please Enter Parent Info");
Set(
AddressInfo,
false
);
In the “OnSelect” functionality of “Addresses” enter the following code:
Set(
StudentInfo,
false
);
Set(
ParentsInfo,
false
);
Set(
AddressInfo,
true
);
Set(ShowText,"Please Enter Address Info");
In the “Text” property of Second Label, enter the “ShowText” variable asshown below:
As is shown above the text value of the label will change based on the variable “ShowText”. When the three different buttons are clicked, the text value of the label will change accordingly.
Create An Edit Form
Add an Edit Form as shown below.
Connect Form
Connect the form to the “Student_Info” list.
Change Form mode from Edit to New
The form is in “Edit Mode” by default, we must set its mode value to New, as shown below.
Designing The Form
Design the form according to this form so that it looks pretty and is easy to manage.
Change The Visible Property of The Form’s Cards
To change the Visible functionality of different columns in the form, perform the following steps
Set the “Visible” property of the cards that deal with Addresses to “AddressInfo” as shown below.
Set the “Visible” property of the cards that deal with Parent Info to “ParentsInfo” as shown below.
Set the “Visible” property of the cards that deal with Student Info to “StudentInfo” as shown below.
Now the form has become tabbed. By clicking on different tabs, the user can navigate between different fields.
Submitting The Form
Now that we have made the form tabbed, we must also add the functionality to submit the form.
Add a button and set its “Text” value to “Submit Student Form”, set the “OnSelect” functionality of the button to
SubmitForm(Form3);
This will submit the form data to the SharePoint list.
Conclusion:
In this blog we discussed how users can create tabbed forms so that the PowerApps are rendered smoothly. If you have any questions or insights, please leave a comment below!
Happy implementing!