Participating in a workflow via Intermediate Web Entry (Authenticated)

This guide provides an in-depth of the process of seamlessly embedding ProcessMaker's authenticated intermediate web entry forms into external third-party web applications.

HTML

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

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f1f1f1;
    }
    .container {
      display: flex;
    }
    .sidebar {
      background-color: #f9f9f9;
      width: 200px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .sidebar h3 {
      margin-top: 0;
    }
    .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;
    }
    h1 {
      margin-top: 0;
    }

    iframe {
      width: 100%;
      height: 600px;
      border: none;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Sidebar -->
    <div class="sidebar">
      <h3>Menu</h3>
      <ul>
        <li><a href="#"><i class="material-icons">home</i> Home</a></li>
        <li><a href="#"><i class="material-icons">phone</i> Services</a></li>
        <li><a href="#"><i class="material-icons">credit_card</i> Billing</a></li>
        <li><a href="#"><i class="material-icons">layers</i>Purchases</a></li>
        <li><a href="#"><i class="material-icons">settings</i> Settings</a></li>
      </ul>
    </div>

    <!-- Main Content Area -->
    <div class="content">
      <iframe src="https://my-server.processmaker.net/webentry/request/3272/node_7" style="height:1000px;" frameborder="0"></iframe>
    </div>
  </div>
</body>
</html>

Step 3: Customize the iFrame Attributes (Optional)

You can tailor the attributes of the iFrame to seamlessly align with your specific needs and preferences. This affords you the opportunity to fine-tune elements like width, height, frameborder, and various other attributes, thereby ensuring a perfect integration of the iFrame within your application's overall design and layout scheme.

Step 4: Test and Verify the Integration

Remember to save all modifications before refreshing your web application. Confirm that the embedded intermediate web entry form is not only displayed but also operating seamlessly within your application's framework. Test the functionality of the embedded web entry form, such as approving/completing a request to guarantee a flawless user experience that aligns perfectly with your expectations.

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 step-by-step instructions outlined in this comprehensive guide, you'll be equipped to seamlessly incorporate ProcessMaker's dynamic authenticated intermediate web entry form into your own web application. This integration, facilitated through the utilization of an iFrame, empowers you to effortlessly manage and fulfill requests with enhanced efficiency and effectiveness.

PreviousParticipating in a Workflow via Intermediate Web Entry (Anonymous)NextAngular Inbox Tutorial

Last updated 1 year ago

Was this helpful?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Telecom Company Portal</title> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <style> /* CSS styles for the Telecom Company Portal */ * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f1f1f1; } .container { display: flex; } .sidebar { background-color: #f9f9f9; width: 200px; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .sidebar h3 { margin-top: 0; } .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; } h1 { margin-top: 0; } iframe { width: 100%; height: 600px; border: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="container">  <div class="sidebar"> <h3>Menu</h3> <ul> <li><a href="#"><i class="material-icons">home</i> Home</a></li> <li><a href="#"><i class="material-icons">phone</i> Services</a></li> <li><a href="#"><i class="material-icons">credit_card</i> Billing</a></li> <li><a href="#"><i class="material-icons">layers</i>Purchases</a></li> <li><a href="#"><i class="material-icons">settings</i> Settings</a></li> </ul> </div>  <div class="content"> <iframe src="https://my-server.processmaker.net/webentry/request/3272/node_7" style="height:1000px;" frameborder="0"></iframe> </div> </div> </body> </html>

Conclusion