What is smart field

According to SAP help, Smart controls are a specific category of SAPUI5 controls that have some special features in addition to the standard SAPUI5 features and thus make it easier to use the control in certain scenarios. One important building block of smart controls is the SmartField control that, depending on the OData metadata defined, allows you to renders other controls and, for example, define fields with certain attributes based on the metadata.

All the source code of this example could be found from this link.

In xml view definition, only one SmartLabel and one SmartField are declared.

/wp-content/uploads/2016/03/clipboard1_906985.png

However, in rendered UI, there is additional currency field displayed as well. This is the meaning of “Smart”.

/wp-content/uploads/2016/03/clipboard2_907001.png

How SmartField works

1. SmartField which is bound to Price field is rendered as usual:

/wp-content/uploads/2016/03/clipboard3_907002.png

2. The mock data, Products.json, will be loaded by Mock server and once it is available, success callback is triggered.

/wp-content/uploads/2016/03/clipboard4_907003.png

3. In callback, setElementBindingContext will trigger initialization logic of SmartField:

/wp-content/uploads/2016/03/clipboard5_907007.png

/wp-content/uploads/2016/03/clipboard6_907008.png

4. Here ODataControlFactory will try to get all sap defined annotation from OData Metadata,

/wp-content/uploads/2016/03/clipboard7_907009.png

The picture above highlights some of sap annotations. For a complete list of them, please refer to this link.

Parse logic of all annotations could be find from AnnotationHelper.get<Annotation name>. The example below introduces how sap:unit annotation is parsed.

/wp-content/uploads/2016/03/clipboard9_907013.png

/wp-content/uploads/2016/03/clipboard10_907014.png

The string “CurrencyCode” is returned:

/wp-content/uploads/2016/03/clipboard11_907015.png

At this time, metadata for currency UI element is available and it is ready for creation:

 

/wp-content/uploads/2016/03/clipboard12_907019.png

5. UI element for currency code display is created here:

/wp-content/uploads/2016/03/clipboard13_907020.png

And CSS class sapUiCompSmartFieldUnit is added:

/wp-content/uploads/2016/03/clipboard14_907025.png

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply