Creating App-Specific Actions

In addition to generic actions common to all SAP Fiori elements apps, you can also create app-specific actions.

In this exercise, you will create an annotation-based action for the Travels table. It will deduct a discount from both the booking fee and the total price. The action will have a mandatory parameter: the discount percentage with the default value of 5. The action will be added to the table toolbar in the list report.

In this exercise, you will first create the deductDiscount action and implement it. The action will only apply to travels with the travel status Open. Then, you will use the Page Editor to add the action to the table toolbar in the list report. Finally, you will test the newly created action.

This exercise contains a simulation displaying all the steps. You can follow the simulation with your own trial account.

1. Create the action and implement it.

   1. Open the travel-service.cds file in SAP Business Application Studio.

   2. Add the definition of the new action deductDiscount. Note that it has a mandatory parameter, and its default value is five percent.

      Add the following code snippet to the actions section of the travel-service.cds file:

      Code Snippet

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      1
      action deductDiscount(@(UI.ParameterDefaultValue : 5)percent: Percentage not null @mandatory ) returns Travel;

   3. Open the travel-service.js file to implement the action. The action will update both the TotalPrice and BookingFee properties if the Travel Status is not 'A' (Accepted) and the Booking Fee is not null.

      Add the following code snippet to the srv/travel-service.js file:

      Code Snippet

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      123456789101112131415161718192021
        this.on ('deductDiscount', async req => {
          let discount = req.data.percent / 100
          let succeeded = await UPDATE (req._target)
            .where `TravelStatus_code != 'A'`
            .and `BookingFee is not null`
            .with (`
              TotalPrice = round (TotalPrice - BookingFee * ${discount}, 3),
              BookingFee = round (BookingFee - BookingFee * ${discount}, 3)
            `)
          if (!succeeded) { //> let's find out why...
            let travel = await SELECT.one `TravelID as ID, TravelStatus_code as status, BookingFee` .from (req._target)
            if (!travel) throw req.reject (404, `Travel "${travel.ID}" does not exist; may have been deleted meanwhile.`)
            if (travel.status === 'A') req.reject (400, `Travel "${travel.ID}" has been approved already.`)
            if (travel.BookingFee == null) throw req.reject (404, `No discount possible, as travel "${travel.ID}" does not yet have a booking fee added.`)
          } else {
            // Note: it is important to read from this, not db to include draft handling
            // REVISIT: through req._target workaround, IsActiveEntity is non-enumerable, which breaks this.read(Travel, req.params[0])
            const [{ TravelUUID, IsActiveEntity }] = req.params
            return this.read(Travel, { TravelUUID, IsActiveEntity })
          }
        })

2. Restrict the availability of the action to travels with the Open travel status.

   1. Open the field-control.cds file and add the @Core.OperationAvailable annotation to the deductDiscount action.

      Add the following code snippet to the app/travel_processor/field-control.cds file:

      Code Snippet

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      123
      deductDiscount @(
          Core.OperationAvailable : { $edmJson: { $Eq: [{ $Path: 'in/TravelStatus_code'}, 'O']}}
        );

   2. The action will now only be available if the Travel Status is 'O' (Open).

3. Open the Page Editor to add the changes.

   1. Go to List Report > Toolbar and add the TravelService.deductDiscount action to the table toolbar.

   2. Select the action you've just added. Note that you can change its settings in the pane on the right.

   3. Select the Label annotation to generate a text key in the i18n.properties file.

4. Return to the app to check your newly created action.

   1. The action Deduct Discount now appears in the table toolbar.

   2. Select a travel with the Accepted travel status. Note that the action is not available.

   3. Now select a travel with the Open travel status. The action is now available and can be applied.

   4. Apply the Deduct Discount action to the selected travel. Both the Booking Fee and Total Price have now been decreased by the specified amount.