# AX - Kanban

## Panoramica

**AX - Kanban** è un componente di Experience Cloud che visualizza i record Salesforce come schede trascinabili organizzate in colonne di workflow nelle pagine di Experience Sites.

Usalo per consentire agli utenti del portale di visualizzare e gestire i workflow, come stati dei casi di supporto, fasi di progetto o fasi di approvazione. Gli utenti trascinano le schede tra le colonne per aggiornare i valori dei record, mentre tu controlli quali campi compaiono sulle schede e quali valori di picklist definiscono le colonne. Configura tutto in Experience Builder senza codice.

Perfetto per i portali di assistenza clienti che mostrano l'avanzamento dei casi, i portali partner che gestiscono le fasi delle trattative, gli spazi di collaborazione sui progetti o qualsiasi altro contesto in cui gli utenti del portale abbiano bisogno di una gestione visiva del workflow.

<figure><img src="https://4258905998-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>

***

## Per iniziare

Usa questo semplice tutorial per imparare le basi del componente Kanban e iniziare a creare i tuoi casi d'uso.

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

***

## Connetti ai dati Salesforce

Questo passaggio essenziale nella configurazione del componente Avonni Kanban stabilisce la connessione tra la tua bacheca Kanban e i dati pertinenti nel tuo ambiente Salesforce.&#x20;

<figure><img src="https://4258905998-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>

Ecco come funziona:

* **Selezione dell'oggetto:** Inizia scegliendo lo specifico oggetto Salesforce (ad es. Account, Opportunità, oggetti personalizzati, ecc.) che contiene i dati che desideri visualizzare nella tua bacheca Kanban.
* **Filtro opzionale:** Se desideri visualizzare solo un sottoinsieme dei dati dell'oggetto selezionato, usa la funzione di filtro per impostare condizioni specifiche. Ad esempio, potresti filtrare per mostrare solo le opportunità "Aperte" o gli account di una certa regione.
* **Raggruppamento (opzionale):** Raggruppa i tuoi dati per organizzare in modo efficace la bacheca Kanban. Ad esempio, raggruppare le opportunità per "Fase" può creare colonne per "Prospecting", "Negoziazione", ecc.
* **Ordinamento:** Seleziona un campo e una direzione "Ordina per" (crescente o decrescente) per determinare l'ordine in cui devono apparire le schede Kanban.
* **Campi aggiuntivi:** Se hai bisogno di includere nel tuo Kanban campi non utilizzati direttamente per la visualizzazione o le interazioni, aggiungili nella sezione "Campi aggiuntivi". Questo è particolarmente utile per i campi che desideri siano ricercabili nella barra di ricerca di Kanban.

### **Punti chiave**

* La scelta della fonte dati giusta garantisce che il tuo Kanban mostri le informazioni più rilevanti per i tuoi utenti.
* Il filtraggio e il raggruppamento semplificano la bacheca, rendendo più facile visualizzare e gestire elementi di lavoro specifici.

***

## Configurazione delle mappature dei dati <a href="#data-mappings-configuration" id="data-mappings-configuration"></a>

La sezione "Mappature dei dati" stabilisce una connessione precisa tra i dati Salesforce e gli elementi visivi della tua bacheca Kanban. Ecco perché è fondamentale:

* **Visualizzazione accurata:** Le mappature dei dati garantiscono che le informazioni prelevate dai campi Salesforce vengano visualizzate correttamente sulle schede Kanban e all'interno delle colonne della bacheca. Ad esempio, potresti mappare il campo Salesforce "Nome opportunità" al titolo di ogni scheda Kanban.
* **Funzionalità:** Le mappature controllano anche il modo in cui gli utenti interagiscono con la bacheca Kanban. Ad esempio, mappare un campo "Stato" alle colonne Kanban consente agli utenti di trascinare e rilasciare le schede per aggiornare lo stato direttamente nella bacheca.

### **Come funziona**

1. **Seleziona un campo Salesforce** dalla tua fonte dati configurata.
2. **Mappalo a un attributo Kanban** come titolo della scheda, descrizione, nome della colonna, ecc.
3. **Ripeti questo processo** per tutti i campi essenziali che desideri includere nella bacheca Kanban

***

## Azioni e interazioni degli elementi

Questa sezione ti consente di personalizzare il modo in cui gli utenti interagiscono con le tue schede Kanban, rendendo la bacheca più dinamica e reattiva.

### **Collega a**

* Definisci cosa accade quando un utente fa clic su un link specifico all'interno di una scheda Kanban.
* **Usi comuni:** Navigare a una pagina di dettaglio del record, aprire un sito web esterno o attivare un Salesforce Flow.

