update skills and code based on official documentation

.agents/skills/custom-workflow-logic/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: elixforms-custom-workflow-logic
+description: Logica di funzionamento delle custom page richiamate dal Custom Workflow v2 di elixForms. Descrive il passaggio dei parametri, i campi obbligatori, e le regole di submit.
+---
+
+# Logica di Funzionamento Custom Workflow v2 in elixForms
+
+Le **custom page** all'interno del progetto elixForms servono a gestire flussi esterni personalizzati (chiamati *Custom Workflow 2*).
+Vengono lanciate tramite un pulsante presente su un modulo elixForms; la piattaforma reindirizza l'utente alla URL della custom page (sviluppata in questo progetto), passandole in query string diversi parametri di contesto. Al termine delle operazioni, l'utente viene reindirizzato nuovamente al modulo elixForms.
+
+## Parametri e Query String
+
+### Parametri Obbligatori
+elixForms invia sempre alla custom page una serie di parametri obbligatori (es. `RWE2_MODULE_ID`, `RWE2_REQUEST_ID`, `custom-workflow-back-url`, `crc`, ecc.). 
+Questi parametri sono definiti nella classe `ElixFormsComponentAbstract` (metodo/variabile `mandatoryFormFieldNames`). 
+- **Regola:** Se alla custom page manca uno solo di questi parametri, deve presentare un **errore di autenticazione/accesso** (es. "Parametri obbligatori mancanti") in quanto il flusso risulta non valido (ad es. tentativo di accesso diretto bypassando elixForms). Non deve permettere l'utilizzo del form.
+
+### Parametri Custom (Dati Modulo)
+Oltre ai parametri obbligatori, elixForms può passare dati già compilati nel modulo (es. `email`, `COL0001`, ecc.).
+- Questi dati vengono ricevuti tramite query string e possono essere utilizzati o visualizzati all'interno della custom page.
+
+## Sottomissione del Form e Rientro in elixForms
+
+Per tornare a elixForms, la custom page deve eseguire un submit `POST` contenente tutti i parametri necessari.
+- **Form Action:** L'endpoint di destinazione (es. `https://[server]/rwe2/ComeBackToElixAndSave`).
+- **Input Nascosti (Mandatory):** Il form *deve* contenere (come `input type="hidden"`) tutti i parametri obbligatori ricevuti originariamente dalla query string.
+- **Input Custom / Dati Rientro:** Il form deve contenere tutti i campi aggiuntivi o le variabili calcolate che devono essere rimandate ad elixForms (es. un campo anagrafico). L'attributo `name` di questi input deve corrispondere esattamente all'identificativo atteso su elixForms (es. `name="COL0001"`).
+
+## Gestione degli ID (Design System e Convenzioni)
+Come da regole generali (vedi `AGENTS.md`):
+- Gli `ID` dei componenti visibili (TextField, Checkbox, Dropdown) **non devono mai subire alterazioni** (non vanno aggiunti suffissi).
+- Qualora ci sia necessità di inserire un input `hidden` per mantenere un valore che abbia lo stesso nome di un campo visibile (per rispettare la convenzione del `name`), l'attributo `ID` dell'input nascosto **deve** avere un suffisso (es. `id="MioCampo_hidden"`), mentre il componente visibile principale mantiene l'ID originale senza suffissi. Questo evita conflitti HTML a livello di ID mantenendo corretti i valori inviati (`name`).

react/common/src/ElixFormsComponentAbstract.tsx

@@ -136,6 +136,8 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     } = this.props;
 
     const queryParams = new URLSearchParams(window.location.search);
+    const missingMandatoryParams = this.mandatoryFormFieldNames.filter(paramName => !queryParams.has(paramName));
+    const hasAuthenticationError = missingMandatoryParams.length > 0;
 
     return (
       <div className="container_12" id="pageBody">
@@ -180,6 +182,12 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                     {environmentMessage && <div>{environmentMessage}</div>}
                     {description && <div>{description}</div>}
 
+                    {hasAuthenticationError ? (
+                      <FluentUI.MessageBar messageBarType={FluentUI.MessageBarType.error} isMultiline={false}>
+                        Accesso non autorizzato. Parametri obbligatori mancanti ({missingMandatoryParams.join(', ')}).
+                      </FluentUI.MessageBar>
+                    ) : (
+                      <>
                         {this.renderExtraContentPre()}
 
                         <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
@@ -190,6 +198,8 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                         </form>
 
                         {this.renderExtraContentPost()}
+                      </>
+                    )}
                   </div>
                 </div>
               </div>
@@ -365,7 +375,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
 
   private createHiddenInput(paramName: string): JSX.Element {
     const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
-    return <><input type='text' id={paramName} name={paramName} defaultValue={textValue} /><br /></>;
+    return <input type="hidden" id={`${paramName}_hidden`} name={paramName} defaultValue={textValue} />;
   }
 
   private createNumberInput(paramName: string, label: string, required: boolean = false): JSX.Element {