cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
ragavanrajan
Most Valuable Professional
‎11-04-2021 02:28 PM

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