Changing the Icon Badge image

Hi,


I believe one can change the Icon Badge image. I have looked at how to do this, but have had no luck.


Can this be a database image that changes for each user as they log in ?


Please help

Thanks

Emil

Hi,

Do you mean the icon in the upper right corner of the screen, representing the user?

A good starting point is to use the following component: https://www.outsystems.com/forge/component-overview/651/profile-utils

It has the components to let user create and store a user profile picture.

This you can in integrate in the LoginInfo webblock in the Common UI flow.

There is also a module https://www.outsystems.com/forge/component-overview/1111/how-to-user-self-register  available that does something simular as the previous one that you can look at and copy over what you need.

With either Forge component you should be able to implement what you want.

Regards,

Dainel

Daniël Kuhlmann wrote:

Hi,

Do you mean the icon in the upper right corner of the screen, representing the user?

A good starting point is to use the following component: https://www.outsystems.com/forge/component-overview/651/profile-utils

It has the components to let user create and store a user profile picture.

This you can in integrate in the LoginInfo webblock in the Common UI flow.

There is also a module https://www.outsystems.com/forge/component-overview/1111/how-to-user-self-register  available that does something simular as the previous one that you can look at and copy over what you need.

With either Forge component you should be able to implement what you want.

Regards,

Dainel

Hi Daniel,


Thanks for those links, I am sure I will use them, but the part i am actually looking for is like the icon badge component.


What I want to achieve is :  I have an avatar loaded against each user and I want the badge portion to display how many unread messages I have sent to a friend, so I want to show his avatar with a counter as a badge on top of it.


Hope this makes sense.

Emil


The Icon Badge wizard is an icon and a badge that shows the content of an text or expression that you place into it.

So the icon widget you will have to remove and replace it with an image widget that you use to show the user profile picture.

You most likely need to add extra styling to the image to make it small enough (like the icon, something like 22 by 22 pixel, so that the image is in proportion to the badge that will show the counter. Preferable with a custom css class in your style sheet

.profile-image {

   width: 22px;

   height: 22px;

}

or by adding to the image widget an  extended property:  style = "width: 22px; height:px;"

The counter it self depends on if you are doing web or mobile.

Set the number property of the iconbadge to the correct value of unread messages.



Thanks Daniel,


I will try this and let you know !