Adding Tabs in Forms To Ensure Smooth Rendering of PowerApps

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!