Visualizzare record, campi e tabelle

Obiettivi di apprendimento

Al completamento di questa unità, sarai in grado di:

Spiegare la differenza tra componenti granulari o grezzi e i casi in cui è preferibile utilizzare gli uni o gli altri.
Spiegare cos'è un componente di iterazione e a cosa serve.
Utilizzare i componenti granulai applicabili per visualizzare i dettagli dei record e gli elenchi correlati.
Utilizzare i componenti granulari applicabili per sostituire e personalizzare i componenti grezzi.

Nota

Stai seguendo la formazione in italiano? In questo badge, la convalida delle sfide pratiche di Trailhead funziona in inglese. Le traduzioni sono fornite tra parentesi come riferimento. Accertati di copiare e incollare i valori riportati in inglese e imposta la lingua del Trailhead Playground su Inglese e le impostazioni internazionali su Stati Uniti. Segui le istruzioni qui.

Visita il badge Trailhead nella tua lingua per scoprire come usufruire dell'esperienza di Trailhead in altre lingue.

Introduzione ai componenti di output

Visualforce include circa 150 componenti integrati utilizzabili nelle proprie pagine. I componenti vengono visualizzati in HTML, CSS e JavaScript quando una pagina viene richiesta. I componenti grezzi forniscono una quantità significativa di funzionalità all'interno di un singolo componente e sono in grado di aggiungere una grande quantità di informazioni e interfacce utente alla pagina in cui vengono utilizzati. I componenti granulari fine forniscono funzionalità più mirate e permettono di progettare la pagina in modo che presenti l'aspetto e il comportamento desiderati.

In questa sezione ci occuperemo principalmente dei componenti di output, cioè dei componenti che generano un output di dati a partire da un record e che consentono di progettare un'interfaccia utente di sola visualizzazione.

Creare una pagina Visualforce con un controller standard

Utilizza componenti di output con un controller standard per facilitare l'accesso e la visualizzazione dei dettagli record.

In questa pagina proverai diversi componenti di output. Per il momento, creiamo una pagina perlopiù vuota.

Apri la Developer Console e fai clic su File | New | Visualforce Page (File | Nuovo | Pagina Visualforce) per creare una nuova pagina Visualforce. Inserisci AccountDetail come nome della pagina.

Nell'editor, sostituisci qualsiasi markup con il seguente.

<apex:page standardController="Account">
    {! Account.Name }
</apex:page>

Fai clic su Preview (Anteprima) per aprire un'anteprima della pagina che potrai guardare mentre apporti le modifiche. Si apre una nuova finestra in cui sono visualizzati gli elementi standard dell'intestazione e della barra laterale della pagina di Salesforce, ma ancora nulla nel corpo.
Aggiungi l'ID di un account all'URL della finestra di anteprima e premi Invio. L'URL dovrebbe avere un aspetto simile a questo: https://SalesforceInstance/apex/AccountDetail?core.apexpages.request.devconsole=1&id=001D000000JRBes. Il nome dell'account dovrebbe essere visibile nel corpo. In questo modo si verifica che il controller standard funzioni e che l'ID del record sia valido.

Visualizzare i dettagli dei record

Per aggiungere rapidamente i dettagli record a una pagina che utilizza un controller standard, si utilizza <apex:detail>.

Alcuni componenti di output danno un contributo considerevole. Questi componenti "grezzi" offrono molte funzionalità, visualizzando molti campi, etichette e altri elementi dell'interfaccia utente, e consentono di creare rapidamente pagine che sono variazioni dell'interfaccia utente integrata di Salesforce.

Sostituisci la riga che contiene {!Account.Name } con il markup seguente e salva le modifiche.
<apex:detail /> Caspita, che cambiamento! Con una sola riga di markup hai appena riprodotto l'intera pagina di visualizzazione standard per l'oggetto account!

<apex:detail> è un componente di output grezzo che permette di aggiungere alla pagina molti campi, sezioni, pulsanti e altri elementi dell'interfaccia utente utilizzando una sola riga di markup. Se ci fai caso, tutto ciò che viene aggiunto alla pagina utilizza inoltre lo stile Salesforce Classic. Esistono parecchi attributi per personalizzare l'aspetto di <apex:detail>. Dedica alcuni minuti a provare a modificarne alcuni per vedere come funzionano. Per creare pagine maggiormente allineate a quelle di Lightning Experience, consulta le Considerazioni importanti sul design visivo nel modulo Visualforce e Lightning Experience.

Visualizzare gli elenchi correlati

Per visualizzare gli elenchi di record correlati al record corrente, si utilizza <apex:relatedList>.

