You’re offline. This is a read only version of the page.
134
Hi Everyone,
We have a powerapps portal.
For some webpages, we have input Custom css or Javascript in advanced settings.
Is there any method to conclude those inline css and Javascript in each page into 1 custome css or javascript file?
I tried copying selector for an element in Chrome developer mode, but there seems to be no "webpage identifier".
So got stuck in how to specify a change to a specific webpage in a custom css or Javascript file.
Hi @Audreyma ,
Let's keep it simple.
1. In every web page HTML add your CSS custom class. The example below is provided for you.
2. upload your custom.css file
3. For Javascript. In the same custom.css file add <script> tag and match the URL route. (Check the example below)
There is no other way to conclude. Otherwise, you have to stick with the design or upload your web files
------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
Sorry, actually I don't quite understand it.
For css, do you mean that I need to change each page class name by adding ".myCustomClass"? If yes, how to do it?
For javascript, how can I know which function belongs to which page with the code you provided?
You possibly may be able to do it by creating a 'dummy' Web Page and use that for the Parent Page on the Web File records. Then on each page
Share
Report
All responses (
Answers (
<script src="/myPageShortname/myWebfilenameame.js"></script>Believe its technically not correct to do the same with a link tag for the CSS (as it should go in the head), but believe most browsers support it.
You could possibly also get creative with custom Web Templates and then wrap the entity form etc in your own DIV and then make your CSS global but specific to your Div's id etc (but there is probably a lot of extra CSS work)
Hi @Fubar
Sorry, I'm afraid that is not what I want.
For example, I have 3 webpages: Webpage A, Webpage B, Webpage C.
In each page, I have some custom css and Javascript code in advanced settings.
I want to create only 1 custom css file or 1 custom javascript file for all 3 webpages to reflect their customized settings.
If you want files but want them to only be available on 1 page then:
Remembering that common CSS such as H2 etc will probably need an !important added to override the bootstrap /custom CSS
Sorry for my poor explanation.
What I want to conclude is the custom css and Javascript code which I set in Portal Management→Web Page→Advanced.
Hi @Audreyma ,
If my understanding is right, below is an example of how to conclude CSS in each page into custom.css file
Step 1: Example Web page: Test1
Below is the sample section HTML
<div class="row sectionBlockLayout myCustomClass" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px; background: rgb(127, 202, 235);">
<div class="container" style="display: flex; flex-wrap: wrap;">
<div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;">
<p style="font-size: 36px;"><b> Testing Custom css</b></p>
</div>
</div>
</div>
Here: on the first line of HTML ".myCustomClass" is added in class property
Step 2: In custom.css
.myCustomClass{
background-color: #97D600;
}Now the CSS will be effective. You can also try id(#myCustomId) if you like
For your second query. In custom.css file add your <script> tag and below is the example
$("A").each(function () {
if (this.href == document.URL) {
$(this).addClass('active');
}
});Additional references:
https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/
------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
Thank you for your reply.
I know we can upload custom.css file.
But don't know how to conclude css in each page into a custom.css file.
About css, if the customization is only for the specific webpage, it can only be placed in that page, right?
And about document.URL property, is it the webpage identifier, which I can use to make Javascript applied to specific page?
Could you give me a more detailed example about how to apply change to a specific page?
Hi @Audreyma ,
If you don't prefer Web pages custom CSS or custom javascript. Then you can try the following method.
In portal studio:
1. Click Themes > Upload custom css
2. Upload a file called "custom.css" screenshot below
Note: In some place, CSS precedence is a must. Ex: 1. Web page 2. Entity list 3. Custom css.
For Javascript, you can try writing your script inside the same custom.css file with <script> tag.
Again JavaScript should be placed on every web page if you need page customization. Only common things can be placed here in this script. And this is the best practice too.
Additional: You can try grabbing the document.URL property which will return the current route. Ex: "https://testhub.powerappsportals.com/contractData/" > Then you can place your javascript if the URL path is matched.
Hope it helps.
------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
#1
Lucas001
60
Super User 2025 Season 1
#2
Fubar
55
Super User 2025 Season 1
#3
surya narayanan
35
