> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-kanban.md). # AX - Kanban ## Übersicht **AX - Kanban** ist eine Experience-Cloud-Komponente, die Salesforce-Datensätze als ziehbare Karten anzeigt, die in Workflow-Spalten auf Experience-Sites-Seiten organisiert sind. Verwenden Sie sie, damit Portalbenutzer Workflows visualisieren und verwalten können – etwa Support-Fallstatus, Projektphasen oder Genehmigungsstufen. Benutzer ziehen Karten zwischen den Spalten, um Datensatzwerte zu aktualisieren, während Sie steuern, welche Felder auf den Karten angezeigt werden und welche Auswahllistenwerte die Spalten definieren. Konfigurieren Sie alles im Experience Builder ohne Code. Perfekt für Kundensupport-Portale, die den Fallfortschritt anzeigen, Partnerportale zur Verwaltung von Deal-Phasen, Bereiche für die Projektzusammenarbeit oder überall dort, wo Portalbenutzer visuelles Workflow-Management benötigen.
{% hint style="info" %} **In einem realen Projekt ansehen** [Listings-Board](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines/listings-board): Ein Listings-Board nach Phase, eine Swimlane pro Agent, Summen pro Spalte. {% endhint %} ## Erste Schritte Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Kanban-Komponente kennenzulernen und mit Ihren Anwendungsfällen zu beginnen. {% @arcade/embed url="" flowId="SKeLCf1CoTnJZHTYhLOF" %} ## Konfiguration ### Datenquelle Dieser wichtige Schritt bei der Konfiguration Ihrer Avonni-Kanban-Komponente stellt die Verbindung zwischen Ihrem Kanban-Board und den relevanten Daten in Ihrer Salesforce-Umgebung her.
So funktioniert es: * **Objektauswahl:** Beginnen Sie damit, das spezifische Salesforce-Objekt (z. B. Accounts, Opportunities, benutzerdefinierte Objekte usw.) auszuwählen, das die Daten enthält, die Ihr Kanban-Board anzeigen soll. * **Optionales Filtern:** Wenn Sie nur eine Teilmenge der Daten des ausgewählten Objekts anzeigen möchten, verwenden Sie die Filterfunktion, um bestimmte Bedingungen festzulegen. Sie könnten beispielsweise filtern, um nur "Offene" Opportunities oder Accounts in einer bestimmten Region anzuzeigen. * **Gruppierung (optional):** Gruppieren Sie Ihre Daten, um Ihr Kanban-Board effektiv zu organisieren. Beispielsweise können durch die Gruppierung von Opportunities nach "Phase" Spalten für "Prospecting", "Verhandlung" usw. erstellt werden. * **Sortierung:** Wählen Sie ein Feld und eine Richtung für "Sortieren nach" (aufsteigend oder absteigend), um die Reihenfolge festzulegen, in der die Kanban-Karten angezeigt werden sollen. * **Zusätzliche Felder:** Wenn Sie Felder in Ihr Kanban einbeziehen müssen, die nicht direkt für die Anzeige oder Interaktionen verwendet werden, fügen Sie sie im Abschnitt "Zusätzliche Felder" hinzu. Dies ist besonders nützlich für Felder, die in der Suchleiste des Kanban durchsuchbar sein sollen. #### **Wichtige Punkte** * Die Wahl der richtigen Datenquelle stellt sicher, dass Ihr Kanban die für Ihre Benutzer relevantesten Informationen anzeigt. * Filtern und Gruppieren verschlanken das Board und erleichtern so die Visualisierung und Verwaltung bestimmter Arbeitselemente. ### Datenzuordnung Der Abschnitt "Datenzuordnungen" stellt eine präzise Verbindung zwischen Ihren Salesforce-Daten und den visuellen Elementen Ihres Kanban-Boards her. Darum ist das so wichtig: * **Korrekte Anzeige:** Datenzuordnungen stellen sicher, dass Informationen aus Salesforce-Feldern korrekt auf Kanban-Karten und in den Spalten des Boards angezeigt werden. Sie könnten beispielsweise das Salesforce-Feld "Opportunity-Name" dem Titel jeder Kanban-Karte zuordnen. * **Funktionalität:** Zuordnungen steuern auch, wie Benutzer mit dem Kanban-Board interagieren. Wenn Sie beispielsweise ein "Status"-Feld den Kanban-Spalten zuordnen, können Benutzer Karten per Drag-and-drop ziehen, um den Status direkt im Board zu aktualisieren. #### **So funktioniert es** 1. **Wählen Sie ein Salesforce-Feld** aus Ihrer konfigurierten Datenquelle aus. 2. **Ordnen Sie es einem Kanban-Attribut zu** wie Kartentitel, Beschreibung, Spaltenname usw. 3. **Wiederholen Sie diesen Vorgang** für alle wichtigen Felder, die Sie auf dem Kanban-Board einbeziehen möchten ### Board- und Karteneinstellungen **Spaltenkopf ausblenden** blendet die Spaltenüberschriften aus, **Bei Klick hervorheben** hebt die angeklickte Karte hervor, und **Schreibgeschützt** deaktiviert Drag-and-drop und Inline-Bearbeitungen. Die Kopfzeile unterstützt ein **Name des Kopfzeilen-Symbols** und **Symbolgröße**, eine Beschriftung und **Kopfzeile ist verbunden** damit sie bündig mit dem darunterliegenden Board abschließt. **Gruppieren-nach-Attribute** steuern, wie Datensätze in Spalten gruppiert werden — eingeklappter Zustand, Ausblenden der undefinierten Gruppe, Anzeigen leerer Untergruppen und die Bezeichnung der undefinierten Gruppe. **Richtung der Spaltenreihenfolge** legt die Spaltenreihenfolge fest (`Standard`, `aufsteigend`, `absteigend`, oder `benutzerdefiniert`), und **Zusammenfassungsattribute** konfigurieren eine Zusammenfassung pro Spalte (z. B. die Summe eines Feldes). **Avatar-Attribute**, **Bild-Attribute**, und **Felderlayout-Attribute** gestalten den Avatar, das Bild und das Layout der Felder jeder Karte. ## Interaktionen In diesem Abschnitt können Sie anpassen, wie Benutzer mit Ihren Kanban-Karten interagieren, wodurch das Board dynamischer und reaktionsschneller wird. ### **Verknüpfen mit** * Legen Sie fest, was passiert, wenn ein Benutzer auf einen bestimmten Link innerhalb einer Kanban-Karte klickt. * **Häufige Verwendungen:** Zu einer Datensatz-Detailseite navigieren, eine externe Website öffnen oder einen Salesforce Flow auslösen. ### **Beim Klicken** * Legen Sie Aktionen fest, die ausgeführt werden, wenn ein Benutzer irgendwo auf eine Kanban-Karte klickt. * **Häufige Verwendungen:** Erweitern Sie die Karte für weitere Details, öffnen Sie ein modales Fenster oder starten Sie einen Prozess.
InteraktionstypBeschreibung
Toast anzeigenZeigt eine kurze Pop-up-Benachrichtigung auf dem Bildschirm an und liefert nach dem Klicken auf einen Kartenmarker schnelles Feedback oder Informationen.
NavigierenLeitet den Benutzer zu einer anderen Seite Ihrer Site oder URL weiter und führt ihn zu detaillierteren Informationen über den angeklickten Ort.
Alert-Modal öffnenÖffnet ein modales Fenster mit einer Warnmeldung und zeigt wichtige Informationen oder Warnungen zum ausgewählten Ort an.
Bestätigung öffnenLöst einen Bestätigungsdialog aus, der für Aktionen verwendet wird, die eine zusätzliche Bestätigung des Benutzers erfordern, wie z. B. die Teilnahme an einer Veranstaltung.
Flow-Dialog öffnenÖffnet einen Dialog, der einen Salesforce Flow ausführt und Workflows oder Prozesse im Zusammenhang mit dem angeklickten Ort startet.
## Formatierung {% tabs %} {% tab title="Größe" %} * **Breite:** Steuert die gesamte horizontale Breite des Kanban-Boards. * **Höhe:** Steuert die gesamte vertikale Höhe des Kanban-Boards. * **Überlauf:** Legt fest, wie mit Inhalt umgegangen wird, wenn er die Abmessungen des Boards überschreitet (Optionen könnten "visible", "hidden" oder "scroll" sein). {% endtab %} {% tab title="Rahmen" %} * **Größe:** Dicke des Rahmens um das gesamte Kanban-Board. * **Stil:** Aussehen des Rahmens (z. B. durchgezogen, gestrichelt). * **Farbe:** Farbe des Rahmens. * **Radius:** Wie abgerundet die Ecken des Boards sind. {% endtab %} {% tab title="Kopfzeile" %} * **Hintergrundfarbe:** Legt die Hintergrundfarbe des Kopfzeilenbereichs des Kanban fest. * **Innenabstand (oben, unten, links):** Steuert den inneren Abstand innerhalb der Kopfzeile. * **Unterer Randabstand:** Schafft Platz zwischen der Kopfzeile und den darunterliegenden Spalten. {% endtab %} {% tab title="Rahmen der Kopfzeile" %} * **Rahmenfarbe, -größe, -stil, -radius:** Passen Sie das Aussehen eines Rahmens innerhalb der Kopfzeile an (wahrscheinlich zur optischen Trennung). * **Unterer Rahmen (ist verbunden):** Diese Attribute steuern wahrscheinlich, ob der untere Rahmen optisch mit den Spaltenüberschriften verschmilzt. {% endtab %} {% tab title="Kopfzeilentitel/Beschriftung" %} * **Farbe, Schriftgröße, Schriftstärke, Schriftstil:** Steuern Sie das Aussehen des Titels der Kopfzeile und jeglichen Beschriftungstext. {% endtab %} {% tab title="Kopfzeilen-Avatar" %} * **Hintergrund-/Vordergrundfarbe:** Legen Sie die Farben des Avatar-Elements fest. * **Hilfsfunktion für Vordergrundfarbe:** Ermöglicht wahrscheinlich die Verwendung vordefinierter Farb-Hilfsklassen. * **Rahmenradius:** Steuert, wie abgerundet das Avatar-Element ist. {% endtab %} {% tab title="Spaltenkopf" %} * **Hintergrundfarbe des Pfads:** Farbe des Hintergrundbereichs, in dem der Spaltenfortschrittspfad angezeigt wird. * **Zusammenfassungstext-/Schriftattribute:** Steuern Sie das Aussehen von Zusammenfassungstexten innerhalb des Spaltenkopfs. {% endtab %} {% tab title="Spaltengröße" %} * **Mindest-/Maximalbreite:** Legt die zulässige Mindest- und Maximalbreite für Spalten fest und beeinflusst so deren Größenänderung. {% endtab %} {% tab title="Karte" %} * **Hintergrundfarben:** Farben für Normal-, Hover- und Fokuszustand. * **Rahmenfarben:** Farben für Normal- und Fokuszustand. * **Titel-/Beschreibungs-/Info-Text- und Schriftattribute:** Steuern Sie das Aussehen verschiedener Textelemente innerhalb einer Karte. * **Zeilenbegrenzung:** Begrenzt die Anzahl der für Titel/Beschreibungen angezeigten Zeilen, um Überlauf zu verhindern. {% endtab %} {% endtabs %} ### **Wichtige Hinweise** * **Spezifität:** Die genauen Formatierungsattribute können je nach Avonni-Implementierung leicht variieren. * **Visuelle Hierarchie:** Verwenden Sie diese Attribute strategisch, um eine klare visuelle Hierarchie zu schaffen und den Blick des Benutzers zu lenken ## Anwendungsfälle ### Beispiel 1: Kanban für Partnerchancen {% @arcade/embed url="" flowId="JQJEWO5OUQQf4fSb0GfD" %} Geben Sie Ihren Partnern einen klaren, interaktiven Überblick über ihre Vertriebspipeline direkt in Ihrem Experience-Cloud-Portal. Mit einem Drag-and-drop-Kanban-Board können Partnerbenutzer ihre Opportunities visualisieren, verwalten und vorantreiben, ohne das Portal jemals zu verlassen. *** #### **Was Sie erreichen werden** * **Mehr Transparenz für Partner:** Geben Sie Partnerbenutzern einen Echtzeit-Überblick in visueller Form über ihre Opportunity-Pipeline, organisiert nach Phase * **Intuitive Pipeline-Verwaltung:** Ermöglichen Sie Drag-and-drop, damit Partner Opportunity-Phasen mühelos aktualisieren können * **Deal-Einblick auf einen Blick:** Zeigen Sie wichtige Details wie Kontoname, Deal-Betrag und Abschlussdatum direkt auf jeder Karte an *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Kanban-Komponente hinzu** * Ziehen Sie die AX-Kanban-Komponente auf die Arbeitsfläche des Experience-Cloud-Builder. {% endstep %} {% step %} #### **Konfigurieren Sie die Datenquelle** * Setzen Sie den Objekt-API-Namen auf `Opportunity` {% endstep %} {% step %} #### **Richten Sie Datenzuordnungen ein** * Setzen Sie das Schlüsselfeld auf `Id` * Setzen Sie den Namen des Gruppierungsfelds auf `StageName` * Setzen Sie den Datensatztyp auf `Master` * Setzen Sie den Namen des Zusammenfassungsfelds auf `Amount` {% endstep %} {% step %} #### **Passen Sie die Karten an** * Setzen Sie den Titel auf `Name` * Setzen Sie die Beschreibung auf `Account.Name` * Setzen Sie das Startdatum fest auf `CreatedDate` * Setzen Sie das Fälligkeitsdatum fest auf `CloseDate` * Hinzufügen `Amount` als angezeigtes Feld {% endstep %} {% step %} #### **Kopfzeile anpassen** * Setzen Sie den Kopfzeilentitel auf `Opportunity-Kanban` * Setzen Sie das Kopfzeilen-Symbol auf `standard:opportunity` {% endstep %} {% step %} #### **Vorschau Ihres Boards anzeigen** * Überprüfen Sie das Layout im Experience Cloud Builder, um sicherzustellen, dass Ihre Konfiguration wie erwartet aussieht und funktioniert {% endstep %} {% endstepper %} *** #### **Links** {% content-ref url="/pages/d8bb38b8843f7b38832d5d028420f4b95b23cfd9" %} [AX - Registerkarten](/experience-cloud/experience-cloud-de/experience-components/ax-tabs.md) {% endcontent-ref %} ### Beispiel 2: Kanban für Fallstatus {% @arcade/embed url="" flowId="XXPy9vrTjP5P3hbCqwTg" %} Geben Sie Ihren Kunden Einblick in ihren Support-Prozess mit einem dedizierten Kanban-Board in Ihrem Support-Portal. Durch die Anzeige von nach Status organisierten Fällen können Kunden den Fortschritt auf einen Blick verfolgen, wodurch weniger Nachfragen zu Status-Updates nötig sind und ein reibungsloseres, transparenteres Support-Erlebnis entsteht. *** #### **Was Sie erreichen werden** * **Transparenz für Kunden:** Ermöglichen Sie Kunden, den Status jedes eingereichten Falls in einer klaren, übersichtlichen Board-Ansicht zu verfolgen * **Weniger eingehende Statusanfragen:** Zeigen Sie den Fortschritt proaktiv an, damit Kunden weniger Zeit damit verbringen, Updates einzuholen * **Verbesserte Zufriedenheit im Support:** Bieten Sie eine ausgefeilte, intuitive Erfahrung, die Vertrauen und Zuversicht in Ihr Support-Team aufbaut *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Kanban-Komponente hinzu** * Ziehen Sie die AX-Kanban-Komponente auf die Arbeitsfläche des Experience-Cloud-Builder. {% endstep %} {% step %} #### **Konfigurieren Sie die Datenquelle** * Setzen Sie den Objekt-API-Namen auf `Fall` {% endstep %} {% step %} #### **Richten Sie Datenzuordnungen ein** * Setzen Sie das Schlüsselfeld auf `Id` * Setzen Sie den Namen des Gruppierungsfelds auf `Status` {% endstep %} {% step %} #### **Passen Sie die Karten an** * Setzen Sie den Titel auf `Nummer` * Setzen Sie die Beschreibung auf `Contact.Name` * Setzen Sie das Startdatum fest auf `CreatedDate` {% endstep %} {% step %} #### **Kopfzeile anpassen** * Setzen Sie die Variante auf `Pfad` * Setzen Sie den Kopfzeilentitel auf `Fälle-Kanban` * Setzen Sie das Kopfzeilen-Symbol auf `standard:case` {% endstep %} {% step %} #### **Vorschau Ihres Boards anzeigen** * Überprüfen Sie das Layout im Experience Cloud Builder, um sicherzustellen, dass Ihre Konfiguration wie erwartet aussieht und funktioniert {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-kanban.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.