Need help on User Specific Buttons

Ask the community
,
1

To Clarify:
I want to make it so that if someone registers as an executive on my website, they would see only buttons relating to executive controls.
However, if someone registers as an employee, they would see buttons only relating to employee controls.

Is something like that possible? I’ve figured out how to change the buttons text to “executive” or “employee” depending on what account they’re logged into, but I can’t figure out how to change what page the button links to.

the buttons are on the home page.

2

Hi ved,

If your user’s data had been saved in a collection, use the getEmail() function that returns a promise that resolves to the email address of the user that is logged in.
Here you can read more about this function.

Afterword, use the Query() function in order to get the current user’s data, by equal the user’s email with the email field at the registration collection.
Here you can read more about these functions.

At the end use a condition in order to change the button’s label according to the Query() result.

View this code example:

$w.onReady(function () {
   wixUsers.currentUser.getEmail()
   .then(async(email)=>{
    await wixData.query('collectionName')
    .eq('Email', email)
    .then((result)=>{
        if (result.items[0]."the field name from your collection" ===
            "registers"){                  
            $w('#button').label= "registersButton"
        }else{
            $w('#button').label= "employeesButton"
        }
    })
})
}

*As you can see, I also used async and await, in order to pause the async Query() function and wait for the promise to resolve prior to moving on.
Here you can read more about async and result.

Have a nice day, and best of luck!
Sapir

3

Hi Sapir!
Thanks so much for the helpful response. Could you also help me with something else?

I’m working on an organizational website for students, and I would like to know how to create user specific buttons depending on the classes they’re in. I’ll demonstrate below:

1. Students select what classes they’re in from periods 1-7.

!974x1242
!974x1242974×1242 40.4 KB

2. On the home page, students then get buttons to the subjects corresponding pages.

!558x852
!558x852558×852 22.3 KB

How would I make it so that if someone clicked on the AP Chemistry button, they’d go to the AP Chemistry page?

And if someone were to select Art as their first period instead of AP Chemistry, how would I make the button go to the Art page instead?

4

Hi ved,

This is an example I believe will help you:
1 . I created a dataset that contain all the site’s pages and their URL.

The URL fieldKey IS “url”.
The PageName fieldKey is “title”.


2. At my page site, I had a strip that contain the dropdown and another strip that contain the registered
area.

  • The dataset is connected to the URL database collection.
  • Each dropdown’s list connected to the dataset and to the PageName field from the collection.

604×658 29.2 KB

3. I added an event handler that runs when the submit button is clicked. At the handler I change each button’s label according to the user’s choice in the dropdown.

4 .I wrote a function that used Query() method in order to find the current URL from the collection to each button’s label. In addition, I set the URL to be the button’s link.

5 . At the end, each button’s label will be the same as the user’s choice, and pressing on it will get you to the relevant page.

View this code:


// A global object that will contain the dropdown's value:
let studentChoose= {
     one : " ",
     two: " ",  
    }

export function submitButton_click(event) {
    studentChoose.one= $w('#dropdown1').value;  //Building the object
    studentChoose.two= $w('#dropdown2').value;
    createButtons();    
}

async function createButtons(){
    $w('#button1').label= studentChoose.one; 
    //Get the correct URL from the collection
    $w('#button1').link= (await wixData.query('urlPages').eq('title',
    $w('#button2').label).find()).items[0].url;
   //Open the new page on the current window
   $w('#button1').target = "_self";

    $w('#button2').label= studentChoose.two;
    $w('#button2').link= (await wixData.query('urlPages').eq('title',  $w('#button2').label).find()).items[0].url;
    $w('#button2').target = "_self";
}

Here you can read more about Query() function.
Here you can read more about the button’s target.

  • If your registered area is located in a new page, instead of creating an object, insert the user’s choice to a new database collection. Afterword, in order to set each button’s label use the Query() function.

Best of luck!
Sapir,

5

Hi!

Will they have to fill out the form every time they need registered buttons?

6

It also says that wixData is not defined. What could I do to fix this?

7

Hi vad,

  1. Regarding your first question, if you wish that each time ,when a student enter to your site , he will get his own registered classes, save his data form the first time he registered in a new collection.
    Now, each time the student view your site, import his choices from the collection.

For example, student ‘A’ is already registered and now he enter your site again. when he get to the registered classes page , use Query() function to get his data from the collection. If his choice at the first period was AP Chemistry, query this page at the URL collection ( according to the previous example) and change the first button’s link.

  1. In order to use wixData functions , import wixData from the wix-data module:
import wixData from 'wix-data';

*Write it at the top of the code page

Best,
Sapir