Exercise 1: Generate transactional OData UI Service E2E with GenAI and RAP

Introduction

In this exercise, you will create a transactional UI service along with the underlying RAP business object to manage agencies using the GenAI-based ABAP repository object generator (Beta) provided in the ABAP Development Tools for Eclipse (ADT).

You will create an ABAP package, generate all development artefacts using the GenAI-based ADT wizard and a predefined promt with a natural description of the application, and then create am ABAP class to populate demo agency data in the generated database table. The generation will create the required database table, the CDS data model, RAP BO behavior definition, service definition, and service binding. At the end, you will publish and preview your Manage Agencies application using the Fiori Elements App Preview function provided in ADT.

Exercises

1.1 - Create an ABAP Package
1.2 - Generate OData UI Service using GenAI
1.3 - Adjust the Generated UI Service
1.4 - Populate Demo Data
1.5 - Preview the Agency App
Summary & Next Exercise

Reminder:
Don't forget to replace all occurences of the placeholder ### with your suffix or Group ID in the exercise steps below.
You can use the ADT function Replace All (Ctrl+F) for the purpose.
If you haven't been assigned a Group ID, select a combination of three (3) numbers and/or letters, such as e.g. 000 or AI1.

Exercise 1.1: Create an ABAP Package

^Top of page

Create your exercise package.
This ABAP package will contain all the artefacts you will be creating in the different exercises of this hands-on session.

🔵 Click to expand!

In ADT, go to the Project Explorer, right-click on your ABAP Cloud Project, select New > ABAP Package from the context menu.

Maintain the required information provided below. Replace all occurrences of the placeholder ### with your chosen or assigned suffix, which should be a combination of three (3) numbers and/or letters, e.g. 476 or AP3.

ℹ️ The suffix 000 is used for the screenshots in this exercise. Use a different suffix.
- Name: ZRAP120_Agency_###
- Description: Manage Agencies App
- Select the box ✅Add to favorites package
- Superpackage: ZLOCAL
Then click Next >.
Leave the ABAP Package screen unchanged and click Next >.

