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"
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.