giovedì 29 febbraio 2024

Creare Form da file #Excel in #Vue.js 3.4 #Bootstrap Italia© #CStrapJSStudio©

Creare Form con validazione usando fogli Excel come input in #Vue.js 3.4 #Bootstrap Italia© #CStrapJSStudio©

POSTED BY GIULIANO PAGNINI, 29 Feb 2024

In questo post vedremo  come creare complessi form, con validazione dei dati, usando MS-Excel o altri fogli elettronici.

1) Creare i database locali da inserire nel setup dell'applicazione Vue.js; con ImpolyzerDataStudio usiamo la funzione esporta in JSON


Selezionare il campo per la label e il campo per il value, poi Conferma.

Viene creato il JSON array da usare nel DataModule di Vue.js

[{label:"INSEGNA D'ESERCIZIO",value:1},{label:"INSEGNA PUBBLICITARIA",value:2},{label:"CARTELLO STRADALE",value:3},{label:"TENDA",value:4},{label:"BACHECA",value:5},{label:"PREINSEGNA",value:6},{label:"PUBBLICITA' ORDINARIA",value:7},{label:"PUBBLICITA' TEMPORANEA",value:8},{label:"PUBBLICITARIO DI SERVIZIO",value:9},{label:"PUBBLICA AFFISSIONE",value:10},{label:"POSTER PRIVATO",value:11},{label:"PREINSEGNA PRIVATA",value:12},{label:"CARTELLO DI CANTIERE",value:13},{label:"CARTELLO DI CANTIERE SU RECINZ",value:14},{label:"CARTELLO DI CANTIERE SU IMPALC",value:15},{label:"CARTELLO DI CANTIERE SU PALO",value:16},{label:"CARTELLI DITTE CANTIERE",value:17},{label:"CARTELLI CAMPI SPORTIVI",value:18},{label:"PORTA MANIFESTI",value:22},{label:"CARTELLO",value:19}]

Procedere con tutti i db statici da usare nel setup.

2) Creare il DataModule nella pagina vue.js con tabelle JSON o API Rest 



3) Inserire il componente Form nella pagina e posizionarsi su Form nello schema manager, il comando Add Field per inserire i controlli del Form si attiva



3) Inserire i campi nel file excel
FieldName = Nome del campo
Type= A alfanumerico, N= Numero, B = Boolean,............ (altri tipi)
LR = Lista di Radio Button con label e value
LA = Lista combobox con autocompletamento
...(altri tipi)
Label = Etichetta del controllo
Required = campo obbligatorio
size-lg=dimensione su schermi grandi in dodicesimi
size-md=dimensione su schermi medi in dodicesimi
size-small=dimensione su schermi piccoli in dodicesimi
size-exsmall=dimensione su schermi extra piccoli in dodicesimi
regexpr=espressione per validazione del campo
errormessage=messaggio per validazione (default= *campo richiesto)
dataset=nome del datasource nel datamodule



3) Comando Add Field


Aprire il file Excel poi usare il comando comando Crea Campi


Anteprima della pagina Vue con il Form


Ogni campo del Form può essere personalizzato, nell'esempio il DataSource con le tabelle del DataModule


Validazione del Form


Creare complesse applicazioni database con CStrapJSStudio, Vue.js 3, senza compilazione e altri software richiesti, è veramente semplice e no-code.


#ImpolyzerDataStudio
#CStrapJSStudio
#VueJS
#Bootstrap
#C++Builder

venerdì 19 gennaio 2024

#ImpolyzerDataStudio© 4.0.0.171 #FIREDAC #LOCALSQL #BATCHMOVE

 #ImpolyzerDataStudio© 4.0.0.171

POSTED BY GIULIANO PAGNINI, 19 GEN 2024

New!!  Path con variabili

Nei percorsi dei database [ORIGINE] e [DESTINAZIONE] è possibile inserire le variabili tra ## esempio; C:\LATISANA\#COMUNE#\2024


Tutte le fasi del progetto di importazione vengono aggiornate con il valore della variabile


Le variabili possono essere configurate nel menu REGOLE - Variabili del Progetto


New!!  Nuove regole "se il contenuto del campo > o <  di n.caratteri" allora copia il contenuto nel campo x , altrimenti altro o ignora regola.


New!!  Firedac local-sql potenziato


Creazione di complesse query [IN - NOT IN] con ORIGINI miste (Excel, CSV,SQL,CData,ect)


    Senza scrivere codice SQL


  Esempio di query IN tra due fogli Excel



New!!  REST Tester potenziato


Nuove funzioni in working..... 

sabato 13 gennaio 2024

#CStrapJSStudio© #Vue.js 3.4 #Bootstrap Italia - Uso dei componenti #vue.js senza compilazione

#Vue.js 3.4 in #Bootstrap Italia© con #CStrapJSStudio©

POSTED BY GIULIANO PAGNINI, 13 GEN 2024

Come utilizzare Vue.js 3.4 con Bootstrap Italia in siti o portali web senza compilazione e senza uso di strumenti aggiuntivi come Node,VueCli, ect, usando CStrapJSStudio.

