Participating in a Workflow via Intermediate Web Entry (Anonymous)

This guide discusses how to embed ProcessMaker's actionable forms or intermediate web entry forms into third-party web applications.

Step 2: Embed the Intermediate Web Entry Link into Your Web Application

Identify the appropriate location within your Web application to embed the intermediate Web entry link. This could be a specific page, a modal window, or any other suitable area. Insert the provided web entry link, including the iFrame, into the desired location in your HTML file.

Let's embed the intermediate web entry link into the iFrame, use the following sample HTML code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ERP Website</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>
    /* CSS styles for the ERP website */
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f1f1f1;
    }

    header {
      background-color: #ff6347; /* New color for the header */
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    .container {
      display: flex;
      max-width: 1200px;
      margin: 0 auto;
    }

    .sidebar {
      background-color: #f9f9f9;
      width: 200px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .sidebar h3 {
      margin-top: 0;
      font-size: 1.2rem;
      color: #555;
    }

    .sidebar ul {
      list-style-type: none;
      padding: 0;
      margin: 10px 0;
    }

    .sidebar li {
      margin-bottom: 5px;
    }

    .sidebar a {
      text-decoration: none;
      color: #333;
      display: flex;
      align-items: center;
    }

    .sidebar .material-icons {
      margin-right: 5px;
    }

    .content {
      flex-grow: 1;
      padding: 20px;
    }

    .content-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    h1 {
      margin: 0;
      color: #ff6347; /* New color for the heading */
      font-size: 2.5rem;
    }

    p {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #444;
    }

    .iframe-container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .action-button {
      background-color: #ff6347; /* New color for the button */
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <header>
    <h1>Rocket ERP</h1>
  </header>
  <div class="container">
    <!-- Sidebar -->
    <div class="sidebar">
      <h3>Menu</h3>
      <ul>
        <li>
          <a href="#"><i class="material-icons">dashboard</i> Dashboard</a>
        </li>
        <li>
          <a href="#"><i class="material-icons">inventory</i> Inventory</a>
        </li>
        <li>
          <a href="#"><i class="material-icons">shopping_basket</i> Sales</a>
        </li>
        <li>
          <a href="#"><i class="material-icons">add_shopping_cart</i> Purchases</a>
        </li>
      </ul>
    </div>

    <!-- Main Content Area -->
    <div class="content">
      <p>You are logged into the ERP system, and here's a snapshot of the dashboard:</p>
      <div class="iframe-container">
        <!-- Replace the iframe content with your actual ERP system's URL or relevant content -->
        <iframe src="https://my-server.processmaker.net/webentry/request/3270/node_6" frameborder="0" style="height:1200px;width:100%;"></iframe>
      </div>
    </div>
  </div>
</body>
</html>

Step 3: Customize the iFrame Attributes (Optional)

You can customize the attributes of the iFrame according to your requirements. For example, you can adjust the width, height, frameborder, and other attributes of the iFrame to fit your application's design and layout.

Step 4: Test and Verify the Integration

Save your changes and reload your Web application. Ensure that the embedded intermediate web entry form is visible and functioning correctly within your application. Test the functionality of the web entry form, such as approving/completing a request to ensure that everything works as expected.

Output Preview: Embedded ProcessMaker Intermediate Web Entry Form

After you have completed the steps above, verify ProcessMaker's intermediate web entry form is embedded into your Web application.

Conclusion

By following the steps in this guide, you can easily add ProcessMaker's powerful intermediate web entry form to your web application using an iFrame. This will help you complete requests seamlessly.

PreviousStarting a Request via Anonymous Web Entry NextParticipating in a workflow via Intermediate Web Entry (Authenticated)

Last updated 1 year ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ERP Website</title> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <style> /* CSS styles for the ERP website */ * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f1f1f1; } header { background-color: #ff6347; /* New color for the header */ color: #fff; padding: 10px; text-align: center; } .container { display: flex; max-width: 1200px; margin: 0 auto; } .sidebar { background-color: #f9f9f9; width: 200px; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .sidebar h3 { margin-top: 0; font-size: 1.2rem; color: #555; } .sidebar ul { list-style-type: none; padding: 0; margin: 10px 0; } .sidebar li { margin-bottom: 5px; } .sidebar a { text-decoration: none; color: #333; display: flex; align-items: center; } .sidebar .material-icons { margin-right: 5px; } .content { flex-grow: 1; padding: 20px; } .content-header { display: flex; align-items: center; justify-content: space-between; } h1 { margin: 0; color: #ff6347; /* New color for the heading */ font-size: 2.5rem; } p { font-size: 1.1rem; line-height: 1.6; color: #444; } .iframe-container { position: relative; width: 100%; height: 100%; } iframe { width: 100%; height: 100%; border: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .action-button { background-color: #ff6347; /* New color for the button */ color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; } </style> </head> <body> <header> <h1>Rocket ERP</h1> </header> <div class="container">  <div class="sidebar"> <h3>Menu</h3> <ul> <li> <a href="#"><i class="material-icons">dashboard</i> Dashboard</a> </li> <li> <a href="#"><i class="material-icons">inventory</i> Inventory</a> </li> <li> <a href="#"><i class="material-icons">shopping_basket</i> Sales</a> </li> <li> <a href="#"><i class="material-icons">add_shopping_cart</i> Purchases</a> </li> </ul> </div>  <div class="content"> <p>You are logged into the ERP system, and here's a snapshot of the dashboard:</p> <div class="iframe-container">  <iframe src="https://my-server.processmaker.net/webentry/request/3270/node_6" frameborder="0" style="height:1200px;width:100%;"></iframe> </div> </div> </div> </body> </html>