Zum Hauptinhalt springen
Letzte Änderung: 7. Oktober 2025
Innerhalb von Modulen und Designs werden Felder verwendet, um Content-Autoren zu ermöglichen, die Formatierung von Modulen und Designs mit Stilen und die Funktionalität auf Ihrer Website zu steuern. Beim Entwickeln eines Moduls oder Designs fügen Sie Felder in eine fields.json-Datei ein, die dann in das Design und die Content-Editoren übersetzt wird.
theme-settings-fields
Im Folgenden erfahren Sie mehr darüber, wie Sie Optionen für Modul- und Designfelder erstellen und verwalten. Weitere Informationen zu bestimmten Feldtypen finden Sie im Referenzleitfaden für Modul- und Feldtypen.

​
Erstellen und Verwalten von Feldern

Sie können der fields.json-Datei eines Moduls lokal über das HubSpot-CLI und im In-App-Modul-Editor Felder hinzufügen. Um Felder zu einem Design hinzuzufügen, müssen Sie die fields.json-Datei des Designs lokal über das CLI aktualisieren.

​
HubSpot-CLI

Beim lokalen Erstellen können die Felder von Modulen und Designs über eine fields.json-Datei im Ordner des Moduls oder Designs bearbeitet werden. Bei Modulen wird diese Datei automatisch erstellt, wenn der hs create module-Befehl verwendet wird. Alle im Modul-Editor verfügbaren Feldoptionen sind als Eigenschaften verfügbar, die Sie in der fields.json-Datei hinzufügen oder bearbeiten können. Dazu gehören Wiederholfelder, Wiederholgruppen und Bedingungen. Einer der Vorteile der lokalen Bearbeitung ist, dass es einfacher ist, Ihre Module in Versionskontrollsysteme wie Git einzubinden.

​
Modul-Editor

Der Design-Manager verfügt über eine integrierte Modul-Editor-Benutzeroberfläche, mit der Sie Modulfelder erstellen, gruppieren und bearbeiten können. Der Modul-Editor enthält eine Modulvorschau, mit der Sie sehen können, wie das Modul alleine aussieht, und mit der Sie Ihre Felder testen können. Da Module immer in einem Kontext angezeigt werden, sollten Sie sie immer in einer Vorlage testen, die Sie verwenden möchten, um zu sehen, welche sich Stile auf Vorlagenebene möglicherweise auf sie auswirken. Beachten Sie, dass ein Modul, das sich in einem gesperrten Ordner befindet, auf diese Weise nicht bearbeitet werden kann.
Modul-Editor des Design-Managers
Hinweis: Wenn Sie hauptsächlich lokal arbeiten, den Modul-Editor jedoch zum Konfigurieren von Feldern verwenden möchten, müssen Sie sicherstellen, dass Sie Ihre Änderungen abrufen. Dies ist besonders wichtig für diejenigen, die Versionskontrollsysteme wie Git verwenden.

​
Nebeneinander platzierte Felder

Standardmäßig werden Modulfelder in Content-Editoren vertikal gestapelt. Sie können jedoch Modulfelder nebeneinander platzieren, indem Sie den Feldern in der display_width-Datei eine fields.json-Eigenschaft mit dem Wert half_width hinzufügen.
side-by-side-modules0
Ein einzelnes Feld mit einer display_width von half_width wird im Content-Editor in halber Breite angezeigt. Wenn das Feld über oder unter diesem Feld in der fields.json-Datei auf half_width festgelegt ist, werden sie nebeneinander platziert. 
// Example module fields.json file
[
  {
    "name": "number_field",
    "label": "Number",
    "required": false,
    "locked": false,
    "display": "slider",
    "min": 1,
    "max": 10,
    "step": 1,
    "type": "number",
    "prefix": "",
    "suffix": "",
    "default": null,
    "display_width": "half_width"
  },
  {
    "label": "Description",
    "name": "description",
    "type": "text",
    "required": true,
    "default": "Add a description",
    "display_width": "half_width"
  }
]

​
Feldgruppen

Wenn Felder miteinander in Beziehung stehen, ist es oft sinnvoll, sie visuell zu gruppieren. Erstellen Sie dazu Feldgruppen, die sowohl in Modulen als auch in Designs unterstützt werden. Um lokal eine Feldgruppe zu erstellen, erstellen Sie in fields.json ein Objekt mit type "group". Fügen Sie dann ein children-Array hinzu, das die Felder enthält, die Sie zusammenfassen möchten.
simple-field-group-example
[
  {
    "id": "9c00985f-01db-ac5d-73f5-80ed6c0c7863",
    "name": "my_text",
    "display_width": null,
    "label": "Text",
    "required": true,
    "locked": false,
    "validation_regex": "",
    "allow_new_line": false,
    "show_emoji_picker": false,
    "type": "text",
    "default": "Add text here"
  },
  {
    "type": "group",
    "name": "recipe_summary_group",
    "label": "Recipe summary",
    "expanded": true,
    "inline_help_text": "Summarize the recipe (title and description)",
    "children": [
      {
        "type": "text",
        "label": "Recipe title",
        "name": "recipe_title",
        "placeholder": "Burrata salad"
      },
      {
        "type": "text",
        "label": "Recipe description",
        "name": "recipe_description",
        "placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
      }
    ]
  }
]
Sie können weitere Feldgruppierungen innerhalb einer Gruppe erstellen, indem Sie ein weiteres "group"-Objekt innerhalb des ersten children-Parameters hinzufügen. Erstellen Sie dann die Feldgruppe auf die gleiche Weise wie oben, indem Sie children verwenden, um die Felder einzuschließen. Sie können Feldgruppen bis zu einer Tiefe von drei verschachteln.
field-group-with-secondary-grouping
[
  {
    "type": "group",
    "name": "recipe_summary_group",
    "label": "Recipe summary",
    "inline_help_text": "Summarize the recipe (title and description)",
    "display": "inline",
    "children": [
      {
        "type": "text",
        "label": "Recipe title",
        "name": "recipe_title",
        "placeholder": "Burrata salad"
      },
      {
        "type": "text",
        "label": "Recipe description",
        "name": "recipe_description",
        "placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
      },
      {
        "type": "group",
        "name": "secondary_group",
        "label": "Secondary group",
        "expanded": false,
        "children": [
          {
            "name": "bg_color",
            "label": "Background color",
            "sortable": false,
            "required": false,
            "locked": false,
            "type": "color",
            "default": {
              "color": "#ff0000",
              "opacity": 100
            }
          }
        ]
      }
    ]
  }
]

