Providing the Value Help

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • List the steps for creating foreign key based and modeled value help view

Value Help

If there is an association for a field, you can use this association as a check table for the field. Then, you can provide a value help for the user. The following steps are used to provide value help with foreign key association:

  1. Find appropriate association for value help.
  2. Annotate the selection field with @ObjectModel.foreignkey.association.
  3. Expose the association.

In the figure below, we see on the left side of the CDS View Z_H_VH_CustomerName which we use as Value Help in our CDS View Z_C_U2L1_Demo1 for our report.

Although it's easy to declare a foreign key based value help, it has the following limitations:

  • Normally, only technical key fields of a business entity have the association to other views, which are fields we want to hide from the end user.
  • In the search help window, only the key field and one field annotated with @semantics.text:true can be displayed in the search result window.
  • All fields from check view are present as selection fields of the value help screen.

For a better user experience, use the following steps to create a modeled value help view:

  1. Create a CDS view, select data from existing table or CDS view. Expose only the fields you want to display in value help.
  2. You can add additional 'where' conditions and calculated fields for your value help view.
  3. Create an association from your report CDS view to the value help view, associate them with a selection field, which is understandable by end users.
  4. Annotate the selection field with @Comsuption.valuehelp:'<association_name>.
  5. Expose the association.
  6. You can add full text fuzzy search function for your value help by adding a @search annotation in your value help CDS view.
Note
  • Do not use calculated fields as search conditions if they are not required, it may lead to performance issues.
  • For calculated fields in value help view, use @EndUserText.label to set a label.
  • Redeploy your report CDS view after you changed and activated the value help view.

Enhance the List Report with Search and Filtering Capability

Business Example

In this exercise, you will add search and filter functions to a list report. Replace all instances of ## with the group number your trainer assigned to you.

Task 1: Log in to the S4D SAP System using ABAP Development Tools for Eclipse (ADT)

Steps

  1. If your Eclipse is not open, open it.

  2. Navigate to the package ZTRAIN_## from the favorite packages of your ABAP project.

    1. Select the small triangle on the left of your ABAP project, enter your password to the SAP system when prompted, and then choose OK.

    2. Expand the Favorite Packages folder by selecting the small triangle. Find your package ZTRAIN_##.

Task 2: Create and Activate a CDS View with the Source Code from a Template File

Steps

  1. Create a blank CDS view using the following information:

    CDS View Information

    FieldValue
    NameZCDS_UX403_FILT_##
    DescriptionUX403 Searching and Filtering
    1. Right-click your package, and from the context menu, choose NewOther ABAP Repository Object.

    2. In the ABAP Repository Object step, enter data into the search field. Choose Data Definition under the Core Data Services folder, and then choose Next.

    3. In the Data Definition step, complete the Nameand Descriptionfields according to the task description, then choose Next.

    4. In the Selection of Transport Request step, select the Choose from requests in which I am involved button. Select an available transport request from the table with the owner TRAIN-## and choose Next.

    5. In the Templatesstep, deselect the Use the selected template option, and choose Finish.

    6. A blank CDS view has been created.

  2. Copy the source code of the text file "N:\UX403\Templates\UX403_Exercise08_Template.txt" into the code editor of the CDS view. Then save your changes and activate your CDS view.

    Note
    You must replace all instances of ## in the source code before you activate it. There are two ## in the source code. The first is after @AbapCatalog.sqlViewName and the second is after define view.
    1. Open the File Explorer.

    2. Double-click Application (N:).

    3. Double-click UX403.

    4. Double-click Templates.

    5. To open the template file, double-click the file mentioned in the task description.

    6. Select all the content of the text file and, on your keyboard, press Ctrl + C to copy the content to the clipboard.

    7. Switch back to ADT in your blank CDS view, and on your keyboard, press Ctrl + V to paste the content.

    8. Replace all instances of ## in the CDS view with your group number.

    9. Save your changes and activate your CDS view.

Task 3: Expose your CDS View as an OData Service

Steps

  1. Add an @OData.publish: true annotation to your CDS view ZCDS_UX403_FILT_## and reactivate it.

    1. Add the annotation @OData.publish: true after @UI.headerInfo.typeNamePlural: 'Sales Orders'.

    2. Your implementation should look like the following figure:

    3. Save your changes and activate your CDS view.

  2. Publish your new OData service on the S4D SAP system.

    1. Open the SAP Logon from the taskbar.

    2. Log on to the SAP system S4D with your user credentials.

    3. Enter /N/IWFND/MAINT_SERVICE in the input field on the top left of the window, and then press Enter.

    4. Choose the Add Service icon in the application toolbar.

    5. In the Add Selected Service window, select LOCAL as the System Alias, enter your CDS view name ZCDS_UX403_FILT_##_CDS for Technical Service Name, then choose Get Services.

    6. Choose the line of service in the search result table, and choose the Add Selected Services icon. In the Add Service popup window, enter your package ZTRAIN_## in the Package Assignment field, and choose Continue (green checkmark).

    7. In the popup windows that follow, ensure that your workbench request is selected and choose Continue(green checkmark).

    8. A popup window with successful information appears, choose Continue (green checkmark) to finish the publish process.

