Integrazione Widget servizio (FormIO)

Widget Formio – Servizio permette di integrare i form registrati all’interno del portale servizi del Comune. Di seguito la guida all’installazione e configurazione.

1. Installazione

Aggiungi dentro il tag <head> della tua pagina questi riferimenti:

<!-- JavaScript (deferred) -->
<script
  defer
  src="https://static.opencityitalia.it/widgets/formio/latest/js/web-formio.js"
></script>

<!-- CSS -->
<link
  rel="stylesheet"
  href="https://static.opencityitalia.it/widgets/formio/latest/css/web-formio.css"
/>

2. Utilizzo del tag <widget-formio>

Posiziona <widget-formio> nel punto della pagina in cui vuoi mostrare il form:

<widget-formio
  service-id="0121edc9-57d8-45f2-ae92-260f45aec6d5"
  base-url="https://servizi.comune-qa.bugliano.pi.it/lang"
  formserver-url="https://form-qa.stanzadelcittadino.it"
  pdnd-url="https://api.qa.stanzadelcittadino.it/pdnd/v1"
  enable-draft="true"
></widget-formio>

Attributi

Nome
Obbligatorio
Valori / Descrizione

service-id

Sì

UUID del servizio/Form registrato sulla “Stanza del Cittadino”

base-url

Sì

URL della “Stanza del Cittadino” (autenticazione, privacy e routing del widget).

formserver-url

Sì

URL del Form Server Form.io (endpoint per recupero e invio dei form).

pdnd-url

Sì

URL del servizio PDND (Piattaforma Digitale Nazionale Dati) per il caricamento delle anagrafiche.

enable-draft

No

true / false – abilita il salvataggio in bozza delle pratiche. Default: false.

3. Storybook & Demo

Tutte gli esempi dei servizi sono documentati in Storybook: https://widget-formio.comune-qa.bugliano.pi.it/

4. Configurazione Servizi Built-in Personalizzati

Per aggiungere o personalizzare un servizio built-in esistente (Richiedi assistenza, Prenota appuntamento, ecc.), è necessario configurare il campo identifier come amministratore nella sezione dettaglio del servizio.

  • Il valore di identifier deve seguire il formato: <nome-servizio>-custom dove:

    • <nome-servizio> è obbligatorio e corrisponde al servizio di base (helpdesk, bookings, ecc.)

    • -custom è suffisso libero a scelta per distinguere la versione personalizzata

Esempi:

  • helpdesk-custom per una versione custom di Richiedi assistenza

  • bookings-custom per una versione custom di Prenota appuntamento

Questa configurazione permette al widget di riconoscere e caricare il servizio personalizzato attraverso il tag <widget-formio>.

PreviousRoadmapNextIntegrazioni con il flusso delle pratiche

Last updated

Was this helpful?