# AX - Kanban

## Übersicht

**AX - Kanban** ist eine Experience-Cloud-Komponente, die Salesforce-Datensätze als ziehbare Karten darstellt, die auf Experience-Sites-Seiten in Workflow-Spalten organisiert sind.

Verwenden Sie sie, damit Portalnutzer Workflows visualisieren und verwalten können – etwa Support-Fallstatus, Projektphasen oder Genehmigungsstufen. Nutzer 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.

Perfekt für Kundenservice-Portale, die den Fallfortschritt anzeigen, Partnerportale, die Deal-Phasen verwalten, Bereiche für Projektzusammenarbeit oder überall dort, wo Portalnutzer eine visuelle Workflow-Verwaltung benötigen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FUTzhoKQdk4TpwMrX10vt%2F2024-04-22_20-46-23.png?alt=media&#x26;token=21e0f18e-eb2b-426b-b646-901755482f9c" alt=""><figcaption></figcaption></figure>

***

## Erste Schritte

Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Kanban-Komponente kennenzulernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen.

{% @arcade/embed flowId="SKeLCf1CoTnJZHTYhLOF" url="<https://app.arcade.software/share/SKeLCf1CoTnJZHTYhLOF>" %}

***

## Mit Salesforce-Daten verbinden

Dieser wesentliche Schritt bei der Konfiguration Ihrer Avonni-Kanban-Komponente stellt die Verbindung zwischen Ihrem Kanban-Board und den relevanten Daten in Ihrer Salesforce-Umgebung her.&#x20;

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FYBXNVnP2WbYWrsJCqbpK%2F2024-04-22_20-35-17.png?alt=media&#x26;token=ed325976-c447-48c4-b2b6-73cabf0e4199" alt=""><figcaption></figcaption></figure>

So funktioniert es:

* **Objektauswahl:** Beginnen Sie damit, das spezifische Salesforce-Objekt (z. B. Konten, Opportunities, benutzerdefinierte Objekte usw.) auszuwählen, das die Daten enthält, die Ihr Kanban-Board anzeigen soll.
* **Optionale Filterung:** Wenn Sie nur eine Teilmenge der Daten aus dem ausgewählten Objekt anzeigen möchten, verwenden Sie die Filterfunktion, um bestimmte Bedingungen festzulegen. Zum Beispiel könnten Sie 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 kann die Gruppierung von Opportunities nach "Phase" Spalten für "Prospektion", "Verhandlung" usw. erstellen.
* **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 Suchleiste des Kanban durchsuchbar sein sollen.

### **Wichtige Punkte**

* Die Wahl der richtigen Datenquelle stellt sicher, dass Ihr Kanban die für Ihre Nutzer relevantesten Informationen anzeigt.
* Filterung und Gruppierung vereinfachen das Board und machen es leichter, bestimmte Arbeitselemente zu visualisieren und zu verwalten.

***

## Konfiguration der Datenzuordnungen <a href="#data-mappings-configuration" id="data-mappings-configuration"></a>

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, die aus Salesforce-Feldern abgerufen werden, korrekt auf Kanban-Karten und in den 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 Nutzer mit dem Kanban-Board interagieren. Wenn Sie beispielsweise ein Feld "Status" den Kanban-Spalten zuordnen, können Nutzer 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** z. B. Kartentitel, Beschreibung, Spaltenname usw.
3. **Wiederholen Sie diesen Vorgang** für alle wichtigen Felder, die Sie auf dem Kanban-Board einbinden möchten

***

## Elementaktionen und Interaktionen

In diesem Abschnitt können Sie anpassen, wie Nutzer mit Ihren Kanban-Karten interagieren, wodurch das Board dynamischer und reaktionsfähiger wird.

### **Link zu**

* Legen Sie fest, was passiert, wenn ein Nutzer 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 Nutzer 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.

