Integrate WordPress with Workflow Application

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!