I have prepared an animated menu component that I would like to implement on my Softr client portal. The menu content has to change depending on the user group type. To start implementing this, first, I have to access the user group type from Airtable. Could anybody tell me how to do this? I found a solution on this topic How to access logged in user's data in JavaScript Custom Code? that says I could call window.logged_in_user in JS to pull the data. Let’s say I just want to display the user type on the screen. Could anybody help me with this?
Hi !
I can help with this.
So displaying the Softr User Group itself is, I think, not possible.
Though, if the user type is in Airtable, this will be possible.
If so, what would be the exact field name in Airtable for this user type (in the users table or elsewhere)
I have a single select field in Airtable that corresponds to the user group “UserType”. The values of that field are the same as the UserGroups set up inside the Softr settings. Could you share a snippet of the code on how to access that field inside the custom code of a Softr field?
Thanks alot!
That’s perfect!
If your field in Airtable is called “UserType” =>
1. Add this where you want to display the user type in your page (a title of a block, a subtitle of a block…)
<span class="d-plus">{LOGGED_IN_USER:FIELD:UserType}</span>
Note that you can add whatever you want before <span
and after </span>
2. In the page settings => custom code => header => add this snippet:
replace hero1 by the ID/name of your block
<script>
window.addEventListener('block-loaded-hero1', () => {
console.log('Block loaded');
if(window['logged_in_user'] && window['logged_in_user']['UserType']) {
const nameData = window['logged_in_user']['UserType'];
$("span:contains('{LOGGED_IN_USER:FIELD:UserType}')").removeClass('d-plus');
$("span:contains('{LOGGED_IN_USER:FIELD:UserType}')").html(nameData);
}
});
</script>
Thank you so much for the guidance! Your solution was spot-on and saved me a lot of time. Truly appreciate your help!