API REFERENCE

Initialisation

The mobile application begins the conversation by sending the first packet. This will contain the function name "setConnection" along with some detail about the device that is being used.

            {
                "method":"setConnection", 
                "bundleID":"xpedite.software",
                "uuid":mobile phone uuid,
                "bounds":screen dimensions in 'logical' pixels,
                "xpediteVersion":mobile version number
            }
            
When receiving a packet we recommend that you extract the "method" entry as this will identify the local function you should run. In this first packet the method will always be "setConnection". We recommend you create a function called "setConnection" and call this function and pass the array. The setConnection function would typically initialise a session by creating a GUID which will be included in all successive packets within this current session.
NOTE: The mobile app can remain running long after your web server session expires, so it is important to implement your own session management, and we recommend you do this using the GUID you have just created. It will be included in every packet you receive using the entry "token". At this point the mobile app will display the application icon and is awaiting your response for what to do next.

The "method" entry: The method entry will be included in every packet you receive. It identifies the function that you will respond to. The "setConnection" entry is special in that it is the function that the mobile app will send in the first packet. Later when you send interactive components you will identify different method names with these components.

The "bundleID" entry: This identifies the mobile application. Our development mobile app is called "xpedite.software", however when you purchase a subscription you will define your own mobile app name.

The "uuid" entry: All mobile phones have a unique UUID. Usage of this ID is optional. It identifies the phone, not the user.

The "bounds" entry: This information tells you the dimensions of the device screen. You should of course ensure that items you want to be visible should appear within these dimensions. The bounds data for the screen consists of an initial x,y coordinate, followed by the width and the height. For the iPhone 16 base model the bounds would look like this: "(0.0, 0.0, 393.0, 852.0)". For more on phone dimensions see https://www.ios-resolution.com/ and this article https://www.altamira.ai/blog/dimensions-resolution-for-ios-and-android-app-design/ While Apple call these numbers "Points" and Andriod "Density-independent Pixels" or "DP", within Xpedite we will always refer to these as dimensions.

The "xpediteVersion" entry: This is the version number of the mobile app. It will identify when the app was last updated, and potentially whether it includes new functionality that has been released in the latest versions of Xpedite.



The packet you send back will contain at least four items: a return code, a version number, the token, and a components entry indicating what to display on the screen next. This will be a JSON encoded array. For example:

                {
                    "rc":0,                                                 // Just a return code
                    "version":100,                                          // Your version number
                    "token":"08829e57-56ec-42a8-8b84-061981c054c8",         // A unique token used within your session
                    "components":[{"type":"label","text":"Hello world"}]    // Display some text
                }
            

Regular conversation

The packets you send will be similar each time, including two required entries: a return code and a components entry. These array entries are required in every packet you send to the mobile app. The contents can vary.

                {
                    "rc":0,                                                 // Just a return code
                    "components":[{"type":"label","text":"Hello world"}]    // Display some text
                }
            

The packets you receive will be similar each time, including at least two entries that will always be included: the method and the token. (The token is not included in the initialisation packet).

                {
                    "method":"addCustomer",                                 // The function to run
                    "token":"08829e57-56ec-42a8-8b84-061981c054c8"          // Always check your token is valid
                }
            

Protocol entries

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"
                    }