# 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.
*** ## 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="" %} *** ## 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.
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 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.
Tipo di interazioneDescrizione
Mostra toastMostra una breve notifica popup sullo schermo, fornendo un rapido feedback o informazioni dopo aver fatto clic su un marcatore della mappa.
NavigaReindirizza l'utente a un'altra pagina del sito o a un URL, guidandolo verso informazioni più dettagliate sulla posizione cliccata.
Apri finestra modale di avvisoApre una finestra modale con un messaggio di avviso, presentando informazioni importanti o avvertimenti sulla posizione selezionata.
Apri confermaAttiva una finestra di dialogo di conferma, usata per azioni che richiedono un'ulteriore conferma dell'utente, come la partecipazione a un evento.
Apri dialogo FlowApre una finestra di dialogo che esegue un Salesforce Flow, avviando workflow o processi relativi alla posizione cliccata.
*** ## 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="" %} 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="/pages/148e264fb5532c263d5fd556c2e65f85b826ea96" %} [AX - Schede](/experience-cloud/experience-cloud-it/experience-components/ax-schede.md) {% endcontent-ref %} ### Esempio 2: Kanban dello stato dei casi {% @arcade/embed flowId="XXPy9vrTjP5P3hbCqwTg" url="" %} 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 %} --- # Agent Instructions: 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-kanban.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.