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
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"
Getting CSS Class name
Step 3: Once we have our class name then in portal management, under content > Web Pages > Profile
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:
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
-
Hide a specific element in the Power Apps portal Profile page using JavaScript
@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();}}); -
Hide a specific element in the Power Apps portal Profile page 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 ?
-
Hide a specific element in the Power Apps portal Profile page using JavaScript
Thank all for helping me to hide some element on my portal using Javascript
-
Hide a specific element in the Power Apps portal Profile page using JavaScript
-
Hide a specific element in the Power Apps portal Profile page using JavaScript
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.
-
Hide a specific element in the Power Apps portal Profile page using JavaScript
Thank you very much
-
Hide a specific element in the Power Apps portal Profile page using JavaScript
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
*This post is locked for comments