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

[Audreyma]

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.

[ragavanrajan]

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.

[Audreyma]

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?

[ragavanrajan]

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.

[Audreyma]

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.

[Fubar]

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

[Audreyma]

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.  

[Fubar]

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)

[ragavanrajan]

Hi @Audreyma 

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

[Audreyma]

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?