The HtmlElement component
This component can display a single HTML element in the form, for example a header or an image.
Note that it is possible to add conditional contents with string interpolation.
The HtmlElement does not have a value and therefore it is not part of the submission data.
In addition to the properties and methods listed below, this component inherits properties and methods from the superclass Component. For example, any HtmlElement component has a label and hidden property even though these are not explicitly listed here.
Properties
| Name | Description | Datatype | Default |
|---|---|---|---|
| tag | The HTML tag to use for this element. | String | 'p' |
| className | The class name to provide to the HTML element. | String | |
| content | The HTML content to place within the element. | String | |
| refreshOnChange | Whether or not to refresh the form when a change is detected. | Boolean | False |
| attrs | Array of key-value pairs of attributes and their values to assign to the component. See the setAttrs method. | Dict/Struct | |
| tableView | When true and the component is part of an EditGrid, the component's value is shown (simplified) in the collapsed row of the EditGrid. | Boolean | False |
Methods
| Name | Syntax | Description |
|---|---|---|
| setAttrs | obj.setAttrs(attrs, values) | Given an array of attribute names and their values, assign a valid dict/struct in the attrs property of the component. |
| setLocalImage | obj.setLocalImage(imageFile, alt, ScaleToParentWidth=true) | Display a local image in the HtmlElement. Input imageFile is an absolute path. alt is an optional string that sets the alt attribute of the img element. Use the ScaleToParentWidth name-value pair to scale the image to match the width of the parent component. (The image is encoded using the encodeImage util.) |
Showing an image example
Images can be shown in the form by creating an HtmlElement and using its setLocalImage method to point to the image that should be shown.
For portability it is best to use a relative file name. In this example the image file is next to the file in which the path to the image is set.
image_logo = component.HtmlElement("logo")
image_logo.setLocalImage(
os.path.join(os.path.dirname(__file__), "logo.png"),
alt="Company logo",
scale_to_parent_width=True,
)
imageLogo = component.HtmlElement("logo");
imageLogo.setLocalImage( ...
fullfile(fileparts(mfilename("fullpath")), "logo.jpg"), ...
"Company logo", ...
"ScaleToParentWidth", true);
See also
- The 'Html' component allows for setting the HTML content through submission data.
- The
Contentcomponent allows for more elaborate HTML content to be added to the form. - The
StatusIndicatoruses an HtmlElement to display and update a status. - The How to for a piece of example code.