Casella di riepilogo con testa di serie: Ricerca intuitiva negli elenchi

dall’autore ospite Chris Belanger, sviluppatore 4D del Canada

Il typeahead delle caselle di riepilogo(un metodo per la ricerca progressiva) non è una caratteristica nativa delle caselle di riepilogo. Tuttavia, è possibile implementare facilmente questa funzione con un po’ di codice creativo. In questo post del blog, dimostrerò la tecnica con un esempio di database e un documento esaustivo che spiega i dettagli passo dopo passo.

Il risultato finale è riassunto nella GIF qui sotto, che illustra due “ricerche”. Una per E-L-L-I-O-T, poi un’altra (dopo un ordinamento a colonne) per H-A-N-N-A-H:

HDI: Casella di riepilogo di testa

Cosa vogliamo fare?

Quando la casella di riepilogo ha il focus (ma non in “modalità di immissione”), vogliamo poter digitare alcuni caratteri e far sì che la casella di riepilogo scorra fino a selezionare la corrispondenza più vicina in base alla “colonna di ordinamento”. Ad esempio, se l’ordinamento è per nome dell’azienda, vogliamo iniziare a digitare il nome di un’azienda e vederla individuata ed evidenziata nella casella di riepilogo. Tuttavia, quando una casella di riepilogo è l’oggetto focalizzato, non può rispondere alla pressione dei tasti.

Come risolvere questo problema, visto che non sembra esserci un modo per raccogliere la pressione dei tasti?

Collocare la casella di riepilogo in una sottomaschera

Il primo passo è inserire la casella di riepilogo in una sottomaschera (nel database di esempio, questa forma si chiama LB). Ok… ma come si raccolgono i tasti premuti? Utilizzando pulsanti invisibili ai quali vengono assegnate delle “scorciatoie”.

A loro volta, tutte le scorciatoie richiamano un metodo per determinare il testo di ricerca, individuarlo nella casella di riepilogo ed evidenziarlo per l’utente. È possibile seguire questa spiegazione se si apre il modulo LB nel database Listbox Clairvoyance.

La casella di riepilogo ha il nome di oggetto LB_Browser. Le sue proprietà includono:

La selezione dell’entità si chiama Form.es (nel contesto della sottomaschera LB).

Nella parte inferiore del modulo LB c’è un insieme di pulsanti. A ciascuno di essi è assegnato un tasto di scelta rapida. La fila in basso può sembrare poco chiara, ma si tratta dei tasti SPAZIO, – e _. È possibile aggiungerne altri, se necessario.

Le proprietà di ciascuno di questi pulsanti sono illustrate utilizzando il tasto “A” come esempio.

Il nome dell ‘oggetto termina con la LETTERA, il NUMERO o il SIMBOLO che genera. Lo spazio è un’eccezione; utilizza il simbolo ␣ e viene “tradotto” in SPAZIO.

Il titolo serve solo a chiarire, il dimensionamento orizzontale è Muovi e la scorciatoia è la pressione del tasto. L’unico evento da controllare è On Clicked.

Quando l’utente preme un tasto di scelta rapida, lo script per quel pulsante viene attivato con un evento On Clicked Form event code.

Lo script per ogni pulsante è:

LB_SEARCH_DO (Form; OBJECT Get name)

Interpretazione della pressione dei tasti

Il metodo LB_SEARCH_DO elabora i tasti premuti. Utilizza il carattere finale del nome dell’oggetto per conoscere la sequenza di tasti da elaborare.

$char:=$2[[Length($2)]] // get the last character in the object’s name.

Questo carattere verrà aggiunto alla stringa di ricerca o la sostituirà, a seconda del tempo trascorso dall’ultima pressione dei tasti. Nel database di esempio, ogni “attesa” superiore a 1,5 secondi avvia una nuova ricerca.

$now:=Milliseconds
If (($now-$obj_Search.lastMillisecond)>1500) //allow up to 1.50 seconds between keystrokes.
$obj_Search. searchFor :=$char //reset .searchFor
Else
$obj_Search.searchFor :=$obj_Search.searchFor +$char //add to .searchFor
End if
$obj_Search .lastMillisecond:=$now
La ricerca sulla “colonna di ricerca” viene eseguita determinando quale record nella selezione delle entità sarebbe la prima corrispondenza e quindi individuando questo record nella selezione delle entità (“.es“).

C_OBJECT($es_GreaterEqual) // the entity selection of the >= group that match the searchFor string.
$es_GreaterEqual :=$1.es.query($attrName+" >= :1";$obj_Search.searchFor).orderBy($attrName+" ASC")


Il sito $itemPosition all’interno della selezione delle entità è determinato con:

If ($es_GreaterEqual.length>0) // if there was at least one match
$match :=$es_GreaterEqual[0] // $match = the FIRST RECORD in the collection
$itemPosition :=$es_GreaterEqual[0].indexOf($1.es)+1 // location of the matching entity within the selection
Else
$itemPosition :=$1.es.length
End if

Ora aggiorniamo la selezione delle righe della casella di riepilogo e scorriamo in modo che l’utente possa vedere il risultato. Lo mostriamo alla riga 5 della casella di riepilogo per fornire un contesto.

C_LONGINT($show) // used to cause the ITEM POSITION to show in the 5th line (or higher, if it is < 5).
LISTBOX SELECT ROW (*;$lbName;$itemPosition;lk replace selection)
$show :=Choose($itemPosition<4;1;$itemPosition-4) // it will be line 5, or closer to the top
OBJECT SET SCROLL POSITION (*;$lbName;$show;*)

Infine, per la dimostrazione, carichiamo l’entità selezionata in un oggetto a cui il form padre possa accedere.

Form.en_edit:=Form.es[$itemPosition-1] // for the parent form’s use

E altro ancora

Scaricate l’HDI qui sopra per dare un’occhiata più da vicino al concetto. Inoltre, è incluso un documento esaustivo che spiega la configurazione del form padre per gestire la casella di riepilogo, oltre a suggerimenti per progettare l’interfaccia utente e migliorare l’esperienza dell’utente.

Spero che questo sia utile per il vostro prossimo progetto 4D!