Using JavaScript in Power Apps Portals to Hide and Show Fields

In this video, you'll see how to integrate JavaScript into Power Apps Portals to show and hide fields based on another input. With this same method, you can also do field validation and masking.

Code used in this video to show and hide the other manufacturer field based on a drop-down selection:

$(document).ready(function () {
$("#prag_manufacturer").change(onDisplaySectionChange);
onDisplaySectionChange();
});

function onDisplaySectionChange() {
var varManuf = $('#prag_manufacturer').find("option:selected").text();

if (varManuf === "Other") {

$('#prag_othermanufacturer').parent().parent().show();
}
else {
$('#prag_othermanufacturer').parent().parent().hide();
}
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - -

Next step on your journey:

Let's connect:

Pragmatic Works
7175 Hwy 17, Suite 2 Fleming Island, FL 32003
Phone: [phone]

[zahrabatool]

Thanks, Brain. You are doing an awesome job for the Power Portal community. kudos!

[AmeerHamza-zrnn]

Hey Brian! Great Work man. Really Appreciate it.

[kolaadebayo]

Hi Brian! Thanks for the great work you do with your videos. I see you use jQuery functions in the code, this implies jQuery is supported natively in Power Apps Portals. Is that a correct understanding/assumption?

[trivenichaganti]

@Pragmatic Works how can we hide/show tabs or sections in portal using Entity/webform

[sheezahafeez]

Please add more videos on Power Web pages, where we can filter another entity list based on item selection in 1st entity list

[mohamedaffi]

Question: can you add a simple text in the form ? simple description text, ? with javascript

[juanc.villegas]

Thank you for this. I've been trying to extract the value as you are but from a lookup and I almost lost my mind. It seems to be done more easily using a dropdown instead.

[joshvince]

Hi Brian, thanks a lot for this video, was very much what I was looking for! I'm now wondering if there is a way to clear the field value if it is then hidden again? In this example, if I
1) select other
2) type some text in the newly available field
3) select a different option

The result is that whatever I wrote in the 'other' field still gets saved. I anticipate that later down the line I might want to use this technique with different types of fields and also do some sort of conditional logic which might be confused if there is some indecision when the user fills in the form.

[HyderabadiEmraan]

how to read the hidden fields value, the value is undefined when i call any hidden fields from javascript.

[anthonyleduc]

Hi, It's working for a dropdown filed but not if the source fied is a radio-button choice. Very strange

[ileanaxxv]

Hello Brian! This video helps me a lot! Thank you! But I still have a question... what if I need to mark this field/column as a required too?

[victoriafonseca]

Como puedo descargar y trabajar sobre ese formulario?

[Deepakbadoni]

hey Brian! I want to ask one query i want if i select yes in radio button then field is show other wise hide

[mariusz]

I wonder whether we still need to use javascript in Portal Management to show/hide form fields on pages or is there a better way of doing this in Power Pages ?

[BGivo]

Would it be possible to fire off some JS calls to an external API there to get some data?

[arslanarif]

Hey Brian! excellent video and very helpful for a number of our requirements. Have you had any experience with showing or hiding a section on a form? we have a requirment where we want to hide one or more sections based on the dropdown choice the customer makes? Regards

[stefanpfadt]

Awesome!
Can I hide fields based on Wordpress user role?
I have a search form and want to hide fields depending on what role the user has.

[rifotpe]

Hey Brian! Watched all your portal videos a few times. Great stuff!! I was wondering where would I put bigger JavaScript code snippets, or could I place it all on the relevant webform step

[octaviusrice]

trying to come up with a way for us power app for car rider dismissal at my school is that something that you can do a video on to help me with?

[Gamers-yvdn]

Thanks Brian! One quick question, looks like the following example does not seems to work for choice fields with multiselect enabled. Tried several ways to bind change event, it does not work. Do you have an idea ?