(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