Vogliamo creare una semplice funzione di Data Entry che ci permetta di registrare le ore per gg dedicate al progetto o ai progetti che stiamo seguendo: l' obiettivo che ci poniamo è di raggiungere il risultato senza dover scrivere codice. O, più precisamente, vediamo fino a che livello possiamo arrivare senza dover scrivere codice.

Comiciamo con il creare il nostro prototipo che si può presentare attraverso la pagina sotto riportata:

 

Breve spiegazione dell' obiettivo

Come detto si vogliono registrare le ore di attività x gg così che a fine mese si possa ottenere un consuntivo.

Le informazioni che ci servono sono:

  • Risorsa: persona che ha svolto l' attività. Nel Box è un oggetto di tipo List che elenca tutte le risorse disponibili;
  • Cliente: clienti per cui si lavora. Nel Box è un oggetto di tipo List che elenca tutti i clienti disponibili;
  • Progetto: tipologia di progetti solitamente sviluppati. Nel Box è un oggetto di tipo List che elenca tutti i progetti attivi;
  • Attività: tipologia di attività che si svolge. Nel Box è un oggetto di tipo List che elenca tutte le tipologie di attività adottabili;
  • Dati Attività: è la grid che conterrà tutte le attività svolte x gg. Il contenuto di questa Grid, verrà salvato in ambiente SQL. Le colonne della Grid riprendono le informazioni sopra riportate (Risorsa, Cliene, ..) e quelle riportate sotto la stessa Grid che dovranno essere compilate dall' utente:
    • Data Attività: data in cui si è svolta l' attività;
    • Ore impiegate: ore impiegate per svolgere l' attività;
    • Descrizione attività: descrizione dell' attività svolta;
    • Attività svolta a: dove è stata svolta l' attività;
    • Spese viaggio: spese di viaggio;
    • Spese vitto e alloggio: spese di vitto e alloggio;
  • Add Riga: command button che attiva un metodo ("string AddRowToGrid(string gridElement" metodo della BBP e, quindi, standard) che crea una riga sulla Grid riprenedendo le informazioni dettagliate;

 

Prima condizione importante da rispettare

Le colonne della Grid devono avere lo stesso nome e la stessa tipologia (date, number, ...: a meno dei campi list che nelle colonne possono essere rappresentati come string) dei campi editabili.

 

Ci siamo limitati alla semplice definizione degli oggetti che ci possono servire, alla costruzione della pagina da utilizzare per l' inserimento, alla definizione di una banale regola per suggerire l' attività ed all' utilizzo di un metodo standard associato al CB "Add Riga".

il filmato che segue mostra l' operatività ottenibile a questo livello:

 

 

Riportiamo anche l' immagine della regola che viene applicata, limitandoci alla risorsa "AB".

 

Per quanto riguarda l' inserimento dei dati sulla Grid, abbiamo visto come possiamo operare. Adesso vediamo come operare per modificare i dati della Grid o per eliminarli: teniamo presente che nel caso in cui solo alcuni campi possono essere modificati una volta inseriti (ad es. le spese piuttosto che le ore o la data) si potrebbero definire questi campi editabili sulla Grid stessa.

 

Eliminazione di una riga della Grid

Per attivare questa funzionalità dobbiamo:

  • Aggiungere un nuovo command button che chiameremo "Remove Riga";
  • Associare a questo CB il metodo standard "string RemoveSelectedRowFromGrid(string gridElement)" documentato in  Sezione Metodi di BBT-RulesEngine;

 

Modifica di una riga della Grid

Questa funzionalità richiede di fatto due azioni:

  • Selezionare la riga della Grid e riportarne i valori sui campi editabili in modo da poterli modificare: questa azione viene eseguita dal metodo "string ReadSelectedRowFromGrid(string gridElement)" documentato in Sezione Metodi di BBT-RulesEngine: questo metodo viene associato all' evento di On Update della Grid contente i dati, attivandosi ogni volta che si seleziona una riga sulla Grid;
  • Modificare i dati ed aggiornare la Grid: aggiungiamo un command button che chiamiamo "Update Riga" al quale associamo il metodo standard "string UpdateSelectedRowGrid(string gridElement)" documentato in Sezione Metodi di BBT-RulesEngine;

 

Nel video che segue vediamo gli effetti delle ultime modifiche:

 

 

