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

# SurfaceCompositionHomeBindings · types

   
                                               
                                                                                        
                                                         
                  
           
          
   

Les types ci-dessous définissent les objets nommés et leurs relations. Les propriétés héritées sont incluses dans les tableaux. Les types dérivés d’un schéma renvoient à sa structure; une déclaration TypeScript ne remplace pas les contrôles sémantiques du compilateur.

## SurfaceCompositionNativeHome

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

| Champ | Options / valeurs attendues | 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; })[]` | **Requis.** Définit « blocks » pour cet objet. Respecter le type, les variantes et les limites de la colonne Options. |
| `sections` | `readonly { readonly key: string; readonly queryKey: string; readonly viewKey: string; }[]` | **Requis.** Sections déclarées dans l’ordre de lecture ou de rendu. |
| `navigation` | `readonly { readonly key: string; readonly kind: string; readonly queryKey: string \| null; readonly viewKey?: string \| null \| undefined; }[]` | **Requis.** Destinations déclarées dans l’ordre de présentation. |

```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;
  }[];
}
```

[Toutes les références](https://developers.dagio.ai/fr/reference/)

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

## Exemples appliqués : Organiser les destinations

Choisissez la collection Clients dans la navigation et proposez les prochaines actions dans l’accueil.

### Configuration

Fragment à placer dans `composition.navigation[]`. [Propriétés et valeurs admises](https://developers.dagio.ai/fr/reference/workspace-model-foundation/).

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

### Variante et raccordement

Fragment à placer dans `homePresentation`. [Propriétés et valeurs admises](https://developers.dagio.ai/fr/reference/workspace-home-presentation/).

```json
{
  "contract": "WorkspaceHomePresentation@1",
  "header": {
    "intro": "Clients et soumissions",
    "primaryNavigation": {
      "destinationKey": "clients",
      "label": "Ouvrir les clients"
    }
  },
  "launchers": {
    "title": "Faire avancer le travail",
    "description": "Choisissez une 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": "Toutes les soumissions"
      }
    }
  ]
}
```

### Exemple de disposition UI

La disposition illustrative ci-dessous situe cette configuration dans l’app Clients/Soumissions. Chaque fragment s’insère à l’emplacement indiqué; ses références aux Fields, Queries et Actions correspondent aux déclarations du Model.

1. Clients · Data
2. Références · Knowledge
3. Préparation · Work
4. Soumissions · Product

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