How to conclude inline css and Javascript set in each webpage into a custom css and Javascript file?

(0) Share

Report

Posted on by Audrey Ma

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.

Categories:

Power Apps portals

I have the same question (0)

All responses (10)

Answers (0)

ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Audrey Ma 134 on at

Like (0)

Report

Hi @ragavanrajan
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?

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

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

Was this reply helpful? Yes No
Audrey Ma 134 on at

Like (0)

Report

Hi @ragavanrajan
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.

Was this reply helpful? Yes No
Fubar 8,340 Super User 2025 Season 2 on at

Like (0)

Report
If you want files but want them to only be available on 1 page then:
Create your CSS and JS files,
For each file
Create a Web File record and set its Parent Page to the page in question (leave it empty for globally available)
Attach the file as a Notes attachment to the Web File record
Remembering that common CSS such as H2 etc will probably need an !important added to override the bootstrap /custom CSS

Was this reply helpful? Yes No
Audrey Ma 134 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Fubar 8,340 Super User 2025 Season 2 on at

Like (0)

Report
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
<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)

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

Hi @Audreyma

Pls check the example which I have shared that will definitely suit your need.

Was this reply helpful? Yes No
Audrey Ma 134 on at

Like (0)

Report

Hi @ragavanrajan
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?

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

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.

Was this reply helpful? Yes No