Personalizarea paginii de detalii a înregistrării mobile folosind Canvas

Pentru a clona o pagină de detalii a înregistrării mobile

1. Navighează la Setup > Customization > Canvas.
   
2. Dă clic pe fila Detail View și selectează Mobile.
   
3. Treci cu mouse-ul peste o pagină de detalii a înregistrării mobile, dă clic pe iconița (...) și selectează Clone.
   
4. Selectează Module și Layout.
   
5. Dă clic pe Clone.
   
6. După ce ai terminat modificările, dă un nume paginii clonate și dă clic pe Save.
   

Pentru a edita o pagină de detalii a înregistrării mobile

1. Navighează la Setup > Customization > Canvas.
   
2. Dă clic pe fila Detail View și selectează Mobile.
   
3. Treci cu mouse-ul peste o pagină de detalii a înregistrării mobile, dă clic pe iconița (...) și selectează Edit.
   

Pentru a șterge o vizualizare Canvas mobilă

1. Navighează la Setup > Customization > Canvas.
   
2. Dă clic pe fila Detail View și selectează Mobile.
   
3. Treci cu mouse-ul peste o pagină de detalii a înregistrării mobile, dă clic pe iconița (...) și selectează Delete.
   
4. În fereastra pop-up Ești sigur că vrei să ștergi această vizualizare?, dă clic pe Da, șterge.
   

Notă: Înainte de a șterge o vizualizare Canvas care este setată în prezent ca implicită pentru un profil, trebuie mai întâi să alegi o altă vizualizare ca implicită pentru acel profil.

Pentru a seta o pagină de detalii Canvas mobilă ca implicită

1. Navighează la Setup > Customization > Canvas.
   
2. Dă clic pe fila Mobile.
   
3. Dă clic pe Mobile Canvas Assignment.
   
4. În pagina Mobile Canvas Assignment, selectează Module și Layout din lista derulantă.
   
   
5. Selectează canvas-ul corespunzător profilului respectiv.
   
6. Dă clic pe Save.
   

Navigarea în Canvas builder

Vei proiecta pagina de detalii a înregistrării mobile în Canvas builder. Hai să facem un tur rapid al acestei interfețe no-code, de tip drag-and-drop, și să vedem diferitele opțiuni disponibile aici.

Interfața Canvas builder cuprinde trei părți:

1. Canvas-ul: Aici aranjezi diferitele componente ale paginii de detalii a înregistrării mobile.
   
2. Bara laterală stângă: Aceasta conține diferitele componente, acțiunile legate de șabloane și resursele disponibile pentru a te ajuta să construiești pagina Canvas. Acestea sunt instrumentele pe care le poți folosi pentru a construi pagina Canvas.
   
3. Bara de meniu superioară: Aceasta conține opțiuni precum Undo, Redo, Zoom, Alerts, Preview, View Canvas in full screen, Enter Canvas Name și Save.
   

Componente

Diferitele componente din bara laterală stângă a Canvas builder sunt:

1. Date: Aceasta conține diversele entități legate de date precum Câmpuri, Liste asociate și Acțiuni (precum Edit, Clone, Delete etc.) și Butoane personalizate disponibile în acel layout particular.
   
2. Elemente: Aceasta include diversele entități vizuale prezente într-un layout precum Secțiune, Filă, Tabel, Text, Imagine, Iconiță și Linie.
   
3. Stil: Aceasta îți permite să setezi diferitele proprietăți legate de stil pentru o componentă (o entitate de date, un element, antet mobil, corp mobil sau subsol mobil). Proprietățile variază în funcție de componenta selectată.
4. Componente reutilizabile: Un set de componente incluzând elemente, stil și date poate fi salvat ca o singură componentă reutilizabilă. Aceasta poate fi reutilizată în alte layout-uri și module.
   

Date

1. Câmpuri: Acestea vor include câmpurile care sunt suportate în aplicația mobilă (Android sau iOS). Aceste câmpuri vor fi grupate conform secțiunilor din layout.
   
