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. 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. 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 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. 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. 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. You can delete the Card Header component.

4. Right-click on the Card Body and add a Row component. 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. 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. 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. 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.