Widget Campo di testo (con tema applicabile)
Il widget Campo di testo è un elemento di input comunemente utilizzato nei moduli. Questo widget permette agli utenti di digitare testo in un mashup. È possibile impostare o recuperare il testo all'interno del campo utilizzando la proprietà Text. A differenza del widget Area di testo, il widget Campo di testo è limitato a una singola riga. Oltre alle proprietà comuni del widget, è possibile configurare il widget utilizzando le proprietà nei modi descritti di seguito.
• Configurare il numero massimo di caratteri e aggiungere un contatore.
• Utilizzare il testo come input per servizi dati, funzioni e altri widget.
• Mostrare il testo del suggerimento quando non è impostato un valore.
• Aggiungere un pulsante di testo non crittografato.
• Attivare la modalità di sola lettura.
• Nascondere l'input per informazioni sensibili quali le password.
• Definire una serie di schemi per assicurarsi che l'input sia in un formato specifico.
 |
Il widget Campo di testo è disponibile come widget standard nella piattaforma e come parte Web che può essere importata da un SDK.
|
È possibile utilizzare gli eventi del widget seguenti per eseguire funzioni o servizi dati quando il widget viene aggiornato in fase di esecuzione:
• EnterKeyPressed - Viene attivato quando si preme il tasto INVIO.
• FocusLost - Viene attivato quando si fa clic su un'area esterna al widget o si preme il tasto TAB.
Utilizzo degli eventi
Il widget Campo di testo attiva due eventi associabili:
• Changed - Viene attivato quando viene aggiunto o rimosso un carattere.
• EnterKeyPressed - Viene attivato quando un utente preme il tasto INVIO.
È possibile utilizzare gli eventi del widget per attivare funzioni, servizi dati o servizi all'interno dei widget. Ad esempio, è possibile associare gli eventi a una funzione di convalida per convalidare l'input mentre viene digitato o quando viene premuto il tasto INVIO.
Attivazione della modalità di sola lettura
È possibile attivare la proprietà ReadOnly per impedire modifiche al testo in fase di esecuzione. Ad esempio, è possibile utilizzare questa proprietà per impedire le modifiche finché non viene attivato un pulsante o viene selezionata una casella di controllo nel mashup. Se la funzionalità di sola lettura è attivata, è possibile selezionare e copiare il testo, ma non è possibile modificare, tagliare o eliminare il valore corrente. Per modificare il valore del testo di un campo di testo di sola lettura, immettere un valore per la proprietà Text in fase di progettazione. È inoltre possibile associare un'origine dati alla proprietà per modificare il valore del testo in fase di esecuzione.
Impostazione di un limite per il numero di caratteri
È possibile limitare l'input dal campo di testo a un numero specifico di caratteri in uno dei modi descritti di seguito.
• Impostare la proprietà MaxNumberOfCharacters su un valore numerico qualsiasi. Per default, il campo di testo supporta un massimo di 100 caratteri.
• Definire una serie di schemi utilizzando la proprietà Mask. Per impostare il limite di caratteri, viene utilizzato il numero di caratteri speciali all'interno della serie.
Aggiunta di un contatore al campo di testo
Per aggiungere un contatore che mostra il numero di caratteri nel campo di testo, impostare la proprietà Counter su true. La proprietà MaxNumberOfCharacters viene utilizzata per impostare il limite di caratteri, inclusi gli spazi vuoti. Nell'immagine seguente viene illustrato il widget Campo di testo con un contatore visibile e un numero massimo di caratteri pari a 10:
Al raggiungimento del limite di caratteri, il colore del contatore cambia:
Aggiunta di un pulsante di testo non crittografato
È possibile attivare la proprietà ShowClearText per aggiungere un pulsante di testo alla casella di input del widget. Il pulsante viene visualizzato automaticamente sul lato destro del widget quando il campo di input include un valore. Ciò consente agli utenti di rimuovere rapidamente qualsiasi testo esistente all'interno del widget.
Aggiunta di un'icona
È possibile utilizzare la proprietà Icon per visualizzare un'icona nel campo di testo. L'icona viene visualizzata automaticamente a sinistra del widget. È possibile selezionare un'icona dalle icone SVG fornite disponibili nella piattaforma. Per ulteriori informazioni su queste icone, vedere Utilizzo delle icone SVG.
Configurazione della serie di input del campo di testo
È possibile utilizzare la proprietà Mask per specificare uno schema di input per i caratteri numerici, alfabetici e alfanumerici. Quando si definisce uno schema, vengono aggiunte guide segnaposto alla casella di input. Le guide sono linee che vengono utilizzate per indicare lo schema del testo che un utente può immettere nel campo di testo. Oltre allo schema richiesto, la proprietà imposta il numero di caratteri all'interno del campo di testo. È possibile creare schemi utilizzando i seguenti caratteri speciali:
• a - Alfabetico
• 9 - Numerico
• * - Alfanumerico
Per creare uno schema, combinare i caratteri speciali in una stringa che rappresenti l'input richiesto. Ad esempio, gli schemi seguenti rappresentano diversi tipi di input:
• 9999 - Un numero di quattro cifre
• ***** - Cinque caratteri alfanumerici
• 99–aa - Un numero a due cifre, seguito da un trattino separatore e da due caratteri alfabetici.
L'immagine seguente mostra le guide per uno schema numerico 999–999–999–999 che contiene quattro numeri a tre cifre in fase di esecuzione:
Lo schema viene utilizzato per impostare il formato del numero in aggiunta al numero di cifre. In questo esempio è possibile digitare qualsiasi numero a 12 cifre, ad esempio: 256120233234. Durante la digitazione, le guide di sottolineatura (_) vengono sostituite da numeri.
Le guide dell'indicatore vengono visualizzate in base al numero totale di caratteri impostati all'interno dello schema durante la fase di progettazione. Quando si digita un numero costituito da un numero di cifre inferiore rispetto allo schema, l'input rimane incompleto. È necessario utilizzare la maschera per definire schemi con un numero specifico di caratteri, ad esempio numeri di telefono o codici postali. Evitare di utilizzare una maschera quando l'input non è costituito da un numero specifico di caratteri, ad esempio nel caso di un importo monetario.
|
|
È possibile utilizzare diversi tipi di simboli quali punti, trattini, barre e altro come separatori tra caratteri.
|
Attivazione della modalità di input numerico
È possibile configurare il widget Campo di testo per limitare l'input ai soli numeri. In questo modo si garantisce che gli utenti immettano dati numerici validi e si semplifica la convalida. Per attivare l'input numerico per il campo di testo, selezionare il widget, quindi nel pannello Proprietà attivare la proprietà NumericInputMode. Vengono visualizzate proprietà di configurazione aggiuntive per questa modalità.
Utilizzare AllowDecimals per consentire agli utenti di immettere valori decimali e AllowNegativeValues per consentire numeri negativi. Impostare DecimalPlaces per definire il numero di cifre che possono essere visualizzate dopo il separatore decimale. Per limitare l'intervallo di valori, utilizzare le proprietà di convalida MinValue e MaxValue. È inoltre possibile personalizzare i messaggi visualizzati quando gli utenti immettono valori al di fuori dell'intervallo consentito utilizzando MinValueFailureMessage e MaxValueFailureMessage.
Per controllare il formato numerico, utilizzare la proprietà FormatToken. È inoltre possibile impostare la proprietà StepSize per controllare quanto cambia il valore quando gli utenti utilizzano i tasti di scelta rapida. La proprietà NumericValue consente di associare il campo a un'origine dati in modo da poter monitorare o aggiornare dinamicamente il valore.
Ridimensionamento del widget Campo di testo
È possibile controllare se gli utenti possono ridimensionare un widget Campo di testo orizzontalmente utilizzando la proprietà AllowResize. Quando questa proprietà è impostata su true, il widget visualizza una maniglia di ridimensionamento orizzontale, consentendo agli utenti di regolarne la larghezza direttamente nell'interfaccia del mashup. Questo conferisce maggiore facilità di utilizzo nei layout in cui è utile disporre di uno spazio di input flessibile.
La tabella riportata di seguito contiene un elenco delle proprietà del widget Campo di testo.
|
Nome proprietà
|
Descrizione
|
Tipo di base
|
Valore di default
|
Associabile? (Y/N)
|
Localizzabile? (Y/N)
|
||
|---|---|---|---|---|---|---|---|
|
Text
|
Testo visualizzato nel campo di testo.
|
STRING
|
n/d
|
Y
|
Y
|
||
|
Label
|
Testo visualizzato nell'etichetta del campo di testo.
|
STRING
|
n/d
|
Y
|
Y
|
||
|
AllowResize
|
Aggiunge un controllo che consente agli utenti di ridimensionare il campo di testo in fase di esecuzione.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
Counter
|
Conta e visualizza il numero di caratteri immessi nel campo di testo.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
MaxNumberOfCharacters
|
Consente di impostare un numero massimo di caratteri nel campo di testo.
|
NUMBER
|
100
|
Y
|
N
|
||
|
NumericInputMode
|
Attiva la modalità di immissione numerica per il widget. In questa modalità sono supportati solo valori numerici.
|
Imposta il widget in modalità di immissione numerica. In questo caso sono consentiti solo caratteri numerici.
|
False
|
N
|
N
|
||
|
NumericValue
|
Imposta o recupera il valore numerico del widget.
|
NUMBER
|
0
|
Y
|
N
|
||
|
AllowDecimals
|
Consente l'utilizzo di valori decimali quando si utilizza la modalità di immissione numerica.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
AllowNegativeValues
|
Consente l'utilizzo di valori negativi quando si utilizza la modalità di immissione numerica.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
DecimalPLaces
|
Imposta il numero di cifre decimali consentite per il valore numerico.
|
NUMBER
|
0
|
N
|
N
|
||
|
FormatToken
|
Immettere un token di localizzazione nel formato del valore numerico. Quando è impostato un token di formato, sostituisce le proprietà AllowDecimals, AllowNegativeValues e DecimalPlaces. Per ulteriori informazioni sui formati supportati, fare riferimento all'oggetto Intl.NumberFormat in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
|
STRING
|
n/d
|
N
|
N
|
||
|
StepSize
|
Controlla l'incremento del valore numerico quando si utilizzano i tasti di scelta rapida.
|
NUMBER
|
1
|
N
|
N
|
||
|
HintText
|
Visualizza il testo segnaposto che spiega cosa inserire nel campo.
|
STRING
|
n/d
|
N
|
N
|
||
|
Disabled
|
Utilizzare questa proprietà per disattivare il widget nel mashup. Il widget viene visualizzato nel mashup, ma non è possibile farvi clic.
|
BOOLEAN
|
False
|
Y
|
N
|
||
|
ReadOnly
|
Consente di impostare il campo di testo come di sola lettura e impedisce all'utente di modificare il testo.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
Password
|
Consente di nascondere quanto immesso nel campo di testo.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
ShowClearText
|
Consente di aggiungere un pulsante Cancella all'interno del campo di testo, che permette all'utente di cancellare il testo dal campo in fase di esecuzione quando si fa clic sul pulsante.
|
BOOLEAN
|
True
|
N
|
N
|
||
|
LabelAlignment
|
Consente di allineare l'etichetta a sinistra, a destra o al centro.
|
STRING
|
Left
|
N
|
N
|
||
|
TextAlignment
|
Consente di allineare il testo a sinistra o a destra nel campo.
|
STRING
|
Left
|
N
|
N
|
||
|
Mask
|
Consente di impostare caratteri predefiniti nel campo di testo. Nel campo di configurazione delle proprietà utilizzare "a" per impostare voci alfabetiche, "9" per le voci numeriche e "*" per quelle alfanumeriche.
|
STRING
|
n/d
|
N
|
N
|
||
|
TabSequence
|
Sequenza in cui i widget vengono evidenziati quando l'utente preme il tasto TAB.
|
NUMBER
|
n/d
|
N
|
N
|
||
|
CustomClass
|
Consente di definire la classe CSS per il div. superiore del widget. È possibile inserire più classi, separate da uno spazio.
|
STRING
|
n/d
|
Y
|
N
|
||
|
EnterKeyPressed
|
Evento che viene attivato quando si preme il tasto INVIO durante la modifica del valore di testo.
|
n/d
|
n/d
|
Y
|
N
|
||
|
FocusLost
|
Evento che viene attivato quando un utente cambia la selezione premendo il tasto TAB o facendo clic su un'area esterna al widget durante la modifica del valore di testo.
|
n/d
|
n/d
|
Y
|
N
|
||
|
Changed
|
Evento che viene attivato quando i dati di questo widget vengono modificati.
|
n/d
|
n/d
|
Y
|
N
|
||
|
ResetToDefaultValue
|
Ripristina i valori di default degli input di questo widget.
|
n/d
|
n/d
|
Y
|
N
|
||
|
Width
|
Larghezza del widget.
|
NUMBER
|
273
|
N
|
N
|
||
|
Height
|
Altezza del widget. Viene calcolato automaticamente per default. L'altezza aumenta se si include un'etichetta all'interno del campo di testo.
|
NUMBER
|
Ridimensionamento automatico
|
N
|
N
|
||
|
TooltipField
|
Imposta il testo di una descrizione comando che viene visualizzata quando si posiziona il puntatore del mouse sul widget.
|
STRING
|
n/d
|
Y
|
Y
|
||
|
TooltipIcon
|
Imposta l'immagine di un'icona per la descrizione comando del widget.
È possibile aggiungere un'immagine o specificare un percorso URL dell'immagine.
|
Entità multimediale
|
n/d
|
N
|
N
|
||
|
Icon
|
Specifica l'icona da visualizzare nella casella di testo.
|
ELENCO DELLE ICONE SVG
|
n/d
|
N
|
N
|
Convalida dei dati dei widget
Oltre alle proprietà comuni, è possibile utilizzare le proprietà di convalida MaxLength e MinLength per convalidare il numero di caratteri nel widget Campo di testo.
È possibile personalizzare i messaggi di errore di default utilizzando le proprietà MaxLengthFailureMessage e MinLengthFailureMessage. I valori massimo e minimo vengono visualizzati all'interno dei messaggi utilizzando il parametro ${value}.
Per ulteriori informazioni sull'utilizzo delle proprietà di convalida comuni, vedere Applicazione della convalida ai widget.
Nella tabella che segue sono elencate le proprietà disponibili nel pannello Convalida.
|
Proprietà
|
Descrizione
|
Tipo di base
|
Valore di default
|
Associabile (Y/N)
|
Localizzabile? (Y/N)
|
|---|---|---|---|---|---|
|
CriteriaMessage
|
Messaggio da visualizzare per i criteri di convalida e in caso di errore.
|
STRING
|
n/d
|
Y
|
Y
|
|
CriteriaMessageDetails
|
Dettagli da visualizzare per i criteri di convalida e per il messaggio di errore.
|
STRING
|
n/d
|
Y
|
Y
|
|
MaxLength
|
Lunghezza massima per il valore del campo di testo.
|
STRING
|
n/d
|
Y
|
N
|
|
MaxLengthFailureMessage
|
Messaggio da visualizzare quando il valore corrente supera la lunghezza massima di caratteri.
|
STRING
|
${value} characters is the maximum
|
Y
|
Y
|
|
MinLength
|
Lunghezza minima per il valore del campo di testo.
|
STRING
|
n/d
|
Y
|
N
|
|
MinLengthFailureMessage
|
Messaggio da visualizzare quando il valore corrente è inferiore alla lunghezza minima di caratteri.
|
STRING
|
${value} characters is the minimum
|
Y
|
Y
|
|
MaxValue
|
Imposta il valore numerico massimo per il widget.
|
NUMBER
|
N/D
|
Y
|
N
|
|
MaxValueFailureMessage
|
Messaggio da visualizzare quando il valore numerico supera il valore massimo.
|
STRING
|
Il valore supera il massimo di N
|
Y
|
Y
|
|
MinValue
|
Imposta il valore numerico minimo per il widget.
|
NUMBER
|
Y
|
N
|
|
|
MinValueFailureMessage
|
Messaggio da visualizzare quando il valore numerico è inferiore al valore minimo.
|
STRING
|
Y
|
Y
|
|
|
RequiredMessage
|
Messaggio da visualizzare quando il valore richiesto è impostato su true e l'elemento non è selezionato.
|
STRING
|
È richiesto un valore
|
Y
|
Y
|
|
ShowValidationCriteria
|
Visualizza un messaggio di suggerimento sull'input richiesto durante la modifica del campo di testo.
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationFailure
|
Visualizza un messaggio di errore quando il valore immesso non supera la convalida.
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationSuccess
|
Visualizza un messaggio di esito positivo quando il valore immesso viene convalidato.
|
BOOLEAN
|
False
|
Y
|
N
|
|
SuccessMessage
|
Messaggio da visualizzare quando la convalida ha esito positivo.
|
STRING
|
n/d
|
Y
|
Y
|
|
SuccessMessageDetails
|
Messaggio secondario che visualizza altre informazioni sul messaggio di esito positivo della convalida.
|
STRING
|
n/d
|
Y
|
Y
|
|
Validate
|
Evento associabile che viene attivato quando il valore del widget viene modificato. Associare questo evento a un servizio o a una funzione per applicare uno schema o un'espressione di convalida.
|
Evento
|
n/d
|
Y
|
N
|
|
ValidationCriteriaIcon
|
Imposta l'icona SVG da visualizzare all'interno del messaggio di suggerimento per i criteri di convalida.
|
IMAGELINK
|
info
|
N
|
N
|
|
ValidationFailureIcon
|
Imposta l'icona SVG da visualizzare all'interno del messaggio di stato quando l'esito della convalida è negativo.
|
IMAGELINK
|
error
|
N
|
N
|
|
ValidationOutput
|
Recupera l'output della convalida del widget. I valori restituiti sono Undefined,Unvalidated,Valid o Invalid.
|
STRING
|
n/d
|
Y
|
N
|
|
ValidationState
|
Proprietà associabile che imposta lo stato di convalida. È possibile impostare questa proprietà su Undefined, Unvalidated, Valid o Invalid.
|
STRING
|
Undefined
|
Y
|
N
|
|
ValidationSuccessIcon
|
Selezionare un'icona SVG da visualizzare all'interno del messaggio di stato quando l'esito della convalida è positivo.
|
IMAGELINK
|
success
|
N
|
N
|
|
ValueRequired
|
È necessario selezionare un elemento dell'elenco.
|
BOOLEAN
|
False
|
Y
|
N
|