<table><thead><tr><th width="228">Interaktionstyp</th><th>Beschreibung</th></tr></thead><tbody><tr><td><a href="../eigenschaftenbereich/interaktionen/toast-anzeigen"><strong>Toast anzeigen</strong></a></td><td>Zeigt eine kurze Popup-Benachrichtigung auf dem Bildschirm an und liefert nach dem Klicken auf einen Kartenpunkt eine schnelle Rückmeldung oder Information.</td></tr><tr><td><a href="../eigenschaftenbereich/interaktionen/navigieren"><strong>Navigieren</strong></a></td><td>Leitet den Nutzer zu einer anderen Seite in Ihrer Website oder URL weiter und führt ihn zu detaillierteren Informationen über den angeklickten Ort.</td></tr><tr><td><a href="../eigenschaftenbereich/interaktionen/warnungsdialog-offnen"><strong>Warnmodaldialog öffnen</strong></a></td><td>Öffnet ein modales Fenster mit einer Warnmeldung und präsentiert wichtige Informationen oder Warnhinweise zum ausgewählten Ort.</td></tr><tr><td><a href="../eigenschaftenbereich/interaktionen/bestatigung-offnen"><strong>Bestätigungsdialog öffnen</strong></a></td><td>Löst ein Bestätigungsdialogfeld aus, das für Aktionen verwendet wird, die eine zusätzliche Benutzerbestätigung erfordern, z. B. die Teilnahme an einer Veranstaltung.</td></tr><tr><td><a href="../eigenschaftenbereich/interaktionen/flow-dialog-offnen"><strong>Flow-Dialog öffnen</strong></a></td><td>Öffnet einen Dialog, der einen Salesforce Flow ausführt und Workflows oder Prozesse für den angeklickten Ort startet.</td></tr></tbody></table>

***

## Darstellung gestalten

### **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 "sichtbar", "ausgeblendet" oder "scrollen" umfassen).

### **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 abgerundet die Ecken des Boards sind.

### **Kopfbereich**

* **Hintergrundfarbe:** Legt die Hintergrundfarbe des Kopfbereichs des Kanban fest.
* **Innenabstand (oben, unten, links):** Steuert den Innenabstand im Kopfbereich.
* **Unterer Außenabstand:** Erzeugt Platz zwischen dem Kopfbereich und den darunterliegenden Spalten.

### **Rahmen des Kopfbereichs**

* **Rahmenfarbe, Größe, Stil, Radius:** Passen Sie das Erscheinungsbild eines Rahmens innerhalb des Kopfbereichs an (wahrscheinlich, um ihn visuell abzutrennen).
* **Unterer Rahmen (verbunden):** Diese Attribute steuern wahrscheinlich, ob der untere Rahmen optisch mit den Spaltenüberschriften verschmilzt.

### **Titel/Beschriftung des Kopfbereichs**

* **Farbe, Schriftgröße, Schriftstärke, Schriftstil:** Steuern Sie das Erscheinungsbild des Titels und des Beschriftungstexts des Kopfbereichs.

### **Avatar im Kopfbereich**

* **Hintergrund-/Vordergrundfarbe:** Legen Sie die Farben des Avatar-Elements fest.
* **Vordergrundfarben-Hilfsprogramm:** Ermöglicht vermutlich die Verwendung vordefinierter Farb-Hilfsklassen.
* **Rahmenradius:** Steuert, wie abgerundet das Avatar-Element ist.

### **Spaltenkopf**

* **Pfad-Hintergrundfarbe:** Farbe des Hintergrundbereichs, in dem der Fortschrittspfad der Spalte angezeigt wird.
* **Zusammenfassungstext/Schriftattribute:** Steuern Sie das Erscheinungsbild von Zusammenfassungstext im Spaltenkopf.

### **Spaltengröße**

* **Min./Max. Breite:** Legen Sie die minimale und maximale Breite für Spalten fest, was beeinflusst, wie sie in der Größe angepasst werden.

### **Karte**

* **Hintergrundfarben:** Farben für den normalen Zustand, den Hover-Zustand und den Fokuszustand.
* **Rahmenfarben:** Farben für den normalen Zustand und den Fokuszustand.
* **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 Überlauf 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 Nutzers zu lenken

***

## Anwendungsbeispiele

### Beispiel 1: Partner-Opportunity-Kanban

{% @arcade/embed flowId="JQJEWO5OUQQf4fSb0GfD" url="<https://app.arcade.software/share/JQJEWO5OUQQf4fSb0GfD>" %}

