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>
1 Like
Thank you so much for the guidance! Your solution was spot-on and saved me a lot of time. Truly appreciate your help! 
I was wondering if you knew how often the User table refreshes data as I got the above code working with my own field AccountStatus but when the status changes in Airtable, it took ages to see the change in Softr. I manually had to go to the User table in Softr and told it to Resync the data. Is there a way to force a resync more often such as on the block load?
Hi Adam,
You need to disable the user caching in the app settings - advanced settings
Oh wow thank you, would have never thought of that!
Here is the code I am using to create a modal to show when the status of a user has used up all their ‘credit’ and are now ‘out of credit’
Be great if I could link this to any of the action buttons instead of just page reload?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Status Notification</title>
<style>
/* Modal Styles */
#creditModal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4); /* Dimmed background */
}
#creditModalContent {
background-color: #fefefe;
margin: 15% auto; /* Position in the middle of the screen */
padding: 20px;
border: 1px solid #888;
width: 80%; /* You can adjust the width */
max-width: 500px; /* And the max-width */
position: relative;
}
#hideModal {
cursor: pointer;
position: absolute;
top: 10px;
right: 20px;
font-size: 24px;
}
</style>
</head>
<body>
<!-- Modal HTML -->
<div id="creditModal" style="display:none;">
<div id="creditModalContent">
<span id="hideModal">×</span>
<p>You are out of credit</p>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', () => {
if(window['logged_in_user'] && window['logged_in_user']['AccountStatus']) {
const nameData = window['logged_in_user']['AccountStatus'];
$("span:contains('{LOGGED_IN_USER:FIELD:AccountStatus}')").removeClass('d-plus');
$("span:contains('{LOGGED_IN_USER:FIELD:AccountStatus}')").html(nameData);
}
if(window.logged_in_user && window.logged_in_user.AccountStatus === 'Out of Credit') {
const modal = document.getElementById('creditModal');
const hideModal = document.getElementById('hideModal');
console.log(hideModal)
modal.style.display = 'block';
// Hide modal when the 'x' button is clicked
hideModal.onclick = function() {
modal.style.display = 'none';
};
// Automatically hide the modal after 3 seconds
setTimeout(() => {
modal.style.display = 'none';
}, 10000);
}
});
</script>
</body>
</html>
This should be possible without too much effort, what would be the type of action? Update record? Add record?
Yes on both. Basically any update, edit or add that kicks off an automation, the user will be just sitting there waiting even though the automation won’t trigger in airtable due to the balance of credits being zero.
There is actually a better way without coding (Basic plan should be enough).
You would need to create two user groups (one user group “with credits” and the other “out of credit”).
Then you set the visibility conditions of two buttons (wheter it’s an update/add/delete record) for each of your dynamic blocks which rely on credits count.
One button for letting the users add/delete/update a record when they belong to the user group “with credits” and the other button that would be labeled “no credit left” or “buy new credir” for users who belong to the user group “out of credit”.
This way there is a better user experience as the button “out of credit” can directly lead to a specific page where the users will be able to ask for new credits/pay for new credits/ whatever is your workflow
Oh nice, yes I have steered away from user groups as it doesn’t feel like a fully baked feature yet, e.g. I can’t see which users are in which groups in the user table, can’t find the correct syntax to know if my conditions are working for adding users etc. Want to also make sure only users with a flag in my contacts airtable are added to the Softr app user table etc.
User groups are working very well, no problem. By the way you can see which user is in which user group by creating a view(s) in Airtable with the same conditions as in the user groups.
Also user groups have nothing to do with how the synchronization works with the users table.
Thanks Matthieu, good to know. I was confused as the pictures in the knowledge base show you that you can view groups in the user table, but I couldn’t see them and I was getting error in my conditions telling me it wasn’t valid but couldn’t see how to get the correct syntax for things like automatically populating users based on a domain domain.co.uk didn’t work so tried @domain.co.uk which didn’t error but also didn’t do anything. Will keep trying out all the features and thank you for all the amazing and super quick support!