DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. Integrate WordPress with Workflow Application

Integrate WordPress with Workflow Application

Tiensoon Law user avatar by
Tiensoon Law
·
Mar. 23, 11 · Interview
Like (0)
Save
Tweet
Share
39.39K Views

Join the DZone community and get the full member experience.

Join For Free

Imagine this:

  1. You have a Web frontend powered by WordPress
  2. You design a workflow application using Joget Workflow, and embed it into a WordPress page
  3. Enable WordPress widget to display the Joget Workflow Task Inbox
  4. Integrate Joget Workflow with WordPress’ user directory, using plugin

Yes, the interesting use case described above is the focus of this tutorial article, all by using open source products.

Last year I have published a series of tutorial articles about Joget Workflow at Javalobby, you may take a quick look at it for a brief understanding about Joget Workflow. In a short description, Joget Workflow is an open source workflow application builder.

Install Joget Workflow

Before you could start following-through this tutorial, you need to download and install Joget Workflow, have it accessible at http://localhost:8080/wflow-wfweb.

The "Download and Install Joget Workflow" section of this Javalobby article should give you a good insight.

Design Workflow Application

Now, let's assume that we are designing a Contact Form Process that is more comprehensive than any other WordPress contact form plugin available.


Figure 1: Contact Form Process Flow

As shown in Figure 1, this workflow is started with an evaluation for the purpose of the submitted contact:

  1. Editorial
  2. Advertising
  3. Or any other purpose; in this case, we are assuming a meet-up request

Each of the different purposes of the submitted contact will be handled by different use case actor / role (or in the workflow terminology -- participant).

To make the workflow slightly more interesting, we evaluate the gender of the contact submitter.

  1. If the submitter indicates herself as a female, the editor will get a task to follow-up with the meet-up request
  2. Otherwise, the poor guy will receive an automatic email reply, rejecting his meet-up request

All these logics and the process flow can be easily designed using the graphical Workflow Designer - one of the major components in Joget Workflow.

Import the Process Package Needed for This Tutorial

In order to keep this tutorial article relevant to its subject, I will not discuss in detail about how the Contact Form Process illustrated above can be designed in Joget Workflow. You may refer to the tutorial articles at Javalobby or Joget Workflow's Knowledge Base.

Instead, I have attached the exported package () at the end of this article. After installing Joget Workflow, please following these steps to import the package needed for this tutorial:

  1. Access to http://localhost:8080/wflow-wfweb in your Web browser
  2. Login with "admin" as username, and "admin" as password (without quotation marks)
  3. Navigate to Design Processes > Manage Processes
  4. Click the "Import Package" button
  5. Upload the package-demo-20110324010435.zip file you have downloaded
  6. Navigate to Design Processes > Manage Processes again, and you will see "Contact Form Process" listed as one of the processes available

Clicking into the "Contact Form Process", you will be greeted with the Update Process page that allows us to configure Participant and Activity Mapping. In the Activity Mapping tab, you can configure the following Email Plugin properties for "Email Reply to Automatically Reject Meetup Request" and "Email Reply to Contact Submitter" activities:

  • SMTP Host
  • SMTP Port
  • Does the SMTP need authentication?
  • SMTP Username
  • SMTP Password
  • From

In this package, I have mapped the participants as follows:

  1. Contact Submitter - anyone
  2. Editor - clark/password (username/password)
  3. Advertising In-Charge - david/password (username/password)

 

Embed the Process into a WordPress Page

In the Update Process page, clicking on the "Show Additional Info" link would reveal a URL known as "Link To Run Process".


Figure 2: Link to Run Process

You can easily embed the starting activity of this process into any HTML, by copying the URL of "Link To Run Process" into the src attribute of an IFrame, such as:

<iframe src="http://localhost:8080/wflow-wfweb/web/client/process/start/demo:4:contact-form-process?embed=true&completeLabel=Submit&cancel=false&complete=http%3A%2F%2Flocalhost/wordpress/contact-submission-acknowledgement.html" width="100%" height="700"></iframe>

