Can i not display more than 1 character in a Avatar text?

Maybe a silly question :grinning: Wondering whether the avatar component will only display the first character of it’s text property.

I set the initials of first and last name, but it always displays the first character only.

Is this how it’s supposed to behave? Any alternatives for this?

Hey @Sambhavi :wave:
Yes, that’s how the component is configured :slight_smile:

If you select the text displayed (when you edit the component), you’ll see that the bound text has a formula that outputs the first letter of the text value. You can modify it to your needs here. You might want to add a prop to distinguish last name and first name :slight_smile:

This is how I configured my text.

So from what you say, only L will be displayed although the formula evaluates to LB, correct?

I believe you are at the instance level here. Without changing the inner logic of the component, it will behaves the same.
So yes, right now, whatever you put in your instance, it will always output the first letter.

1 Like

Thanks @jptrinh

Ok…I’ve never changed anything at a component level. Will you be able to give me some directions?

WeWeb’s doc on the subject would be a great start :slight_smile:

If you haven’t done that already, you’ll first want to import the component to your project so you can have access to its edit mode.

Once you are inside of your component, you’ll need to apply the same logic you showed but with the component properties instead of the collection data. Let me know if you get stuck somewhere!

1 Like

Ok @jptrinh , I’ll follow these steps and let know how it goes.