FAB's primary container for the field values are stored in the the Fields area Area Section of the application definition. For every Bound Field, this assignment should be reflected in the Fields area. FAB provides an automated way of creating the Field Name when it is assigned to the Bound Field of the element.
![](https://iqxbusiness.atlassian.net/wiki/download/thumbnails/267124737/image2018-6-8_11-49-15.png?version=1&modificationDate=1528422558285&cacheVersion=1&api=v2&width=800)
The Fields can be accessed in Javascript using the FAB delivered functions:
getField("fieldName")
setField("fieldName", value)
...
Tip |
---|
|
It is highly recommended to mark the Use Data Model from the Properties sections and use the FAB Data Model Node in building up the fields, structures and structures tables list. The fields from the FAB Data Model Node will still have to be assigned to the Bound Field of the relevant control element. This will in turn create the same field list in the Fields Area Section like what has been exhibited in the above example. ![](https://iqxbusiness.atlassian.net/wiki/download/attachments/267124737/image2018-6-8_11-59-32.png?version=1&modificationDate=1528423175549&cacheVersion=1&api=v2)
Info |
---|
Synchronize the fields in the Data Model Node from the fields in the Fields Area Section by using the option Adopt from Fields and Tables as shown below
Image Added
|
FAB Data Model Node is similar to the Fields with the following additional characteristics: - Allows hierarchical/nested data model
Image Removed- that provides a more logical definition.
Image Added Root Node
- Customer - Individual field of type string
- Orders - Table for Order header
- OrdersStruct - Structure holding the Order header fields
- OrderItems - Table for Order items
- OrderItemsStruct - Structure holding the Order items fields
- Fields can be referenced to SAP Data Elements
Image Removed Image Added- More fine-grained definition of model field properties (example field
IDATU - OrderDate is a Date in one part of the model, but String in another part).
Image Added
Advantages of using the FAB Data Model Node FAB - Efficient runtime execution resulting to optimised performance
- Provides a variable CR_DATA in most FAB user-exits that allow much easier interrogation and setting of data in the app at run-time. Instead of working primarily with the [Field Name / Field Value] pairs, it works directly with ABAP nested structure to use exact field names and data types which promotes easier access and coding.
Image Removed FAB User exits can directly modify the data upon an Action at run-time and reflect this in the front-end app immediately. Image Added
- 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
Image Added - 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.
- Within JavaScript too it is easier to get/set data in the model.
- Provides a more logical definition of the app allowing reference to nested structures. It allows a nested definition of the data that translates to the JSON representation of the data at run-time.
How to use the - 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
Image Added
Here the first Order contains 2 OrderItems and the second as 3.
Image Added
You can access the OrderItems of the a particular index using the syntax getField("Orders/0/OrderItems")
Image Added
How to use the FAB Data Model Node. - Mark the Use Data Model in the properties of the application
- Right click on the Project and select Add Data Model
![](https://iqxbusiness.atlassian.net/wiki/download/thumbnails/267124737/image2018-6-8_14-41-41.png?version=1&modificationDate=1528432903747&cacheVersion=1&api=v2&width=320)
- Right click on the Root Node and select either of the following:
-Add Field - to add individual fields -Add Structure Type Node - to add structures -Add Table Type Node - to add table types -Adopt from Fields - choose this option to copy the Fields into the Data Model Root Node
![](https://iqxbusiness.atlassian.net/wiki/download/thumbnails/267124737/image2018-6-8_14-42-24.png?version=1&modificationDate=1528432946505&cacheVersion=1&api=v2&width=320) - Assign the Data Model field into the Bound Field of the control
![](https://iqxbusiness.atlassian.net/wiki/download/thumbnails/267124737/image2018-6-8_14-47-24.png?version=1&modificationDate=1528433246847&cacheVersion=1&api=v2&width=320)
- Access the fields in Javascript using the FAB delivered functions and in FAB User Exits by referring to the variable CR_DATA
Note: If the Data Model is not selected in an app, and the option 'DoNotSave' is checked in the bound field of an input field, the data entered onto that particular field doesn't get saved in the backend table /IQX/FORMS_INST. Image Added
|
Sample FAB Application
Upload this XML file in the FAB Workbench (TCODE /IQX/FAB)
View file |
---|
name | ADAM_DEMO_DATA_MODEL_000001.xml |
---|
height | 250 |
---|
|
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
Image Added then copy and paste the code from the file below. Activate the class
View file |
---|
name | YCL_ADAM_DEMO_DATA_MODEL |
---|
height | 250 |
---|
|
Related articles
Filter by label (Content by label) |
---|
showLabels | false |
---|
max | 5 |
---|
spaces | com.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@223dfe |
---|
showSpace | false |
---|
sort | title |
---|
type | page |
---|
cql | label = in ("properties","app-life-cycle","fabworkbench") and type = "page" and space = "IFAB" |
---|
labels | list-control |
---|
|
...