15 of 24: Embedding HTML

Embedding HTML

JourneyApps offers an html View Component that allows you embed HTML snippets into your apps. This 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.

Add Branding to Snag List App

Let's say we wanted to add some branding to the Main View of our Snag List app. We want to embed the following image:

In order to use images in our embedded HTML, it is best to convert them to Base 64 format so that they can be inserted straight into the HTML and displayed offline. A tool such as Image to Base 64 Converter can be used for this purpose. After the image has been converted, you can place it in a minimal HTML file as shown below (create this HTML file using your favorite text editor). We've shortened the Base 64 data in this example — the full Base 64 text required to display the image is quite lengthy.

<html>
  <body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUh[...base64 data snipped...]" />
  </body>
</html>

Now go to the HTML & Icons tab of the Snag List app on the App Editor again, and upload the HTML file.

Now head back to the View XML for the Main View of your app. Let's move our View Components to the right column, and add an <html /> component in the left column, referencing the HTML file we've just uploaded:

    <!-- Components go here: -->
    <columns>
        <column>
            <html src="main-screen.html" />
        </column>
        <column>
            <heading>Welcome to the Snag List app</heading>
            <info>A list of all the snags that have not yet been taken care of are shown below.</info>
            <list bind="selected_item" collection="open_snags" label="Open Snags" emptyMessage="There are no open snags at the moment." type="static" required="true" />
            
            <heading>Please Select an Option</heading>
            <info>Please select an option from the list below.</info>            
            <menu>
                <button label="View Selected Item" subtext="View item comments and photo" link="view_item" validate="true" icon="icons/view.png" />
                <button label="Delete Selected Item" subtext="Permanently delete the item!" onpress="deleteItem" validate="true" icon="icons/delete.png" />
                <button label="Add New Item" subtext="Add a new item with comments and photo" link="add_new" validate="false" icon="icons/add_new.png" />
            </menu>
        </column>
    </columns>

Refresh your app on the mobile device and you should see the branding on the main screen:

Now head over to Section 16 of the tutorial: Form Factors

Previous Section Next Section

Tutorials → How to Build Apps

15 of 24: Embedding HTML

Embedding HTML

Add Branding to Snag List App