Versionen im Vergleich

Alte Version 1

changes.mady.by.user Alexander Röhr

Gespeichert am

verglichen mit

Neue Version Aktuell

changes.mady.by.user Tilman Issing

Gespeichert am

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

...

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

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

  2. 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:

    Codeblock
    languagejs
    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 componentthe ContactForm2Loader component. The form configuration is fetched from the UM server, and the form is rendered based on the selected locale and form configuration.

...

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

...