Il ruolo di admin consente di intervenire sulla piattaforma a tutti i livelli, a parte alcune funzioni operative riservate a OpenCity Labs che sono:

• la creazione di una nuova istanza;

• il nome e il logo dell’Ente;

• il dominio dell’istanza;

• il sistema di autenticazione usato;

• la creazione dei servizi di contatto con l’Ente (Segnala disservizio, Prenota appuntamento, Richiesta assistenza).

Le funzioni admin son di due tipi: alcune si gestiscono a livello generale (interfaccia di admin della piattaforma) e hanno effetto su tutti i servizi; altre consentono la configurazione specifica di singoli calendari e servizi.

Per permettere agli utenti di una volta inoltrata, accedi alla scheda "Dati generali" (1) del servizio e attiva la voce "Consenti al cittadino di ritirare una pratica dopo che questa è stata presentata" (2)

Nel corso del tempo OpenCity Italia ha creato un ampio catalogo che copre tutti i principali servizi pubblici di un Ente: in questo modo si parte da un modello di servizio realizzato con cura e già sottoposto a un ciclo di progettazione, sviluppo e test che ne garantisce la qualità.

In questo scenario, quindi, l'Ente:

• definisce gli obiettivi;

• mette a disposizione le informazioni;

• controlla il risultato finale;

• gestisce tutti gli aspetti del servizio che richiedono configurazioni, come le fasi di protocollo o la definizione dei listini di pagamento.

Nel caso in cui siano necessaria delle modifiche una volta messo in produzione il servizio, l'ente si occupa di aggiornare le informazioni o di introdurre piccole variazioni.

Pagare tributi IMU

🌄Miglioramento dell'esperienza utente

• Aggiornato il servizio in modo da consentire la selezione dell’anno d’imposta, permettendo così il calcolo dei dati sia per l’anno corrente che per anni precedenti.

• Aggiunto un menu a tendina nella pagina iniziale che consente di selezionare l’anno d’imposta desiderato

• Inseriti due banner informativi che mostrano, in base all’anno d’imposta selezionato, le date di scadenza dell’acconto e del saldo

• Inserito un banner informativo che, nel caso in cui l’utente acceda dopo la scadenza dei termini di pagamento, mostra quanti giorni sono trascorsi dalla data di scadenza

• Inserito un banner che impedisce l’accesso al calcolo per gli anni in cui non risultano caricate delle aliquote

🐞Configurazioni tecniche

• Corretto il campo “Saldo finale” per mostrare l’importo con il separatore delle migliaia

Autorizzazione alla sepoltura di un defunto

🌄 È ora disponibile il nuovo servizio "Autorizzazione alla sepoltura di un defunto"!

Autorizzazione alla cremazione di un defunto

🌄 È ora disponibile il nuovo servizio "Autorizzazione alla cremazione di un defunto"!

Domanda di agevolazione tributaria (TARI)

🌄 È ora disponibile il nuovo servizio "Domanda di agevolazione tributaria (TARI)"!

Qui trovi una lista degli errori più comuni in cui ci si può imbattere durante la progettazione di un servizio:

• lavorare al di fuori di un piano di realizzazione dei servizi e non sapere quante risorse (tempo) sia possibile dedicare al servizio su cui si sta lavorando. Perdere di vista l'obiettivo generale di digitalizzare tutti i servizi dell'ente

• progettare e sviluppare senza avere chiaro in mente quale sia l'obiettivo e in generale non avere obiettivi e aspettative condivise con i colleghi, tenendo conto della necessità di bilanciare qualità e costi di realizzazione

• non dare importanza adeguata all'adozione degli standard (sapendo comunicare ai colleghi i vantaggi in termini di qualità, tempi di realizzazione, solidità delle soluzioni adottate). Dedicare troppo tempo a personalizzazioni che non aggiungono valore significativo

• non conoscere a sufficienza il catalogo, dedicando tempo prezioso a "reinventare la ruota" quando si potrebbe partire da servizi già pronti ed allocare diversamente il proprio tempo

• fare modifiche direttamente in produzione anziché clonare il servizio per modificarlo in sicurezza. Mettere in produzione un servizio senza averne testato i flussi adeguatamente.

Per ordinare i dati e raggrupparli in specifiche sezioni, trascina dalla sezione "Layout" dell'elenco il componente "Elementi".

In questo modo crei una sorta di contenitore, al cui interno si trovano determinate classi di dati, di cui puoi configurare nome (1) e informazioni al cittadino (2).

Accedi alla scheda "Dati generali" (1) del servizio e specifica in giorni il tempo massimo di erogazione del servizio (2)

La ricevuta del servizio è la copia PDF (nel caso del servizio di pagamento dell'IMU, l'F24) generata nel momento in cui la pratica viene ricevuta dal sistema.

Viene inviata via email al cittadino, che può visualizzarla anche nella sua Area personale.

Accedi alla scheda "Ricevuta" del servizio (1) e seleziona il tipo di ricevuta prevista (2).

Il tipo di ricevuta

Come admin puoi stabilire:

• che la ricevuta con il riepilogo dei dati inseriti non venga generata automaticamente ("Modulo compilato: su richiesta");

• che la ricevuta venga generata automaticamente ("Modulo compilato: automatico");

• che il documento generato sia un F24 ("F24") - obbligatorio per il servizio "Pagare tributi IMU".

La trasformazione digitale della Pubblica Amministrazione italiana rappresenta un elemento centrale per migliorare l’efficacia, l’efficienza e la qualità dei servizi pubblici offerti a cittadini e imprese. La creazione di servizi digitali nella PA deve oggi seguire un insieme articolato di riferimenti normativi, linee guida e standard tecnici che garantiscono l’uniformità, la qualità e l’interoperabilità delle soluzioni adottate.

La piattaforma OpenCity Italia rispetta nativamente questi standard. Tuttavia, il rispetto delle regole tecniche e della normativa dipende anche dal modo in cui i singoli servizi vengono creati. I servizi presenti nel catalogo OpenCity Italia rispettano nativamente gli standard e OpenCity Italia ne garantisce il corretto funzionamento. Nel caso di servizi realizzati in autonomia dagli enti l'onere di rispettare i requisiti e garantire il funzionamento tecnico dei servizi realizzati è invece una responsabilità in capo all'ente.

Il presente manuale nasce quindi con l’obiettivo di supportare le amministrazioni pubbliche nella progettazione e realizzazione di servizi digitali semplici, accessibili, sicuri e orientati ai bisogni degli utenti, in coerenza con il quadro normativo e strategico nazionale ed europeo. Il manuale si rivolge a tutti i soggetti coinvolti nella progettazione, realizzazione e gestione di servizi digitali pubblici — dirigenti, responsabili IT, designer, sviluppatori, partner — offrendo un percorso pratico e coerente per creare soluzioni digitali moderne, efficienti e orientate a creare valore per l'ente e per i cittadini.

Per geolocalizzare una pratica, trascina nel modulo il componente "Address".

Nella sezione "Provider" del componente, imposta OpenStreetMap Nominatim come provider

Infine, nella sezione "API", verifica che il property name indicato sia "address".

Per consentire agli operatori di , accedi alla scheda "Dati generali" (1) del servizio e attiva la voce "Consenti agli operatori di richiedere intergrazioni per le pratiche di questo servizio" (2).

Accedi alla scheda "Dati generali" (1) del servizio e specifica il metodo di accesso richiesto agli utenti per attivare il servizio (2).

I metodi di autenticazione del servizio

I metodi di accesso previsti sono:

• SPID/CIE;

• .

Accedere senza login

Nel caso in cui il servizio preveda il metodo di accesso "Anonimo", gli utenti dovranno inserire manualmente i propri dati anagrafici.

Per permettere agli utenti di scegliere se autenticarsi o meno con SPID o CIE, attiva la voce "Suggerisci login per autocompletamento". Questo metodo di autenticazione è normalmente previsto per i servizi di contatto con l'Ente e di helpdesk (Prenota appuntamento; Richiedi assistenza; Segnala disservizio).

Accesso al sistema

L’accesso alla piattaforma avviene attraverso un link di accesso collocato nel footer (1).

OpenCity mette a disposizione un sistema di autenticazione alla piattaforma (o in alternativa, su richiesta, un connettore di autenticazione con l'identity management dell'ente).

In caso di utilizzo del sistema di autenticazione nativo, l'admin seleziona "Gestisci i servizi digitali" (2), inserisce username e password (3) e clicca su "Login" (4).

Creare una nuova password

L'admin può creare una nuova password tramite il link "Hai dimenticato la password?" collocato nella pagina di login

Qui l'admin indica l'indirizzo mail associato al suo utente oppure il suo username (1) e poi clicca su "Reimposta password" (2).

All'indirizzo mail indicato viene inviata una notifica di cambio password. Cliccando su "Reimposta password" (1), l'admin viene rimandato ad una schermata dove dovrà inserire quella nuova (2). Per confermare, l'admin clicca su "Cambia password" (3).

Il componente "Columns" serve per organizzare il layout di un form in più colonne affiancate, in modo da migliorare la leggibilità e la disposizione dei campi sullo schermo.