Fino a questo momento non abbiamo ancora scritto una riga di codice, ci siamo limitati ad utilizzare la BBT.

 

Aggiornamento dei dati su DB-SQL

Abbiamo fin quì visto come gestire un semplice Data Entry, limitandoci ad utilizzare una Grid come contenitore: ovviamente non appena si esce dall' applicazione, il lavoro fatto si perde. A questo punto possiamo ipotizzare di utilizzare un DB-SQL per archiviare i dati e per poterli recuperare al bisogno.

Cosa ci serve:

  • Disporre di una istanza SQL: se siamo in grado ce la possiamo creare autonomamente, altrimenti dobbiamo fare riferimento a qualcuno che sviluppi questa attività;
  • Disporre della tabella su cui riversare i dati: lo script per la creazione della tabella può essere ottenuto dalla BBW o meglio, dalla funzione di editazione della Grid che stiamo utilizzando come contenitore dei nostri dati. Per raggiungere l' obiettivo che ci siamo inizialmente posti (non scrivere codice), sarebbe opportuno non modificare loscript relativamente ai nomi dei campi ed alla loro tipologia: modificare tuttalpiù le dimensioni dei campi;
  • Riportare sul file WebConfig dell' applicazione la stringa di connessione al DB-SQL in modo da disporre dell' accesso in scrittura/lettura alla tabella;

Questa attività non può essere più di tanto automatizzata: un aiuto consistente ci viene comunque dalla possibilità di generare con la BBW gli script delle tabelle che vogliamo riportare sul DB stesso.

Per rendere effettiva questa funzionalità, aggiungiamo un Command Button che chiamiamo "Save Data" al quale associamo il metodo standard "FillSqlTableFromGrid(string GridName)" documentato in Sezione Metodi di BBT-RulesEngine: ricordo che per utilizzare questo metodo è necessario definire l' oggetto "StatusOfCall" di tipo Boolean sul Box.

Se ci limitiamo al solo uso di questo metodo otteniamo l' aggiornamento dei dati ma di fatto l' utente non si accorgerebbe dell' avvenuto aggiornamento e non sarebbe avvertito sul buon esito dell' operazione o sull' eventuale errore verificatosi. per migliorare questa fase possiamo introdurre anche i due metodi seguenti (si trovano documentati sempre nella solita sezione):

  • ClearElement: azzera la grid;
  • ViewMessage: visualizza lo stato di ritorno del metodo di aggiornamento indicando se l' operazione è OK o l' eventuale errore;

Questi tre metodi li possiamo combinare creando un flusso che chiamiamo "FlussoSave" e che associamo al CB "Save Data".

Di seguito riportiamo il flusso come disegnato sulla BBT:

 

Illustriamo velocemente la regola/flusso anche se di fatto la possiamo definire autodocumentante: la regola viene attivata nel momento in cui si clicca sul CB "Save Data".

(1) Viene lanciato il metodo BBP_FillSqlTableFromGrid che provvede ad aggiornare la struttura SQL e a settare il booleano StatusOfCalltrue, se l' aggiornamento è andato a buon fine, a false se si sono verificati errori;

(2) Se aggiornamento OK, viene lanciato il metodo BBP_ResetElement che ripulisce la Grid, quindi si predispone il messaggio (nodo assign) che verrà visualizzato dal metodo ViewMessage;

(2) Se aggiornamento NOT-OK, si predispone il messaggio di errore (nodo assign) che verrà visualizzato dal metodo ViewMessage;

 

Prima di vedere l' effetto di queste implementazioni, vediamo come possiamo recuperare i dati da SQL mantenendo sempre l' obiettivo di non scrivere codice.

Inseriamo un nuovo CB che chiamiamo "Read Data", a cui asscoiamo il metodo "BBP_FillGridFromSqlTable(string gridName, string whereSqlName)": anche questo metodo provvede a settare il booleano StatusOfCall a true, se l' aggiornamento è andato a buon fine, a false se si sono verificati errori.

Nel filmato che segue vediamo gli effetti di queste ultime modifiche.

 

 

Metodi standard utili per migliorare il Data Entry

La BBP rende disponibili alcuni metodi che consentono di migliorare il data entry di una pagina come potrebbe essere questa, oggetto del Tutorial. Vediamo alcuni di questi metodi e come li possiamo utilizzare:

void BBP_ClearElementsOfPage(string containerExtraProperty)

