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
In our example, we will work with two tables: Trainee and Trainee_Details. We'll establish an association between them using a key. We'll create some records for the deep entity and demonstrate how to perform update and delete operations. Below, you can see the structure of our tables with the association.
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.
- 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.
- 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:
- 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.
- 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:
- 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