Che cos'è esattamente un elenco correlato? Cosa fa <apex:relatedList> quando viene aggiunto a una pagina?

Acquisisce un elenco di elementi di dati simili. Ad esempio, un elenco di referenti per l'account.
Crea una tabella con colonne per ciascun campo, intestazioni per ciascuna colonna e così via.
Per ciascun elemento dell'elenco, per ciascun referente correlato, aggiunge una riga alla tabella e riempie ogni colonna con il campo appropriato di quel record.

Il componente <apex:detail> consente di visualizzare i dettagli di un particolare record, nonché elenchi di record correlati, come referenti, casi, opportunità e così via. Poiché potrebbe trattarsi di una quantità eccessiva di elementi, è possibile rimuovere gli elenchi correlati e poi aggiungerne solo alcuni, utilizzando un altro componente grezzo.

Modifica il markup in modo da omettere gli elenchi correlati aggiungendo relatedList="false" al componente <apex:detail>.
<apex:detail relatedList="false"/>

I dettagli del record account rimangono visualizzati, ma gli elenchi correlati sono spariti.

Sotto alla riga <apex:detail />, aggiungi il seguente markup:

<apex:relatedList list="Opportunities" pageSize="5"/><apex:relatedList list="Contacts"/>

La pagina dovrebbe ora visualizzare due elenchi correlati, uno per i referenti e l'altro per le opportunità. Fai caso anche che puoi configurare ogni elenco correlato in modo indipendente, modificando gli attributi solo di quel componente.

Il componente <apex:relatedList> è un altro componente a grezzo, ma di livello inferiore rispetto ad <apex:detail>. In altre parole, <apex:detail> visualizza contemporaneamente numerosi elenchi correlati (o nessun elenco), mentre <apex:relatedList> permette di procedere uno alla volta. Questo permette di visualizzare solo gli elenchi correlati che interessano e di personalizzare individualmente la visualizzazione di ciascun elenco correlato.

Utilizza i componenti di livello superiore quando offrono le funzionalità che ti servono e quelli di livello inferiore quando hai bisogno di avere un maggiore controllo su ciò che viene visualizzato nella pagina.

Visualizzare i singoli campi

Per visualizzare i singoli campi di un record, si usa <apex:outputField>.

Se hai bisogno di avere un controllo ancora maggiore sul layout di pagina, puoi aggiungere i campi singolarmente. Il componente <apex:outputField> è stato concepito per svolgere esattamente questa funzione.

Sostituisci la riga <apex:detail /> con il seguente markup.
```
<apex:outputField value="{! Account.Name }"/>
<apex:outputField value="{! Account.Phone }"/>
<apex:outputField value="{! Account.Industry }"/>
<apex:outputField value="{! Account.AnnualRevenue }"/>
```
I quattro campi vengono aggiunti alla pagina. Ma forse la formattazione non è come ti aspettavi. I valori dei campi vengono visualizzati tutti su una riga, senza etichette e senza altra formattazione. Non è quello che vogliamo ed è in contrasto con i componenti <apex:detail> e <apex:relatedList>, che utilizzano automaticamente lo stile della piattaforma. Di per sé il componente <apex:outputField> si limita a fornire come output il valore del campo. Ma inserendolo tra i componenti <apex:pageBlock> e <apex:pageBlockSection>, il suo comportamento cambia sensibilmente.

Inserisci le righe <apex:outputField> tra i componenti <apex:pageBlock> e <apex:pageBlockSection>, in modo che il markup abbia questo aspetto:

<apex:pageBlock title="Account Details">
    <apex:pageBlockSection>
        <apex:outputField value="{! Account.Name }"/>
        <apex:outputField value="{! Account.Phone }"/>
        <apex:outputField value="{! Account.Industry }"/>
        <apex:outputField value="{! Account.AnnualRevenue }"/>
    </apex:pageBlockSection>
</apex:pageBlock>

Così va già meglio!

Campi di output all'interno di un blocco di pagina

I componenti <apex:pageBlock> e <apex:pageBlockSection> sono obbligatori per attivare l'aspetto della piattaforma. Se utilizzato in una <apex:pageBlockSection>, <apex:outputField> adotta il layout a due colonne, aggiunge le etichette campo, conferisce ai campi e alle etichette l'allineamento e lo stile appropriati e così via.

