Custom Screens API

NoahFace can display a custom screen whenever a user is identified, which gives you complete flexibility in the user experience you deliver to your users. Custom screens also allow you to integrate tightly with other systems, displaying information sourced from them, and even update them. For example, you might want to support complex searching on a project database, or display detailed information about an employee's current shift.

To implement a custom screen, you simply design it using HTML, host it on your Web server, and configure NoahFace to call it.

Configuring your Custom Screen

Configure your Access Point Type to use a Screen Type of Custom, and then specify any of the following Screen Details options:

• url. The address of your custom screen.
• size. Whether your custom screen should be small (ie: occupy the bottom 50% of the screen), medium (ie: occupy the bottom 90% of the screen), or large (ie: occupy the full screen).
• message. The message to display at the top of the screen under the greeting (only valid for size=small and size=medium.
• ‍cache. Whether you want your custom screen to be retrieved from cache always, never, or using the default caching policy. Specifying a cache=always will enable your custom screen to be used offline, without a network connection, even if your Web server does not indicate that it can be cached.‍
• mode. Specify mode=auto if you want NoahFace to automatically log an event, or mode=manual if you want your custom screen to control if and when an event is logged.‍
• query. Specify query=true if you want your custom screen to be passed data via query parameters.

For example, you might specify the following Screen Details options:

       url=https://acme.com/noahface/myscreen.html, cache=always

Client-Side Data Access

NoahFace passes data to your Web page via a custom JSON object called NoahFace. This object contains the following elements:

• org. The name of the organization.
• site. The name of the site.
• device. The name of the device.
• devid. The device identifier.
• facility. The facility code of the organization or site.
• userid. The unique identifier of the user from your user directory (ie: SyncGuid).
• number. The business-defined number for the recognised user, such as an employee number or membership number.
• name. The preferred name of the user.
• firstname. The first name of the user.
• lastname. The last name of the user.
• usertype. The type of user.
• language. The preferred language of the user.
• cardnum. The card number of the user.
• access. If you have specified mode=auto, then this will contain one of the following values: success, failure, or warning.
• temperature. If you are using a temperature screening kiosk, this will contain the measured temperature.
• elevated. If you are using a temperature screening kiosk, this will indicate whether the temperature was elevated.
• eventtype. The type of the last event for this user (if any).
• eventtime. The time of the last event for this user (if any).
• eventdetails. The details of the last event for this user (if any).
• utc. The current time in the UTC timezone.
• time. The current time in the local timezone.

You can access these elements from Javascript using standard dot notation (eg: NoahFace.firstname) as needed.

Server-Side Data Access

NoahFace can also pass data to your Web page via query parameters. This is useful if you want to perform integration at the server rather than in the client. To enable server-side data access, specify the query=true configuration option in your access point type.

Note that if you implement server-side data access, your custom screen will not be able to be used offline, so it is important you have an extremely reliable network connection.

Calling Back to NoahFace

Your custom screen can call back to NoahFace to perform the following functions:

• logevent. Log an event to the NoahFace event log. You can optionally specify the event type and event details to be recorded.
• success. Display the animated green tick and return to the home screen.
• failure. Display the animated red cross and return to the home screen.
• warning. Display the animated red exclamation mark and return to the home screen.
• cancel. Return to the home screen.
• notme. Disassociate the matched biometrics and user.

To make a call back to NoahFace, simply post a message to the NoahFace interface, passing it a JSON object containing the appropriate action element. For example:

       window.webkit.messageHandlers.NoahFace.postMessage({"action":"success"});

Note that you would generally only call back to NoahFace if you are using mode=manual, because in the default mode=auto, events are automatically logged.

Vertical Scrolling

To force your HTML content to have a vertical height larger than the displayed viewport (and thus force vertical scrolling), you can set the height of your HTML body relative to the viewport. For example, to set the height to be twice the height of the viewport, you could specify in your CSS:

       body {height:200vh;}

Example

The following HTML illustrates how to access data from NoahFace as well as how to call back to NoahFace to log events:

<!DOCTYPE html>
<HTML>
  <HEAD>
    <STYLE>
      body {margin: auto; width: 90%; text-align: center;}            
      img {display: block; margin-left: auto; margin-right: auto; width: 60%;}            
      h1 {color:#1b1919; font-size:50px; padding-top:10%;}            
      h2 {color:#1b1919;font-size:50px; padding-bottom:5%;}            
      p {color:#1b1919; font-size:28px;}            
      .column {float: left; width: 33.33%; margin: auto;}        
    </STYLE>
    <SCRIPT>            
      function log(mood) {
        if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.NoahFace) {     
          window.webkit.messageHandlers.NoahFace.postMessage({"action":"logevent", "type":"present", "details":mood});     
          window.webkit.messageHandlers.NoahFace.postMessage({"action":"success"});                
        }            
      }     
      function prepare() {
        document.getElementById("greeting").innerHTML = "Hi " + NoahFace.firstname + ",";            
      }
      window.onload = prepare;        
    </SCRIPT>
  </HEAD>
  <BODY>
    <H1 id=greeting class=title></H1>
    <H2 class=title>How Do You Feel Today?</H2>
    <DIV class="row">
      <DIV class="column">
        <IMG src=https://cdn.prod.website-files.com/5a7d17188f34de0001ef34a0/6120287ad948ede0b4484273_Bad.png onclick="log('Bad')"><P>Bad</P></DIV>            
      <DIV class="column">
        <IMG src=https://cdn.prod.website-files.com/5a7d17188f34de0001ef34a0/6120287ae809149f1b0f5368_Meh.png onclick="log('Meh')"><P>Meh</P>   
      </DIV>            
      <DIV class="column">
        <IMG src=https://cdn.prod.website-files.com/5a7d17188f34de0001ef34a0/6120287a8276a4f0a35f6d5c_Good.png onclick="log('Good')"><P>Good</P>
      </DIV>
    </DIV>
  </BODY>
</HTML>

‍

This will result in the following screen being displayed, and when a user presses one of the icons, an event will be logged to NoahFace recording the corresponding mood:

‍

‍

‍