refactor: move template rendering to own properties and functions

react/common/src/ElixFormsComponentAbstract.tsx

@@ -113,6 +113,10 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     return this.createCustomFormFields(formFieldFactory);
   }
 
+  protected renderExtraContent(): JSX.Element | null {
+    return null;
+  }
+
   public override render(): React.ReactElement<IElixFormsComponentProperties> {
     const {
       description,
@@ -120,23 +124,91 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
       environmentMessage,
       hasTeamsContext,
       userDisplayName,
-      additionalFieldsJson
+      additionalFieldsJson,
+      moduleTitle,
+      pageTitle,
+      pageDescription,
+      heroImageSrc
     } = this.props;
 
     const queryParams = new URLSearchParams(window.location.search);
 
     return (
-      <section>
+      <div className="container_12" id="pageBody">
-        {/* className={`${styles.elixFormsReact} ${hasTeamsContext ? styles.teams : ''}`} */}
+        <div className="grid_12">
-        <div>{environmentMessage}</div>
+          <div id="userConsole" className="fe-behaviour">
-        <div>{description}</div>
+            <header>
+              <div className="neutral">
+                <div className="grid_12">
+                  <div className="console_header">
+                    <div className="leftDiv">
+                      <h1>elixForms</h1>
+                      <div className="logo"><a href="https://www.unipr.it/" title="Torna alla homepage dell'Università: di Parma"><img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università: di Parma" /></a>
+                      </div>
+                    </div>
+                    <div className="rightDiv">
+                      <div className="rightDivInside info padding_r">
+                        <div className="clear"></div>
+                      </div>
+                    </div>
+                    <div className="clear"></div>
+                  </div>
+                </div>
+                <div className="clear"></div>
+              </div>
+            </header>
+
+            <div className="grid_12 console_main">
+              <div className="inside">
+                {moduleTitle && (
+                  <div>
+                    <div className="fe-module-header-container">
+                      <h2>{moduleTitle}</h2>
+                    </div>
+                  </div>
+                )}
+                <div className="receipt">
+                  <div className="container">
+                    {pageTitle && <h1>{pageTitle}</h1>}
+                    {heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image" />}
+                    {pageDescription && <p>{pageDescription}</p>}
+                    
+                    {environmentMessage && <div>{environmentMessage}</div>}
+                    {description && <div>{description}</div>}
+                    
                     <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
                       {this.createMandatoryFormFields(queryParams)}
                       {this.createAdditionalFormFields()}
                       {this.renderCustomFormFields()}
                       <input type="submit" value="Submit"/>
                     </form>
-      </section>
+
+                    {this.renderExtraContent()}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="clear"></div>
+
+            <footer className="it-footer">
+              <div className="it-footer-main">
+                <div className="container">
+                  <div className="row clearfix">
+                    <div className="col-sm-12">
+                      <div className="footer-content">
+                        <div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
+                        <div className="subfooter-bottom"><div>versione 1.24.0</div></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </footer>
+          </div>
+          <div className="clear"></div>
+        </div>
+      </div>
     );
   }
 

react/common/src/IElixFormsComponentProperties.ts

@@ -8,6 +8,12 @@ export interface IElixFormsComponentProperties {
   hasTeamsContext: boolean;
   userDisplayName: string;
   additionalFieldsJson?: string;
+  
+  // Layout Properties
+  moduleTitle?: string;
+  pageTitle?: string;
+  pageDescription?: string;
+  heroImageSrc?: string;
 }
 
 // Additional Fields JSON Schema

react/scelta-carriera/src/App.jsx

@@ -8,83 +8,19 @@ import SceltaCarrieraComponent from './SceltaCarrieraComponent';
 function App() {
   const [count, setCount] = useState(0)
 
-  /** @type {SceltaCarrieraComponent} */
+  return (
-  var myElixFormsReact = new SceltaCarrieraComponent({
+    <SceltaCarrieraComponent 
-    description: "This is a custom form created with ElixFormsReact component.",
+      description=""
-    isDarkTheme: false,
+      isDarkTheme={false}
-    environmentMessage: "TESTING!",
+      environmentMessage=""
-    hasTeamsContext: false,
+      hasTeamsContext={false}
-    userDisplayName: "John Doe",
+      userDisplayName="John Doe"
-  });
+      moduleTitle="Modulo A/13 - Richiesta di Certificato"
-
+      pageTitle="Scelta Carriera"
-  var elixFormsReactRender = myElixFormsReact.render();
+      pageDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te."
-
+      heroImageSrc={heroImg}
-  return <>
+    />
-      <div className="container_12" id="pageBody">
+  );
-        <div className="grid_12">
-          <div id="userConsole" className="fe-behaviour">
-            <header>
-              <div className="neutral">
-                <div className="grid_12">
-                  <div className="console_header">
-                    <div className="leftDiv">
-                      <h1>elixForms</h1>
-                      <div className="logo"><a href="https://www.unipr.it/" title="Torna alla homepage dell'Università: di Parma"><img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università: di Parma" /></a>
-                      </div>
-                    </div>
-                    <div className="rightDiv">
-                      <div className="rightDivInside info padding_r">
-                        <div className="clear"></div>
-                      </div>
-                    </div>
-                    <div className="clear"></div>
-                  </div>
-                </div>
-                <div className="clear"></div>
-              </div>
-            </header>
-
-            <div className="grid_12 console_main">
-              <div className="inside">
-                <div>
-                  <div className="fe-module-header-container">
-                    <h2>Modulo A/13 - Richiesta di Certificato</h2>
-                  </div>
-                </div>
-                <div className="receipt">
-                  <div className="container">
-                    <h1>Scelta Carriera</h1>
-                    <img src={heroImg} alt="Hero Image" className="hero-image" />
-                    <p>Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te.</p>
-                    {elixFormsReactRender}
-                    <p>Altre cose</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="clear"></div>
-
-            <footer className="it-footer">
-              <div className="it-footer-main">
-                <div className="container">
-                  <div className="row clearfix">
-                    <div className="col-sm-12">
-                      <div className="footer-content">
-                        <div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
-                        <div className="subfooter-bottom"><div>versione 1.24.0</div></div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </footer>
-          </div>
-          <div className="clear"></div>
-        </div>
-      </div>
-  </>;
-
 }
 
 export default App

react/scelta-carriera/src/SceltaCarrieraComponent.tsx

@@ -42,4 +42,8 @@ export default class SceltaCarrieraComponent extends ElixFormsComponentAbstract
       </>
     );
   }
+
+  protected override renderExtraContent(): JSX.Element {
+    return <p>Altre cose</p>;
+  }
 }