html
Last updated
Last updated
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:
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:
src
Optional
Type: string
Default: unset
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}"
height
Optional
Type: number
Default: 50px
Specify the height (in pixel) of the html
component.
show-fullscreen-button
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
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
.
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.
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 your html
component's load
event fires.
Register a on()
callback in your view's init()
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(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.
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:
In apps, App packages can also act as a source for a html
component. Please see the for further information.
Path to the HTML . The value provided can be a if you need to dynamically specify the path or URL of the HTML file.
The following component methods are available when assigning an to the component and calling component.html({id:'my_id'})
from JS/TS:
See more details in about communicating with the html
component.
See more details in about communicating with the html
component.
See more details in about communicating with the html
component.
See more details in about communicating with the html
component.