Chapter 6. Modify the Client App

Change the Client App to also show the timestamp property from the received server response.

First, create a placeholder for the response.

  1. Navigate to the Apps, Cloud Apps & Services page.
  2. Open the Cordova App Client App.
  3. Open the Editor.
  4. Open the www/index.html file.

  5. Add a new <div> that will show the received timestamp.

    This element acts as a placeholder for the received value.

    Find this line: 

    <div id="cloudResponse" class="cloudResponse"></div>

    Replace it with the following: 

    <div id="cloudResponse" class="cloudResponse"></div>
<div id="timestamp" class="cloudResponse"></div>
  6. Save the changes using File > Save, or using the Ctrl + S keyboard shortcut (Windows) or cmd + S keyboard shortcut (Mac).

Modify the handler of the Say Hello From The Cloud button to use the received timestamp value to populate the placholder.

  1. Open the www/js/hello.js file in the editor.

    This file contains a click handler for the Say Hello From The Cloud button, which uses the $fh.cloud API to call the /hello endpoint of the Cloud App and populates the placeholder <div id="timestamp"> element.

  2. Set the placeholder to the received timestamp value.

    Find the following code: 

    document.getElementById('cloudResponse').innerHTML = "<p>" + res.msg + "</p>";

    Replace it with the following: 

    document.getElementById('cloudResponse').innerHTML = "<p>" + res.msg + "</p>";
document.getElementById('timestamp').innerHTML = "<p>" + res.timestamp + "</p>";

  3. Save your changes.

    The preview will update automatically.

  4. Click Say Hello From The Cloud in the preview.

    The area below the button now also contains a long string of numbers, which represent the time stamp. If it does not work, try refreshing the page.

    Timestamp