Creating User Interfaces
Library WebUI Home

Overview

Startup & Operation Capturing & Displaying data Styling with CSS Sale lifecycle

Examples

Hello World / minimal Online Selling Page

Overrideables

User Message User Prompt Device

In Depth

EventSource realtime feed The Fieldpine Object UI Dispatch Data Fields Global Namespace Scripts

WebView2

Barcode Handling

Startup Flow and Operation

There are several ways the user can invoke your selling interface. How your page is started is typically not important as it will have query arguments that provide necessary reference values, or will always be using fixed servers that can be hardcoded.

In all cases, the aim of the startup process is to provide details of where the PosGreen Engine to be used can be reached. This engine might be on a fixed cloud server, or can be an instore server, or even an indvidual computer. As a web designer, you are free to build your page however you wish and will be passed relevant servers and API keys into your page.

PosGreen on Windows

In this model the PosGreen engine resides inside the current computer. Often used on high availability checkouts, or in situations where cloud latency is significant.

When the PosGreen application is started, the user will see a startup page ( see Starting Pos ). If the user elects to run locally then a browser window will open on the current machine to the User Interface URL. This URL can be either local or remote, and query arguments will supply details to the webpage of key values

This screen typically includes a QR code that can be scanned by instore devices (tablets/phones etc). These devices are then directed to the same target URL in tbeir browser, with the query arguments supplying details of which PC they are using.

Fieldpine Online Login

If you connect to Fieldpine Online directly via your web browser then Fieldpine Online will invoke which target web page is to be used. The same query arguments are used if your web page is remote. The PosGreen engine in this case operates on Fieldpine servers

It is permitted to login to Fieldpine Online and have it launch a web page on a remote site. There are a number of security requirements though.

Private Intranet Links

Private Intranet links that simply say "Start Point of Sale" will need a way to determine where the PosGreen engine is running. If you are using Fieldpine Online with SSO options, or you have in house Fieldpine servers then you can either link directly to a selling page that has server addresses hardcoded, or use server discovery techniques

Customer Scanning a QR code

In some cases you may have customers directly scanning a QR code to access a running POS session/sale, or you might be launching a customer facing display. In these cases the startup flow is the same, however your query argument values may be proxy servers etc for security reasons. As a designer however, you create the page as normal, the fact that the page is potentially operating in an insecure context is not immediately relevant. The range of data and operations available to you however may be reduced.

Query Arguments

When your page is launched a number of query arguments are appended to the URL to provide your web page with additional context. You may not need these values and can ignore them if you wish.

Fieldpine Reserve all query arguement names that are 3 characters or less. If you are passing custom query parameters as well, these must have 4 character or longer names.

NameDetails
pThe port your PosGreen Engine is operating on.
kYour session key, which will be required on all API calls
rThe retail RmSystem identifier. This identifies the specific retailer and may be required if you communicate cross origin
fFlags. A bitmask of indicator flags.
1 = User has requested "setup" mode for your page.
sStore Server Address. This is the origin of the active store server. This value is Base64 encoded and needs to be decoded with
let StoreServerOrigin = atob(value)
hHead Office Server Address. The origin of a head office server if one is configured. You typically will not directly require this value. This value is Base64 encoded and needs to be decoded with
let HeadOfficeOrigin = atob(value)

We suggest that your User Interface page includes the script https://fieldpine.com/report/elink/webuiboot.js This script provides assistance logic to decode the query arguments and load the necessary supporting scripts.

Detailed Startup Flow

When using PosGreen locally

  1. Browser opens http://ORIGIN/default.htm
  2. This page is located in the local POS folder and contains minimal logic requesting login details
  3. The page issues a "login" Primitive to the local PosGreen engine using a fetch() request.
  4. The return details from the login fetch include a URL to load, but not any security data. The page loads this target page using
    document.location = targetUrl
  5. The target Url is a local machine URL starting with /Start_xxxx where xxxx is the session identifer. The start page contents are created using the file starttemplate.htm in the local Pos folder. The PosGreen Engine inserts additional javascript into this file
  6. The start html file loads and executes. This page typically parses the arguments and again performs a document.location to the final screen.

Target Page Requirements

After all the startup steps are completed, your page finally receives control.

Step 1. Decode the query args. The script fieldpine.com/report/elink/webuiboot.js contains logic to decode the query arguments.

Step 2. Load the webui.js script. This script contains the helper functions to abstract the primitive calls and interact with the DOM. The WebUiBoot file attempts to load this file from your specific retail server wherever possible so that version consistency is maintained.