# AX - Scheda profilo

## Panoramica

**AX - Scheda profilo** è un componente di Experience Cloud che mostra informazioni dell'utente o del contatto in un formato di scheda stilizzato con foto del profilo, nomi, dettagli e immagini di sfondo opzionali nelle pagine dei siti Experience.

Usalo per presentare membri del team, contatti dei clienti, rappresentanti dei partner o contributori della community con una formattazione visiva coerente. Configura quali campi vengono visualizzati, aggiungi immagini del profilo, personalizza lo stile e includi pulsanti di azione in Experience Builder.

Perfetto per directory del team, elenchi di contatti, profili dei membri della community, sezioni "Incontra il tuo rappresentante" o ovunque il tuo portale abbia bisogno di visualizzazioni professionali dei profili.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FbR9Mq0YdqjtlwMO6JdY6%2F2023-11-07_16-05-19.png?alt=media&#x26;token=c95863f1-cc0f-4a60-b93f-58af779f2823" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
Questo componente [utilizza gli slot](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/per-iniziare/imparare-le-basi#understanding-slots) per la personalizzazione avanzata, rendendolo ideale per i siti LWR. I siti Aura non supportano questo livello di personalizzazione.
{% endhint %}

***

## Per iniziare

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

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

***

## Tutorial

| Nome                                                                                                                                                                                                                                                                                        | Descrizione                                                                                                                   |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| [**Configurazione della Scheda profilo per visualizzare le informazioni dell'utente corrente**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/componenti/scheda-profilo/configura-la-scheda-profilo-per-visualizzare-le-informazioni-dellutente-corrente) | Configura una Avonni Card per visualizzare le informazioni dell'utente su Experience Cloud, migliorando la personalizzazione. |

***

## Slot

Il componente Avonni Scheda profilo offre un modo flessibile e dinamico per presentare un'ampia gamma di informazioni tramite slot. Questi slot sono aree designate all'interno del componente in cui è possibile inserire altri componenti, consentendo un'ampia personalizzazione e funzionalità.

#### Tipi di slot

1. **Slot contenuto:**
   * L'area principale per le informazioni dettagliate.
   * Ideale per aggiungere elementi diversi come testo, elenchi, immagini o componenti personalizzati.
   * Può essere utilizzata per visualizzare dati completi o elementi interattivi.
2. **Slot intestazione:**
   * Dedicato a titoli, intestazioni o contenuti introduttivi.
   * Adatto per etichette di testo, avatar, icone o qualsiasi componente che fornisca contesto.
   * Migliora la comprensione immediata dello scopo della Scheda profilo.
3. **Slot azioni:**
   * Riservato a elementi interattivi come pulsanti o collegamenti ipertestuali.
   * Facilita l'interazione dell'utente, offrendo azioni come la modifica dei profili e la navigazione.
   * Aumenta l'interattività della scheda e il coinvolgimento dell'utente.

***

## Impostazioni

{% tabs %}
{% tab title="🎛️ Proprietà" %}

| Nome                                               | Descrizione                                                                                                                             | Utilizzo                                                                                                                            |
| -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| **Titolo e stile del testo del titolo**            | Definisci il titolo e il suo aspetto scegliendo tra una varietà di stili di testo come H1, H2, H3, H4, P1 e P2.                         | Usalo per dare alla tua scheda profilo un'intestazione prominente e stilizzata che catturi l'attenzione.                            |
| **Sottotitolo e stile del testo del sottotitolo**  | Aggiungi un sottotitolo e personalizzane l'aspetto, consentendo ulteriori informazioni contestuali con opzioni di stile.                | Usa i sottotitoli per fornire informazioni extra, come una posizione o un reparto, migliorando la completezza della scheda profilo. |
| **Sfondo CMS o URL dello sfondo**                  | Personalizza lo sfondo scegliendo un'immagine dal CMS o fornendo un URL, consentendo uno sfondo visivamente più ricco.                  | Un'immagine di sfondo ben scelta può aggiungere profondità e contesto al profilo, migliorandone l'appeal visivo.                    |
| **Immagine avatar CMS o URL dell'immagine avatar** | Definisci l'avatar selezionando un'immagine dal CMS o usando un URL, aggiungendo un tocco personale alla rappresentazione del profilo.  | Gli avatar aggiungono un tocco personale, rendendo il profilo più coinvolgente e immediato.                                         |
| **Variante e dimensione dell'avatar**              | Personalizza la forma e la dimensione dell'avatar, scegliendo tra varianti come cerchio o quadrato e dimensioni da x-small a x-large.   | Adatta l'aspetto dell'avatar al design complessivo estetico della scheda profilo, garantendo coerenza visiva e appeal.              |
| **Posizione dell'avatar**                          | Posiziona l'avatar sulla scheda, scegliendo tra posizioni come in alto a sinistra, in alto al centro o in basso a destra, tra le altre. | Regola la posizione dell'avatar per ottenere un layout equilibrato e armonioso all'interno della scheda profilo.                    |

{% endtab %}

{% tab title="🎨 Stile" %}

| Nome                                     | Descrizione                                                                                                                                                             | Utilizzo                                                                                                                                                                     |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Attributi di stile dell'intestazione** | Personalizza ampiamente l'intestazione con opzioni per colore di sfondo, colore del testo, dimensione del carattere, stile, peso e persino personalizzazione del bordo. | Affina l'aspetto dell'intestazione per creare un'intestazione della scheda profilo visivamente accattivante e facilmente leggibile.                                          |
| **Colore di sfondo e bordo**             | Personalizza il colore di sfondo complessivo della scheda e definisci le proprietà del bordo come dimensione, raggio e colore.                                          | Queste funzionalità consentono un'ulteriore distinzione visiva e rifinitura dell'aspetto della scheda profilo, assicurando che sia in linea con le tue preferenze di design. |

{% endtab %}
{% endtabs %}

***

## Esempi di casi d'uso

### Esempio 1: Pannello evidenziato dell'account (contenitore)

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

Trasforma il tuo sito partner experience con una scheda profilo account raffinata e ricca di informazioni che mette in primo piano i dettagli chiave dell'account, il branding e le azioni.

***

#### **Cosa otterrai**

* **Intestazione brandizzata:** Mostra il nome dell'account e il settore con il logo dell'azienda per un riconoscimento visivo immediato
* **Azioni contestuali:** Avvia un flusso Nuova opportunità direttamente dalla scheda con un solo clic
* **Dettaglio record compatto:** Mostra i campi account più pertinenti senza sovraccaricare la pagina

***

#### **Prima di iniziare**

* **Campo logo personalizzato:** Un campo personalizzato sull'oggetto Account per archiviare l'URL del logo dell'azienda
* **Flusso schermata:** Un flusso schermata Nuova opportunità, pronto per l'avvio
* **Componente pulsante:** Disponibile nella tua libreria dei componenti
* **Componente Dettaglio record:** Disponibile nella tua libreria dei componenti

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi la Scheda profilo alla tua pagina**

* Trascina il componente AX – Scheda profilo sulla pagina record dell'account Experience
  {% endstep %}

{% step %}

#### **Configura l'intestazione della scheda**

* Imposta Intestazione su `{!Item.Name}`
* Imposta Stile su `Titolo 2`
* Imposta Sottotitolo su `{!Item.Industry}`
  {% endstep %}

{% step %}

#### **Aggiungi il logo dell'azienda**

* Imposta URL immagine avatar su `{!Item.LogoURL__c}`
* Imposta Variante su `Cerchio`
* Imposta Dimensione su `Media`
  {% endstep %}

{% step %}

#### **Aggiungi un pulsante di azione personalizzato**

* Trascina il componente Pulsante nello slot Azioni
  {% endstep %}

{% step %}

#### **Aggiungi un layout record compatto**

* Trascina il componente Dettaglio record nello slot Contenuto
  {% endstep %}

{% step %}

#### **Anteprima della tua pagina**

* Rivedi la scheda in modalità anteprima per confermare che il layout, il logo e il pulsante di azione vengano visualizzati come previsto
  {% endstep %}
  {% endstepper %}

***

#### **Link**

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

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

***

### Esempio 2: Informazioni del profilo dell'utente corrente

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

Offri ai tuoi utenti un benvenuto caloroso e personalizzato nel momento in cui arrivano sul tuo sito experience, creando connessione e incoraggiando l'adozione della piattaforma fin dalla prima visita.

***

#### **Cosa otterrai**

* **Saluto personalizzato:** Indirizza ogni utente per nome con un messaggio di benvenuto dinamico che risulti umano, non generico
* **Contesto del ruolo:** Mostra il titolo dell'utente sotto il suo nome, in modo che colleghi e clienti possano capire immediatamente con chi stanno interagendo
* **Foto profilo:** Recupera automaticamente l'immagine del profilo dell'utente per un aspetto curato e familiare

***

#### **Come configurarlo**

{% stepper %}
{% step %}

### **Aggiungi la Scheda profilo alla tua pagina**

* Trascina il componente AX – Scheda profilo sulla pagina del sito Experience
  {% endstep %}

{% step %}

### **Configura l'intestazione della scheda**

* Imposta Intestazione su `Benvenuto, {!User.Record.Name}`
* Imposta Stile su `Titolo 2`
* Imposta Sottotitolo su `{!User.Record.Title}`
  {% endstep %}

{% step %}

### **Configura l'immagine del profilo**

* Imposta URL immagine avatar su `{!User.Record.SmallPhotoUrl}`
* Imposta Posizione avatar su `In alto al centro`
  {% endstep %}

{% step %}

### **Anteprima della tua pagina**

{% endstep %}
{% endstepper %}

***

**Link**

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

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