How to display a button with an icon?

[alfred_behrends68]

Hi,

I'd like to display an SAP-icon on a button.

In this thread

Thomas Jung gave the following example:

> I don't know if this definetely works with tabstrips

> items but it does work with buttons and toolbar

> buttons. What I do is create a BEE and render that

> to a string. I then use that string as the text of

> the element I want to place my image into:

>

>   <%
>   data image type ref to cl_htmlb_image.
>   data: image_string type string.
>   create object image.
>   image->id = `UserSelectionCancel2`.
>   image->src = cl_bsp_mimes=>sap_icon( `ICON_CHECKED` D`).
>   image->tooltip = ``.
>   clear image_string.
>   image_string = image->IF_BSP_BEE~RENDER_TO_STRING( G( page_context ).
>   %>
> <xhtmlb:toolbarButton id            = "UserSelectionCancel"
> onClientClick = "closeiframe();"
> enabled       = "<%= enabled %>"
> text          = "<%= image_string %>" />

I didn't find anything else about this topic and

tried to adopt this for a button, but that doesn't work for me either.

<htmlb:button id            = "byButt"
   text    = "<%= image_string %> ENTER"
   onClick = "myClickHandler"  />

Is there a way/documentation to get this done?

Thanks in advance.

Cheers.

-Alf

[thomas_jung]

This technique is really just using a BEE, there is documentation on the BEE concept in the online help and Brian McKellar has a weblog on the subject as well.

There does seem to be some strange things in the code:

> image->src = cl_bsp_mimes=>sap_icon( `ICON_CHECKED` D`).

Notice the strange D at the end of the line. This isn't in the original posting. Perhaps this is just bad cut and paste.

You say that this isn't working for you - but you don't describe the results. Is there an error? Does it render anything in the button at all? Does the raw HTML get rendered? You want to make sure that the text doesn't get encoded - which would cause the HTML source to display instead. On the htmlb:button you will want to set the attribute encode = FALSE.

Also I am not sure that you can also pass in text with the image like that. You might have to create a full BEE and add the image and a textView separately into the BEE. Then render the entire BEE to a string.

[alfred_behrends68]

> This technique is really just using a BEE, there is

> documentation on the BEE concept in the online help

> and Brian McKellar has a weblog on the subject as

> well.

OK, I think I get the idea. Will check the stuff. Thanks.

> Notice the strange D at the end of the line. This

> isn't in the original posting. Perhaps this is just

> bad cut and paste.

Just bad copy paste. Yes.

> You say that this isn't working for you - but you

> don't describe the results. Is there an error? Does

> it render anything in the button at all? Does the

> raw HTML get rendered?

I just saw coding in the button.

> You want to make sure that the

> text doesn't get encoded - which would cause the HTML

> source to display instead. On the htmlb:button you

> will want to set the attribute encode = FALSE.

OK, that was right on spot. This shows me the Icon! Strike!

> Also I am not sure that you can also pass in text

> with the image like that. You might have to create a

> full BEE and add the image and a textView separately

> into the BEE. Then render the entire BEE to a string.

I'll check the documentation on BEE and give it a try.

Thanks for your answer.

Thats a starting point for me.

Alf

[alfred_behrends68]

> Also I am not sure that you can also pass in text

> with the image like that. You might have to create a

> full BEE and add the image and a textView separately

> into the BEE. Then render the entire BEE to a string.

It works with just rendering the Image and including the text:

      <% data image type   ref to cl_htmlb_image.
        data: image_string type string.
        create object image.
        image->id = 'UserSelectionCancel2'.
        image->src = cl_bsp_mimes=>sap_icon( 'ICON_CHECKED' ).
        image->tooltip = ''.
        clear image_string.
        image_string = image->IF_BSP_BEE~RENDER_TO_STRING( page_context ).
      %>
      <htmlb:button id            = "UserSelectionEnter"
                    onClientClick = "closeiframe();"
                    text          = "<%= image_string %> ENTER"
                    encode        = "FALSE" />

This code shows a button with the ICON_OKAY and the text "ENTER" just fine.

Alf