Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
# Usa il generatore di interfacce utente in Amazon Connect per le risorse nelle guide step-by-step
Puoi creare le risorse di visualizzazione utilizzate nelle step-by-step guide utilizzando il generatore di interfacce utente in Amazon Connect. Con il generatore di interfacce utente, puoi:
+ Trascinare e rilasciare i componenti dell’interfaccia utente su un canvas.
+ Organizzare il layout.
+ Modificare le proprietà e gli stili di ogni componente.
L'immagine seguente mostra un esempio della pagina UI Builder.
![\[L'interfaccia utente di UI Builder.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-updates.png)
1. Il pannello **Crea**, in cui puoi scegliere dalla libreria di componenti dell’interfaccia utente o utilizzare uno dei modelli disponibili.
1. I componenti sono raggruppati all’interno di container comprimibili. Trascina e rilascia questi componenti sul canvas della risorsa di visualizzazione.
1. Il canvas della risorsa di visualizzazione.
1. Il pannello **Personalizza** e l’icona delle impostazioni globali. Qui puoi impostare le proprietà globali della pagina, come colonne, allineamento e colori. È anche il luogo in cui si impostano le proprietà per i singoli componenti presenti nel canvas.
L’immagine seguente mostra un esempio della scheda **Proprietà** per il componente **Indirizzo**. Quando si seleziona l’icona dinamica (il fulmine), il campo viene compilato in runtime.
![\[Il pannello Personalizza, la scheda Proprietà, l’icona dinamica.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-properties.png)
## Accedi al generatore di interfacce utente
1. Accedi al sito web di Amazon Connect amministrazione all'indirizzo https://*instance name*.my.connect.aws/. Utilizza un account amministratore o un account che dispone dell’autorizzazione **Canali e flussi - Viste** nel suo profilo di sicurezza.
1. **Nel sito Web di amministrazione, scegli Gestione dell'interfaccia utente. Amazon Connect **
1. Scegli **Crea visualizzazione**. Nella finestra di dialogo **Crea visualizzazione**, specificate un nome per la vista e selezionate il **tipo di scopo**. Le viste hanno due scopi:
+ **Visualizzazioni guida**: utilizzate per strutturare flussi di lavoro in una o più fasi che possono essere visualizzati da agenti, clienti finali o manager per accedere a dati specifici dei contatti o di terze parti in un'interfaccia unificata.
+ **Visualizzazioni dell'area di lavoro**: utilizzate per creare pagine Workspace come la home page, queste visualizzazioni forniscono componenti e funzionalità generali dell'interfaccia indipendentemente dalla gestione dei contatti.
1. Viene visualizzata la pagina UI Builder. Inizia rapidamente con i modelli o crea le tue visualizzazioni partendo da zero.
1. Scegli **Crea nuova**. Viene visualizzata una pagina UI Builder vuota, come mostrato nell'immagine seguente.
![\[Una pagina UI Builder vuota.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-blank-page.png)
# Libreria di componenti UI per UI Builder in Amazon Connect
Tutti i componenti di UI Builder sono descritti nella [documentazione dei componenti dell'interfaccia utente di Amazon Connect](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page). Questa documentazione mostra i singoli componenti dell'interfaccia utente che puoi utilizzare in UI Builder e come configurarli.
È possibile accedere ai componenti della libreria nel generatore di interfaccia utente nel pannello **Crea**, la scheda **Libreria**. L’immagine seguente mostra un esempio della scheda **Libreria** e dei componenti **Container**.
![\[Il pannello di creazione dell'interfaccia utente, la scheda Libreria, i componenti dell'interfaccia utente.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/user-interface-component-library-example.png)
## Usa Container per spostare e organizzare i componenti
I container sono un elemento costitutivo fondamentale per creare viste. È possibile spostare i componenti dell’interfaccia utente (inclusi altri container) in un container per raggrupparli logicamente e visivamente sulla pagina.
Per mantenere il contenuto della pagina relativamente coerente durante la personalizzazione delle impostazioni di visualizzazione di primo livello, è consigliabile utilizzare i container in tutte le viste. I container sono inoltre dotati di layout a colonne. Il layout a colonne consente di organizzare i contenuti all’interno di un container.
## Creazione di un modulo
Per creare un modulo da far compilare e inviare agli agenti o ai clienti, utilizza il componente [Modulo](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all). Puoi eseguire una delle seguenti operazioni:
+ Trascina e rilascia un componente **Modulo** sul canvas dalla libreria dell’interfaccia utente.
+ Oppure, dalla scheda **Modelli**, seleziona il modello **Esempio di modulo**. Utilizza un componente modulo.
Un componente [Modulo](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all) è un tipo speciale di container in cui è possibile inserire campi di input e aggiungere un pulsante **Invio**. Quando un utente che interagisce con una guida preme il pulsante **Invio**, Amazon Connect trasferirà tutti i valori inseriti nei campi del modulo al flusso. A quel punto del flusso, puoi personalizzare la tua logica e i tuoi send/retrieve dati aziendali per adattarli a sistemi di terze parti utilizzando il [Funzione AWS Lambda ](invoke-lambda-function-block.md) blocco.
L’immagine seguente mostra un esempio di componente **Modulo** con etichette segnaposto e un pulsante di invio.
![\[Un componente Modulo con etichette segnaposto e un pulsante di invio.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png)
# Configurazione dei layout delle colonne, dei colori e delle definizioni dei dati in una vista
Questo argomento spiega come configurare layout di colonna, colori e campi dati dinamici nel generatore di interfaccia utente di Amazon Connect per personalizzare le viste per gli agenti dei contact center.
Nel generatore di interfaccia utente, il pannello **Personalizza** si trova sul lato destro, come mostrato nell'immagine seguente.
![\[Un esempio del pannello Personalizza nell'interfaccia utente, l'icona delle impostazioni globali.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-customize-panel-example.png)
Utilizza il pannello **Personalizza** per configurare:
+ Impostazioni globali per l’intera risorsa di visualizzazione.
+ Impostazioni locali a livello di componente. Ogni componente dispone di un proprio insieme di proprietà.
Utilizza il pannello **Personalizza** per impostare una serie di impostazioni per la vista, tra cui:
+ Layout delle colonne
+ Colori
+ Mappatura dinamica dei dati
+ Dati campione
+ Definizioni di dati statici
## Configurazione di layout e colori globali per una vista
Per configurare le impostazioni globali, accedi al pannello **Personalizza**, quindi scegli l’icona delle impostazioni globali, come mostrato nell’immagine seguente.
![\[Il pannello Personalizza, l’icona delle impostazioni globali.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-properties-global-settings-example.png)
Utilizza le impostazioni globali per impostare il layout generale e i colori della vista:
+ Utilizza la sezione **Allineamento** per specificare la posizione relativa dei componenti a sinistra, al centro o a destra della vista.
+ Scegli tre campi di colore:
+ Colore primario
+ Colore secondario
+ Colore neutro
Ogni componente della vista applica queste impostazioni per impostazione predefinita. Tuttavia, durante la personalizzazione di un componente, è possibile sovrascrivere queste impostazioni di colore globali.
## Layout delle colonne
La risorsa di visualizzazione utilizza un modello flexbox con 12 colonne. I componenti occupano una posizione relativa l’uno rispetto all’altro. Non sono posizionati sul canvas in modo perfetto, a livello di pixel. Ciò consente alla vista di aumentare verticalmente e ridurre le dimensioni in modo reattivo, senza perdere la composizione.
Nelle impostazioni globali puoi determinare la modalità di raggruppamento delle colonne desiderata. Ad esempio, nella sezione **Colonna**, puoi dividere la vista in due sezioni da sei colonne ciascuna, come mostrato nell’immagine seguente.
![\[Una sezione Colonna, divisa in due sezioni da sei colonne ciascuna.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-1.png)
L’immagine seguente mostra un esempio dell’aspetto del layout per un agente.
![\[Una vista divisa in due sezioni di sei colonne, come apparirebbe a un agente.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-1.png)
Puoi anche utilizzare il cursore **Personalizza** per modificare i rapporti di questi raggruppamenti. Ad esempio, è possibile impostarlo in modo che il lato sinistro della vista sia composto da quattro colonne e il lato destro da otto, come mostrato nell’immagine seguente:
![\[Un layout con quattro colonne su un lato e otto sull’altro.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-2.png)
L’immagine seguente mostra un esempio di come questo layout potrebbe apparire all’utente.
![\[Una vista di quattro colonne su un lato e una sull’altra, come apparirebbe a un agente.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-2.png)
# Configura campi dinamici nell’interfaccia utente del generatore di interfaccia utente no code in Amazon Connect
Questo argomento spiega come configurare i campi dinamici nei componenti per visualizzare i dati di runtime anziché i valori codificati durante la creazione di interfacce per agenti e clienti utilizzando il generatore di interfaccia utente no code in Amazon Connect.
Potresti avere scenari in cui desideri che i dati visualizzati a un agente o un cliente vengano compilati dinamicamente anziché codificati. Ad esempio, se stai creando una schermata pop-up, puoi visualizzare il nome e l’ID del profilo del cliente. È necessario che i dati siano dinamici perché i valori di questi campi cambiano da contatto a contatto.
Per compilare dinamicamente un campo componente:
1. Apri la scheda delle proprietà per quel componente.
1. Seleziona l’icona dinamica (l’icona del fulmine) che appare accanto al campo che desideri rendere dinamico.
I campi più comuni che richiedono valori dinamici sono:
+ Il campo **Valore** per i campi di visualizzazione.
+ Il **DefaultValue**campo negli input del modulo.
È tecnicamente possibile determinare dinamicamente in fase di runtime qualsiasi campo visibile e nascosto a un agente. Questo è il motivo per cui ogni campo nella scheda **Proprietà** può essere impostato su dinamico (l’icona del fulmine).
Ad esempio, guardate il **AttributesBar**componente nell'immagine seguente.
![\[Un componente della barra degli attributi, con il valore impostato su dinamico.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-attributebar-example.png)
+ L’etichetta dell’attributo 1 è definita staticamente come **Nome del cliente**.
+ Il **Valore** dell’attributo è impostato su dinamico (è selezionata l’icona del fulmine).
Con queste impostazioni, il valore di **AttributesBar**è determinato dai dati che vengono passati al [Mostra vista](show-view-block.md) blocco in fase di esecuzione.
Quando un campo è impostato su dinamico, il relativo valore statico viene sostituito con un riferimento dinamico. Sotto il campo viene visualizzata una sezione **Dati di esempio**. Questa sezione viene utilizzata per definire [dati di esempio](no-code-ui-builder-sample-data.md).
Il riferimento dinamico riflette la struttura dei dati prevista dal blocco [Mostra vista](show-view-block.md) durante l’impostazione dei dati di runtime. Ad esempio, considerate il **valore** dell'attributo 1 nel [AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)componente, mostrato nell'immagine seguente.
![\[Il valore dell'attributo 1 nel AttributesBar componente quando è dinamico.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-dynamicicon.png)
+ Se impostato su dinamico, il campo diventa `$.AttributeBar_1.Attributes[0].Value` dove `AttributeBar_1` è l’ID del componente.
+ Ciò indica che nel blocco [Mostra vista](show-view-block.md), il campo `AttributeBar_1` dovrebbe ricevere un oggetto.
+ L’oggetto contiene un array `Attributes` in cui il primo elemento (`[0]`) dovrebbe essere un oggetto con un campo `Value`.
È possibile modificare i riferimenti dinamici per motivi di chiarezza o riutilizzabilità. I riferimenti dinamici possono essere condivisi tra più campi e componenti all’interno della vista. Ad esempio, nell'immagine seguente del [AttributeBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)componente, aggiorniamo il riferimento dinamico a`$.myAttributeValue`. Il blocco [Mostra vista](show-view-block.md) ha ora un campo `myAttributeValue` che prevede l’immissione di una stringa.
![\[Le proprietà del AttributeBar componente, un valore dinamico.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-dynamic-example2.png)
**Importante**
Il tipo di riferimento dinamico deve corrispondere al tipo di campo previsto. Ad esempio, non è possibile utilizzare un riferimento dinamico basato su stringhe in un campo booleano. L’immagine seguente mostra un messaggio di errore di esempio quando il riferimento dinamico non corrisponde.
![\[Il pannello Personalizza, un messaggio di errore perché il riferimento dinamico non corrisponde al tipo previsto nel campo.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-4.png)
È anche possibile impostare tutte le proprietà di un attributo in un componente come dinamiche. Nell’immagine seguente, tutto ciò che riguarda questo attributo, inclusa l’etichetta, viene determinato in fase di runtime in base ai valori passati nel blocco [Mostra vista](show-view-block.md). Ad esempio, **Nome cliente** è ora costituito da dati di esempio che puoi utilizzare per avere un’idea di ciò che vedrà l’agente quando utilizza una guida, ma questo valore non è presentabile all’agente.
![\[Il pannello Personalizza, il Nome del cliente come dati di esempio.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-5.png)
Per alcuni componenti, ad esempio [AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes), puoi anche impostare tutte le proprietà del componente come dinamiche. Ad esempio, con AttributeBar, puoi impostare scegli l'icona dinamica (il fulmine) per rendere dinamici tutti gli attributi. Gli attributi sono determinati da ciò che viene passato al blocco [Mostra vista](show-view-block.md) in fase di runtime.
![\[Tutte le proprietà di AttributeBar sono impostate su dinamiche.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-6.png)
# Imposta le azioni che appaiono come rami di flusso nel blocco Mostra vista
Nelle step-by-step guide, gli utenti devono scegliere un pulsante per passare a una nuova pagina nelle guide. Puoi configurare questi pulsanti nel generatore di interfaccia utente impostando un'azione per ogni pulsante. Ad esempio, puoi configurare un pulsante per inviare un modulo.
Quando un utente sceglie il pulsante in fase di runtime, la guida invia un messaggio di risposta ai flussi. Il valore **Azione** determina il percorso di diramazione dal blocco [Mostra vista](show-view-block.md).
Ad esempio, una vista può avere tre pulsanti con azioni diverse. Queste azioni appaiono come percorsi di ramificazione diversi sul blocco [Mostra vista](show-view-block.md), consentendo di configurare la logica di ramificazione appropriata nei flussi della guida.
L’immagine seguente mostra un esempio della sezione **Azione** nel pannello **Personalizza** del generatore no code.
![\[La sezione Operazioni del pannello Personalizza nel generatore di interfaccia utente no code.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-setting-actions-in-flows-example.png)
# Salva e pubblica visualizzazioni da utilizzare in una step-by-step guida in Amazon Connect
Le risorse della vista supportano il controllo delle versioni. Il controllo delle versioni consente di controllare e persino di riutilizzare le iterazioni precedenti di una visualizzazione creata e utilizzata nelle guide. and/or step-by-step
1. Inserisci un nome per la vista, se non è già stato fatto. Non puoi salvare una vista finché non le viene assegnato un nome.
1. Dopo aver modificato la vista, scegli **Salva** per aggiornare la risorsa.
1. **Quando sei pronto per utilizzare una vista in un flusso step-by-step guida, scegli Pubblica.** La vista verrà ora visualizzata nel blocco [Mostra vista](show-view-block.md) e potrai utilizzarla in un flusso
Solo le versioni della vista che sono state pubblicate vengono visualizzate nel blocco [Mostra vista](show-view-block.md) per l’utilizzo in un flusso.
# Modelli di UI Builder per iniziare rapidamente
Il generatore di interfacce utente include modelli che puoi utilizzare per precompilare la tua tela con componenti. Per accedere ai modelli:
1. Nel generatore no code, apri il pannello **Crea**.
1. Scegliere la scheda **Templates (Modelli)**.
1. Scegli il modello che desideri utilizzare e trascinalo nel canvas della vista.
Dopo che il modello è apparso nel canvas, puoi:
+ Aggiungere altri componenti
+ Eliminare componenti
+ Applicare qualsiasi altro tipo di configurazione con una risorsa di visualizzazione creata da zero
Se hai già inserito componenti dell’interfaccia utente nel canvas, questi componenti vengono sovrascritti e il modello prende il loro posto. Queste modifiche vengono completate dopo aver **salvato** la risorsa di visualizzazione. Se utilizzi un modello per errore, puoi chiudere la pagina e riaprirla per tornare alla versione salvata più recente della risorsa di visualizzazione.
L’immagine seguente mostra un esempio di alcuni dei modelli disponibili nel pannello **Crea**: Screen Pop, Disposition, Payment
![\[Alcuni dei modelli disponibili nel pannello Crea: Screen Pop, Disposition, Payment.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-templates-example.png)
# Utilizzo della funzionalità Screen Pop delle applicazioni di terze parti nello spazio di lavoro dell’agente di Amazon Connect
Per la funzionalità screen pop delle applicazioni di terze parti, puoi utilizzare step-by-step le guide o il blocco delle app. Per ulteriori informazioni, consulta [Accesso alle applicazioni di terze parti nel workspace degli agenti](3p-apps-agent-workspace.md). Quando entra il contatto, anzitutto si apre la scheda **Guide** nello spazio di lavoro dell’agente. È possibile [configurare le step-by-step guide](how-to-invoke-a-flow-sg.md) utilizzando i flussi.
**Nota**
Quando configuri una vista:
Assicurati che il nome dell'app registrato in corrisponda Console di gestione AWS esattamente al nome dell'app che stai fornendo al componente [Application](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-application--with-agent-workspace-example) and/or App Launch.
Se riscontri degli errori e ritieni che i nomi corrispondano, modifica il nome dell’applicazione della Console di gestione AWS . Assicurati che non siano presenti spazi iniziali o finali.
+ Con il componente [Applicazione](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-application--with-agent-workspace-example), stai incorporando l’applicazione di terze parti nelle Guide. L’applicazione viene visualizzata nella prima scheda quando entra il contatto.
+ Con il componente di lancio dell’app, stai configurando l’applicazione in modo che si apra come scheda nello spazio di lavoro dell’agente. Puoi attivare l’apertura automatica, la Guida verrà messa in primo piano come prima scheda e l’applicazione si aprirà come un’altra scheda.
+ Puoi sempre utilizzare il componente [Link](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-link--default-case) con apertura automatica per configurare qualsiasi link del browser in modo che si apra in una nuova finestra.
Hai la possibilità di fornire un percorso per indicare una destinazione o un parametro più specifico per il contatto. Una volta fornito il percorso, questo verrà abbreviato nel dominio. Fornisci una barra alla fine del dominio dell’app.
**Esempio 1 (consigliato)**:
```
App Domain registered in Console di gestione AWS: https://example.com/
Path: cats/siamese
Guides will attempt to render: Domain https://example.com/ + Path cats/siamese
https://example.com/cats/siamese
Success if website exists!
```
**Esempio 2:**
```
App Domain registered in Console di gestione AWS: https://example.com/dogs/
Path: cats/siamese
Guides will attempt to render: Domain https://example.com/ + Path cats/siamese
https://example.com/cats/siamese
Fails because only subdomains of https://example.com/dogs/ are allowed
```
**Esempio 3:**
```
App Domain registered in Console di gestione AWS: https://example.com/cats
Path: cats/siamese
Guides will attempt to render: Domain https://example.com/ + Path cats/siamese
https://example.com/cats/siamese
Success if website exists!
```
L’immagine seguente mostra un componente di lancio dell’app che è stato rilasciato sul canvas. Il pannello **Personalizza** mostra un esempio di specificazione del nome e del percorso dell’app.
![\[Il pannello Personalizza, un esempio di nome e percorso dell’app.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-app-integration-1.png)
L'immagine seguente mostra un [Blocco di flusso in Amazon Connect: Imposta flusso di eventi](set-event-flow.md) blocco di esempio che viene aggiunto al flusso e configurato nell'hook di eventi dell'**DefaultAgentinterfaccia utente**.
![\[Un blocco Set event flow configurato per l'hook di eventi dell' DefaultAgentinterfaccia utente.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-app-integration-2.png)
# Utilizzo dei dati di esempio per visualizzare in anteprima la tua vista in Amazon Connect
Puoi utilizzare dati di esempio per vedere come apparirà la vista all’utente. Puoi anche visualizzare campi di dati determinati dinamicamente in fase di runtime. Quando un campo è impostato su dinamico (è selezionato il fulmine), i dati di esempio possono essere inseriti nel campo di input nella sezione **Dati di esempio** di quella proprietà. Questi dati di esempio servono solo a scopo di visualizzazione. Viene visualizzato solo nel generatore di interfacce utente Amazon Connect.
Ad esempio, la seguente immagine mostra un esempio di **Modulo di indirizzo postale**.
![\[Le sezioni DefaultValue e Dati di esempio del pannello Personalizza.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/no-code-ui-builder-sample-data-example.png)
+ L’**indirizzo** è un valore dinamico predefinito. In fase di runtime viene compilato con l’indirizzo individuato nel profilo del cliente.
+ Per vedere come l’interfaccia utente finale appare all’agente, puoi inserire un valore di testo predefinito.
+ Il valore `7 W 34th St` serve solo a scopo di visualizzazione nel sito web di amministrazione di Amazon Connect . Non appare all’agente.
# Tematizzazione di aree di lavoro con viste
Quando le viste vengono utilizzate nell'area di lavoro o nell'area di lavoro degli agenti con temi personalizzati, i componenti dell'interfaccia utente possono ereditare i temi dell'area di lavoro o utilizzare uno stile personalizzato. Tieni a mente alcuni principi:
+ Quando viene impostato un tema dell'area di lavoro, il colore primario globale, il colore secondario, il colore predefinito e i componenti di View erediteranno lo stile a livello di area di lavoro per impostazione predefinita quando gli utenti non apportano modifiche personalizzate.
+ Quando una vista ha stili globali personalizzati come colori primari, secondari e predefiniti nel generatore dell'interfaccia utente, lo stile personalizzato avrà la precedenza sui temi dell'area di lavoro.
+ Quando i componenti hanno stili personalizzati definiti nel generatore dell'interfaccia utente, lo stile del componente avrà la precedenza sul tema dell'area di lavoro.
+ I colori dei componenti personalizzati vengono mantenuti in diverse aree di lavoro.
# Crea in modo condizionale UIs con Views
La funzionalità delle condizioni dell'interfaccia utente di Views consente ai clienti di modificare le proprietà dei componenti all'interno di una View in base all'interazione dell'utente con altri componenti all'interno della stessa View. Ad esempio, quando un utente aggiorna un valore di input nel componente A, ad esempio un menu a discesa, il componente B, come un contenitore, verrà nascosto nella View. Le condizioni consentono di creare esperienze personalizzate per agenti, clienti finali o supervisori in base alle esigenze specifiche dell'attività o dell'interazione.
Per creare una condizione dell'interfaccia utente, visita l'UI Builder e trascina un componente supportato sull'area di lavoro. Visita il pannello delle impostazioni del componente sul lato destro dello schermo e fai clic sulla scheda delle condizioni dell'interfaccia utente. La scheda delle condizioni dell'interfaccia utente è organizzata per raccogliere i seguenti input:
1. Tipo di modifica: la proprietà del componente selezionato che desideri aggiornare in base a una condizione
+ Visibilità: rende visibile o nascosto un componente
+ DefaultValue: aggiorna i valori predefiniti di un componente
+ Obbligatorio: aggiorna le proprietà richieste di un componente
+ Disabilita: rende un componente disabilitato o abilitato
+ Opzioni: aggiorna le opzioni disponibili per la selezione da un componente da parte dell'utente
1. Seleziona componente di attivazione: il componente che attiverà la condizione applicata
1. Applica condizione quando: L'operazione è stata valutata in base al valore del componente di attivazione
1. Applica quando il valore corrisponde: il valore del componente di attivazione che verrà valutato per attivare la condizione
1. Applica risultati: la modifica desiderata al componente selezionato una volta soddisfatta la valutazione sul componente trigger
Quando vengono impostate delle condizioni su un componente, questo verrà delineato con linee tratteggiate nell'interfaccia utente Builder. Puoi rimuovere le condizioni facendo clic sull'icona del cestino nella scheda delle condizioni nel pannello delle impostazioni del componente.