Non raccoglie dati, ma è puramente strutturale: ti aiuta a disporre i componenti in riga anziché in colonna.

Per riunire più componenti all'interno di colonne, trascina dalla voce "Layout" il componente "Columns".

Una volta inserito e configurato il titolo, trascina al suo interno i componenti che vuoi incolonnare.

Accedi alla scheda "Messaggi" del servizio per:

• abilitare l'invio di notifiche automatiche al cittadino ad ogni cambio di stato della pratica;

• configurare il testo delle notifiche.

Abilitare l'invio delle notifiche

Per attivare o disattivare l'invio di notifiche automatiche al cittadino per ogni cambio di stato della pratica, attiva la voce "Abilitare l'invio del messaggio?" presente per ogni stato.

Modificare il testo delle notifiche

Mentre configuri i messaggi, puoi:

• modificare l'oggetto delle notifiche automatiche al cittadino;

• modificare il testo della notifica;

Usare i placeholders

Quando modifichi il testo di una notifica, puoi utilizzare i placeholders disponibili alla voce "Placeholders disponibili".

I placeholders a disposizione si suddividono tra:

• generali: comuni a tutti i servizi digitali;

• specifici del servizio ("Modulo utente"): relativi ai campi che compongono il servizio digitale;

Copia il placeholder che vuoi inserire e incollalo nel testo del messaggio.

ll componente "HTML" è un componente non interattivo che serve per inserire contenuti statici o dinamici all'interno del modulo, senza raccogliere dati.

Puoi utilizzare un HTML per inserire eventuali messaggi di errore o comunque messaggi che vuoi rendere visibili all'utente durante la compilazione della pratica.

Una volta trascinato il componente nel modulo, accedi alla sezione "Display" e configura la voce "Content" con il testo che vuoi inserire nel modulo.

Utilizzando la piattaforma di OpenCity Italia (,), oltre ad API e webhook per realizzare integrazioni tra applicativi, l’Ente può autonomamente prototipare e portare in produzione i servizi.

Questo approccio è consigliato per i servizi più semplici e per iniziative specifiche dell'ente, non corrispondenti a servizi a catalogo. In questi casi ha disposizione un percorso che permette di rispondere in modo flessibile e veloce a iniziative non programmate e necessità operative che possono nascere nella gestione quotidiana delle attività. La sezione "creare un servizio" mette a disposizione le indicazioni operative su come procedere.

Il componente "Textfield" è uno dei più usati e serve per inserire un campo di input testuale nel form, dove l’utente può scrivere una singola riga di testo (es. nome, codice fiscale, indirizzo email, ecc.). Viene normalmente usato per raccogliere dati non strutturati.

Quando aggiungi un Textfield, puoi personalizzare vari aspetti, come:

• ;

• .

All'interno del modulo, puoi inserire componenti che non vengono visualizzati dagli utenti (es. ).

Le strade che puoi seguire sono due:

• inserire il componente "Hidden";

• usare la funzione hidden presente nei componenti.

Usare il componente "Hidden"

Trascina all'interno del modulo il componente "Hidden".

Usare la funzione hidden

Diversi componenti dispongono di questa funzione, che permette di renderlo invisibile agli utente durante il flusso di compilazione della pratica.

Nella sezione "Display" del componente, attiva la funzione "Hidden".

Collocati nella scheda "Assegnazione automatica" del servizio.

Tramite il menù a tendina, seleziona su quale campo basare l'assegnazione automatica delle pratiche.

Successivamente, seleziona l'ufficio a cui assegnare la pratica in base al valore del campo che hai indicato prima.

Puoi configurare alcuni componenti in modo tale che siano visibili solamente nel caso in cui sia l'operatore a compilare la pratica.

Nella sezione "API" del componente, compila la voce "Custom properties" con la proprietà "operator_restricted" di valore "true"

Successivamente, nella sezione "Layout", compila la voce "HTML Attributes" con l'attributo "readonly" di valore "true".

Infine, nella sezione "Conditional", compila la voce "Advanced condition" con il codice

Il componente "Select" permette all’utente di selezionare un'opzione da un elenco predefinito, simile a un menu a tendina.

Successivamente, collocati nella sezione "Data" e compila la voce "Data source label" con le opzioni che l'utente dovrà indicare in fase di richiesta, specificando il nome (label) e il valore (value).

Nella sezione "Ente", seleziona la voce "Invio messaggi".

Sarà poi necessario inserendo le relative chiavi univoche.

In questo capitolo vengono descritte in dettaglio le principali funzionalità a disposizione dell'admin. Tra queste: la configurazione dell’aspetto grafico della piattaforma; la configurazione delle integrazioni con servizi esterni — come AppIO e gli intermediari di pagamento; la gestione e creazione di utenti admin e operatore.

Dopo aver attivato appIO , nella scheda "AppIO" inserisci:

• l'identificativo del servizio;

• la chiave primaria;

• la chiave secondaria.

Una volta inserite queste informazioni, puoi testare il funzionamento di appIO inserendo un codice fiscale a cui inviare una notifica di prova.

Questo capitolo raccoglie i changelog delle modifiche e degli aggiornamenti apportati al catalogo dei servizi digitali.

La digitalizzazione dei servizi è una sfida complessa che solitamente produce un impatto su tutti i settori dell'ente e abbraccia decine o centinaia di servizi. A questo scopo risulta essenziale programmare le attività in accordo con i vertici dell'ente, in modo da assicurarsi di creare un percorso condiviso che conduca alla completa digitalizzazione dei servizi comunali. Per raggiungere questo obiettivo OpenCity Italia suggerisce di utilizzare un approccio misto, attivando tutti i servizi di interesse presenti a catalogo e realizzando invece in autonomia servizi non presenti a catalogo. In alcuni casi, più rari, l'ente può richiedere a OpenCity la progettazione e realizzazione di un servizio non presente a catalogo (per esempio nei casi in cui l'ente non disponga internamente delle risorse necessarie o quando la realizzazione di un servizio presenta sfide tecnologiche troppo complesse)

Cultura degli standard

La piattaforma Opencity Italia fa largo uso di componenti e flussi standard che permettono di realizzare la conformità normativa e creare esperienze efficaci per i cittadini e i funzionari: protocollazione automatica, gestione dei pagamenti, identificazione del richiedente, usabilità, accessibilità, precompilazione dei dati del cittadino. Tutte queste cose non devono essere progettate e realizzate ma vanno solamente configurate. Con un approccio di questo tipo si evita di "reinventare ogni volta la ruota" e si assicura che ogni volta che si porta in produzione un servizio esso abbia un livello qualitativo elevato e risponda ai rquisiti tecnici e normativi del settore pubblico.

Per ottenere questo risultato occorre che il personale dei Sistemi informativi conosca bene il funzionamento della piattaforma e sia nelle condizioni di realizzare in autonomia un servizio.

OpenCity Italia mette a disposizione un ampio catalogo che copre tutti i principali servizi pubblici di un Ente: in questo modo si parte da un modello di servizio realizzato con cura e già sottoposto a un ciclo di progettazione, sviluppo e test che ne garantisce la qualità. OpenCity garantisce il funzionamento dei servizi presenti a catalogo e fornisce assistenza tecnica in caso di problematiche relative al servizio.

Attualmente, OpenCity Italia dispone di un catalogo per i Comuni.

Sono in fase di definizione il catalogo per le ASL e quello per le Regioni e le Province, che verranno aggiornati e integrati nel presente manuale appena disponibili.

Costituzione di un'unione civile

🌄 È ora disponibile il nuovo servizio "Costituzione di un'unione civile"!

Costituzione di una convivenza di fatto

🌄 È ora disponibile il nuovo servizio "Costituzione di una convivenza di fatto"!

Attivazione lampade votive

🌄 È ora disponibile il nuovo servizio "Attivazione lampade votive"!

Rilascio copia atti incidenti stradali

🌄 È ora disponibile il nuovo servizio "Rilascio copia atti incidenti stradali"!

Deroga al divieto di circolazione

🌄 È ora disponibile il nuovo servizio "Deroga al divieto di circolazione"!

Autolettura del contatore idrico

🌄 È ora disponibile il nuovo servizio "Autolettura del contatore idrico"!

Iscrizione al doposcuola

🌄 È ora disponibile il nuovo servizio "Iscrizione al doposcuola"!

Iscrizione al pre-scuola

🌄 È ora disponibile il nuovo servizio "Iscrizione al pre-scuola"!

Attraverso i componenti spiegati nel capitolo precedente, la piattaforma permette agli admin di gestione funzioni diverse, come ad esempio la possibilità di effettuare calcoli, precompilare i campi con dati certificati o provenienti da API, impedire l'invio di più domande per uno stesso servizio e creare componenti visibili solamente agli operatori del servizio.

Una volta abilitata l'integrazione con PDND, clicca su "Impostazioni" e accedi alla sezione "Impostazioni della dashboard"

In questa sezione puoi:

• visualizzare la lista dei client abilitati;

• creare un nuovo client;

• modificare un client esistente;

• impostare un client come predefinito;

• eliminare un client.

Crea un client

