HTML embed from DB

General Q&A
1

Is it possible to embed html within a view, should the string be encoded and stored within the DB?

2

Hi

You can embed static HTML by uploading the static HTML file to you Assets workspace in OXIDE and then referencing the filename inside the <html> in your view.

For example, let’s say you upload a nicely formatted Terms and Condition page called terms_and_conditions.html to the html directory in the OXIDE Assets workspace, then you would access it in the view as follows:

<html src="html/terms_and_conditions.html" />

For more information please check the HTML documentation, available here.

Then, if you want to render dynamic HTML content in the app you will need to use the JourneyApps Iframe Client or serve up an HTML page from Cloudcode using a CloudCode webtask (or your own web server) and have the content of that page be dynamically updated based on data that you either pass to the page or as a result of API / DB queries that the web service makes before rendering the page.

If you decide to use the CloudCode webtask you will be using the URL of the task directly in the View XML <html> component to invoke the GET method and then just ensure you return HTML content in the task.

For example, let’s say you wanted to display a Map with markers in a HTML page, and the markers are being pulled from data in the DB. Then you could have the following:

CloudCode - Task called view_map

import handlebars from 'handlebars';

// This must be defined, and should return either access.authorized() or access.unauthorized()
export async function authenticate({request, access}) {
    return access.authorized();
}

// HTTP GET request
export async function get({params, request, response, authContext}) {
    // Handle the request here

    let mapMarkers = await DB.map_marker.all().toArray();
    let geoJSON = mapMarkers.map(function (marker) {
        return {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [marker.coordinates_lat, marker.coordinates_lon]
            },
            properties: {
                title: marker.title,
                description: marker.description,
                'marker-color': marker.marker_color,
                'marker-size': 'medium',
                'marker-symbol': marker.marker_symbol
            } 
        };
    });


    let mapPage = handlebars.compile(`
        <!DOCTYPE html>
        <html>

          <head>
            <meta charset=utf-8 />
            <title></title>
            <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
            <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
            <style>
                body {
                    margin: 0;
                    padding: 0;
                    height: 800px;
                }

                .map {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    width: 100%;
                    height: 800px
                }
            </style>
          </head>
          <body>
            <div id='map-popups' class='map'> </div>
            <script>
              L.mapbox.accessToken = ''; //  <<<<====== INSERT MAPBOX API TOKEN HERE ======>>>>
              L.mapbox.config.FORCE_HTTPS = true;
              var mapPopups = L.mapbox.map('map-popups', 'mapbox.light')
                .setView([38.8, -95], 5);
              var myLayer = L.mapbox.featureLayer().addTo(mapPopups);

              var geojson = {{{mapMarkers}}}
              myLayer.setGeoJSON(geojson);
            </script>
          </body>
        </html>      
    `);

    
    let data = {mapMarkers: JSON.stringify(geoJSON)};
    let html = mapPage(data);
    
    response.contentType('text/html');
    
    return html;
}

export async function run() {
    // This function is not used for web tasks, but can be used for editor testing
}

View XML

<html src="https://your_custom_doman.poweredbyjourney.com/view_map" show-fullscreen-button="true"/>

Note the src will match the custom domain for you deployment and the name of your CloudCode task

3

Thanks Tielman.

The intended application is to render *.html strings encoded within the DB for a specific object.
With a few modifications, your extract worked perfectly.

1 Like
4

Glad to hear it!

5

Hi,

Is it possible to pass through parameters to the CloudCode task? And how can I do it from the view.js?

6

Hi @sisa-zaza ,

Your question seems to be unrelated to the question that was originally asked in this post. I have created a new post with an answer to your question.