Configuring Contact Quick Views in a Table

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

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.

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

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 codeSwitch 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 codeSwitch to dark mode

      12345
      {
             $Type : 'UI.DataFieldForAnnotation',
             Target: 'to_Agency/@Communication.Contact#contact',
             Label : 'Agency',
       }