Map data from HTML to form

Configure your widget from a host application and populate data in the initial form of your iFrame widget. This ensures that you have control over your data without the need for repetitive data entry.

Prerequisites

Ensure you have completed the following:

  • Provided a system-created AAE_Robotic_Interface User role for the Co-Pilot User.
  • Have access to the Automation Co-Pilot for Business Users on the web interface.
  • Have access to the host web application of your choice that supports the iFrame technology.
  • You already set up the iFrame widget. For more details, see Configure an iFrame widget in a web application.

Procedure

  1. Log in to the host web application.
    This is your target application with the iFrame widget.
  2. Navigate to widget settings page or source code of your host web application (where you added the iFrame widget code).
    This page contains the embedded code for your widget source.
  3. Enter the host data and send data in the script.
    Important: To map data, you must load a process on the host web application with a process ID, element ID, and values of the element ID which correlate with each another.
    Example structure of host data:
    hostData =
{
 process ID
    {
       elementID1: value1
       elementID2: value2
       elementID3: value3
   }
} 
sendDataToEmbeddedApp = (processID) =>
{
    iframeElement = document.querySelector();
    iframeElement.contentWindow.postMessage({data: hostData[processID]}, 
        iframeElement.getAttribute());
}
    Note: The element ID uses form element data types, such as: Check Box, Number, Radio Button, and Text Box.
    An additional sample structure:
    Sample of hostData in HTML.
    Sample of hostData in HTML.
    In this example: 45 is the process ID, Number0 is the element ID, and 45 is the value of the element ID.
  4. Save your session.
    You have now configured the host data, and mapped the data to your processes.
  5. Navigate to the iFrame widget.
    The iFrame widget should show a list of automations.
    Sample of an automation list in the iFrame widget.
  6. Click a process to open an initial form with data already mapped and filled in.
    Same of an initial form in the automation list.
    The initial form shows the mapped data.
  7. Click Submit to run your automations.