Personalizzazione della pagina di dettaglio record mobile utilizzando Canvas

Per clonare una pagina di dettaglio record mobile

1. Navigare su Setup > Customization > Canvas.
   
2. Fare clic sulla scheda Detail View e selezionare Mobile.
   
3. Passare il mouse su una pagina di dettaglio record mobile, fare clic sull'icona (...) e selezionare Clone.
   
4. Selezionare il Modulo e il Layout.
   
5. Fare clic su Clone.
   
6. Una volta completate le modifiche, assegnare alla pagina clonata un nome e fare clic su Save.
   

Per modificare una pagina di dettaglio record mobile

1. Navigare su Setup > Customization > Canvas.
   
2. Fare clic sulla scheda Detail View e selezionare Mobile.
   
3. Passare il mouse su una pagina di dettaglio record mobile, fare clic sull'icona (...) e selezionare Edit.
   

Per eliminare una vista Canvas mobile

1. Navigare su Setup > Customization > Canvas.
   
2. Fare clic sulla scheda Detail View e selezionare Mobile.
   
3. Passare il mouse su una pagina di dettaglio record mobile, fare clic sull'icona (...) e selezionare Delete.
   
4. Nel popup Sei sicuro di voler eliminare questa vista?, fare clic su Sì, elimina.
   

Nota: Prima di eliminare una vista Canvas attualmente impostata come predefinita per un profilo, è necessario prima scegliere un'altra vista come predefinita per quel profilo.

Per impostare una pagina di dettaglio Canvas mobile come predefinita

1. Navigare su Setup > Customization > Canvas.
   
2. Fare clic sulla scheda Mobile.
   
3. Fare clic su Mobile Canvas Assignment.
   
4. Nella pagina Mobile Canvas Assignment, selezionare il Modulo e il Layout dall'elenco a discesa.
   
   
5. Selezionare il canvas in corrispondenza del rispettivo profilo.
   
6. Fare clic su Save.
   

Navigazione del Canvas builder

La pagina di dettaglio record mobile verrà progettata nel Canvas builder. Facciamo un breve tour di questa interfaccia no-code, con funzionalità drag-and-drop, e vediamo le diverse opzioni disponibili.

L'interfaccia del Canvas builder è composta da tre parti:

1. Il canvas: Qui si organizzano i diversi componenti della pagina di dettaglio record mobile.
   
2. Barra laterale sinistra: Contiene i diversi componenti, le azioni relative ai modelli e le risorse disponibili per aiutare nella creazione della pagina Canvas. Questi sono gli strumenti utilizzabili per costruire la pagina Canvas.
   
3. Barra dei menu superiore: Contiene opzioni come Annulla, Ripeti, Zoom, Avvisi, Anteprima, Visualizza Canvas a schermo intero, Inserisci nome Canvas e Salva.
   

Componenti

I diversi componenti nella barra laterale sinistra del Canvas builder sono:

1. Dati: Contiene le varie entità relative ai dati come Campi, Liste correlate, Azioni (come Modifica, Clona, Elimina ecc.) e Pulsanti personalizzati disponibili in quel particolare layout.
   
2. Elementi: Include le varie entità visive presenti all'interno di un layout come Sezione, Scheda, Tabella, Testo, Immagine, Icona e Linea.
   