The value of the "complete" parameter, defines the URL that will be redirected to, when the form of the starting activity is submitted.


Figure 3: Example of a Process Embedded into a WordPress Page, using IFrame

Now, whenever a new submission is completed, the Contact Form Process will be automatically started in Joget Workflow, and activities will flow according to the workflow design.

So, if you have submitted the form for the purpose of "Contribute Content to This Blog", clark - the Editor, will get a new task in his Task Inbox. You can login to the Workflow Management Console as clark/password, to perform the "Reply to Content Contribution Request" task.

Simple, isn't it?

Display Task Inbox in WordPress Site, Using Widget

Instead of requiring all your process users to perform his/her task by logging into Workflow Management Console, we can also display the Task Inbox on WordPress site, by installing and enabling the WordPress' Joget Workflow Inbox Widget.

  1. Download Joget Workflow Inbox Widget from WordPress Plugin Directory.
  2. Unzip the Widget, and upload the joget-inbox-widget directory to your WordPress' /wp-content/plugins/ folder
  3. Login to WordPress Administration Panel, and activate the Joget Workflow Inbox plugin through the "Plugins" menu in WordPress
  4. Navigate to the "Widgets" page, and place "Joget Workflow Inbox" on any visible bar in your theme
  5. Configure the widget to point to your Joget Workflow installation. Unless you have changed it, the default URL should be pointed to your /wflow-wfweb/ (i.e. http://localhost:8080/wflow-wfweb/). Please note that your URL has to be publicly accessible (and http://localhost will not likely be)

    Figure 4: Configuring Joget Workflow Inbox Widget
  6. Go to the frontend of your WordPress site, and you should be able to see the Joget Workflow Inbox Widget shown on the targeted sidebar.


Integrate Joget Workflow with WordPress' User Directory

By default, Joget Workflow uses its own user directory implementation. However, if you would like to abandon the default user directory, and integrate with the user base maintained in WordPress, we can easily achieve this by using Joget Workflow's WordPress DirectoryManager Plugin.

  1. Download WordPress DirectoryManager Plugin (.jar) from Joget Marketplace.
  2. In Workflow Management Console, navigate to Settings > Manage Plugins.
  3. Click the "Upload Plugin" button, and upload the JAR file.
  4. Navigate to Settings > System Setup, and click to open the "DirectoryManager Settings" tab
  5. Select "WordPress Directory Manager" from the drop-down list, and click the "Select Plugin" button.
  6. In the overlay dialog, configure all the necessary configuration properties. If you are unsure of the settings, please refer to them from your wp-config.php file (which sets the configuration for your WordPress deployment).

    Figure 5: Configuring WordPress DirectoryManager Plugin
  7. If the WordPress database is hosted in a server different from Joget Workflow installation, make sure that the host is accessible.
  8. Make sure that the WordPress Authentication URL is accessible from your Joget Workflow installation. The configuration should point all the way to your joget-login.php file (i.e. http://www.mywpsite.com/wordpress/wp-content/plugins/joget-inbox/joget-login.php).
  9. IMPORTANT: After clicking the "Submit" button to apply the configuration changes, DON'T logout immediately. Instead, open another browser window, and try to log in using any WordPress user. If successfully authenticated, means it's working, and you can savely logout the existing "Administrator" session that you have. Otherwise, you might need to re-configure your DirectoryManager properties, and to make sure that the Joget Workflow server can establish a connection the WordPress' MySQL.

Now, you can login to Workflow Management Console, using any user account maintained in WordPress user directory.

That's it! With some configurations, we can easily integrate our workflow application with WordPress. Stay tuned for the Drupal integration in similar fashion too!

Workflow application WordPress Joget Workflow Integration

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Too Many Tools? Streamline Your Stack With AIOps
  • Spring Cloud: How To Deal With Microservice Configuration (Part 1)
  • Multi-Cloud Database Deep Dive
  • The Top 3 Challenges Facing Engineering Leaders Today—And How to Overcome Them

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: