Interact with the Backend From the Frontend

Last updated 4/11/2024

This how to guide will demonstrate how to interact with the backend from the frontend to return values from the server to the client. A small application with just one table that has three fields will be used to demonstrate this.

note

If you want the UI Server Data Transfer application as a reference, click to download the FDF file UIServerDataTF.fdf and you can import this FDF into your Five account.

If you are building the application, you can't have both application ID's called UIServerDataTF.

Figure 1 - UI Server Data Transfer database model

The application has one form that is attached to a menu item. The form has the fields Data and Returned From Server.

Figure 2 - Form fields

Two functions are in the application. One function will execute in the frontend and call the function that executes on the server.

Figure 3 - Functions

The server function is called

ServerFunction()

and this function interacts with the backend to create server data and return it to the frontend.

The second parameter in the

success()

function returns a message that will be displayed in the UI.

A server variable is created called

ValueFromServer

which will contain a string concating a value supplied from the frontend function. The

DataToServer

variable is supplied on the

context

parameter from the UI.

The

setData()

is a function used on the

FiveErrorSuccess

object that allows attaching additional data to a successful response which can either be displayed to the user, or used for other purposes like attaching documents. The Mime type of JSON is used in this function to transfer the data from the backend in JSON format.

Returns the data to the frontend that was excuted on the backend

function ServerFunction(five, context, result)  {
    /////////////////////////////////////////////////////////////////////////////////
    // the second parameter to success is an optional message to display to the user
    /////////////////////////////////////////////////////////////////////////////////
    result = five.success(result, 'Message to UI');

    /////////////////////////////////////////////////////////////////////////////////
    // create server data to be returned to the front ui
    /////////////////////////////////////////////////////////////////////////////////
    const serverData = {};
    serverData['ValueFromServer'] = 'HELLO_FROM_SERVER : ' + context.DataToServer;

    /////////////////////////////////////////////////////////////////////////////////
    // set the data onto the result, and tell five to send it as JSON
    /////////////////////////////////////////////////////////////////////////////////
    result.setData(five.MIMETypeJSON, serverData);

    return result;
}

The UI function is called

UIFunction()

and this function calls the

ServerFunction()

backend function.

This function creates the

DataToServer

variable to assign the value from the Data field which will be sent to the backend using

executeFunction()

on the

Five

object.

The callback provided to

executeFunction()

will be executed upon completion of the server code and will contain the results as provided from the backend. The function ID for the server function needs to be passed in as the first parameter to

executeFunction()

.

The server data that was sent back as JSON and formatted as text is parsed using

JSON.parse()

which is provided from the browser and we use the previously saved

sender

value to access the

dataManager

property on the

sender

which allows us to set the field's value from the backend (data from the server).

Parses the data returned from the backend to enter the value in the frontend

function UIFunction(five, context, result)  {
    // create variables to send to the server
    const variables = {};
    variables['DataToServer'] = five.field.Data;

    const sender = five.sender();

    /////////////////////////////////////////////////////////////////////////////////
    // this call is async, so we wont be waiting for it to return, instead a callback has
    // been passed into the executeFunction to be executed when the data returns
    /////////////////////////////////////////////////////////////////////////////////
    five.executeFunction('ServerFunction', variables, null, '', '', function (result) {
        /////////////////////////////////////////////////////////////////////////////////
        // we can check for errors if necessary as follows :
        // if (result.serverResponse.errorCode === 'ErrErrorOk') {
        //     return;
        // }
        /////////////////////////////////////////////////////////////////////////////////

        const data = result.serverResponse.results;
        const serverData = JSON.parse(data);
        sender.dataManager.setValueByName('ReturnedFromServer', serverData.ValueFromServer);
    });

    return five.success(result);
}

The UIFunction is attached to the On Exit event on the Data form field.

Figure 4 - On Exit event

In the application:

• The value is entered into the Data field.
• Upon exiting the Data field, the
  UIFunction()
  will execute in the client and call the
  ServerFunction()
  .
• The
  ServerFunction()
  will execute and display the message and populate the Returned From Data field with the value from the server.

Figure 5 - Interacting with the backend from the frontend