Clicca su "Crea nuovo client" per procedere alla creazione del client.

Inserisci il nome e alla voce "Ambiente" seleziona la voce "Produzione"

Copia la chiave pubblica che viene generata.

Nell'ultima parte, inserisci il Client ID e il KID generati sul sito della PDND.

Abilita gli e-service

Una volta configurato il client, clicca su "Abilita" per abilitarlo alla fruizione di uno degli e-service disponibili.

Successivamente, incolla il purpose ID che hai trovato nella sezione di configurazione della PDND.

Modifica un client

Nella pagina di integrazione con la PDND, clicca su "Modifica client e e-services" per modificare un client.

Modificando un client puoi procedere all'abilitazione degli e-services.

Imposta un client come predefinito

Clicca sull'icona a forma di stella per impostare uno dei client in elenco come predefinito.

Elimina un client

Nella pagina di integrazione con la PDND, clicca sull'icona a forma di cestino per cancellare uno dei client in elenco.

Nella pagina "Ente", seleziona la voce "Aspetto grafico" per personalizzare l'aspetto grafico della piattaforma.

Motore di ricerca e catalogo servizi

Nel caso in cui il motore di ricerca e il catalogo dei servizi siano disabilitati, l’area personale non presenterà un’interfaccia utente (frontend) autonoma.

In questa configurazione, le schede informative relative ai servizi e il motore di ricerca sono accessibili dal sito web dell’ente (obbligatorio per i Comuni che hanno aderito alla misura 1.4.1. del PNRR).

Questo approccio consente di centralizzare l’accesso a tutti i servizi in un unico punto, facilitando la consultazione da parte degli utenti e garantendo una comunicazione più coerente e integrata all’interno del portale dell’ente.

Header e footer

Qui puoi configurare i link di header e footer della piattaforma, indicando:

• i link dell'amministrazione afferente e della navbar;

• il sottotitolo dell'Ente;

• i link alle voci di primo livello del sito web ("Sezioni");

• i link agli Argomenti del sito;

• punti di contatto e canali social;

• i link alle pagine di Trasparenza, Privacy e alla Dichiarazione di accessibilità

• i servizi di contatto dell'Ente;

Nella pagina "Ente", seleziona la voce "Pagamenti" per abilitare e configurare l'intermediario di pagamento usato dall'Ente.

Sono supportati diversi intermediari di PagoPA che consentono la creazione di dovuti secondo le necessarie impostazioni di ogni sistema di pagamento.

Una volta trovato l'intermediario del tuo Ente, clicca su "Abilita" e configura i parametri richiesti.

Successivamente, è necessario configurare il sistema di pagamento a livello di singolo servizio, inserendo alcuni dati specifici (per esempio la codifica che consente di riconciliare correttamente in contabilità il pagamento specifico del servizio).

Checkout di PagoPA

Come admin puoi abilitare il checkout di PagoPA.

Se attivato, in fase di pagamento il cittadino viene indirizzato direttamente sul portale di PagoPA, dove potrà effettuare il pagamento.

Il pagamento sarà comunque riportato all’interno dell’Area personale dell’utente.

Seleziona la voce "Amministratori" per creare nuovi utenti admin.

Successivamente, clicca su "Aggiungi" per creare un nuovo utente.

Collocati nella sezione "Impostazioni avanzate" e attiva la funzione "Consenti agli operatori di esprimere un'accettazione parziale sulla pratica"

In questo modo, gli operatori del servizi potranno effettuare un' delle richieste per quel servizio.

Accedi alla scheda "Dati generali" (1) del servizio e indica il flusso di lavoro previsto dal servizio digitale (2).

I flussi di lavoro di un servizio

La piattaforma mette a disposizione due flussi di lavoro diversi:

• per approvazione: la pratica viene presa in carico da un operatore e lavorata;

• per inoltro: la pratica viene acquisita comunque dal backoffice ma non viene lavorata dagli operatori.

Nel caso in cui sia attivo il flusso di lavoro per inoltro:

• l'operatore non può richiedere integrazioni e inviare messaggi all'utente;

• l'utente non può inviare messaggi all'operatore.

Normalmente l’oggetto della pratica viene creato in automatico, ma è possibile modificarlo.

Per configurarlo, trascina un campo "Textfield" all'interno del modulo.

Nella sezione "Display" del componente, nascondi il campo, e nella sezione "API" inserisci "appilication_subject" alla voce "Property name".

Successivamente, accedi alla sezione "Data" del componente e alla voce "Calculated value" inserisci il codice JavaScript per personalizzare l'oggetto della pratica.

title = form.title + "Oggetto pratica";
    if (data.for_whom === "delegato" || data.for_whom === "rappresentante" ) {
        value =title + data.beneficiary.data.family_name + " " + data.beneficiary.data.given_name + " "+ data.beneficiary.data.tax_id
    } else if  (data.for_whom === "impresa") {
        value = title + data.legal_entities.data.legal_name + " " + data.legal_entities.data.tax_id
    }

Accedi alla scheda "Protocollo" del servizio.

Qui trovi un elenco con tutti i sistemi di protocollazione integrati nella piattaforma. Trova quello in uso al tuo Ente e poi clicca su "Abilita".

Una volta attivato il protocollo, configura i parametri richiesti.

Nella pagina "Ente", seleziona la voce "Tema" per personalizzare il colore della piattaforma.

I temi della piattaforma disponibili sono selezionabili tramite un menù a tendina (1) e visibili in anteprima (2)

Puoi anche configurare top header, center header e navbar header in versione chiara.

Nel caso in cui la scheda informativa del servizio digitale sia pubblicata all'interno del sito web, accedi alla scheda "Dati generali" (1) del servizio, attiva la scheda esterna (2) e incolla la URL (3).

Per inserire un campo che preveda l'inserimento di una data durante la compilazione della pratica, trascina dall'elenco il componente "Textfield".

Configurare le date

Per controllare che la data inserita dall'utente abbia un formato giorno/mese/anno ed evitare che possa inserire una data nel passato, collocati nella sezione "Validation" del componente textfield (1), apri la voce "Custom validation" (2) e inserisci questo codice JavaScript (3):

date = moment(input, 'DD/MM/YYYY');
if (!date.isValid()){
valid = "La data inserita non è valida";
}
if (date.isBefore(moment())){
valid = "La data inserita non può essere nel passato";
}

I componenti sono i mattoncini con cui costruiamo i servizi digitali. La UI dei componenti (la grafica e il comportamento) segue lo UI kit di Designers Italia.

Nei paragrafi successivi trovi un elenco dei campi più utilizzati durante la creazione o la modifica di un servizio digitale.

Usare il service builder

Per procedere alla modifica del modulo di un servizio digitale, accedi alla scheda "Modulo".

In questa sezione, sulla sinistra, trovi un elenco di componenti che puoi utilizzare per modifiare il modulo del servizio.

Per inserire un componente, trascinalo dall'elenco all'interno del modulo.

Componenti standard

La creazione dei servizi avviene con un modello a componenti, basati su classi dati. Tutti i servizi possono utilizzare la libreria di componenti standard (Nested form), con i relativi vantaggi, tra cui la realizzazione del principio del once only.

Componenti custom

Nonostante il vantaggio nell'utilizzo di componenti standard, la piattaforma consente di di creare facilmente componenti custom per raccogliere diversi tipi di dati, da riutilizzare eventualmente anche per altri servizi.

Il componente Datagrid è un contenitore dinamico e ripetibile che ti permette di inserire più righe di dati, ciascuna con una o più colonne (campi), come se fosse una piccola tabella interattiva compilabile

Trascina dalla voce "Layout" il componente "Datagrid".

Una volta inserito e configurato il titolo (Label), trascina al suo interno i componenti che vuoi mettere nella tabella.

Prima di procedere alla creazione del modulo di un servizio digitale, l'amministratore deve configurare alcuni parametri, come ad esempio lo stato del servizio, il tipo di autenticazione previsto, l'integrazione con appIO e la possibilità da parte degli operatori di richiedere integrazioni per il servizio.

Dopo l’abilitazione della PDND sulla piattaforma, è possibile configurare un servizio digitale affinché utilizzi dati certificati provenienti da fonti ufficiali tramite l’integrazione con la Piattaforma Digitale Nazionale Dati.

Questa configurazione consente di precompilare o validare le informazioni inserite dal cittadino con dati aggiornati e attendibili.

Trascina nel modulo il componente "Calendar".

Una volta dato il titolo ("Label"), seleziona il calendario da integrare nel servizio alla voce "nome calendario". In elenco, troverai quelli creati all'interno della piattaforma

Alla sezione "API" compila la voce "property name" con "calendar". In caso contrario, l'integrazione con il sistema di prenotazione appuntamento non potrà funzionare.

Una volta inserito il componente, alla sezione "Integrazioni" del servizio, stabilisci il punto di attivazione della prenotazione

Le logiche sono uno strumento potente per rendere i moduli dinamici e reattivi a ciò che l’utente inserisce. Permettono di eseguire azioni automatiche sui componenti del form in base a condizioni specifiche.

