Para utilizar la herramienta Pragmatic Runtime en React, sigue estos pasos:



1. Configuración en config.js

Crea un archivo config.js en tu proyecto con la siguiente configuración:

const ambiente
const appId
const appName
const apiUrl
const modo

const credenciales = {
  token: '',
}

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

Donde los campos son:

  • ambiente: Nombre del ambiente de Pragmatic donde se encuentran definidas las configuraciones para acceder a los formularios, eventos, datasources y campos. Para conocer más acerca de los ambientes ingresa aquī.
  • appId: ID de la aplicación definida en la seguridad de Pragmatic.
  • appName: Nombre de la aplicación definida en la seguridad de Pragmatic.
  • apiUrl: URL del servidor de Pragmatic Server al que apuntará Pragmatic Runtime para acceder a la información de los formularios.
  • modo: Tipo de modo al que se permitirá acceder a las instancias de formulario. Para conocer más sobre los modos, ingresa a este enlace. Estos pueden ser:
    • ingreso: Permite ingresar información en una instancia de formulario.
    • solo_lectura: Permite acceder al modo de visualización de una instancia de formulario sin hacer ningún cambio.
    • aprobacion: Permite realizar anotaciones sobre una instancia de formulario finalizada.
  • credenciales: Objeto de credenciales que contiene un token para acceder junto con los datos de appId, appName y apiUrl para iniciar sesión y permitir las funcionalidades que ofrece la herramienta.



2. Crear el Componente Form.js

Crea un archivo Form.js con el siguiente contenido:

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;

Este componente necesita las siguientes props:

  • token: Variable que contiene el token de autenticación y otros datos necesarios para acceder a la API de Pragmatic. Puede ser un string o un objeto.
    • Ejemplo (string): 'mi_token'
    • Ejemplo (objeto): { token: 'mi_token', refreshToken: 'mi_refresh_token', userId: 'mi_user_id' }
  • detail: Objeto que contiene la información necesaria para renderizar el formulario.
    • detail.estado: Estado del formulario. Debe ser true para renderizar el formulario.
    • detail.modo: Tipo de modo al que se permitirá acceder a las instancias de formulario. Puede ser ingreso, solo_lectura o aprobacion. Para saber más ingresa aquī.
    • detail.formId: Identificador del formulario a renderizar.
    • detail.instanceId: Identificador de la instancia del formulario a renderizar. En caso de que se desee crear una nueva instancia, este se deja indefinido.
    • detail.businessKeys: Objeto con información de la clave del negocio. Es útil para ingresar información relevante de la clave del negocio. Debe contener un id, cuyos valores pueden ser accedidos desde los eventos utilizando el parámetro @businessKey. Para conocer más ingresa aquī.
    • detail.userId: Identificador del usuario.
    • detail.appId: ID de la aplicación definida en la seguridad de Pragmatic.
    • detail.appName: Nombre de la aplicación definida en la seguridad de Pragmatic.
  • setDetail: Función que se ejecuta al momento de que el usuario finaliza la instancia del formulario, es decir, al presionar sobre cualquiera de las acciones. Puede ser customizada para realizar cualquier acción deseada.
  • key: Propiedad que debe ser única para cada instancia del formulario.



3. Integrar el Componente Form en tu Página

Finalmente, integra el componente Form en la página donde desees renderizar los formularios. Por ejemplo:

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;

En este componente:

  • Se define un estado detail que contiene los datos necesarios para renderizar el formulario.
  • Se llama al componente Form con los datos del estado detail.
  • Se define la función salir que se ejecuta cuando el usuario finaliza la instancia del formulario.