Presentation

The presentation section defines how components are grouped and displayed in the profile view. When reading a Profile Schema, the presentation field tells you how to organize and display profile information to users.

Understanding Presentation Structure

The presentation field is an array of groups. Each group contains component references that define how components appear in the profile view. Presentation component references are used for display purposes only and omit placeholder and description fields (those are in forms).

Reading Group Structure

When reading a group in the presentation array, you'll see:

Field	Type	Required	Description
order	number	Yes	Display order (lower numbers appear first)
components	array	Yes	Array of presentation component references
icon	string	No	Icon identifier to display with the group
title	LocalizedString	No	Group title to display
metadata	object	No	Additional metadata

Reading Presentation Component References

A presentation component reference tells you how to display a component in the profile view:

Field	Type	Required	Description
id	ComponentId	Yes	Component identifier (must exist in components)
order	number	Yes	Display order within the group
icon	string	No	Icon identifier to display with the component
label	LocalizedString	No	Component label to display
metadata	object	No	Additional metadata

Note: Presentation component references omit placeholder and description fields compared to form component references, as they are used for display purposes only.

How to Use Presentation

The presentation section defines the structure of how profile information should be displayed, but the actual values for each component come from the user's profile data, which is fetched from the Profile Detail service.

Data Flow

1. Fetch the Profile Schema - Get the schema configuration (including presentation)
2. Fetch the User's Profile Data - Get the actual values from the Profile Detail service
3. Combine Schema and Values - Merge the presentation structure with the user's data to render the screen

Component Values

Each component in the presentation references a field by its id. The corresponding value for that component comes from the user's profile data, where the field name matches the component id.

Example:

If the presentation includes:

{
  "id": "gender",
  "label": { "en": "Gender" }
}

The profile data should contain:

{
  "gender": "male"
}

The component definition (from components array) tells you:

• How to interpret the value (e.g., for choice components, look up the label from dataSource.choices)
• How to display it (e.g., for date components with displayAs: "age", calculate and show age)

Rendering Process

1. Iterate through groups in order (sorted by order field)
2. For each group:
   • Display the group title if present
   • Display the group icon if present
   • Iterate through components in order (sorted by order field)
3. For each component:
   • Look up the component definition in the components array using the id
   • Fetch the corresponding value from the user's profile data using the same id as the key
   • Combine schema and value:
     • Use the component definition to understand the field type and how to display it
     • Use the value from profile data to populate the display
     • Use the label from the presentation reference for the field label
   • Display the component icon if present

Example: Combining Schema and Values

Schema (Presentation):

{
  "presentation": [
    {
      "order": 1,
      "components": [
        {
          "id": "name",
          "order": 1,
          "label": { "en": "Name" }
        },
        {
          "id": "gender",
          "order": 2,
          "label": { "en": "Gender" }
        },
        {
          "id": "birthDate",
          "order": 3,
          "label": { "en": "Age" }
        },
        {
          "id": "sexualOrientation",
          "order": 4,
          "label": { "en": "Orientation" }
        }
      ]
    }
  ]
}

Component Definitions (from components array):

[
  {
    "id": "name",
    "kind": "text"
  },
  {
    "id": "birthDate",
    "kind": "date",
    "metadata": {
      "displayAs": "age"
    }
  },
  {
    "id": "gender",
    "kind": "choice",
    "metadata": {
      "variant": "radio",
      "dataSource": {
        "type": "static",
        "choices": [
          { "value": "male", "label": { "en": "Man" } },
          { "value": "female", "label": { "en": "Woman" } }
        ]
      }
    }
  },
  {
    "id": "sexualOrientation",
    "kind": "choice",
    "metadata": {
      "variant": "checkbox",
      "multiple": true,
      "dataSource": {
        "type": "static",
        "choices": [
          { "value": "heterosexual", "label": { "en": "Heterosexual" } },
          { "value": "bisexual", "label": { "en": "Bisexual" } }
        ]
      }
    }
  }
]

Profile Data (from Profile Detail service):

{
  "name": "John Doe",
  "birthDate": "1990-05-15",
  "gender": "male",
  "sexualOrientation": ["heterosexual", "bisexual"]
}

Rendered Result:

• Name: "John Doe" (text value displayed directly)
• Gender: "Man" (value "male" matched with choice label from dataSource.choices)
• Age: "34 years old" (date "1990-05-15" calculated as age based on displayAs: "age")
• Orientation: "Heterosexual, Bisexual" (array of values ["heterosexual", "bisexual"] matched with choice labels)

Example: Reading Presentation

Here's a simple example presentation section from a schema:

{
  "presentation": [
    {
      "order": 1,
      "components": [
        {
          "order": 1,
          "id": "gender",
          "label": { "en": "Gender" }
        },
        {
          "order": 2,
          "id": "sexualOrientation",
          "label": { "en": "Orientation" }
        },
        {
          "order": 3,
          "id": "job",
          "label": { "en": "Job" }
        },
        {
          "order": 4,
          "id": "school",
          "label": { "en": "School" }
        }
      ]
    }
  ]
}

What this tells you:

• One group in the presentation
• Display components in this order: gender, sexualOrientation, job, school
• Use the provided labels when displaying each component
• No group title or icon (optional fields are missing)

Notes

• Component id values in presentation must reference components defined in the components array
• Groups are displayed in order based on the order field (ascending)
• Components within a group are displayed in order based on their order field (ascending)
• Icons and titles are optional but recommended for better user experience
• The same component can appear in multiple groups if needed