- align
-
Used mainly with label components to specify text alignment. Valid values are:
left, right, justify, centre, and center.
{
"align":"left"
}
- autotext
-
This is only valid with the textbox component. It will prompt the phone to suggest some auto text
options. When set to true the phone's autotext option will prompt the user with some autotext suggestions.
{
"autotext":true
}
- background
-
Set the background colour for the current component. If this entry is used prior to the
components entry, the colour will be applied to the default window. Use the HTML 6 x
hexidecimal characters colour code. For example, "#ffffff" = white. The default value
is the system colour (ie dark or light mode).
{
"background":"#ffffff"
}
- button
-
This entry is only valid in the navigation component. The entry will identify an array
with the following options: position identifies whether the menu will be left aligned or
right aligned; icon if included will identify a menu icon, it will be the name of an image
included in the images folder.
{
"button":{"position":"left", "icon":"hamburger.png"}
}
- cancel
-
Used within a form component. Forms will by default have "Save" and "Cancel" buttons defined.
The value of this entry identifies the method to pass when the "Cancel" button is pressed. The
values from the form will be automatically collected and sent with this value.
{
"cancel":"showCustomer"
}
- cancelNavigation
-
This is the text that will appear on the cancel button. By default the value is "Cancel", however
if you are using a different language you will need to change this.
{
"cancelNavigation":"Annuler"
}
- cell
-
This entry is valid in navigation and table components. It will determine which entries to display, and
the order of those entries.
In the navigation components you can specify three entries, "icon", "text" and "method". The icon entry
will identify an image name from the images folder. The text entry will define the text to be displayed.
The method entry will define the method name to be passed back to the server.
In the table components you can specify which fields to be displayed (we may have downloaded additional
fields that may be used on a later display). Use a "display" entry to name the field to list.
{
"cell":{"icon":"Iconfieldname", "text":"Textfieldname", "method":"Methodfieldname"}
"cell":{"display":"CustomerName"}
}
- clickRow
-
Only valid in the table component. Similar to the method option, specify a function name to run
on the server when a row is clicked. If this option is not specified clicking a row will not perform
any action. The relative row number will be passed as an argument to the function.
{
"clickRow":"selectCustomer"
}
- color
-
Set the text colour for the current component. Note, you can use "color" or "colour" interchangably.
Use the HTML 6 x hexidecimal characters colour code. For example, "#ffffff" = white. The default value
is the system colour (ie dark or light mode).
{
"color":"#000000"
}
- components
-
This is a collection of component entries to display information on the mobile screen.
Each component will define the type of component, the location and size, and the content.
The component entries are described in this document using the label "component-label" and
"component-button" etc.
These components will be displayed in the order they are encountered in the array. If you wish
to modify this order you can manually set the numeric index value of the components array.
{
"components":[{"type":"label", "text":"Hello world"}]
}
- component-button
-
The button component is an entry in the components array with the "type" of "button".
You can include the following entries with a button component: id, background, color, font,
fontsize, align, method, name, onEnter, size, text. Each of these entries are explained
separately in this document.
If the button is clicked the mobile app will send a response to the server app with the "method" value.
{
"components":[{"type":"button", "text":"Okay", "method":"setOkay"}]
}
- component-checkbox
-
The checkbox component is an entry in the components array with the "type" of "checkbox".
You can include the following entries with a checkbox component: id, name, title, value.
Each of these entries are explained separately in this document.
This component is typically used within a form to add/edit a boolean field.
The "title" entry will appear next to the checkbox.
{
"components":[{"type":"checkbox", "title":"Current customer", "value":true}]
}
- component-date
-
The date component is an entry in the components array with the "type" of "date".
You can include the following entries with a date component: id, name, title, value.
Each of these entries are explained separately in this document.
This component is typically used within a form to add/edit a date entry.
The "value" entry can be passed and will be returned in the standard international format: yyyy-mm-dd.
{
"components":[{"type":"date", "title":"Invoice date", "value":"2025-01-20"}]
}
- component-form
-
The form component is an entry in the components array with the "type" of "form".
You can include the following entries with a form component: id, background, size, title,
focus, save, saveNavigation, cancel, cancelNavigation, components. Each of these entries are explained
separately in this document.
The "components" entry will contain an array of components making up the form. This will be a nested
set of components.
{
"components":[{
"type":"form",
"title":"Add a customer",
"save":"saveCustomer",
"components":[{...}]
}]
}
- component-label
-
The label component is an entry in the components array with the "type" of "label". A label
is a simple way of including some text on the screen.
You can include the following entries with a label component: id, color, background, text, align,
font, fontsize, size. Each of these entries are explained separately in this document.
{
"components":[{"type":"label", "text":"Hello world"}]
}
- component-image
-
The image component is an entry in the components array with the "type" of "image". Typically
this will display an image on the screen.
You can include the following entries with a image component: id, name, size, background.
Each of these entries are explained separately in this document.
The "name" is the filename of the image in the images directory.
{
"components":[{"type":"image", "name":"logo.png"}]
}
- component-navigation
-
The navigation component is an entry in the components array with the "type" of "navigation". Typically
this will define a slide-in menu.
You can include the following entries with a image component: id, button, slidefrom, effects,
size, color, background, font, fontsize, data, cell.
Each of these entries are explained separately in this document.
The "data" entry will contain either a list of menu options or a call to a dynamic list.
{
"components":[{
"type":"navigation",
"slidefrom":"left",
"data":[{"text":"Help", "method":"callHelp"
}]
}]
}
- component-password
-
The password component is an entry in the components array with the "type" of "password".
You can include the following entries with a password component: id, background, color, name,
title, onEnter, placeholder, size.
Each of these entries are explained separately in this document.
This component is typically used within a form to add/edit a password field.
The "title" entry will appear within the border of the password field.
The entry box will automatically display the typed characters very briefly before replacing
them with an "*" character. An eye button at the end of the field will allow the user to
view the password value that has been typed.
{
"components":[{"type":"password", "title":"Password"}]
}
- component-scrollview
-
The scrollview component is an entry in the components array with the "type" of "scrollview". Typically
this will display a larger amount of text on the screen.
You can include the following entries with a scrollview component: id, size, background, text.
Each of these entries are explained separately in this document.
The "name" is the filename of the image in the images directory.
{
"components":[{"type":"scrollview", "text":"Carpe diem..."}]
}
- component-section
-
The section component is an entry in the components array with the "type" of "section". Typically
this will draw a box around multiple elements on the screen.
You can include the following entries with a section component: id, title, components.
Each of these entries are explained separately in this document.
The "components" entry is an array of components included in this section.
{
"components":[{
"type":"section",
"title":"Name",
"components":[{...}]
}]
}
- component-select
-
The select component is an entry in the components array with the "type" of "select".
You can include the following entries with a select component: id, name, title, multi,
disabled, options, values.
Each of these entries are explained separately in this document.
This component is typically used within a form to select one of more options.
The "title" entry will appear within the border of the select field.
{
"components":[{
"type":"select",
"title":"Category",
"multi":false,
"options":{1:"A", 2:"B", 3:"C"},
"values":{1:false, 2:true, 3:false}
}]
}
- component-table
-
The table component is an entry in the components array with the "type" of "table". Typically
this will display tabulated data on the screen.
You can include the following entries with a table component: id, size, background, font, fontsize,
data, refresh, section, cell, clickRow.
Each of these entries are explained separately in this document.
The "data" entry identifies a dynamic call to the server to retrieve the data for the table.
The "refresh" entry indicates the gesture required to refresh the data from the server.
The "clickRow" entry generates an event if a specific row is clicked.
{
"components":[{
"type":"table",
"refresh":"Pull to update list",
"data":{"dynamic":"listCustomers"}
}]
}
- component-textbox
-
The textbox component is an entry in the components array with the "type" of "textbox".
You can include the following entries with a textbox component: id, name, title, placeholder, value, autotext.
Each of these entries are explained separately in this document.
This component is typically used within a form to add/edit a text field.
The "title" entry will appear within the border of the text field.
{
"components":[{"type":"textbox", "title":"Description", "value":"Part 23/5"}]
}
- component-textview
-
The textview component is an entry in the components array with the "type" of "textview".
You can include the following entries with a textview component: id, name, title, placeholder, value, initialHeight.
Each of these entries are explained separately in this document.
This component is typically used within a form to add/edit a multi-line text field.
The "title" entry will appear within the border of the text field.
{
"components":[{
"type":"textview",
"title":"Content",
"value":"It was the best of times, it was the worst of times..."
}]
}
- component-web
-
The web component is an entry in the components array with the "type" of "web". Typically
this will display HTML data on the screen.
You can include the following entries with a web component: id, size, background, data.
Each of these entries are explained separately in this document.
The "data" entry contains the HTML to be displayed.
{
"components":[{
"type":"web",
"data":{"html":"Hello world
"}
}]
}
- effects
-
This is only valid in the navigation component. There are two possible entries:
"shrink%" and "shade%". Specify a number between 0 and 100 to define the percentage
of shrinking and shading that should apply to the current when the menu slides out.
{
"effects":{"shade%":50, "shrink%":20}
}
- data
-
This entry can be found in the following components: table, navigation, web.
The data entry
used with the table component needs to handle large amounts of information, for example there
may be 50,000 customers, so when we list customers we don't want to download all 50,000. In
this instance we will use a dynamic configuration where we display the first 40 customers and
if the user wants to page down we will retrieve the next 40 customers, etc. Xpedite will
download a page of records at a time and store them in the cache, so if the user moves backwards
through the list we will retrieve them from a temporary location on the phone. In this instance
the data entry will identify a dynamic method to call to retrieve additional data.
The web entry also allows for a dynamic method to be called, otherwise use the content entry to
include the HTML.
The navigation entry also allows for a dynamic menu, however most menu will be static entries.
{
"data":{"dynamic":"retrieveCustomers"}
}
- focus
-
This is only valid on the form component. It should identify the "name" of the field
that will receive focus when the form is first displayed on the screen. If it is not included
we will default to focus on the first field in the form.
{
"focus":"customer_name"
}
- font
-
Specify the font family to be used for the current component. If the specified font isn't found
we will automatically use the default font.
{
"font":"Arial"
}
- fontsize
-
Specify the font size in pixels to be used for the current component. Just include the pixel number,
do not include any other text.
{
"fontsize":"16"
}
- id
-
An optional ID you can add to any component entry. If there is an error processing a component this ID
value will be included in the error message. The ID value can be any ascii characters.
{
"id":"Customer name text field"
}
- images
-
Xpedite assumes that your images will be stored together in a single folder accessible via a URL.
Here you will define the base URL where the image will be retrieved from. The actual image name
will be included in the component entry.
By default images downloaded will be cached with the mobile app, so each image is only downloaded
once, unless the version of your server app changes - this will cause the cache to be refreshed.
Currently this entry includes a "type" specification, currently the only valid option is "image", however
this type specification is required.
NOTE: Xpedite allows for resizing an image when displayed, however images should be
pre-sized for improved performance.
{
"images":{"url":"https://my.app/resources/images/", "type":"image"}
}
- initialHeight
-
This is only valid with the textview form component. Specify the pixels for the initial height of this
input field.
{
"initialHeight":120
}
- method
-
This entry is used when an event takes place on the mobile app, such as a menu entry selection,
a button being clicked, a form submitted, a table row is clicked, or a dynamic data list is being
refreshed. The method will specify a name such as "listCustomers". We recommend that the value
actually reflects a function on the server, this will make it easier for you to check the function
exists and then call the function passing along any additional arguments.
{
"method":"listCustomers"
}
- multi
-
Only valid with the select component. This option specifies whether you want to allow
multiple selections. The default is false.
{
"multi":false
}
- name
-
The name entries are normally included on form entries. When a form is saved we will send back the
values from the form in an array keyed on this name field. You should use unique name values for
each form field.
{
"name":"customer_name"
}
- onEnter
-
This entry is normally included on buttons or elements where the user might press the enter or return button on
the keyboard. Similar to the "method" entry you will specify a name, typically the name of a function
to run on the server.
{
"onEnter":"setOkay"
}
- options
-
This entry is only valid with the select form component. The options will define an array containing
all of the available options. The array should contain all keys and values for the select entries.
{
"options":{123:"John", 234:"Mary", 345:"Fred"}
}
- placeholder
-
Valid with form field text entries. This is a test entry displayed if there is no current value available.
{
"placeholder":"Enter the students first name"
}
- rc
-
A return code that you send to the mobile app. A value of 0 indicates the function
you ran completed successfully. If an error occurred return a message in this entry, it will be displayed
in a popup dialog.
{
"rc":"Failed to update customer entry"
}
- refresh
-
Only valid in the table component. Specify an instruction to refresh the table, such as "Pull to refresh".
This gesture will then refresh the table with any updated data.
{
"refresh":"Pull to refresh"
}
- save
-
Used within a form component. Forms will by default have "Save" and "Cancel" buttons defined.
The value of this entry identifies the method to pass when the "Save" button is pressed. The
values from the form will be automatically collected and sent with this value.
{
"save":"saveCustomer"
}
- saveNavigation
-
This is the text that will appear on the save button. By default the value is "Save", however
if you are using a different language you will need to change this.
{
"saveNavigation":"Sauvegarder"
}
- setDefaults
-
The ability to configure some default colours and styles prior to drawing a series of components.
If this is set once at the beginning of the conversation then the default values will apply for the
duration of the mobile app operation.
You can set options such as "background", "font", and "fontsize" for example.
{
"setDefaults":{"font":"Arial", "fontsize":12}
}
- size
-
The size entry will define an array of four values. The first two are the x and y co-ordinates
(starting from the top left corner of the screen) of where the component will be placed. The second
two entries of the array are the width and height of the component. As in this example:
{
"size":{"x":0, "y":0, "width":100, "height":100}
}
The values can be any mix of three types. (A) The first type is a logical pixel definition, ie where
x = 10 would indicate 10 pixels from the left hand margin of the screen. (B) The second type is a percentage
of the available window, ie where x% = 10 would indicate a position 10% of the available width from the left
hand margin. (C) The third type is a relative position where we can specify an offset from the previous
component, ie where x+ = 10 would indicate a position of 10 pixels beyond the previous component's right
margin.
There are two special entries that can be used with the x and y co-ordinates. "center-x" or "centre-x" to
position the component in the left/right centre of the screen.
"center-y" or "centre-y" similarly are used to position the component in the top/bottom centre of the screen.
{
"size":{"center-x":1, "y":100, "width%":90, "height":150}
"size":{"center-x":1, "y+":10, "width%":90, "height":50}
}
- slidefrom
-
Only valid with the navigation component. This entry has two values, left or right, to define where
the menu will slide in from.
{
"slidefrom":"left"
}
- text
-
Specifies the text content of the component. This is used for many components like the text on
a button, or the content of a label.
{
"text":"Any text"
}
- time
-
Contains an integer representing the unix time that the data was processed on the server.
{
"time":1344762534
}
- title
-
Used primarily with form components where a title is specified for a field. For example,
the title might be "First name" and this may be displayed in the border area of the field.
{
"title":"Customer name"
}
- token
-
In the "setConnection" function you will generate a unique token (ie GUID) and pass
this to the mobile app. The mobile app will then include this token in every response it sends. You should
use this token as the key for your session handling.
{
"token":"08829e57-56ec-42a8-8b84-061981c054c8"
}
- value
-
Used primarily with form components, this entry will contain the current value when a form is being
created. The value will vary depending on the component. For a "date" field the value will be a date
in the format "yyyy-mm-dd". For a checkbox the value will be true or false.
{
"value":"2025-01-20"
}
- values
-
Only valid within a select form component. This entry will define an array of boolean values, the keys
should match the "options" array. Each values entry should have a true or false value.
{
"options":{123:"John", 234:"Mary", 345:"Fred"}
"values":{123:false, 234:true, 345:false}
}
- version
-
Optionally you can include a version number in your server application. This can be helpful if you are
switching between multiple versions. When the version number changes any cached data on the mobile app
will be erased and a fresh copy downloaded from the server.
{
"version":"P1.213"
}