Author(s): Louis Ouellet

Ticketing systems are invaluable tools for managing tasks, issues, or support requests in an organized and efficient way. Whether you are running a help desk or just need a way to track internal issues, a ticketing system provides a centralized method to manage communication and resolve problems promptly. In this tutorial, we will guide you through building a simple ticketing system using DokuWiki and the Bureaucracy plugin. This approach allows you to leverage DokuWiki's flexible content management capabilities while offering an easy way for users to create and track tickets.

By the end of this guide, you will have a working ticketing system with pages for creating, viewing, and managing tickets. Let's get started!

To create this ticketing system, we use the following plugins:

• Bureaucracy: To handle form submissions and automate ticket creation.
• Tag: For tagging and categorizing tickets by status.
• Tag Button: To add interactive buttons for changing ticket statuses (e.g., Mark as Solved).
• Discussion: To add comments or notes to tickets for collaboration.
• Gallery: For adding image attachments related to the ticket.
• Barcode: To add a barcode representing the ticket ID for easy reference.
• Wrap: To help style different parts of the content, such as buttons and boxes.

It's important to set up proper Access Control Lists (ACL) to secure the ticketing system. You want the ticket creation form to be accessible to users who need to submit tickets. At the same time, the other pages, like ticket details or management templates, should only be accessible to authorized users who will handle the tickets.

To accomplish this, we will:

• Set up the Bureaucracy plugin to run as a non-existent user called bureaucracy in the Configuration Manager.
• Allow the bureaucracy user full control over the tickets directory using the ACL manager.

This setup will ensure that tickets can be created by users while preventing unauthorized access to ticket management functionalities.

The ticketing system is organized into different pages and templates that serve specific roles. Below is the structure of the system:

tickets/
├── start.txt       (This serves as the main index)
├── labels.txt      (Contains labels for our form)
├── mail.txt        (Contains the email template for tickets)
├── ticket.txt      (Contains the page template for individual tickets)
└── new.txt         (Contains the form to create new tickets)

Each file has a specific purpose, and we'll go through each of them in detail.

The start.txt file is the entry point for our ticketing system. It provides a list of tickets categorized by their status:

start.txt

~~NOCACHE~~
~~NOTOC~~
====== Tickets ======
 
<block centeralign>
<inline button>[[new|New Ticket]]</inline>
<inline button>[[ticket|Template]]</inline>
<inline button>[[mail|Mail]]</inline>
<inline button>[[labels|Labels]]</inline>
</block>
 
===== Oldest Ticket(s) =====
{{topic>.?ticket Ticket -priority -closed -solved -archived&table&nodesc&sort&date&user&nolinkbacks&tags&noimage&header&limit=5}}
 
===== Critical Ticket(s) =====
{{topic>.?ticket Ticket -priority -closed -solved -archived +critical&table&nodesc&sort&date&user&nolinkbacks&tags&noimage&header}}
 
===== Open Ticket(s) =====
{{topic>.?ticket Ticket -priority -closed -solved -archived&table&nodesc&sort&date&user&nolinkbacks&tags&noimage&header}}
 
===== Solved Ticket(s) =====
{{topic>.?solved -priority -archived&table&nodesc&sort&date&user&nolinkbacks&tags&noimage&header}}
 
===== Closed Ticket(s) =====
{{topic>.?closed -priority -archived&table&nodesc&sort&date&user&nolinkbacks&tags&noimage&header}}
 
===== Archived Ticket(s) =====
{{topic>.?archived -priority&table&nodesc&sort&date&user&nolinkbacks&tags&noimage&header}}

This page acts as the main dashboard, allowing users to see tickets organized by status, such as Open, Critical, Solved, etc.

The labels.txt file contains the labels for the form fields in our ticketing system, making it easier to manage and localize the system:

labels.txt

====== Labels ======
 
  * contact          = "Contact Information"
  * issue            = "Issue"
  * files            = "Upload Images"
  * create           = "Create your Ticket"
  * full_name        = "Full Name"
  * email            = "Email"
  * phone            = "Phone"
  * priority         = "Priority"
  * subject          = "Subject"
  * description      = "Description"
  * attachments      = "Upload file(s)"
  * open             = "Open Ticket"

These labels are used throughout the system to ensure consistent wording in the user interface.

The new.txt file contains the form that users will use to create a new ticket:

new.txt

====== Open a Ticket ======
 
<form>
Labels .:labels
Action template .:tickets:ticket .:tickets:@@ticketid@@:index -
Action mail mail@domain.com @@email@@
Usemailtemplate .:mail
Subject "Ticket - @@ticketid@@ - @@priority@@ - @@subject@@"
Thanks "Thank you, We have successfully received your ticket. Our support team will review the issue and get back to you as soon as possible."
 
Fieldset "Contact Information"
Textbox  full_name
Textbox  email
Textbox  phone
 
Fieldset "Issue"
Select priority "Low|Normal|High|Critical"
Textbox  subject
Textarea  description
Yesno attachments
 
Fieldset "Upload Images" attachments
File file1 ..: !
File file2 ..: !
File file3 ..: !
File file4 ..: !
File file5 ..: !
 
Fieldset "Create your Ticket"
Hiddenautoinc ticketid
Hidden created "=%Y-%m-%d %H:%M"
Submit open
</form>

This form collects essential information from the user, such as Full Name, Email, Priority, and a detailed description of the issue.

The ticket.txt file is used to generate a new ticket page when a user submits the form:

ticket.txt