2. Liste asociate: Listele asociate suportate pe mobil, legate de modul, sunt listate aici.
   
3. Acțiuni: Acestea sunt diferitele butoane specifice mobilului (precum Edit, Clone, Delete etc.) disponibile în layout-ul tău.
   
4. Butoane: Acestea includ butoane personalizate create de tine sau disponibile ca parte a unei integrări.
   

Elemente

1. Secțiune: O secțiune este un bloc care va apărea pe pagina de detalii mobilă. Cu o secțiune, poți:
   
   
   
   
1. Adăuga componente de date și alte elemente în ea
   
2. Stiliza secțiunea
   
3. Trage marginile pentru a redimensiona caseta secțiunii.
   
4. Dă clic dreapta pe secțiune și efectuează o acțiune precum Inserare componentă de date, componenta fixă sau fluidă, Copiere sau Lipire stil, Adăugare stilizare condiționată (Canvas Rule), Blocare, Adăugare la Componente reutilizabile, Adăugare la Presetări sau Ștergere
   
2. File: Filele îți permit să organizezi câmpurile și listele asociate în ecrane diferite. Doar ecranul filei selectate este vizibil, în timp ce restul rămân ascunse. Acest lucru îți permite să încarci un volum mare de date într-un spațiu mic, facilitând totodată accesul utilizatorilor la acele date. Cu o filă, poți:
   
   
   
   
1. Stiliza fila conform preferințelor tale folosind panoul din stânga
   
2. Dă clic pe iconița + pentru a crea o filă personalizată sau a adăuga liste asociate ca file
   
3. Treci cu mouse-ul peste marginea stângă a unei file, dă clic pe iconița cu săgeată dublă și trage fila pentru a o rearanja
   
4. Treci cu mouse-ul peste o filă și dă clic pe x pentru a șterge o filă
   
5. Redenumește o filă personalizată dând clic pe ea și folosind panoul de stil din stânga
   
6. Dă clic dreapta pe filă pentru a Afișa iconița. Dacă o iconiță este deja adăugată, vei avea opțiunea de a Ascunde/Schimba iconița, Ascunde textul, Iconiță sus și Iconiță stânga
   
7. Dă clic dreapta în interiorul filei pentru a efectua acțiuni precum Inserare câmp, componentă fixă sau fluidă, Copiere/Lipire stil, Stilizare condiționată, Blocare, Adăugare la Componente reutilizabile, Adăugare la Presetări și Ștergere. Opțiunile disponibile vor depinde de locul în care dai clic în interiorul filei
   
8. Listele asociate adăugate la elementul de filă nu pot fi redenumite.
   
3. Tabel: Tabelele îți permit să afișezi informații în rânduri și coloane. Acest lucru oferă o interfață familiară pentru majoritatea utilizatorilor și ajută la economisirea spațiului pe pagină. Cu un tabel, poți:
   
   
1. Treci cu mouse-ul peste un rând și dă clic pe iconița + pentru a adăuga un rând. Implicit, vor exista două coloane. Nu poți adăuga coloane suplimentare la tabel. Treci cu mouse-ul peste tabel și dă clic pe iconița - pentru a șterge tabelul.
   
2. Dă clic dreapta pentru a Insera/Schimba câmpul, Componentă fixă sau fluidă, Copiere/Lipire stil, Stilizare condiționată, Blocare, Adăugare la Componente reutilizabile, Adăugare la Presetări sau Ștergere
   
3. Trage marginile pentru a redimensiona tabelul
   
4. Text: Aceasta îți permite să adaugi o casetă de text în pagina de detalii. De exemplu, poate fi folosită pentru a crea titluri, instrucțiuni, avertismente și așa mai departe. Cu o componentă de text, poți:
   
   
1. Trage marginile pentru a redimensiona caseta de text
   
2. Dă clic dreapta pentru a Clona, Componentă fixă/fluidă, Adăugare la Presetări și Ștergere
   
