cancel
Showing results for 
Search instead for 
Did you mean: 
ragavanrajan

Hide a specific element in the Power Apps portal Profile page using JavaScript

Step 1: Log in to the portal and click the "Profile" page 

 

ragavanrajan_0-1636058144028.png

 

 

Step 2: Once you are on the profile page. Say for instance if you need to hide "Change Email" then right-click and inspect the element and get the CSS class name. In our case it is "list-group-item" 

 

ragavanrajan_1-1636059709820.png

Getting CSS Class name 

ragavanrajan_2-1636059812220.png

 

Step 3: Once we have our class name then in portal management, under content > Web Pages > Profile 

 

ragavanrajan_3-1636059999067.png

 

Step 4: Inside the profile page > select "Localized Content" and your page name, then click Advanced and under custom JavaScript. Write the following code 

Key: Your JavaScript is only effective if you write it under "Localized Content" 

 

 

 

$(document).ready(function() {
console.log(555, "JS-hiding elements");
$(".list-group-item:nth-child(2)").hide();
}); 

 

 

 

 

Step 5: Hit Save and Close 

 

In Portal Studio: 

1. Sync configuration and browse the website. Press Ctrl + F5 for a hard refresh 

 

Output: 

ragavanrajan_4-1636060560407.png

 

Note: Hiding JS element is not restricting users to access the "Change Email" Address direct URL. It will be a separate implementation to protect routes. 

 

In-depth of the above article. Please check the video below 

 

Hide a specific element in the Power Apps Portal Profile page using JavaScript 

 

Free pack of Power Apps portal and Power Platform cool stuff. Please consider subscribing by clicking here

 

Free pack of deep-dive sessions of Power Platform powered by key experts and MVPs.  Please consider joining the "Auckland Power Platform User Group"

 

 

 

Comments

I have provision a power pages site, I want to hide both sign up and redeem invitation buttons from the all users. but I don't want to disable it. Can anyone give me tips or show me how to achieve that. I will be happy

HI @SirJames 

If you don't want to disable it. The above implementation is still applicable and you can find the element id and follow the same logic to hide it. 

 

Kind Regards

Ragavan

@SirJames Hello, you will have to update these 2 settings as "false" (through Site Settings).

 

Screenshot_1.jpg

Thank you very much 

 

Please I need help to add a carousel to the home page of my powerapps portal. I tried to add the it in the portal studio but it did not work. Any help for me. 

@SirJames I found one nice article here. Hope it will help you. Remember, In Portals you can have custom html, javascripts code just like any other web application, provided pieces are kept and connected in a correct way.

Thank all for helping me to hide some element on my portal using Javascript

 

 

Please I need help on customizing the portal sign in page.  I want to customize the sign in page to look like the image below. Please any guide for me ?

 

Screenshot 2022-08-10 050209.png

 

Hi @SirJames 

 

Pls, raise it in the Power Pages forum. 

Certainly happy to help. Discussing different topics will create ambiguity for other users. 

@SirJames I couldn't find a direct web template for Sign-In customizations. But you can customize it with script in the "Header" web template (using JQuery). You can try updating content with something like this. For ex: this script hides Register section from Sign-in page.

 

$(document).ready(function () {
var url = window.location.href.toLowerCase();
if(url.indexOf("/signin") > -1)
{
// to hide register section
$("#content").find("ul li:eq(1)").hide();
}
});