​
Optionen für die Anzeige von Feldgruppen

Sie können folgende Anzeigeverhalten der Feldgruppen anpassen:
  • Erweiterung: Standardmäßig werden Feldgruppen im Editor ausgeblendet. Gruppen, die verschachtelte Gruppen enthalten, werden als Drilldown-Schaltflächen angezeigt, mit denen die Gruppe in einer eigenen Ansicht geöffnet wird, wobei die innerste Gruppe Trennzeichen anzeigt.
default-collapsed-group
  • Anzeigetyp: Gruppen, die keine verschachtelten Gruppen enthalten, werden standardmäßig als ausblendbare Abschnitte mit visuellen Trennzeichen um ihre untergeordneten Abschnitte herum angezeigt. Gruppen, die verschachtelte Gruppen enthalten, werden als Drilldown-Schaltflächen angezeigt, mit denen die Gruppe in einer eigenen Ansicht geöffnet wird, wobei die innerste Gruppe Trennzeichen anzeigt.
  • Gruppensymbol: Falls gewünscht, können Sie ein „Font Awesome“-Symbol einfügen, das links neben dem Label angezeigt wird.
icon-example
[
  {
    "type": "group",
    "name": "recipe_summary_group",
    "label": "Recipe summary",
    "display": "drilldown",
    "inline_help_text": "Summarize the recipe (title and description)",
    "icon": {
      "name": "star",
      "set": "fontawesome-5.14.0",
      "type": "SOLID"
    },
    "children": [
      {
        "type": "text",
        "label": "Recipe title",
        "name": "recipe_title",
        "placeholder": "Burrata salad"
      },
      {
        "type": "text",
        "label": "Recipe description",
        "name": "recipe_description",
        "placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
      }
    ]
  }
]
ParameterTypBeschreibung
displayZeichenfolgeDer Anzeigestil der Feldgruppe. Kann eine der folgenden Optionen sein:
  • drilldown: zeigt die reduzierte Gruppe mit einer Schaltfläche zum Öffnen der untergeordneten Elemente der Gruppe in einem eigenen Bereich an. Dies ist die Standardanzeige für Gruppen, die verschachtelte Gruppen enthalten.
  • accordion: zeigt die reduzierte Gruppe mit einer Schaltfläche zum Erweitern der untergeordneten Elemente der Gruppe unten als erweiterbaren Bereich an. Dies ist die Standardanzeige für Gruppen ohne verschachtelte Gruppen:
  • inline: zeigt die Gruppe und ihre untergeordneten Elemente inline an, ohne die Option zum Reduzieren der Gruppe.
iconObjektFügt links neben dem Label ein Symbol hinzu. Enthält die folgenden Parameter:
  • name: die Font Awesome-Symbol-ID
  • set: der Font Awesome-Symbolsatz
  • type: Symbolstil (z. B. SOLID, REGULAR).
expandedBooleschGibt an, ob die Feldgruppe standardmäßig erweitert ist

​
Ausgabe von Feldwerten innerhalb von Feldgruppen