5. Imagini: Elementul Imagine poate fi folosit pentru a adăuga o imagine la o pagină de detalii a înregistrării mobile. Cu un element de imagine, poți:
   
   
1. Dă clic pe elementul de imagine și dă clic pe Upload Image în panoul din stânga pentru a adăuga imaginea. Poți adăuga o imagine folosind URL-ul acesteia.
   
2. După adăugarea imaginii, o poți redimensiona, ajusta alte stiluri precum chenar, umbră, rază, spațiere internă etc.
   
3. Dă clic dreapta pe imagine pentru a seta Raza și Ștergere.
   
6. Iconițe: Iconițele pot fi folosite în mai multe locuri ca un indiciu vizual ușor de recunoscut. De exemplu, pot fi folosite în locul etichetelor câmpurilor în multe locuri. Cu o iconiță, poți:
   
   
1. Alege dintr-o gamă largă de iconițe pentru a indica diferite entități
   
2. Dă clic dreapta pe iconiță pentru a Clona, Schimba iconița și Ștergere
   
7. Linie: Liniile pot fi folosite oriunde dorești să separi și organizezi conținutul, să aliniezi elementele și așa mai departe.
   
   

Stil

1. Fundal: Selectează o culoare de fundal introducând codul HEX, alegând din paletă sau din selectorul de culori.
   
   
   
   
2. Imagine: Bifează caseta Image și fă următoarele:
   
1. Adaugă o imagine: Dă clic pe Upload Image.
   
2. Introdu URL-ul imaginii și dă clic pe Insert.
   
   
3. Setează dimensiunea imaginii: Poți selecta Contain (ajustează pentru a se potrivi în dimensiunea componentei păstrând proporțiile), Original (dimensiunea originală a imaginii) sau Cover (întinde pentru a umple complet componenta fără a ține cont de proporții).
   
   
4. Setează repetarea imaginii: Dacă imaginea este mică și nu umple componenta, poți alege să repeți imaginea pe axa X, axa Y sau ambele axe. Poți, de asemenea, alege No Repeat pentru a preveni repetarea imaginii.
   
3. Gradient: Creează o tranziție lină între mai multe culori în fundal. Dă clic pe linie pentru a adăuga diverse culori și rotește selectorul pentru a seta unghiul gradientului.
   
   
   
   
4. Spațiere internă (Padding): Setează spațiul din jurul conținutului în interiorul unui chenar. Poți fie:
   
   
1. Selecta Padding same for all sides și mișca glisorul pentru a seta spațiul.
   
2. Debifa Padding same for all sides și seta spațiul pentru stânga, dreapta, sus și jos în pixeli.
   
5. Înălțime și Lățime: Setează înălțimea și lățimea componentei. Pentru unele componente, ai și opțiunea de a seta lățimea ca Auto pentru redimensionare bazată pe ecranul utilizatorului.
   
   
   Notă: Ai și opțiunea Constrain proportions pentru a te asigura că proporțiile componentei sunt menținute.
   
6. Chenar: Configurează chenarul componentei. Poți decide culoarea (cod hex sau selector de culori), stilul chenarului și dimensiunea acestuia (folosind glisorul sau introducând dimensiunea în pixeli).
   
   
7. Umbră: Creează o umbră pentru componentă alegând:
   
   
1. Poziția (X și Y): O valoare pozitivă a lui X mută umbra la dreapta componentei. O valoare negativă a lui X o mută la stânga. Pentru Y, o valoare pozitivă o mută în sus, iar o valoare negativă o mută în jos.
   
2. Estompare (Blur): Cu cât valoarea este mai mare, cu atât umbra va fi mai puțin definită.
   
3. Culoare: Alege culoarea umbrei.
   
   
8. Rază: Folosește aceasta pentru a rotunji colțurile componentei. Trage glisorul pentru a seta gradul de rotunjire pentru toate colțurile.
   
   
9. Margine: Setează cantitatea de spațiu alb din jurul unei componente. Poți fie:
   
   
1. Selecta Margin same for all sides și mișca glisorul pentru a seta spațiul.
   
