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.

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
powerapps show hide fields
powerapps show hide fields

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.

powerapps show hide fields
create canvas powerapps

Choose Tablet Layout from the Blank app template.

powerapps conditional visibility
powerapps templates

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

powerapps conditional fields
powerapps desktoppowerapps desktop

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

powerapps visible if condition
powerapps add new screen

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.

powerapps show hide fields
powerapps rename screen

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

powerapps conditional visibility
powerapps forms

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”.

powerapps conditional fields
connect powerapps form to sharepoint list

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

powerapps visible if condition
connect powerapps form to sharepoint list

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

powerapps show hide fields
connect powerapps form to sharepoint list

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

powerapps conditional visibility
connect powerapps form to sharepoint list

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.

powerapps conditional fields
snap to columns powerapps

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.

powerapps visible if condition
powerapps button submit form

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.

powerapps show hide fields
powerapps new form

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

powerapps conditional visibility
powerapps add gallery

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

powerapps conditional fields
powerapps gallery control connection

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

powerapps hide field based on dropdown
powerapps gallery control layout

Gallery control next Icon write the below:

Select(Parent);Navigate('Details Screen',ScreenTransition.None,{SelectId:Gallery1.Selected.ID})
powerapps visible if condition
gallery.selected powerapps

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

powerapps hide button
powerapps display form item

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

powerapps visible if statement
powerapps display form item

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

First(Filter(BookDetails,ID=SelectId))
powerapps show hide fields
powerapps filter display form

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.

powerapps conditional visibility
powerapps-show-hide-fields

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.

powerapps conditional visibility
powerapps conditional visibility

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)
powerapps visible if condition
PowerApps change button control position

On the Submit button, Y-axis wrote

If(DataCardValue3.Value=true,538,180)
powerapps hide field based on dropdown
PowerApps change button control position

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

powerapps visible if condition
powerapps unlock datacard

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

powerapps hide button
powerapps unlock datacard

Output

powerapps visible if statement
powerapps show hide fields

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

powerapps conditional visibility
powerapps conditional visibility

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

powerapps show hide fields
powerapps show and hide list items

Below is the Details screen.

powerapps show hide fields
powerapps show hide fields

You may like following PowerApps tutorials:

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

>