---
title: "SurfaceCompositionHomeBindings · types"
url: https://developers.dagio.ai/reference/types-surface-composition-home-bindings/
---

# SurfaceCompositionHomeBindings · types

   
                                               
                                                                                         
                                                         
                  
           
          
   

The following types define named objects and their relationships. Tables include inherited properties. Schema-derived types refer to their validated structures; a TypeScript declaration does not replace the compiler’s semantic checks.

## SurfaceCompositionNativeHome

Existing admitted Home declarations, not a second Home grammar or runtime data source.

| Field | Options / expected values | Description |
| --- | --- | --- |
| `blocks` | `readonly ({ readonly kind: "section"; readonly sectionKey: string; readonly variant: "collection" \| "work-resume"; readonly maximumVisible: number; readonly placement: "main" \| "aside"; readonly viewAll: { readonly destinationKey: string; readonly label: string; } \| null; } \| { readonly kind: "activity"; readonly key: string; readonly placement: "main" \| "aside"; readonly maximumVisible: number; })[]` | **Required.** Defines blocks for this object. Observe the type, variants and bounds in the Options column. |
| `sections` | `readonly { readonly key: string; readonly queryKey: string; readonly viewKey: string; }[]` | **Required.** Declared sections in reading or rendering order. |
| `navigation` | `readonly { readonly key: string; readonly kind: string; readonly queryKey: string \| null; readonly viewKey?: string \| null \| undefined; }[]` | **Required.** Declared destinations in presentation order. |

```typescript
export interface SurfaceCompositionNativeHome {
  readonly blocks: readonly (
    | {
        readonly kind: 'section';
        readonly sectionKey: string;
        readonly variant: 'collection' | 'work-resume';
        readonly maximumVisible: number;
        readonly placement: 'main' | 'aside';
        readonly viewAll: { readonly destinationKey: string; readonly label: string } | null;
      }
    | {
        readonly kind: 'activity';
        readonly key: string;
        readonly placement: 'main' | 'aside';
        readonly maximumVisible: number;
      }
  )[];
  readonly sections: readonly {
    readonly key: string;
    readonly queryKey: string;
    readonly viewKey: string;
  }[];
  readonly navigation: readonly {
    readonly key: string;
    readonly kind: string;
    readonly queryKey: string | null;
    readonly viewKey?: string | null | undefined;
  }[];
}
```

[All references](https://developers.dagio.ai/reference/)

<!-- surface-examples:start -->

## Applied examples : Organize destinations

Choose the Clients collection in navigation and offer the next actions on the home.

### Configuration

Fragment placed in `composition.navigation[]`. [Properties and accepted values](https://developers.dagio.ai/reference/workspace-model-foundation/).

```json
{
  "key": "clients",
  "label": "Clients",
  "icon": "users",
  "kind": "collection",
  "spaceKey": "clients",
  "definitionPaths": [
    "workspace/clients/surface/client"
  ],
  "queryKey": "clients",
  "formKey": null
}
```

### Variation and connection

Fragment placed in `homePresentation`. [Properties and accepted values](https://developers.dagio.ai/reference/workspace-home-presentation/).

```json
{
  "contract": "WorkspaceHomePresentation@1",
  "header": {
    "intro": "Clients and quotes",
    "primaryNavigation": {
      "destinationKey": "clients",
      "label": "Open clients"
    }
  },
  "launchers": {
    "title": "Move work forward",
    "description": "Choose an action",
    "icons": [
      {
        "actionKey": "create-client",
        "icon": "users"
      },
      {
        "actionKey": "prepare-quote",
        "icon": "document"
      }
    ]
  },
  "blocks": [
    {
      "kind": "section",
      "sectionKey": "recent-quotes",
      "variant": "collection",
      "placement": "main",
      "maximumVisible": 4,
      "viewAll": {
        "destinationKey": "quotes",
        "label": "All quotes"
      }
    }
  ]
}
```

### UI layout example

The illustrative layout below places this configuration in the Clients/Quotes app. Insert each fragment at the stated location, with Field, Query and Action references matching the Model declarations.

1. Clients · Data
2. References · Knowledge
3. Preparation · Work
4. Quotes · Product

<!-- surface-examples:end -->