HTML Advanced Topics
Last updated
Last updated
html componentInclude the in your html component (see section ) 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
The 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 .
For more complex HTML projects, the recommended approach is compiling the package locally using webpack. See an example of this approach .
html component from JS/TSThe html component can be referenced from your view's JS/TS by assigning an 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:
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.
Example image:
When using the same image multiple times, define it in CSS. Example:
JavaScript is supported.
See the or component methods.
See the component method.
The workaround is to embed the resources inside the HTML file by encoding them in base64 format, using the .
may be useful to encode images in base64 format / generate Data URIs.