> 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-it/experience-components/ax-kanban.md). # AX - Kanban ## Panoramica **AX - Kanban** è un componente di Experience Cloud che visualizza i record di Salesforce come schede trascinabili organizzate in colonne di flusso di lavoro nelle pagine dei siti Experience. Usalo per consentire agli utenti del portale di visualizzare e gestire i flussi di lavoro—come gli stati dei casi di supporto, le fasi dei progetti o le 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 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 ovunque gli utenti del portale abbiano bisogno di una gestione visiva dei flussi di lavoro.
*** ## Per iniziare Usa questo semplice tutorial per apprendere le basi del componente Kanban e iniziare a creare i tuoi casi d'uso. {% @arcade/embed url="" flowId="SKeLCf1CoTnJZHTYhLOF" %} *** ## Connetti ai dati di Salesforce Questo passaggio essenziale nella configurazione del tuo componente Avonni Kanban stabilisce la connessione tra la tua bacheca Kanban e i dati rilevanti nel tuo ambiente Salesforce.
Ecco come funziona: * **Selezione dell'oggetto:** Inizia scegliendo l'oggetto Salesforce specifico (ad es. Account, Opportunità, oggetti personalizzati, ecc.) che contiene i dati che desideri visualizzare nella tua bacheca Kanban. * **Filtraggio 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 "Aperte" le opportunità o gli account in una certa regione. * **Raggruppamento (opzionale):** Raggruppa i tuoi dati per organizzare efficacemente la tua bacheca Kanban. Ad esempio, raggruppare le opportunità per "Fase" può creare colonne per "Prospezione", "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 campi nel tuo Kanban che non vengono usati direttamente per la visualizzazione o le interazioni, aggiungili nella sezione "Campi aggiuntivi". Questo è particolarmente utile per i campi che vuoi rendere ricercabili nella barra di ricerca del Kanban. ### **Punti chiave** * Scegliere la fonte dati giusta garantisce che il tuo Kanban mostri le informazioni più rilevanti per i tuoi utenti. * Il filtro 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 di Salesforce e gli elementi visivi della tua bacheca Kanban. Ecco perché questo è fondamentale: * **Visualizzazione accurata:** Le mappature dei dati garantiscono che le informazioni estratte dai campi Salesforce vengano visualizzate correttamente sulle schede Kanban e all'interno delle colonne della bacheca. Ad esempio, potresti mappare il campo Salesforce "Opportunity Name" al titolo di ciascuna scheda Kanban. * **Funzionalità:** Le mappature controllano anche il modo in cui gli utenti interagiscono con la bacheca Kanban. Ad esempio, mappare un campo "Status" alle colonne Kanban consente agli utenti di trascinare e rilasciare le schede per aggiornare direttamente lo stato all'interno della bacheca. ### **Come funziona** 1. **Seleziona un campo Salesforce** dalla 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 sugli 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 collegamento specifico all'interno di una scheda Kanban. * **Usi comuni:** Vai a una pagina di dettaglio del record, apri un sito web esterno o attiva un Flow di Salesforce. ### **Al clic** * Determina le azioni che si verificano quando un utente fa clic ovunque su una scheda Kanban. * **Usi comuni:** Espandi la scheda per maggiori dettagli, apri una finestra modale o avvia un processo.
Tipo di interazioneDescrizione
Mostra notifica toastVisualizza una breve notifica pop-up sullo schermo, fornendo un feedback rapido o informazioni dopo aver fatto clic su un indicatore della mappa.
NavigaReindirizza l'utente a una pagina diversa del tuo sito o a un URL, guidandolo verso informazioni più dettagliate sulla posizione selezionata.
Apri 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 ulteriore conferma da parte dell'utente, come la partecipazione a un evento.
Apri dialogo FlowApre una finestra di dialogo che esegue un Flow di Salesforce, avviando flussi di lavoro o processi relativi alla posizione selezionata.
*** ## Aspetto dello stile ### **Dimensione** * **Larghezza:** Controlla la larghezza orizzontale complessiva della bacheca Kanban. * **Altezza:** Controlla l'altezza verticale complessiva della bacheca Kanban. * **Overflow:** Determina come viene gestito il contenuto se supera le dimensioni della bacheca (le opzioni possono includere 'visible', 'hidden' o 'scroll'). ### **Bordo** * **Dimensione:** Spessore del bordo attorno all'intera bacheca Kanban. * **Stile:** Aspetto del bordo (ad es. continuo, tratteggiato). * **Colore:** Colore del bordo. * **Raggio:** Quanto sono arrotondati gli angoli della bacheca. ### **Intestazione** * **Colore di sfondo:** Imposta il colore di sfondo della sezione dell'intestazione di Kanban. * **Padding (alto, basso, sinistra):** Controlla la spaziatura interna dell'intestazione. * **Margine inferiore:** Crea spazio tra l'intestazione e le colonne sottostanti. ### **Bordo dell'intestazione** * **Colore, dimensione, stile e raggio del bordo:** Personalizza l'aspetto di un bordo all'interno dell'intestazione (probabilmente per separarla visivamente). * **Bordo inferiore (unito):** Questi attributi controllano probabilmente 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/primo piano:** Imposta i colori dell'elemento avatar. * **Utilità del colore di 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 e del font del riepilogo:** Controlla l'aspetto di qualsiasi testo di riepilogo nell'intestazione della colonna. ### **Dimensionamento delle colonne** * **Larghezza minima/massima:** 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 di focus. * **Colori del bordo:** Colori per gli stati normale e di focus. * **Attributi del testo e del font di titolo/descrizione/info:** Controlla l'aspetto di vari elementi di testo all'interno di una scheda. * **Limitazione delle righe:** Limita il numero di righe visualizzate per titoli/descrizioni per evitare il overflow. ### **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 url="" flowId="JQJEWO5OUQQf4fSb0GfD" %} Offri ai tuoi partner una visione 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 lasciare il portale. *** #### **Cosa otterrai** * **Visibilità potenziata per i partner:** Offri agli utenti partner una panoramica visiva in tempo reale della loro pipeline di 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 * **Visione immediata delle trattative:** Evidenzia dettagli chiave come il nome dell'account, l'importo della trattativa e la data di chiusura direttamente su ciascuna scheda *** #### **Come configurarlo** {% stepper %} {% step %} #### **Aggiungi il componente Kanban** * Trascina il componente AX Kanban nella canvas di Experience Cloud Builder {% endstep %} {% step %} #### **Configura la fonte dati** * Imposta il nome API dell'oggetto su `Opportunity` {% 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** * Esamina il layout in Experience Cloud Builder per confermare che la configurazione abbia l'aspetto e il comportamento previsti {% endstep %} {% endstepper %} *** #### **Collegamenti** {% content-ref url="/pages/148e264fb5532c263d5fd556c2e65f85b826ea96" %} [AX - Schede](/experience-cloud/experience-cloud-it/experience-components/ax-tabs.md) {% endcontent-ref %} ### Esempio 2: Kanban dello stato dei casi {% @arcade/embed url="" flowId="XXPy9vrTjP5P3hbCqwTg" %} Offri ai tuoi clienti visibilità sul loro percorso di supporto con una bacheca Kanban dedicata all'interno del tuo portale di supporto. Visualizzando 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 verso il cliente:** Consenti ai clienti di monitorare lo stato di ogni caso inviato in una vista bacheca chiara e organizzata * **Meno richieste di aggiornamento sullo stato:** Mostra in modo proattivo l'avanzamento, così i clienti trascorrono meno tempo a rincorrere aggiornamenti * **Maggiore soddisfazione nell'assistenza:** Offri un'esperienza raffinata e intuitiva che crea fiducia nel tuo team di supporto *** #### **Come configurarlo** {% stepper %} {% step %} #### **Aggiungi il componente Kanban** * Trascina il componente AX Kanban nella canvas 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** * Esamina il layout in Experience Cloud Builder per confermare che la configurazione abbia l'aspetto e il comportamento previsti {% 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-it/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.