HTML Advanced Topics

Communicating with the html component

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

Include the JourneyApps iFrame Client

The JourneyApps iFrame Client is a NPM package, so standard NPM practices apply.

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.

Referencing the html component from JS/TS

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.

Sending Messages

See the post() or postNonBlocking() component methods.

Receiving Messages

See the on() component method.

Fitting HTML Images to Screen Width

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="..." />

Notes on the HTML implementation

The WebKit engine built into the JourneyApps Runtime is used to render the HTML.

Resources (images and stylesheets)

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");
}

This tool may be useful to encode images in base64 format / generate Data URIs.

Scripting

JavaScript is supported.

Known limitation

The Android container only supports up to ES5.