Pur sembrando un componente granulare perché produce solo un campo, <apex:outputField> in realtà svolge numerose funzioni. Riconosce se viene utilizzato all'interno di altri componenti e modifica l'output e lo stile di conseguenza. Inoltre gestisce in modo intelligente la formattazione e la visualizzazione. Se ci fai caso, il campo Annual Revenue (Ricavi annuali) è formattato come valuta. <apex:outputField> si adatta automaticamente al tipo di dati del campo visualizzato. Prova ad aggiungere una data, una lista di controllo o un campo elenco di selezione alla pagina e vedi cosa succede.

Visualizzare una tabella

Per aggiungere una tabella di dati a una pagina, si usa <apex:pageBlockTable>.

È possibile fare la stessa cosa nel proprio markup Visualforce utilizzando i componenti di iterazione. Un componente di iterazione lavora con una raccolta di elementi simili, anziché su un singolo valore. Ad esempio, {!Account.contacts} è un'espressione di valutazione che fornisce un elenco di referenti per un account. È possibile utilizzare questa espressione con un componente di iterazione per creare un elenco o una tabella con i dettagli di questi referenti correlati.

Sostituisci le due righe <apex:relatedList/> con il seguente markup.

<apex:pageBlock title="Contacts">
   <apex:pageBlockTable value="{!Account.contacts}" var="contact">
      <apex:column value="{!contact.Name}"/>
      <apex:column value="{!contact.Title}"/>
      <apex:column value="{!contact.Phone}"/>
   </apex:pageBlockTable>
</apex:pageBlock>

Una tabella che riporta i referenti dell'account viene aggiunta alla pagina, utilizzando solo le colonne che hai scelto. Elenco dei referenti che utilizza pageBlockTable

Elenco dei referenti che utilizza pageBlockTable

<apex:pageBlockTable> è un componente di iterazione che genera una tabella di dati, con tanto di stile della piattaforma. Ecco cosa accade nel markup.

L'attributo valore di <apex:pageBlockTable> è impostato sull'espressione menzionata in precedenza, {!Account.contacts}. Si tratta dell'elenco di record con cui opererà <apex:pageBlockTable>.
Per ciascun record dell'elenco, un singolo record alla volta, <apex:pageBlockTable> assegna quel record alla variabile indicata nell'attributo var di <apex:pageBlockTable>. Nel nostro caso, il nome della variabile è contact.
Per ciascun record, <apex:pageBlockTable> costruisce una nuova riga nella tabella, utilizzando la riga definita dall'insieme di componenti <apex:column> all'interno del corpo di <apex:pageBlockTable>. I componenti <apex:column>, a loro volta, utilizzano la variabile referente che rappresenta il record corrente per estrarre i valori campo per quel record.
Fuori del loop, <apex:pageBlockTable> utilizza i campi dei componenti <apex:column> per creare intestazioni di colonna, cercando l'etichetta per ciascun campo.

Sono molte cose da assimilare e i componenti dell'iterazione sono difficili da comprendere al primo impatto. La cosa migliore che puoi fare in questo momento è provare a crearne di tuoi. Aggiungi alla pagina un elenco di record correlati alle opportunità usando <apex:pageBlockTable>. Scegli i campi che desideri vengano visualizzati nella tabella. Cerca i diversi attributi per <apex:pageBlockTable> e <apex:column> e fai esperimenti finché non ti senti a tuo agio.

Ulteriori informazioni...

I componenti grezzi permettono di aggiungere rapidamente molte funzionalità a una pagina, mentre i componenti granulari offrono un maggiore controllo su dettagli specifici di una pagina.

<apex:enhancedList> e <apex:listViews> sono altri componenti grezzi che puoi scegliere di utilizzare con o al posto di <apex:relatedList>. E ci sono molti altri componenti che racchiudono molte funzionalità in un unico tag. Se non l'hai ancora fatto, consulta la guida di riferimento ai componenti standard e scopri il ventaglio delle possibilità a tua disposizione.

<apex:pageBlockTable> è un componente di iterazione che riprende lo stile di Salesforce Classic. <apex:dataTable> e <apex:dataList> sono componenti di iterazione per la creazione di tabelle ed elenchi senza stili. <apex:repeat> è un componente di iterazione che può essere utilizzato per generare qualsiasi markup arbitrario per una raccolta di record.

Magari hai notato che negli elenchi correlati creati manualmente mancano alcuni elementi che erano stati aggiunti alla tabella creata da <apex:relatedList>. Ad esempio, mancano i link Edit (Modifica) e Del (Elimina) per modificare ed eliminare i singoli record, così come il pulsante New Contact (Nuovo referente). Per creare questi elementi dell'interfaccia utente occorre conoscere un po' meglio Visualforce, in particolare per quanto riguarda i moduli e le azioni. Questi argomenti vengono trattati altrove.

Risorse