To use the Pragmatic Runtime tool in React, follow these steps:



1. Configuration in config.js

Create a config.js file in your project with the following configuration:

const ambiente
const appId
const appName
const apiUrl
const modo

const credenciales = {
  token: '',
}

export { ambiente, appId, appName, apiUrl, modo, credenciales }

Where the fields are:

  • ambiente: Name of the Pragmatic environment where the configurations for accessing forms, events, datasources, and fields are defined. To learn more about environments, click here.
  • appId: ID of the application defined in Pragmatic security.
  • appName: Name of the application defined in Pragmatic security.
  • apiUrl: URL of the Pragmatic Server that Pragmatic Runtime will point to in order to access form information.
  • modo: Type of mode that will allow access to form instances. To learn more about modes, visit this link. The possible values are:
    • ingreso: Allows entering information into a form instance.
    • solo_lectura: Allows viewing a form instance without making any changes.
    • aprobacion: Allows making annotations on a completed form instance.
  • credenciales: Credentials object containing a token to access the system along with appId, appName, and apiUrl to log in and enable the tool’s functionalities.



2. Create the Form.js Component

Create a Form.js file with the following content:

import React, { Suspense } from "react";
import lazyLegacyRoot from "./lazyLegacyRoot";
import "pragmatic-runtime/dist/pragmatic-form.css";
import { ambiente, apiUrl, appId, appName } from "./config/config";

const PragmaticForm = lazyLegacyRoot(() => import("pragmatic-runtime"));

function Form({ token, detail, setDetail }) {
  return (
    <div>
      <Suspense fallback={<div>Cargando...</div>}>
        <PragmaticForm
          formId={detail.formId}
          businessKey={{ ...detail.businessKeys, id: detail.userId }}
          instanceId={detail.instanceId}
          modo={detail.modo}
          ambiente={ambiente}
          verStepper
          token={token}
          appId={detail.appId ? detail.appId : appId}
          appName={detail.appName ? detail.appName : appName}
          apiUrl={apiUrl}
          salir={() => {
            setDetail &&
              setDetail({
                estado: false,
                modo: "solo_lectura",
                formId: undefined,
                instanceId: undefined,
                userId: undefined,
              });
            console.log("salir");
          }}
        />
      </Suspense>
    </div>
  );
}

export default Form;

This component requires the following props:

  • token: A variable containing the authentication token and other necessary data to access the Pragmatic API. It can be a string or an object.

    • Example (string): 'my_token'
    • Example (object): { token: 'my_token', refreshToken: 'my_refresh_token', userId: 'my_user_id' }

  • detail: An object containing the necessary information to render the form.

    • detail.estado: The state of the form. Must be true to render the form.
    • detail.modo: The type of mode that will allow access to form instances. Possible values: ingreso, solo_lectura, or aprobacion. More information here.
    • detail.formId: The identifier of the form to be rendered.
    • detail.instanceId: The identifier of the form instance to be rendered. If a new instance is to be created, this should be left undefined.
    • detail.businessKeys: An object containing business key information. Useful for entering relevant business key data. Must contain an id, whose values can be accessed from events using the @businessKey parameter. More details here.
    • detail.userId: The identifier of the user.
    • detail.appId: The ID of the application defined in Pragmatic security.
    • detail.appName: The name of the application defined in Pragmatic security.

  • setDetail: A function that executes when the user completes the form instance, i.e., when they press any of the action buttons. It can be customized to perform any desired action.

  • key: A property that must be unique for each form instance.



3. Integrate the Form Component into Your Page

Once you have imported the component, you need to integrate it into your page and provide the required props.

import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import Form from "../../Form";
import { modo, appId, appName, credenciales } from "../../config/config";
import { useNavigate } from "react-router";
import { useSnackbar } from "notistack";

function getUserId() {
  const credentials = getCredentials();
  return credentials ? credentials.userId : null;
}

function getTokens() {
  const credentials = getCredentials();
  return credentials
    ? { token: credentials.token, refreshToken: credentials.refreshToken }
    : null;
}

const Proceso = (props) => {
  const { nombreProceso, formId } = props;
  const navigate = useNavigate();
  const { enqueueSnackbar } = useSnackbar();
  const [loading, setLoading] = useState(false);

  const [detail, setDetail] = useState({
    estado: false,
    modo,
    formId: undefined,
    instanceId: undefined,
    businessKeys: {},
    userId: undefined,
    token: undefined,
    appId,
    appName,
  });

  useEffect(() => {
    setDetail({
      estado: true,
      modo,
      formId,
      instanceId: null,
      businessKeys: {},
      userId: "",
      token: {
        token: credenciales.token,
        refreshToken: getTokens().refreshToken,
        userId: getUserId(),
      },
      appId,
      appName,
      formName: nombreProceso,
    });
  }, []);

  const salir = () => {
    enqueueSnackbar("¡Proceso creado con éxito!", { variant: "success" });
    navigate("/inbox");
  };

  return (
    <Form
      token={detail.token}
      detail={detail}
      setDetail={salir}
      key={detail.instanceId}
    />
  );
};

Proceso.propTypes = {
  nombreProceso: PropTypes.string,
  formId: PropTypes.number,
};

Proceso.defaultProps = {
  nombreProceso: undefined,
  formId: undefined,
};

export default Proceso;

In this component:

  • A detail state is defined, containing the necessary data to render the form.
  • The Form component is called with the data from the detail state.
  • The salir function is defined, which executes when the user completes the form instance.