There are three components to wiring up the platform to the site:

1. Genie Plugin

This is the core plugin that does all the heavy lifting.

This is simply installed as per any other WordPress plugin.

The plugin files contain a config.js file to set the appSite, formMappingPath and urlProxy etc.

2. Genie Content and Configuration

This is a set of html files that is installed into a "genie-content" folder within the root of the site along with a config file.

Html Files - the core structure of the Genie based functionality

The HTML files are where the core structure for the Genie based functionality is created and contain references to "controls" and "fields" which bind to data sent from the Saasplications system.

Control:

<table class="table table-striped" id="lvPeople" data-ex-bind="data" data-ex-populatemethod="ListMe" data-ex-noitemstext="" data-ex-autopopulate="1" data-ex-candrilldown="true" data-ex-contextobject="People"></table>

Fields:

<div class="form-group frmInline" data-ex-bind="field" data-fieldid="People.FirstName">
<input data-ex-attribute="value" type="text" class="form-control" placeholder="First Name" />
</div>
<div class="form-group frmInline" data-ex-bind="field" data-fieldid="People.LastName">
<input data-ex-attribute="value" type="text" class="form-control" placeholder="Last Name" />
</div>

The key elements here are:

data-ex-bind="field" - tells the system to bind data to the input within this div container

data-fieldid="People.FirstName" - tells the system what field from the system to bind to the control

data-ex-attribute="value" - tells the system what type of information to bind to the control

You can also bind methods to controls to perform functions such as:

data-ex-bind="method" data-ex-method="takePaymentForOrder"

These files also require additional JavaScript to manage on page interactions and actions for any HTML elements on the page (think tabbed interfaces, wizards and other interactive elements).

jQuery(".booking-number").on("field:modelUpdated", function(event, model, view, args) {
if (args.attribute === "value") {
genie.util.setVisibility(view.$el, args.value !== "[AUTO]");

}
});

3. WordPress template files

There is a genie-login.php and genie-page.php template file which needs to be added to the WordPress active theme folder and customised to incorporate the core theme structure around the Genie code.  The Genie code essentially pulls in the html file contents from the genie-content folder with the same name as the WordPress page.

So the WordPress page with permalink booking would pull in the content from genie/content/booking.html

The WordPress pages you want to show Saasplications content will need to set to use the Genie Page template.

If a user tries to access a page or function within the Saasplications system that required authentication then the login screen is automatically displayed using the genie-login.php template but the actual login page still needs to be created in WordPress and set to use the Genie Login template.