Skip to main content

(21) Standalone Pages and Graphics

- Support Ticket Tutorial -​

Establishing Graphics on a Standalone Page​

Statistics can be put into graphic representations. This Advanced Topic will show how to create a dedicated page.

1. Adjust the Existing Support Tickets​

In order to create meaningful data for the graphics, the Support Tickets that were uploaded as part of (20) CSV Upload need to be adjusted.

  • On the end app, go to each Support Ticket and back-date the entries.
  • There are six Support Tickets:
    • Backdate the Created Date of one Support Ticket by one day
    • Backdate the Created Date of three Support Tickets by two days
    • Backdate the Created Date of two Support Tickets by three days

2. Establish a Standalone Page​

A standalone page can be created to show graphics.

  • Go to UI > Standalone Pages.
  • Click (+)
  • Set Name to: Graphics
  • Click Finish
  • Click (+) Add View
  • Click OK

3. Establish a Progress Bar to show the Number of Closed Support Tickets​

  • Click Graphs in the left sidebar
  • Click Progressbar
  • Click the created Progress Bar
  • Go to General tab
  • Set Style to: Primary
  • Set Value to: 
    (_, db, ctx) => db.TicketSet.Where(t => t.TicketStatus == TicketStatus.CLOSED).Count()
  • Set Maximum value to: 
    (_, db, ctx) => db.TicketSet.Count()

—

  • Go to Sections tab
  • Click Add section
  • Set Limit value to: 0
  • Verify Style is set to: None
  • Set Text to: 
    (_, db, ctx) => db.TicketSet.Where(t => t.TicketStatus == TicketStatus.CLOSED).Count().ToString()
  • Click OK

—

  • Click Add section
  • Set Limit value to: 
    (_, db, ctx) => (long)(db.TicketSet.Count() * 0.5)
  • Set Style to: Success
  • Set Text to: 
    (_, db, ctx) => db.TicketSet.Where(t => t.TicketStatus == TicketStatus.CLOSED).Count().ToString()
  • Click OK
  • Click OK

4. Establish a Bar Graph to show the Number of Support Tickets​

  • Click Bar Graph
  • Click Configure Bar Graph
  • Set Title Expression to: "Support Tickets"
  • Set Type to: Time Period
  • Set Date Range to: Rolling (Note: scroll down)
  • Set Rolling Date Range to: Last 7 days (excluding today)
  • Change Frequency to: Daily

—

  • Set Series Title Expression to: "Number of Support Tickets"
  • Set Data Source Entity to: Ticket
  • Set Time Attribute to: CreatedDate
  • Set Aggregation Fnc to: Count
  • Click OK

5. Establish a Pie Graph to show the Ticket Severity​

  • Click Pie Graph
  • Drag and drop the Pie Graph to the top of the second column
  • Click Configure Pie Graph
  • Set Title Expression to: "Ticket Severity"
  • Set Slices Data Source to:
(_, _, db, ctx) => db.TicketSet
    .GroupBy(t => t.TicketSeverity.Name)
    .Select(tg => new PieGraph.Slice(tg.Key, tg.Count()))
  • Click OK
  • Click OK
  • Click OK

6. Establish a Bar Graph to show the Staff Workload​

  • Click (+) Add View.
  • Click OK
  • Click Graphs in the left sidebar
  • Click Bar Graph
  • Click Configure Bar Graph
  • Set Title Expression to: "Staff Workload"
  • Set Type to: Custom
  • Set Labels Source to: 
    (_, _, db, ctx) => App.Security.Users.Select(x => new BarGraph.Label(x.Name, x.Id.ToString()))

—

  • Set Series Title Expression to: "Number of Support Tickets"
  • Set Series Data Source to: 
    (_, _, db, ctx) => db.TicketSet
        .GroupBy(g => g.AssignedTo.Id)
        .Select(x => new BarGraph.Point(x.Key.ToString(), x.Count()))
  • Click OK
  • Click OK —
  • Click Simple Components in the left sidebar
  • Click Placeholder
  • Drag and drop the Placeholder to the top of the second column
    • This will make the graph take up only half the page
  • Click OK

7. Establish a Connection to the Standalone Page​

  • Go to UI > Dashboards. Click Support Ticket Dashboard.
  • Click (+) Add Action
  • Set Type to: Link Standalone page
  • Set Standalone Page to: Graphics
  • Click OK

8. See the Graphs in the App​

  • Release the app.
  • Go to the App Overview. Update the Production instance.
  • Click Users
  • Creates at least two users to make the Staff Workload graph pretty
    • Click (+) Create New Account
    • Fill in Full name and Email (Beware you can't have two users with the same email)
  • Click ×

—

  • Click Open Instance
  • Go to Ticket list page
  • Assign some Tasks to both users
  • Close some Tickets

—

  • Go back to Dashboard
  • Click Graphs