#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!!!!

#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