Feldgruppen erstellen Dictionaries, die die Feldwerte enthalten, die Sie ausgeben möchten. Wenn Sie Feldgruppen verschachteln, ist die verschachtelte Feldgruppe ein Dictionary innerhalb des äußeren Feldgruppen-Dictionarys. Um auf diese Daten zuzugreifen, durchlaufen Sie den Baum je nach Kontext entweder vom Stammdesign oder von der Modulvariable aus. 
<div>
{# printing a value from a field group `recipe_summary` is the field group,
`title` is the text field. #} {{module.recipe_summary.title}}
</div>

​
Ausgewählte Elemente in Feldgruppen

In Situationen, in denen eine Feldgruppe wiederholt wird, können Sie eines oder mehrere dieser Vorkommen als ausgewählt angeben, sodass Sie das Element separat formatieren können, um es hervorzuheben. Dies kann z. B. besonders nützlich für eine Produktseite sein, auf der Sie ein bestimmtes Produkt hervorheben möchten. Sie können eine maximale Anzahl von ausgewählten Elementen pro Feldgruppe festlegen. Im Editor können Content-Autoren dann bei Bedarf Elemente als ausgewählt markieren.
cms-feldgruppe-featured-in-app (1)
Um Feature-Elemente in einer Feldgruppe zu aktivieren, fügen Sie die group_occurrence_meta-Eigenschaft in die Konfiguration der Feldgruppe ein. In dieser Eigenschaft werden die folgenden Eigenschaften gespeichert:
  • featured_enabled: wird auf true festgelegt um ausgewählte Elemente zu aktivieren.
  • featured_limit: die maximale Anzahl an zulässigen ausgewählten Elementen.
Die Feldgruppe muss auch die occurrence-Eigenschaft berücksichtigen. 
// Field group example
{
  "label": "Card",
  "name": "card",
  "type": "group",
  "occurrence": {
    "default": 2,
    "min": 1,
    "sorting_label_field": "card.title"
  },
  "group_occurrence_meta": {
    "featured_enabled": true,
    "featured_limit": 3
  },
  "children": [
    {
      "label": "Image",
      "name": "image",
      "type": "image",
      "responsive": true,
      "resizable": true,
      "show_loading": true,
      "default": {
        "loading": "lazy"
      }
    },
    {
      "label": "Content",
      "name": "text",
      "type": "richtext",
      "enabled_features": [
        "advanced_emphasis",
        "alignment",
        "block",
        "emoji",
        "font_family",
        "font_size",
        "lists",
        "standard_emphasis"
      ],
      "default": "<h3>This is a title</h3><p>Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.</p>"
    }
  ],
  "default": [
    {
      "image": {
        "loading": "lazy"
      },
      "text": "<h3>This is a title</h3><p>Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.</p>"
    },
    {
      "image": {
        "loading": "lazy"
      },
      "text": "<h3>This is a title</h3><p>Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.</p>"
    }
  ]
}
Um zu überprüfen, ob ein Element in einer wiederholten Gruppe hervorgehoben wird, können Sie die hs_meta-Eigenschaft abfragen. Der folgende Code verwendet eine for-Schleife, um nach Feldgruppenelementen zu suchen, die als ausgewählt festgelegt sind, und zeigt dann den Titel jedes Elements als h3-Header an. {{ repeated_group_item.hs_meta.occurrence.featured }} 
<div>
  <h2>Check out this week's featured items:</h2>
  <div>
    {% for item in module.card %}
        {% if item.hs_meta.occurrence.featured %}
            <h3>{{item.title}}</h3>
        {% endif %}
    {% endfor %}
  </div>
</div>

​
Stilfelder

Stilfelder sind ein spezieller Feldgruppentyp in der fields.json-Datei eines Moduls oder Designs, der Content-Autoren die Kontrolle über das Formatieren eines Moduls oder Designs im Seiten- und Design-Editor gibt. Im Folgenden erfahren Sie, wie Sie Stilfelder zu einem Modul oder Design hinzufügen können. Informieren Sie sich über bewährte Methoden zur Verwendung und Organisation von Stilfeldern.

​
Modulstilfelder

Stilfelder, die einem Modul hinzugefügt werden, erscheinen bei der Bearbeitung des Moduls auf der Registerkarte Stile des Seiten-Editors.
style-field-module-editor0
Wenn Sie Stilfelder zur fields.json-Datei eines Moduls hinzufügen, fügen Sie sie innerhalb einer Stilgruppe hinzu. Diese Gruppe kann jedoch mehrere Gruppen enthalten, wie unten dargestellt: 
// Module style fields
[
  {
    "type": "group",
    "name": "styles",
    "tab": "STYLE",
    "children": [
      {
        "name": "img_spacing",
        "label": "Spacing around image",
        "required": false,
        "type": "spacing",
        "default": {
          "padding": {
            "top": {
              "value": 10,
              "units": "px"
            },
            "bottom": {
              "value": 10,
              "units": "px"
            },
            "left": {
              "value": 10,
              "units": "px"
            },
            "right": {
              "value": 10,
              "units": "px"
            }
          },
          "margin": {
            "top": {
              "value": 10,
              "units": "px"
            },
            "bottom": {
              "value": 10,
              "units": "px"
            }
          }
        }
      }
    ]
  }
]
Die folgenden Felder können als Stilfelder in Modulen verwendet werden. Erfahren Sie mehr über die einzelnen Feldtypen im Leitfaden für Module und Feldtypen. Erfahren Sie mehr über Modul- und Designfeldtypen. Ein Beispiel für ein Stilfeld in der fields.json-Datei eines Moduls finden Sie in der CMS Boilerplate.

​
Designstilfelder

Stilfelder, die einem Design hinzugefügt werden, erscheinen in der linken Seitenleiste des Design-Editors:
style-field-theme-editor0
Alle Stilfelder in der fields.json-Datei eines Designs werden in die linke Seitenleiste des Design-Editors eingefügt und müssen nicht mehr in eine Stilgruppe eingeordnet werden, wie unten dargestellt: 
// Theme style fields
[
  {
    "label": "Global colors",
    "name": "global_colors",
    "type": "group",
    "children": [
      {
        "label": "Primary",
        "name": "primary",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#494A52"
        }
      },
      {
        "label": "Secondary",
        "name": "secondary",
        "type": "color",
        "visibility": {
          "hidden_subfields": {
            "opacity": true
          }
        },
        "default": {
          "color": "#F8FAFC"
        }
      }
    ]
  },
  {
    "label": "Global fonts",
    "name": "global_fonts",
    "type": "group",
    "children": [
      {
        "label": "Primary",
        "name": "primary",
        "type": "font",
        "visibility": {
          "hidden_subfields": {
            "size": true,
            "styles": true
          }
        },
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_colors.primary.color"
          }
        },
        "default": {
          "fallback": "sans-serif",
          "font": "Lato",
          "font_set": "GOOGLE"
        }
      },
      {
        "label": "Secondary",
        "name": "secondary",
        "type": "font",
        "visibility": {
          "hidden_subfields": {
            "size": true,
            "styles": true
          }
        },
        "inherited_value": {
          "property_value_paths": {
            "color": "theme.global_colors.primary.color"
          }
        },
        "default": {
          "fallback": "serif",
          "font": "Merriweather",
          "font_set": "GOOGLE"
        }
      }
    ]
  },
  {
    "name": "branding_color",
    "label": "branding_color",
    "type": "color",
    "default": {
      "color": "#3b7bc0", "opacity": 60
    },
    "inherited_value": {
      "property_value_paths": {
        "color": "brand_settings.primaryColor"
       }
    }
  },
  {
    "name": "secondary_branding_color",
    "label": "Secondary Branding color",
    "type": "color",
    "default": {
      "color": "#ff6b6b", "opacity": 60
    },
    "inherited_value": {
      "property_value_paths": {
        "color": "brand_settings.colors[2]"
         }
       }
     }
   ]
  }
]
Die folgenden Felder können als Stilfelder in Designs verwendet werden. Erfahren Sie mehr über die einzelnen Feldtypen im Leitfaden für Module und Feldtypen. Erfahren Sie mehr über Modul- und Designfeldtypen. Ein Beispiel für ein Stilfeld in der fields.json-Datei eines Designs finden Sie in der CMS Boilerplate.
Hinweis: Wenn Sie ein Marketplace-Anbieter sind, sollten Sie bestehende Inhaltsfelder nicht durch Stilfelder in bestehenden Modulen ersetzen. Eine Änderung der Feldhierarchie in einer fields.json-Datei kann dazu führen, dass vorhandene Modulinstanzen ihre Daten verlieren. Stattdessen sollten Sie neue Stilfelder hinzufügen oder eine neue Auflistung erstellen, in der die Felder entsprechend gruppiert sind. Dadurch wird verhindert, dass Ihre Updates Kunden, die sich auf Ihre Design verlassen, Probleme bereiten. Wenn Sie sich für Migrationspfade für alte Module einsetzen möchten, besuchen Sie das Ideen-Forum von HubSpot.

