Create User Interfaces

ToolJet offers a variety of pre-built components that streamline the development process and allow for rapid prototyping and deployment of internal tools. This guide is focused on building a basic UI for a Support Desk Dashboard application.

Creating the Header

• Drag and drop a Text component on the top left of the canvas.
• Click on the component to open its Properties Panel on the right and add Support Desk Dashboard under its Data property.

You can see all the available properties of a component in the Properties Panel. You can manage the functionality and styling properties of the component in the Properties Panel.

• Change its font size to 24, font weight to bold and color to blue(hex code - #408FCC).
• Add another Text component below it and enter Track and manage all your tickets in one place under its Data property.
• Change its font size to 14 and color to grey (hex code - #9B9B9B).

Support Tickets Counter

• Drag and drop Statistics component next to it.
• Under its Primary value label, enter Created and enter a number under Primary value.
• Change its Primary label color and Primary text color to blue(#4A90E2).
• Disable Hide secondary value
• Add 2 more Statistics components for Pending and Closed tickets.

Tickets Table

• Add a Table component on the canvas.
• Navigate to its Properties Panel on the right and change its Border Radius to 10.
• Under its Data property, add the below dummy data:

{{ [{
    ticketId: "TCK1001",
    customerName: "Jane Doe",
    issueType: "Login Issue",
    priority: "High",
    status: "Open",
    lastUpdated: "2024-04-12"
  },
  {
    ticketId: "TCK1002",
    customerName: "John Smith",
    issueType: "Payment Failure",
    priority: "Medium",
    status: "Pending",
    lastUpdated: "2024-04-11"
  },
  {
    ticketId: "TCK1003",
    customerName: "Alice Johnson",
    issueType: "Feature Request",
    priority: "Low",
    status: "Closed",
    lastUpdated: "2024-04-10"
  },  {
    ticketId: "TCK1004",
    customerName: "Sarah Dunsworth",
    issueType: "Feature Request",
    priority: "High",
    status: "Closed",
    lastUpdated: "2024-04-10"
  },
] }}

• Add a Text component above it and enter Tickets under its Data property.
• Change its font size to 14 and color to grey (hex code - #9B9B9B).
• Under the Columns section, click on the columns and change their Column name properties to update the column name. For instance, change "ticketId" to "ticket ID", "customerName" to "customer name", etc.

Adding a New Page

• Click on Pages on the left sidebar - there will be a Home page by default. Rename the home page to Dashboard.
• Click on the + icon to create a new page and rename the new page to Customers.

• Click and drag to select all components on the Dashboard page, copy them (CMD+C for Mac and Cntrl+C for Windows) and paste (CMD+V for Mac and Cntrl+V on Windows) them in the Customers page.

• For the Text component for Tickets, change the Data property to Customers.

• Add the below data under the Table's Data property.

{{[
    {
        id: 1,
        name: "John Doe",
        email: "[email protected]",
        phone: "+1234567890",
        status: "Active",
        issuesResolved: 0
    },
    {
        id: 2,
        name: "John Smith",
        email: "[email protected]",
        phone: "+1234567891",
        status: "Inactive",
        issuesResolved: 0
    },
    {
        id: 3,
        name: "Alice Johnson",
        email: "[email protected]",
        phone: "+1234567892",
        status: "Active",
        issuesResolved: 1
    },
    {
        id: 4,
        name: "Michael Brown",
        email: "[email protected]",
        phone: "+1234567893",
        status: "Inactive",
        issuesResolved: 4
    },
    {
        id: 5,
        name: "Sarah Dunsworth",
        email: "[email protected]",
        phone: "+1234567893",
        status: "Active",
        issuesResolved: 1
    }
]}}

Changing the Theme

Click on the Settings button on the left sidebar. The App mode property will be set as Auto by default. Switch the App mode property to dark. Now when you preview the app, you can see that the app has a dark color scheme.

When you keep the App mode as auto, it will follow the color scheme of the browser.

This guide has outlined the steps to create a Support Desk Dashboard UI using ToolJet's components. You now have a visually appealing interface that will help manage and track support tickets efficiently. Continue to explore ToolJet to learn about adding functionality to the UI.