3. Stile: Consente di impostare le diverse proprietà di stile per un componente (un'entità dati, un elemento, intestazione mobile, corpo mobile o piè di pagina mobile). Le proprietà variano in base al componente selezionato.
4. Componenti riutilizzabili: Un insieme di componenti che include elementi, stile e dati può essere salvato come singolo componente riutilizzabile. Questo può essere riutilizzato in altri layout e moduli.
   

Dati

1. Campi: Includeranno i campi supportati nell'app mobile (Android o iOS). Questi campi saranno raggruppati in base alle sezioni del layout.
   
2. Liste correlate: Le liste correlate supportate su mobile associate al modulo sono elencate qui.
   
3. Azioni: Sono i diversi pulsanti specifici per mobile (come Modifica, Clona, Elimina ecc.) disponibili nel layout.
   
4. Pulsanti: Includono i pulsanti personalizzati creati dall'utente o disponibili come parte di un'integrazione.
   

Elementi

1. Sezione: Una sezione è un blocco che apparirà nella pagina di dettaglio mobile. Con una sezione, è possibile:
   
   
   
   
1. Aggiungere componenti dati e altri elementi
   
2. Stilizzare la sezione
   
3. Trascinare i bordi per ridimensionare il riquadro della sezione.
   
4. Fare clic con il pulsante destro sulla sezione ed eseguire un'azione come Inserisci un componente dati, rendi il componente fisso o fluido, Copia o Incolla stile, Aggiungi stile condizionale (Regola Canvas), Blocca, Aggiungi ai Componenti riutilizzabili, Aggiungi ai Preset o Elimina
   
2. Schede: Le schede consentono di organizzare campi e liste correlate in schermate diverse. Solo la schermata della scheda selezionata è visibile mentre le altre rimangono nascoste. Questo consente di inserire un grande volume di dati in uno spazio ridotto, rendendo al contempo facile per gli utenti accedere a tali dati. Con una scheda, è possibile:
   
   
   
   
1. Stilizzarla secondo le proprie preferenze utilizzando il pannello sinistro
   
2. Fare clic sull'icona + per creare una scheda personalizzata o aggiungere liste correlate come schede
   
3. Passare il mouse sul bordo sinistro di una scheda, fare clic sull'icona della freccia bidirezionale e trascinare la scheda per riordinarla
   
4. Passare il mouse su una scheda e fare clic su x per eliminarla
   
5. Rinominare una scheda personalizzata facendo clic su di essa e utilizzando il pannello stile a sinistra
   
6. Fare clic con il pulsante destro sulla scheda per Mostra icona. Se un'icona è già stata aggiunta, si avrà l'opzione di Nascondi/Cambia icona, Nascondi testo, Icona in alto e Icona a sinistra
   
7. Fare clic con il pulsante destro all'interno della scheda per eseguire azioni come Inserisci campo, rendi il componente fisso o fluido, Copia/Incolla stile, Stile condizionale, Blocca, Aggiungi ai Componenti riutilizzabili, Aggiungi ai Preset e Elimina. Le opzioni disponibili dipendono dalla posizione in cui si fa clic all'interno della scheda
   
8. Le liste correlate aggiunte all'elemento scheda non possono essere rinominate.
   
3. Tabella: Le tabelle consentono di visualizzare informazioni in righe e colonne. Questo fornisce un'interfaccia familiare per la maggior parte degli utenti e aiuta a risparmiare spazio nella pagina. Con una tabella, è possibile:
   
   
1. Passare il mouse su una riga e fare clic sull'icona + per aggiungere una riga. Per impostazione predefinita, ci saranno due colonne. Non è possibile aggiungere colonne aggiuntive alla tabella. Passare il mouse sulla tabella e fare clic sull'icona - per eliminare la tabella.
   
2. Fare clic con il pulsante destro per Inserisci/Cambia campo, Rendi il componente fisso o fluido, Copia/Incolla stile, Stile condizionale, Blocca, Aggiungi ai Componenti riutilizzabili, Aggiungi ai Preset o Elimina
   
3. Trascinare i bordi per ridimensionare la tabella
   
4. Testo: Consente di aggiungere una casella di testo all'interno della pagina di dettaglio. Ad esempio, può essere utilizzato per creare intestazioni, istruzioni, avvisi e così via. Con un componente testo, è possibile:
   
   
1. Trascinare i bordi per ridimensionare la casella di testo
   
2. Fare clic con il pulsante destro per Clona, Rendi il componente fisso/fluido, Aggiungi ai Preset e Elimina
   
5. Immagini: L'elemento Immagine può essere utilizzato per aggiungere un'immagine a una pagina di dettaglio record mobile. Con un elemento immagine, è possibile:
   
   
1. Fare clic sull'elemento immagine e fare clic su Upload Image nel pannello sinistro per aggiungere l'immagine. È possibile aggiungere un'immagine utilizzando il suo URL.
   
2. Dopo aver aggiunto l'immagine, è possibile ridimensionarla, regolare altri stili come bordo, ombra, raggio, padding, ecc.
   
3. Fare clic con il pulsante destro sull'immagine per impostare il Raggio ed Eliminare.
   
6. Icone: Le icone possono essere utilizzate in molteplici posizioni come segnale visivo immediato. Ad esempio, possono essere utilizzate al posto delle etichette dei campi in molti punti. Con un'icona, è possibile:
   
   
1. Scegliere tra l'ampia gamma di icone per indicare diverse entità
   
2. Fare clic con il pulsante destro sull'icona per Clona, Cambia icona e Elimina
   
7. Linea: Le linee possono essere utilizzate ovunque si desideri separare e organizzare il contenuto, allineare elementi e così via.
   
   

Stile

1. Sfondo: Selezionare un colore di sfondo inserendo il codice HEX, scegliendo dalla palette o dal selettore colori.
   
   
   
   
2. Immagine: Selezionare la casella Image e procedere come segue:
   
1. Aggiungere un'immagine: Fare clic su Upload Image.
   
2. Inserire l'URL dell'immagine e fare clic su Insert.
   
   
3. Impostare la dimensione dell'immagine: È possibile selezionare Contain (Adatta alla dimensione del componente mantenendo le proporzioni), Original (dimensione originale dell'immagine) o Cover (Estendi per riempire completamente il componente senza considerare le proporzioni).
   
   
4. Impostare la ripetizione dell'immagine: Se l'immagine è piccola e non riempie il componente, è possibile scegliere di ripetere l'immagine lungo l'asse X, l'asse Y o entrambi gli assi. È anche possibile scegliere No Repeat per impedire la ripetizione dell'immagine.
   