​
Generiertes CSS

Einige Stilfelder bieten die Möglichkeit, CSS direkt auf der Grundlage des Feldwertes auszugeben. Dies ist besonders hilfreich bei Feldern, die eine kompliziertere Formatierung wie Farbverläufe steuern können. Die folgenden Stilfelder haben eine generierte .css-Eigenschaft: 
{% require_css %}
<style>
{% scope_css %}
  .team-member {
  {% if module.style.gradient.css %}
  background: {{ module.style.gradient.css }};
  {% endif %}
  {{ module.style.bg_img.css }}
  {{ module.style.spacing.css }}
  {{ module.style.border.css }}
  }
{% end_scope_css %}
</style>
{% end_require_css %}

​
Wiederholungen

Bei der Erstellung von Modulen, die Informationen formatieren, gibt es oft Typen von Informationen, die sich wiederholen. Ein Rezeptmodul könnte zum Beispiel ein Feld für „Zutat“ haben. Die meisten Rezepte haben aber natürlich mehr als 1 Zutat. Sie könnten ihnen ein Rich-Text-Feld bereitstellen, aber dann verlieren Sie die Möglichkeit, eine einheitliche Formatierung durchzusetzen und Funktionen für jede Zutat hinzuzufügen. Hier kommen die Wiederholungen ins Spiel. HubSpot bietet zwei Arten von Wiederholungen an: Wiederholfelder und Wiederholgruppen.

​
Wiederholfelder

Auf diese Weise kann der Content-Autoren so viele Zutaten hinzufügen, wie er möchte. Aus der Sicht des Entwicklers erhalten Sie ein Array, das Sie in einer Schleife durchlaufen lassen können, um die Liste der Zutaten unter Anwendung der gewünschten Formatierung und Funktionalität zu drucken. Wiederholfelder werden am besten für sehr einfache Szenarien verwendet. Häufig sind Wiederholgruppen sinnvoller.
Hinweis: Es ist derzeit nicht möglich, die Standardreihenfolge von sich wiederholenden Feldern festzulegen.

​
Wiederholfelder in fields.json

// Repeating field example
{
  "name": "ingredient",
  "label": "Ingredient",
  "required": false,
  "locked": false,
  "occurrence": {
    "min": 1,
    "max": null,
    "sorting_label_field": null,
    "default": 1
  },
  "allow_new_line": false,
  "show_emoji_picker": true,
  "type": "text",
  "default": ["1 cup water"]
}

​
Elemente in Modul-HTML+HubL in einer Schleife durchlaufen

<!--Looping through a repeating field-->
<ul>
  {% for item in module.ingredient %}
  <li>{{ item }}</li>
  {% endfor %}
</ul>

​
Wiederholgruppen

Die Menge einer Zutat wäre entscheidend für die Einkaufsliste. Das könnte man zwar in das Textfeld eingeben, dann müsste das Modul jedoch das Textfeld auswerten und hoffen, dass wir die Menge erfolgreich von der Zutat trennen können. Hier sind Wiederholgruppen sehr nützlich. Die Ausgabe dieser Felder ist ein Objekt, das in einer Schleife durchlaufen werden kann.

​
Wiederholgruppen in fields.json

// Repeating field group example
{
  "id": "ingredients",
  "name": "ingredients",
  "label": "Ingredients",
  "required": false,
  "locked": false,
  "occurrence": {
    "min": 1,
    "max": null,
    "sorting_label_field": "ingredients.ingredient",
    "default": null
  },
  "children": [
    {
      "id": "ingredients.ingredient",
      "name": "ingredient",
      "label": "Ingredient",
      "required": false,
      "locked": false,
      "validation_regex": "",
      "allow_new_line": false,
      "show_emoji_picker": false,
      "type": "text",
      "default": "Water"
    },
    {
      "id": "ingredients.quantity",
      "name": "quantity",
      "label": "Quantity",
      "required": false,
      "locked": false,
      "display": "text",
      "min": 0,
      "step": 1,
      "type": "number",
      "default": 1
    },
    {
      "id": "ingredients.measurement",
      "name": "measurement",
      "label": "Measurement",
      "help_text": "Unit of measurement (cups, tbsp, etc.)",
      "required": false,
      "locked": false,
      "allow_new_line": false,
      "show_emoji_picker": false,
      "type": "text",
      "default": "cups"
    }
  ],
  "type": "group",
  "default": [
    {
      "ingredient": "Water",
      "quantity": 1,
      "measurement": "cups"
    }
  ]
}

​
Durchlaufen von Wiederholfeldern in Modulen in einer Schleife

<h2>Ingredients</h2>
<ul>
  {% for ingredient in module.ingredients %}
  <li>
    <button
      data-quantity="{{ ingredient.quantity }}"
      data-unit="{{ ingredient.measurement }}"
      data-ingredient="{{ ingredient.ingredient }}"
    >
      Add to cart
    </button>
    {{ ingredient.quantity }} {{ ingredient.measurement }} {{
    ingredient.ingredient }}
  </li>
  {% endfor %}
</ul>

​
WiederholOptionen

"occurrence" : {
    "min" : 1,
    "max" : 4,
    "sorting_label_field" : "ingredients.ingredient",
}
ParameterTypBeschreibungStandard
maxGanzzahlMaximale Anzahl der Vorkommen dieser Gruppe. Verhindert, dass der Content-Autor mehr als diese Anzahl von Elementen auf der Benutzeroberfläche hinzufügt.null
minGanzzahlMindestanzahl der Vorkommen dieser Feldgruppe. Verhindert, dass Benutzer weniger als diese Anzahl von Elementen auf der Benutzeroberfläche haben.null
sorting_label_fieldZeichenfolgeDies ist die Feld-ID des Feldes, aus dem der Text übernommen wird, der auf der Benutzeroberfläche auf den verschiebbaren Karten angezeigt werden soll. Standardmäßig ist dies das erste Feld in der Gruppe.

​
Übernommene Felder