Nel Component Manager di CStrapJSStudio sono stati implementati wizard per la creazione dei componenti Vue.js 3.4 senza compilazione



Un esempio di componente data-source creato dal Component-Manager per l'uso senza compilazione

il codice del data source e le proprietà dell'object inspector


le props  passate al componente e gli eventi intercettati
<data-source :url="'pg-url:'" :nodo="'pg-nodo:'" :name="'pg-name:'" @onsuccess="pg-Onsuccess:" @onmessage="pg-OnError:"></data-source>

Componente notizie di Bootstrap Italia riscritto per Vue.js 3.4 senza compilazione

il codice del componente notizie
  <notizie :dataset="pg-name:"></notizie>
la proprietà name: (nome del dataset del componente data source)

            
Componente tabella di Bootstrap Italia per Vue.js 3.4 senza compilazione


il codice del componente tabella
<table-custom :dataset="pg-name:" :columns="['title','description']"></table-custom>
la proprietà name: (nome del dataset del componente data source)



I componenti nella pagina del Router di Vue.js (senza compilazione e strumenti aggiuntivi) con anteprima istantanea delle modifiche
Il componente tabella e il componete notizie.


Il componente data source prima del Router. L'applicazione vue.js è inserita tra l'header e il footer del portale web.


Se il data source riceve correttamente i dati dal server Rest, attiva l'evento this.$emit('onsuccess', response.status) e viene aperta la 'page1' del router



 



CStrapJSStudio sempre più RAD e NO CODE.

giovedì 28 dicembre 2023

#CStrapJSStudio© Vue.js 3 Bootstrap 5.2 - Gestione degli spuntisti [mercato] con ricarica PagoPa©

Gestione degli spuntisti [mercato] con ricarica PagoPa©.

POSTED BY GIULIANO PAGNINI, 28 DIC 2023 

In questo esempio un semplice case studies di un applicazione web destinata agli operatori del Comune per registrare le presenze degli spuntisti nei vari mercati comunali.

Lo spuntista acquista le ricariche con tagli predefiniti (€.20 /30/ 50) e l'operatore registra le presenza con l'app web collegata al database di UNICOXE

Il server web espone una serie di API-REST per l'autenticazione dell'operatore, l'elenco dei mercati comunali,il saldo disponibile, il calcolo del dovuto, e il salvataggio nel DB delle presenze.

Autenticazione dell'operatore

Selezione del mercato


Ricerca dello spuntista per IDUTENTE,NOME COGNOME,CODICE FISCALE - P.IVA


Ricerca dello spuntista per IDUTENTE,NOME COGNOME,CODICE FISCALE - P.IVA


Calcolo con le tariffe di UNICOXE e nuovo saldo disponibile.


Dettaglio del calcolo


Stampa e assegna posto se saldo disponibile.

Accesso diretto al database di UNICOXE



Novità della nuova versione di CStrapJS
Anteprima dei componenti e delle pagine del Router con aggiornamento automatico del layout al variare delle proprietà


New Controller  della logica dei componenti Vue.js e delle pagine del Routers


New Editor  con accesso diretto alle variabili, funzioni, metodi e proprietà del controller. Nuova gestione degli snipping


New Editor! Nuovi editor per gli snipping l'auto correzione del  codice e il completamento automatico




 
Molto altro in arrivo.... Buon fine e Buon inizio!!!!


venerdì 1 dicembre 2023

#CStrapJSStudio© e #ChatGPT©. Come creare un componente form dinamico con bootstrap© e axios.js

Come creare un componente form dinamico con bootstrap© e axios.js.

POSTED BY GIULIANO PAGNINI, 01 DIC 2023



In questo esempio vedremo come creare un form dinamico per il post dei dati che si adatta a ogni schema tabella.

Partiamo da un database Excel che verrà trasformato in MemTable e salvato nel server REST per testare le nostre API-REST


Con ImpolyzerDataStudio apriamo il file Excel (ODBC Source o CDATA connector)


Salviamo la tabella nella sottocartella TABLE del server REST (Esporta in MemTable)

Da ImpolyzerDataStudio testiamo il collegamento  [GET] http://127.0.0.1:8081/memtable?table=budget.bin


Inseriamo un componente Form in CStrapJSStudio

In CStrapJSStudio tutti i componenti che contengono un Form vengono evidenziati nello schema manager con 


E il comando Add Field si attiva


Con il comando Add Field è possibile aggiungere al form i campi di qualsiasi MemTable creata con ImpolyzerDataStudio


Confermare i campi desiderati e selezionare il comando Crea Campi


Nel Form verranno aggiunti in automatico tutti i campi della MemTable con la rispettiva Type


e sarà possibile testare il funzionamento del form con i salvataggi sulla MemTable


ogni input box può essere personalizzato con il type desiderato:


L'impaginazione degli elementi con anteprima immediata per tutti i dispositivi

(con bootstrap nella dodicesima parte dello schermo)


Il codice JS del form 

const form = document.getElementById('myForm-pg-id:'); rende unico il form nell'applicazione

#C++Builder #RadStudio #ImpolyzerDataStudio #Citizen Developer #RadWebBuilder