### **Al clic**

* Determina le azioni che si verificano quando un utente fa clic in un punto qualsiasi di una scheda Kanban.
* **Usi comuni:** Espandi la scheda per maggiori dettagli, apri una finestra modale o avvia un processo.

<table><thead><tr><th width="228">Tipo di interazione</th><th>Descrizione</th></tr></thead><tbody><tr><td><a href="../pannello-delle-proprieta/interazioni/mostra-toast"><strong>Mostra toast</strong></a></td><td>Mostra una breve notifica popup sullo schermo, fornendo un rapido feedback o informazioni dopo aver fatto clic su un marcatore della mappa.</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/naviga"><strong>Naviga</strong></a></td><td>Reindirizza l'utente a un'altra pagina del sito o a un URL, guidandolo verso informazioni più dettagliate sulla posizione cliccata.</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/apri-finestra-modale-di-avviso"><strong>Apri finestra modale di avviso</strong></a></td><td>Apre una finestra modale con un messaggio di avviso, presentando informazioni importanti o avvertimenti sulla posizione selezionata.</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/apri-conferma"><strong>Apri conferma</strong></a></td><td>Attiva una finestra di dialogo di conferma, usata per azioni che richiedono un'ulteriore conferma dell'utente, come la partecipazione a un evento.</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/apri-finestra-di-dialogo-del-flusso"><strong>Apri dialogo Flow</strong></a></td><td>Apre una finestra di dialogo che esegue un Salesforce Flow, avviando workflow o processi relativi alla posizione cliccata.</td></tr></tbody></table>

***

## Aspetto grafico

### **Dimensione**

* **Larghezza:** Controlla la larghezza orizzontale complessiva della bacheca Kanban.
* **Altezza:** Controlla l'altezza verticale complessiva della bacheca Kanban.
* **Overflow:** Stabilisce come viene gestito il contenuto se supera le dimensioni della bacheca (le opzioni potrebbero includere 'visibile', 'nascosto' o 'scorrimento').

### **Bordo**

* **Dimensione:** Spessore del bordo attorno all'intera bacheca Kanban.
* **Stile:** Aspetto del bordo (ad es. solido, tratteggiato).
* **Colore:** Colore del bordo.
* **Raggio:** Quanto sono arrotondati gli angoli della bacheca.

### **Intestazione**

* **Colore di sfondo:** Imposta il colore di sfondo della sezione di intestazione di Kanban.
* **Padding (superiore, inferiore, sinistro):** Controlla lo spazio interno all'interno dell'intestazione.
* **Margine inferiore:** Crea spazio tra l'intestazione e le colonne sottostanti.

### **Bordo dell'intestazione**

* **Colore bordo, dimensione, stile, raggio:** Personalizza l'aspetto di un bordo all'interno dell'intestazione (probabilmente per separarla visivamente).
* **Bordo inferiore (è unito):** Questi attributi probabilmente controllano se il bordo inferiore si fonde visivamente con le intestazioni delle colonne.

### **Titolo/didascalia dell'intestazione**

* **Colore, dimensione del font, peso del font, stile del font:** Controlla l'aspetto del titolo dell'intestazione e di qualsiasi testo di didascalia.

### **Avatar dell'intestazione**

* **Colore di sfondo/colore in primo piano:** Imposta i colori dell'elemento avatar.
* **Utilità colore in primo piano:** Probabilmente consente di usare classi di utilità colore predefinite.
* **Raggio del bordo:** Controlla quanto è arrotondato l'elemento avatar.

### **Intestazione della colonna**

* **Colore di sfondo del percorso:** Colore dell'area di sfondo in cui viene visualizzato il percorso di avanzamento della colonna.
* **Attributi del testo/ del font di riepilogo:** Controlla l'aspetto di qualsiasi testo di riepilogo all'interno dell'intestazione della colonna.

### **Dimensionamento delle colonne**

* **Larghezza min/max:** Imposta la larghezza minima e massima consentita per le colonne, influenzando il modo in cui si ridimensionano.

### **Scheda**

* **Colori di sfondo:** Colori per gli stati normale, al passaggio del mouse e focus.
* **Colori del bordo:** Colori per gli stati normale e focus.
* **Attributi del testo e del font di titolo/descrizione/info:** Controlla l'aspetto dei vari elementi testuali all'interno di una scheda.
* **Limite di righe:** Limita il numero di righe visualizzate per titoli/descrizioni per evitare il superamento dei limiti.

### **Note importanti**

