Skip to main content

(8) Workflows

- Support Ticket Tutorial -​

Establish a System for Resolving Support Tickets​

The foundation version of the Support Ticket app can only create and edit tickets. This Advanced Topic tutorial will add a mechanism to see the progress of a ticket from its creation to its resolution.

1. Define Ticket Status Codebook​

  • Type Ctrl + Shift + C; click Codebook
  • Set Name to: Ticket Status
  • Verify that Create Display Attribute is set to: Name

  • Click Finish
    **— **
  • On the Ticket Status codebook, click Edit Entries
  • Copy and paste the entries from the table below (without table headers)
CodeName
NEWNew
IN_PROGRESSIn Progress
CLOSEDClosed
  • Click OK
  • Save changes: Ctrl + S

2. Update your Ticket Entity​

  • Go to Data > Entities and double-click Ticket
  • In Data Definition > References, click Add Reference
  • Set Name to: Ticket Status
  • Set Type to: Codebook
  • Set Referenced to: TicketStatus
  • Set Please select default values to: NEW
  • Click Save

—

  • In Data Definition > Attributes, click Add multiple
  • Set the following new attributes (i.e., Attribute name — Type):
    Date In Progress – Date and Time (mark Allow null)
    Date Closed – Date and Time (mark Allow null)
    Assigned To – User
    Description Of Resolution – Rich-text Markdown

  • Click Add Attributes
  • Save changes: Ctrl + S

3. Add Workflow​

State machines represent workflow transitions and conditions.

  • Go to Business > State Machines, click (+) OR Click Ctrl + Shift + C and, in the Business section, click State Machine
  • Set Name to: Ticket Status
  • Set Entity to: Ticket
  • Set Codebook Representing States to: TicketStatus

  • Click Finish

4. Add Transitions​

In the Ticket Status state machine,

  • Click Add New Transition
  • Set Origin State to NEW.
  • Set Destination State to IN_PROGRESS
  • Mark Transition Handler. Click in the box. Copy and paste:
    • It sets the Date In Progress of the Ticket to the current date and time when the transition from NEW to IN_PROGRESS is completed
(ticket, db, ctx) =>
{
    ticket.DateInProgress = DateTime.Now;
}

  • Click OK
    —

Follow the same steps to establish each additional transition.

  • Click Add New Transition
  • Set Origin State to: IN_PROGRESS.
  • Set Destination State to: CLOSED
  • Mark Transition Handler. Copy and paste:
    • It sets the Date Closed of the Ticket to the current date and time when the transition from IN_PROGRESS to CLOSED is completed
(ticket, db, ctx) =>
{
    ticket.DateClosed = DateTime.Now;
}
  • Click OK
    —
    Only a ticket with a Description of Resolution can be closed. Under the IN_PROGRESS->CLOSED transition, click Add New Transition Condition
  • Set Title of Condition to Description of Resolution Provided
  • Verify that Severity is set to: Error
  • Click in the Condition box. Copy and paste:
(ticket, db, ctx) => !string.IsNullOrEmpty(ticket.DescriptionOfResolution)
  • Click OK

  • Click OK
  • Save changes: Ctrl + S

5. Add State Machine to Ticket Entity​

  • Open the Ticket entity (Go to Data > Entities and double-click Ticket.)
  • Click the Settings tab. In the User Interface section, set State Machine to: Ticket Status
  • Set State Codebook Reference to: TicketStatus (TicketStatus)
  • Save changes: Ctrl + S

6. Modify your Ticket Detail Page​

  • Go to UI > Entity Pages and double-click Ticket Detail
  • In the top Layout section, click Edit Layout
  • Add the following data fields: Ticket Status, Created Date, Date In Progress, Date Closed, Assigned To, Created By and Description of Resolution.
  • Drag and drop the data fields around inside the two (or more) columns to the desired layout
    —
    Set all of the Date data fields to Read Only. Click on each of the following titles one at a time: Created Date, Date In Progress, Date Closed
  • Mark Enabled Expression and type: false

  • Click OK
    —
    Establish that Date In Progress and Date Closed must have values in order to be shown to the user.
  • Click Date In Progress
  • Set Visible Expression to:
(ticket, db, ctx) => ticket.DateInProgress.HasValue
  • Click OK

  • Click OK
  • Click Date Closed
  • Set Visible Expression to:
 (ticket, db, ctx) => ticket.DateClosed.HasValue
  • Click OK
  • Click OK
    —
    Click DescriptionOfResolution
  • In the Validations section, click the Magic Wand; select: Not empty string
  • On the Can't be empty entry, click the Edit icon
  • Verify that Valid Condition shows the following: !String.IsNullOrEmpty(ticket.DescriptionOfResolution)
  • Mark Is Applicable. Copy and paste:
(ticket, db, ctx) => ticket.TicketStatus == TicketStatus.IN_PROGRESS

  • Click OK
    • You have now created a Validator that ensures that each Ticket In Progress has its Description Of Resolution filled in
  • Click OK
  • Click OK
  • Click OK
  • Save changes: Ctrl + S

7. Show State Machine Buttons​

  • Continue on the Ticket Detail page (UI > Entity Pages, double-click Ticket Detail.)
  • Click the Settings tab. In the UI section, check Show State Change Toolbar
  • Save changes: Ctrl + S

8. Update Ticket List Page​

The main list page should include this new information.

  • In UI > Entity Pages, double-click Ticket list
  • Click the Columns tab (if necessary).
  • Click (+) Add Column

  • Add TicketStatus (TicketStatus)
  • Add other new columns (except Title) and organize the columns for the desired layout
  • Click Close
  • Save changes: Ctrl + S

Create some Highlights to make the Ticket list easy to navigate.

  • Go to Highlights tab

  • Click (+) Add Highlight

  • As you can see, automatic highlights for Ticket Statuses are already created.

    • Hover over NEW
    • Click Danger

    —

    • Hover over IN_PROGRESS
    • Click Primary
      —
    • Hover over CLOSED
    • Click Success
      —

  • Click (+) Add Custom Highlight

  • Set Name to: Ticket is critical

  • Set Icon to: Exclamation circle

  • Set Highlight condition to:

    (ticket, db, ctx) => ticket.TicketSeverity == TicketSeverity.CRITICAL

  • Click OK
  • Save changes: Ctrl + S

The final improvement to the Ticket list will be the creation of Filters.

  • Go to Filters tab

  • Select these automatically created filters:
    • Assigned To
    • Created By
    • Description
    • Title
    • TicketSeverity > Multi select filter
    • TicketStatus > Multi select filter

—

  • Go to Filters layout tab
  • In the layout editor, expand the Data Fields menu. Click each of them. Drag and drop the elements as desired.
  • Save changes: Ctrl + S

9. Deploy and Run the App​