html
Overview
The html
UI component is mostly useful for two purposes:
Embedding imagery, branding, content, etc. into an app.
Extending the functionality offered "natively" by JourneyApps. For example, you could embed an HTML page that offers some level of interactiveness to create user interface elements or experiences that are not possible to implement natively in JourneyApps.
For more information about interactive html
components see the Advanced Topics section:
If you simply need to display a single static image, use the display-image
component instead of the html
component.
Types of HTML Sources
The html
component can display HTML content from two types of sources:
1. A local HTML file that is embedded inside your app. HTML files can be uploaded to your app using the Assets workspace in OXIDE. Specify a local path to the HTML file in the src
attribute.
Example:
2. A remote HTML page — specify an https://
URL in the src
attribute.
Example:
Notes on remote HTML sources:
Remote URLs must be accessed with https on iOS.
Since JourneyApps Runtime version 4.86.1, cross origin (remote) HTML sources can access the device’s microphone and camera.
In TypeScript apps, App packages can also act as a source for a html
component. Please see the documentation for further information.
Standard Attributes
src
src
Optional
Type: string
Default: unset
Path to the HTML source file. The value provided can be a format string if you need to dynamically specify the path or URL of the HTML file.
If you are using a remote URL, this can be used to send an argument/parameter to the remote page, e.g. an ID of an object in your app, which could look something like: src="http://example.com/some_page/{form.id}"
Advanced Attributes
height
height
Version compatibility
height
was introduced in version 4.41.0 of the JourneyApps Container.
Optional
Type: number
Default: 50px
Specify the height (in pixel) of the html
component.
show-fullscreen-button
show-fullscreen-button
Version compatibility
show-fullscreen-button
was introduced in version 4.41.0 of the JourneyApps Container.
Optional
Type: boolean
Default: false
Shows a fullscreen button that allows the user to view the html
component in fullscreen mode.
show-if
and hide-if
show-if
and hide-if
Component Methods
The following component methods are available when assigning an id
to the component and calling component.html({id:'my_id'})
from JS/TS:
on()
on()
on(command: string, (param1?: any, ..., paramN?: any) => any)
Listen for messages sent from the html
component to the app or from the app to the html
component using either the post()
or postNonBlocking()
methods. The method listens for messages on the specified command
.
Behavior since runtime version 4.86.4
As of runtime version 4.86.4, registering a callback for a command
using the .on()
method will clear any callback already registered for that command
on the specific component and view.
In prior runtime versions, subsequent callbacks registered for a command
on a specific component and view were ignored.
See more details in this section about communicating with the html
component.
post()
post()
post(command: string, param1?: any, ..., paramN?: any) : Promise<any>
Send a message from the html
component to the app or from the app to the html
component. The application will show a blocking spinner when posts are executed. The message is received on the other side by listening for the specified command
using the on()
method.
See more details in this section about communicating with the html
component.
Known limitation
It is not possible to post
messages from your view's init()
function. If your html
component needs data from the view on view initialization, you should:
Send a message from the
html
component to the app when yourhtml
component'sload
event fires.Register a
on()
callback in your view'sinit()
function which responds to the message in step 1 with the necessary information.
Basic example:
Example with parameters:
will pass three parameters to 'get-value'
: 1
, 2
and 3
.
postNonBlocking()
postNonBlocking()
postNonBlocking(command: string, param1?: any, ..., paramN?: any) : Promise<any>
Send a message from the html
component to the app or from the app to the html
component, without showing a blocking spinner. The message is received on the other side by listening for the specified command: string
using the on()
method.
See more details in this section about communicating with the html
component.
deregister()
deregister()
deregister(command: string)
Clear a specific or all on()
callbacks for a html
component on a view.
Example: Clear all callbacks for the targeted html
component on the current view:
Example: Clear all callbacks for the mounted
command for the targeted html
component on the current view:
See more details in this section about communicating with the html
component.
Last updated