PowerApps show hide fields based on Yes/No column

In this PowerApps tutorial, we will discuss PowerApps show hide fields based on the Yes/No column.

when the user selects Yes from the Yes/No field, then one more field will be visible else the field will be hidden.

• Create a canvas app from Excel in Power Apps (Step by Step tutorial)
• Create a Data Table from Excel Data using Power Apps

PowerApps show hide fields

Here, I have created a SharePoint List “BookDetails” and added the below columns:

• Title
• Author Name
• More Information(Yes No Column)
• Price
• Language
• Binding
• Publisher
• Genre
• ISBN
• Pages

Now we will see how to create a PowerApps form.

Type PowerApps.com in the browser. Sign In with Office 365 credentials. Select the “Apps” tab. Click on “Create an app”->Canvas.

Choose Tablet Layout from the Blank app template.

Now designing page will open where we can design our PowerApps Form.

Now Add a Screen From Insert -> New screen -> Blank.

Add one More screen. Rename the Screen1(Default Screen), Screen2 and Screen3 as “New Screen”, “Gallery Screen” and “Details Screen”. To rename the screen just double click on its name.

Select “New Screen”. Add “Edit” form control from Insert -> Forms -> Edit.

After The Edit form successfully added to Screen we can see under “New Screen”. Now we need to connect to the SharePoint list from “Properties” -> Data source -> “Add a data source”.

Now the Data source page will come. This page will be shown you different data source options. I have selected the SharePoint.

Connect to a SharePoint site page will open where we can enter the site URL or choose from Recent sites.

After passing the site URL, we will get all the List Names. Select on “BookDetails”. Click on Connect.

After connecting to the list the form control will display all the fields. From Columns, we can choose the number of columns. Here I have selected 2 so all the fields are coming 2 columns.

Add a button control from Insert->Button. Set its text property to “Submit”. Submit button Onselect write the below formula

SubmitForm(Form1);Navigate('Gallery Screen',None)

The “SubmitForm()” is a method used to save the form data to the SharePoint list. We need to pass the form name inside the SubmitForm().

Navigate() method is used to navigate to a different screen. We need to pass the screen name inside the Navigate(). After the screen name, we need to pass the transaction type. Here I have mentioned None transaction type.

New Screen -> OnVisible -> NewForm(Form1). When we will play the PowerApps form, the form control will behave as a newform because I have used the NewForm() function.

Select the “Gallery Screen”. Go to Insert->Gallery->Blank vertical.

Connect the Gallery control to SharePoint Book Details List. We can give the connection from “Properties”->Data source.

Choose the Layout to “Title, subtitle and body”.

Gallery control next Icon write the below:

Select(Parent);Navigate('Details Screen',ScreenTransition.None,{SelectId:Gallery1.Selected.ID})

Select the “Details Screen”. Add the Display control from Insert->Forms->Display.

After adding the Display Control we will get the “FormViewer1” under Details Screen. Connect to SharePoint BookDetails List.

Select on the “FormViewer1”. on its Item property write like below:

First(Filter(BookDetails,ID=SelectId))

More Information is the Yes No field whose data card name is “DataCardValue3”. So we write the rule on the “Price” field “visible” property:

If(DataCardValue3.Value=true, true, false)

Write the same rule in all the fields which you want to hide when yes no column is disabled.

Language Field visible Property write

If(DataCardValue3.Value=true,true,false)

I have written the same rule in “Binding”, “Publisher”, Genre, ISBN, Page field visible property.

Now we need to set the submit button position. When the yes no column is disabled the Submit button position will change. So in the X-axis of Submit button I wrote:

If(DataCardValue3.Value=true,1177,1168)

On the Submit button, Y-axis wrote

If(DataCardValue3.Value=true,538,180)

Now we need to change the NewForm Title column text property. So first we need to unlock the Title data card from “Advanced”-> Unlock.

I have selected the “Title” then in its text property I wrote “Book Name”.

Output

When we disabled the yes no column all the fields are hiding.

The Submit button will navigate to the Gallery control screen. When we will click on the next Icon the details screen will open.

Below is the Details screen.

You may like following PowerApps tutorials:

• PowerApps Functions Tutorial
• Export PowerApps from one Tenant to another Tenant
• Working with PowerApps Collection
• How to create tabs in PowerApps in SharePoint Online List Form
• PowerApps navigate between screens
• PowerApps: Create a navigation menu using the Gallery Control
• PowerApps Employee Engagement Survey Example
• PowerApps Media Control
• PowerApps submit form to SharePoint Online list
• Display SharePoint Online List Columns in multiple screens in Microsoft PowerApps
• Microsoft PowerApps: Create Login Screen
• PowerApps Replace Function with examples

This tutorial, we learned how to show hide fields based on conditions in PowerApps.