• Passa al contenuto principale
  • Passa alla barra laterale primaria
  • INIZIA QUI
  • HOME
  • CHI SONO

APPin5Minuti

Creare APP Gestionali con Oracle APEX e Low-Code

Crea Applicazioni Gestionali con Oracle APEX e gli strumenti Low-Code.

Google AppSheet: come configurare la user interface di una applicazione

Febbraio 26, 2021

In questo tutorial ti spiegherò come configurare l’interfaccia utente di una applicazione mobile in AppSheet.

Implementare una APP mobile in AppSheet consiste nel lavorare con 3 tipologie di oggetti:Le Tabelle che servono a collegare l’applicazione alle sorgenti dati (se non lo hai già fatto, leggi come lavorare con i dati in una applicazione AppSheet).

Le Viste con le quali puoi costruire l’interfaccia utente.

I Bottoni e le Actions attraverso i quali puoi implementare degli automatismi.

In questa guida parleremo di come creare e configurare le Viste della tua APP, disponibili sotto UX > Views

Ad esempio, questa è la vista Items:

Una Vista definisce il modo in cui l’applicazione mostra i dati all’utente.

Grazie ad una serie di modelli predefiniti (gallery, cards, ecc.) puoi decidere come mostrare i dati all’utente.

Nei paragrafi successivi andremo a vedere nel dettaglio le opzioni di configurazione di una Vista.

IN QUESTO ARTICOLO

  • Come posizionare le Viste nell’applicazione
  • Tipo di Viste
    • Deck e Table
    • Gallery
    • Detail
    • Calendar
    • Map
    • Chart
    • Dashboard
  • Colori e logo dell’applicazione
  • Opzioni di personalizzazione aggiuntive
  • Traduzione delle etichette

Come posizionare le Viste nell’applicazione

In una applicazione mobile, una pagina può essere raggiunta da diversi punti.

Ad esempio, puoi creare una voce d menù oppure puoi aggiungere un pulsante al footer dell’applicazione.

Per posizionare un link ad una vista:

  • Clicca su UX > Views
  • Clicca sulla vista che vuoi modificare (Items)
  • Vai alla sezione Position e scegli dove posizionare il bottone per aprire la vista.
  • Le opzioni left most, left, center, right, right most servono per posizionare il bottone della vista nel footer dell’applicazione.
  • L’opzione menu va selezionata se vuoi collegare la Vista al menù dell’APP
  • L’opzione ref va utilizzata quando vuoi che la Vista non venga richiamata da un bottone specifico ma dovrà essere accessibile da un’altra vista oppure tramite una dashboard.
  • Nella sezione Display puoi impostare l’icona del bottone e il nome della voce di menù che l’utilizzatore dell’applicazione vedrà collegandosi all’applicazione.
  • Questo è il risultato

Tipo di Viste

AppSheet supporta diversi tipi di Viste predefinite. Nel momento in cui sto scrivendo questo articolo, sono disponibili le seguenti tipologie:

  • Deck
  • Table
  • Gallery
  • Detail
  • Map
  • Chart
  • Form
  • Dashboard

Per impostare il tipo di vista da usare:

  • Clicca sulla Vista
  • Vai a View Type e seleziona il tipo di vista che vuoi utilizzare

Nei paragrafi successivi descriverò le caratteristiche di queste viste e ti spiegherò come e quando usarle.

Deck e Table

Deck e Table sono due tipi di vista che organizzano i record in una forma tabellare.

In particolare, il tipo vista Table mostra le informazioni in modo molto compatto.

Grazie ad una vista di tipo Table puoi scorrere molto rapidamente i dati per trovare una riga

La vista Deck, invece, organizza i record mostrando i campi in maniera compatta.

Se il record ha un tipo campo Image, questo tipo di vista può mostrare per ogni record una miniatura.

Questa vista è molto utile quando devi implementare, ad esempio, un catalogo prodotti, oppure un elenco di contatti.

Puoi selezionare i campi da visualizzare per ogni riga del Deck scegliendoli nell’area di configurazione della vista.

Gallery

