View with Relationships

A View can include fields from related tables.

This allows you to present joined data without merging tables manually.

Cross-table access requires a defined relationship.

Prerequisite: Define a Relationship

Before using related fields in a View, define a relationship between tables.

Example:

dataManager.addRelationship(
    orderTable,          // source table
    "CustomerId",        // source key
    "customer",          // navigation property name
    customerTable,       // target table
    "Id",                // target key
    "orders"             // reverse navigation name
);

After defining the relationship:

• orderTable can access customer

• customerTable can access orders

Using Related Fields in a View

Once the relationship exists, related fields can be referenced using dot notation.

Example:

var orderView = orderTable.addView("orderView", [
    { value: "orderId", width: 100 },
    { value: "orderDate", width: 150 },
    { value: "customer.companyName", caption: "Company", width: 200 },
    { value: "customer.contactName", caption: "Contact", width: 150 }
]);

The View now displays fields from:

• The host table (orderId, orderDate)

• The related table (customer.companyName, customer.contactName)

No data duplication occurs.

The View resolves related values dynamically.

Using Related Data in Formatters

Related fields can also be used in templates or formulas.

Example:

var addressStyle = {
    formatter: 'The detailed ship address: {{=CONCAT(@.shipAddress, ", ", @.shipCity)}}'
};

var orderView = orderTable.addView("orderView", [
    { value: "orderId", width: 100 },
    { value: "=[@]", caption: "Address", style: addressStyle, width: "3*" }
]);

Formatters can reference:

• Host table fields

• Related table fields

• Entire row context via @

Layout with Related Fields

Star sizing works normally with related fields:

var orderView = orderTable.addView("orderView", [
    { value: "customer.companyName", width: "2*" },
    { value: "customer.contactName", width: "*" }
]);

Column layout behavior is independent of whether data comes from the host or related table.

Binding Joined Views

After defining the view:

orderView.fetch().then(function () {
    tableSheet.setDataView(orderView);
});

The sheet renders the joined structure as defined by the view.

Key Characteristics

• A View always belongs to one host table.

• Related fields are accessed through defined relationships.

• Dot notation is used to reference related fields.

• No manual join logic is required.

• Data remains normalized at the table level.