Die inherited_value-Eigenschaft kann so konfiguriert werden, dass ein Feld seinen Standardwert von anderen Feldern übernimmt. Um festzulegen, dass der gesamte Standardwert eines Feldes vom Wert eines anderen Feldes übernommen wird, legen Sie den default_value_path auf den Feldnamenpfad des Zielfeldes fest. Wenn default_value_path festgelegt ist, werden alle default für das Feld ignoriert. Um auf die Werte anderer Felder zuzugreifen, müssen Pfade module. am Anfang enthalten, als ob Sie auf den Wert im HubL-Code des Moduls zugreifen würden. 
// Inherited fields
{
  "name": "body_font",
  "type": "font",
  "default": {
    "font": "Helvetica",
    "color": "#C27BA0"
  }
},
{
  "name": "h1_font",
  "type": "font",
  "default": {},
  "inherited_value": {
    "default_value_path": "module.body_font",
    "property_value_paths" : {
      "font": "module.body_font.font",
      "font_set": "module.body_font.font_set"
    }
  }
}
Da die Schriftartfamilie durch eine Kombination von font und font_set bestimmt wird, müssen Sie beide für die Vererbung von Schriftartfeldern einschließen. Erfahren Sie mehr über das Schriftartfeld.
Bei komplexen Feldern (Felder, deren Werte Objekte sind) können die Benutzer detaillierter steuern, welche Eigenschaften durch property_value_path vererbt werden. Alle Pfade, auf die in inherited_value verwiesen wird, können bei komplexen Feldern auch Schlüssel aus dem Wert eines Feldes enthalten. Farbfelder haben beispielsweise Objektwerte, die sowohl die Farbe selbst als auch die Deckkraft enthalten. Um also den tatsächlichen Farbwert einer Farbe ohne die Deckkraft zu erhalten, würde der Pfad mit .color enden. So kann beispielsweise ein Schriftartfeld nur seine Farbe von einem separaten Farbfeld erben: 
// Inherited fields with objects
{
  "name": "secondary_color",
  "type": "color",
  "default": {
    "color": "#C27BA0",
    "opacity": 100
  }
},
{
  "name": "h1_font",
  "type": "font",
  "default": {
    "font": "Helvetica",
    "size": 12,
    "size_unit": "px"
  },
  "inherited_value": {
    "property_value_paths": {
      "color": "module.secondary_color.color"
    }
  }
}
Sie können auch die Auswirkungen von default_value_path und property_value_paths kombinieren, damit ein Standardwert von einem Feld übernommen wird, während ein bestimmter Eigenschaftswert von einem anderen Feld übernommen wird: 
// combining default_value_path and property_value_paths
{
  "name": "body_font",
  "type": "font",
  "default": {
    "font": "Helvetica",
    "color": "#000000"
  }
},
{
  "name": "secondary_color",
  "type": "color",
  "default": {
    "color": "#C27BA0",
    "opacity": 100
  }
},
{
  "name": "h1_font",
  "type": "font",
  "default": {},
  "inherited_value": {
    "default_value_path": "module.body_font",
    "property_value_paths": {
      "color": "module.secondary_color.color"
    }
  }
}
Wenn ein Feld von einem anderen Feld erbt, dann aber auf der Seitenebene oder in den Designeinstellungen direkt überschrieben wird, wird seine Verknüpfung mit dem kontrollierenden Feld getrennt. Alle anderen Felder, die über default_value_path oder property_value_paths zugeordnet sind, haben keinen Einfluss mehr auf den Wert des Feldes.

​
Feldsichtbarkeit

Wenn Sie benutzerdefinierte Modul- und Designfelder definieren, können Sie konfigurieren, wann ein Feld angezeigt wird, indem Sie das visibility-Objekt zu dem Feld in der fields.json-Datei hinzufügen. Es ist z. B. möglich, ein Formularmodul festzulegen, um bei Auswahl der Danksagung einen Rich-Text-Bereich, aber bei Auswahl einer Weiterleitung eine Seitenauswahl anzuzeigen. Sie können die Sichtbarkeit anhand des Werts eines controlling_field_path oder anhand einer bestimmten Eigenschaft innerhalb dieses Feldes mithilfe des property-Parameters festlegen. Die Sichtbarkeit lässt sich auch auf ein einzelnes Feld oder auf eine Gruppe von Feldern anwenden, um die Sichtbarkeit für alle Elemente in der Gruppe zu steuern. 
"visibility" : {
 "controlling_field_path" : "field_name",
 "controlling_value_regex" : "regular_expression_in_controlling_field",
 "property": "src",
 "operator" : "EQUAL"
  }
ParameterTypBeschreibung
controlling_field_pathZeichenfolgeDer Punktpfad des Feldes, der die Anzeigebedingung steuert.
  • Wenn das Feld nicht innerhalb einer Feldgruppe verschachtelt ist, verwenden Sie den Namen des Feldes (z. B. field_name).
  • Bei Feldern, die in Gruppen verschachtelt sind, sollte der Pfad durch einen Punkt getrennt seiner Gruppierungsstruktur entsprechen. Beispiel:
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regexZeichenfolgeDie reguläre Ausdruck im steuernden Feld, der vorhanden sein muss, damit das Feld angezeigt wird. Der reguläre Ausdruck muss mit der gesamten Zeichenfolge (nicht mit einer Teilmenge) übereinstimmen und beachtet Groß-/Kleinschreibung.
operatorZeichenfolgeDer Operator, der definiert, wie der controlling_value_regex-Wert erfüllt werden muss. Operatoren können unter anderem sein:
  • NOT_EQUAL
  • EQUAL
  • EMPTY
  • NOT_EMPTY
  • MATCHES_REGEX