3. Gradiente: Creare una transizione uniforme tra più colori nello sfondo. Fare clic sulla linea per aggiungere vari colori e ruotare il selettore per impostare l'angolo del gradiente.
   
   
   
   
4. Padding: Impostare lo spazio attorno al contenuto all'interno di un bordo. È possibile:
   
   
1. Selezionare Padding uguale per tutti i lati e spostare il cursore per impostare lo spazio.
   
2. Deselezionare Padding uguale per tutti i lati e impostare lo spazio per sinistra, destra, alto e basso in pixel.
   
5. Altezza e Larghezza: Impostare l'altezza e la larghezza del componente. Per alcuni componenti, è disponibile anche l'opzione di impostare la larghezza come Auto per ridimensionare in base allo schermo dell'utente.
   
   
   Nota: È disponibile anche l'opzione Mantieni proporzioni per garantire che le proporzioni del componente vengano mantenute.
   
6. Bordo: Configurare il bordo del componente. È possibile decidere il colore (codice hex o selettore colori), lo stile del bordo e la sua dimensione (utilizzando il cursore o inserendo la dimensione in pixel).
   
   
7. Ombra: Creare un'ombra per il componente scegliendo:
   
   
1. Posizione (X e Y): Un valore positivo di X sposta l'ombra a destra del componente. Un valore negativo di X la sposta a sinistra. Per Y, un valore positivo la sposta verso l'alto mentre un valore negativo la sposta verso il basso.
   
2. Sfocatura: Maggiore è il valore, meno nitida sarà l'ombra.
   
3. Colore: Scegliere il colore dell'ombra.
   
   
8. Raggio: Utilizzare questa opzione per arrotondare gli angoli del componente. Trascinare il cursore per impostare il grado di arrotondamento per tutti gli angoli.
   
   
9. Margine: Impostare la quantità di spazio bianco attorno a un componente. È possibile:
   
   
1. Selezionare Margine uguale per tutti i lati e spostare il cursore per impostare lo spazio.
   