2. Debifa Margin same for all sides și seta spațiul pentru stânga, dreapta, sus și jos în pixeli.
   
   
10. Vizibilitate: Afișează sau ascunde componenta.
    
    
11. Adâncime: Adu componenta deasupra sau mut-o sub alte elemente.
    
    
12. Text: Poți seta dimensiunea textului, greutatea, tipul de litere (majuscule/minuscule), alinierea și alte opțiuni legate de text.
    
    
13. Linie: Poți seta linia ca orizontală sau verticală, ajusta grosimea, stilul și culoarea.
    
    

1. Stări: Setează un stil diferit pentru același element bazat pe starea sa.
   
   De exemplu, când anumite câmpuri sunt goale, acțiunile asociate lor vor fi vizibile dar dezactivate. Stilizarea stării dezactivate este suportată pentru acțiuni specifice precum Call, Send email, Send message și Map locator (disponibile sub Data > Actions). Pentru a indica faptul că o acțiune importantă precum trimiterea de e-mailuri este dezactivată (deoarece nu există o valoare în câmpul de e-mail), ai putea adăuga un chenar roșu butonului Send email. Acest lucru va reaminti utilizatorului să completeze câmpul de e-mail.
   
   
2. Fila de stilizare condiționată: Setează stiluri diferite pentru componentă bazate pe datele din înregistrare. Criteriile sunt setate într-un Canvas Rule și o filă de stilizare condiționată este creată pentru fiecare regulă Canvas.
   

Reutilizarea stilurilor

Poți reutiliza stilurile adăugându-le la presetări. Pentru a face acest lucru:

1. Selectează elementul în Canvas și dă clic dreapta pe el.
   
2. Selectează Add to Presets.
   

1. Selectează elementul pe Canvas.
   
2. În panoul din stânga, dă clic pe Presets.
   
3. Selectează o presetare adăugată de tine sub Custom sau alege o presetare din Gallery.
   
   

1. Text, Etichetă și Valoare
   
2. Câmp
   
3. Secțiune
   
4. Filă
   
5. Tabel
   
6. Butoane
   

Componente reutilizabile

Poți alege componentele preexistente din galerie și le poți adăuga pe Canvas.

Notă

1. Poți salva până la 25 de componente reutilizabile.
   
2. O componentă poate fi reutilizată în șabloane create pentru diverse module CRM. Câmpurile create pentru un modul vor fi automat mapate și afișate cu câmpurile celuilalt modul.
   
3. Dacă câmpurile nu au putut fi potrivite, un tip de câmp similar disponibil în modulul ales va fi afișat, iar dacă tipul de câmp nu este disponibil în modulul de destinație, atunci va fi indicat ca N/A. În ambele cazuri, poți schimba tipul de câmp dând clic dreapta pe componentă.
   

Exportarea unui șablon Canvas

Odată ce ai creat un șablon Canvas, îl poți partaja cu utilizatorii din organizația ta sau cu utilizatorii din altă organizație CRM folosind o cheie unică. Poți iniția exportul fie din pagina principală Canvas, fie din interiorul Canvas builder-ului.

1. Navighează la Setup > Customization > Canvas.
   
2. Dă clic pe fila Detail View și selectează Mobile.
   
3. Treci cu mouse-ul peste o pagină de detalii a înregistrării mobile, dă clic pe iconița (...) și selectează Export Canvas.
   (sau)
   Dă clic pe iconița (...) și selectează Edit. În Canvas Builder, dă clic pe iconița (...) și selectează Export template.
4. În fereastra pop-up Canvas Template Export, dă clic pe Export pentru a genera cheia unică pentru acel Canvas.
   
5. Dă clic pe Copy pentru a copia cheia.
   
   

Această cheie este un cod alfanumeric care poate transmite interfața grafică a șablonului tău.

Notă:

Pentru a gestiona cheile Canvas