Creating a Visual Representation of a Progress Indicator

You can add a visual progress indicator to a table. This gives you a quick overview of the current status of a table entry.

In this exercise, you will first add a new property called Progress to a Travel entity.

Then, you will implement a method for updating the Progress property when the Travel is created or changed.

You will also add the Progress property to the Travel entity's .csv file to populate the initial data.

Finally, you will use the Page Editor to configure a new progress indicator column in the list report table.

This exercise contains a simulation that takes you through all the steps described below. You can follow the simulation and perform the steps using your own trial account.

1. Add the Progress property to the Travel entity.

   1. Open the db/schema.cds file in the file explorer. Here you can define the properties for the entities and the associations between the entities.

   2. Add the Progress property to line 20 in the schema.cds file by pasting the following code snippet:

      Code Snippet

      Copy codeSwitch to dark mode

      1
      Progress : Integer @readonly;

2. Implement a method for updating the Progress property.

   1. Open the srv/travel-service.js file. Here you can implement the method for updating the Progress property.

   2. Add the following code snippet to the file:

      Code Snippet

      Copy codeSwitch to dark mode

      1234567891011121314151617181920212223
      /**
         * Calculate the progress of the travel booking.
         */
      
        // Travel is new (0 bookings) = 10%
        // Travel contains at least one booking = 50%
        // Travel contains at least two bookings = 65%
        // Supplement target reached + 5 % per booking, max 90%
        // Travel is accepted = 100% -> see acceptTravel
        // Travel is rejected = 0% -> see rejectTravel
       this.before ('SAVE', 'Travel', async req => {
          if (!req.event === 'CREATE' && !req.event === 'UPDATE') return //only calculate if create or update
          let score = 10
          const { TravelUUID } = req.data
          const res = await SELECT .from(Booking.drafts) .where `to_Travel_TravelUUID = ${TravelUUID}`
          if (res.length >= 1) score += 40
          if (res.length >= 2) score += 15
          res.forEach(element => {
            if (element.TotalSupplPrice > 70) score += 5
          });
          if (score > 90) score = 90;
          req.data.Progress = score
        })

   3. This adds the implementation of the method for updating the Travel Progress. The method is triggered by selecting the Save button on the UI. At this moment, CAP will convert the draft into an active document.

      The Travel Progress is calculated as follows:

      • Creating the travel brings the progress to 10%.
      • Adding a booking brings the progress to 50%.
      • Adding another booking brings the progress to 65%.
      • Each booking can have supplements. If the booking's supplement target is reached, the progress increases by 5% per booking, to a maximum of 90%.
      • If the travel is accepted, the progress is set to 100%.
      • If the travel is rejected, the progress is set to 0%.

   4. Add the following code snippet to the Action Implementations section of srv/travel-service.js:

      Code Snippet

      Copy codeSwitch to dark mode

      123456789101112
        this.on ('acceptTravel', async req => {
          await UPDATE (req.subject) .with ({TravelStatus_code:'A'})
          return this._update_progress(req.subject, 100)
        })
        this.on ('rejectTravel', async req => {
          await UPDATE (req.subject) .with ({TravelStatus_code:'X'})
          return this._update_progress(req.subject, 0)
        })
      
        this._update_progress = async function (travel, progress){
          return await UPDATE (travel) . with({Progress : progress})
        }

   5. This creates a new method called _update_progress for updating the Progress property. This method is called when the acceptTravel and rejectTravel actions are executed.

3. Add the new property to the travel's .csv file.

   1. In file explorer, select db/data/sap.fe.cap.travel-Travel.csv. Here you can add the Progress property with the corresponding values.

   2. To implement the changes faster, copy the sap.fe.cap.travel-Travel.csv from this solution's GitHub branch and replace your local version of the file with it. It already contains the Progress property with the corresponding data.

4. Add the new progress indicator to the table column using the Page Editor.

   1. Select Edit on the list report page.

   2. Expand the Columns property.

   3. Select the plus icon to add a new property.

   4. Select Add Progress Columns.

   5. In the pop-up, expand the Columns dropdown menu.

   6. Select Progress as it is the property you added to the Travel entity.

5. You can see that a new column called Progress has been added to Columns. On the right, you can edit settings.

   1. Try changing the column title, for example, to Progress of Travel.

   2. Select the globe icon to add the label text to i18n.properties for translation.

   3. You will be prompted to generate a text key in the i18n file. Select Apply to confirm.

6. Check the Target property; it is filled in 100%. Choose the Navigate to Source Code icon in the Progress of Travel column. This shows the added annotations.

   1. The layouts.cds file has the UI relevant annotations. The added i18n annotation is highlighted.

   2. Ctrl+left click on the @UI.DataPoint#Progress annotation in the file. You have navigated to the definition of the @UI.DataPoint annotation with the qualifier Progress1. The value is the Progress property we previously added to the travel.

7. Navigate to the App window. If necessary, select Show More per Row to display all table columns. You can now see that the Progress of Travel is displayed for existing travels.

8. Check the results.

   1. Create a new travel.

   2. In the Agency text box, select Input Help to open a dropdown menu with the existing values.

   3. Select the second entry from the top.

   4. In the Customer text box, select Input Help to open a dropdown menu with the existing values.

   5. Select the third entry from the top.

   6. Select the Create button at the bottom of the screen.

   7. You can see the newly created travel with a Progress of Travel column. The Progress of Travel stands at 10%. You can see the progress 10 of 100 in the tool tip.