The most common feature in building a transactional application is to calculate/ determine fields based on input from dependent fields. In this example, dependent field is Booking Fee while calculated field is Total Price. User expects to see calculated Total Price on entering/updating the Booking Fee without refreshing the page. In most of the tutorials, we get the information on building apps with ABAP RAP.
This blog post helps in achieving the above problem statement to refresh dependent field simply with annotations called SideEffects .
ZUI_RAP_TRAVEL_O2_####
) you generated in the course.2. Preview the application with below steps.
Right click on Preview Application.
Select Start
Fiori Application is opened in a new tab. that means, Basic Fiori app is working similar to RAP Preview.
Navigate to Object page, then update Booking fee but Total Price does not reflect automatically. You can see the new Total Price only after refreshing the page. That means our problem statement is ready.
3. Go to local annotation xml in the path webapp/annotations/annotation.xml
4. Replace the xml content using below code snippet and replace XXXX with your id in the tutorial.
<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
<edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/Common.xml">
<edmx:Include Namespace="com.sap.vocabularies.Common.v1" Alias="Common"/>
</edmx:Reference>
<edmx:Reference Uri="/sap/opu/odata/sap/ZUI_RAP_TRAVEL_O2_XXXX/$metadata">
<edmx:Include Namespace="cds_zui_rap_travel_XXXX"/>
</edmx:Reference>
<edmx:DataServices>
<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="rj">
<Annotations Target="cds_zui_rap_travel_XXXX.TravelType">
<Annotation Term="Common.SideEffects">
<Record>
<PropertyValue Property="SourceProperties">
<Collection>
<PropertyPath>BookingFee</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property="TargetProperties">
<Collection>
<PropertyPath>TotalPrice</PropertyPath>
</Collection>
</PropertyValue>
</Record>
</Annotation>
</Annotations>
</Schema>
</edmx:DataServices>
</edmx:Edmx>
5. Explanation :
6. Now save the annotation file and preview the application
7. Its time to test the feature by changing Booking fee in object page. Now you can see new Total Price automatically.
8. Below is the OData call fired automatically to refresh new value.
GET Travel(TravelUUID=guid'0c8d0000-4107-3e5c-1700-030214461038',IsActiveEntity=false)?$select=TotalPrice
Watch below clipping for demo.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
5 | |
4 | |
3 | |
3 | |
3 | |
3 | |
2 | |
2 |