Überblick über Modul- und Designfelder

Last updated:

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 Sie den hs create module-Befehl verwenden. 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

Bitte beachten: 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 fields.json-Datei eine display_width-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 gruppiert darzustellen. Module und Designs unterstützen das Gruppieren mehrerer Felder. 

Feldgruppe ohne verschachtelte Feldgruppen

Feldgruppen ohne verschachtelte Feldgruppen werden einfach mit Abgrenzungen über und unter der Gruppe angezeigt, und das Label der Gruppe wird am oberen Rand der Gruppe angezeigt.

Verschachtelte Feldgruppe

Feldgruppen können verschachtelt werden. Eine Feldgruppe, die eine andere Feldgruppe enthält, wird als Schaltfläche angezeigt. Wenn Sie auf die Schaltfläche klicken, um die Gruppe anzuzeigen, wird der Inhalt dieser Gruppe angezeigt.

Feldgruppen können 3 Ebenen tief verschachtelt werden, d. h., Modulfelder können 4 Ebenen tief sein. So lassen sich auf einfache Weise Benutzeroberflächen erstellen, die Feldbeziehungen und eine größere Detailtiefe vermitteln.

Feldgruppen in fields.json

Feldgruppenobjekte können als untergeordnete Objekte anderer Feldgruppen aufgelistet werden. Ihre Struktur ist der von Feldern sehr ähnlich, der einzige besondere Parameter ist der Parameter „children“, der ein Array von Feldern und Gruppen ist, die sie enthalten.

// Field group example { "type": "group", "name": "typography", "label": "Typography", "expanded": true, "children": [ { "type": "font", "name": "h1_font", "label": "Heading 1", "load_external_fonts": true, "default": { "color": "#000", "font": "Merriweather", "font_set": "GOOGLE", "variant": "700", "size": "48" } } ] } // Field group inside of a field group { "type": "group", "name": "header", "label": "Header", "children": [ { "type": "font", "name": "h1_font", "label": "Heading 1", "load_external_fonts": true, "default": { "color": "#000", "font": "Merriweather", "font_set": "GOOGLE", "variant": "700", "size": "48" } { "type": "group", "name": "navigation", "label": "Navigation", "expanded": false, "children": [ { "name" : "bg_color", "label" : "Background color", "sortable" : false, "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } } ] } } ] }

Standardmäßiges Erweitern von Feldgruppen

Für Feldgruppen kann festgelegt werden, dass sie standardmäßig erweitert werden, indem die boolesche Eigenschaft expanded in den fields.json-Gruppeneigenschaften auf true gesetzt wird, wie im Beispielcode oben gezeigt. Feldgruppen werden standardmäßig nicht erweitert. Wenn Sie verschachtelte Feldgruppen verwenden, kann die übergeordnete Gruppe diese Eigenschaft also nicht nutzen.

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>/* Printing a Font field's color value, when the font field is within a field group. `typography` is the field group, `h1_font` is the field */ h1{ color: {{ theme.typography.h1_font.color }}; }

Stilfelder

Stilfelder sind ein spezieller Feldgruppentyp in der fields.json-Datei eines Moduls oder Designs, der Content-Autoren die Kontrolle über das Styling 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.

In der CMS Boilerplate finden Sie ein Beispiel für ein Stilfeld in der fields.json-Datei eines Moduls.

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 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 Designs finden Sie in der CMS Boilerplate. 

Bitte beachten Sie: 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 ein komplizierteres Styling 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, ein einheitliches Styling 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

Wiederholfelder sind normale Felder, aber Content-Autoren können Instanzen des Feldes hinzufügen, entfernen und neu anordnen. Mit dem obigen Beispiel für ein Rezeptmodul könnte jede Zutat ein sich wiederholendes Textfeld sein. 

Wiederholfeld

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.

Bitte beachten: 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

Wiederholgruppen sind Feldgruppen, bei denen die Wiederholungsoption aktiviert ist. Mithilfe von Wiederholgruppen können Content-Autoren Gruppen von Feldern hinzufügen, entfernen und neu anordnen. Nehmen wir das Beispiel des Rezeptmoduls: Sie möchten Ihre Zutatenliste mit einer Einkaufslistenfunktion verknüpfen.

Wiederholgruppe von Feldern

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

Um die Bearbeitung zu vereinfachen und zu verhindern, dass Content-Editoren Werte angeben, die Sie nicht programmatisch berücksichtigt haben, können Sie Mindest- und Höchstwerte für die Anzahl der Elemente festlegen, die Content-Autoren einem Wiederholfeld oder einer Wiederholgruppe hinzufügen können. 

Für Wiederholgruppen können Sie auch festlegen, welches Feld bei der Anzeige der Wiederholung als Label für dieses Element dient.

Maximale Anzahl der Vorkommen
"occurrence" : { "min" : 1, "max" : 4, "sorting_label_field" : "ingredients.ingredient", }
Wiederholoptionen
ParameterTypeDescription Default
max
Ganzzahl

