Pragmatic allows the creation of events that facilitate data preloading in a form instance. This data can be retrieved either from an external service using the axios instance provided by Pragmatic or defined directly within the event’s JavaScript function.

The event execution occurs exclusively at runtime during Load. This moment happens when the user accesses the form, making it the point where data retrieval takes place, ensuring that the data is loaded into the instance and immediately visible in the corresponding fields.



Creating Data Preload Events

Conditions for Creating a Data Preload Event

For a data preload event to function correctly, the following requirements must be met:

  1. It must be a function-type event (JavaScript), and this function must return a response structure.

  2. The response structure for fields must follow a syntax for proper data mapping.

  3. Once created, the event must be associated with the form and configured in the events section of a form to execute during the form instance loading process.



Expected Syntax

For data preloading to work correctly, the function must return an array of objects, where each object contains:

  • id: The identifier of the field where the response will be mapped.

  • value: The corresponding value for that field.

Response Structure by Field Type

Each Pragmatic field type has a specific response structure that must be followed for proper mapping in the form instance.

Field TypeResponse StructureValue
TextThe value is a string, meaning simple text."Juan Pérez"
PercentageThe value is an integer but must be stored as a string."98"
GridThe structure is an array of arrays, where each sub-array contains a number followed by text.[[1, "Item A"], [2, "Item B"]]
PromptThe structure is an object with a value property (type number) and a description property, which is an array of objects containing label (string) and value (which can be string, boolean, or number).{ "value": 3, "description": [{ "label": "Category", "value": "Event" }] }
FileThe structure is an array of objects, where each object has the properties uuid, name, type, and size (all required).[ { "uuid": "unique-id", "name": "document.docx", "type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "size": 45678 } ]
Long TextThe value is a string, but line breaks are allowed."Description line 1\nDescription line 2"
DateThe value is a string in ISO 8601 format, following "YYYY-MM-DDTHH:MM:SS.sssZ". This represents a date and time with millisecond precision. Example: "1999-12-31T23:59:59.999Z"."1999-12-31T23:59:59.999Z"
NumberThe value is of type number and must be an integer or decimal. This is validated by checking typeof value === "number". This ensures only numerical values are accepted.42
ComboThe value is an object with a value property, which can be of type number or string. The structure is: module.exports = { type: "object", properties: { value: { type: ["number", "string"] } }, required: ["value"] };{ "value": "Option 1" }
Multiple ComboThe value is an array of objects, where each object has value and label properties, both of type string.[ { "value": "Option 1", "label": "Label 1" }, { "value": "Option 2", "label": "Label 2" } ]



Example Structure for Each Field Type

For a form containing each field type, the correct structure to preload the data for each field would be as follows:

[
  {
    "id": "21", // Percentage
    "value": "98"
  },
  {
    "id": "23", // Text
    "value": "Juan Pérez"
  },
  {
    "id": "25", // Grid
    "value": [
      [1, "Item A"],
      [2, "Item B"]
    ]
  },
  {
    "id": "26", // Prompt
    "value": {
      "value": 2,
      "description": [
        {
          "label": "id",
          "value": 2
        },
        {
          "label": "Nombre",
          "value": "Tech Hackathon"
        },
        {
          "label": "Is it presential",
          "value": "No"
        }
      ]
    }
  },
  {
    "id": "28", // File
    "value": [
      {
        "uuid": "123e4567-e89b-12d3-a456-426614174000",
        "name": "document.pdf",
        "type": "application/pdf",
        "size": 102400
      }
    ]
  },
  {
    "id": "30", // Long text
    "value": "Description line 1\nDescription line 2"
  },
  {
    "id": "31", // Date
    "value": "2023-05-15T10:30:00.000Z"
  },
  {
    "id": "36", // Number
    "value": 100
  },
  {
    "id": "37", // Combo
    "value": {
      "value": "primary",
      "label": "Primary"
    }
  },
  {
    "id": "53", // Multiple combo
    "value": [
      {
        "value": "laptop",
        "label": "Dell Laptop"
      },
      {
        "value": "monitor",
        "label": "24 inches monitor"
      }
    ]
  }
]