Configuring Contact Quick Views in a Table

Objective

After completing this lesson, you will be able to Enable additional contact information for a field in a table on demand.

Contact Quick Views in a Table

You can display additional contact information on demand both in a table and in the object page section. It is displayed in a popover called Contact Quick View.

Contact Quick View popover

You can display email, fax, address, or telephone number in a contact quick view.

Add a Contact Quick View to the Table

A contact quick view is a popover providing a quick way to check the contact's address and phone number.

Prerequisites

You have completed the exercise Add a Bullet Micro Chart to the Table Column in the unit Configuring the Content of Table Columns (lesson: Configuring Micro Charts to Visualize Key Figures). Alternatively, you can check out its solution branch: solution/add-bullet-micro-chart-to-table.

Task Flow

In this exercise, you will first add a Contact Name column to the Travels table. Then, you will add the details for the Contact Quick View. Finally, you will check the results.

Watch the Simulation and Perform the Steps

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

Steps

  1. Use the application modeler to add a new contact column to the Travels table.

    1. Select webapp > Show Page Map and click the pencil icon on List Report.

    2. Expand Columns and select the plus icon to add a new column. Choose Add Contact Column and to_Agency/Name as the column name.

    3. Select the Add.

  2. You have added the Contact Name column. You can edit its settings on the right side of the screen.

    1. Change its label to Agency.
    2. Scroll down to add details for the Contact Quick View.
    3. Select Add Phone and choose Phone number.
    4. Select Add Address and choose Street, City, PostalCode, and CountryCode_code.
  3. Switch to the app window to check the new column with the quick contact view.

    1. Select Show More per Row if necessary.

    2. The contact quick view opens. You can see detailed contact information such as Phone and Address.

  4. You can also see the annotations which have been generated by the application modeler.

    1. The information for the popover is defined in the @Communication.Contact annotation.

      Code Snippet
      Copy code
      Switch to dark mode
      1234567891011121314151617
      annotate TravelService.TravelAgency with @(Communication.Contact #contact: { $Type: 'Communication.ContactType', fn : Name, tel : [{ $Type: 'Communication.PhoneNumberType', type : #work, uri : PhoneNumber, }, ], adr : [{ $Type : 'Communication.AddressType', type : #work, street : Street, locality: City, code : PostalCode, country : CountryCode_code, }, ], });
    2. This annotation is added to the @UI.LineItem annotation of the travel entity.

      Code Snippet
      Copy code
      Switch to dark mode
      12345
      { $Type : 'UI.DataFieldForAnnotation', Target: 'to_Agency/@Communication.Contact#contact', Label : 'Agency', }

Result

In this lesson, you have learned how to add additional contact information for a table field. The added information will be displayed on demand as a popover.

Note

Log in to track your progress & complete quizzes