Obtener un resumen de los elementos de SAP Fiori para OData V4
Obtener un resumen de las herramientas de SAP Fiori
Comprender las plantillas de elementos de SAP Fiori
Configuración de las funciones generales de informes de lista y páginas de objeto
Configuración de la barra de filtros del informe de lista
Examinar las acciones disponibles en el informe de lista
Configuración del contenido de las columnas de tabla
Uso de varias vistas en el informe de lista
Cómo dar forma al área de cabecera de la página de objeto
Configuración del cuerpo de la página de objeto
Aplicar el control de campo dinámico y validar la entrada de usuario en la página de objeto
Descubrimiento de la flexibilidad del modelo de programación para elementos de SAP Fiori para OData V4
Ilustración del concepto de navegación en elementos de SAP Fiori para OData V4
Descubrir la página de lista analítica

Configuring Side Effects

Objective

After completing this lesson, you will be able to configure side effects to immediately update specific UI fields after some changes in the UI.

Side Effects on the Object Page

When using the Edit and Create modes, certain user actions or updates in one field may require immediate updates in other UI elements.

For example, when a user selects a book in a bookshop app, its price is shown in the Price field. When they select another book, the Price field should display the new price immediately. This means you would need to get the corresponding value from the back end and update the appropriate field in the user interface.

In SAP Fiori elements, these actions are known as side effects. You can use the @Common.SideEffects annotation to indicate that changes in some UI elements (known as source entities or source properties) should trigger a request to update other UI elements (target entities or target properties).

There are some default side effects which apply to all apps. For example, if a user creates a new entity or a draft version in the list report or object page, the list binding of the parent page is refreshed to show the new item. These side effects apply automatically, and you don't need to annotate them. For more information, see Side Effects.

Note that the side effects request will not be triggered if there are any validation errors in the user interface. In this case, the errors should be resolved first.

For more examples of side effects you can add to your app, see Side Effect Annotations: Examples.

Use Side Effects to Update the Total Price Immediately After Adding Another Booking

Certain actions in the user interface can affect other UI elements. You can use side effects to specify that these actions should immediately trigger an update in the corresponding field.

Task Flow

In this exercise, you will add a new booking to an existing travel and note the application's behavior. Then, you will use SAP Business Application Studio to add the necessary annotations. Finally, you will check the results.

Prerequisites

You have completed the exercise Display the Travel Administrative Data Subsection on Demand (by Adding the "Show More" Button) in the unit Configuring the Body of the Object Page (lesson: Suppressing Optional Information in Demand). Alternatively, you can check out its solution branch: solution/add-show-more-button-on-op.

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.

ExerciseStart Exercise

Steps

  1. Add a new booking to the travel and check the application's behavior.

    1. Select the pin icon on the top of the page and choose Edit.

    2. Select Create.

    3. Open the Input Help for the new booking and select an item from the list.

    4. Note that the draft has been updated with the new booking but the Total Price in the object page header remains unchanged.

    5. Save the draft. Note that the Total Price is only updated after the new version has been saved.

  2. Add side effects to the booking.

    1. Open layouts.cds in SAP Business Application Studio.

    2. Annotate TravelService.Travel with @Common.SideEffects.

      Code Snippet
      1234
      annotate TravelService.Travel @(Common.SideEffects #ReactonItemCreationOrDeletion: {
    SourceEntities  : [to_Booking],
    TargetProperties: ['TotalPrice']
});

  3. Check the results.

    1. Add a new booking like you did in the first step.

    2. Note that the Total Price field is updated immediately.

    3. Save the draft. Note that the Total Price does not change anymore as it was already updated.

Result

In this lesson, you have learned to add and use side effects to update the total travel price immediately after adding a new booking.

Note

Next Steps

For more information, see:

Learning

SAP FacebookSAP YoutubeSAP LinkedIn