Geben Sie Ihren Partnern eine klare, interaktive Ansicht ihrer Vertriebspipeline direkt in Ihrem Experience-Cloud-Portal. Mit einem Kanban-Board per Drag-and-Drop können Partnermitglieder ihre Opportunities visualisieren, verwalten und voranbringen, ohne das Portal jemals zu verlassen.

***

#### **Was Sie erreichen werden**

* **Gestärkte Partner-Transparenz:** Geben Sie Partnermitgliedern einen Echtzeit-Überblick über ihre nach Phase organisierte Opportunity-Pipeline
* **Intuitive Pipeline-Verwaltung:** Ermöglichen Sie Drag-and-Drop-Funktionalität, 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 %}

#### **Kanban-Komponente hinzufügen**

* Ziehen Sie die AX-Kanban-Komponente auf Ihre Experience-Cloud-Builder-Arbeitsfläche
  {% endstep %}

{% step %}

#### **Datenquelle konfigurieren**

* Legen Sie den Objekt-API-Namen fest auf `Opportunity`
  {% endstep %}

{% step %}

#### **Datenzuordnungen einrichten**

* Legen Sie das Schlüsselfeld fest auf `Id`
* Legen Sie den Namen des Gruppierungsfelds fest auf `StageName`
* Legen Sie den Datensatztyp fest auf `Master`
* Legen Sie den Namen des Zusammenfassungsfelds fest auf `Amount`
  {% endstep %}

{% step %}

#### **Karten anpassen**

* Legen Sie den Titel fest auf `Name`
* Legen Sie die Beschreibung fest auf `Account.Name`
* Legen Sie das Startdatum fest auf `CreatedDate`
* Legen Sie das Fälligkeitsdatum fest auf `CloseDate`
* Hinzufügen `Amount` als angezeigtes Feld
  {% endstep %}

{% step %}

#### **Kopfbereich anpassen**

* Legen Sie den Titel des Kopfbereichs fest auf `Opportunity Kanban`
* Legen Sie das Symbol des Kopfbereichs fest 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="ax-registerkarten" %}
[ax-registerkarten](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-registerkarten)
{% endcontent-ref %}

### Beispiel 2: Fallstatus-Kanban

{% @arcade/embed flowId="XXPy9vrTjP5P3hbCqwTg" url="<https://app.arcade.software/share/XXPy9vrTjP5P3hbCqwTg>" %}

Geben Sie Ihren Kunden mit einem dedizierten 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, wodurch die Notwendigkeit für Nachfragen zum aktuellen Stand reduziert wird und ein reibungsloseres, transparenteres Support-Erlebnis entsteht.

***

#### **Was Sie erreichen werden**

* **Transparenz für Kunden:** Lassen Sie Kunden den Status jedes eingereichten Falls in einer klaren, übersichtlichen Board-Ansicht überwachen
* **Weniger eingehende Statusanrufe:** Zeigen Sie den Fortschritt proaktiv an, damit Kunden weniger Zeit damit verbringen, Updates hinterherzulaufen
* **Verbesserte Kundenzufriedenheit im Support:** Liefern Sie ein professionelles, intuitives Erlebnis, das Vertrauen und Zuversicht in Ihr Support-Team aufbaut

***

#### **So richten Sie es ein**

{% stepper %}
{% step %}

#### **Kanban-Komponente hinzufügen**

* Ziehen Sie die AX-Kanban-Komponente auf Ihre Experience-Cloud-Builder-Arbeitsfläche
  {% endstep %}

{% step %}

#### **Datenquelle konfigurieren**

* Legen Sie den Objekt-API-Namen fest auf `Fall`
  {% endstep %}

{% step %}

#### **Datenzuordnungen einrichten**

* Legen Sie das Schlüsselfeld fest auf `Id`
* Legen Sie den Namen des Gruppierungsfelds fest auf `Status`
  {% endstep %}

{% step %}

#### **Karten anpassen**

* Legen Sie den Titel fest auf `Nummer`
* Legen Sie die Beschreibung fest auf `Contact.Name`
* Legen Sie das Startdatum fest auf `CreatedDate`
  {% endstep %}

{% step %}

#### **Kopfbereich anpassen**

* Legen Sie die Variante fest auf `Pfad`
* Legen Sie den Titel des Kopfbereichs fest auf `Fälle-Kanban`
* Legen Sie das Symbol des Kopfbereichs fest 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 %}