Working with deep entity in SAP Build Apps(AppGyver)

In this blog, we’ll find out how to do four basic actions (Create, Read, Update, Delete) on a deep entity  in SAP BUILD Apps. To begin, we’ll make a basic backend service and share it using the destination service in our BTP account.

Scenario

datamodel.cds

namespace my.InternalTraining;
using {sap,cuid,managed} from '@sap/cds/common';

entity Trainee : cuid, managed {
  TraineeID      : String;
  FirstName          : String;
  LastName          : String;
  Email          : String;
  Contact          : String;
  imagePath : String;
  TraineeDetails : Composition of many Trainee_Details
                     on TraineeDetails.ID = $self;
}

entity Trainee_Details : managed {
  key ID    : Association to Trainee;
      TraineeID      : String;
      TrainingProgram : String;
      StartDate : DateTime;
      CompletionStatus : String;
}

cat-service.cds

using my.InternalTraining as my from '../db/data-model';

service CatalogService {
    entity Trainee as projection on my.Trainee;
}

Once we have deployed your OData service to BTP subaccount and tested it successfully, we can proceed to the next step, which involves consuming these entities and performing CRUD operations.

Destination

To consume these services in SAP Build Apps, you’ll need to set up a destination. Since this topic has been covered in many blogs, I’ll provide a reference where you can find a great example of working with destinations in SAP Build Apps. You can refer below blog for destination creation:

My first steps with BTP destinations (S/4HANA) in AppGyver

Once you’ve completed all the steps, your Data Entity section in SAP Build Apps should look like this.

Figure-1: Data Entity

User Interface

Next, we’ll begin by creating a basic user interface (UI) for adding records with deep insert and displaying those results in our UI. We’ll create two screens: one for Trainee registration and another for Trainee details (allowing multiple entries). Additionally, we’ll create a Trainee List screen to display our results.

Figure-2: Trainee Registration

Figure-3: Trainee Details

Variable Declaration

Now time to declare and bind variables to this page. My variable declaration looks like this, which includes Trainee detail and Trainee Program data.

Figure-4: Variable Declaration

The Trainee List screen will display all the created Trainees along with their training program details by reading the deep entity. Here is the flow logic and formula to retrieve deep entity records:

Figure-5: Read Deep Entity

This formula below will map the record collection to the variable that we created:

MAP<item>(outputs["Get record collection"].records, { FirstName: LOOKUP(item, "FirstName"), LastName: LOOKUP(item, "LastName"), Email: LOOKUP(item, "Email"), TraineeDetails: LOOKUP(item, "TraineeDetails"), UUID: LOOKUP(item, "ID") })

Get Record Result

Now click on preview and see the result. You can now view the list of Trainees along with their Program details using the deep entity.

Figure-6: Trainee List

Create Record

you can declare a “Create Record” logic from the canvas and add custom formulas based on your variable declarations. This allows you to define the logic for creating new records in your application. If you have specific variables or data sources you’d like to use in this logic, please provide more details, below we are creating the appropriate formula for our “Create Record” functionality.

Create Flow Logic:

When “Create” button is clicked:

• • Open a new screen or modal dialog where the user can enter the Header details and Items Details.
  • Collect the entered data and create payload.
  • Implement “Create Record” logic to create the deep entity with the new data.

Figure-7: Create Record Logic

Figure-8: Create Record Payload

Once you have completed all the steps and set up your application, you can create new records and observe the output to ensure that your application is working as expected.

Create Record Result

Figure-9: Create Record

Update and Delete Record

We have successfully created and fetched deep entities in our UI. To update and delete entries, we have to create buttons for these actions.

1. Edit Button: When a user clicks the “Edit” button for a specific entry, you can open a new screen or a modal dialog where they can edit the details of that entry. Once they make the changes, you’ll need to implement logic to update the deep entity with the modified data.
2. Delete Button: When a user clicks the “Delete” button for a specific entry, you can show a confirmation popup. If they confirm, you’ll need to implement logic to delete the corresponding entry from the deep entity.

You can see now we have successfully added both the action button into our UI.

Figure-10: Added Edit and Delete Button

Now we have added action button lets see the flow logic for Edit and Delete.

Edit Flow Logic:

1. When the “Edit” button is clicked for a specific entry:
   • Identify the ID that the user wants to edit.
   • Open a new screen or modal dialog where the user can modify the details of the selected entry.
2. Once the user saves the changes:
   • Collect the modified data from the editing interface.
   • Implement logic to update the deep entity with the new data for the selected entry.

Figure-11: Edit Flow Logic

Here is the payload I’m using to update records, where TraineeDetails is an array.

{FirstName: pageVars.TraineeList.FirstName,TraineeDetails: pageVars.TraineeList.TraineeDetails}

Delete Flow Logic:

1. When the “Delete” button is clicked for a specific entry:
   • Prompt the user for confirmation to ensure they want to delete the entry.
   • If the user confirms the deletion:
     • Identify the ID that needs to be deleted.
     • Implement logic “Delete record” to remove the selected entry from the deep entity.

Figure-12: Delete Record Logic

Now it’s time to observe the results for both of these logics.

Edit Record Result

You can observe below how I’m altering the existing data entry, and it’s getting successfully updated.

Figure-13: Edit Record Result

Delete Record Result

Here, you can see how I’m removing the data entry, and once it’s deleted, the UI is updated accordingly.

Figure-14: Delete record Result

We have now successfully create simple SAP BUILD App with the ability to perform CRUD (Create, Read, Update, Delete) operations using deep entities.

If you have any more questions or need further assistance feel free to comment.

For more informtaion you can check these links too.

SAP Build Apps | SAP Community

SAP Builders – SAP Community Groups