black strip at top = “#button4”
grey strip in middle = “#section13”
black strip at bottom = “#section14”
Both sections are collapsed on load using the properties panel.
What I’m trying to make happen is when the button is clicked by a user that is logged in as an ‘Artist’ (role name) = section13 expands, and if any other user role or user not logged in clicks the button = section14 expands.
The button needs to be visible for all users, so that’s why I tried to make it so that a different section would expand depending on the user role.
I’m not sure why I’m having so much trouble trying to make it work 
I’ve tried this code which, in theory, should work?
But now I am getting an error " ‘user’ is not defined. " on the following line of code…
if ( user.roleName === ‘Artist’ && user.loggedIn ) {
import wixUsers from 'wix-users';
$w.onReady(function(){
$w("#button3").onClick( (event) => {
$w("#section4").expand();
} );
let user = wixUsers.currentUser;
let userId = user.id; // "r5cme-6fem-485j-djre-4844c49"
let isLoggedIn = user.loggedIn; // true
user.getEmail()
.then( (email) => {
let userEmail = email; // "user@something.com"
} );
user.getRoles()
.then( (roles) => {
let firstRole = roles[0];
let roleName = firstRole.name; // "Role Name"
let roleDescription = firstRole.description; // "Role Description"
} );
} );
export function button4_click(event) {
//Add your code for this event here:
if ( user.roleName === 'Artist' && user.loggedIn ) {
$w("#section13").expand()
} else {
$w("#section14").expand()
}
}
Okay, moving it into the onReady function has removed the “user not defined” error, but now I’m back to square one.
section14 is expanding for every user, even those with the “Artist” role. So the “else” statement is working but not the “if” statement?
Confused.
The code is now as follows:
import wixUsers from 'wix-users';
$w.onReady(function(){
$w("#button3").onClick( (event) => {
$w("#section4").expand();
} );
let user = wixUsers.currentUser;
let userId = user.id; // "r5cme-6fem-485j-djre-4844c49"
let isLoggedIn = user.loggedIn; // true
user.getEmail()
.then( (email) => {
let userEmail = email; // "user@something.com"
} );
user.getRoles()
.then( (roles) => {
let firstRole = roles[0];
let roleName = firstRole.name; // "Role Name"
let roleDescription = firstRole.description; // "Role Description"
} );
if ( user.roleName === 'Artist' && user.loggedIn ) {
$w("#button4").onClick( (event) => {
$w("#section13").expand()
} );
} else {
$w("#button4").onClick( (event) => {
$w("#section14").expand()
} );
}
} );
Tested by removing the else statement from the code entirely and no function when clicking the button at all.
Either of the two provided samples should have worked for you after changing the elements to suit your own setup, however I will have a look at it again later and get back to you then, unless somebody jumps on and beats me to it.
Also, you have stated this which we have been working with…
black strip at top = "#button4"
grey strip in middle = "#section13"
black strip at bottom = "#section14"
So where does this now fit onto the page as it was not mentioned before?!
$w("#button3").onClick( (event) => {
$w("#section4").expand();
button3 and section4 are further up the page. They are separate to this function I am trying to create with button4.
Just a simple collapsed section which expands when button3 is clicked. But they are still on the page so need to be in the code (the function works as it is).
Okay, so I have had a chance to look at it and have a little play and here is the result.
https://givemeawhisky.wixsite.com/artisttest
You can log in with the account details of:
Email: dummy@dummy.com
Password: dummy1234
I have set this account up so that it has the role of Artist.
If you go to the page before logging in, it will show the top black strip with the black section underneath that states you must be an artist to sign in here etc.
If you then login on that page as that account so that you are logged in as artist etc, then when you go back to the page after logging in, the page will refresh and the bottom black strip will go and the set list section will be shown instead.
If you are already logged in and your role is Artist, then when you go to the page the set list section will be shown and the bottom black strip will go.
The separate button and section that you mentioned about last has also been added to the code and the page, that is on it’s own at the bottom of the page.
Code used.
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
$w.onReady(function () {
const user = wixUsers.currentUser;
user.getRoles()
.then(roles => {
let firstRole = roles[0];
let roleName = firstRole.name;
let roleDescription = firstRole.description;
if (roles[0].name === 'Artist') {
$w('#section14').hide();
$w('#section13').expand();
} else {
$w('#section14').show();
}
});
});
export function strip1_click(event) {
const user = wixUsers.currentUser;
user.getRoles()
.then(roles => {
let firstRole = roles[0];
let roleName = firstRole.name;
let roleDescription = firstRole.description;
if (user.loggedIn && roles[0].name === 'Artist') {
$w('#section14').hide();
$w('#section13').expand();
} else {
$w('#section14').show();
}
})
}
export function button3_click(event) {
$w('#section4').expand();
}
wixUsers.onLogin(() => {
const user = wixUsers.currentUser;
user.getRoles()
.then(roles => {
let firstRole = roles[0];
let roleName = firstRole.name;
let roleDescription = firstRole.description;
if (roles[0].name === 'Artist') {
$w('#section14').hide();
$w('#section13').expand();
} else {
$w('#section14').show();
}
});
});
@givemeawhisky the only thing with this is that it doesn’t have a button to expand the section with the form on. Which is what I’m trying to achieve.
Here is the link to the site page that I’m trying to create the function on, then you can see the layout I am going for…
https://lm1223.editorx.io/responsive/blank-1
I don’t want to clutter the page, and the best way to do this is to have it so that the buttons open up the sections which contain the content.
I can’t see how I’m finding it so difficult to make a simple function of expanding a section dependant on user role.
@lisamthorpe
Yes I sort of got rid of the need for the button in the used code!
Although for design purposes I do prefer it as it is with the section being shown for any user with the Artist role without the need to have to click anything for it to appear.
However, to remedy this all you need to do is to remove the two expand lines of code for section 13 in the Wix Users onLogin section and the code that is wrapped in with the onReady page function itself.
I have done that myself to the example and you can test it again.
I am trying to create a simple read more section in on of my pages. I am using the “multi State Boxes”. I followed everything that was stated on the guide to create a “read more” https://support.wix.com/en/article/corvid-tutorial-expand-text-with-a-read-more-link.
My readmore section is not working and I am also getting the “Parsing error, unexpected token”
Please see attached the code:
