ProcessMaker Developers Documentation
processmaker.comKnowledge CenterProcessMaker University
Guides
Guides
  • Getting Started
    • Installing ProcessMaker
  • Authentication
    • Creating a Client Application
    • Getting an Access Token
    • Getting a Refresh Token
  • Working with the API
    • Starting a Request via REST API
    • Starting a Request via Web Hook
  • Embedding Forms
    • Starting a Request via Anonymous Web Entry
    • Participating in a Workflow via Intermediate Web Entry (Anonymous)
    • Participating in a workflow via Intermediate Web Entry (Authenticated)
    • Angular Inbox Tutorial
      • Part 0: Overview
      • Part 1: Hello World
      • Part 2: Services & Dependencies
      • Part 3: Components
      • Part 4: The Inbox
      • Part 5: The Screen & Form Elements
  • Script Task Examples
    • PHP
  • Packages
    • ProcessMaker Platform Packages
      • Actions By Email Package
      • Advanced Screens Package
      • Advanced User Package
      • Auth Package
      • C# Package
      • Collections Package
      • Comments Package
      • Conversational Forms Package
      • Data Connector Package
      • Decision Tables Package
      • Documentation Package
      • DocuSign Package
      • Dynamic UI Package
      • File Manager Package
      • Google Places Package
      • IDP Package
      • Java Package
      • PDF Generator Package
      • PM Blocks Package
      • Process Optimization Package
      • Python Package
      • R Package
      • Saved Searches Package
      • Send Email Package
      • Signature Package
      • Slack Notification Package
      • Translations Package
      • Versioning Package
      • Vocabularies Package
      • Web Entry Package
    • Custom Packages
      • The Package Skeleton
      • Creating Your First ProcessMaker Package
Powered by GitBook
On this page
  • Step 3: Customize the iFrame Attributes (Optional)
  • Step 4: Test and Verify the Integration
  • Conclusion
  1. Embedding Forms

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.

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

Last updated 1 year ago

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.

Embedded Web Entry Form - Authentication Screen
Embedded Authenticated Web Entry Form into a Third-party Application