propertyZeichenfolgeLegt die Sichtbarkeit basierend auf einer bestimmten Eigenschaft des Zielfeldes fest. Beispielsweise können Sie die Sichtbarkeit aktivieren, wenn die src-Eigenschaft eines Bildfeldes einem bestimmten Wert entspricht. Wenn für dieses Feld kein Wert angegeben wird, basiert die Sichtbarkeit standardmäßig auf dem stringified-Wert von controlling_value_regex.
Sie können auch ein occurrence_options-Objekt in das visibility-Objekt einfügen, um die Wertanzahl eines wiederholten Feldes anzuvisieren. Dieses Objekt sollte count zum Vergleich und eine operator-Definition enthalten. Um z. B. ein Textfeld nur dann anzuzeigen, wenn ein anderes wiederholtes Feld mindestens zwei Elemente enthält, können Sie visibility wie folgt definieren: 
[
  {
    "type": "group",
    "name": "ingredients",
    "label": "Recipe ingredients",
    "display": "drilldown",
    "children": [
      {
        "name": "ingredient",
        "label": "Ingredient",
        "occurrence": {
          "min": 1,
          "max": null,
          "default": 1
        },
        "type": "text",
        "default": [
          "1 cup water"
        ]
      },
      {
        "type": "text",
        "label": "Conditional field",
        "name": "conditional_field",
        "visibility": {
          "controlling_field_path": "ingredients.ingredient",
          "occurrence_options": {
            "count": 2,
            "operator": "GREATER_THAN_OR_EQUAL"
          }
        }
      }
    ]
  }
]
Sie können einen der folgenden operater-Werte verwenden:
  • "NOT_EQUAL"
  • "EQUAL"
  • "EMPTY"
  • "NOT_EMPTY"
  • "GREATER_THAN"
  • "GREATER_THAN_OR_EQUAL"
  • "LESS_THAN"
  • "LESS_THAN_OR_EQUAL"

​
Erweiterte Sichtbarkeit

Das visibility-Attribut kann nur jeweils ein Kriterium unterstützen. Um mehrere Kriterien mit mehreren Operatoren sowie die Reihenfolge der Vorgänge einzuschließen, können Sie advanced_visibility verwenden. 
"visibility_rules" : "ADVANCED",
"advanced_visibility" : {
   "boolean_operator" : "AND",
   "criteria" : [{
     "controlling_field_path" : "field_name",
     "controlling_value_regex" : "regular_expression_in_controlling_field",
      "operator" : "MATCHES_REGEX"
    },
    {
     "controlling_field_path" : "field_name",
     "controlling_value_regex" : "regular_expression_in_controlling_field",
     "operator" : "EQUAL"
    }]
}
ParameterTypBeschreibung
visibility_rulesZeichenfolgeStandardmäßig ist dieser Wert auf SIMPLE festgelegt. Um advanced_visibility zu verwenden, legen Sie es auf ADVANCED fest.
boolean_operatorZeichenfolgeDer boolesche Operator für die bedingten Kriterien. Kann AND oder OR sein.
criteriaArrayEin Array von Sichtbarkeitsobjekten, das die bedingten Kriterien definiert, die erfüllt sein müssen, damit das Feld angezeigt wird.
controlling_field_pathZeichenfolgeDer Punktpfad des Feldes, der die Anzeigebedingung steuert.
  • Wenn das Feld nicht innerhalb einer Feldgruppe verschachtelt ist, verwenden Sie den Namen des Feldes (z. B. field_name).
  • Bei Feldern, die in Gruppen verschachtelt sind, sollte der Pfad durch einen Punkt getrennt seiner Gruppierungsstruktur entsprechen. Beispiel:
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regexZeichenfolgeDer Wert im steuernden Feld, der erfüllt werden muss, um das Feld anzuzeigen. Wenn der MATCHES_REGEX-Operator verwendet wird, muss der reguläre Ausdruck mit der gesamten Zeichenfolge (nicht mit einer Teilmenge) übereinstimmen und beachtet Groß- und Kleinschreibung. Ein Feld mit einem controlling_field_path, aber ohne controlling_value_regex ist sichtbar, wenn das steuernde Feld einen Wert hat, der nicht Null ist und nicht leer ist.
operatorZeichenfolgeDer Operator, der definiert, wie der controlling_value_regex-Wert erfüllt werden muss. Operatoren können unter anderem sein:
  • NOT_EQUAL
  • EQUAL
  • EMPTY
  • NOT_EMPTY
  • MATCHES_REGEX
Regex-Syntax ist erforderlich, wenn MATCHES_REGEX verwendet wird.
Als Beispiel sehen Sie unten den ersten Teil des Codes vom Standardzahlungsmodul. Um den vollständigen Code zu überprüfen, können Sie das Modul in HubSpot klonen und dann in Ihre lokale Umgebung herunterladen, um die fields.json-Datei des Moduls anzuzeigen. 
[
  {
    "id": "payment",
    "name": "payment",
    "display_width": null,
    "label": "Payment",
    "required": true,
    "locked": false,
    "type": "payment",
    "default": {
      "id": null,
      "properties": {}
    }
  },
  {
    "id": "checkout_location",
    "name": "checkout_location",
    "display_width": null,
    "label": "Checkout behavior",
    "required": false,
    "locked": false,
    "visibility": {
      "controlling_field_path": "payment",
      "controlling_value_regex": "id\":\\d+",
      "operator": "MATCHES_REGEX"
    },
    "display": "radio",
    "choices": [
      ["new_tab", "Open in a new tab"],
      ["overlay", "Sliding overlay"]
    ],
    "type": "choice",
    "default": "new_tab"
  },
  {
    "id": "button_text",
    "name": "button_text",
    "display_width": null,
    "label": "Button text",
    "required": true,
    "locked": false,
    "validation_regex": "",
    "visibility": {
      "controlling_field_path": "payment",
      "controlling_value_regex": "id\":\\d+",
      "operator": "MATCHES_REGEX"
    },
    "allow_new_line": false,
    "show_emoji_picker": false,
    "type": "text",
    "default": "Checkout"
  },
  {
    "id": "icon",
    "name": "icon",
    "display_width": null,
    "label": "Icon",
    "required": false,
    "locked": false,
    "visibility_rules": "ADVANCED",
    "advanced_visibility": {
      "boolean_operator": "AND",
      "criteria": [
        {
          "controlling_field_path": "payment",
          "controlling_value_regex": "id\":\\d+",
          "operator": "MATCHES_REGEX"
        },
        {
          "controlling_field_path": "add_icon",
          "controlling_value_regex": "true",
          "operator": "EQUAL"
        }
      ],
      "children": []
    },
    "children": [
      {
        "id": "icon.icon",
        "name": "icon",
        "display_width": null,
        "label": "Icon",
        "required": true,
        "locked": false,
        "icon_set": "fontawesome-5.0.10",
        "type": "icon",
        "default": {
          "name": "hubspot",
          "type": "SOLID",
          "unicode": "f3b2"
        }
      },
      {
        "id": "icon.position",
        "name": "position",
        "display_width": null,
        "label": "Position",
        "required": true,
        "locked": false,
        "display": "select",
        "choices": [
          ["left", "Left"],
          ["right", "Right"]
        ],
        "type": "choice",
        "default": "left"
      }
    ],
    "tab": "CONTENT",
    "expanded": false,
    "type": "group"
  }
  // rest of fields.json code
]
Der obige Code führt zu folgendem Verhalten: Das erste Feld (payment) ist ein Pflichtfeld (Dropdown-Menü), mit dem der Content-Autor einen bestimmten Zahlungslink auswählen kann. In HubSpot sieht ein Content-Autor beim ersten Hinzufügen des Moduls zur Seite Folgendes:
payment-link-selector
  • Sobald ein Zahlungslink ausgewählt wurde, werden die drei Felder angezeigt, die folgen (checkout_location, button_text und icon). Dies liegt daran, dass die Felder über ein visibility-Attribut verfügen, das vom payment-Feld gesteuert wird und einen ID-Wert im id-Parameter des Zahlungsfeldes erfordert.
