Dynamic content rendering

Help
1

Hi,
How to reflect server-side changes to view pages dynamically without having to refresh the page?
Note: Page is rendered through Losant endpoint via workflow.
Kindly suggest.
Thanks !

1 Like
2

The easiest way is to add JavaScript to your page. jQuery is included in the default experience we generated, so an example could be something like the following:

<script>
  // function that's called whenever button is pressed.
  var getNewData = function() {

    // Makes an ajax call to one of your endpoints for new data.
    $.get( '/your-experience-endpoint', function(data) {

      // Update an element on your page with the new data.
      $('#your-html-element').text(data);

    });
  };
</script>
<div>
  <button onclick="getNewData()">Get New Data</button>
</div>

In this example, the server only renders the page once, but it includes JavaScript that can then be run in the browser. The JavaScript then calls other Experience Endpoints to get new data. Those other Experience Endpoints would just return JSON data instead of rendering an Experience Page.

3

Thanks Brandon. But my requirement is little different.
I want to hit the HTTP request from a Virtual Button/Timer inside the workflow,thereby rendering the changes in the experience views dynamically and not by using a physical button on view page.
Is it possible?

4

Unfortunately that’s not going to be very straightforward to do. The best workaround I’d recommend for now is to use JavaScript in a setInterval to periodically poll an endpoint for data. If the data changes, you can update the page contents. The Virtual Button then just updates a DataTable, Workflow Storage, or whatever. The next time the browser polls, it will receive the updated data.

We’ve been exploring ways to offer streaming Experience Endpoints, which would let you push data from a workflow to the browser. I can’t provide any details on release schedule, but knowing this is something you’d need as well helps us prioritize.

2 Likes