Hourly Consulting
Maintenance
Training
Implementation
Microsoft Power Pages
D365 & Power Platform
Websites & Web Applications
Blog
Power Pages Tips
Portals Community Call
Power Apps Portals: Where You Put Your JavaScript Matters
Nicholas Hayduk
January 9, 2020
2 Min.To Read
One of the most frustrating things that can happen when developing any type of software is when you’ve got the code correct but, due to it being in the wrong place, it doesn’t work as you’ve expected. A recent question on the community forums highlights the importance of putting your JavaScript in the right place.
Background
In my series on where you can (and should) put your HTML, CSS, Liquid and JavaScript I covered the various places where you can put code. In general, I like to put in the most specific place possible – for example, if you write some JavaScript for your Entity List, use the Custom JavaScript attribute on the Entity List as opposed to the one on the Web Page you are putting the list on. However there are cases where it isn’t so straight forward to figure out where to include your required JavaScript.
Authentication-Related Pages
Let’s say you want to use JavaScript to modify the appearance of the Sign In page. All of the authentication pages are created using ASP.NET MVC, and don’t follow the Web Page paradigm. This means there is no Web Page record that you can put your JavaScript into the Custom JavaScript attribute. So where do you put your code?
In this case there are magic snippets you can create to add your own code to the authentication-related pages (including JavaScript):
- Account/SignIn/PageCopy
- Account/Register/PageCopy
- Account/RedeemInvitation/PageCopy
Keep in mind that these are generic snippets that will get dropped in the HTML, so you need to wrap any JavaScript in <script> tags.
Other Functionality Built in MVC
There are other areas in the Portal that are also built in MVC where you can’t put code in a Custom JavaScript attribute. For example, you won’t find Web Page records for Discussion Forums.
In this case, a technique I’ve seen people use is to put the JavaScript in the header or footer, and then look at the URL of the page to determine if they want their JavaScript to run or not. This is not ideal since then the JavaScript needs to be processed on every page load, although admittedly it’s not a huge performance hit, and you don’t have a lot of other options, since magic snippets don’t always exist.
Not All Web Templates Are Created Equal
In the forum post that originally inspired me the original poster wanted to customize the appearance of the search results page.
To do this, they wrote JavaScript (that was completely correct), and placed it in the Search Web Template. Nothing happened.
Well actually, something happened – a JavaScript error. Specifically, $ is not defined. This tells us that jQuery isn’t defined, or at least not defined when we tried to use it. Power Apps Portals includes jQuery, so why would we get this error? Because of where jQuery is included.
jQuery is included after the Header Web Template. And guess where the Search Web Template is rendered? That’s right – as part of the header. The name is a bit deceiving – you might think the Search Web Template is used to render the search results, but instead it is used to render the search box that appears in the header.
So once the original poster moved the code into the Custom JavaScript attribute of the Search Results Web Page, it worked as expected.
So the lesson here is that if you need jQuery, don’t include your JavaScript in the header.
[…] post Power Apps Portals: Where You Put Your JavaScript Matters appeared first on Engineered […]
Hi there!
I want to offer you big thumbs up for a great article.
The JavaScript code is not supported in a PowerApps canvas app directly. In addition, you could consider create a custom PCF control into your canvas app, within the PCF control, you could execute some JavaScript/TypeScript codes.
I tend to deploy most of my Javascript as web files so they can get cached by the browser.
Anything critical like fonts, JS dependencies I tend to put in the “Head/Fonts” content snippet because those get rendered in the header before the body with everything else.
Everything else non-critical I but in a new web template that is appended to the footer web template.
In terms of JS on the authentications pages I’ll definitely keep those content snippets under consideration as I currently execute JS for those pages in the footer or header like you mentioned above with a URL check.
Hi, thanks for the great posts,
I’m trying to hide the download button based on the user’s role, I tried adding to the web template the following code but nothing happened, when adding it on the web page it does get hidden, is there any way I can add it on the web template so I can add a condition based on the users roles?
$(document).ready(function(){
{
$(“.entitylist-download”).hide();
}
})
Yes! Use Liquid to conditionally add the JavaScript to the page.
So something like:
{% if user.roles contains ‘Name of Role’ %}
$(document).ready(function(){
{
$(“.entitylist-download”).hide();
}
})
{% endif %}
Nick
Thank you for sharing this informative article on Power Apps portals and the importance of the proper placement of JavaScript. As a Power Apps developer, I found this article to be insightful and helpful in understanding the best practices for using JavaScript in Power Apps portals.
I appreciate the explanations of the different ways to add JavaScript to portals, such as using Web Files or Entity Form/Entity List forms. It’s important to consider the specific use case and requirements when deciding where to add JavaScript, as you pointed out.
I also found the examples and code snippets in the article to be clear and easy to follow. It’s helpful to see practical examples of how to implement JavaScript in Power Apps portals.
good article, I’m a beginner using powerappstools
i need instructions, how to add a button and when clicked open a new web page ( open URL )
It sort of depends on where you want to add the button. Usually that would be done with an anchor tag:
Button Text
By adding the “btn” class, or even “btn btn-primary” it will transform your hyperlink into a button.
Nick