Das icon-Feld selbst verwendet advanced_visibility, um nur dann angezeigt zu werden, wenn ein Zahlungslink im payment-Feld vorhanden ist UND wenn das add_icon-Kontrollkästchen aktiviert ist. Neben dem Festlegen der Sichtbarkeit innerhalb von fields.json können Sie auch die Sichtbarkeit im Design-Manager festlegen, indem Sie die Optionen für die Anzeigebedingungen eines Feldes bearbeiten.
display-conditions-property
Nach dem Festlegen der Sichtbarkeit im Design-Manager können Sie das Modul mithilfe des CLI abrufen, um das visibility-Attribut in der fields.json-Datei des Moduls anzuzeigen.

​
Deaktivierung von bedingten Feldern

Sie können einem Feld Bedingungen hinzufügen, um das Bearbeiten zu verhindern, wenn die angegebenen Bedingungen erfüllt sind. Sie können auch eine Meldung festlegen, die über dem Feld angezeigt wird, wenn es deaktiviert wird, um Kontext im Content-Editor bereitzustellen.
Screenshot 23.05.2023 um 16.10.28 Uhr
Die Bedingungen und die Meldung werden im disabled_controls-Objekt des Feldes festgelegt. Die Bedingungen, um ein Feld bearbeitbar zu machen, werden innerhalb des rules-Objekts festgelegt, das dem gleichen Format wie advanced_visibility folgt. Der folgende Code zeigt sowohl eine einfache als auch eine erweiterte Implementierung von rules-Kriterien:
  • Das simple_page-Feld enthält Logik zum Deaktivieren des Feldes, wenn das text_field auf testing festgelegt ist.
  • Das fancy_page-Feld enthält Logik zum Deaktivieren des Feldes, wenn entweder text_field oder text_field_2 auf einen Wert ungleich testing bzw. testing2 festgelegt ist.
// example fields.json
[
  {
    "type": "text",
    "name": "text_field",
    "label": "Text field"
  },
  {
    "type": "text",
    "name": "text_field_2",
    "label": "Text field 2"
  },
  {
    "type": "page",
    "label": "Simple Page",
    "name": "simple_page",
    "disabled_controls": {
      "message": "This field is disabled",
      "rules": {
        "criteria": [
          {
            "controlling_field_path": "text_field",
            "operator": "EQUAL",
            "controlling_value_regex": "testing"
          }
        ]
      }
    }
  },
  {
    "type": "page",
    "label": "Fancy Page",
    "name": "fancy_page",
    "disabled_controls": {
      "message": "This field is disabled",
      "rules": {
        "boolean_operator": "OR",
        "criteria": [
          {
            "controlling_field_path": "text_field",
            "operator": "NOT_EQUAL",
            "controlling_value_regex": "testing"
          },
          {
            "controlling_field_path": "text_field_2",
            "operator": "NOT_EQUAL",
            "controlling_value_regex": "testing2"
          }
        ]
      }
    }
  }
]
ParameterTypBeschreibung
messageZeichenfolgeDie Meldung, die im Content-Editor angezeigt werden soll, wenn das Feld deaktiviert ist.
rulesObjektDie Bedingungen für die Freigabe des Feldes für die Bearbeitung.
criteriaArrayEin Array von Bedingungsobjekten, das die Kriterien definiert, die erfüllt sein müssen, damit das Feld angezeigt wird. Dieses Array kann mehrere Bedingungsobjekte enthalten, die durch AND- oder OR-Logik über den boolean_operator-Parameter getrennt sind.
boolean_operatorZeichenfolgeDer boolesche Operator für die bedingten Kriterien. Kann AND oder OR sein. Wenn nicht angegeben, wird standardmäßig AND verwendet.
controlling_field_pathZeichenfolgeDer Punktpfad des Feldes, der die Anzeigebedingung steuert.
  • Wenn das Feld nicht innerhalb einer Feldgruppe verschachtelt ist, verwenden Sie den Namen des Feldes (z. B. field_name).
  • Bei Feldern, die in Gruppen verschachtelt sind, sollte der Pfad durch einen Punkt getrennt seiner Gruppierungsstruktur entsprechen. Beispiel:
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regexZeichenfolgeDer Wert im steuernden Feld, der erfüllt werden muss, um das Feld anzuzeigen. Wenn der MATCHES_REGEX-Operator verwendet wird, muss der reguläre Ausdruck mit der gesamten Zeichenfolge (nicht mit einer Teilmenge) übereinstimmen und beachtet Groß- und Kleinschreibung. Ein Feld mit einem controlling_field_path, aber ohne controlling_value_regex ist sichtbar, wenn das steuernde Feld einen Wert hat, der nicht Null ist und nicht leer ist.
operatorZeichenfolgeDer Operator, der definiert, wie der controlling_value_regex-Wert erfüllt werden muss. Operatoren können unter anderem sein:
  • NOT_EQUAL
  • EQUAL
  • EMPTY
  • NOT_EMPTY
  • MATCHES_REGEX
