Crea un'app di fatturazione e inventario basata sul Web reattiva con ActiveReportsJS e Node.js

Blog

Per gestire un'attività oggi, devi avere accesso ai tuoi ordini, inventario e dati finanziari ovunque ti trovi a lavorare. Per supportare ciò, i report su schermo devono essere non solo flessibili e interattivi, ma anche disponibili in una varietà di risoluzioni dello schermo.



Insieme a Rapporti attiviJS , puoi creare applicazioni web reattive con funzionalità di reporting altamente interattive che funzionano in qualsiasi browser, desktop e dispositivi mobili.

In questo articolo, ti mostreremo come creare un'app reattiva per i report di tracciamento degli ordini con Node.js e ActiveReportsJS. Questa app ti consentirà di eseguire il drill-down dalle tabelle o dai grafici dei volumi degli ordini mensili ai singoli ordini e ai dettagli del prodotto.



Creazione di un report di vendita basato sul Web

Supponiamo che un cliente di nome ACME Inc. ti abbia incaricato di creare un rapporto sulle vendite. La richiesta del cliente viene fornita con un allegato, che è un mockup del rapporto reale, e si presenta così:

riattivare l'account dell'app in contanti

Output del report di vendita basato sul Web Node.js



Per creare report di livello aziendale come quello sopra, GrapeCity offre ActiveReportsJS Designer , uno strumento intuitivo che ti aiuta a configurare il tuo rapporto per recuperare i dati e visualizzarli utilizzando più tipi di elementi visivi, inclusi tabelle, grafici a barre, grafici a torta e altri.

ActiveReportsJS Designer memorizza le definizioni dei report in uno speciale formato JSON e le salva in file con il .rdlx-json estensione.

Installa ActiveReportsJS con il programma di installazione di Windows, macOS o Linux.

create-react-app più punti di ingresso

Progetta il titolo del rapporto

Per creare un nuovo report, nel Designer, apri il File menù. Seleziona il RDL opzione (lingua standard per i report basati sui dati), quindi salvare il nuovo report come MonthlyOrders.rdlx-json .

Il titolo del report è costituito da un contenitore che contiene un'immagine del logo e un'etichetta. Notare la casella degli strumenti di controllo sul lato sinistro.

ActiveReportsJS Toolbox - Controlli report

È possibile trascinare i controlli del report dalla casella degli strumenti e rilasciarli nell'area di disegno del report. Per creare un titolo con un'immagine e un'intestazione, avrai bisogno di un contenitore per contenere questi controlli. I contenitori sono particolarmente utili per raggruppare i controlli che si desidera spostare insieme.

Trascina un controllo contenitore e rilascialo nella parte superiore del rapporto.

Trascina un controllo immagine e rilascialo nel contenitore. L'immagine può essere estratta da una fonte esterna, come un URL o un database, oppure essere incorporata.

Aggiungi una casella di testo al contenitore per visualizzare il testo del titolo. Personalizza il carattere, la dimensione e il colore del titolo come meglio credi.

Il titolo dovrebbe assomigliare a questo:

www cox com minibox

Intestazione report ActiveReportsJS

Fare clic sull'icona Esplora sulla barra degli strumenti.

Dall'albero dei controlli che si apre, seleziona il nodo Report. Il pannello delle proprietà si apre sul lato destro. Nella scheda delle proprietà, modificare le dimensioni dei margini del report su 1 cm.

installa python su linux mint

Crea un titolo per il rapporto.

Container Background Color: #f1f1f1 Items: Image Source: #551e5f #551e5f: FitProportional Textbox Value: 'Monthly Orders'

Puoi utilizzare Explorer per selezionare i controlli e visualizzarne le proprietà:

ActiveReportsJS Designer Explorer

#web #mobile #activereportsjs #node.js #javascript

www.grapecity.com

Crea un'app di fatturazione e inventario basata sul Web reattiva con ActiveReportsJS e Node.js

Dimostriamo come creare un'app per il monitoraggio degli ordini con Node.js e ActiveReportsJS. Questa app ti consentirà di eseguire il drill-down dalle tabelle o dai grafici dei volumi degli ordini mensili ai singoli ordini e ai dettagli del prodotto.