Effettua la CLEAR di tutti gli elementi che contengono una Extra Property il cui nome è il contenuto del parametro di passaggio del metodo. Nel nostro caso potremmo pensare di azzerare tutti i campi della pagina dopo il salvataggio su SQL nell' ipotesi che lo stesso non abbia dato errore, dopo aver aggiunto una nuova riga e quando viene caricata la pagina. Questo lo possiamo ottenere implementando la regola associata al salvataggio dei dati e creando due mini regole che associamo alla Init della pagina ed al comando di aggiungi riga.

Di seguito come si presenta la regola associata al Salvataggio dati

 

 

void BBP_AllRequestedFieldsDefined(string containerExtraProperty)

Controlla che tutti gli elementi che contengono una Extra Property di nome uguale al contenuto del parametro containerExtraProperty e hanno la proprietà Required a true siano definiti. Per utilizzare questo metodo deve essere definito un oggetto di tipo Boolean chiamato "StatusOfCall" che il metodo stesso inizializza a true se tutti i campi sono definiti, a false se almeno un campo non è definito: i campi di tipo number, se required, si ritengono definiti se hanno un valore diverso da 0.

Possiamo così creare una regola che utilizza questo metodo ed associarla al campo che aggiunge una riga. La regola si presenta come segue:

 

 

Nel filmato che segue vediamo gli effetti di queste ultime modifiche:

 

 

Come migliorare il nostro Data Entry

Quanto sino ad ora sviluppato non ha richiesto scrittura di codice: di fatto però questo è un prototipo che può semplicemente mostrare come opera la funziona al fine di capire se stiamo o meno seguendo la strada giusta.

Vediamo come possiamo intervenire per rendere più gradevole l' interfaccia per l' utente e ancora più semplice l' operatività.

Cominciamo col migliorare l' aspetto grafico pur rimanendo comunque in un ambito spartano.

Possiamo risistemare la posizione dei campi, rivedere le labels degli stessi e ridimensionare la Grid dei dati  direttamente dalla BBW. Utilizziamo anche due script CSS:

[bb-element-name='DatiAttivitaGiorno'] {
max-inline-size: fit-content;
}
: allinea la dimensione della Grid con quelle delle colonne. In sostanza comunque dimensiono la Grid l' ultima colonna è sempre allineata con la fine della stessa Grid;

.btn-primary {
background-color: lightgray;
color: black;
font-weight: bold;
border-color: lightgray;
border-radius: 10px;
width: 200px;
}
: dimensiona i Command Button assegnando un back ground color grigio chiaro.

Di seguito l' immagine della pagina:

 

Altre due piccole migliorie che si potrebbero apportare:

  • Proporre come data quella del giorno quando si entra nella pagina, quando si resettano i campi della pagina a fronte di un salvataggio e dopo aver inserito una nuova riga, momento in cui ci si predispone per l' inserimento di una ulteriore riga. Questo lo si ottiene utilizzando il metodo BBP_ToDay che consente di inizializzare un campo data alla data del giorno: si dovranno implementare le regole attivate dai CB Nuova RigaArchivia Righe e creare una nuova regola da associare all' evento di INIT della pagina che scatta quando la pagina viene inizializzata;
  • Rendere disponibile il CB Elimina Riga sul tasto destro del mouse quando si punta ad una riga sulla Grid ed eliminarlo dal fondo della pagina. Queste modifiche vengono apportate direttamente alla Grid dei dati utilizzando la BBW;

 

L' aggiornamento delle informazioni su SQL avviene in modo classico: predispongo i dati sulla grid quindi attivo un' operazione di aggiornamento.

Questo aspetto può essere migliorato operando in modo tale che la Grid e la corrispondente tabella siano aggiornate contemporaneamente in modo tale che ciò che vedo è di fatto ciò che ho sul mio DB. Per fare questo vanno introdotti i seguenti metodi STD documentati nella relativa sezione Metodi della BBT-RuleEngine:

void BBP_RemoveSelectedRowGridInSql(string gridName): rimuove la riga selezionata sia dalla grid che dalla tabella;

void BBP_InsertRowInGridAndInSql(string gridName): inserisce una nuova riga sia sulla Grid che sulla tabella;

void BBP_UpdateRowInGridAndInSql(string gridName): aggiorna la riga selezionata sia sulla Grid che sulla tabella;