Regex-Syntax ist erforderlich, wenn MATCHES_REGEX verwendet wird.

​
Hervorheben von Feldern im Design-Editor

Im Design-Editor kann die Vorschau-Hervorhebung Content-Autoren helfen zu verstehen, welche Felder welche Seitenelemente steuern. Bei der Vorschau-Hervorhebung werden die Designfelder den CSS-Selektoren zugeordnet, auf die sie sich auswirken. Dabei wird ein Feld um diese Elemente hinzugefügt, wenn der Mauszeiger über das Feld im Design-Editor bewegt wird. Um die Vorschau-Hervorhebung für Designfelder zu konfigurieren, berücksichtigen Sie eine editor-preview.json-Datei im Stammverzeichnis des Designs, um Designfelder zu einer Liste mit CSS-Selektoren zuzuordnen. In der Datei berücksichtigen Sie für jedes Stilfeld, das Sie hervorheben möchten, ein Array mit den entsprechenden CSS-Selektoren im folgenden Format: 
// editor-preview.json
{
  "selectors": {
    "theme.settings.path.1": [ <CSS selectors> ],
    "theme.settings.path.2": [ <CSS selectors> ],
  }
}
Im folgenden Code wird beispielsweise hervorgehoben, welche Seitenelemente vom primären Schriftartfeld gesteuert werden. Sie können das vollständige Beispiel in der editor-preview.json-Datei des Standard-Growth-Designs anzeigen. 
// editor-preview.json
{
  "selectors": {
    "fonts.primary": [
      "button, .button, .hs-button",
      "form input[type='submit'], form .hs-button",
      ".error-page:before",
      "p",
      "blockquote > footer",
      "form td.is-today .pika-button",
      "form .is-selected .pika-button",
      "th, td",
      ".blog-listing__post-tag",
      ".blog-listing__post-author-name, .blog-post__author-name",
      ".pagination__link-icon svg",
      ".tabs__tab",
      "a",
      ".button.button--simple",
      ".pagination__link .pagination__link-icon svg",
      ".card--dark",
      ".card--light",
      ".card--light summary, .card--light p, .card--light h1, .card--light h2, .card--light h3, .card--light h4, .card--light h5, .card--light h6, .card--light a:not(.button), .card--light span, .card--light div, .card--light li, .card--light blockquote",
      ".card--light .accordion__summary:before",
      "tfoot th, tfoot td",
      ".header__language-switcher-current-label > span",
      ".header__language-switcher-child-toggle svg",
      ".header__language-switcher .lang_list_class a:not(.button)",
      ".header__menu-link",
      ".header__menu-item--depth-1 > .header__menu-link:not(.button)",
      ".header__menu-item--depth-1 .header__menu-child-toggle svg",
      ".header__menu-toggle svg",
      ".header__language-switcher .header__language-switcher-current-label > span",
      ".header p, .header h1, .header h2, .header h3, .header h4, .header h5, .header h6, .header a:not(.button), .header span, .header li, .header blockquote, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab",
      ".footer .hs-menu-wrapper a",
      ".footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer p, .footer a:not(.button), .footer span, .footer div, .footer li, .footer blockquote, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab",
      ".footer hr",
      "form label",
      "#email-prefs-form, #email-prefs-form h1, #email-prefs-form h2",
      "form legend",
      "form input[type='text'], form input[type='email'], form input[type='password'], form input[type='tel'], form input[type='number'], form input[type='search'], form select, form textarea",
      ".backup-unsubscribe input[type='email']",
      "form .legal-consent-container, form .legal-consent-container .hs-richtext, form .legal-consent-container .hs-richtext p",
      "form .hs-richtext, form .hs-richtext *, form .hs-richtext p, form .hs-richtext h1, form .hs-richtext h2, form .hs-richtext h3, form .hs-richtext h4, form .hs-richtext h5, form .hs-richtext h6",
      "button, button, button, .button, .button, .button, .hs-button, .hs-button, .hs-button",
      "button, .button, .hs-button",
      ".button.button--secondary, .button.button--secondary, .button.button--secondary",
      ".button.button--secondary",
      ".header__menu-item--depth-1 > .header__menu-link, .header__menu-item--depth-1 > .header__menu-link",
      ".header__menu-item--depth-1 > .header__menu-link",
      ".header__menu-submenu .header__menu-link, .header__menu-submenu .header__menu-link",
      ".header__language-switcher .lang_list_class a, .header__language-switcher .lang_list_class a",
      ".header__menu-submenu .header__menu-link:not(.button)",
      ".footer .hs-menu-wrapper a, .footer .hs-menu-wrapper a",
      ".footer .hs-menu-wrapper a",
      "form .hs-richtext a",
      ".header__menu-item--depth-1 > .header__menu-link--active-link:not(.button)",
      ".footer .hs-menu-wrapper .active > a"
    ]
  }
}
growth-theme-hover
Um mit der Erstellung dieser Datei zu beginnen, führen Sie den folgenden CLI-Befehl aus, um die Datei zu erstellen. Während der Dateierstellung wird ein Skript ausgeführt, um die anfänglichen Feld-Selektor-Zuordnungen einzurichten. 
hs theme generate-selectors <theme-directory-path>
ParameterBeschreibung
theme-directory-pathDer Pfad zum Designverzeichnis.
Nach dem Ausführen des Befehls müssen Sie die editor-preview.json-Datei überprüfen und optimieren, um sicherzustellen, dass Felder und Selektoren ordnungsgemäß zugeordnet sind. Während der generate-selectors-Befehl eine rudimentäre Vermutung darüber anstellt, welche Felder sich auf welche Selektoren auswirken, müssen Sie je nachdem, wie Ihr Design aufgebaut ist, Korrekturen vornehmen. Dieser Befehl kann beispielsweise nicht erkennen, wenn Module die Formatierung überschreiben oder wenn Sie Makros verwenden. Um diese Zuordnungen zu testen, laden Sie das Design in einen Account hoch und zeigen Sie dann den Design-Editor in diesem Account an (Einstellungen > Website > Designs > Design anzeigen).
⌘I