Creating a Visual Representation of a Progress Indicator

Objective

After completing this lesson, you will be able to Display a progress indicator in a table column.

Visual Representation of a Progress Indicator

You can visualize your content as a table both in the list report and on the object page. There are different types of tables you can use, based on your use case. The default and recommended table type is the responsive table, as it is supported by all devices. For an aggregate-based service, the default table type is the analytical table. For more information about the table types, see Setting the Table Type.

SAP Fiori elements makes it possible to present your table content in a visually appealing manner. In addition to text, you can configure the table cells to display micro charts, a rating indicator, a progress indicator, a contact quick view which displays additional information, images, and more.

For more information, see Configuring Tables.

Add a Progress Indicator Column to the Table

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

Task Flow

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.

Prerequisites

You have completed the exercise Create an Application-Specific Action with a Mandatory Parameter in the unit Examining Actions Available on the List Report (lesson: Creating App-Specific Actions). Alternatively, you can check out its solution branch: solution/create-action-with-a-mandatory-parameter

Watch the Simulation and Perform the Steps

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.

Steps

  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 code
      Switch 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 code
      Switch 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 code
      Switch to dark mode
      1234567891011
      this.on ('acceptTravel', async req => { await UPDATE (req._target) .with ({TravelStatus_code:'A'}) return this._update_progress(req._target, 100) }) this.on ('rejectTravel', async req => { await UPDATE (req._target) .with ({TravelStatus_code:'X'}) return this._update_progress(req._target, 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.

Result

You have added a new column Progress of Travel to the table in the list report page.

Note

Next Steps

For more information, see Configuring Tables.

Log in to track your progress & complete quizzes