Accedi alla sezione "Logic" del componente e clicca su "Add logic" per creare un nuovo conditional logic.

Una volta creata la logica:

• dai un titolo (1);

• scegli il trigger (es. simple) (2);

• stabilisci in quali casi si deve attivare (3).

Una volta creata la logica, aggiungi una o più azioni previste cliccando su "Add action"

Durante la configurazione, dai un titolo all'azione creata (1) e configurala (2)

Un esempio pratico: modificare la label di un textfield tramite le logiche

Inserisci un componente intitolato "Qual è il tipo di accesso?" con valori "semplice" e "generalizzato".

Una volta fatto, inserisci un componente intitolato in base al valore selezionato prima.

Alla voce "Logic" del textfield crea una nuova logica, intitolata "Quando il tipo di accesso è semplice"

Seleziona l'opzione "Simple" come trigger; il componente in relazione al quale impostiamo la logica è "Qual è il tipo di accesso" e il value "semplice".

Una volta fatto, aggiungi un'azione intitolata con il nome dell'azione che viene compiuta (es. "la label cambia"), scegliamo l'opzione "Property" come tipo (1) e come component property l'opzione "Label" (2).

Fatto questo, nel campo "Text", inserisci la label che vogliamo compaia quando il valore selezionato nel radio button è "semplice" (es. "Documento non pubblicato").

Ripeti il procedimento per modificare la label nel caso in cui il valore del radio button sia invece "generalizzato".

Per configurare l'angrafica, clicca su "Impostazioni" (1) e seleziona la voce "Ente" (2).

All'interno di questa pagina, puoi indicare:

• il nome dell’Ente;

• i codici meccanografico, catastale, IPA e AOO (affinché la protocollazione funzioni correttamente, tutti questi campi dovranno essere compilati);

• il link che compare sul titolo di ogni pagina (per esempio, il link al sito web istituzionale);

• il codice amministrativo dell'Ente.

OpenCity Labs configura in questa sezione la customer satisfaction (“Abilita verifica della soddisfazione utente” e “Entry point verifica della soddisfazione utente”).

Accedi alla scheda "Dati generali" (1) del servizio e seleziona lo stato in cui si trova il servizio digitale (2).

Gli stati del servizio

Gli stati previsti sono:

• bozza: il servizio è in lavorazione e non visibile agli utenti;

• pubblicato o privato: il servizio è attivo;

• non attivo: il servizio è sospeso e non visibile agli utenti;

• : il servizio è pubblico per un certo periodo di tempo.

Programmare la pubblicazione di un servizio

In caso di servizi digitali attivi solamente per un determinato periodo dell'anno (es. un servizio di iscrizione all'asilo nido) puoi programmare la pubblicazione di un servizio mettendo lo stato "Programmato" e indicando un periodo di tempo ("Data di attivazione").

Una volta passata la data di cessazione del servizio, questo non è più attivabile dagli utenti.

Per chiedere all'utente l'inserimento di uno o più allegati, trascina nel modulo il componente "File Sdc".

Nella sezione "Data" del componente, puoi:

• richiedere la protocollazione dell'allegato (1);

• indicare il formato (2);

• indicare le dimensioni previste (3).

Per creare e configurare gli uffici, clicca sulla sezione "Uffici" (1) e seleziona la voce omonima (2).

Qui puoi:

• ;

• ;

• .

Creare un ufficio

Per creare un nuovo ufficio, clicca sull'opzione "Crea nuovo ufficio" in basso a sinistra.

Modificare un ufficio

Per modificare un ufficio in elenco, clicca sull'opzione "Modifica".

Eliminare un ufficio

Per eliminare un ufficio, clicca sull'opzione "Elimina".

Configurare un ufficio

In fase di creazione o modifica di un calendario, puoi modificare alcune informazioni, come:

• gli operatori associati ("Operatori") - qui puoi indicare quali operatori fanno parte dell'ufficio;

• i servizi gestiti dall'ufficio ("Servizi") - in questa sezione vengono visualizzati tutti i servizi digitali, anche quelli ;

• il calendario associato all'ufficio ("Orario di apertura") - il dato è obbligatorio se si vuole attivare la funzione di prenotazione appuntamento per l'ufficio.

Come admin, disponi di due componenti che ti permettono di raccogliere le preferenze degli utenti durante la compilazione di un servizio:

• ;

• .

Select boxes

Per permettere all'utente di selezionare una o più opzioni del servizio, trascina nel modulo il componente "Select Boxes"

Una volta fatto, come per il , collocati nella sezione "Data" e compila la voce "Data source label" con le opzioni che l'utente dovrà indicare in fase di richiesta, specificando il nome (label) e il valore (value).

Il radio button

Per far scegliere all'utente una sola opzione tra quelle previste, trascina nel modulo il componente "Radio button".

Una volta fatto, collocati nella sezione "Data" e compila la voce "Data source label" con le opzioni che l'utente dovrà indicare in fase di richiesta, specificando il nome (label) e il valore (value).

Un servizio digitale può essere configurato in modo da prevedere un pagamento da parte del cittadino.

L'utente può effettuare un pagamento tramite l' usato dall'Ente oppure effettuare il pagamento tramite

Pagamento tramite pagoPA

La modalità di pagamento tramite pagoPA può essere definita in due modalità alternative:

• : il cittadino effettua il pagamento durante il flusso di compilazione della pratica, prima dell’invio.

• : il pagamento viene richiesto successivamente, tramite un avviso inviato dall’operatore, prima che la pratica venga accettata;

Pagamento tramite marca da bollo

Puoi configurare anche il pagamento delle marche da bollo, che possono essere:

• : il pagamento viene effettuato dal cittadino durante la compilazione della pratica;

• : l’operatore richiede il pagamento al cittadino prima dell’accettazione della pratica.

Qui trovi la lista di attività da seguire per la realizzazione di un servizio digitale.

Capire

Progettare

Prototipare

Come admin puoi impedire che un utente invii più di una richiesta per lo stesso servizio, facendo una verifica sul codice fiscale.

Trascina un componente Textfield all'interno del modulo

Una volta fatto:

• modifica il codice JSON del campo che hai inserito;

• inserisci il seguente codice:

{
  "label": "unique_id",
  "calculateValue": "value = data.applicant.data.fiscal_code.data.fiscal_code",
  "key": "unique_id",
  "type": "hidden",
  "input": true,
  "tableView": false
}

Nella sezione "Data" di un componente di tipo testuale (textfield o text area), è possibile effettuare calcoli automatici in base al valore indicato in altri component.

La funzione torna utile nei casi in cui sia necessario calcolare:

