> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.fr/docs/llms.txt > Use this file to discover all available pages before exploring further. # Champs de module et de thème > HubSpot dispose de nombreux types de champs différents. Utilisez-les pour ajouter de la flexibilité et de la personnalisation à vos thèmes et modules. Ajoutez des champs aux modules et aux thèmes pour permettre aux créateurs de contenu de contrôler divers aspects d'une page dans l'éditeur de page. Découvrez ci-dessous tous les champs disponibles pour les modules et les thèmes ainsi que leurs propriétés disponibles. Pour plus d'informations sur l'application des champs de module et de thème, y compris les groupes de champs et les champs répétés, consultez la [vue d'ensemble des champs de module et de thème](https://developers.hubspot.fr/docs/cms/reference/fields/overview). ## Propriétés utilisées par tous les champs Tous les champs partagent un ensemble de propriétés communes. Il s'agit de champs généraux, tels que le nom du champ ou le texte d'aide qui s'affiche pour les créateurs de contenu utilisant le champ du module ou du thème. ```json theme={null} { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false "alias_mapping": { "property_aliases_paths": { "is_teaser_img": ["old_boolean_field_name"] } } } ``` | Paramètre | Type | Description | Par défaut | | ------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | | `name` | Chaîne | Le nom du champ, auquel vous ferez référence lors de l'incorporation du champ et de ses valeurs dans le module ou le thème. Ne peut pas contenir d'espaces ou de caractères spéciaux. | `richtext_field, date_field, etc.` | | `label` | Chaîne | Le texte que le créateur de contenu voit en décrivant le champ. Peut contenir des espaces. | `Rich text field, Date field, etc.` | | `required` | Booléen | Permet de définir si le champ peut être laissé vide dans l'éditeur. Si le champ est défini sur `true`, le contenu ne peut pas être publié sans valeur dans le champ. | `false` | | `locked` | Booléen | Permet de définir si le champ est modifiable dans l'éditeur de contenu. Si le champ est défini sur `true`, le champ n'apparaîtra pas dans l'éditeur de contenu. | `false` | | `type` | Chaîne | Le type de champ. Les types de champs sont uniques par champ et se trouvent dans la documentation pour chaque champ ci-dessous. | | | `inline_help_text` | Chaîne | Le texte qui s'affiche intraligne sous le libellé du champ (limite de 400 caractères). À utiliser de préférence pour les informations nécessaires à l'utilisation du champ. Vous pouvez inclure les balises HTML suivantes (les autres balises seront ignorées lors de la restitution) : `a`, `b`, `br`, `em`, `i`, `p`, `small`, `strong`, `span`. | | | `help_text` | Chaîne | Le texte qui s'affiche dans l'éditeur dans une info-bulle au survol pour aider le créateur de contenu (limite de 300 caractères). À utiliser de préférence pour les informations supplémentaires, mais pas nécessaires à l'utilisation du champ. Vous pouvez inclure les balises HTML suivantes (les autres balises seront ignorées lors de la restitution) : `a`, `b`, `br`, `em`, `i`, `p`, `small`, `strong`, `span`. | | | `id` | Chaîne | L'ID unique du champ, qui est défini par HubSpot. Lorsque vous développez localement, vous n'avez pas besoin de spécifier cet identifiant. | | | `visibility` | Tableau | Permet de définir les conditions d'affichage du champ. Par exemple, vous pouvez définir un champ pour qu'il s'affiche uniquement lorsqu'un autre champ de case à cocher a été sélectionné. Découvrez-en davantage sur la [visibilité](https://developers.hubspot.fr/docs/cms/reference/fields/overview#field-visibility). | | | `display_width` | Chaîne | Par défaut, les champs sont en pleine largeur dans l'éditeur. Lorsque deux champs consécutifs dans le fichier `fields.json` sont définis sur `half_width`, ils apparaîtront l'un à côté de l'autre dans l'éditeur. | | | `alias_mapping` | Chaîne | Un alias pour le champ, qui mappe les valeurs de champ existantes à un nouvel emplacement sans interrompre le contenu existant. Cela peut être utile si vous devez mettre à jour un champ qui est actuellement utilisé dans du contenu en ligne, par exemple en déplaçant un champ de l'onglet *Contenu* vers l'onglet *Styles*. En savoir plus sur le [mappage d'alias](/cms/start-building/building-blocks/fields/alias-mapping). | `False` | ## Alignement
Permet aux créateurs de contenu de positionner un élément dans un conteneur. Pour activer l'alignement du texte, utilisez le [champ d'alignement du texte](/cms/reference/fields/module-theme-fields#text-alignment). Les champs d'alignement sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview) et peuvent être uniquement utilisés comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
Champ d'alignement ```json theme={null} { "name": "img_position", "label": "Position Image", "help_text": "Position the image within it's container.", "required": false, "type": "alignment", "default": { "horizontal_align": "CENTER", "vertical_align": "TOP" } } ``` | Paramètre | Type | Description | Par défaut | | --------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Objet | L'objet contenant `horizontal_align` et `vertical_align`. | | | `alignment_direction` | Chaîne | Permet de déterminer si seuls les contrôles d'alignement horizontal, vertical ou les deux doivent être affichés. Peut-être : | `BOTH` | ```jsx theme={null} import { ModuleFields, AlignmentField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | -------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Objet | L'objet contenant `horizontal_align` et `vertical_align`. | | | `alignmentDirection` | Chaîne | Permet de déterminer si seuls les contrôles d'alignement horizontal, vertical ou les deux doivent être affichés. Peut-être : | `BOTH` | ## Image d'arrière-plan
Ce champ fournit une image d'arrière-plan qui comporte des sous-champs pour la position et la taille de l'arrière-plan. Les champs d'image d'arrière-plan ont une propriété `.css` qui renvoie une CSS basée sur la valeur du champ. [Découvrez-en davantage sur la propriété CSS générée.](https://developers.hubspot.fr/docs/cms/reference/fields/overview#generated-css) Les champs d'image d'arrière-plan sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview) et peuvent être uniquement utilisés comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
Champ d'image d'arrière-plan ```json theme={null} { "name": "bg_image", "label": "Background image", "required": false, "type": "backgroundimage", "default": { "src": "https://example.com/img.png", "background_position": "MIDDLE_CENTER", "background_size": "cover" } } ``` | Paramètre | Type | Description | Par défaut | | --------- | ----- | -------------------------------------------------------------------------------- | ---------- | | `default` | Objet | L'objet contenant la src de l'image, la position et la taille de l'arrière-plan. | `null` | ```jsx theme={null} import { ModuleFields, BackgroundImageField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ----- | -------------------------------------------------------------------------------- | ---------- | | `default` | Objet | L'objet contenant la src de l'image, la position et la taille de l'arrière-plan. | `null` | ## Blog
Ce champ permet aux éditeurs de contenu de sélectionner un blog et de vous fournir, à vous, le développeur, l'identifiant du blog. Cette fonction est utile dans des situations telles que l'extraction d'informations importantes pour les blogs présentés dans les modules. Vous pouvez utiliser l'identifiant du blog dans les [fonctions HubL](/cms/reference/hubl/functions) de blog pour obtenir des informations telles que les [auteurs du blog](/cms/reference/hubl/functions#blog-authors), les [articles de blog récents](/cms/reference/hubl/functions#blog-recent-posts), les [articles de blog récents avec une mention spécifique](/cms/reference/hubl/functions#blog-recent-tag-posts), etc. Les champs de blog sont pris en charge dans les modules.
Capture d'écran du champ de blog ```json theme={null} { "name": "blog", "label": "Blog", "required": false, "locked": false, "type": "blog", "default": 1234567890 } ``` | Paramètre | Type | Description | Par défaut | | --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | "default" / ID de blog | Indique quel blog est sélectionné par défaut. Ce paramètre accepte les arguments suivants : 'default' ou un ID de blog (disponible dans l'URL du tableau de bord du blog). | `null` | ```jsx theme={null} import { ModuleFields, BlogField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | "default" / ID de blog | Indique quel blog est sélectionné par défaut. Ce paramètre accepte les arguments suivants : 'default' ou un ID de blog (disponible dans l'URL du tableau de bord du blog). | `null` | ## Booléen
Ce champ permet aux éditeurs de contenu d'activer/désactiver une fonctionnalité. Les booléens ne peuvent être que `true` ou `false`. Il est souvent utile de rendre les groupes ou les champs conditionnels sur la base de champs booléens. Si vous pensez avoir besoin de fournir plus de deux états à l'avenir, un champ [Choix](#choice) peut être une meilleure option, car il est plus facilement évolutif en cas de changement de besoins ultérieur. Les champs booléens sont pris en charge à la fois dans les thèmes et les modules. Les champs booléens peuvent être utilisés comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
Capture d'écran du champ booléen ```json theme={null} { "name": "is_teaser_img", "label": "Enable Teaser Image", "required": false, "locked": false, "type": "boolean", "display": "checkbox", "inline_help_text": "Shows Teaser image when toggled on", "help_text": "Teaser images are used to help provide visual context to the post.", "default": false } ``` | Paramètre | Type | Description | Par défaut | | --------- | ------- | ---------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Booléen | Permet d'indiquer si l'état par défaut de ce champ est `true` ou `false`. | `false` | | `display` | Chaîne | Permet de choisir le style d'affichage visuel pour le champ. Peut apparaître comme `toggle` ou `checkbox`. | `checkbox` | ```jsx theme={null} import { ModuleFields, BooleanField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------- | ---------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Booléen | Permet d'indiquer si l'état par défaut de ce champ est `true` ou `false`. | `false` | | `display` | Chaîne | Permet de choisir le style d'affichage visuel pour le champ. Peut apparaître comme `toggle` ou `checkbox`. | `checkbox` | Une bascule peut faire sens lorsque la valeur du champ active/désactive l'affichage conditionnel d'autres champs. Un autre cas où une bascule peut être utile est celui où le champ représente un changement majeur dans la conception du module. Les cases à cocher sont utiles pour les petites modifications qui n'ont pas un effet aussi radical sur l'affichage du module, par exemple pour masquer ou afficher de petits éléments individuels. ## Bordure
Ce champ fournit aux créateurs de contenu une interface utilisateur permettant de créer une bordure autour d'un élément. Les champs de bordure ont une propriété `.css` qui renvoie une CSS basée sur la valeur du champ. [Découvrez-en davantage sur la propriété CSS générée.](https://developers.hubspot.fr/docs/cms/reference/fields/overview#generated-css) Les champs de bordure sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview). Les champs de bordure ne peuvent être utilisés que comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
Capture d'écran du champ du module de bordure dans l'éditeur de page ```json theme={null} { "id": "styles.border", "name": "border", "label": "border", "required": false, "locked": false, "allow_custom_border_sides": false, "type": "border", "default": { "top": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "bottom": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "left": null, "right": null } } ``` | Paramètre | Type | Description | Par défaut | | --------- | ------- | ------------------------------------------------------------------------------------------------ | ---------- | | `default` | Booléen | L'objet avec des clés pour le rayon de bordure, les côtés supérieur, inférieur, gauche et droit. | `{}` | ```jsx theme={null} import { ModuleFields, BorderField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------- | ------------------------------------------------------------------------------------------------ | ---------- | | `default` | Booléen | L'objet avec des clés pour le rayon de bordure, les côtés supérieur, inférieur, gauche et droit. | `{}` | ## Choix
Les champs de choix permettent au créateur de contenu de sélectionner un ou plusieurs éléments dans une liste d'options. À l'aide de la propriété `display`, vous pouvez définir les options d'affichage dans un menu déroulant, une case d'option ou des cases à cocher, ou une gamme de boutons. Découvrez-en davantage sur les [options d'affichage des champs de choix ci-dessous](#choice-button-presets). Les champs de choix sont pris en charge à la fois dans les thèmes et les modules. Les champs de choix peuvent être utilisés comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
choice-field-dropdown ```json theme={null} { "name": "img_position", "label": "Image Position", "required": false, "locked": false, "multiple": "true", "display": "select", "choices": [ ["img--left", "Image Left - Text Right"], ["img--right", "Text Left - Image Right"] ], "type": "choice", "default": "img--left" } ``` | Paramètre | Type | Description | Par défaut | | -------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | | `choices` | Tableau | Un tableau contenant les options sélectionnables, formatées comme une valeur interne unique suivie d'un libellé. | `[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]` | | `default` | Valeur | Permet de définir la valeur sélectionnée par défaut dans le tableau de choix. | | | `multiple` | Booléen | Un champ facultatif qui permet de sélectionner plusieurs options lorsqu'il est défini sur `true`. Définissez `display` sur `checkbox` ou `select` pour configurer si le champ s'affiche sous la forme d'une liste de cases à cocher ou d'un menu déroulant. | `false` | | `display` | Chaîne | Permet de définir l'apparence du champ à l'aide de l'une des valeurs suivantes : | `"select"` | | `reordering_enabled` | Booléen | Lorsque cette valeur est définie sur `true`, permet aux créateurs de contenu de réorganiser les options du champ dans l'éditeur. Pour activer cette option, `multiple` doit également être défini sur `true`. | `false` | | `preset` | Chaîne | Permet de configurer le préréglage du bouton à utiliser lorsque `display` est défini sur `buttons`. Pour chaque préréglage, vous devrez configurer les libellés `choices` pour qu'ils correspondent à un ensemble de valeurs spécifique. Découvrez-en davantage sur ces [options prédéfinies](#choice-button-presets) ci-dessous. | | ```jsx theme={null} import { ModuleFields, ChoiceField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | | `choices` | Tableau | Un tableau contenant les options sélectionnables, formatées comme une valeur interne unique suivie d'un libellé. | `[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]` | | `default` | Valeur | Permet de définir la valeur sélectionnée par défaut dans le tableau de choix. | | | `multiple` | Booléen | Un champ facultatif qui permet de sélectionner plusieurs options lorsqu'il est défini sur `true`. Définissez `display` sur `checkbox` ou `select` pour configurer si le champ s'affiche sous la forme d'une liste de cases à cocher ou d'un menu déroulant. | `false` | | `display` | Chaîne | Permet de définir l'apparence du champ à l'aide de l'une des valeurs suivantes : | `"select"` | | `reorderingEnabled` | Booléen | Lorsque cette valeur est définie sur `true`, permet aux créateurs de contenu de réorganiser les options du champ dans l'éditeur. Pour activer cette option, `multiple` doit également être défini sur `true`. | `false` | | `preset` | Chaîne | Permet de configurer le préréglage du bouton à utiliser lorsque `display` est défini sur `buttons`. Pour chaque préréglage, vous devrez configurer les libellés `choices` pour qu'ils correspondent à un ensemble de valeurs spécifique. Découvrez-en davantage sur ces [options prédéfinies](#choice-button-presets) ci-dessous. | | ### Préréglages des boutons de choix Pour configurer un champ de choix pour afficher des boutons au lieu d'un menu déroulant, de cases à cocher ou de cases d'option, vous pouvez utiliser l'un des préréglages ci-dessous. Chaque préréglage permet un ensemble spécifique de libellés d'option, que vous devrez inclure dans le tableau `choices`. Ces libellés ne peuvent pas être personnalisés. ```json example.json theme={null} { "name": "layout", "type": "choice", "label": "Layout", "required": false, "locked": false, "display": "buttons", "preset": "layout", "choices": [ ["cards_value", "cards"], ["tiles_value", "tiles"], ["minimal_value", "minimal"] ] } ``` ```text react.txt theme={null} import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields'; ``` | Préréglage | Choix de libellés | Exemple | | ---------- | ---------------------------- | ------- | | `case` | `none` \| `upper` \| `lower` | | Case preset \| | `expand_icon` | `caret` | `plus` | `chevron` | Expand icon preset \| | `icon_background_shape` | `none` | `square` | `rounded` | `circle` | Icon background shape preset \| | `icon_size` | `small` | `medium` | `large` | Icon preset \| | `layout` | `cards` | `tiles` | `minimal` | Layout preset \| | `social_icon_background_shape` | `none` | `square` | `rounded` | `circle` | Social icon background preset \| | `social_icon_size` | `small` | `medium` | `large` | Social icon size preset | ## Couleurs
Les champs de couleur fournissent une interface de sélection de couleur pour les créateurs de contenu. Ils prennent en charge les couleurs unies ainsi que la transparence. Ils constituent un choix parfait lorsque vous souhaitez donner aux créateurs de contenu le contrôle total des couleurs au sein d'un module. Par défaut, l'entrée d'opacité d'un champ de couleur est masquée pour les modules d'e-mail, car certains clients de messagerie ne respectent pas les règles d'opacité. Vous pouvez afficher le champ d'opacité pour les modules d'e-mail en définissant `show_opacity` sur `true`. Les champs de couleur sont pris en charge à la fois dans les thèmes et les modules. Les champs de couleur peuvent être utilisés comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
Champ de couleur ```json theme={null} { "name": "bg_color", "label": "Background color", "required": false, "locked": false, "type": "color", "default": { "color": "#ff0000", "opacity": 100 }, "limited_options": ["#000000", "#ffffff"] } ``` | Paramètre | Type | Description | Par défaut | | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | | `default` | Objet | Permet de définir la couleur et l'opacité sélectionnées par défaut. | `{ "color" : "#ffffff", "opacity" : 100 }` | | `show_opacity` | Booléen | Permet de définir si l'entrée d'opacité est affichée. | `undefined` | | `limited_options` | Tableau | Un tableau de chaînes de caractères qui masque la grille de couleurs par défaut et remplace la liste des couleurs préférées (le libellé « Favoris » devient « Couleurs disponibles »). Les valeurs du tableau doivent être un code hexadécimal ou une valeur hexadécimale `color` pour n'importe quel chemin d'héritage. | `undefined` | ```jsx theme={null} import { ModuleFields, ColorField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | | `default` | Objet | Permet de définir la couleur et l'opacité sélectionnées par défaut. | `{ "color" : "#ffffff", "opacity" : 100 }` | | `showOpacity` | Booléen | Permet de définir si l'entrée d'opacité est affichée. | `undefined` | | `limitedOptions` | Tableau | Un tableau de chaînes de caractères qui masque la grille de couleurs par défaut et remplace la liste des couleurs préférées (le libellé « Favoris » devient « Couleurs disponibles »). Les valeurs du tableau doivent être un code hexadécimal ou une valeur hexadécimale `color` pour n'importe quel chemin d'héritage. | `undefined` | ## CTA
Les champs call-to-action (CTA) permettent aux utilisateurs de choisir un CTA à afficher. Les CTA sont essentiellement des boutons ou des liens qui peuvent être suivis. Les créateurs de contenu [créent des CTA](https://knowledge.hubspot.com/fr/ctas/create-calls-to-action-ctas) qui peuvent être utilisés sur l'ensemble d'un site. Les champs CTA sont pris en charge dans les modules. Les champs CTA sont disponibles dans **CMS Hub** *Pro* et *Entreprise*.
Champ call-to-action ```json theme={null} { "name": "cta", "label": "CTA", "required": false, "locked": false, "type": "cta", "default": null } ``` | Paramètre | Type | Description | Par défaut | | --------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Chaîne | Le CTA sélectionné par défaut. Attend un ID de CTA qui peut être trouvé dans l'URL lors de l'édition d'un CTA dans le [Gestionnaire de CTA](https://app.hubspot.com/l/ctas). | `null` | ```jsx theme={null} import { ModuleFields, CTAField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Chaîne | Le CTA sélectionné par défaut. Attend un ID de CTA qui peut être trouvé dans l'URL lors de l'édition d'un CTA dans le [Gestionnaire de CTA](https://app.hubspot.com/l/ctas). | `null` | ## Objet du CRM
Les champs d'objets CRM permettent aux utilisateurs de sélectionner une instance individuelle d'un objet CRM à afficher. `module.fieldname.properties` renvoie les propriétés récupérées de cette instance d'objet. Ainsi, vous n'avez pas besoin d'utiliser la fonction `crm_object()` pour obtenir les données de l'instance d'objet sélectionnée. `module.fieldname.id` renvoie l'identifiant de l'instance d'objet. Les champs d'objets CRM sont pris en charge dans les modules. Les champs d'objets CRM sont disponibles dans **CMS Hub** *Pro* et *Entreprise*.
Champ d'objet CRM ```json theme={null} { "name": "crmobject_field", "label": "CRM object", "required": false, "locked": false, "object_type": "CONTACT", "properties_to_fetch": [], "type": "crmobject", "default": { "id": 1 } } ``` | Paramètre | Type | Description | Par défaut | | --------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `object_type` | Requise | Le type d'objet CRM que l'utilisateur peut choisir. [Types d'objets CRM pris en charge](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | | | `properties_to_fetch` | Tableau | Le tableau des noms de propriétés associées au type d'objet sous forme de chaîne. Exemple : `"date_of_birth"` est une propriété associée à un contact. Utilisez cette option pour limiter les informations disponibles sur la page à ce dont vous avez besoin. | | | `default` | Objet | L'objet avec l'ID de l'instance de l'objet sélectionné par défaut. ID du contact, ID de la société, etc. | `null` | ```jsx theme={null} import { ModuleFields, CRMObjectField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `objectType` | Requise | Le type d'objet CRM que l'utilisateur peut choisir. [Types d'objets CRM pris en charge](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | | | `propertiesToFetch` | Tableau | Le tableau des noms de propriétés associées au type d'objet sous forme de chaîne. Exemple : `"date_of_birth"` est une propriété associée à un contact. Utilisez cette option pour limiter les informations disponibles sur la page à ce dont vous avez besoin. | | | `default` | Objet | L'objet avec l'ID de l'instance de l'objet sélectionné par défaut. ID du contact, ID de la société, etc. | `null` | ## Propriété d'objet du CRM
Utilisez le champ Propriété d'objet du CRM pour accéder aux métadonnées de propriété, telles que le libellé et le nom de propriété, à partir d'un type d'objet spécifié. Cela permet aux créateurs de contenu de sélectionner parmi les propriétés de l'objet lorsqu'ils ont besoin d'afficher les détails des propriétés sur une page. Par exemple, vous pouvez ajouter ce champ à un module de tableau personnalisé pour remplir les en-têtes de tableau en fonction des propriétés sélectionnées. Les champs d'objets CRM sont pris en charge dans les modules.
crm-object-property-dropdown-menu0 ```json theme={null} { "name": "crmobjectproperty_field", "label": "CRM object property", "required": true, "locked": false, "object_type": "contact", "type": "crmobjectproperty", "default": { "property": "field_of_study" } } ``` | Paramètre | Type | Description | | ------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `object_type` | Requise | Le type d'objet CRM que l'utilisateur peut choisir. Découvrez-en davantage sur les [types d'objet CRM pris en charge](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). | | `default` | Objet | Contient la propriété par défaut à afficher. | Par ailleurs, vous pouvez utiliser les blocs de texte suivants pour renvoyer d'autres détails sur la propriété : * `{{ module.fieldname.property }}` : permet de renvoyer le nom interne de la propriété. * `{{ module.fieldname.property_definition.label }}` : permet de renvoyer le libellé de la propriété. * `{{ module.fieldname.property_definition.type }}` : renvoie le type de propriété (par exemple : chaîne). ```jsx theme={null} import { ModuleFields, CRMObjectPropertyField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | | ------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `objectType` | Requise | Le type d'objet CRM que l'utilisateur peut choisir. Découvrez-en davantage sur les [types d'objet CRM pris en charge](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). | | `default` | Objet | Contient la propriété par défaut à afficher. | ## Date
Les champs de date offrent une interface de sélection de dates qui permet aux créateurs de contenu de sélectionner facilement une date. Renvoie un horodatage que vous pouvez utiliser dans votre code. Les champs de date sont pris en charge dans les modules.
Champ de date avec sélecteur de calendrier ouvert ```json theme={null} { "name": "event_start_date", "label": "Event Date", "required": false, "locked": false, "type": "date", "default": 1577854800000 } ``` | Paramètre | Type | Description | Par défaut | | --------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Horodatage | L'horodatage Unix Epoch pour la date et l'heure que vous souhaitez utiliser par défaut. Laissez ce champ vide pour permettre au sélecteur de date et d'heure de lancer le créateur de contenu à la date et à l'heure actuelle du sélecteur. | `null` | ```jsx theme={null} import { ModuleFields, DateField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Horodatage | L'horodatage Unix Epoch pour la date et l'heure que vous souhaitez utiliser par défaut. Laissez ce champ vide pour permettre au sélecteur de date et d'heure de lancer le créateur de contenu à la date et à l'heure actuelle du sélecteur. | `null` | ## Date et heure
Les champs de date et d'heure offrent une interface de sélection de dates comme le champ de date, ainsi qu'un sélecteur d'heure pour permettre aux créateurs de contenu de sélectionner facilement une date et une heure de la journée. Renvoie un horodatage que vous pouvez utiliser dans votre code. Les champs de date et d'heure sont pris en charge dans les modules.
Début de l'événement ```json theme={null} { "name": "event_start", "label": "Event Start", "required": false, "locked": false, "type": "datetime", "default": 1577854800000 } ``` | Paramètre | Type | Description | Par défaut | | --------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Horodatage | L'horodatage Unix Epoch pour la date et l'heure que vous souhaitez utiliser par défaut. Laissez ce champ vide pour permettre au sélecteur de date et d'heure de lancer le créateur de contenu à la date et à l'heure actuelle du sélecteur. | `null` | ```jsx theme={null} import { ModuleFields, DateTimeField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Horodatage | L'horodatage Unix Epoch pour la date et l'heure que vous souhaitez utiliser par défaut. Laissez ce champ vide pour permettre au sélecteur de date et d'heure de lancer le créateur de contenu à la date et à l'heure actuelle du sélecteur. | `null` | ## Adresse e-mail
Les champs d'adresse e-mail permettent à un utilisateur de sélectionner plusieurs adresses e-mail. Cela pourrait être utilisé pour afficher les informations de contact. Le champ e-mail renvoie un tableau d'adresses e-mail sélectionnées que vous pouvez faire défiler. Les champs d'e-mails sont pris en charge dans les modules.
email-field ```json theme={null} { "name": "emails", "label": "Email address", "required": false, "locked": false, "type": "email", "default": null } ``` | Paramètre | Type | Description | Par défaut | | --------- | ------- | ------------------------------------------------------------------------------------- | ---------- | | `default` | Tableau | Le tableau de chaînes d'adresses d'e-mail `["bob@example.com", "dennis@example.com"]` | `null` | ```jsx theme={null} import { ModuleFields, EmailField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------- | ------------------------------------------------------------------------------------- | ---------- | | `default` | Tableau | Le tableau de chaînes d'adresses d'e-mail `["bob@example.com", "dennis@example.com"]` | `null` | ## Intégrer
Les champs d'intégration permettent à l'utilisateur d'ajouter une URL d'un [oEmbedsite compatible](https://oembed.com/#section7) ou de coller un code d'intégration d'un autre site. Pour en savoir plus sur l'utilisation de oEmbed sur HubSpot, et voir des cas d'utilisation, consultez notre [document oEmbed ](/cms/start-building/building-blocks/fields/oembed).
Champ d'intégration ```json theme={null} { "name": "embed_field", "label": "Embed", "required": false, "locked": false, "supported_source_types": ["oembed", "html"], "supported_oembed_types": ["photo", "video", "link", "rich"], "type": "embed", "default": { "source_type": "oembed" } } ``` | Paramètre | Type | Description | Par défaut | | ---------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | | `supported_source_types` | Tableau | Les types de sources pris en charge pour les URL oEmbed (`oembed`), le code HTML intégré (`html`) ou Media Bridge (`media_bridge`). | `["oembed", "html"]` | | `supported_oembed_types` | Tableau | Type oEmbed pris en charge, y compris `"photo"`, `"video"`, `"link"` et `"rich"`. Ne s'applique pas aux supported\_source\_types de html | `[ "photo", "video", "link", "rich" ]` | | `supported_media_bridge_providers` | Tableau | Le tableau d'identifiants de fournisseurs qui déterminent quels fournisseurs Media Bridge sont disponibles pour sélectionner du contenu. Remarque : Ce paramètre sera également rempli lors de l'installation d'une [application Media Bridge Provider](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media). | | | `type` | Chaîne | Ce paramètre est toujours défini sur `"embed"` | `"embed"` | | `default` | Dict. | Un tableau contenant le paramètre `"source_type"`. Ce paramètre a une valeur basée sur une chaîne parmi les options fournies dans le paramètre `"supported_source_types"`. | `oembed` | ```jsx theme={null} import { ModuleFields, EmbedField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | | `supportedSourceTypes` | Tableau | Les types de sources pris en charge pour les URL oEmbed (`oembed`), le code HTML intégré (`html`) ou Media Bridge (`media_bridge`). | `["oembed", "html"]` | | `supportedOembedTypes` | Tableau | Type oEmbed pris en charge, y compris `"photo"`, `"video"`, `"link"` et `"rich"`. Ne s'applique pas aux supported\_source\_types de html | `[ "photo", "video", "link", "rich" ]` | | `supportedMediaBridgeProviders` | Tableau | Le tableau d'identifiants de fournisseurs qui déterminent quels fournisseurs Media Bridge sont disponibles pour sélectionner du contenu. Remarque : Ce paramètre sera également rempli lors de l'installation d'une [application Media Bridge Provider](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media). | | | `type` | Chaîne | Ce paramètre est toujours défini sur `"embed"` | `"embed"` | | `default` | Dict. | Un tableau contenant le paramètre `"source_type"`. Ce paramètre a une valeur basée sur une chaîne parmi les options fournies dans le paramètre `"supported_source_types"`. | `oembed` | ## Fichier
Les champs de fichiers permettent à l'utilisateur de charger un fichier dans le gestionnaire de fichiers ou le gestionnaire de documents, et facilitent l'ajout d'éléments qui se trouvent à ces emplacements. Cela peut être utile pour créer des liens vers des fichiers PDF ou des fichiers d'autres formats. Pour afficher des images sur une page, vous devez utiliser le champ image. Les champs de fichiers sont pris en charge dans les modules.
Champ de fichier ```json theme={null} { "name": "file_field", "label": "File", "required": false, "locked": false, "type": "file", "picker": "file", "default": null } ``` | Paramètre | Type | Description | Par défaut | | --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Chaîne | L'URL du fichier. | `null` | | `picker` | Chaîne | Valeurs acceptables : « fichier », « document », « image ».
Le sélecteur affiche les ressources chargées soit dans le gestionnaire de fichiers, soit dans le gestionnaire de documents, en fonction de ce paramètre. | `file` | ```jsx theme={null} import { ModuleFields, FileField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Chaîne | L'URL du fichier. | `null` | | `picker` | Chaîne | Valeurs acceptables : « fichier », « document », « image ».
Le sélecteur affiche les ressources chargées soit dans le gestionnaire de fichiers, soit dans le gestionnaire de documents, en fonction de ce paramètre. | `file` | ## E-mail de suivi
Les champs d'e-mail de suivi permettent au créateur de contenu de désigner l'e-mail qui sera envoyé en réponse à la soumission de formulaire. Cela fonctionne en tandem avec la [balise de formulaire HubL](/cms/reference/hubl/tags/standard-tags#form), via le paramètre `simple_email_campaign_id`. Les champs d'e-mail de suivi sont pris en charge dans les modules.
champ d'e-mail de suivi ```json theme={null} { "name": "followup_email", "label": "Followup email", "required": false, "locked": false, "type": "followupemail", "default": null } ``` | Paramètre | Type | Description | Par défaut | | --------- | ------ | ------------- | ---------- | | `default` | Chaîne | L'ID d'e-mail | `null` | ```jsx theme={null} import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------ | ------------- | ---------- | | `default` | Chaîne | L'ID d'e-mail | `null` | ## Police
Les champs de police offrent aux créateurs de contenu des commandes de base pour le style de police. Les créateurs de contenu peuvent choisir la taille, la couleur, la famille de polices et le format (gras, italique et souligné). Les polices répertoriées sont toutes des polices standards sûres pour le web. Ces polices proviennent de [Google Fonts](https://fonts.google.com/) mais sont mises à disposition par HubSpot directement sur le domaine sur lequel la page se charge. Les champs de police sont pris en charge à la fois dans les thèmes et les modules. Les champs de police peuvent être utilisés comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
Champ de police ### Remarque : * La famille de police est déterminée par la combinaison des propriétés `font` et `font_set`. Vous devez inclure les deux pour charger la police. Lorsque vous [héritez de champs](https://developers.hubspot.fr/docs/cms/reference/fields/overview#inherited-fields), cela signifie que vous devez hériter des deux valeurs. * Masquer les sous-champs liés à la CSS avec `visibility` n'empêchera pas la sortie de la CSS dans le style renvoyé dans l'objet de champ. Vous devrez toujours inclure manuellement la CSS dans l'objet `styles`. ```json theme={null} { "name": "font", "label": "Font", "required": false, "locked": false, "load_external_fonts": true, "type": "font", "default": { "size": 12, "font": "Merriweather", "font_set": "GOOGLE", "size_unit": "px", "color": "#000", "styles": {} }, "visibility": { "hidden_subfields": { "font": true, "size": true } } } ``` | Paramètre | Type | Description | Par défaut | | --------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | `default` | Objet | L'objet police avec des paramètres pour la taille, l'unité de taille, la couleur et les styles pour le gras, l'italique et le soulignement. | `{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }` | | `load_external_fonts` | Booléen | HubSpot charge automatiquement la police web sélectionnée sur la page si la police est sélectionnée et référencée par HubL dans une feuille de style ou dans un module. Définissez cette valeur sur faux, si vous chargez déjà la police sur la page. Ainsi, la police ne sera pas chargée deux fois. | `true` | | `visibility` | Objet | En utilisant l'objet imbriqué `hidden_subfields`, vous pouvez définir un booléen pour les commandes du champ Police à masquer. Les sous-champs possibles sont : `font`, `size`, `bold`, `italic`, `underline`, et `color`. | | | `variant` | Chaîne | Si vous utilisez une police web, la variante de la police que vous souhaitez utiliser. Par exemple : pour utiliser la version 700 d'une police, définissez cette valeur sur `"700"`. Pour utiliser la version 400 d'une police italique, définissez cette valeur sur `"400i"`. | | | `limited_options` | Tableau | Tableau de chaînes de caractères qui remplace la liste de toutes les options de police. Les valeurs du tableau doivent être un nom de police codé en dur ou une propriété de police `name` à n'importe quel chemin d'héritage. Par exemple : `theme.typography.body_text.name`. | `undefined` | ```jsx theme={null} import { ModuleFields, FontField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | `default` | Objet | L'objet police avec des paramètres pour la taille, l'unité de taille, la couleur et les styles pour le gras, l'italique et le soulignement. | `{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }` | | `loadExternalFonts` | Booléen | HubSpot charge automatiquement la police web sélectionnée sur la page si la police est sélectionnée et référencée par HubL dans une feuille de style ou dans un module. Définissez cette valeur sur faux, si vous chargez déjà la police sur la page. Ainsi, la police ne sera pas chargée deux fois. | `true` | | `visibility` | Objet | En utilisant l'objet imbriqué `hidden_subfields`, vous pouvez définir un booléen pour les commandes du champ Police à masquer. Les sous-champs possibles sont : `font`, `size`, `bold`, `italic`, `underline`, et `color`. | | | `variant` | Chaîne | Si vous utilisez une police web, la variante de la police que vous souhaitez utiliser. Par exemple : pour utiliser la version 700 d'une police, définissez cette valeur sur `"700"`. Pour utiliser la version 400 d'une police italique, définissez cette valeur sur `"400i"`. | | | `limitedOptions` | Tableau | Tableau de chaînes de caractères qui remplace la liste de toutes les options de police. Les valeurs du tableau doivent être un nom de police codé en dur ou une propriété de police `name` à n'importe quel chemin d'héritage. Par exemple : `theme.typography.body_text.name`. | `undefined` | ## Formulaire
Les champs de formulaire permettent à un créateur de contenu de concevoir un formulaire dans son compte. Vous pouvez ensuite l'utiliser pour rendre un formulaire sur une page en utilisant la [balise de formulaire HubL](/cms/reference/hubl/tags/standard-tags#form). Les champs de formulaire sont pris en charge dans les modules.
form field-Aug-21-2020-08-09-55-35-PM ```json theme={null} { "id": "idNumber", "name": "form_field_name", "display_width": null, "label": "Form", "required": false, "locked": false, "type": "form", "disable_inline_form_editing": true, "required_property_types": ["TICKET"], "support_all_webinar_types": true, "embed_versions": ["v2", "v4"], "default": { "response_type": "inline", "message": "Thanks for submitting the form." } } ``` | Paramètre | Type | Description | | ----------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `default` | Objet | Un objet contenant les détails de la réponse de soumission du formulaire. Comprend les paramètres suivants : | | `disable_inline_form_editing` | Chaîne | Permet de définir la propriété `disable_inline_form_editing` sur `true` pour masquer tous les contrôles de modification de formulaire intraligne dans le module de formulaire. Cela inclut les champs du formulaire, le texte du bouton d'envoi, les options de confidentialité et de consentement des données et le CAPTCHA. | | `required_property_types` | Tableau | Un tableau qui indique les formulaires pouvant être sélectionnés en fonction des types de propriétés des champs de formulaire. Les valeurs sont : `"CONTACT"`, `"COMPANY"` et `"TICKET"`. | | `support_all_webinar_types` | Booléen | Lorsqu'il est défini sur `true`, le formulaire affiche un sélecteur de webinar plus générique qui permet de sélectionner des webinars Microsoft Teams en plus de GoToWebinar. Les valeurs du champ de formulaire changeront également légèrement pour enregistrer `webinar_id` et `webinar_source` au lieu de `gotowebinar_webinar_key`. Vous devrez repasser ces valeurs propriété plus génériques dans la [balise de formulaire](/cms/reference/hubl/tags/standard-tags#form) à côté de `gotowebinar_webinar_key`. | | `embed_versions` | Tableau | Un tableau qui indique les formulaires pouvant être sélectionnés en fonction de la version du formulaire. Les valeurs comprennent `"v2"` pour les formulaires hérités et `"v4"` pour les nouveaux formulaires de l'éditeur. | ```jsx theme={null} import { ModuleFields, FormField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | | -------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `default` | Objet | Un objet contenant les détails de la réponse de soumission du formulaire. Comprend les paramètres suivants : | | `disableInlineFormEditing` | Chaîne | Permet de définir la propriété `disableInlineFormEditing` sur `true` pour masquer tous les contrôles de modification de formulaire intraligne dans le module de formulaire. Cela inclut les champs du formulaire, le texte du bouton d'envoi, les options de confidentialité et de consentement des données et le CAPTCHA. | | `requiredPropertyTypes` | Tableau | Un tableau qui indique les formulaires pouvant être sélectionnés en fonction des types de propriétés des champs de formulaire. Les valeurs sont : `"CONTACT"`, `"COMPANY"` et `"TICKET"`. | | `supportAllWebinarTypes` | Booléen | Lorsqu'il est défini sur `true`, le formulaire affiche un sélecteur de webinar plus générique qui permet de sélectionner des webinars Microsoft Teams en plus de GoToWebinar. Les valeurs du champ de formulaire changeront également légèrement pour enregistrer `webinar_id` et `webinar_source` au lieu de `gotowebinar_webinar_key`. Vous devrez repasser ces valeurs propriété plus génériques dans la [balise de formulaire](/cms/reference/hubl/tags/standard-tags#form) à côté de `gotowebinar_webinar_key`. | | `embedVersions` | Tableau | Un tableau qui indique les formulaires pouvant être sélectionnés en fonction de la version du formulaire. Les valeurs comprennent `"v2"` pour les formulaires hérités et `"v4"` pour les nouveaux formulaires de l'éditeur. | ## Dégradé
Ce champ permet aux créateurs de contenu de créer et de configurer des dégradés. Pour l'instant, les dégradés linéaires prennent en charge jusqu'à 5 arrêts de couleur. Les champs de dégradé ont une propriété `.css` qui renvoie une CSS basée sur la valeur du champ. [Découvrez-en davantage sur la propriété CSS générée.](https://developers.hubspot.fr/docs/cms/reference/fields/overview#generated-css) Les champs de dégradé sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview). Les champs de dégradé ne peuvent être utilisés que comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
Champ de dégradé ```json theme={null} { "name": "bg_gradient", "label": "Background gradient", "help_text": "Sets a gradient behind the content", "required": false, "type": "gradient", "default": { "colors": [ { "color": { "r": 0, "g": 0, "b": 0, "a": 1 } }, { "color": { "r": 255, "g": 255, "b": 255, "a": 1 } } ], "side_or_corner": { "verticalSide": "BOTTOM", "horizontalSide": null } } } ``` | Paramètre | Type | Description | | --------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | `default` | Objet | Objet contenant les paramètres directionnels d'un dégradé ("side\_or\_corner") et les arrêts de couleur pour le dégradé sous forme de tableau d'objets. | ```jsx theme={null} import { ModuleFields, GradientField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | | --------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | `default` | Objet | Objet contenant les paramètres directionnels d'un dégradé ("side\_or\_corner") et les arrêts de couleur pour le dégradé sous forme de tableau d'objets. | ## Ligne HubDB
Les champs de ligne HubDB permettent à un créateur de contenu de sélectionner une ligne individuelle (ou des lignes si vous utilisez des champs répétiteurs) dans un tableau défini. Vous pouvez ensuite utiliser ce champ pour créer des listes, des tableaux, des ressources, etc. définis par l'utilisateur. Les champs de ligne HubDB sont pris en charge dans les modules. Les champs de ligne HubDB sont disponibles dans **CMS Hub** *Pro* et *Entreprise*.
hubdb-row-field ```json theme={null} { "name": "hubdbrow_field", "label": "HubDB row", "required": false, "locked": false, "table_name_or_id": "3096859", "columns_to_fetch": ["name", "price", "desc"], "display_columns": ["name", "price", "desc"], "display_format": "%0 - %1 :::: %2", "type": "hubdbrow", "default": { "id": 4450468943 } } ``` | Paramètre | Type | Description | Par défaut | | ------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | | `table_name_or_id` | Chaîne | Le nom ou l'ID du tableau HubDB. Ce champ est obligatoire. | | | `columns_to_fetch` | Tableau | Un tableau de noms de colonnes à extraire de la table. Renverra toutes les colonnes du tableau si vide. | `[]` | | `display_columns` | Tableau | Un tableau de noms de colonnes à utiliser dans le libellé de choix. Ne renverra que la première colonne du tableau si vide. | `[]` | | `display_format` | Chaîne | Le format dans lequel vous voulez que les données de colonnes s'affichent dans le sélecteur de lignes de HubDB en utilisant le symbole pour cent suivi d'un nombre pour désigner une colonne.
**Ex :** *%0 (%1) apparaîtrait comme Column0Value (Column1Value)* | `""` | | `default` | Objet | Un objet contenant « id » pour définir la ligne HubDB par défaut. | `{ "id" : null }` | ```jsx theme={null} import { ModuleFields, HubDBRowField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ---------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | | `tableNameOrId` | Chaîne | Le nom ou l'ID du tableau HubDB. Ce champ est obligatoire. | | | `columnsToFetch` | Tableau | Un tableau de noms de colonnes à extraire de la table. Renverra toutes les colonnes du tableau si vide. | `[]` | | `displayColumns` | Tableau | Un tableau de noms de colonnes à utiliser dans le libellé de choix. Ne renverra que la première colonne du tableau si vide. | `[]` | | `displayFormat` | Chaîne | Le format dans lequel vous voulez que les données de colonnes s'affichent dans le sélecteur de lignes de HubDB en utilisant le symbole pour cent suivi d'un nombre pour désigner une colonne.
**Ex :** *%0 (%1) apparaîtrait comme Column0Value (Column1Value)* | `""` | | `default` | Objet | Un objet contenant « id » pour définir la ligne HubDB par défaut. | `{ "id" : null }` | ## Tableau HubDB
Les champs de tableau HubDB permettent à un créateur de contenu de désigner un HubDB dans son compte. Vous pouvez ensuite l'utiliser pour rendre un formulaire sur une page en utilisant la [balise de formulaire HubL](/cms/reference/hubl/tags/standard-tags#form). Renvoie l'identifiant du tableau, que vous pouvez utiliser avec les [fonctions HubL de HubDB](/cms/start-building/features/storage/hubdb#access-hubdb-data-using-hubl)). Les champs de tableau HubDB sont pris en charge dans les modules. Les champs de tableau HubDB sont disponibles dans **CMS Hub***Pro* et *Entreprise*.
Champ HubDB ```json theme={null} { "name": "recipe_table", "label": "Recipe Table", "required": false, "locked": false, "type": "hubdbtable", "default": 2010782 } ``` | Paramètre | Type | Description | Par défaut | | --------- | ------ | --------------------- | ---------- | | `default` | Chaîne | L'ID de tableau HubDB | `null` | ```jsx theme={null} import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------ | --------------------- | ---------- | | `default` | Chaîne | L'ID de tableau HubDB | `null` | ## Icône
Les champs d'icônes offrent une interface utilisateur avec sélecteur d'icônes qui permet aux créateurs de contenu d'ajouter plus facilement des icônes à vos modules. Le champ d'icône est préchargé avec les icônes FontAwesome. Les champs d'icônes sont pris en charge dans les modules. Les champs d'icônes peuvent être utilisés comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
champ d'icône ```json theme={null} { "name": "icon_field", "label": "Icon", "required": false, "locked": false, "icon_set": "fontawesome-6.4.2", "type": "icon", "default": { "name": "accessible-icon", "unicode": "f368", "type": "REGULAR" } } ``` | Paramètre | Type | Description | Par défaut | | ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | | `default` | Objet | L'objet icône | | | `icon_set` | Chaîne | Le jeu d'icônes FontAwesome à utiliser. Les valeurs possibles sont : | `fontawesome-5.0.10` | ```jsx theme={null} import { ModuleFields, IconField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | | `default` | Objet | L'objet icône | | | `iconSet` | Chaîne | Le jeu d'icônes FontAwesome à utiliser. Les valeurs possibles sont : | `fontawesome-5.0.10` | ## Image
Les champs d'image offrent aux créateurs de contenu une interface intuitive pour ajouter des images à un module ou à un thème. Les champs d'image fournissent une interface avec sélecteur de fichiers qui liste les images du gestionnaire de fichiers. Comme les images peuvent être utilisées et affichées de différentes manières, les développeurs peuvent limiter les options de taille disponibles pour le créateur de contenu dans l'interface utilisateur et permettre le [chargement asynchrone des images](/cms/best-practices/testing-staging-performance/lazy-loading).
Champ d'image Les champs d'image sont pris en charge dans les modules. Les images peuvent être utilisées comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields). Vous ne devez utiliser les champs d'image comme champs de style que si l'image a un caractère purement informatif, qu'elle n'est pas porteuse de sens et qu'elle n'est pas une [image de fond](#background-image). Il s'agit de respecter les meilleures pratiques en matière [d'accessibilité](/cms/best-practices/improve-existing-sites/accessibility). ```json theme={null} { "name": "image_field", "label": "Image", "required": false, "locked": false, "responsive": true, "resizable": true, "show_loading": false, "type": "image", "default": { "size_type": "exact", "src": "", "alt": "image-alt-text", "loading": "lazy", "width": 128, "height": 128, "max_width": 128, "max_height": 128 } } ``` | Paramètre | Type | Description | Par défaut | | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | `default` | Objet | Permet de définir les propriétés pour la taille de l'image, le texte alternatif, etc. Peut contenir les propriétés suivantes : | `{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }` | | `responsive` | Booléen | Permet de déterminer si l'image doit agir de manière réactive ou avoir une hauteur et une largeur fixes. | `true` | | `show_loading` | Booléen | Permet de déterminer si les commandes permettant de choisir le [chargement asynchrone de](/cms/best-practices/testing-staging-performance/lazy-loading) l'image sont affichées dans l'éditeur de page. | `false` | ```jsx theme={null} import { ModuleFields, ImageField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | `default` | Objet | Permet de définir les propriétés pour la taille de l'image, le texte alternatif, etc. Peut contenir les propriétés suivantes : | `{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }` | | `responsive` | Booléen | Permet de déterminer si l'image doit agir de manière réactive ou avoir une hauteur et une largeur fixes. | `true` | | `showLoading` | Booléen | Permet de déterminer si les commandes permettant de choisir le [chargement asynchrone de](/cms/best-practices/testing-staging-performance/lazy-loading) l'image sont affichées dans l'éditeur de page. | `false` | ## Lien
Les champs de liens offrent aux créateurs de contenu une interface intuitive pour fournir des liens vers des URL et des adresses e-mail. Pour les liens externes, les créateurs de contenu choisissent "external". Pour les liens d'e-mail, "email address". Enfin, pour le contenu hébergé sur le CMS HubSpot, ils peuvent utiliser "content", qui affiche une liste de toutes les pages et de tous les articles de blog du compte, "file", pour afficher les ressources du fichier, et "blog", pour afficher toutes les listes de blogs du compte. Les champs de liens sont très similaires aux champs d'URL. Ils offrent cependant une interface utilisateur pour « ouvrir dans une nouvelle fenêtre » et « indiquer aux moteurs de recherche de ne pas suivre ». Si vous ne voulez pas que les créateurs de contenu aient ce contrôle, utilisez le [champ URL](#url). Les champs de lien sont pris en charge dans les modules.
champ de lien ```json theme={null} { "name": "link_field", "display_width": null, "label": "Link", "required": false, "locked": false, "supported_types": [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ], "show_advanced_rel_options": true, "type": "link", "default": { "url": { "content_id": null, "type": "EXTERNAL", "href": "" }, "open_in_new_tab": false, "no_follow": false } } ``` | Paramètre | Type | Description | Par défaut | | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `default` | Objet | L'URL par défaut et le comportement d'ouverture du lien. Cet objet comprend : | `{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }` | | `supported_types` | Tableau | Les types de liens que les créateurs de contenu peuvent sélectionner. Supprimez de la liste les types que vous ne voulez pas que les créateurs de contenu puissent définir. Types valides possibles : | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]` | | `show_advanced_rel_options` | Booléen | Par défaut, les créateurs de contenu pourront uniquement sélectionner l'option `no_follow`. Lorsque la valeur est définie sur `true`, les créateurs de contenu peuvent également sélectionner :En savoir plus sur [les attributs de lien](https://moz.com/blog/nofollow-sponsored-ugc). | `false` | ```jsx theme={null} import { ModuleFields, LinkField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `default` | Objet | L'URL par défaut et le comportement d'ouverture du lien. Cet objet comprend : | `{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }` | | `supportedTypes` | Tableau | Les types de liens que les créateurs de contenu peuvent sélectionner. Supprimez de la liste les types que vous ne voulez pas que les créateurs de contenu puissent définir. Types valides possibles : | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]` | | `showAdvancedRelOptions` | Booléen | Par défaut, les créateurs de contenu pourront uniquement sélectionner l'option `no_follow`. Lorsque la valeur est définie sur `true`, les créateurs de contenu peuvent également sélectionner :En savoir plus sur [les attributs de lien](https://moz.com/blog/nofollow-sponsored-ugc). | `false` | ## Logo
Les champs de logo permettent aux créateurs de contenu de spécifier les images de logo à utiliser dans une page, le logo du domaine étant utilisé par défaut. Ceci est utile pour les en-têtes et pieds de page du site qui peuvent contenir le logo de l'entreprise. Les champs de logo permettent également un [chargement asynchrone](/cms/best-practices/testing-staging-performance/lazy-loading). Les champs de logo sont pris en charge dans les modules.
champ de logo ```json theme={null} { "name": "logo", "label": "Logo", "required": false, "locked": false, "type": "logo", "show_loading": true, "default": { "override_inherited_src": false, "src": null, "alt": null, "loading": "lazy" } } ``` | Paramètre | Type | Description | Par défaut | | -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | `show_loading` | Chaîne | Permet de déterminer si les commandes permettant de choisir le [chargement asynchrone de](/cms/best-practices/testing-staging-performance/lazy-loading) l'image sont affichées dans l'éditeur de page. | `false` | | `default` | Objet | L'objet logo. Si `show_loading` est défini sur `true`, vous pouvez inclure une propriété `loading` pour définir les [options de chargement asynchrone de l'image](/cms/best-practices/testing-staging-performance/lazy-loading). Les options comprennent : | `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` | ```jsx theme={null} import { ModuleFields, LogoField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | `showLoading` | Chaîne | Permet de déterminer si les commandes permettant de choisir le [chargement asynchrone de](/cms/best-practices/testing-staging-performance/lazy-loading) l'image sont affichées dans l'éditeur de page. | `false` | | `default` | Objet | L'objet logo. Si `show_loading` est défini sur `true`, vous pouvez inclure une propriété `loading` pour définir les [options de chargement asynchrone de l'image](/cms/best-practices/testing-staging-performance/lazy-loading). Les options comprennent : | `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` | ## Menu
Les champs de menu offrent aux créateurs de contenu une interface intuitive pour créer, modifier et sélectionner un [menu de navigation](/cms/start-building/building-blocks/modules/menus-and-navigation) réutilisable sur d'autres pages. Ce champ est idéal pour les menus utilisés sur plusieurs pages, comme la navigation principale, la navigation en bas de page et dans d'autres [contenus globaux](/cms/start-building/building-blocks/global-content). Utilisez ce champ en tandem avec la [balise menu](/cms/reference/hubl/tags/standard-tags#menu) ou la [fonction menu()](/cms/reference/hubl/functions#menu), pour un rendu de menu à l'intérieur de votre module. Pour les menus qu'il n'est pas utile de réutiliser sur d'autres pages, comme un menu de table des matières, utilisez le [champ menu simple](#simple-menu). Les champs de menu sont pris en charge dans les modules.
champ de menu ```json theme={null} { "name": "menu", "label": "Menu", "required": false, "locked": false, "type": "menu", "default": 12345678911 } ``` | Paramètre | Type | Description | Par défaut | | --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Entier | L'[ID de menu](/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id) du menu. La valeur par défaut de `null`, correspond au menu par défaut sous la navigation. | `null` | ```jsx theme={null} import { ModuleFields, MenuField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Entier | L'[ID de menu](/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id) du menu. La valeur par défaut de `null`, correspond au menu par défaut sous la navigation. | `null` | ## Nombre
Les champs numériques offrent aux créateurs de contenu une interface intuitive pour saisir ou ajuster des valeurs numériques et des options. Cette fonction peut être utilisée pour créer des articles basés sur des pourcentages ou tout autre élément pour lequel des nombres sont nécessaires. Les champs numériques sont pris en charge dans les modules. Les champs numériques peuvent être utilisés comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
Champ de nombre ```json theme={null} { "name": "number_field", "label": "Number", "required": false, "locked": false, "display": "slider", "min": 1, "max": 10, "step": 1, "type": "number", "prefix": "", "suffix": "", "default": null, "placeholder": "50" } ``` | Paramètre | Type | Description | Par défaut | | ------------- | ------ | ------------------------------------------------- | ---------- | | `default` | Nombre | Un nombre par défaut à utiliser. | `null` | | `prefix` | Chaîne | Ajouté comme préfixe au champ numérique. | | | `suffix` | Chaîne | Ajouté comme suffixe au champ du numéro. | | | `placeholder` | Chaîne | Permet d'ajouter une valeur de variable au champ. | | ```jsx theme={null} import { ModuleFields, NumberField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ------------- | ------ | ------------------------------------------------- | ---------- | | `default` | Nombre | Un nombre par défaut à utiliser. | `null` | | `prefix` | Chaîne | Ajouté comme préfixe au champ numérique. | | | `suffix` | Chaîne | Ajouté comme suffixe au champ du numéro. | | | `placeholder` | Chaîne | Permet d'ajouter une valeur de variable au champ. | | Les paramètres suffixe et préfixe sont utilisés à des fins d'affichage dans l'éditeur de contenu et n'ont aucun effet sur la valeur numérique du champ. ## Page
Les champs de page fournissent une interface permettant aux créateurs de contenu de sélectionner des pages du site et des pages de destination. La valeur renvoyée par un champ de page est l'identifiant de la page sélectionnée. Lorsqu'elle est utilisée en tandem avec les fonctions [content\_by\_id](/cms/reference/hubl/functions#content-by-id) ou [content\_by\_ids](/cms/reference/hubl/functions#content-by-ids), vous pouvez utiliser les données des pages sélectionnées dans la page actuelle. Les champs de page sont pris en charge dans les modules.
Champ de page ```json theme={null} { "name": "page_field", "label": "Page", "help_text": "Pulls data from the selected page.", "required": false, "locked": false, "placeholder": "Page to pull from", "type": "page", "default": null } ``` | Paramètre | Type | Description | Par défaut | | --------- | ------ | ------------------------------------------------- | ---------- | | `default` | Entier | Un identifiant de page par défaut à sélectionner. | `null` | ```jsx theme={null} import { ModuleFields, PageField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------ | ------------------------------------------------- | ---------- | | `default` | Entier | Un identifiant de page par défaut à sélectionner. | `null` | ## Texte enrichi
Les champs de texte enrichi offrent aux créateurs de contenu une expérience d'éditeur de texte WYSIWYG. Lorsque la valeur d'un champ de texte enrichi est imprimée, elle l'est au format HTML. Lorsque vous ne souhaitez pas que les créateurs de contenu disposent des droits de mise en forme, utilisez des [champs de texte](#text). Les champs de texte enrichi sont pris en charge dans les modules.
Champ de texte enrichi ```json theme={null} { "name": "description", "label": "Description", "required": false, "locked": false, "type": "richtext", "default": null } ``` | Paramètre | Type | Description | Par défaut | | ------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Chaîne | La chaîne de contenu à afficher prend en charge le HTML. Remarque : vous ne pouvez pas utiliser la [fonction](/cms/reference/hubl/functions#get-asset-url) `get_asset_url` dans cette propriété par défaut. | `""` | | `enabled_features` | Tableau | Un ensemble d'éléments qui vous permet de [configurer la barre d'outils de l'éditeur de texte enrichi](/cms/reference/fields/rich-text-editor) et les options disponibles pour les éditeurs de contenu. | | ```jsx theme={null} import { ModuleFields, RichTextField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ----------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Chaîne | La chaîne de contenu à afficher prend en charge le HTML. Remarque : vous ne pouvez pas utiliser la [fonction](/cms/reference/hubl/functions#get-asset-url) `get_asset_url` dans cette propriété par défaut. | `""` | | `enabledFeatures` | Tableau | Un ensemble d'éléments qui vous permet de [configurer la barre d'outils de l'éditeur de texte enrichi](/cms/reference/fields/rich-text-editor) et les options disponibles pour les éditeurs de contenu. | | ## Menu simple
Les champs de menu simple offrent aux créateurs de contenu une interface intuitive pour créer un [menu de navigation](/cms/start-building/building-blocks/modules/menus-and-navigation) qui n'est pas réutilisable sur d'autres pages. Pour les menus qui doivent être réutilisables, utilisez le [champ de menu](#menu). Cela peut être utile pour un menu de table des matières qui renvoie vers des titres de pages très longues, ou pour une liste de liens vers du contenu qui ne fait sens que sur la page en cours. Les champs de menu simple sont pris en charge dans les modules.
Champ de menu simple ```json theme={null} { "name": "toc_menu", "label": "Table of Contents", "required": false, "locked": false, "type": "simplemenu", "default": [ { "isPublished": false, "pageLinkId": null, "pageLinkName": null, "isDeleted": null, "categoryId": null, "subCategory": null, "contentType": null, "state": null, "linkLabel": "Why is product marketing important?", "linkUrl": null, "linkParams": null, "linkTarget": null, "type": "NO_LINK", "children": [ { "isPublished": false, "pageLinkId": null, "pageLinkName": null, "isDeleted": null, "categoryId": null, "subCategory": null, "contentType": null, "state": null, "linkLabel": "Product Marketing Responsibilities", "linkUrl": "#product-marketing-responsibilities", "linkParams": null, "linkTarget": null, "type": "URL_LINK", "children": [] }, { "isPublished": false, "pageLinkId": null, "pageLinkName": null, "isDeleted": null, "categoryId": null, "subCategory": null, "contentType": null, "state": null, "linkLabel": "1. Identify the buyer personas and target audience for your product.", "linkUrl": "#step1", "linkParams": null, "linkTarget": null, "type": "URL_LINK", "children": [] }, { "isPublished": false, "pageLinkId": null, "pageLinkName": null, "isDeleted": null, "categoryId": null, "subCategory": null, "contentType": null, "state": null, "linkLabel": "2. Successfully create, manage and carry out your product marketing strategy.", "linkUrl": "#step2", "linkParams": null, "linkTarget": null, "type": "URL_LINK", "children": [] } ] }, { "isPublished": false, "pageLinkId": null, "pageLinkName": null, "isDeleted": null, "categoryId": null, "subCategory": null, "contentType": null, "state": null, "linkLabel": "How HubSpot can help", "linkUrl": "https://hubspot.com", "linkParams": null, "linkTarget": null, "type": "URL_LINK", "children": [] } ] } ``` | Paramètre | Type | Description | Par défaut | | --------- | ---------------- | ------------------------------------------------------ | ---------- | | `default` | Tableau d'objets | La structure JSON pour le menu et les enfants du menu. | `[]` | ```jsx theme={null} import { ModuleFields, SimpleMenuField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ---------------- | ------------------------------------------------------ | ---------- | | `default` | Tableau d'objets | La structure JSON pour le menu et les enfants du menu. | `[]` | ## Espacement
Ce champ fournit une interface utilisateur (IU) permettant aux créateurs de contenu de définir le remplissage et la marge. Les champs d'espacement ont une propriété `.css` qui renvoie une CSS basée sur la valeur du champ. [Découvrez-en davantage sur la propriété CSS générée.](https://developers.hubspot.fr/docs/cms/reference/fields/overview#generated-css) Les champs d'espacement sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview). Les champs d'espacement ne peuvent être utilisés que comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
capture d'écran du champ de style d'espacement développé dans l'éditeur de page ```json theme={null} { "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "limits": { "padding": { "top": { "max": 50, "min": 25, "units": ["px", "pt", "em"] }, "left": { "max": 50, "units": ["px", "pt", "em"] }, "bottom": { "max": 50, "units": ["px", "pt", "em"] } }, "margin": { "top": { "max": 50, "min": 25, "units": ["px", "pt", "em"] }, "bottom": { "max": 25, "units": ["Q", "rem", "em"] } } }, "default": { "padding": { "top": { "value": 57, "units": "px" }, "bottom": { "value": 57, "units": "px" }, "left": { "value": 57, "units": "px" }, "right": { "value": 57, "units": "px" } }, "margin": { "top": { "value": 20, "units": "px" }, "bottom": { "value": 20, "units": "px" } } } } ``` | Paramètre | Type | Description | Par défaut | | --------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Objet | Permet de définir les valeurs d'espacement par défaut. Contient les objets `padding` et `margin` :Utilisez `units` pour définir les unités qu'un créateur de contenu peut utiliser dans HubSpot. Découvrez-en davantage sur les unités ci-dessous. | `{}` | | `limits` | Objet | Permet de définir les directives pour l'espacement `min` et `max`. Contient les objets `padding` et `margin` :Utilisez `units` pour définir les unités qu'un créateur de contenu peut utiliser dans HubSpot. Découvrez-en davantage sur les unités ci-dessous. | | ```jsx theme={null} import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Objet | Permet de définir les valeurs d'espacement par défaut. Contient les objets `padding` et `margin` :Utilisez `units` pour définir les unités qu'un créateur de contenu peut utiliser dans HubSpot. Découvrez-en davantage sur les unités ci-dessous. | `{}` | | `limits` | Objet | Permet de définir les directives pour l'espacement `min` et `max`. Contient les objets `padding` et `margin` :Utilisez `units` pour définir les unités qu'un créateur de contenu peut utiliser dans HubSpot. Découvrez-en davantage sur les unités ci-dessous. | | Lorsque vous utilisez le champ d'espacement, veuillez prendre note de ce qui suit : * Vous devez inclure une liste `units` lors de la définition de `min` ou `max`. * La propriété `units` prend en charge les types d'unité suivants : `%`, `ch`, `em`, `ex`, `in`, `lh`, `pc`, `pt`, `px`, `Q`, `rem`, `vh`, `vmax`, `vmin` et `vw`. * Lorsqu'un créateur de contenu modifie en masse tous les éléments de remplissage, HubSpot utilise la valeur la plus élevée `min` et la valeur la plus faible `max`. En outre, seules les unités partagées par tous les éléments seront disponibles pour le créateur de contenu. ## Balise
Les champs de balise fournissent un sélecteur de balises de blog pour les créateurs de contenu. Ce sélecteur de balise renvoie un identifiant de balise de blog qui peut ensuite être utilisé dans les fonctions liées aux balises de blog telles que [URL Balise de blog](/cms/reference/hubl/functions#blog-tag-url) et [Articles Balise de blog récente](/cms/reference/hubl/functions#blog-recent-tag-posts). Les champs de balise sont pris en charge dans les modules.
champ de balise ```json theme={null} { "id": "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9", "name": "blog_tag", "label": "Blog Tag", "required": false, "locked": false, "tag_value": "SLUG", "type": "tag", "default": null } ``` | Paramètre | Type | Description | Par défaut | | ----------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Chaîne | ID de la balise. | `null` | | `tag_value` | Chaîne | La valeur de sortie. Peut être l'un des objets suivants : | `SLUG` | ```jsx theme={null} import { ModuleFields, TagField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ---------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Chaîne | ID de la balise. | `null` | | `tagValue` | Chaîne | La valeur de sortie. Peut être l'un des objets suivants : | `SLUG` | ## Texte
Les champs de texte offrent aux créateurs de contenu une expérience d'édition de texte simple, sans fonctionnalité de texte enrichi. Les champs de texte s'affichent initialement sur une seule ligne, mais ils peuvent se transformer en zones de texte et prendre en charge plusieurs lignes. Utilisez-les lorsque vous ne voulez pas que les créateurs de contenu contrôlent la mise en forme. Si vous souhaitez autoriser le contrôle de mise en forme, utilisez des [champs de texte enrichi](#rich-text). Les champs de texte sont pris en charge dans les modules.
champ de texte ```json theme={null} { "name": "product_name", "label": "Product Name", "required": false, "locked": false, "validation_regex": "", "allow_new_line": false, "show_emoji_picker": false, "type": "text", "default": "" } ``` | Paramètre | Type | Description | Par défaut | | --------- | ------ | ------------------- | ---------- | | `default` | Chaîne | La chaîne de texte. | `""` | ```jsx theme={null} import { ModuleFields, TextField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------- | ------ | ------------------- | ---------- | | `default` | Chaîne | La chaîne de texte. | `""` | ## Alignement du texte
Cette zone permet aux créateurs de contenu d'aligner le contenu du texte dans un conteneur. Ce champ ne doit pas être utilisé pour aligner d'autres ressources, car il existe un [type de champ spécifique pour cela](#alignment). Les champs d'alignement du texte sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview). Les champs d'alignement du texte ne peuvent être utilisés que comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).
Champ d'alignement du texte ```json theme={null} { "name": "heading_align", "label": "Heading alignment", "required": false, "type": "textalignment", "default": { "text_align": "LEFT" } } ``` | Paramètre | Type | Description | Par défaut | | --------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Objet | L'objet contenant `horizontal_align` et `vertical_align`. | | | `alignment_direction` | Chaîne | Permet de déterminer si seuls les contrôles d'alignement horizontal, vertical ou les deux doivent être affichés. Peut-être : | `BOTH` | ```jsx theme={null} import { ModuleFields, TextAlignmentField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | -------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Objet | L'objet contenant `horizontal_align` et `vertical_align`. | | | `alignmentDirection` | Chaîne | Permet de déterminer si seuls les contrôles d'alignement horizontal, vertical ou les deux doivent être affichés. Peut-être : | `BOTH` | ## URL
Les champs d'URL offrent une expérience similaire à celle des champs de liens. Fournir une interface utilisateur permettant aux créateurs de contenu d'ajouter des liens. Les champs d'URL, cependant, n'affichent pas d'interface utilisateur pour ouvrir dans une nouvelle fenêtre, ni ne disent aux moteurs de recherche de ne pas suivre. Utilisez ce champ lorsque vous voulez, en tant que développeur, dicter les valeurs de ce champ. Si vous voulez que l'utilisateur ait le contrôle, utilisez plutôt des [champs de lien](#link). Les champs d'URL sont pris en charge dans les modules.
Champ d'URL ```json theme={null} { "name": "url", "label": "URL", "required": false, "locked": false, "supported_types": ["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "PHONE_NUMBER", "WHATSAPP_NUMBER"], "type": "url", "default": { "content_id": null, "href": "http://example.com", "type": "EXTERNAL" } } ``` | Paramètre | Type | Description | Par défaut | | ----------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | | `default` | Objet | Un objet URL, avec type, href et id de contenu (si le contenu est une page ou un article sur HubSpot) | `{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }` | | `supported_types` | Tableau | La liste des types de liens que ce champ permet aux créateurs de contenu de sélectionner. Supprimez de la liste les types que vous ne voulez pas que les créateurs de contenu puissent définir. Les types incluent : | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` | ```jsx theme={null} import { ModuleFields, UrlField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | ---------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | | `default` | Objet | Un objet URL, avec type, href et id de contenu (si le contenu est une page ou un article sur HubSpot) | `{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }` | | `supportedTypes` | Tableau | La liste des types de liens que ce champ permet aux créateurs de contenu de sélectionner. Supprimez de la liste les types que vous ne voulez pas que les créateurs de contenu puissent définir. Les types incluent : | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` | ## Vidéos
Les champs de vidéo permettent aux éditeurs de contenu d'ajouter HubSpot Vidéo au contenu de leurs modules sans avoir à utiliser des champs de texte enrichi.
Champ de vidéo ```json theme={null} { "id": "ca4a319e-5b58-422e-47ac-49ce1b51b507", "name": "videoplayer_field", "label": "Video", "required": false, "locked": false, "type": "videoplayer", "show_advanced_options": false, "default": { "player_id": 32173842991, "height": 1224, "width": 1872, "conversion_asset": { "type": "CTA", "id": "c3e4fa03-2c69-461d-b9af-22b2fde86bc7", "position": "POST" }, "loop_video": false, "mute_by_default": false, "autoplay": false, "hide_control": false } } ``` | Paramètre | Type | Description | Par défaut | | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Objet | L'objet vidéo avec des paramètres pour `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` et `hide_control`. | `[]` | | `show_advanced_options` | Booléen | Si les créateurs de contenu peuvent voir les options avancées par défaut. | `false` | ```jsx theme={null} import { ModuleFields, VideoField } from "@hubspot/cms-components/fields"; ``` | Propriété | Type | Description | Par défaut | | --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `default` | Objet | L'objet vidéo avec des paramètres pour `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` et `hide_control`. | `[]` | | `showAdvancedOptions` | Booléen | Si les créateurs de contenu peuvent voir les options avancées par défaut. | `false` | ### conversion\_asset paramètres de l'objet | Paramètre | Type | Description | Par défaut | | ---------- | ------ | -------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `type` | Chaîne | Permet d'accepter soit `"FORM"`, `"CTA"`, ou `""` | `""` | | `id` | Chaîne | L'identifiant du formulaire ou du type de call-to-action | `""` | | `position` | Chaîne | Si la ressource de conversion doit être affichée avant le début de la vidéo ou après sa fin. Accepte soit « PRE » soit « POST ». | `""` | ``` ```