Implementing Universal Messenger Forms in React Applications

Since implementing UM Forms in React applications isn’t possible through using inline scripts, the UM Form Loader was created. To showcase how it is used, this demo project was created.

It provides a React application that demonstrates how to implement Universal Messenger forms without using traditional JS snippets. Instead, it uses React components and hooks to load and render the forms.

Step-by-Step Implementation

Install Dependencies: Ensure you have the necessary dependencies installed. The demo project uses @pinuts/um-form-loader for loading the forms.

{
  "dependencies": {
    "@pinuts/um-form-loader": "^1.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3"
  }
}

Load and Render Forms: Use the @pinuts/um-form-loader package to load and render the forms. Here is an example from the FormsLoader.js file in the demo project:

import React, { useEffect, useState } from 'react';
import { loadContactFormInstances, ContactForm2Loader } from '@pinuts/um-form-loader';

const umOpenPw = <yourUMOpenPassword>;
const restProxyUrl = '/p';

const FormsLoader = () => {
    const [formsList, setFormsList] = useState([]);
    const [selectedLocale, setSelectedLocale] = useState('de');
    const [selectedFormConfig, setSelectedFormConfig] = useState({});

    useEffect(() => {
        loadContactFormInstances(umOpenPw, restProxyUrl, selectedLocale).then((data) => {
            setFormsList(data);
            setSelectedFormConfig(data[0]);
        });
    }, [selectedLocale, setFormsList]);

    const { locale = '', name: appId, textLoadWidget: messageIsLoading, textLoadWidgetError: messageLoadingFailed } = selectedFormConfig || {};

    const onChangeSelectedForm = (e) => {
        const formConfig = formsList.find((form) => form.name === e.target.value);
        setSelectedFormConfig(formConfig);
    };

    return (
        <div>
            <select onChange={(e) => setSelectedLocale(e.target.value)}>
                <option value="de">German</option>
                <option value="en">English</option>
            </select>
            <select onChange={onChangeSelectedForm}>
                {formsList.map((form, index) => (
                    <option key={index} value={form.name}>{form.title}</option>
                ))}
            </select>
            {selectedFormConfig && (
                <ContactForm2Loader
                    appId={appId}
                    locale={locale}
                    restUrl={restProxyUrl}
                    messageIsLoading={messageIsLoading}
                    messageLoadingFailed={messageLoadingFailed}
                />
            )}
        </div>
    );
};

export default FormsLoader;

This code demonstrates how to load and render a contact form using the ContactForm2Loader component. The form configuration is fetched from the UM server, and the form is rendered based on the selected locale and form configuration.

Routing and Navigation: Use React Router to handle routing and navigation within the application. Here is an example from the App.js file:

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import FormTabs from "./FormTabs";
import FormPage from "./FormPage";
import FormsLoader from "./FormsLoader";
import FormTabs2 from "./FormTabs2";
import EventForm from "./EventForm";
import EventList from "./EventList";
import EventFormSingle from "./EventFormSingle";
import FormsLoaderLegacy from "./FormsLoaderLegacy";

function App() {
    return (
        <Router>
            <div className="navbar navbar-expand-lg navbar-light bg-light">
                <div className="container-fluid">
                    <div className="collapse navbar-collapse justify-content-center" id="navbarNav">
                        <ul className="navbar-nav">
                            <li className="nav-item">
                                <Link className="nav-link" to="/formtabs2">Statische Snippets</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/formtabs">Snippets in dynamischen Komponenten</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/forms">Sprachen</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/formsloader">Instanzen Selector</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/formsloader1">Instanzen Selector (Legacy)</Link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <Routes>
                <Route path="/formtabs2" element={<FormTabs2 />} />
                <Route path="/formtabs" element={<FormTabs />} />
                <Route path="/forms" element={<FormPage />} />
                <Route path="/formsloader" element={<FormsLoader />} />
                <Route path="/formsloader1" element={<FormsLoaderLegacy />} />
            </Routes>
        </Router>
    );
}

export default App;

This code sets up the routing for the application, allowing users to navigate between different pages that demonstrate various ways to load and render forms.

Conclusion

By using React components and hooks, you can integrate Universal Messenger forms into your React application without relying on traditional JS snippets. This approach ensures better security, maintainability, and integration with the framework's architecture and state management.