.: Checking Whether a Signed-In User Has a Specific Web Role in Power Pages

Scenario — You need client-side JavaScript to behave differently depending on whether the portal contact holds a particular Web role (e.g. “My Demographics Access”). Power Pages doesn’t expose Web-role data directly to JavaScript, so you must pass that information from Liquid into the page.

1 Expose a Boolean Flag from Liquid

Add one Liquid block near the top of the page (**Copy [HTML]** section), before any external JS files load:

{%- comment -%}
  Build a comma-separated string of the user’s Web-role names,
  then test whether it contains the role we care about. The result
  is a simple true / false value that JavaScript can read.
{%- endcomment -%}

{%- assign roleString = user.roles | join: ',' -%}
{%- assign hasDemoRole = false -%}
{%- if roleString contains 'My Demographics Access' -%}
    {%- assign hasDemoRole = true -%}
{%- endif -%}

<script>
/* true  → user has “My Demographics Access”
   false → user does not have it */
window.hasDemoAccess = {{ hasDemoRole | json | raw }};
</script>

Why it works

join: ',' converts user.roles into one plain string (\"Administrators,Authenticated Users,My Demographics Access\").
Liquid’s contains performs a straightforward substring search.
| json | raw outputs the literal true or false with no HTML-encoding.

2 Use the Flag in JavaScript

Wrap any role-specific logic in an early-exit guard:

(function () {
  // Exit immediately when the role is missing
  if (window.hasDemoAccess !== true) { return; }

  /* …role-restricted code continues here… */
})();

Need to…	Guard to keep
Run code only when user HAS the role	`if (window.hasDemoAccess !== true) { return; }`
Hide markup when user LACKS the role	`if (!window.hasDemoAccess) { element.style.display = 'none'; }`

3 Debugging Tips

Check the flag in DevTools:
Console → console.log(window.hasDemoAccess); should print true/false.
Role names are case-sensitive — match the display name exactly as it appears in Portal Management → Web Roles.
Place the Liquid block early. Make sure it runs before any JS that references window.hasDemoAccess.

4 Extending the Technique (Multiple Roles)

You can output an object with several role flags:

{% assign roleString = user.roles | join: ',' %}
<script>
window.portalRoles = {
  hasDemo: {{ (roleString contains 'My Demographics Access') | json | raw }},
  isAdmin: {{ (roleString contains 'Administrators') | json | raw }}
};
</script>

Then consume anywhere in JS:

if (window.portalRoles.isAdmin) {
  // admin-only functionality
}

Conclusion
A tiny Liquid snippet plus one global JS variable gives you a fast, server-free way to detect Web-role membership on the client side. It keeps the portal responsive and your codebase clean.

.