Con il tipo vista Gallery i record, che devono avere una colonna di tipo Image, vengono visualizzati con una galleria di immagini scorrevole e con un testo descrittivo.

Facendo clic su qualsiasi immagine si apre una visualizzazione “dettagli” che mostra l’immagine a schermo intero insieme agli altri campi del record.

Una volta atterrato nella pagina di visualizzazione dei dettagli a schermo intero, l’utente può scorrere i record cliccando sulle frecce ai lati.

La vista Detail viene utilizzata per mostrare i dettagli di un record e, se viene in posizione ref, viene automaticamente richiamata dalle altre Viste di tipo Table, Deck, Gallery.

Detail

La Vista Detail possiede diverse opzioni di configurazione del layout, come la possibilità di visualizzare i campi sopra all’immagine piuttosto che dare la possibilità agli utenti dell’APP di poterli modificare direttamente nella vista con una funzionalità di Quick Edit.

La funzionalità di Quick Edit rende le colonne del record modificabili direttamente dalla Vista.

Ovviamente, per poter usare il Quick Edit l’origine dati della Vista deve avere attivata l’opzione Update.

Calendar

Il tipo vista Calendar permette di visualizzare su un calendario dei record che rappresentano intervalli temporali.

Ad esempio, gli appuntamenti settimanali.

Per sfruttare appieno una vista di tipo Calendar dovresti avere una sorgente dati con 4 colonne che rappresentano rispettivamente Data/Ora di Inizio e Data Ora Fine.

Ecco un esempio:

Nel setup della vista dovrai mappare le precedenti colonne e scegliere il tipo di vista predefinita (ed esempio settimanale)

Dalla vista, cliccando sul record, accedi al dettaglio dell’evento

Map

Il tipo visto Map è davvero molto utile ed è anche molto facile da configurare.

Come per tutti gli altri tipo di viste, una vista Map ha bisogno di una sorgente dati, una tabella che contiene una colonna con l’indirizzo che l’applicazione utilizzerà per posizionare un punto sulla mappa.

Ad esempio, supponiamo di voler mostrare agli utenti della nostra applicazione per l’acquisto di prodotti per lo sport dove si trovano i punti vendita fisici.

Una tabella per gestire queste posizione può essere fatta come nell’esempio seguente.

Grazie all’indirizzo scritto nella colonna Address, l’applicazione è in grado di posizionare sulla mappa un punto interattivo sfruttando le API di Google Maps che sono automaticamente integrate in AppSheet.

Cliccando sul marker, puoi vedere il dettaglio della posizione.

Chart

Il tipo vista Chart consente di implementare dei grafici in AppSheet.

Per creare un grafico:

  • Crea una nuova Vista di tipo Chart
  • Clicca sul campo Chart Type
  • Seleziona il tipo di grafico che vuoi creare, ad esempio horizontal histogram
  • Imposta i parametri del grafico specifico
  • Posizione la vista Chart nella posizione ref affinché sia richiamabile da una vista Dashboard che vedremo tra poco.

Dashboard

Le viste di tipo Dashboard permettono di raccogliere in un unico contenitore altre viste create precedentemente.

Questa tipo di raccolta risulta particolarmente utile nelle applicazioni usate da tablet oppure nella versione desktop dell’APP quando viene visualizzata dal browser.

Per creare una dashboard

  • Crea una vista di tipo Dashboard
  • Aggiungi altre viste alla raccolta usando il bottone Add

Colori e logo dell’applicazione

Quando crei una nuova applicazione in AppSheet, verrà applicato un stile di default.

Tuttavia puoi personalizzarne l’aspetto per renderla adatta al brand della tua azienda.

  • Accedi al workspace dell’applicazione
  • Clicca su UX > Brand
  • Theme: permette scegliere tra un tema chiaro oppure un tema scuro.
  • Primary Color: imposta il colore primario dell’applicazione
  • App logo: imposta il logo dell’applicazione, che sarà visibile nell’header dell’applicazione

Opzioni di personalizzazione aggiuntive

In UX > Options puoi trovare ulteriori opzioni grafiche aggiuntive

