HTML Advanced Topics
Version compatibility
Sending messages to and receiving messages from the
html component was introduced in version 4.41.0 of the JourneyApps Container.Include the JourneyApps iFrame Client in your
html component (see section below) to enable bi-directional communication between the component and your app. Some examples where this is useful:- Where data from your application should inform the content of your HTML, e.g. displaying your latest data in a chart
- Where user interactions should update the HTML content
- Where users should be able to interact with the HTML content and the app respond accordingly, e.g. a color picker, where the color picked by the user is further used in the app workflow
For basic HTML projects, referencing the JourneyApps iFrame Client via a CDN should be sufficient. See an example here.
For more complex HTML projects, the recommended approach is compiling the package locally using webpack. See an example of this approach here.
The
html component can be referenced from your view's JS/TS by assigning an id to the component and using component.html({id:'my_id'}) in the JS/TS.If you are including images in your HTML, you may notice that the relative size of the image will appear different on different kinds of mobile devices (e.g. tablets versus smartphones, devices with lower resolution versus higher resolution, etc.). In some cases, the image width might be bigger than the device's resolution, and the image will be cut off.
To remedy this, set the
width CSS property of the images in your HTML file to a percentage. In the example below, we set the width to 100% so that the image is always fitted to the width of the screen:<img style="width: 100%;" src="..." />
The WebKit engine built into the JourneyApps Runtime is used to render the HTML.
With the current implementation, the HTML cannot reference any offline resources stored on the device filesystem. Online resources may be referenced, but connectivity will be required to render them, and it will most probably not be cached.
The workaround is to embed the resources inside the HTML file by encoding them in base64 format, using the Data URI scheme.
Example image:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...RU5ErkJggg==" />
When using the same image multiple times, define it in CSS. Example:
ul {
list-style-image: url("data:image/png;base64,iVBORw0KGgo...ElFTkSuQmCC");
}
JavaScript is supported.
Known limitation
The Android container only supports up to ES5.
Last modified 6mo ago