WebView

The WebView is an area on a card or a completely separate Anveo page of the map type on which web content can be displayed. This can be used to create charts, tables or to display product images from the Internet, for example.

Requirements

To use the WebView, the Anveo Client Suite version 11 and the current app versions are required.

Objects

No separate objects are required for the WebView.

Technical details

The WebView is primarily an HTML page for display. When loading an Anveo page, data must be transferred to the HTML page, which can then be displayed on it. In our examples we use the JavaScript library Vue.js.

When the Anveo page is opened, the data is passed to a JavaScript command and processed there for further display. Therefore the following function is required in the JavaScript file:

function WebViewDataLoaded(name, value) {};

In the OnAfterGetRecord of the Anveo page, the data and fields are then passed to the WebView using the new page command PAGE(‘SETWEBVIEWDATA’). The basis of the WebView is an Anveo action code of type HTML. The associated action code of the type JavaScript is stored as a library in the HTML action code.

The HTML page can also be modified via CSS. For this, an action code of type CSS must be available, which is stored as a library in the HTML action code.

Anveo Script commands

Anveo Script Command for passing data to the WebView. This is used in the Anveo page in the OnAfterGetRecord. Each call executes the JavaScript function: WebViewDataLoaded(name, value) {};. This must therefore always be contained in a JavaScript file.

WebViewDataLoaded(name, value) {};

The JavaScript part of the PAGE(‘SETWEBVIEWDATA'[…]); function. This is always called when the PAGE command is executed. This function processes the transferred data for the display.

PAGE('SETWEBVIEWDATA', String Fieldname, String Variable name, Record / String Value, String Columns);

This function loads data into the WebView

WebView Fieldname
String

Specifies the field name of the WebView on an Anveo page that is updated by the SETWEBVIEWDATA command. Can be empty if the Anveo page is of the WebView type.

WebView variable name
String

Value of the first parameter of the WebViewDataLoaded(name, value) function called in the JavaScript action code.

Value
Record/Value

Specifies a filtered and sorted data record. If a record is specified, the last parameter must be filled. Can also be passed as string. This then corresponds to the value of the second parameter of the WebViewDataLoaded(name, value) function, which is called in the JavaScript action code.

Columns
String

If the Record/Value parameter contains a value, a comma-separated string of field numbers must be passed. An object is then automatically generated from this and the data record for transfer to the function. If the string is empty, only the primary key fields are passed.

RunScriptOnRecord(String ActionCode, parameter);

This command executes the specified Anveo action code from the JavaScript file. As an example, the transferred data is processed here and the synchronization is triggered. The specified action code must be stored in the HTML action code as a library.

Anv_Debug(String Message);

Debug command to display Debug messages in the device’s runtime log.

Examples

You can find an example in our Sales App. Here, for example, we display the order lines in another tab on the sales order card via the WebView. In the main menu you will find the item Top Customers. A chart diagram is displayed here.

In the Anveo Service App, an overview of the articles and times entered opens before a service order is signed. The signature can then be made.