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:
👉 On-Demand Learning Courses FREE Trial: www.pragmaticworkstraining.co...
🔗Pragmatic Works On-Demand Learning Packages: pragmaticworks.com/pricing/
🔗Pragmatic Works Boot Camps: pragmaticworks.com/boot-camps/
🔗Pragmatic Works Hackathons: pragmaticworks.com/private-tr...
🔗Pragmatic Works Virtual Mentoring: pragmaticworks.com/virtual-me...
🔗Pragmatic Works Enterprise Private Training: pragmaticworks.com/private-tr...
🔗Pragmatic Works Blog: blog.pragmaticworks.com/
Let's connect:
✔️Twitter: / pragmaticworks
✔️Facebook: / pragmaticworks
✔️Instagram: / pragmatic.works
✔️LinkedIn: / pragmaticworks
✔️KZbin: / pragmaticworks
Pragmatic Works
7175 Hwy 17, Suite 2 Fleming Island, FL 32003
Phone: [phone]
Email: [e-mail]

[@zahrabatool5617]

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

[@PragmaticWorks]

I appreciate that!

[@kolaadebayo1]

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?

[@AmeerHamza-zr4nn]

Hey Brian! Great Work man. Really Appreciate it.

[@PragmaticWorks]

Glad you liked it!

[@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?

[@user-ri7fo6tp5e]

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

[@PragmaticWorks]

Exactly, it would all have to go there or in the page itself for larger examples.

[@Arsalkhan433]

Nice

[@joshvince3701]

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.

[@juanc.villegas9111]

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.

[@arslanarif3403]

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

[@macavamedia5746]

I would also like to know how to hide/show sections based on a multiselect drop down or a checkbox. I cannot find anything anywhere on how to do this. Thanks

[@trivenichaganti3403]

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

[@AdiCristea]

Thanks, Brian, so much flexibility using JavaScript. One question though, for those unfamiliar with JavaScript: showing/hiding fields couldn't be done with a Business Rule on the Entity (yeah, Table) used in your Form?

[@PragmaticWorks]

Unfortunately not yet. Business rules won't apply to Portals applications. This might come at a later date but good grief, that would make things so much easier!

[@AdiCristea]

@@PragmaticWorks Thank you for replying. In this case, there goes out of the window the "with Dataverse you can set your Business Rules on the Entity level and it's being cascaded down to all apps that are using that Entity".

[@PragmaticWorks]

@@AdiCristea LOL. I'm sure it's coming but not yet.

[@stefanpfadt4353]

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.

[@Emanuel-fu4cf]

This is awesome, do you have any suggestions if I want to hide the "Edit" button based on the "Status" column for each record on a view? Thanks in advance!

[@HyderabadiEmraan]

Yes i added the liquid code in Edit button, let me know if you need any more - i know its a late to comment on it but it is for reference to other user, thanks

[@Deepakbadoni1274]

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

[@Gamers-yv2dn]

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 ?

[@kobiwonkenobi]

Hi, did you ever find a solution for this?

[@mohamedaffi3816]

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

[@anthonyleduc]

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

[@BGivo]

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

[@octaviusrice4674]

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?

[@andrewdowning5687]

Brian - Thanks for creating this video. Very helpful. I've noticed the 'onDisplaySectionChange' alert only works on initial load. Changing values does not produce an alert. Any ideas?

[@andrewdowning5687]

I figured it out! You have to use the 'logical name' which should be all lower case. In your video you show the 'schema name' column which is slightly different.

[@PragmaticWorks]

Yes, you're correct! Great job there.

[@sheezahafeez6202]

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

[@chrishagen9014]

Hi Guys any tips on how to do exactly the same thing with a lookup field ?

[@ronykhati2342]

Thanks Brian. I'm creating a power app portal site for my company and am a little disappointed with the documentation to name just one thing. I've been trying for the past 2 days to find the header part of the index.html file but not sure where it is. I'm looking to see something like this so I can insert fontawesome and bootstrap scripts in it... any clue ?

[@Anonymous-md6xd]

kzbin.info/www/bejne/aKqTpqR7lsx_pqc

[@HyderabadiEmraan]

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

[@mariusz9374]

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 ?

[@PragmaticWorks]

Nothing better yet but hopefully we eventually get business rules there (no word there yet on this from MS).

[@gatskopsoftware8357]

Hi Brian! how can I move the attachment control at the bottom to somewhere else of the power page

[@PragmaticWorks]

Unfortunately, to move this, you'd have to venture outside the realm of standard forms and potentially use Liquid. Another option is to use a File Data type, which is now supported. You could put that wherever you want on the form.

[@victoriafonseca7979]

Como puedo descargar y trabajar sobre ese formulario?

[@kmuralikrishna1582]

Hey really good.. Do you have any playlist for PowerApp portal apps from scratch..?

[@PragmaticWorks]

Sure do. Check out our Learn Power Apps playlist on our channel.

[@andrewwoo2902]

Hi Brian, How tomodify the below code for this if my #prag_manufacture is a yes/no field (boolean) var varManuf = $('@/prag_manufacturer').find("option:selected").text(); Thank you in advance

[@birsingh1285]

Hi Andrew, are you able to figure out ,how to read the booleantype field ? Thanks

[@andrewwoo2902]

@@birsingh1285 not able and i have give up

[@josegregoriodiazvasquez1871]

Did you find a way to do it? I would like to do the same :) and it seems that Brian is not answering also.

[@scottjames4461]

Hi Brian. Hope you can help. I've copied what you've done, in Power Pages but I just cant get Javascript to work. Even simply hiding a field on a form I can't get working and I've copied from your tutorial. It's like it doesn't run the Javascript and thinks its just text maybe. IS there some other setting? This is an advanced form and the 'cd12_PowerSupplyType' is a column name in my table. I'm going to post in the forums, but thought I'd try here. $( document ).ready(function() { $("#cd12_PowerSupplyType").change(onDisplaySectionChange); onDisplaySectionChange(); }); function onDisplaySectionChange() { var varWST = $('#cd12_PowerSupplyType').val() alert(varWST) }

[@scottjames4461]

OMG I got it to work! Incorrect case I think. Fresh eyes on a different day :)

[@PragmaticWorks]

I wish I can say I haven't done that but been there countless times.

[@andrewdowning5687]

@@scottjames4461 You have to use the 'logical name' of the field which should be all lower case. I had the same issue.