Tabular Forms in Power Apps
What is a form?
Forms are used in a canvas app to collect and display data from a database.
There are two types of Forms:
Edit Form
View Form
In this blog I will only be discussing an edit form
What is a Tabular Form?
A tabular form is a just a simple form that is broken into parts and tabs are made to access each part.
A tabular form is mostly used for big forms that donot fit on a single page. A Tabular Form can make your app UX much better and it also saves space.
Have a look at the following Tabular Form i made so that you can get a hint of what we're building today:
I'm gonna show how to make this form, Lets Begin:
Step 1:
Insert a Large Form on your Page,
Insert > Form > Edit Form
Add all the fields you want. Resize your form according to your design. Set a background color so that the form is more prominent.
Add two buttons back and forward. to switch between the tabs.
From the Properties bar on the right side. change the column number to "2"
It should look something like this:
Step 2:
Now we're gonna create tabs. We'll use a gallery control for the tabs as it is a much better approach and its easier to maintain.
Go to Insert > Gallery > Horizontal Gallery
Adjust the gallery to the space
Step 3:
Now we need a data source for the gallery. For that we're gonna create a collection on OnStart property of the app.
Use the following code:
ClearCollect(
colTabs,
{
Name: "Form 1",
Value: "1"
},
{
Name: "Form 2",
Value: "2"
},
{
Name: "Form 3",
Value: "3"
}
);
Now run Onstart.
And connect this colTabs to the gallery. and change the layout to blank.
Step 4:
Now select the Pen icon on the left top corner of the gallery to select the first column.
Insert a button inside the gallery
Go to Insert > Input > Button
Change the button's "X" & "Y " properties to "0".
Change its Height to Parent.TemplateHeight
Change its Width to Parent.TemplateWidth
This will make the button responsive to the gallery template size
Step 5:
Select the gallery and change its templatesize property to the following:
Self.Width/CountRows(colTabs.Name);
This will make the tabs responisve even if you add a new tab it wont cause distortion
Now Select the gallery and set its Template padding to "0"
Select the button inside the gallery and change its border and border radius to "0"
Change the button's Text property to ThisItem.Name
Write the following code on Onselect Property of the button:
Set(varFormPage, ThisItem.Value)
Change the Color Property of the Button to:
If(ThisItem.Value = varFormPage, RGBA(56, 96, 178, 1),White)
Change the Fill Property to:
If(ThisItem.Value = varFormPage,White, RGBA(56, 96, 178, 1))
Now the Tabs should look like this:
Step 6:
Now Select the Next Button and write this code on its onSelect Property:
Switch(
varFormPage,
"1", Set(varFormPage,"2"),
"2", Set(varFormPage,"3"),
"3", SubmitForm(Form2);Navigate('Tabular Form');ResetForm(Form2)
)
Now select the Back Button and write this code on its onSelect Property:
Switch(
varFormPage,
"1", Navigate('Tabular Form'),
"2", Set(varFormPage,"1"),
"3", Set(varFormPage,"2")
)
Step 7:
Time to divide the form into partitions
There are many ways to achieve it but according to me the best approach is to simply add a if statement to the columns of the form...
Write the following code on the columns you want to be visible on the first tab:
If(varFormPage="1",true,false)
Write the following code on the columns you want to be visible on the second tab:
If(varFormPage="2",true,false)
Write the following code on the columns you want to be visible on the third tab:
If(varFormPage="3",true,false)
Step 8:
Write the following code on the onVisible property of the page so that whenever a user opens this page the default tab is tab 1.
Set(varFormPage,"1")
Thats it... Heres the result:
Go ahead and test your buttons and tabs.
In the next Blog I'll show how to design a good looking Tabular Form:
If you liked this blog don't forget to subscribe for more content like this.
Feel free to ask questions and give suggestions in the comment box down below:
Comments
Post a Comment