Display elements based on Member Roles

Discussion Ask a question
,
1

I’ve been trying to make a page that displays different elements based on different users’ member roles. I have several collapsed strips with different info based on the roles I’ve created. I have the roles typed exactly as I have them in the Dashboard.

This is the code I have so far and I’ve been testing on the live site but it has not worked yet.
Have I set something up incorrectly?

import wixUsers from 'wix-users';

$w.onReady(function () {
 const currentUser = wixUsers.currentUser;
 if (currentUser.loggedIn) {
 if (currentUser.role === 'Admin') {
            $w('#stripNoOrders').collapse();
            $w('#stripNC').expand();
            $w('#stripPOE').expand();
        }
 if (currentUser.role === 'PrinciplesExcellence') {
            $w('#stripNoOrders').collapse();
            $w('#stripPOE').expand();
        }
 if (currentUser.role === 'ncGrade1') {
            $w('#stripNoOrders').collapse();
            $w('#stripNC').expand();
        }
 if (currentUser.role === 'ncGrade2') {
            $w('#stripNoOrders').collapse();
            $w('#stripNC').expand();
        }
 if (currentUser.role === 'ncGrade3') {
            $w('#stripNoOrders').collapse();
            $w('#stripNC').expand();
        }
 if (currentUser.role === 'ncGrade4') {
            $w('#stripNoOrders').collapse();
            $w('#stripNC').expand();
        }
 if (currentUser.role === 'ncGrade5') {
            $w('#stripNoOrders').collapse();
            $w('#stripNC').expand();
        }
 if (currentUser.role === 'ncKindergarten') {
            $w('#stripNoOrders').collapse();
            $w('#stripNC').expand();
        }
    }
})
2

Note: The APIs in WixRouterUser are only partially functional when previewing your site. View a published version of your site to see their complete functionality.
https://www.wix.com/corvid/reference/wix-router/wixrouteruser/role

Perhaps this is the problem?

And also check, if you get the result of a role…

console.log(currentUser.role)

You will see the result in the CONSOLE.

Also add an ELSE on the end with an console.log, to see if perhaps you may have no matching results, who knows. :grin:

3

I was able to figure it out by doing some more digging in the forum! This is the final code that works flawlessly. I can probably simplify it further but for now this works great.

import wixUsers from 'wix-users';

let user = wixUsers.currentUser;

$w.onReady(function () {
    $w('#stripLoading').expand();
 if (user.loggedIn) {
        user.getRoles()
            .then((roles) => {

 if (roles.some(r => r.name === "Admin")) {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').collapse();
                    $w('#stripNC').expand();
                    $w('#stripPOE').expand();
                    $w('#stripEXP').expand();
                } else {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').expand();
                }
 if (roles.some(r => r.name === "PrinciplesExcellence")) {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').collapse();
                    $w('#stripNC').expand();
                    $w('#stripPOE').expand();
                } else {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').expand();
                }
 if (roles.some(r => r.name === "ncGrade1")) {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').collapse();
                    $w('#stripNC').expand();
                } else {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').expand();
                }
 if (roles.some(r => r.name === "ncGrade2")) {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').collapse();
                    $w('#stripNC').expand();
                } else {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').expand();
                }
 if (roles.some(r => r.name === "ncGrade3")) {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').collapse();
                    $w('#stripNC').expand();
                } else {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').expand();
                }
 if (roles.some(r => r.name === "ncGrade4")) {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').collapse();
                    $w('#stripNC').expand();
                } else {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').expand();
                }
 if (roles.some(r => r.name === "ncGrade5")) {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').collapse();
                    $w('#stripNC').expand();
                } else {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').expand();
                }
 if (roles.some(r => r.name === "ncKindergarten")) {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').collapse();
                    $w('#stripNC').expand();
                } else {
                    $w('#stripLoading').collapse();
                    $w('#stripNoOrders').expand();
                }
            });
    }
})
4

Good job, looks good!