2. Deselezionare Margine uguale per tutti i lati e impostare lo spazio per sinistra, destra, alto e basso in pixel.
   
   
10. Visibilità: Mostrare o nascondere il componente.
    
    
11. Profondità: Portare il componente sopra o spostarlo sotto altri elementi.
    
    
12. Testo: È possibile impostare la dimensione del testo, il peso, le maiuscole/minuscole, l'allineamento e altre opzioni relative al testo.
    
    
13. Linea: È possibile impostare la linea come orizzontale o verticale, regolare lo spessore, lo stile e il colore.
    
    

1. Stati: Impostare uno stile diverso per lo stesso elemento in base al suo stato.
   
   Ad esempio, quando determinati campi sono vuoti, le azioni associate saranno visibili ma disabilitate. Lo stile dello stato disabilitato è supportato per azioni specifiche come Chiama, Invia email, Invia messaggio e Localizzatore mappa (disponibili in Data > Actions). Per indicare che un'azione importante come l'invio di email è disabilitata (perché non c'è un valore nel campo email), è possibile aggiungere un bordo rosso al pulsante Invia email. Questo ricorderà all'utente di compilare il campo email.
   
   
2. Scheda stile condizionale: Impostare stili diversi per il componente in base ai dati nel record. I criteri vengono impostati in una Regola Canvas e viene creata una scheda di stile condizionale per ogni regola Canvas.
   

Riutilizzo degli stili

È possibile riutilizzare gli stili aggiungendoli ai preset. Per farlo:

1. Selezionare l'elemento nel canvas e fare clic con il pulsante destro su di esso.
   
2. Selezionare Add to Presets.
   

1. Selezionare l'elemento nel canvas.
   
2. Nel pannello sinistro, fare clic su Presets.
   
3. Selezionare un preset aggiunto dall'utente in Custom o scegliere un preset dalla Gallery.
   
   

1. Testo, Etichetta e Valore
   
2. Campo
   
3. Sezione
   
4. Scheda
   
5. Tabella
   
6. Pulsanti
   

Componenti riutilizzabili

È possibile scegliere i componenti preesistenti dalla galleria e aggiungerli al canvas.

Nota

1. È possibile salvare fino a 25 componenti riutilizzabili.
   
2. Un componente può essere riutilizzato in modelli creati per vari moduli CRM. I campi creati per un modulo verranno automaticamente mappati e visualizzati con i campi dell'altro.
   
3. Se i campi non possono essere abbinati, verrà visualizzato un tipo di campo simile disponibile nel modulo scelto e se il tipo di campo non è disponibile nel modulo di destinazione, verrà indicato come N/A. In entrambi i casi, è possibile modificare il tipo di campo facendo clic con il pulsante destro sul componente.
   

Esportazione di un modello Canvas

Una volta creato un modello Canvas, è possibile condividerlo con gli utenti della propria organizzazione o con gli utenti di un'altra organizzazione CRM utilizzando una chiave univoca. È possibile avviare l'esportazione dalla pagina principale di Canvas o dall'interno del Canvas builder.

1. Navigare su Setup > Customization > Canvas.
   
2. Fare clic sulla scheda Detail View e selezionare Mobile.
   
3. Passare il mouse su una pagina di dettaglio record mobile, fare clic sull'icona (...) e selezionare Export Canvas.
   (oppure)
   Fare clic sull'icona (...) e selezionare Edit. Nel Canvas Builder, fare clic sull'icona (...) e selezionare Export template.
4. Nel popup Canvas Template Export, fare clic su Export per generare la chiave univoca per quel canvas.
   
5. Fare clic su Copy per copiare la chiave.
   
   

Questa chiave è un codice alfanumerico che può trasmettere l'interfaccia utente del modello.

Nota:

Per gestire le chiavi Canvas