Task 4: Create an SAP Fiori Elements Application from the OData Service Generated by the CDS View

Steps

  1. Open the SAP Business Application Studio.

    1. Perform this step as shown in a previous exercise.

  2. Create an SAP Fiori elements project using the following information:

    SAP Fiori Elements Project Information

    FieldValue
    TemplateList Report Object Page
    SAP SystemS4D_100
    OData serviceZCDS_UX403_FILT_##_CDS
    Main entityZCDS_UX403_FILT_##
    Module namesearchfilter.student##
    Application titleUX403 Searching and Filtering
    DescriptionUX403 Searching and Filtering.
    1. Choose FileNew Project from Template in the SAP Business Application Studio.

    2. Choose SAP Fiori application and choose Start.

    3. Choose SAP Fiori as Template Type and choose List Report Page as floorplan. Then choose Next.

    4. Choose Connect to an SAP System at Data source.

    5. Choose S4D_100 for System.

    6. Enter FILT_##_CDS into the input field of Serviceand select your service ZCDS_UX403_FILT_##_CDS. Choose Next.

    7. In the Entity Selection screen, select ZCDS_UX403_FILT_## for Main entity. Choose Next.

    8. In the Project Attributes screen use searchfilter.student## for Module name, use UX403 Searching and Filtering for Application title and use UX403 Searching and Filtering. as Description. Make sure that your previous folder is not selected in the Project Folder Path. Select the Project folder. It should look like this /home/user/projects/. Choose Finish.

    9. The dependencies will be installed. Wait until you can see the notification. The project has been generated.

    10. Open the Workspace with your new Project. Choose File and select Open Workspaceand choose your new Project.

  3. Test the application.

    1. Select Run in your menu and select Start Debugging. Alternatively, press F5 on your keyboard.

    2. If you have your popups allowed a new window with the running application will open.

    3. In the opened application, choose the Go button to display the sales orders in the list report.

Task 5: Add the Search Function to the CDS View

Steps

  1. Switch to ADT and enable the search function for the CDS view.

    1. Add a @Search.searchable: true annotation for you CDS view before define view….

  2. Set the fields CustomerName and CustomerEmailAddress as default search elements. Then reactivate your CDS view.

    1. Add a @Search.defaultSearchElement: true annotation for the CustomerNameand CustomerEmailAddressfields.

    2. Your implementation should look like the following figure:

    3. Save your changes and reactivate your CDS view.

  3. Test the application. Search the report using the keyword *sap* and examine the search result.

    1. Enter the keyword *sap* into the search field, and press Enter. Examine the search result.

Task 6: Add Selection Fields for Filtering the Data

Steps

  1. Switch to ADT and create the selection fields as follows:

    Selection Fields

    PositionField
    10CustomerID
    20CreationDate
    1. Add a @UI.selectionField annotation to the CustomerIDand CreationDatefields with the listed positions.

    2. Save your changes and activate your CDS view.

  2. Open the CDS view C_UX403CustomerVH and examine its code. This CDS view will be used as value help for the CustomerID field.

    1. Open the ABAP Development Object dialog in the ADT toolbar.

    2. Enter C_UX403CustomerVH in the search field, select the search result and choose OK.

    3. Examine the code of this CDS view.

    4. To preview its data, press F8 on your keyboard or choose the Runbutton, and in the dialog, choose ABAP Application.

    5. Close all tabs in ADT except the CDS view for this exercise.

  3. Back in your CDS View ZCDS_UX403_FILT_##, define an association from your CDS view to the CDS view C_UX403CustomerVH, and then expose it.

    1. Define the following association in your CDS view: association [1] to C_UX403CustomerVH as _CustomerVH on $projection.CustomerID = _CustomerVH.CustomerID

    2. Expose the association by writing the association name _CustomerVH in the projection list ( between { and }) as the last item.

  4. Set the value help for the CustomerID field and let it query data from the association that you defined.

    1. Add a @Consumption.valueHelp annotation for the CustomerID field.

    2. Your implementation should look like the following figure:

    3. Save your changes and activate your CDS view.

  5. Test the application. Especially test the selection fields and the corresponding value helps.

    1. If you open your application, two selection fields appear on your screen:

    2. Choose the two windows icon on the right side of the Business Partner ID field and a value help dialog appears.

    3. Choose Go and examine the result.

    4. To select some customers, select the checkbox before their names, and choose OK.

    5. Some filter values appear in the selection field. Choose Go to run your report again.

    6. Choose the two windows icon on the right side of the CreationDate field and note that a Date Picker is used for the input of the Date value.

    7. Close your Google Chrome browser and ADT.

Log in to track your progress & complete quizzes