# View with Relationships

## Content

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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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.