290
Views
8
Comments
Solved
How to include Icon widget in Dropdown option
Question
Application Type
Mobile

Dear Outsystems Community,

I would like to use the build in icons available at the Icon widget as icons for my dropdown menu options. The dropdown menu option object has a property called: "ImageURLOrIconClass".  I tried to populate this attributute with the "Icon" property of the relevant icon ("calendar" at the attached example), but I does't work (it shows empty dropdown menu). Any suggestions? 


screenshot.png
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

ok,

 but the set of icons is the same, so you can make a little sampling app to find them. (see example oml attached)

the translation is something like this :

"icon fa fa-<the name as you see in ss on icons> fa-2x"

example "icon fa fa-whatsapp fa-2x" for double size whatsapp icon

it's fontawsome, so you can look up the formatting options (like for the last sizing part i used), here's some examples

Dorine

QDR_FontAwsomeSampler.oml
2023-12-16 19-57-03
Sanjay Kushwah

Hi @Ron Ben,

You have to map ImageURLIconClass  parameter with your Image URL Icon.

If you have to use different icon for your  options you need to save image path in DB associated with that options if you are using Static entity then you can add extra attribute and give its value to your image runtime path.

I have attached OML file for your Help 


Result:


Hope this will help you


Kind regards,

Sanjay Kushwah

TestApp.oml
hi-16.png
2023-03-08 10-32-19
Vinod Kumar R

Hi, 


How can we align the ImageURLOnIConClass towards right .?

Regards,

Vinod

2025-02-21 07-07-34
Rishabh Tailor


https://www.outsystems.com/forums/discussion/96701/dropdown-tags-imageurloriconclass-onhover-tooltip/#Post421865

UserImage.jpg
Ron Ben

Thanks a lot Sanjay. As I understand from your description (please correct  me if I'm wrong), it is impossible using the Icon widget for it. I should save my own verson of those immages. Is this the case? 

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi @Ron Ben ,

you can use css instead of an image.  

You need to do just a bit more than putting in the name, it has to be full css class.

it should be something like "icon fa fa-forumbee fa-2x".

easiest for you would be to just put a real icon somewhere on a test screen that you want, browse to that screen, and look at the css of that icon with the browser tools, copy that into the property.

Dorine


UserImage.jpg
Ron Ben

Hi Dorine, It is not a web app but mobile. What I understood from your answer (please correct me if I wrong) is that also the build-in icons are actually included at the code downloaded/executed on the client side and that I just have to find the generic name it is given by the "compiler" in order to reffer to it from other places (such as the Dropdown menu). Is this the case? 

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

ok,

 but the set of icons is the same, so you can make a little sampling app to find them. (see example oml attached)

the translation is something like this :

"icon fa fa-<the name as you see in ss on icons> fa-2x"

example "icon fa fa-whatsapp fa-2x" for double size whatsapp icon

it's fontawsome, so you can look up the formatting options (like for the last sizing part i used), here's some examples

Dorine

QDR_FontAwsomeSampler.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.