# Adding components to the ticket summary page
Navigate to the **cpticketmgmt** page canvas.
You can view that the page is already added as a component in the **Tree** tab.
## To add popup to the page
1. Right-click on the **Page** component and add the **Data Store** component .
1. Add the **CptmCustomerTickets** to the **Data** **Store** component.
2. Add the following data sources to separate **Data** **Store** components:
1. CptmCustomerUserMapping
2. CptmCustomers
3. CptmTicketSummaryView
3. Right-click on the first **Page** component, and add a **Card** **Wrapper** component.
4. Right-click on the first **Page** component, and add a **Popup** component.\
\&#xNAN;*By default, the **Vertical Layout Panel** component along with its child components is added.*
5. Right-click on the **Card** **Header** component, and add a **Button** component.
1. In the **Text** field of the **Button** component, change the title to **New** **Ticket**.
2. In the **Icon** field, select a suitable icon from the list.\
For example: **folder-plus**.
3. Add the **Show** **Popup** action to the trigger.\
The button will be used to add a new ticket to the datasource.
4. In the **Properties** tab of the **Popup** component, under **Standard** properties, copy the value in the **Item** **ID** field.
5. In the **Properties** tab of the **Show** **Popup** action, under **General** properties, in the **Popup Item ID** field, paste the **Item ID** of the **Popup** component.
### To add triggers to the Popup
* Right-click on the **Popup** component and add the following triggers:
* **Trigger After Popup Close**
* **Trigger Before Popup Open**
1. Right-click on the **Trigger Before Popup Open** and add the **Refresh** **DataSource** action.
1. In the **Properties** tab of the **Refresh DataSource** action, under **General** properties, in the **Target Data Source Alias** field, select **CptmCustomerTicketsAlias.**
2. To add a new ticket to the datasource, right-click on the trigger and add the **Insert** **Record** action.
3. In the **Properties** tab of the **Insert** **Record** action, under **General** properties, in the **Target Data Source Alias** field, select **CptmCustomerTicketsAlias.**
4. To insert a new ticket row on top of the datasource entries, select the **Insert At Top** checkbox.
5. To specify the mandatory ticket information columns, in the **Tree** tab, right-click on the **Insert** **Record** action, and add the **Input** component.
6. In the **Properties** tab of the **Input** component, under **General** properties, in the **Value** **Expression** field, click. The **Expression Builder: Value Expression** dialog box is displayed.
1. Under **Category** column, select **Datasource**.
2. Under **Choose a Datasource Alias** column, select **CptmCustomersAlias**
3. Under **Choose an Attribute** column, select **customerId**.
4. Click **Submit**. The customer Id attribute of the Customers datasources is added.
7. In the **Target Attribute** field, select **Customer** **Id**.
8. Repeat the steps to add the following input elements:
1. ticketType
2. priority
3. status
4. requestedBy
2. Right-click on the **Trigger After Popup Close** component and add the **Refresh** **DataSource** action.
1. In the **Properties** tab of the **Refresh DataSource** action, under **General** properties, in the **Target Data Source Alias** field, select **CptmCustomerTicketsAlias**.
2. Expand the child components of the **Vertical Layout Panel** component, and delete the second **Vertical Section** component. Also, delete the **Scroll** **Layout** component from the first **Vertical Section** component.
3. To add text fields to the popup for ticket description, add the **Form** component to the **Vertical Section** component.
4. In the **Properties** tab of the **Form** component, under **DataSource** properties, in the **Data Source Alias** field, select **CptmCustomerTicketsAlias.**
5. Right-click on the **Form** component and add the **Text Field** component.
1. In the **Properties** tab of the **Text Field** component, under **Label** properties, in the **Field Label** field, type **Ticket Title.**\
This text field is for the user to add a title to the ticket.
2. Under **Data** properties, in the **View Attribute** field, select **Title** from the list.
3. Select the **Insert Allowed** and **Update Allowed** checkboxes.\
\&#xNAN;*You can set the column size and change the font color and style under the **Label*** ***Style** properties. For the tutorial we have kept the column size as 12.*
4. Add the **Text** **Field** component for the following mandatory ticket information details:
1. Ticket Title
2. Ticket Description
3. Application URL
4. Username
5. Password\
\&#xNAN;*Select the corresponding datasource element for each field in the **View*** ***Attribute** field.*
6. Right-click on the **Form** component and a **Button**.
1. In the **Text** field of the **Button** component, change the title to **Create**.
2. In the **Icon** field, select a suitable icon from the list.\
For example: **folder-plus**
3. Add the **Save DataSource** action to the trigger.\
\&#xNAN;*The button will complete the action of adding the new ticket to the datasource.*
4. In the **Properties** tab of the **Save DataSource** action, under General properties, in the **Target** **Data Source Alias** field, select **CptmCustomerTicketsAlias.**
5. Right-click on the **Save DataSource** action, and add the **Hide** **Popup** action.\
\&#xNAN;*This action will close the popup once the new ticket is added in the datasource.*
6. In the **Properties** tab of the **Hide** **Popup** action, under **General** properties, in the **Popup Item ID** field, paste the **Item ID** of the **Popup** component.
7. Right-click on the **Form** component and a **Button**.
1. In the **Text** field of the **Button** component, change the title to **Cancel**.
2. In the **Icon** field, select a suitable icon from the list.\
For example: **folder-minus**
3. Add the **Hide** **Popup** action to the trigger.
4. In the **Properties** tab of the **Hide** **Popup** action, under **General** properties, in the **Popup Item ID** field, paste the **Item ID** of the **Popup** component.
8. On the menu bar, click 
. The components added to the page are saved.\
You have successfully added components to the page header and the popup.
The **cpticketmgmt** page will be used as a summary page to view the status of the available tickets in the database.
You need to add components to display and differentiate between the status of the available tickets.
## To add components to view the ticket count:
1. Right-click on the **Card** **Body** and add a **Vertical Layout Panel** component.
2. Delete the second **Vertical Section** component.
3. Right-click on the **Vertical Section** component and add a **Card Wrapper.**\
\&#xNAN;*You can delete the **Card Header** component.*
4. Right-click on the **Card Body** and add a **Row** component.\
\&#xNAN;*We will be creating a row with multiple columns to display the ticket statuses.*\
*By default, a **Col** component is added to the **Row** component.*
1. Right-click on the **Col** component and add a **Card Wrapper**.
2. In the **Title** field, type **Open**.
3. Right-click on the **Card Header** component and add the **Icon** component.
4. In the **Properties** tab of the **Icon** component, under **General** properties, in the **Icon** field, select a suitable icon.\
For example: **folder-open.**
5. Right-click on the **Card Body** component and add a header component, namely **H1**.
6. In the **Text** field, type 0.
7. Right-click on the **Row** component and add **Col** components for the following ticket statuses:
| **Ticket status** | **Corresponding datasource attribute** |
| ----------------- | -------------------------------------- |
| Open | New |
| In Progress | In Progress |
| Awaiting Response | Awaiting Response |
| In Testing | Awaiting Testing |
| On Hold | On Hold |
| In Review | Under Review |
| Closed | Closed |
### To view the ticket details
1. Right-click on the **Card Body** and add another **Row** component.
1. Right-click on the **Col** component and add a **Smart** **Search** component.
2. In the **Data Source Alias** field, select **CptmCustomerTicketsAlias**.
3. Right-click on the **Smart Search** component and click **Auto Populate Attributes.**
4. Add another **Col** component to the row.
5. Right-click on the **Col** component and add a button.
6. Add the **Export Data** action to the trigger.
7. In the **Properties** tab of the **Export Data** component, under **General** properties, from the options under **Field** **Type**, select **Excel**.\
\&#xNAN;*You can download the ticket summary datasource table as an Excel sheet in your device.*
2. Right-click on the **Card Body** and add **Card Table** component.\
\&#xNAN;*You can view the ticket details in a tabular form.*
1. In the **Properties** tab of the **Card Table** component, under **DataSource** properties, in the **Data Source Alias**, select **CptmCustomerTicketsAlias.**
3. Right-click on the **Card Table** and add the **Card Table Column** component.
4. Right-click on the **Card Table Column** and add a **Paragraph** component**.**
1. In the **Text** field, type **Ticket ID**.
2. In the **View Attribute** field, select **Ticket Id.**\
\&#xNAN;*You can change the length of the component by changing the pixels in **Max*** ***Width** field.*
5. Add separate **Card Table Column** components for each ticket details attribute.
6. Add the following child components to fill-in the **Card Table**:
| **Component** | **Ticket details attribute** |
| -------------- | ---------------------------- |
| Paragraph | Title |
| Paragraph | Ticket Type |
| Paragraph | Requested By |
| Row-Col | User Picture |
| Row-Col | Assigned To |
| Badge | Status |
| Badge | Priority |
| Paragraph-Date | Created On |
| Paragraph-Date | Update On |
| Paragraph | Application Name |
| | |
7\. On the menu bar, click . The components added to the page\
are saved.
8\. To view the page functionalities, on the menu-bar, click 
. You\
can now access the page with all the defined functionalities.
