Data Model

The Data Model of your application is shown in the Data Structure panel of the development workbench. It shows a hierarchical structure of the fields you need your application to read and write. It's hierarchical structure allows for the creation of structures and tables that help to both categorize and store complex data structures.

When you add a UI control to your form (e.g. Input), you can set the Bound Field property to an existing field in the data mode by either typing in the name or using the search help. If a field does not exist in the data model, you can simply enter in a name in the Bound Field property. This will automatically create a new field in your data model under the root node.

The Data Model has the following characteristics:

Allows hierarchical/nested data model that provides a more logical definition.

Root Node
1. Customer - Individual field of type string
2. Orders - Table for Order header
  1. OrdersStruct - Structure holding the Order header fields
  2. OrderItems - Table for Order items
    1. OrderItemsStruct - Structure holding the Order items fields
Fields can be referenced to SAP Data Elements
More fine-grained definition of model field properties (example field OrderDate is a Date in one part of the model, but String in another part).

Accessing and Manipulating Data in the Data Model through ABAP

A variable CR_DATA is passed into most FAB user-exits in your implementation class that allow much easier interrogation and setting of data in the app at run-time.
FAB auto-generates a nested structure GS_DATA into the definition of the Implementation Class defined in the properties. This can be used for simpler use of the CR_DATA (Type ANY) by simply performing MOVE-CORRESPONDING CR_DATA TO GS_DATA in your implementations. If changing the data use MOVE-CORRESPONDING GS_DATA TO CR_DATA
FAB User exits can directly modify the data upon an Action at run-time and reflect this in the front-end app immediately. Use the structure and technique mentioned in the previous point.

Accessing and Manipulating the Data Model in JavaScript

Fields in the Data Model can be accessed in Javascript using the FAB delivered functions:

Retrieving the value of a field in the Data Model

// Set the value of the variable value to the value stored in the field 'fieldName'
var value = getField('fieldName');

Setting the value of a field in the Data Model

// Set the field with name 'fieldName' to the value 'Value'
setField('fieldName', 'Value');

// Set the field with name 'fieldName' to the data contained in the variable value
var value = 'New Value';
setField('fieldName', value);

Within JavaScript too it is easier to get/set data in the model. The data in the app at run-time has the same structure as represented in the FAB/ABAP Data Model Note only that it is in JSON format. Here we know of it more as the ‘Model’, and we can access it via standard JavaScript Code or more efficiently use the FAB delivered functions.

For example: getField(“Orders”) will retrieve the array of Orders

Here the first Order contains 2 OrderItems and the second as 3.

You can access the OrderItems of the a particular index using the syntax getField("Orders/0/OrderItems")

Copying Data Model from Another App

Copying a Structure/Table:

Create a new Structure or Table in your new Application named exactly like the one you wish to copy.
Provide the Application Name of the Source App in the Reference FAB Project property.
Provide the Structure name of the structure you are copying in the Reference Node property.
Right click the Structure and select Add Fields from FAB Reference Project.
The fields will be copied from the Source App.
Set the Direct Type Declaration to true or false. If set to true, the structure is declared in the implementation class (GS_DATA) and it assumes all the properties of the specified data type. If set to false, the structure is declared as a custom type.

Copying an Entire Data Model (From the Root Node)

Set the Reference FAB Project as the Application Name of the source Application
Right click the Structure and select Add Fields from FAB Reference Project.
The fields will be copied from the Source App.

Sample FAB Application

Upload this XML file in the FAB Workbench (TCODE /IQX/FAB)
ADAM_DEMO_DATA_MODEL_000001.xml
Create a class in SE24 with the name YCL_ADAM_DEMO_DATA_MODEL. Once created, switch the Class in Source Code-Based mode by clicking on then copy and paste the code from the file below. Activate the class
YCL_ADAM_DEMO_DATA_MODEL

FAB 3.2