~~NOTOC~~
====== @@ticketid@@ - @@subject@@ ======
{{tag>Ticket @@priority@@ %Y %B}}
----
<block float-right>
{{tag-button>closed:error|Mark as Closed}}
{{tag-button>solved:success|Mark as Solved}}
{{tag-button>archived|Archive}}
</block>
===== Ticket Information =====
|  <barcode type="UPCA" scale="4" size="64px" value="@@ticketid@@" />  ||||
^ ID | @@ticketid@@ ^ Created | @@created@@ |
^ Priority | @@priority|@@ ||
 
===== Contact Information =====
^ Name | @@full_name|@@ |
^ Email | [[@@email|@@]] |
^ Phone Number | @@phone|@@ |
 
===== Gallery =====
{{gallery>.}}
 
===== Issue =====
<block box>
@@description|@@
</block>
 
~~DISCUSSION|Notes~~

This template structures the information for each individual ticket page, making it easy to follow and manage each issue.

The mail.txt file is used to generate a new ticket email when a user submits the form:

mail.txt

====== Mail ======
<code html>
<style>
  main.site-main {
    box-sizing: border-box;
    color: rgb(101, 101, 101);
    display: block;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    line-height: 24px;
    overflow-wrap: break-word;
    text-align: left;
    text-size-adjust: 100%;
    unicode-bidi: isolate;
  }
 
  main.site-main .center {
    text-align: center;
  }
 
  main.site-main .header {
    margin-bottom: 64px;
  }
 
  main.site-main img {
    max-height: 256px;
    max-width: 256px;
  }
 
  main.site-main h1, main.site-main h2 {
    box-sizing: border-box;
    color: rgb(48, 48, 48);
    display: block;
    font-family: Montserrat, sans-serif;
    margin: 0 0 20px 0;
    padding: 0;
    text-align: left;
    overflow-wrap: break-word;
    unicode-bidi: isolate;
  }
 
  main.site-main h1 {
    font-size: 32px;
    line-height: 38.4px;
  }
 
  main.site-main h2 {
    font-size: 24px;
    line-height: 31.2px;
  }
 
  main.site-main hr {
    background-color: rgb(245, 245, 245);
    height: 5px;
    margin: 8px 0 20px;
    box-sizing: border-box;
    border: none;
  }
 
  main.site-main .level1, main.site-main .level2, main.site-main .table {
    box-sizing: border-box;
    color: rgb(101, 101, 101);
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    line-height: 24px;
    display: block;
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    text-align: left;
    text-size-adjust: 100%;
    unicode-bidi: isolate;
  }
 
  main.site-main .table {
    overflow-x: auto;
    margin-bottom: 20px;
  }
 
  main.site-main table {
    width: 100%;
    background-color: rgb(245, 245, 245);
    border-collapse: separate;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    line-height: 24px;
  }
 
  main.site-main table th, main.site-main table td {
    padding: 10px;
    border-bottom: 1px solid rgb(229, 229, 229);
    box-sizing: border-box;
    text-align: left;
  }
 
  main.site-main table th {
    font-weight: 700;
    background-color: rgb(229, 229, 229);
  }
</style>
<main class="site-main group" role="main">
  <div class="center header">
    <img src="https://laswitchtech.com/_media/logo.png" alt="logo">
    <h1 class="center">LaswitchTech</h1>
  </div>
  <h1>Ticket - @@ticketid@@ - @@priority@@ - @@subject@@</h1>
  <div class="level1"><hr></div>
  <h2>Ticket Information</h2>
  <div class="level2">
    <div class="table sectionedit1">
      <table class="inline">
        <tbody>
          <tr class="row0">
            <th class="col0"> ID </th><td class="col1"> @@ticketid@@ </td><th class="col2"> Created </th><td class="col3"> @@created@@ </td>
          </tr>
          <tr class="row1">
            <th class="col0"> Priority </th><td class="col1" colspan="2"> @@priority@@ </td><td class="col3"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <h2>Contact Information</h2>
  <div class="level2">
    <div class="table sectionedit6">
      <table class="inline">
        <tbody>
          <tr class="row0">
            <th class="col0"> Name </th><td class="col1"> @@full_name@@ </td>
          </tr>
          <tr class="row1">
            <th class="col0"> Email </th><td class="col1"> @@email@@ </td>
          </tr>
          <tr class="row2">
            <th class="col0"> Phone Number </th><td class="col1"> @@phone|@@ </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <h2>Issue</h2>
  <div class="level2">
    <div class="table sectionedit10">
      <table class="inline">
        <tbody>
          <tr class="row0">
            <th class="col0"> Subject </th><td class="col1"> @@subject@@ </td>
          </tr>
          <tr class="row1">
            <td class="col1" colspan="2"> @@description@@ </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</main>
</code>
 
<code text>
LaswitchTech
 
Ticket - @@ticketid@@ - @@priority@@
------------------------------------------------------------
Ticket Information
------------------------------------------------------------
ID: @@ticketid@@    Created: @@created@@
Priority: @@priority@@
 
------------------------------------------------------------
Contact Information
------------------------------------------------------------
Name: @@full_name@@
Email: @@email@@
Phone Number: @@phone|@@
 
------------------------------------------------------------
Issue
------------------------------------------------------------
Subject: @@subject@@
Description: @@description@@
</code>

This template structures the information for each individual ticket, Notifying the users.

By following this guide, you’ve successfully set up a basic ticketing system using DokuWiki and the Bureaucracy plugin. This system will help you keep track of requests, issues, and tasks in an organized way, streamlining communication and resolution. DokuWiki’s extensibility makes it an excellent choice for quickly setting up such internal tools.

Feel free to customize the labels, templates, and settings to meet your specific needs. The power of this ticketing system lies in its simplicity and adaptability, making it a perfect choice for small teams and projects.