Maximale Anzahl der Vorkommen dieser Gruppe. Verhindert, dass der Content-Autor mehr als diese Anzahl von Elementen auf der Benutzeroberfläche hinzufügt.

 null
min
Ganzzahl

Mindestanzahl der Vorkommen dieser Feldgruppe. Verhindert, dass Benutzer weniger als diese Anzahl von Elementen auf der Benutzeroberfläche haben.

 null
sorting_label_field
Zeichenfolge

Dies 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 Eigenschaft inherited_value 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 Standardwerte 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" } }

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 – so haben beispielsweise Farbfelder 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 the effects of 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. Sie können beispielsweise ein Formularmodul festlegen, um einen Rich-Text-Bereich anzuzeigen, wenn die Danksagung ausgewählt wird, eine Seitenauswahl aber für den Fall, dass eine Weiterleitung ausgewählt wird.

Sie können die Sichtbarkeit anhand des Werts eines controlling_field_path oder anhand einer bestimmten Eigenschaft innerhalb dieses Felds mithilfe des property-Parameters festlegen.

Sie können die Sichtbarkeit 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" }
Use this table to describe parameters / fields
ParameterTypeDescription
controlling_field_path
String

Der Punktpfad des Feldes, der die Anzeigebedingung steuert.

  • Wenn das Feld nicht innerhalb einer Feldgruppe verschachtelt ist, verwenden Sie den Namen des Felds (d. h. field_name).
  • Für Felder, die in Gruppen verschachtelt sind, sollte der Pfad durch einen Punkt getrennt seiner Gruppierungsstruktur entsprechen. Zum Beispiel:
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regex
String

Der reguläre Ausdruck im Kontrollfeld, 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.

operator
String

Der 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
property
String

Legt die Sichtbarkeit anhand einer bestimmten Eigenschaft des Zielfelds fest. Beispielsweise können Sie die Sichtbarkeit aktivieren, wenn die src-Eigenschaft eines Bildfelds 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.

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" }] }
Use this table to describe parameters / fields
ParameterTypeDescription
visibility_rules
String

Standardmäßig ist dieser Wert auf SIMPLE festgelegt. Um advanced_visibility zu verwenden, legen Sie es auf ADVANCED fest.

boolean_operator
String

Der boolesche Operator für die bedingten Kriterien. Kann sein AND oder OR sein.

criteria
Array

Ein Array von Sichtbarkeitsobjekten, das die bedingten Kriterien definiert, die erfüllt sein müssen, damit das Feld angezeigt wird.

controlling_field_path
String

Der Punktpfad des Feldes, der die Anzeigebedingung steuert.

  • Wenn das Feld nicht innerhalb einer Feldgruppe verschachtelt ist, verwenden Sie den Namen des Felds (d. h. field_name).
  • Für Felder, die in Gruppen verschachtelt sind, sollte der Pfad durch einen Punkt getrennt seiner Gruppierungsstruktur entsprechen. Zum Beispiel:
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regex
String

Der Wert im Kontrollfeld, der erfüllt werden muss, um das Feld anzuzeigen. Wenn der MATCHES_REGEX-Operator verwendet wird, muss der reguläre Ausdruck mit der gesamte 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.

operator
String

Der 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 Zahlungsfelds erfordert.

Das icon-Feld selbst verwendet advanced_visibility, um nur dann angezeigt zu werden, wenn ein Zahlungslink impayment-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, um das Feld zu deaktivieren, 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" }, ] } } } ]
Use this table to describe parameters / fields
ParameterTypeDescription
message
Zeichenfolge

Die Meldung, die im Content-Editor angezeigt werden soll, wenn das Feld deaktiviert ist.

rules
Objekt

Die Bedingungen für die Freigabe des Feldes für die Bearbeitung.

criteria
Array

Ein 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_operator
Zeichenfolge

Der boolesche Operator für die bedingten Kriterien. Kann sein AND oder OR sein. Wenn nicht angegeben, wird standardmäßig AND verwendet.

controlling_field_path
Zeichenfolge

Der Punktpfad des Feldes, der die Anzeigebedingung steuert.

  • Wenn das Feld nicht innerhalb einer Feldgruppe verschachtelt ist, verwenden Sie den Namen des Felds (d. h. field_name).
  • Für Felder, die in Gruppen verschachtelt sind, sollte der Pfad durch einen Punkt getrennt seiner Gruppierungsstruktur entsprechen. Zum Beispiel:
    • field_group_name.field_name
    • parent_group.child_group.field_name
controlling_value_regex
Zeichenfolge

Der Wert im Kontrollfeld, der erfüllt werden muss, um das Feld anzuzeigen. Wenn der MATCHES_REGEX-Operator verwendet wird, muss der reguläre Ausdruck mit der gesamte 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.

operator
Zeichenfolge

Der 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>
ParameterDescription
theme-directory-path

Der 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 das Styling ü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).

War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.