How to show logged in user's name in the website

@JimBowen the idea of the sample above was to use let’s say HERO or CTA blocks where in a text input fields you could add <span class="d-none">{LOGGED_IN_USER:NAME}</span> and then the code could be added into page settings custom code header area. I haven’t tested this in a Text Block. I would for now go with CTA block perhaps (you can remove the buttons :slight_smile: )

1 Like

Thanks for the update :slight_smile:

Glad to hear it works :slight_smile:

I have had success with:

Hello {LOGGED_IN_USER:NAME}

Copy and paste this into the text field.

1 Like

hello, to preview what this looks like, do i have to signup on my website’s signup form to create a user, login to website, and then it will show user’s name in preview? or is there another way to test/preview? thanks! @artur

Hey @conf,

You will need to create a user on Test model, login with test user details to check in Preview or simply use a magic link for test user.

it works well in custom code, and text area

but,

it doesn’t work in ‘Empty State’ in list block and ‘Placeholder’

is it impossible to do this ? or is there anyother way it could be ?

Thanks in advance !

Weird thing is,
code works well in empty state
i don’t understand why user related code doesn’t work in here

image

@TAXPACEE the issue is that the empty state text is displayed dynamically and the code has worked before empty state is shown.

This might work

<script>
	const onRecords = (e) => {
		setTimeout(() => {
                        if(window.logged_in_user) {
                            const name = window.logged_in_user.softr_user_full_name;
                            const firstName = name.split(' ').slice(0, -1).join(' ');
                            $("span:contains('{LOGGED_IN_USER:NAME}')").removeClass('d-none');
                            $("span:contains('{LOGGED_IN_USER:NAME}')").html(firstName);
                        }
		}, 50);
	};
	
	window.addEventListener('get-records-table1', onRecords);
</script>

table1 is block name you see it in studio block config panel

Sincerly Thanks a lot artur !

i tried the code you gave, it didn’t work well

though, this one below here worked for me.

so i share it for somebody else.

JS code [footer]
<script>
	const onRecords = (e) => {
		setTimeout(() => {
                        if(window.logged_in_user) {
                            const name = window.logged_in_user.softr_user_full_name;
                            $("span:contains('{LOGGED_IN_USER:NAME}')").html(name);
                        }
		}, 50);
	};
	
	window.addEventListener('get-records-table1', onRecords);
</script>
HTML Code ['Empty State']
<span>{LOGGED_IN_USER:NAME}</span> 

Always Thanks !

Let’s go Softr !

1 Like

@artur it seems like it works half the time for me. The other half nothing is displayed. Do you have any idea what could be the issue?

i am using this code btw:

<script>
    document.addEventListener("DOMContentLoaded", function () {
        if(window.logged_in_user) {
            const name = window.logged_in_user.softr_user_full_name;
            const firstName = name.split(' ').slice(0, -1).join(' ');
            $("span:contains('{LOGGED_IN_USER:NAME}')").removeClass('d-none');
            $("span:contains('{LOGGED_IN_USER:NAME}')").html(firstName);
        }
    });
</script>

How would you change this to pull in another field from the Users Airtable table?

1 Like

Like the above comment, I would also like to know how we can pull in other fields from Airtable. Or is it limited to just the name?

1 Like

Hi everyone,

I have followed Artur’s guide and it works perfectly for custom code blocks but not for other blocks though, such as “hero with CTA”. It usually works once and then it doesn’t when you refresh the page. I’ve tried to find a solution, without any success so far…

Here is the code I used:

<script>
    document.addEventListener("DOMContentLoaded", function () {
        if(window.logged_in_user) {
            const name = window.logged_in_user.softr_user_full_name;
            $("span:contains('{LOGGED_IN_USER:NAME}')").removeClass('student-name');
            $("span:contains('{LOGGED_IN_USER:NAME}')").html(name);
        }
    });
</script>

Here is a screenshot of the two different blocks, you can see that it’s working for the first one (custom code) but not for the second one.

Does anyone know how to solve this issue?

Thanks for your time! :slight_smile:

@Theo use the code below:

<script>
window.addEventListener('block-loaded-blockname1', () => {
	console.log('Block loaded');
    if(window.logged_in_user) {
        const name = window.logged_in_user.softr_user_full_name;
        $("span:contains('{LOGGED_IN_USER:NAME}')").removeClass('student-name');
        $("span:contains('{LOGGED_IN_USER:NAME}')").html(name);
    }
});
</script>

blockname1 - needs to be your block’s name as shown in the studio settings see the pic below.

1 Like

It worked! Thanks a lot @artur! :blush:

Lookng for this. How to pull another airtable field?

Hi @meenal.malhotra, you can check this one :star_struck:

Hi everyone now this feature is super simplified in Softr. You just need to place the {LOGGED_IN_USER:NAME} placeholder in the corresponding field and it will display the user’s name in preview. Enjoy :star_struck:

Is there documentation of local variables we can reference like this?