> 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 auf Experience-Sites-Seiten in Workflow-Spalten organisiert sind. Verwenden Sie sie, damit Portalbenutzer Workflows visualisieren und verwalten können – etwa Supportfallstatus, Projektphasen oder Genehmigungsstufen. Benutzer ziehen Karten zwischen 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 ohne Code im Experience Builder. Ideal für Kundensupport-Portale, die den Fortschritt von Fällen anzeigen, Partnerportale, die Deal-Phasen verwalten, Bereiche für die Projektzusammenarbeit oder überall dort, wo Portalbenutzer eine visuelle Workflow-Verwaltung benötigen.
*** ## Erste Schritte Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Kanban-Komponente zu erlernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen. {% @arcade/embed url="" flowId="SKeLCf1CoTnJZHTYhLOF" %} *** ## Mit Salesforce-Daten verbinden 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 mit der Auswahl des spezifischen Salesforce-Objekts (z. B. Konten, Opportunities, benutzerdefinierte Objekte usw.), das die Daten enthält, die Ihr Kanban-Board anzeigen soll. * **Optionale Filterung:** Wenn Sie nur einen Teil der Daten aus dem ausgewählten Objekt anzeigen möchten, verwenden Sie die Filterfunktion, um bestimmte Bedingungen festzulegen. Sie könnten beispielsweise filtern, um nur „Offene“ Opportunities oder Konten 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 aufnehmen 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 Kanban-Suche durchsuchbar sein sollen. ### **Wichtige Punkte** * Die Wahl der richtigen Datenquelle stellt sicher, dass Ihr Kanban die für Ihre Benutzer relevantesten Informationen anzeigt. * Filterung und Gruppierung straffen das Board und erleichtern die Visualisierung und Verwaltung bestimmter Arbeitselemente. *** ## Konfiguration der Datenzuordnungen Der Abschnitt „Datenzuordnungen“ stellt eine präzise Verbindung zwischen Ihren Salesforce-Daten und den visuellen Elementen Ihres Kanban-Boards her. Deshalb ist das so wichtig: * **Genaue Anzeige:** Datenzuordnungen stellen sicher, dass Informationen aus Salesforce-Feldern korrekt auf Kanban-Karten und innerhalb der Spalten des Boards angezeigt werden. Beispielsweise könnten Sie 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 Feld „Status“ den Kanban-Spalten zuordnen, können Benutzer Karten per Drag-and-drop verschieben, 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 wesentlichen Felder, die Sie auf dem Kanban-Board einbeziehen möchten *** ## Elementaktionen & Interaktionen In diesem Abschnitt können Sie anpassen, wie Benutzer mit Ihren Kanban-Karten interagieren, damit 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** * Bestimmen Sie Aktionen, 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 Popup-Benachrichtigung auf dem Bildschirm an und liefert nach dem Klicken auf eine Kartenmarkierung schnell Feedback oder Informationen.
NavigierenLeitet den Benutzer zu einer anderen Seite in Ihrer Site oder URL weiter und führt ihn zu detaillierteren Informationen über den angeklickten Ort.
Alarm-Modal öffnenÖffnet ein modales Fenster mit einer Alarmmeldung und präsentiert wichtige Informationen oder Warnungen zum ausgewählten Ort.
Bestätigungsdialog öffnenLöst ein Bestätigungsdialogfeld aus, das für Aktionen verwendet wird, die zusätzliche Benutzerbestätigung erfordern, wie etwa die Teilnahme an einer Veranstaltung.
Flow-Dialog öffnenÖffnet einen Dialog, der einen Salesforce Flow ausführt, und startet Workflows oder Prozesse im Zusammenhang mit dem angeklickten Ort.
*** ## Darstellung und Stil ### **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 Inhalte behandelt werden, wenn sie die Abmessungen des Boards überschreiten (Optionen können „visible“, „hidden“ oder „scroll“ sein). ### **Rahmen** * **Größe:** Dicke des Rahmens um das gesamte Kanban-Board. * **Stil:** Erscheinungsbild des Rahmens (z. B. durchgezogen, gestrichelt). * **Farbe:** Farbe des Rahmens. * **Radius:** Wie stark die Ecken des Boards abgerundet sind. ### **Header** * **Hintergrundfarbe:** Legt die Hintergrundfarbe des Kopfbereichs des Kanbans fest. * **Innenabstand (oben, unten, links):** Steuert den Innenabstand innerhalb des Kopfbereichs. * **Unterer Außenabstand:** Erzeugt Platz zwischen dem Kopfbereich und den darunterliegenden Spalten. ### **Kopfbereichsrahmen** * **Rahmenfarbe, -größe, -stil, -radius:** Passen Sie das Erscheinungsbild eines Rahmens innerhalb des Kopfbereichs an (wahrscheinlich, um ihn visuell abzugrenzen). * **Unterer Rahmen (ist verbunden):** Diese Attribute steuern wahrscheinlich, ob der untere Rahmen visuell mit den Spaltenköpfen verschmilzt. ### **Kopftitel/Untertitel** * **Farbe, Schriftgröße, Schriftstärke, Schriftstil:** Steuern Sie das Erscheinungsbild des Kopftitels und jeglichen Untertiteltexts. ### **Kopf-Avatar** * **Hintergrund-/Vordergrundfarbe:** Legen Sie die Farben des Avatar-Elements fest. * **Vordergrundfarben-Utility:** Ermöglicht Ihnen wahrscheinlich die Verwendung vordefinierter Farbhilfsklassen. * **Rahmenradius:** Steuert, wie stark das Avatar-Element abgerundet ist. ### **Spaltenkopf** * **Pfadhintergrundfarbe:** Farbe des Hintergrundbereichs, in dem der Fortschrittspfad der Spalte angezeigt wird. * **Zusammenfassungstext/-schriftattribute:** Steuern Sie das Erscheinungsbild eines Zusammenfassungstextes im Spaltenkopf. ### **Spaltengröße** * **Mindest-/Maximalbreite:** Legen Sie die minimal und maximal zulässige Breite für Spalten fest, was sich darauf auswirkt, wie sie skaliert werden. ### **Karte** * **Hintergrundfarben:** Farben für Normal-, Hover- und Fokuszustände. * **Rahmenfarben:** Farben für Normal- und Fokuszustände. * **Titel-/Beschreibungs-/Info-Text- und Schriftattribute:** Steuern Sie das Erscheinungsbild verschiedener Textelemente innerhalb einer Karte. * **Zeilenbegrenzung:** Begrenzt die Anzahl der für Titel/Beschreibungen angezeigten Zeilen, um ein Überlaufen zu verhindern. ### **Wichtige Hinweise** * **Spezifität:** Die genauen Stilattribute können je nach Implementierung von Avonni leicht variieren. * **Visuelle Hierarchie:** Verwenden Sie diese Attribute strategisch, um eine klare visuelle Hierarchie zu schaffen und den Blick des Benutzers zu lenken *** ## Anwendungsbeispiele ### Beispiel 1: Partner-Opportunity-Kanban {% @arcade/embed url="" flowId="JQJEWO5OUQQf4fSb0GfD" %} Geben Sie Ihren Partnern direkt in Ihrem Experience-Cloud-Portal eine klare, interaktive Ansicht ihrer Vertriebspipeline. Mit einem Kanban-Board per Drag-and-drop können Partnerbenutzer ihre Opportunities visualisieren, verwalten und vorantreiben, ohne das Portal jemals zu verlassen. *** #### **Was Sie erreichen werden** * **Gestärkte Sichtbarkeit für Partner:** Geben Sie Partnerbenutzern eine visuelle Echtzeit-Übersicht über ihre nach Phase organisierte Opportunity-Pipeline * **Intuitives Pipeline-Management:** Aktivieren Sie Drag-and-drop-Funktionalität, damit Partner Opportunity-Phasen mühelos aktualisieren können * **Deal-Einblicke auf einen Blick:** Stellen Sie wichtige Details wie Kontoname, Deal-Betrag und Abschlussdatum direkt auf jeder Karte dar *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Kanban-Komponente hinzufügen** * Ziehen Sie die AX-Kanban-Komponente auf die Leinwand des Experience Cloud Builders {% endstep %} {% step %} #### **Datenquelle konfigurieren** * Setzen Sie den Objekt-API-Namen auf `Opportunity` {% endstep %} {% step %} #### **Datenzuordnungen einrichten** * Setzen Sie das Schlüsselfeld auf `Id` * Setzen Sie den Gruppierungsfeldnamen auf `StageName` * Setzen Sie den Datensatztyp auf `Master` * Setzen Sie den Feldnamen für die Zusammenfassung auf `Amount` {% endstep %} {% step %} #### **Karten anpassen** * Setzen Sie den Titel auf `Name` * Setzen Sie die Beschreibung auf `Account.Name` * Setzen Sie das Startdatum auf `CreatedDate` * Setzen Sie das Fälligkeitsdatum auf `CloseDate` * Hinzufügen `Amount` als angezeigtes Feld {% endstep %} {% step %} #### **Kopfbereich anpassen** * Setzen Sie den Kopfbereichstitel auf `Opportunity-Kanban` * Setzen Sie das Kopfbereichssymbol auf `standard:opportunity` {% endstep %} {% step %} #### **Board in der Vorschau anzeigen** * Überprüfen Sie das Layout im Experience Cloud Builder, um zu bestätigen, 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 mit einem speziellen Kanban-Board in Ihrem Support-Portal Einblick in ihren Support-Verlauf. Indem Fälle nach Status organisiert angezeigt werden, können Kunden den Fortschritt auf einen Blick verfolgen, müssen seltener nach Updates nachfragen und erhalten ein reibungsloseres, transparenteres Support-Erlebnis. *** #### **Was Sie erreichen werden** * **Transparenz für Kunden:** Lassen Sie Kunden den Status jedes eingereichten Falls in einer klaren, übersichtlichen Boardansicht überwachen * **Weniger eingehende Statusanrufe:** Zeigen Sie den Fortschritt proaktiv an, damit Kunden weniger Zeit mit dem Nachverfolgen von Updates verbringen * **Verbesserte Support-Zufriedenheit:** Liefern Sie ein ausgefeiltes, intuitives Erlebnis, das Vertrauen in Ihr Support-Team schafft *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Kanban-Komponente hinzufügen** * Ziehen Sie die AX-Kanban-Komponente auf die Leinwand des Experience Cloud Builders {% endstep %} {% step %} #### **Datenquelle konfigurieren** * Setzen Sie den Objekt-API-Namen auf `Fall` {% endstep %} {% step %} #### **Datenzuordnungen einrichten** * Setzen Sie das Schlüsselfeld auf `Id` * Setzen Sie den Gruppierungsfeldnamen auf `Status` {% endstep %} {% step %} #### **Karten anpassen** * Setzen Sie den Titel auf `Nummer` * Setzen Sie die Beschreibung auf `Contact.Name` * Setzen Sie das Startdatum auf `CreatedDate` {% endstep %} {% step %} #### **Kopfbereich anpassen** * Setzen Sie die Variante auf `Pfad` * Setzen Sie den Kopfbereichstitel auf `Fälle-Kanban` * Setzen Sie das Kopfbereichssymbol auf `standard:case` {% endstep %} {% step %} #### **Board in der Vorschau anzeigen** * Überprüfen Sie das Layout im Experience Cloud Builder, um zu bestätigen, 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.