Solved: CL_GUI_HTML_VIEWER - HTML button with image

jens_straten2 · ‎2016 Jan 24

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!

rosenberg_eitan · ‎2016 Jan 24

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.

rosenberg_eitan · ‎2016 Jan 24

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.

jens_straten2 · ‎2016 Jan 24

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?

rosenberg_eitan · ‎2016 Jan 24

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.

jens_straten2 · ‎2016 Jan 24

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?

rosenberg_eitan · ‎2016 Jan 25

Hi,

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

Regards.

jens_straten2 · ‎2016 Jan 25

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.

rosenberg_eitan · ‎2016 Jan 26

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:.......

By Category

Related Content

Activity Groups

Industry Groups

Influence and Feedback Groups

Interest Groups

Location Groups

Customer Only Groups

Forums

Related Resources

Products

Learning and Support

About

My SAP Profile

My SAP Profile

CL_GUI_HTML_VIEWER - HTML button with image