Getting the user role from the frontend through JS

James

Hello all,

Has anyone found a way to be able to get the role of the user through JavaScript or anything? I have tried to look at the network calls to see if there was any JSON that I could manipulate.

Pretty much, use case is I want to get the role of the user and do multiple things with that string,

1) put it into a dataLayer for Analytics thus being able to create views and granulate data based off role

2) I want to create some Javascript on the page to enhance certain elements based off roles, example, the main navigation bar I Want to add a link that should only be visible to certain roles.

Any help here will be appreciated :)

Shauna

Hey @James I'll wait for more JS savvy users to chime in on retrieving it with Javascript, but I will mention one approach I've seen, which is to to place the script in a pocket and then only display that pocket to specific roles so that code only loads for users within that role. 🤷‍♀️

I'll poke around to see if anyone on this side has additional ideas & hopefully others in this community have done something like this!

Branwyn T

Heyo @James,

We have the vanilla.getCurrentUser() function, but that only provides the following options:

(Code complete in a Custom HTML Widget showing options for vanilla.getCurrentUser(), which includes banned, dateLastActive, label, name, photoUrl, private, title, url, and userID).

So what I'd recommend is fetching the userID with this function and then doing an API call to GET /users/{id} to fetch the roles.

James

Thank you both :) will try both of these out as they both look like they will provide me what I need :)

James

@Branwyn T For some reason I am getting "vanilla is not defined" on ours :(.

When looking through I only have certain functions I can call

paddykelly

Hey @James that vanilla object is an event that has to be passed to the onVanillaReady() function. Here is what I do when I want to work with Vanilla's JS functions. First of all, in the JavaScript panel I have to declare:

onVanillaReady();

And then I pass an empty callback function as an argument to that function:

onVanillaReady(() ⇒{
  /** Code you want executed will go here **/
});

onVanillaReady() returns an object that you can pass to the callback function. I call it e but you can also call it vanilla if you want. And now I pass the event to the callback function, so now I have:

onVanillaReady((vanilla) ⇒{
  /** Code you want executed will go here **/
  const me = vanilla.getCurrentUser();
  console.log('This is me:', me);
});

And, for testing the various vanilla functions and objects in the browser developer console window I create a window variable called vanilla:

onVanillaReady((vanilla) \=\>{
  /** Code you want executed will go here **/
  window.vanilla = vanilla;
  const me = vanilla.getCurrentUser();
  console.log('This is me:', me);
});

And now I can have fun exploring the built in vanilla functions in the browser console:

James

Absolute legends thank you @paddykelly and @Branwyn T this gives me a lot of data to play around with :)

s_andrews

This looks really useful!

I have a few ideas I need to get round to looking at. eg. one was experimenting with the new profile fields -

Maybe a member could write their goals in their profile and have a homepage widget show it to them

(I put in ascii test boxes ages ago in absence of a progress bar)

I'd love to see more examples of how it can be used in action.

There's probably a good example here but can't tell. the code box seems to have mangled it. Will have to untangle it.

James

@s_andrews that is our thinking too, we want to make it more personalised so looking at using some of the data to add that personal touch.

Also, one thing that I am looking at using it for is to push the data into the data layer, for example the role, so then it can ping back to Google Analytics, from there we can then create views for different goals and also create a view to exclude admins so we can see what our members are doing without our skewed data that us admins create :)