* **Specificità:** Gli attributi di stile esatti possono variare leggermente in base all'implementazione di Avonni.
* **Gerarchia visiva:** Usa questi attributi in modo strategico per creare una gerarchia visiva chiara e guidare lo sguardo dell'utente

***

## Esempi di casi d'uso

### Esempio 1: Kanban delle opportunità per i partner

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

Offri ai tuoi partner una vista chiara e interattiva della loro pipeline di vendita, direttamente nel tuo portale Experience Cloud. Con una bacheca Kanban drag-and-drop, gli utenti partner possono visualizzare, gestire e far avanzare le loro opportunità senza mai uscire dal portale.

***

#### **Cosa otterrai**

* **Visibilità potenziata per i partner:** Offri agli utenti partner una panoramica visiva in tempo reale della loro pipeline delle opportunità organizzata per fase
* **Gestione intuitiva della pipeline:** Abilita la funzionalità drag-and-drop in modo che i partner possano aggiornare le fasi delle opportunità senza sforzo
* **Insight sulle trattative a colpo d'occhio:** Mostra direttamente su ogni scheda dettagli chiave come nome account, importo della trattativa e data di chiusura

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi il componente Kanban**

* Trascina il componente AX Kanban nella tua area di lavoro di Experience Cloud Builder
  {% endstep %}

{% step %}

#### **Configura la fonte dati**

* Imposta il nome API dell'oggetto su `Opportunità`
  {% endstep %}

{% step %}

#### **Configura le mappature dei dati**

* Imposta il campo chiave su `Id`
* Imposta il nome del campo di raggruppamento su `StageName`
* Imposta il tipo di record su `Master`
* Imposta il nome del campo di riepilogo su `Amount`
  {% endstep %}

{% step %}

#### **Personalizza le schede**

* Imposta il titolo su `Nome`
* Imposta la descrizione su `Account.Name`
* Imposta la data di inizio su `CreatedDate`
* Imposta la data di scadenza su `CloseDate`
* Aggiungi `Amount` come campo visualizzato
  {% endstep %}

{% step %}

#### **Personalizza l'intestazione**

* Imposta il titolo dell'intestazione su `Kanban delle opportunità`
* Imposta l'icona dell'intestazione su `standard:opportunity`
  {% endstep %}

{% step %}

#### **Anteprima della bacheca**

* Rivedi il layout in Experience Cloud Builder per confermare che la configurazione abbia l'aspetto e il comportamento previsti
  {% endstep %}
  {% endstepper %}

***

#### **Link**

{% content-ref url="ax-schede" %}
[ax-schede](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-schede)
{% endcontent-ref %}

### Esempio 2: Kanban dello stato dei casi

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

Offri ai tuoi clienti visibilità sul loro percorso di supporto con una bacheca Kanban dedicata all'interno del tuo portale di assistenza. Mostrando i casi organizzati per stato, i clienti possono monitorare l'avanzamento a colpo d'occhio, riducendo la necessità di chiedere aggiornamenti e creando un'esperienza di supporto più fluida e trasparente.

***

#### **Cosa otterrai**

* **Trasparenza per il cliente:** Consenti ai clienti di monitorare lo stato di ogni caso inviato in una vista a bacheca chiara e organizzata
* **Riduzione delle chiamate in entrata sullo stato:** Mostra proattivamente l'avanzamento così i clienti passano meno tempo a rincorrere aggiornamenti
* **Migliore soddisfazione nel supporto:** Offri un'esperienza rifinita e intuitiva che costruisce fiducia e sicurezza nel tuo team di supporto

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi il componente Kanban**

* Trascina il componente AX Kanban nella tua area di lavoro di Experience Cloud Builder
  {% endstep %}

{% step %}

#### **Configura la fonte dati**

* Imposta il nome API dell'oggetto su `Caso`
  {% endstep %}

{% step %}

#### **Configura le mappature dei dati**

* Imposta il campo chiave su `Id`
* Imposta il nome del campo di raggruppamento su `Stato`
  {% endstep %}

{% step %}

#### **Personalizza le schede**

* Imposta il titolo su `Numero`
* Imposta la descrizione su `Contact.Name`
* Imposta la data di inizio su `CreatedDate`
  {% endstep %}

{% step %}

#### **Personalizza l'intestazione**

* Imposta la variante su `Percorso`
* Imposta il titolo dell'intestazione su `Kanban dei casi`
* Imposta l'icona dell'intestazione su `standard:case`
  {% endstep %}

{% step %}

#### **Anteprima della bacheca**

* Rivedi il layout in Experience Cloud Builder per confermare che la configurazione abbia l'aspetto e il comportamento previsti
  {% endstep %}
  {% endstepper %}