Skip to main content

(15) Components – Dashboard

- Support Ticket Tutorial -​

Graphically Show the Resolution of Support Tickets​

Since we have a workflow for the Support Tickets, we can establish a kanban-style layout to follow their progress from creation to resolution. Users can drag-and-drop the tickets to change the status. Plus, when a Support Ticket is moved to the Closed category, it can be moved to a "Closed Support Ticket" data grid, where they can be deleted.

1. Set Up the Kanban Dashboard​

  • Go to UI > Dashboards and click (+) OR Type Ctrl + Shift + C, locate the UI section and click Dashboard
  • Set Name to: Support Ticket Dashboard
  • Click Finish
    —
  • On the Support Ticket Dashboard page, go to the Layout section and click Advanced Components
  • Select: Kanban Board
  • Click Configure Kanban Board
  • Set Item Entity to: Ticket
  • Set Reference to Column Entity to: TicketStatus
  • Set Detail Page for Items to: Ticket Detail

—

  • Set Items Data Source Expression to:
(_, db, ctx) => db.TicketSet.Where(t => t.TicketStatus != TicketStatus.CLOSED)
  • Verify that Item label Expression is set to:
(item) => item.Title
  • Set Item Description Expression to:
(item) => item.Description
  • Set Item Visuals Expression to:
(item, db, ctx, visuals) =>
{
    if (item.AssignedTo != null)
    {
        visuals.AddUserAvatar(item.AssignedTo, "Assigned To " + item.AssignedTo.Name);
    }
    
    visuals.AddTag(item.TicketStatus.Name, Kanban.TagStyle.Primary);
    
    visuals.AddTag(new Kanban.Tag(item.TicketSeverity.Name,
        (item.TicketSeverity == TicketSeverity.CRITICAL) ?
        Kanban.TagStyle.Danger :
        (item.TicketSeverity == TicketSeverity.MAJOR) ?
        Kanban.TagStyle.Warning :
        (item.TicketSeverity == TicketSeverity.MINOR) ?
        Kanban.TagStyle.Primary : Kanban.TagStyle.Secondary));
    
    visuals.AddIcon((item.TicketStatus == TicketStatus.NEW) ? AppIcon.Warning : AppIcon.Empty);
}
  • Click Ok
  • Save changes: Ctrl + S

2. Establish Data Grid on the Dashboard​

  • On the Support Ticket Dashboard, click Advanced Components

  • Select Data Grid

  • Click Configure Data Grid

  • Go to the General tab (the default setting)

  • Set Label to: Closed Support Tickets

  • Set Entity to: Ticket

  • Set Data Source to :

(_, db, ctx) => db.TicketSet.Where(t => t.TicketStatus == TicketStatus.CLOSED)

-

  • Go to the Columns tab
  • Click Add Column
  • Select Date Closed, Title, Description, and Created By

-

  • Go to the Batch Commands tab
  • In the upper right corner, click Add Batch Command
  • Select Delete Entity Command
  • Click Close
  • Click Ok
  • Save changes: Ctrl + S

3. Deploy and Run the App​