In this blog, we are going to see a transactional FIORI application, which is built using the RAP-managed framework. Many steps are involved in making this application. To begin with, I will show the final output, and then we can understand which kind of application we will develop.
This sample Fiori application is built on the cloud project.
In Image 1, we are going to see the highlighted parts. For example, how to attach a value help for the selection field, how to place an input field, how to make an input field mandatory, how to create a custom button (show/hide scenario based on some conditions), how to make an input field to have range data (e.g., date), how to make a dropdown in an input field, how to show the total count of the data in the line item heading, how to attach an icon in the line item.
Image 2: List Object Page – How to display the list object page as navigation for header data as well as item data and the association
Image 2.1 Bookings tab that is related to image 2.
For this FIORI application, we need to create a package. Then we go on to make the following;
- Data elements, Domains.
- Database Tables.
- CDS views (Basic view, composite view, consumption view).
- Metadata Extensions.
- Behavior definitions.
- Behavior Implementation (class).
- Service Definition.
- Service Binding.
Creating a Package:
Open Eclipse / SAP HANA studio and open the cloud project. Right-click the cloud project, and there will be an option to create an ABAP package. We can make our package over there.
ZBLOG_KEEKEE is the package.
After creating the package, we will make the root view entity.
In this root view, we have used
One db table: zfe_atrav_001001–>, will give our FIORI application’s demo data.
If we create our db table, we need to insert data for that table using class as it is a cloud-based application. So, I have used the existing table itself.
1 standard view entity: /DMO/I_agency –> for agency data
Three custom cds views:
- Ycds_overall_text_7b –> which is going to give the Overallstatus as text in the FIORI application,
- Ycds_image_store_7b –> which is going to give the logo for the FIORI application,
- Ycds_booking_7b –> booking data.
1) ycds_overall_text_7b —>
We need to create both YCDS_Overall_stat_7B and YCDS_Overall_text_7B together and to activate both at the same time using this icon in the eclipse/ SAP HANA studio as it is dependent view entities.
2) YCDS_IMAGE_STORE_7B—>
This table will be filled by the class ‘ycl_image_storing_data_7B’, which is pasted at the end.
3) YCDS_BOOKING_7B —>
In the view entity ycds_booking_7b —> we have used
- Zfe_abook_001001 –>table which will have booking data (I have used the existing ones)
In the interface view zi_fe_carr_001001_7B, we have used zfe_acarr_001001–> existing table for airline data and I_Currency –> standard cds view for currency data.
After this activate both YCDS_BOOKING_7B and YCDS_TRAVEL_7B at the same time.
Now create a projection view for YCDS_TRAVEL_7B —> ycds_travel_projection_7b
define root view entity YCDS_TRAVEL_PROJECTION_7B
provider contract transactional_query
as projection on YCDS_TRAVEL_7B
Value help for customer, if you click the customer input field, it will show the value help
In the above projection view, ycds_travel_projection_7b —> create ycds_booking_projection_7b (can be activated at the same time)
/DMO/customer –> standard cds view for customer data
YCDS_OVERALL_TEXT_VH_7B –> value help for overall status
In the above cds, we have used:
/dmo/oall_stat_t –> standard table with overall status with text and language
YCDS_Overall_stat_7B –> custom cds view
In the cds YCDS_Overall_stat_7B we have used
/dmo/oall_stat –> standard table for status
YCDS_Overall_text_7B –> YCDS_Overall_stat_7B —> need to be activated at the same time.
After activating both the projection views:
YCDS_TRAVEL_PROJECTION_7B, YCDS_booking_PROJECTION_7B
We need to create metadata extensions for both the projection views:
Right click the ycds_travel_projection_7b –> create metadata extension :
“for identification”
Before that we need to create a message class : ycl_msg_travel_7b –> to use in the beh impl class
In the behavior definition :
managed implementation in class zcl_cds_travel2_7B unique;–> place the cursor on the class name –> ctrl + 1 –> it will create the class –> behavior implementation
We are going to write our custom code in the behavior implementation class only.
CLASS zcl_cds_travel2_7b DEFINITION PUBLIC ABSTRACT FINAL FOR BEHAVIOR OF ycds_travel_7b.
ENDCLASS.
CLASS zcl_cds_travel2_7b IMPLEMENTATION.
ENDCLASS.While open the class, it will show the local class which is generated.
Select the highlighted service definition –> click –> publish
We can view the output as FIORI screen by selecting main entity projection and preview button
Output :
We can view the OData metadata, by using the service URL in the service binding.
After clicking the service URL:
We can see the main entity and in case any activation error in the service binding, we can see that in the service URL.
https://6654aaf7-905f-48ea-b013-3811c03fcba8.abap-web.us10.hana.ondemand.com/sap/opu/odata4/sap/ycds_travel_bind_srv_7b/srvd/sap/ycds_travel_srv_7b/0001/$metadata –> we can see the full metadata on the page.
To insert data in the yimage_store_7b table and also the table for currency text ytext_curr_t_7b, we need to create a class –>
pic_url = ‘https://raw.githubusercontent.com/SAP-samples/fiori-elements-opensap/main/week1/images/airlines/Green-Albatross-logo.png‘ )
( travel_status_id = ‘A’ travel_status_text = ‘Accepted’
pic_url = ‘https://raw.githubusercontent.com/SAP-samples/fiori-elements-opensap/main/week1/images/airlines/Fly-Africa-logo.png‘ )
( travel_status_id = ‘X’ travel_status_text = ‘Rejected’
pic_url = ‘https://raw.githubusercontent.com/SAP-samples/fiori-elements-opensap/main/week1/images/airlines/Green-Albatross-logo.png‘ )
)
Once class is created, activate it and run as ABAP application(console), both the tables will be filled by the given values.
What are the annotations in the behavior definition works :
managed implementation in class zcl_cds_travel2_7B unique;
strict ( 2 ); //to check whether all syntax are up to date
with draft;
//strict ( 1 );
define behavior for YCDS_TRAVEL_7B
persistent table zfe_atrav_001001 //our base table
draft table zfe_dtrav_00107B //draft table which is going to save the changes while create or update any data // those changes will be updated to this draft table.
If we didn’t discard the draft, it will be stored in the draft table. We can use that if we need this.
After saving , ycds_travel_projection_7b will be saved currencytext as Indian currency.
For other overall status, that custom button will be disabled.
Calculation of total price in the popup message :
After create –> press –> we can give the description and continue
You will be able to see this object page screen:
Output in the Projection view:
Some additions to the FIORI Object page:
To display Status as highlighted color in Object page:
Add this in the metadata extension ycds_travel_meta_7b
Refresh the service binding and see the FIORI output:
To display 2nd object page navigating from the bookings tab in the first object page:
Add some annotations in the metadata extensions (YCDS_BOOKING_META_7B)
If you have an interest in viewing similar content, visit our blog, here.
View our LinkedIn, here.