Table of Contents

Card Page Configuration

What is a Card Page?

When you click on a row in a list in the Web Portal (for example, an order or a shipment), a detail page opens: the Card Page. This page displays all relevant information about that specific record, organized into clear sections.

With the Card Page Configuration, you can define how this detail page looks: which data is shown, how it is grouped, and which actions are available.

How to open the Card Page Configuration

  1. Open a List View of type List with subtype API Page in Business Central.
  2. Click Card Page Configuration in the action bar.
  3. The configuration page opens with the basic view details at the top and two main parts below:
    • Interactions – the buttons and tabs available on the card page
    • Layout – the sections, groups, and fields that make up the content of the card

Part 1: Interactions

Interactions are the buttons that appear on the card page. They allow the portal user to perform actions or navigate to related information.

Interaction types

Type Description
List Tab Opens another list view as a tab (e.g., order lines for an order)
Form Opens a form (e.g., to edit data)
Map Tab Opens a map view
Action Executes an action (e.g., open a track & trace URL or print a report)

Note: A 'List Tab' also needs to be defined as a subview in the subviews part.

Columns in the interactions overview

Column Description
Type Choose the type of interaction (List Tab, Form, Map Tab, or Action)
No. Select which view or action to link
Caption The text displayed on the button. Click it to manage translations
Icon Name Choose an icon from the Phosphor icon library
Icon Preview Shows a preview of the selected icon
Show on List For Form and Action only: determines whether the button is also visible from the list
Published Indicates whether the linked view/action is published
Condition Code Optional: link a condition so the button is only visible under certain circumstances

Adjusting the order

Use the Move Up and Move Down buttons to change the order of interactions. The order determines the position from left to right in the menu bar.

Opening an interaction

Click Open to directly open and edit the linked view or action.

Part 2: Layout (Sections, Groups, and Fields)

The layout defines the content of the card page. The structure is hierarchical:

Card Page
 └── Section (e.g., "General", "Addresses")
      └── Group (e.g., "Customer Details", "Contact Person")
           └── Field (e.g., "Customer No.", "Name", "Phone Number")

Adding a new section

  1. Click New Section in the layout overview.
  2. The section card opens. Fill in the following details:
Field Description
Caption The title displayed above the section. Click it to view translations
Instruction Code Optional: link an instruction that is shown as help text
Type Choose the layout type of the section (see below)
Conditional Visibility Code Optional: make the section visible only when a condition is met

Section types

Type Description
Default Standard layout: fields are displayed vertically within a single group
Columns Multi-column layout: fields are distributed across multiple groups side by side

Note: When switching the type, existing groups are reorganized. The Columns type automatically creates at least two groups.

Adding fields to a section

Below the section settings is the Controls subform, where you manage groups and fields:

  1. Add a group – First create a group (type = Group). A group is a visual container for related fields.
  2. Add a field – Add fields (type = Field) under a group. Select the desired OData field from the available fields of the view.
  3. Caption – Optionally enter a custom display name. If left blank, the default field name is used automatically.
  4. Conditional Visibility Code – Optionally set a condition for the visibility of an individual field or group.

Adjusting the order of sections

Use the Move Up and Move Down buttons in the layout overview to reorder sections.

Editing a section

Click Edit or click on the section row in the layout overview to open the section card and make changes.

Conditions

With conditions, you can dynamically show or hide sections, groups, fields, and interactions based on a field value.

Creating a condition

  1. Open the Conditions page via the action in the Card Page Configuration or from within the section card.
  2. Create a new condition with the following settings:
Field Description
Code A unique code for the condition (e.g., STATUS)
Type The type of comparison (see table below)
OData Field Name The field on which the condition is evaluated
Value The value(s) to compare against (only for Equals)

Condition types

Type Behavior
None No condition – the element is always visible
Is Not Empty Visible when the field contains a value (is not empty)
Is Empty Visible when the field is empty
Equals Visible when the field equals one of the specified values

Tip: With Equals, you can specify multiple values by separating them with a | (pipe character). For example: 10-NEW|20-IN PROGRESS makes the element visible when the field has the value "Open" or "In Progress".

Translations

Wherever you enter a Caption (for sections, fields, or interactions), you can add translations so the portal is available in multiple languages.

  1. Click on the Caption of a section or interaction.
  2. The translation page opens showing all existing translations for that caption.
  3. Add a translation per language code.

The translation shown to the portal user depends on the language setting in the portal.

Instructions

You can link an Instruction to sections. This is a help text that the portal user sees for the relevant section.

  • SimpleText: A plain text instruction without formatting.
  • RichText: A formatted text instruction (bold, italic, bullet lists, etc.).

Instructions are managed centrally and can be reused across multiple sections.

Common workflow (Step by step)

Below is a complete example of setting up a card page for an order list:

1. Open the configuration

  • Go to a list view and click Card Page Configuration.

2. Add sections

  • Click New Section and create a section called "General" (type: Default).
  • Click New Section again and create a section called "Addresses" (type: Columns).

3. Set up the sections

  • Open the "General" section:
    • Add a group (e.g., "Items").
    • Add fields under the group: Order Number, Status, Date.
  • Open the "Addresses" section:
    • Two groups have been created automatically (column layout).
    • Add delivery address fields to the first group.
    • Add invoice address fields to the second group.

4. Add interactions

  • Add an interaction of type List and link the "Order Lines" view.
  • Add an interaction of type Action and link the "Confirm Order" action.
  • Adjust the order using Move Up / Move Down.

5. Set up conditions (optional)

  • Create a condition STATUS: Type = Equals, Field = Status, Value = 10-NEW.
  • Link this condition to the "Confirm Order" action so the button is only visible for open orders.

6. Add translations

  • Click on the captions and add translations for the desired languages.

Summary

Term Meaning
Card Page The detail page that opens when you click a row in a list
Section A block on the card page with a title and groups of fields
Group A visual container within a section for related fields
Field An individual data element that is displayed (e.g., Name, Status)
Interaction A button or tab used to navigate or perform an action
Condition A rule that determines when an element is visible
Translation A language version of a caption/title
Instruction A help text displayed alongside a section
Edit this page