Vediamo quali sono le opzioni più significative da tenere in considerazione.

  • Starting View: definisce la prima vista che l’utente vede quando si collega all’applicazione
  • Fonts: seleziona il font dell’applicazione e la dimensione del carattere
  • Form Style: decidi come formattare i campi delle form
  • Table View: permette di mostrare/nascondere l’header, gestire l’allineamento dei campi numerici e attivare/disattivare le opzioni di ordinamento.
  • Detail View: seleziona il formato di default delle viste Detail, ovvero come vengono allineati i campi e come viene formattata l’immagine

Traduzione delle etichette

AppSheet permette di inserire le traduzioni delle etichette standard di tab e bottoni.

Per inserire una traduzione vai clicca su UX > Localize

TI POTREBBE INTERESSARE:

  • Come migrare le applicazioni da Oracle Forms ad Oracle APEX
  • Microsoft Power Apps: come creare una nuova applicazione passo dopo passo (App Canvas)
  • Google AppSheet: come collegare i dati alla tua APP
  • Google AppSheet: come creare una APP Mobile da un foglio Excel in 5 minuti
  • Come sviluppare applicazioni sicure con Oracle APEX
  • Creare una APP Mobile come Twitter in Oracle APEX

appsheet, appsheet views, google, mobile

Interazioni del lettore

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Barra laterale primaria

BENVENUTO!

Il mio nome è Daniele Trasarti, autore di APPin5Minuti, il blog italiano che parla di piattaforme di Oracle APEX e applicazioni low-code.

Qui troverai tantissimi tutorial e risorse per imparare a sviluppare in pochissimo tempo bellissime applicazioni per gestire i dati ed i processi della tua azienda.

Se vuoi saperne di più inizia da qui.

Seguimi sui social!

  • LinkedIn
  • Twitter

NEWSLETTER

Iscriviti anche tu per far parte della più grande community italiana di persone che amano sviluppare low-code!

api rest appsheet appsheet data sources appsheet views appsheet workflow automation autonomous database build apps cpq crm css cyber security database dynamic layout facebook flowform flows4apex google google cloud interactive grid interactive report javascript list microsoft microsoft access mobile oracle oracle apex oracle cloud oracle rest data service ords pl-sq PL-SQL power apps product configurator sales configurator security social login software gestionale sql theme roller ux woocommerce wordpress workflows

COMMENTI RECENTI

  1. Daniele Trasarti su Oracle APEX: come creare un’applicazione web in 5 minuti

    Ciao Sabatino, grazie per l'apprezzamento. Riguardo alla tua domanda ti consiglio di usare Oracle Cloud. Puoi creare un account gratis…

  2. Sabatino Iannazzo su Oracle APEX: come creare un’applicazione web in 5 minuti

    Ciao Daniele, complimenti per la guida, mi hai aperto un mondo! volevo chiederti se con Apex e Oracle Database Express…

  3. Laura su Autenticazione a 2 Fattori basata su TOTP (Time-based One-time Password) con Oracle APEX

    Ciao, trovo molto interessante il tuo articolo. Hai qualche suggerimento per l'autenticazione con spid? pensi di fare qualche guida al…

  4. Mario Volpetti su Oracle APEX: come creare un’applicazione web in 5 minuti

    Ottima spiegazione e complimenti per la semplicità che ai usato. Sono riuscito a farlo anche io con un foglio excel…

  5. Riccardo Liviabella su Google AppSheet: come creare una APP Mobile da un foglio Excel in 5 minuti

    Ciao Daniele e grazie per le tue interessanti spiegazioni. E' da un pò di anni che lavoro su Appsheet e…

  6. Daniele Trasarti su Come costruire Workflows Approvativi in Oracle APEX

    Ciao Bhavin, I think you badly copied PL-SQL because the one you provided is not correct. Fix the script and…

  7. Daniele Trasarti su Applicazione di Prenotazione Appuntamenti in Oracle APEX

    Grazie mille Franca!

Copyright © 2023 · APPin5Minuti.it · Privacy Policy · Cookie Policy