topic Re: CL_GUI_HTML_VIEWER - HTML button with image in Application Development and Automation Discussions

CL_GUI_HTML_VIEWER - HTML button with image

jens_straten2 — Sun, 24 Jan 2016 01:04:37 GMT

I can display an image and a button in the HTML viewer, but I am struggling to put an image on a button.

Here is my program flow:

1. Create CL_GUI_HTML_VIEWER object.

2. Use LOAD_MIME_OBJECT to get the URL for an existing image.

3. Pass assigned URL to custom method to build HTML code table (see below).

4. Call LOAD_DATA to load HTML code.

5. Call SHOW_URL to display HTML code.

Here is the method used to load the HTML code in step 3. lv_image_url is the assigned URL from step 2.

data lv_w3_html type w3_html.

define add_html.
append &1 to lt_html_button.
end-of-definition.

concatenate ' background: url ("'
            lv_image_url
            '") no-repeat;'
       into lv_w3_html.

refresh lt_html_button.
add_html:
'<html>',
'<style type="text/css">',
'body{margin: 0; padding: 0; background: white; overflow: auto; }',
'input.fbutton{',
' font-size: 24px;',
' font-weight: bold;',
' width: 100%;',
' height: 152px;',
' background-color: orange;',
' border-style: single;',
lv_w3_html,
' cursor: pointer;}',
'</style>',
'<body>',
'<FORM name="2050_SEARCH_BUTTON"',
'       method=post',
'       action=SAPEVENT:2050_SEARCH_BUTTON>',
'<input type=submit name="SEARCH_BUTTON"',
'      class="fbutton" value="Search"',
'      title="">',
'</form>',
'</body>',
'</html>'.

This gives me an orange button with the label "Search" as expected, but it fails to display the image. I have also validated that lv_w3_html includes the URL from step 2. Furthermore, all method calls complete successfully (no error status).

Did anybody get this to work? Any suggestions? Is it possible that the SAP HTML layer doesn't understand the CSS to load a background image into a button?

Thank you!

Re: CL_GUI_HTML_VIEWER - HTML button with image

rosenberg_eitan — Sun, 24 Jan 2016 05:11:40 GMT

Hi,

See: CSS Backgrounds

Try this code:

<html>

body {

margin: 0;

padding: 0;

background: white;

overflow: auto;

}

input.fbutton {

font-size: 24px;

font-weight: bold;

width: 100%;

height: 170px;

background-color: orange;

border-style: single;

background-image:

url(http://static4.bigstockphoto.com/thumbs/4/5/2/small2/25475744.jpg);

background-repeat: no-repeat;

}

</style>

<body>

<FORM name="2050_SEARCH_BUTTON" method=post

action=SAPEVENT:2050_SEARCH_BUTTON>

<input type=submit name="SEARCH_BUTTON" class="fbutton" value="Search"

title="">

</form>

</body>

</html>

Result:

Regards.

Re: CL_GUI_HTML_VIEWER - HTML button with image

jens_straten2 — Sun, 24 Jan 2016 06:05:34 GMT

Thank you, Eitan!

I guess my HTML knowledge isn't that good. I can't believe that all I had to do is to change 'background' to 'background-image' in my code...

One more question on the same code: I was able to use width:100% to make the button use the entire custom container, but height:100% didn't do the same for the height. Is there another trick or am I using the wrong keyword again?

Re: CL_GUI_HTML_VIEWER - HTML button with image

rosenberg_eitan — Sun, 24 Jan 2016 06:41:38 GMT

Hi,

That is OK .

I always go to www.w3schools.com or similar sites to learn .

After searching there I found:

background-size: 100% 80%;

Result:

Regards.

Re: CL_GUI_HTML_VIEWER - HTML button with image

jens_straten2 — Sun, 24 Jan 2016 18:28:15 GMT

Hmmm, I think background-size only resizes the background image itself, but I want to resize the button to the full size of the custom container.

For example:

Custom Container Size: 200x150 pixels.

Button Size CSS: Width: 100%; Height: 100% results in a button that is using the full width, but not the full height.

It seems that the button height is somehow linked to the font size of the button.

That said, when I copy the HTML code to www.w3schools.com, height: 100% works as expected and results in a button filling the entire container.

Does that mean that there is a bug in the interpretation of HTML on the SAP side?

Re: CL_GUI_HTML_VIEWER - HTML button with image

rosenberg_eitan — Mon, 25 Jan 2016 05:26:57 GMT

Hi,

Can you please post your HTML and a picture of the result (using window Internet Explorer or Firefox) ?

Regards.

Re: CL_GUI_HTML_VIEWER - HTML button with image

jens_straten2 — Mon, 25 Jan 2016 16:56:29 GMT

No need for more code. Just take your code above and change Height from "Height: 170px;" to "Height: 100%;".

The output will look like this on www.w3schools.com:

Basically, the button is filling the entire output container in Firefox.

Now, when you use the same HTML code in SAP, it will just use a portion of the custom container. The actual size seems to be driven by the font size somehow.

I did some reading on this behavior and it seems that a size value in % requires the parent container to have a known size. So, I am guessing that the custom container in SAP, which I am using to hold the HTML button, does not provide this information to it's child elements even though I would think it has it since it was defined in screen painter.

My code is part of a larger module pool and so it would be difficult to post it here, but like I said, you can simply create a screen with a custom container and use that container to hold your HTML code from above.

Re: CL_GUI_HTML_VIEWER - HTML button with image

rosenberg_eitan — Tue, 26 Jan 2016 08:58:19 GMT

Hi,

For this code:

*----------------------------------------------------------------------*

FORM get_html_data_2

CHANGING

it_soli_1 TYPE soli_tab .

DATA: ob_string TYPE REF TO cl_string .

CREATE OBJECT ob_string .

CALL METHOD ob_string->append_htm_smpl

EXPORTING

fragment = :

' <html> ' ,

' ' ,

' <style type="text/css"> ' ,

' body { ' ,

' margin: 0; ' ,

' padding: 0; ' ,

' background: white; ' ,

' overflow: auto; ' ,

' } ' ,

' ' ,

' input.fbutton { ' ,

' font-size: 24px; ' ,

' font-weight: bold; ' ,

' width: 100%; ' ,

' height: 100%; ' ,

' background-color: orange; ' ,

' border-style: single; ' ,

' background-image: ' ,

' url(http://static4.bigstockphoto.com/thumbs/4/5/2/small2/25475744.jpg); ' ,

' background-size: 200px 200px; ' ,

' background-repeat: no-repeat; ' ,

' } ' ,

' </style> ' ,

' ' ,

' <body> ' ,

' ' ,

' <FORM name="2050_SEARCH_BUTTON" method=post ' ,

' action=SAPEVENT:2050_SEARCH_BUTTON> ' ,

' ' ,

' <input type=submit name="SEARCH_BUTTON" class="fbutton" value="Search" ' ,

' title=""> ' ,

' ' ,

' </form> ' ,

' ' ,

' </body> ' ,

' ' ,

' </html> ' .

CALL METHOD cl_bcs_convert=>string_to_soli

EXPORTING

iv_string = ob_string->htm_string

RECEIVING

et_soli = it_soli_1.

ENDFORM . "get_html_data_2

I am getting:.......