• calcolare il punteggio per una graduatoria (magari per un servizio di iscrizione all'asilo nido)

sum = 0
sum += (data.work_condition === "occupato") ? 5 : 0
sum += (data.tutor_work_condition === "occupato") ? 5 : 0
sum += (data.minor_invalid === "si") ? 6 : 0
sum += (parseFloat(data.isee_value) <= 21000) ? 4 : 0
sum += (parseInt(data.minors_number) >= 0) ? parseInt(data.minors_number) : 0
sum += (data.other_minors === "si") ? 0 : 3
sum += (data.single_tutor === "si") ? 4 : 2
sum += (data.pregnancy_condition === "si") ? 4 : 0
value = sum

• i giorni di esposizione della segnaletica (per un servizio di occupazione temporanea del suolo pubblico).

initialDate = moment(data.initial_date, 'DD/MM/YYYY')
finalDate = moment(data.final_date, 'DD/MM/YYYY')
value = finalDate.diff(initialDate, 'days')

Calcolare un importo

Questa funzione può essere utilizzata anche nei casi in cui sia necessario calcolare un importo personalizzato.

Per farlo, trascina un componente "Hidden" nel modulo del servizio e nella sezione "API" del componente inserisci "payment_amount" alla voce "Property name"

Successivamente, nella sezione "Data", compila il campo "Calculated value" con il codice JavaScript di calcolo.

if (data.in_virtue === "unico") {  
  value = 50
} else if (data.in_virtue === "amministratore") { 
  value = 30
} else { 
  value = 0
}

Puoi costruire relazioni tra componenti o tra dati presenti all’interno di componenti. Una relazione può essere:

• semplice: la condizione di comparsa dipende da un solo componente o dato;

• avanzata: la condizione di comparsa dipende da più componenti o dati.

In questo modo puoi gestire i set di dati in modo tale che vengano visualizzati in base a come l'utente ha compilato la pratica.

Condizionale semplice

Nella sezione "Conditional" di un componente devi indicare:

• se il componente deve o non deve apparire quando la condizione è vera (1);

• il componente a cui fare riferimento per la condizione (2);

• il vale da controllare dentro il componente indicato (3).

Condizionale avanzato

Nella sezione "Conditional", collocati alla voce "Advanced conditions" e inserisci la condizione in formato JavaScript.

Usare le API - un esempio pratico

Puoi usare il condizionale avanzato anche in caso di .

Nell'esempio riportato, il codice JavaScript riportato effettua una verifica condizionale sulla base di alcune categorie e tipi di strade, per determinare se mostrare o meno un banner di errore.

Questo codice verifica che la categoria sia "strade" e che il tipo sia uno di quelli previsti e controlla se la strada selezionata corrisponde a una delle circoscrizioni valide restituite dall'API.

Se non corrisponde a nessuna, allora imposta show = true, per mostrare un avviso che avverte il cittadino.

Per creare e configurare gli operatori della piattaforma, clicca su "Uffici" (1) e seleziona la voce "Operatori" (2).

Qui puoi:

• visualizzare la lista degli operatori;

• nuovi operatori;

• gli operatori;

• ;

• ;

• di appartenenza di un operatore;

• .

Creare un operatore

Per creare un operatore, clicca sul pulsante "Aggiungi" in fondo a sinistra (1) e sceglie l'opzione "Crea nuovo operatore" (2).

Elimina un operatore

Una volta selezionato l'operatore da eliminare, clicca sui tre pulsanti a destra del nome (1) e scegli la voce "Elimina" (2).

Abilitare o disabilitare un operatore ai servizi

Una volta selezionato l'operatore, clicca sui tre pallini a destra del nome (1) e seleziona la voce "Modifica" (2).

Successivamente, seleziona la sezione "Servizi" (1) e indica i servizi a cui abilitare l'utente (2).

Abilitare o disabilitare un operatore ai calendari

Una volta scelto l'operatore, clicca sui tre pallini a destra del nome (1) e seleziona la voce "Modifica" (2).

Successivamente, seleziona la sezione "Calendari" (1) e indica i calendari a cui abilitare l'operatore (2).

Indicare l'ufficio di appartenenza

Una volta scelto l'operatore, clicca sui tre pallini a destra del nome (1) e seleziona la voce "Modifica" (2).

Successivamente, seleziona la sezione "Uffici" (1) e indica l'ufficio di appartenenza dell'operatore (2).

Assegnare o togliere il ruolo di Manager

Una volta scelto l'operatore, clicca sui tre pallini a destra del nome (1) e seleziona la voce "Rendi manager" (2).

Trascina il componente nel modulo del servizio.

Nella sezione "API" del componente aggiungi:

• la proprietà profile_block con valore "true";

• la proprietà eservice con il corretto uuid;

• la proprietà format con il corretto formato.

Tabella di configurazione della PDND

Gli uuid e i formati corretti che devi inserire sono indicati in questa tabella:

La Stanca del Cittadino effettua diverse interazioni con il sistema di protocollo, ma tutte seguono una logica comune.

Le interazioni avvengono in seguito ad alcune azioni da parte cittadini e degli operatori:

• Invio di una pratica da parte del cittadino (con relativi documenti allegati);

• Invio di una richiesta di integrazioni da parte di un operatore;

• Invio di una integrazione da parte del cittadino;

• Approvazione/rifiuto di una pratica.

Per ognuna di queste operazioni viene prodotto un documento, mentre la configurazione standard di OpenCity Italia prevede l’archiviazione di tutti i documenti senza necessità di alcuna attività operativa da parte del funzionario: i documenti vengono raccolti in un unico fascicolo relativo ad un servizio per ciascun anno solare

Iscrizione alla scuola dell'infanzia

🐞Correzioni di testo

• Sezione "I tuoi figli"

  • Prima: "Inserisci i dati dello studente che beneficerà del contributo"

  • Ora: "Inserisci i dati di tutti i figli del nucleo familiare: li salveremo nel tuo profilo e li utilizzeremo per precompilare le future pratiche"

• Sezione "Beneficiario"

  • Prima: "Inserisci i dati del minore per cui richiedi il contributo"

  • Ora: "Seleziona il figlio che vuoi iscrivere"

🌄Aggiornamenti di etichette e testi

• Sezione "Beneficiario" – Menu a tendina

  • Prima: "Minore che vuoi iscrivere"

  • Ora: "Figlio che vuoi iscrivere"

• Sezione "Minori del nucleo familiare"

  • Prima: "Indica i minori del nucleo familiare"

  • Ora: "Trovi qui sotto il numero di minori del tuo nucleo familiare. Specifica se qualcuno è già iscritto alla scuola dell'infanzia. Se nella sezione 'I tuoi figli' hai indicato solo il figlio che stai iscrivendo, torna indietro per aggiungere gli altri figli"

• Sezione "Minori del nucleo familiare" – Blocco di testo

  • Prima: "Altri minori già iscritti alla scuola dell'infanzia - Indica se sono presenti altri minori già iscritti alla scuola dell'infanzia"

  • Ora: "Altri figli iscritti alla scuola dell'infanzia - Indica se hai altri figli minori già iscritti alla scuola dell'infanzia"

• Sezione "Minori del nucleo familiare" – Radio button

  • Prima: "Sono presenti altri minori già iscritti alla scuola dell'infanzia?"

  • Ora: "Hai altri figli già iscritti alla scuola dell'infanzia?"

• Sezione "Minori del nucleo familiare" – Blocco di testo

  • Prima: "Dati degli altri minori già iscritti alla scuola dell'infanzia - Indica gli altri minori già iscritti alla scuola dell'infanzia"

  • Ora: "Dati degli altri figli iscritti alla scuola dell'infanzia - Indica gli altri figli già iscritti alla scuola dell'infanzia"

• Sezione "Minori del nucleo familiare" – Menu a tendina

  • Prima: "Altri minori già iscritti alla scuola dell'infanzia"

  • Ora: "Altri figli già iscritti alla scuola dell'infanzia"

🐞Configurazioni tecniche

• Resa obbligatoria la selezione nel menu a tendina "Altri figli già iscritti alla scuola dell'infanzia"

Iscrizione al trasporto scolastico

🐞Correzioni di testo

• Sezione "I tuoi figli"

  • Prima: "Inserisci i dati dello studente che beneficerà del contributo"

  • Ora: "Inserisci i dati di tutti i figli del nucleo familiare: li salveremo nel tuo profilo e li utilizzeremo per precompilare le future pratiche"

• Sezione "Beneficiario"

  • Prima: "Inserisci i dati del minore per cui richiedi il contributo"

  • Ora: "Seleziona il figlio che vuoi iscrivere"

🌄Aggiornamenti di etichette e testi

• Sezione "Beneficiario" – Menu a tendina

  • Prima: "Minore che vuoi iscrivere"

  • Ora: "Figlio che vuoi iscrivere"

• Sezione "Studenti iscritti a scuola"

  • Prima: "Studenti iscritti a scuola"

  • Ora: "Altri figli iscritti a scuola"

• Sezione "Altri figli iscritti a scuola"

  • Prima: "Indica se sono presenti altri studenti iscritti a scuola"

  • Ora: "Indica se hai altri figli iscritti a scuola"

• Sezione "Altri figli iscritti a scuola" – Radio button

  • Prima: "Sono presenti altri studenti iscritti a scuola?"

  • Ora: "Hai altri figli iscritti a scuola?"

• Sezione "Altri figli iscritti a scuola" – Blocco di testo

  • Prima: "Dati degli altri studenti iscritti a scuola - Indica gli altri studenti iscritti a scuola"

  • Ora: "Dati degli altri figli iscritti a scuola - Indica gli altri figli iscritti a scuola. Se nella sezione "I tuoi figli" hai indicato solo il figlio che stai iscrivendo, torna indietro per aggiungere gli altri figli"

• Sezione "Altri figli iscritti a scuola" – Datagrid

  • Prima: "Dati degli altri studenti già iscritti a scuola"

  • Ora: "Dati degli altri figli già iscritti a scuola"

• Sezione "Altri figli iscritti a scuola" - Menu a tendina

  • Prima: "Altro studente già iscritto"

  • Ora: "Altro figlio già iscritto"

🐞Configurazioni tecniche

• Resa obbligatoria la selezione nel menu a tendina "Altro figlio già iscritto"

Iscrizione alla mensa scolastica

🐞Correzioni di testo

• Sezione "I tuoi figli"

  • Prima: "Inserisci i dati dello studente che beneficerà del contributo"

  • Ora: "Inserisci i dati di tutti i figli del nucleo familiare: li salveremo nel tuo profilo e li utilizzeremo per precompilare le future pratiche"

• Sezione "Beneficiario"

  • Prima: "Inserisci i dati del minore per cui richiedi il contributo"

  • Ora: "Seleziona il figlio che vuoi iscrivere"

🌄Aggiornamenti di etichette e testi

• Sezione "Beneficiario" – Menu a tendina

  • Prima: "Minore che vuoi iscrivere"

  • Ora: "Figlio che vuoi iscrivere"

• Sezione "Studenti iscritti a scuola"

  • Prima: "Studenti iscritti a scuola"

  • Ora: "Altri figli iscritti a scuola"

• Sezione "Altri figli iscritti a scuola"

  • Prima: "Indica se sono presenti altri studenti iscritti a scuola"

  • Ora: "Indica se hai altri figli iscritti a scuola"

• Sezione "Altri figli iscritti a scuola" – Radio button

  • Prima: "Sono presenti altri studenti iscritti a scuola?"

  • Ora: "Hai altri figli iscritti a scuola?"

• Sezione "Altri figli iscritti a scuola" – Blocco di testo

  • Prima: "Dati degli altri studenti iscritti a scuola - Indica gli altri studenti iscritti a scuola"

  • Ora: "Dati degli altri figli iscritti a scuola - Indica gli altri figli iscritti a scuola. Se nella sezione "I tuoi figli" hai indicato solo il figlio che stai iscrivendo, torna indietro per aggiungere gli altri figli"

• Sezione "Altri figli iscritti a scuola" – Datagrid

  • Prima: "Dati degli altri studenti già iscritti a scuola"

  • Ora: "Dati degli altri figli già iscritti a scuola"

• Sezione "Altri figli iscritti a scuola" - Menu a tendina

  • Prima: "Altro studente già iscritto"

  • Ora: "Altro figlio già iscritto"

🐞Configurazioni tecniche

• Resa obbligatoria la selezione nel menu a tendina "Altro figlio già iscritto"

La piattaforma permette di utilizzare un set di componenti standard, denominati nested forms, che permettono di raccogliere dati in modo consistente tra i diversi servizi

Attraverso l'utilizzo di questi componenti, possiamo raccogliere dati in modo consistente tra i diversi servizi, mettendo a disposizione degli utenti funzioni come:

• funzioni di precompilazione dati tra i servizi;

• acquisizione di dati certificati via PDND;

• visualizzazione e aggiornamento dei dati nel profilo utente;

• funzioni di acquisizione dati terze parti (es. ISEE).

OpenCity Italia mette a disposizione un elenco fornito di nested forms da utilizzare; per usufruire di queste funzioni, però, si consiglia di utilizzare quelli contrassegnati con "OC" e elencati qui:

Usare i nested form all'interno del modulo

Dalla colonna dei componenti seleziona quello chiamato "nested form".

Una volta trascinato nel modulo, seleziona nella voce "Form" del componente quello che vuoi utilizzare.

Una volta selezionato, disattiva la voce "Save as reference".

Entrambi i metodi di pagamento previsti sono configurabili in sezioni dedicate del servizio.

Configurare un pagamento tramite pagoPA

Accedi alla scheda "Pagamenti" del servizio (1) e specifica la tipologia di pagamento (2):

Le tipologie previste sono:

• immediato: l'utente effettua il pagamento durante la compilazione della pratica;

• posticipato: l'operatore inoltra la richiesta di pagamento durante l'accettazione della pratica.

Una volta scelta la tipologia, indica l'importo previsto dal servizio.

Infine, abilita uno degli intermediari di pagamento in elenco (1) e configura i parametri previsti (2).

Configurare un importo dinamico

Per inserire un importo dinamico, inserisci un campo textfield all'interno del modulo e attiva la funzione hidden.

Nella sezione API del componente, alla voce "Property Name" inserisci "payment_amount".

Successivamente, collocati nella sezione "Data", disattiva la funzione "Clear value when hidden" (1) e alla voce "Calulated Value" inserisci il codice JavaScript di calcolo (2).

if (data.exempt) {
  value = 0;
} else {
  value = 15;
}

Personalizzare la causale di pagamento

Per personalizzare il valore della causale di pagamento, inserisci un campo text field e attiva la funzione hidden.

Nella sezione API del componente, alla voce "Property Name" inserisci "payment_description".

Indica il numero massimo di caratteri alla voce "Maximum Length" della sezione "Validation".

Successivamente, disattiva la funzione "Clear value when hidden" nella sezione "Data" (1) e alla voce "Calculated value" inserisci il codice JavaScript di personalizzazione della causale (2).

if (["parente"].includes(data.for_whom)) {
  value = `Diritti di segreteria per l'autorizzazione alla sepoltura per ${data.applicant.data.completename.data.name} ${data.applicant.data.completename.data.surname}`
} else {
  value = `Diritti di segreteria per l'autorizzazione alla sepoltura di ${data.applicant.data.completename.data.name} ${data.applicant.data.completename.data.surname} per ${data.beneficiary.data.given_name} ${data.beneficiary.data.family_name}`
}

Eventualmente, puoi inserire la causa personalizzata nel campo "Default value" della sezione "Data".

Configurare un pagamento in bolli

Accedi alla scheda "Bolli" del servizio (1) e aggiungi uno o più bolli (2).

Dopo averli aggiunti, configura i bolli indicando:

• causale e identificativo;

• importo;

• fase di immissione.

Un servizio digitale può essere configurato in modo da prevedere una fase di prenotazione appuntamento da parte del cittadino presso uno degli uffici dell'Ente.

Per farlo, devi avere a disposizione un calendario nella sezione dedicata alla configurazione della Prenotazione appuntamenti e utilizzare il componente corretto.

Configurare un calendario

Clicca su "Funzionalità avanzate" e scegli la voce "Prenotazione appuntamenti" per accedere all'elenco dei calendari.

Qui puoi:

• creare un nuovo calendario (1);

• modificare un calendario esistente (2);

• eliminare un calendario in elenco (3).

Quando modifichi o crei un calendario, devi configurare:

• il titolo del calendario;

• il proprietario e la mail di contatto;

• il luogo dell'appuntamento;

• gli operatori abilitati al calendario: in ogni calendario trovi una lista con tutti gli operatori della piattaforma. Per abilitarne uno alla gestione degli appuntamenti e alla configurazione del calendario, clicca sulla checkbox alla sinistra del nome;

• disponibilità e preavviso di una prenotazione: puoi da quando (1) e per quanto tempo (2) l'utente vedrà il calendario prenotabile. Puoi anche indicare con quanto giorni di anticipo è possibile disdire l'appuntamento (3);

• la durata della bozza, in minuti. Superati i minuti indicati, la bozza viene automaticamente cancellata e lo slot torna ad essere libero;

La piattaforma OpenCity Italia permette all'utente di utilizzare dati di pratiche già inviati per la compilazione di nuove istanze, senza la necessità di inserirli nuovamente (once only). Tramite integrazione con PDND, inoltre, è possibile acquisire dati certificati, eliminando la necessità di controlli successivi da parte degli operatori.

Configurazione del once only

Per attivare questa funzione, è necessario utilizzare i . Una volta trascinato il componente nel modulo, devi:

• nella sezione "Display", specificare la label del componente;

• nella sezione "API", inserire la chiave corretta;

• nella sezione "API", alla voce "Custom properties" aggiungere la proprietà profile_block con valore "true";

Tabella di configurazione del once only

Le Label e le chiavi API corrette che devi inserire sono riportate in questo elenco:

Integrazione con PDND

La piattaforma ti permette di e quindi di, utilizzando dati certificati.

La piattaforma consente la configurazione di servizi digitali suddivisi in più fasi, tipicamente due. In questa modalità, la seconda istanza del servizio è in grado di recuperare e riutilizzare i dati inseriti nella prima fase, favorendo la continuità del processo e la gestione da parte degli operatori.

In questo capitolo viene illustrato, a scopo esemplificativo, il caso di un servizio di iscrizione all’asilo nido, strutturato in due pratiche distinte:

• una prima pratica di richiesta di iscrizione;

• una seconda pratica di conferma dell’iscrizione, che recupera in automatico alcuni dei dati forniti durante la prima fase.

Inserisci un campo "Select"

Trascina all'interno del modulo un componente "Select" e nella sezione "Data" inserisci l'opzione "URL" nel campo "Data Source Type"

Successivamente, inserisci l'endpoint API da utilizzare nella voce "Data Source URL".

Nel campo "Request headers" compila la colonna "Key" con "Authorization" e la colonna "Value" con "Bearer {{data.token}}"

Compila il campo "Data Path" con il valore "data" (1) e seleziona la voce "Autotype" nel campo "Storage Type" (2)

Infine, scegli il valore da mostrare alla voce "Item template".

Configura il token

Aggiungi al modulo un componente di tipo Hidden e, nella sezione "Data", configura il campo "Calculated Value" inserendo il codice JavaScript dedicato alla chiamata API.

async function get_data() {
  window.FormioHelper.authenticatedCall("session-auth")
  .then(
    function(promise) {
      console.log(promise)
      instance.setValue(promise.token)
    })
}

if (!data.token) {
  get_data()
}

console.log(value)

Imposta l'origine della URL

Aggiungi al modulo un campo di tipo Hidden e, nella sezione "Data", configura il campo "Calculated Value" inserendo il codice JavaScript dedicato.

value = window.location.origin

Come admin puoi configurare alcuni campi (es. Select o Textfield) in modo tale che vengano compilati con dati presi dalle API.

Configurare una select con dati presi dalle API

Nella sezione "Data" del componente, configura la voce "Data source type" con l'opzione URL

Successivamente inserisci l'endpoin API da utilizzare alla voce "Data source url"

Alla voce "Storage type" indica il dato da riportare nella select (è consigliabile usare l'opzione "autotype", in modo da predere tutto l'oggetto restituito dall'API)

Infine, scegli il valore da mostrare alla voce "Item template".

È consigliabile compilare anche il campo "Limit" e indicare un numero massimo di item da visualizzare.

Più alto è il valore indicato più tempo la select ci metterà a caricare gli item; è quindi consigliabile indicare un massimo di 50

Configurare un text field con i dati presi da API

Nella sezione "Data" del componente, compila la voce "Calculated value" con un codice Json contentente l'URL API:

Qui trovi un codice di esempio in cui vengono richiamati i dati di un'utenza TARI basandoci sul codice fiscale del richiedente

async function get_data(url, token) {
    try {
        const response = await fetch(url, {
            method: 'GET', 
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        })

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`)
        }

        const data = await response.json() // Parse JSON response
        instance.setValue(data.contract_code)
    } catch (error) {
        instance.setValue("ERRORE")
        console.error('Error fetching data:', error)
        throw error // Optionally re-throw the error for further handling
    }
}

if (!value && data?.applicant?.data.fiscal_code?.data?.fiscal_code && data?.token) {
  get_data(`https://govway.comune.bugliano.pi.it/govway/Ente/TARI/v1/getContractCode.php?cf=${data.applicant.data.fiscal_code.data.fiscal_code}`, data.token)
}

API non protette da autenticazione

Per popolare un form, puoi utilizzare API non protette da autenticazione.

In questo caso, oltre allo sblocco di CSP da parte di OpenCity Italia, è necessario che le API utilizzate siano pubbliche e raggiungibili.

API protette da autenticazione

Dataset e micro servizi esterni alla piattaforma possono essere facilmente integrati tramite il flusso di autenticazione basato su JWT (JSON Web Token) e JWKS (JSON Web Key Set)

Questo flusso di autenticazione prevede alcuni passaggi chiave e interazioni tra:

• client (browser dell'utente)

• area personale

• micro servizio esterno

Di seguito il processo punto per punto:

1. Il client richiede il token

Il client invia una richiesta all'area personale per ottenere un JWT, spesso includendo le credenziali dell'utente o altre forme di autorizzazione.

Come descritto nella sezione Single Sign-On è possibile per un utente autenticato richiedere un token di autenticazione per la propria sessione.

Questa operazione può essere effettuata facendo una chiamata alle API:

oppure come utente non autenticato effettuando una chiamata POST alle API

curl --request POST \
  --url https://servizi.comune.bugliano.pi.it/lang/api/auth \
  --header 'Content-Type: application/json' \
  --data '{
	"username": "username",
	"password": "password"
}'

2. L'area personale rilascia il token

L'area personale autentica il client, genera un JWT e lo firma con una chiave privata.

Il token viene quindi restituito al client.

{
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6InNkYy1xYSJ9.eyJpYXQiO.c2VybmFtZSI6ImFkbWluIiwiaWQiOiI2ZmZkZWRkZi04NmZhLTRjYmEtODUzNC05YTBlNjZmZTNlYmYiLCJ0ZW[...]5hbnRfaWQiOiI2MGUzNWYwMi0xNTA5LTQwOGMtYjEwMS0zYjFhMjgxMDkzMjkifQ.lFe0MR-LAj[...]RjoVvqwk3OX23T642ETu8PUy8sFaVRf1oM1qAnPhLEpnOcrIQY65mpKw6mrJ1rzZM5OVvEeOc4xxmtgcBOfMEBJo_Dw1pMfZHOv2S1S50Zr9XNxk0LcfWjXGdC7wy81eF7UuF-3cX9W"
}

3. Il client richiede la risorsa al micro servizio esterno:

Il client invia una richiesta al micro servizio esterno per accedere a una risorsa protetta, includendo il JWT nell'intestazione Authorization.

curl --request GET \
  --url '{Url API micro servizio esterno}' \
  --header 'Authorization: Bearer {JWT Token}'

4. Il micro servizio esterno convalida il token

Per verificare la validità del token il micro servizio esterno deve:

• Estrarre il JWT dalla richiesta

• Recuperare il JWKS dall'area personale, il JWKS contiene le chiavi pubbliche necessarie per verificare la firma del JWT.

• Verificare la firma del JWT e convalidare le sue richieste

5. Accesso concesso/negato:

In base alla validità del JWT il micro servizio esterno concede o nega l'accesso alla risorsa richiesta.

Oltre alla validità del token si possono verificare le affermazioni in esso contenute.

Il payload del token prodotto dall'area personale presenta delle informazioni utili a capire se quello specifico utente oltre ad avere un token valido ha i permessi per ottenere la risorsa richiesta.

Di seguito un esempio di payload del token

{
  "iat": 1718278670,
  "exp": 1719142670,
  "roles": [
    "ROLE_CPS_USER",
    "ROLE_USER"
  ],
  "username": "BNRMHL75C06G702B",
  "id": "5b00796e-ef10-4c98-b9f5-b0f7ffd7a17d",
  "tenant_id": "60e35f02-1509-408c-b101-3b1a28109329"
}

Un esempio pratico

Qui trovi un esempio dettagliato di un'integrazione di un modulo Opencity Italia che attinge a una API protetta mediante l'API gateway opensource GovWay di Link.it

La piattaforma permette funzioni di validazione dei dati

Obbligatorietà dei contenuti

Per rendere la compilazione di un campo obbligatoria, attiva la funzione "required" nella sezione "Validation"

Dato presente una sola volta nel modulo

Per far sì che un dato possa essere inserito solo una volta durante la compilazione, nella sezione "Validation" del componente attiva la funzione "unique"

Lunghezza minima e massima (datagrid)

Per i componenti Datagrid puoi configurare la lunghezza minima e massima del testo inserito nel campo.

Nella sezione "Validation" del componente, compila le voci Maximum length e Minimum length con valori numerici.

Ricordati di inserire il messaggio di errore che compare all'utente alla voce "Custom error message".

Verificare le date inserite

Una volta inserita la data, puoi configurare il formato e verificare che il cittadino non possa inserire date nel passato.

Verificare l'età di una persona

Durante la configurazione di una data, nel caso in cui il servizio preveda l'inserimento di una data di nascita, puoi controllare che questa venga inserita correttamente.

Nella sezione "Validation" del componente, compila la voce "Custom validation" con il codice JavaScript di verifica, ad esempio prevedendo che venga inserita la data di nascita di un minorenne

date = moment(input, 'DD/MM/YYYY')
if (date.isAfter(moment())) {
  valid = "La data non può essere nel futuro"
} else {
  if (moment().diff(date, 'years') > 18) {
    valid = "L'età inserità non è quella di un minorenne"
  }
}

Regular expression pattern

Il pattern è una stringa che rappresenta una espressione regolare usata per verificare se il valore inserito in un campo rispetta certe regole di formato. È un modo per assicurarsi che, ad esempio, un campo email, telefono o codice postale abbia la struttura corretta.

Nella sezione "Validation" del componente (normalmente un Text field), compila la voce "Regular expression pattern" con la struttura prevista dal dato inserito

Ricordati di inserire il messaggio di errore che compare all'utente alla voce "Custom error message".

Lunghezza minima e massima del dato

Durante la configurazione di un componente Text field, puoi configurare:

• la lunghezza del testo (1)

• il numero di parole (2).

Ricordati di inserire il messaggio di errore che compare all'utente alla voce "Custom error message".

Verificare la residenza del richiedente

Per verificare la residenza del richiente devi:

• inserire un campo Hidden;

• compilare la voce "Label" nella sezione "Display" e la voce "Property name" nella sezione "API" con residence_check

• compilare la voce "Calulated value" della sezione "Data" con il codice JavaScript di controllo

Qui trovi un codice di esempio, che fa una mappatura tra il Comune indicat dall'utente in fase di compilazione e il tenant.

window.FormioHelper.getTenantInfo().then(
(info) => {
tenant = info.name.toLowerCase()
locations = []
residence = data.beneficiary.data.address.data.address_locality
locations.push(residence)
toCheck = []
for (var location of locations) {
if (location !== "") { toCheck.push(location); }
}
toCheck = toCheck.map(function(place){return tenant.search(place.toLowerCase())})
show = true
for (var place of toCheck) {
if (place >= 0) {
show = false
break;
}
}
instance.setValue(show)
}
)

Una volta eseguita questa prima parte:

• inserisci un campo Columns in cui inserire un campo HTML e un checkbox obbligatorio e disabilitato.

• accedi al Json del componente Columns e inserisci il codice di controllo:

Qui trovi un codice di esempio:

{
"label": "Columns",
"columns": [
{
"components": [
{
"label": "HTML",
"tag": "div",
"className": "alert alert-danger",
"attrs": [
{
"attr": "",
"value": ""
}
],
"content": "
Attenzione!
\nNon puoi inviare questa pratica. La residenza del beneficiario non si trova nel Comune",
"refreshOnChange": false,
"key": "html17",
"type": "htmlelement",
"input": false,
"tableView": false
}
],
"width": 12,
"offset": 0,
"push": 0,
"pull": 0,
"size": "md",
"currentWidth": 12
},
{
"components": [
{
"label": "fail_applicant",
"customClass": "d-none",
"disabled": true,
"tableView": false,
"validate": {
"required": true
},
"key": "fail_applicant2",
"type": "checkbox",
"input": true,
"defaultValue": false
}
],
"width": 12,
"offset": 0,
"push": 0,
"pull": 0,
"size": "md",
"currentWidth": 12
}
],
"key": "columns9",
"conditional": {
"show": true,
"when": "residence_check",
"eq": "true"
},
"type": "columns",
"input": false,
"tableView": false
}

Verificare l'indirizzo del richiedente

Per verificare l'indirizzo inserito da un utente in fase di richiesta, inserisci nel modulo un nested form OC-Residenza.

Successivamente, inserisci un campo Columns in cui inserire un campo HTML e un checkbox obbligatorio e disabilitato.

Nella sezione "Contional" del campo Columns compila la voce "Advanced conditions" con il codice di controllo:

Qui trovi un codice di esempio per cui il richiedente viene bloccato quando la provincia inserita non è quella di Trento:

show = 
  data.sport_organization_address?.data.county?.length > 0 &&
  data.sport_organization_address.data.county !== "TN"

Verificare l'ISEE del richiedente

Per verificare il valore ISEE inserito da un utente in fase di richiesta, inserisci nel modulo un nested form OC-ISEE.

Successivamente, inserisci un campo Columns in cui inserire un campo HTML e un checkbox obbligatorio e disabilitato.

Una volta fatto, configura il codice json del componente Columns con il codice di controllo.

Qui trovi un codice di esempio per cui il richiedente viene bloccato quando l'importo ISEE inserito supera i 17.747,58

{
  "label": "Columns",
  "columns": [
    {
      "components": [
        {
          "label": "HTML",
          "tag": "div",
          "className": "alert alert-danger",
          "attrs": [
            {
              "attr": "",
              "value": ""
            }
          ],
          "content": "<h5>Attenzione!</h5>\nL'ISEE riportato è troppo alto. Non è possibile continuare la compilazione",
          "refreshOnChange": false,
          "key": "html9",
          "type": "htmlelement",
          "input": false,
          "tableView": false
        }
      ],
      "width": 12,
      "offset": 0,
      "push": 0,
      "pull": 0,
      "size": "md",
      "currentWidth": 12
    },
    {
      "components": [
        {
          "label": "admitted",
          "customClass": "d-none",
          "tableView": false,
          "clearOnHide": false,
          "validate": {
            "required": true
          },
          "key": "admitted",
          "type": "checkbox",
          "input": true,
          "defaultValue": false
        }
      ],
      "size": "md",
      "width": 12,
      "offset": 0,
      "push": 0,
      "pull": 0,
      "currentWidth": 12
    }
  ],
  "key": "columns2",
  "customConditional": "importo = parseFloat(data.economic_situation_indicator.data.value.replace(\",\",\".\"))\nshow = (importo && importo > 17747.58) ? true : false ",
  "type": "columns",
  "input": false,
  "tableView": false
}

Nella sezione "Ente", seleziona la voce "Periodi di chiusura" per indicare dei periodi o dei giorni di chiusura comuni a tutti i calendari.

Aggiungi periodo di chiusura

Clicca su "Aggiungi periodi di chiusura" per creare un nuovo periodo di chiusura.

Una volta fatto, indica la data di inizio e quella di fine del periodo di chiusura.

Eliminare un periodo di chiusura

Per cancellare uno dei periodi di chiusura in elenco, clicca su "Elimina chiusura"

OpenCity Labs mette a disposizione dei Comuni che ne fanno richiesta un catalogo di servizi progettati con cura secondo le Linee guida di design dei servizi digitali per la PA e il CAD (Codice dell'Amministrazione Digitale).

Il catalogo dei servizi è ordinato per aree e tocca tutti i principali ambiti, permettendo una navigazione chiara e immediata delle varie opzioni messe a disposizione da OpenCity Labs per rispondere alle esigenze specifiche dei Comuni.

Relazione con il pubblico e interazione con gli utenti

Questo paragrafo mette a disposizione una serie di strumenti che hanno un impatto diretto sulla relazione con i cittadini e che coinvolgono in modo trasversale tutti gli uffici dell’ente. Per questo motivo, il sistema favorisce una gestione integrata, riducendo la frammentazione e portando alla diffusione di standard basati su strumenti digitali che aggiungono velocità ed efficacia all’attività dell’ente.

Prenotare un appuntamento in Comune

Il sistema di prenotazione appuntamenti è uno strumento essenziale per la gestione ordinata dell’accesso agli sportelli comunali mediante appuntamento, con il relativo codice univoco.

Il back office supporta le funzioni di ricerca di un appuntamento, modifica o cancellazione, creazione di un nuovo appuntamento, mentre le API del servizio facilitano eventuali integrazioni con strumenti di gestione degli sportelli (cd. “eliminacode”).

Gli enti che utilizzano il sito web OpenCity possono inoltre attivare una versione avanzata, che sfrutta l’integrazione con il catalogo dei servizi per accompagnare l’utente verso la scelta del servizio di cui ha bisogno e della sede in cui ottenere l’appuntamento.

Richiedere l’uso di una sala comunale

Accanto al sistema di prenotazione degli appuntamenti si colloca il sistema di prenotazione di sale comunali, utile a governare l’accesso a risorse che l’ente mette a disposizione della comunità.

Il servizio accompagna l’utente nella scelta del giorno, dello slot che intende prenotare e consente anche la prenotazione di più slot definendo i relativi importi, se previsti. La fase di pagamento può essere contestuale alla prenotazione, oppure avvenire in fase di approvazione della richiesta (se la prenotazione è soggetta ad approvazione).

Un percorso specifico è dedicato alla prenotazione delle sale per matrimoni in modo da accompagnare i nubendi nella fase di scelta e valutazione della sala, di successiva prenotazione e pagamento dell’importo previsto.

Presentare una richiesta di accesso agli atti

L’accesso agli atti governa, nelle sue diverse forme di accesso civico, generalizzato e documentale, le richieste di accesso a documenti di ogni tipologia, comprese le materie di tipo edilizio, consentendo di assegnarle automaticamente ai diversi uffici e protocollando in modo automatico.

Oltre alle tradizionali funzioni di export in csv e via API, è disponibile una integrazione con Google Sheets che permette di ottenere una dashboard e un report integrato degli accessi agli atti, facilitando il monitoraggio.

Gli enti che utilizzano il sito web di OpenCity possono usare la per collegare la dashboard e automatizzare la pubblicazione delle informazioni sul web, prive dei dati personali.

Un help desk dedicato

L’evoluzione dei servizi di richiesta di assistenza e di segnalazione disservizi ha portato alla creazione di una piattaforma di help desk in modo da affrontare in modo più robusto la gestione dei flussi di segnalazione e richiesta di informazioni che negli enti è sempre frammentato, problematico e poco efficiente. L’uso del telefono e della email, privo di un gestionale, impedisce all’ente di standardizzare le procedure, disporre degli strumenti di monitoraggio e di controllo, gestire adeguatamente tutti i processi che prevedono il coinvolgimento di più persone o richiedono una gestione asincrona.

Il sistema prevede che segnalazioni e richieste di informazioni possano essere inviate dagli utenti via web, con una web app che ottimizza la fruizione attraverso lo smartphone, per esempio geolocalizzando l’utente per facilitare l’invio di una segnalazione in mobilità. Sulla base della tipologia di richiesta o di segnalazione (personalizzabile), il ticket viene classificato; se lo specifico argomento non è gestito dal Comune, l’utente viene avvisato e riceve le istruzioni su dove inviare la richiesta. Sulla base dell’argomento della richiesta, i ticket possono essere assegnati automaticamente a specifici uffici mentre un ufficio centrale (ad es. l’URP) continua a monitorare le segnalazioni o riprenderle in carico nei casi in cui sia di sua competenza fornire una risposta.

Viene inoltre utilizzato dal centralino dell’ente o da punti di contatto telefonici interni alle aree/uffici comunali per poter gestire le richieste ricevute al telefono, inserirle velocemente a sistema (anche in forma di bozza) e assegnarle per competenza in base alle necessità.

Tutte le richieste di informazioni e le segnalazioni sono gestite all’interno di OpenCity attraverso un back office dedicato, che permette all’operatore di ordinarle per priorità, assegnarle ad un altro operatore per competenza, aggiungere note e chiuderle (lo stato dei ticket infatti prevede l’utilizzo di fasi specifiche come “aperta” o “chiusa” invece di quelle abitualmente utilizzate per le pratiche), accedere rapidamente al catalogo dei servizi dove trova la knowledge base più indicata per fornire risposte ai cittadini.

Oltre alle tradizionali funzioni di export in csv e via api, è disponibile una integrazione con Google Sheets che permette di ottenere una dashboard e un report delle richieste di informazioni e delle segnalazioni, classificate per tipologia, consentendo il monitoraggio. Gli enti che utilizzano il sito web di OpenCity possono infine usare la funzione dataset del sito per collegare la dashboard e automatizzare la pubblicazione delle informazioni sul web, prive dei dati personali.

Demografici

Anagrafe e stato civile

Elettorali

Cimiteriali

Mobilità, territorio e polizia locale

Mobilità

Ambiente e territorio

Politiche sociali

Cultura, sport e attività ludiche

Eventi e manifestazioni culturali e sportive

Sport e cultura

Servizi scolastici

Altri