Select or create a transport request, enter a request description if necessary (e.g., RAP120 - Manage Agencies App ###), and then click Finish to complete the package creation.

Exercise 1.2: Generate OData UI Service using GenAI

^Top of page

Generate an OData UI service using the AI-based RAP BO generator (Beta) provided in ADT.

🔵 Click to expand!

Right-click on your ABAP Cloud project and select Generate ABAP Repository Objects from the context menu.

Select the entry OData UI Service Supported by AI (Beta) in the wizard and click Next >.

Maintain your package name ZRAP120_Agency_### and click Next >.

Clear the promt example, insert the prompt provided below for this exercise, and click Next >.

Do not forget to replace ### with your choosen suffix.

Info: In Exercise 3, you'will have the possibility to play around with the GenAI-based generator and write your own prompt.

Generate an application for managing agencies. 
The agency entity requires the fields agency_id, agency_name, street, postal_code, city, 
country_code, phone_number, email_address, and /dmo/web_address.
Use a numerical data type with length 6 for the field agency_id. 
country_code is a country key with length 3.
Use character like data types for the other fields with length 80 for field agency_name, 
length 60 for field street, length 10 for field postal_code, length 40 for field city, 
length 30 for field phone_number, length 256 for field email_address, and length 256 for field web_address.
Create the object names with the suffix '###'.

The generator shows a preview of all artifacts that will be generated.

ℹ️ Note: The names of the artifacts, database fields, and other elements in your preview may differ from those shown on the screenshots below or used later in this exercise, as they are generated by GenAI and there is no guarantee from the GenAI side.
The ability to customize the suggestions will be provided with future releases.

ℹ️ Note: If you have forgotten to replace ### with your choosen suffix you will get the error message: Object name can only contain characters from syntactical character set
Click Next >, select a transport request, and click Finish to start the generation of all artifacts.

The generation of all artifacts may take a few moments.

Go to the Project Explorer view and check all artifacts that have been generated in your package. You may need to press F5 to refresh your package.

Then go to your service binding ZUI_AGENCY###_O4 which is opened in the editor and click Publish to publish its local service endpoint to view service URL, entity sets, and associations.

ℹ️ List of the generated objects:

Click to expand!

Note: The names of the artifacts generated in your exercise package may differ from those listed in the table below, because they are generated by GenAI and there is no guarantee from the GenAI side.

Object Category	Repository Object Type	Artefact Names
Business Services
	Service Definitions	`ZUI_AGENCY###_O4`
	Service Bindings	`ZUI_AGENCY###_O4`
Core Data Services
	Behavior Definitions	`ZR_AGENCY###` - Base BO behavior definition
		`ZC_AGENCY###` - BO behavior projection
	Data Definitions	`ZR_AGENCY###` - Base BO composition model
		`ZC_AGENCY###` - Projected BO composition model
	Metadata Definitions	`ZC_AGENCY###` - Metadata extension for the projection view
Dictionary
	Database Tables	`ZAGENCY###` - Database table for storing active data
		`ZAGENCY###_D` - Database table for storing draft data
Source Code Library
	Classes	`ZBP_C_AGENCY###` - Behavior implementation class for the projected BO
		`ZBP_R_AGENCY###` - Behavior implementation class for the base BO

The exposed entity Agency now appears in the Entity Set area. You can directly launch the Fiori Elements App Preview in ADT to start the app in the browser or you can proceed to the next exercise to populate the demo data in the application by filling the database table with the Agency demo data.

The preview of the Manage Agencies app is now displayed in the browser without any data.

⛔ Attention ⛔
DO NOT yet create any agency records in the app yet, as you'll be adjusting the generated database table definitions in the next step.

Exercise 1.3: Adjust the Generated UI Service

^Top of page

Typically, you will need to adjust the generated repository object to fit your use case. For example, you can adjust the data type of the database table fields, adjust the consumption view to enrich the projected data model, and adjust the metadata extension to change the Fiori app layout.

In the present exercise, you will eventually have to adjust the data type of the agency ID in the database tables for active and draft data. The data type of this field should be a numical text with length 6, i.e. abap.numc(6).

⚠️ PS: The names of the generated repository objects and fields in your exercise package may differ from those used in the description, code snippets, and screenshots below.

Exercise 1.3.1: Adjust the Generated Database Tables

In this exercise, you will eventually have to adjust the data type of the agency ID in the database tables for active and draft data. The data type of this field should be a numical text with length 6, i.e. abap.numc(6).

🔵 Click to expand!

Go to your package in the Project Explorer, open the database tabl ZAGENCY### for storing the active agency data and replace the data type of the field agency_id with abap.numc(6) if necessary. Then save and activate the changes.

Do the same for the database table ZAGENCY###_D for storing the draft agency data, and replace the data type of the field agency_id with abap.numc(6) if necessary. Then save and activate the changes.
```
 abap.numc(6); 
```

Exercise 1.3.2: Adjust the Consumption view

You can also go ahead and adjust the projected data model by defining value helps in the CDS projection view (ZC*) to ease the data maintenance in the app.

🔵 Click to expand!

Go to your package in the Project Explorer and open the the projection view ZC_AGENCY###
specify the field element AgencyId as semantic key for the application by add the view annotation below.
```
 @ObjectModel.semanticKey: ['AgencyId']
```
Also specify the projection view as searchable by adding the following view annotation as shown on the screenshot below:
```
@Search.searchable: true
```
Enable the fuzzy search, i.e. a full-text search with the error tolerance (fuzziness threshold) 0.8, for the element **AgencyName**by specifying the following annotation block directly before the element:
```
@Search: {
  defaultSearchElement: true,
  fuzzinessThreshold:  0.8
}
```

Now, add the element annotation block below just before *AgencyId in the select list to define a value help for the agency ID. The additionalBinding annotation will help automatically filling the related fields AgencyName, Street, PostalCode, and City at the same time.

 @Consumption.valueHelpDefinition: [{
       entity : {name: '/DMO/I_Agency_StdVH', element: 'AgencyID'  },
       additionalBinding: [ { localElement: 'AgencyName',  element: 'Name',         usage: #RESULT },
                            { localElement: 'Street',      element: 'Street',       usage: #RESULT },
                            { localElement: 'PostalCode',  element: 'PostalCode',   usage: #RESULT },
                            { localElement: 'City',        element: 'City',         usage: #RESULT } ],
       useForValidation: true }]

Save and activate the changes.

Exercise 1.3.3: Adjust the UI Semantics

In this exercise, you will adjust the application layout by adjusting the UI semantics in the CDS metadata extension.

🔵 Click to expand!

Go to your package in the Project Explorer and open the generated CDS metadata extension ZC_AGENCY###.
Adjust the @headerInfo annotation by specifying AgencyId as title value and AgencyName as description.

For that, simply replace the line @UI.headerInfo.title.value: 'Uuid' with
```
@UI.headerInfo.title.value: 'AgencyId'
```
Replace the line @UI.headerInfo.description.value: 'Uuid' with
```
@UI.headerInfo.description.value: 'AgencyName'
```
Insert the code snippet below to specify Agency as type name and Agencies as its plural in the header info:
```
@UI.headerInfo.typeName: 'Agency'
@UI.headerInfo.typeNamePlural: 'Agencies'
```
Adjust the filter bar by removing some fields by deleting or commenting out (//) the element annotation block @UI.selectionField as shown in the screenshot below.

For example, remove AgencyName, Street, PostalCode, CountryCode, PhoneNumber, EmailAddress, and WebAddress - from the filter bar.
Adjust the list table on the entry page by removing some of the table columns by deleting or commenting out (//) the element annotation block @UI.lineItem as shown in the screenshot.

For example, remove following table columns - e.g. Street, PostalCode, CountryCode, PhoneNumber, EmailAddress, and WebAddress.
Remove the adminstrative fields and their related annotations from the metadata extension: LocalCreatedBy, LocalCreatedAt, LocalLastChangedBy, LocalLastChangedAt, and LastChangedAt.
Save and activate the changes.

Exercise 1.4: Populate Demo Data

^Top of page

Create an ABAP class to generate demo employee data.

ℹ️ PS: This step is optional, as it will only fill your app with demo data. You can skip to Exercise 1.4 if you prefer.

🔵 Click to expand!

Right-click your ABAP package ZRAP120_AGENCY_### and select New > ABAP Class from the context menu.

Maintain the required information (### is your group ID) and click Next >.
- Name: ZGENERATE_AGENCY_DATA_###
- Description: Generate demo agency data
Select a transport request and click Finish to create the class.

Replace the default class template with the source code provided below and replace all occurences of the placeholder ### with your suffix using the Replace All function (Ctrl+F).

🟠📄 Click to expand the source code!

 CLASS zgenerate_agency_data_### DEFINITION
   PUBLIC
   FINAL
   CREATE PUBLIC .

   PUBLIC SECTION.
   INTERFACES if_oo_adt_classrun.

   PROTECTED SECTION.
   PRIVATE SECTION.
 ENDCLASS.

 CLASS zgenerate_agency_data_### IMPLEMENTATION.

  METHOD if_oo_adt_classrun~main.         
     DATA: agencies  TYPE TABLE OF zagency###.

*     DELETE FROM zagency###_e.
*     "EXIT.

     "delete existing data
     DELETE FROM zagency###.
     DELETE FROM zagency###_d.

     "insert demo agency data
     agencies = VALUE #(
        ( uuid = 'C68D1DF0F7B5ED251900D4AECE7F7813' agency_id = '070001' agency_name = 'Sunshine Travel' street = '134 West Street' postal_code = '54323' city = 'Rochester' country_code = 'US' phone_number = '+1 901-632-5620'
        email_address = 'info@sunshine-travel.sap' web_address = 'http://www.sunshine-travel.sap' local_created_by = '' local_created_at = '0.0000000 ' local_last_changed_by = '' local_last_changed_at = '0.0000000 ' last_changed_at = '0.0000000 '  )
        (  uuid = 'C78D1DF0F7B5ED251900D4AECE7F7813' agency_id = '070002' agency_name = 'Fly High' street = 'Berliner Allee 11' postal_code = '40880' city = 'Duesseldorf' country_code = 'DE' phone_number = '+49 2102 69555'
        email_address = 'info@flyhigh.sap' web_address = 'http://www.flyhigh.sap' local_created_by = '' local_created_at = '0.0000000 ' local_last_changed_by = '' local_last_changed_at = '0.0000000 ' last_changed_at = '0.0000000 '  )
        (  uuid = 'C88D1DF0F7B5ED251900D4AECE7F7813' agency_id = '070003' agency_name = 'Happy Hopping' street = 'Calvinstr. 36' postal_code = '13467' city = 'Berlin' country_code = 'DE' phone_number = '+49 30-8853-0'
        email_address = 'info@haphop.sap' web_address = 'http://www.haphop.sap' local_created_by = '' local_created_at = '0.0000000 ' local_last_changed_by = '' local_last_changed_at = '0.0000000 ' last_changed_at = '0.0000000 '  )
        (  uuid = 'C98D1DF0F7B5ED251900D4AECE7F7813' agency_id = '070004' agency_name = 'Pink Panther' street = 'Auf der Schanz 54' postal_code = '65936' city = 'Frankfurt' country_code = 'DE' phone_number = '+49 69-467653-0'
        email_address = 'info@pinkpanther.sap' web_address = 'http://www.pinkpanther.sap' local_created_by = '' local_created_at = '0.0000000 ' local_last_changed_by = '' local_last_changed_at = '0.0000000 ' last_changed_at = '0.0000000 '  )
        (  uuid = 'CA8D1DF0F7B5ED251900D4AECE7F7813' agency_id = '070005' agency_name = 'Your Choice' street = 'Gustav-Jung-Str. 425' postal_code = '90455' city = 'Nuernberg' country_code = 'DE' phone_number = '+49 9256-4548-0'
        email_address = 'info@yc.sap' web_address = 'http://www.yc.sap' local_created_by = '' local_created_at = '0.0000000 ' local_last_changed_by = '' local_last_changed_at = '0.0000000 ' last_changed_at = '0.0000000 '  )
         ).

*    insert the new table entries
     INSERT zagency### FROM TABLE @agencies.

     COMMIT WORK.
     out->write( |[RAP120 / AD180] Demo agency data successfully generated. | ).
   ENDMETHOD.       
 ENDCLASS.

Save and activate the class.
Execute the class as console application.

For that, select your ABAP class ZGENERATE_AGENCY_DATA_###, select the run button > Run As > ABAP Application (Console) F9 or press F9.

A successful message now appears displayed in the ABAP Console.
You can open your generated database table ZAGENCY### for storing the active Agency data and press F8 to start the data preview and display the filled database entries.

ℹ️ PS: Always remember that the name of the artifacts and properties generated by GenAI may differ from the one in the screenshot.

Exercise 1.5: Preview the Agency App

^Top of page

Preview the Managing Agencies app in the browser.

🔵 Click to expand!

Open your service binding ZUI_AGENCY###_O4, select the entity set Agency, and click Preview to start the Fiori Elements App Preview and open the app in the browser.
Play around with the application to familiarize yourself. Generic CRUD operations are available out of the box since a managed RAP BO has been generated.

Summary & Next Exercise

^Top of page

Now that you've...

created an ABAP package,
generated an OData-based UI service and the underlying RAP BO using the GenAI-based wizard (Beta) in ADT,
published a local service endpoint,
started the Fiori elements App Preview in ADT and make yourself familiar with it,

you can continue with the next exercise - Exercise 2: Enhance the RAP BO Behavior with a Business Event.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

Exercise 1: Generate transactional OData UI Service E2E with GenAI and RAP

Introduction

Exercises

Exercise 1.1: Create an ABAP Package

Exercise 1.2: Generate OData UI Service using GenAI

Exercise 1.3: Adjust the Generated UI Service

Exercise 1.3.1: Adjust the Generated Database Tables

Exercise 1.3.2: Adjust the Consumption view

Exercise 1.3.3: Adjust the UI Semantics

Exercise 1.4: Populate Demo Data

Exercise 1.5: Preview the Agency App

Summary & Next Exercise

License

Files

README.md

Latest commit

History

README.md

File metadata and controls

Exercise 1: Generate transactional OData UI Service E2E with GenAI and RAP

Introduction

Exercises

Exercise 1.1: Create an ABAP Package

Exercise 1.2: Generate OData UI Service using GenAI

Exercise 1.3: Adjust the Generated UI Service

Exercise 1.3.1: Adjust the Generated Database Tables

Exercise 1.3.2: Adjust the Consumption view

Exercise 1.3.3: Adjust the UI Semantics

Exercise 1.4: Populate Demo Data

Exercise 1.5: Preview the Agency App

Summary & Next Exercise

License