Demo of NExS Declarative API

The NExS Declarative API for embedded apps allows HTML DOM elements to be linked to cells in embedded NExS apps simply by applying a class name to the element, plus an attribute data-nexs-cell-addr to specify the cell you wish to link to. This provides a simple and powerful mechanism to interact with the app from your web page without need for scripting.

Input and Select elements with the class "nexs__input" will have a bidirectional connection to the cell specified by "data-nexs-cell-addr". When the values of the connected elements are changed, the changed values will be sent the specified cell in the NExS app. Similarly, if values are changed on the app's internal UI, the connected elements will update accordingly.

Currently supported connected DOM elements for "nexs__input" are:

  • input type="text"
  • input type="checkbox"
  • input type="radio"
  • select

DOM elements with class "nexs__output_raw" or "nexs__output_formatted" will have their "innerText" property set to the value of the connected cell whenever the connected cell is updated. The "_raw" and "_formatted" qualifiers pertain specifically to numerical data. If an output cell has the value 5018.97 as is formatted as currency, the "_raw" value is "5018.97" and the "_formatted" value is "$5,019.97".

The syntax for "data-nexs-cell-addr" is: [appRef]viewRef!cellRef where

  • "appRef" is a reference to the embedded NExS app.  Embedded apps may be referenced by name, or by the zero-based order in which they are embedded in the page; i.e., [0] refers to the first embedded app on the page.
  • "viewRef" is a reference to a view within the embedded app.  It may specified as the view name, or the zero-based order of the view within the app; "[0]0!" refers to the first view of the first app embedded on the page.
  • "cellRef" is a reference to a cell within the view.  It may be an explicit cell reference, e.g. "B1", or a cell name; e.g., "myCell".
  • If the appRef and/or viewRef portions of the address are omitted, they default to 0; i.e., the first view of the first app embedded on the page.  For example, if the first (or only) app embedded on the page is named "My App", the first view on "My App" is named "Dashboard", and cell B1 of "Dashboard" is named "Input_1", then all of the following forms for data-nexs-cell-addr are equivalent:
    • [My App]Dashboard!B1
    • [My App]Dashboard!Input_1
    • [0]Dashboard!Input_1
    • [0]0!Input_1
    • [0]B1
    • B1
    • Dashboard!B1
    • Dashboard!Input_1
    • Input_1

Examples:

  • Link an <input> element to editable cell B5 of the first view of the first app (App 0) embedded on the page:

    <input class="nexs__input" data-nexs-cell-addr="B5">

  • Link a set of <input> radio buttons to editable cell B5 of the first view of the first app (App 0) embedded on the page:

    <input type="radio" name="features" class="nexs__input"
        data-nexs-cell-addr="B8" value="Standard"> Standard

    <input type="radio" name="features" class="nexs__input"
        data-nexs-cell-addr="B8" value="Premium"> Premium

  • Link an <input> element to editable cell B5 of the first view of the second app (App 1) embedded on the page:

    <input class="nexs__input" data-nexs-cell-addr="[1]B5">

  • Link a <span> element to output cell B11 of the first view of the second app (App 1) embedded on the page:

    <span class="nexs__output_formatted"
        data-nexs-cell-addr="[1]B11"></span>

In the demo below, the light red boxes contain the "remote controls" for the NExS apps embedded in the light green boxes. You can toggle the visibility of the <div> to demonstrate one way that the UI generated by the nexs platform can be visually removed from the page completely.

NExS App "Remote Control" Demo

Controls for App 0

Square Footage Addition:

Type of Features:
Standard
Premium

Raleigh Zip Code (select widget):

Raleigh Zip Code (radio buttons):
27601
27603
27604
27605
27606
27607
27608
27609
27610
27612
27613
27614
27616
27617

Estimate (formatted):
Estimate (raw data):

Toggle NExS App 0 visbility

 ↔

App 0
 

Controls for App 1

Visits per month:
Cost per visit:

Savings (formatted):

Toggle NExS App 1 visbility

 ↔

App 1