The Button widget is responsible for rendering HTML buttons. Clicking
one of these buttons will generally cause a host-specific action to
occur (for example, an aid key will be sent to the host or an input
field will be updated).
This widget renders data supplied by the following components:
The following figure shows how a button widget appears on a transformation,
using the data from the Function key component
example as input:
Figure 1. Button widget example
Rows
Columns (3 per row)
Caption type (show description)
The following settings can be configured for this widget:
Caption type
Specifies how the caption for each button is determined. The
value of the leading token and the description are derived from the
component; you can select what appears on the button caption. For
example, if the host screen had a menu item that read 4. Mail, you can have the
caption display 4, or Mail, or 4. Mail.
Trim spaces on caption
If selected, white space (extra space) is trimmed from both
ends of the caption.
Layout
Specifies how the buttons will be arranged on the HTML page.
Options: Table, Separated.
Note:
This setting is not applicable in default rendering.
The widget preview does not always match the full page preview.
This happens because the widget preview simple renders the component's
output. It does not try to preserve the alignment of the screen when
it renders, as is done in the full page preview.
Number of columns per row
The number of buttons to display horizontally before wrapping
to the next line. Tweaking this setting can cause your buttons to
appear vertically (if this value is 1) or horizontally (if this value
is equal to or greater than the number of buttons to be rendered).
Separator
Specifies what separator you want to use to separate the rendered
buttons on the HTML page. You can select from the drop-down list or
type in your own in the entry field.
Enable foreground colors (Web-only)
If selected, the button text is rendered using the color extracted
from the host screen by the component (only applicable when the function
key component is used).
Color information is extracted for the first
host field containing any part of the function key. If the function
key is split over two fields, such as F12= and Exit,
the color information for the field containing F12= is
extracted.
Button style class (Web-only)
Optional. The CSS style class associated with each generated
button. The value of the class attribute of the HTML button tag will
be set to this value. The default value is HATSBUTTON. See Using style sheets for
more information.
Style (Web-only)
Optional. Any CSS properties that you want to override. For
example, you can specify font-color:
red; font-size: 18pt; in this field to change the font color
and size for this widget. The properties you enter apply to each element
of this widget. Use the launcher
button next to this field to open a style properties dialog. This
dialog frees you from the need to understand CSS to change the font,
color, or other style settings for the widget. See Using style sheets for more information.
Have feedback?
Google Analytics is used to store comments and ratings. To provide a comment or rating for a topic, click Accept All Cookies or Allow All in Cookie Preferences in the footer of this page.