Adding components to a new ticket page

Navigate to the cpticketmgmt page, and add a new ticket.

1. On the top-right corner of the cpticketmgmt page, click New Ticket. The Add Ticket dialog box is displayed.

2. Fill-up the necessary details in the form and click Create.

3. Refresh the page, and you can now see the newly added ticket as the first entry in the Card Table.

4. Double-click on the first entry. The new ticket page canvas is displayed.

5. On the menu bar, click . The components added to the page are saved.

To add components to the ticket details page component:

1. Right-click on the Page component and add separate Data Store components for the following datasources:

   1. CptmCustomerUserMapping

   2. CptmCustomerTickets Select the Auto-Query and Update Allowed checkboxes to inherit and modify the datasource attributes.

2. Right-click on the CptmCustomerTickets Data Store component and add Trigger on Query.

   1. Add the Show Popup action to the trigger.

3. Right-click on the Page component and add three Popup components.

   1. In the Properties tab of the Popup component, under General properties, in the Title field, enter Change history.

   2. Change the Title of the second Popup to Notes.

   3. Change the Title of the second Popup to Update Title.

4. Right-click on the Change history popup and add the Trigger After Popup Open. Add the Query DataSource action to the trigger.

5. Right-click on the Vertical Section child component of the Notes popup and add a Card Wrapper.

   1. Change the Card Header Title to Internal Comments.

   2. Right-click on the Card Body and add the Collaboration component.

   3. In the Properties tab of the Collaboration component, under General properties, in the Collaboration Datasource Alias, type CptmCustomerTickets.

   4. In the Context field, type Internal Comments.

   5. In the Context Value field, type #{params.ticketId}

   6. In the Date Format field, type DD-MM-YYYY HH:mm

   7. Select the Show Likes, Show Attachments, and Always Show Delete checkboxes.

6. Add a button to the second Vertical Section of the Notes popup.

   1. Change the Button Title to Close.

   2. Add the Hide Popup action to the trigger.

   3. In the Properties tab of the Hide Popup action, under General properties, in the Popup Item ID field, paste the Item ID of the Notes popup component.

7. Add a Row component to the Update Title popup.

   1. Add a header component to the Col component, namely, H5.

   2. In the Text field, type Update Title.

8. Add another Col component to the row.

   1. Right-click and add an Icon component to the column.

   2. Add the Refresh DataSource and Hide Popup actions to the trigger.

   3. In the Properties tab of the Refresh DataSource action, under General properties, in the Target Data Source Alias field, select CptmCustomerTicketsAlias.

   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 Update Title popup component.

9. On the menu bar, click . The components added to the page are saved.

To add components for ticket status and description:

1. Right-click on the Page component and add a Vertical Layout Panel component.

   1. In the Properties tab of the Vertical Section component, under General properties, in the Height field, type 0.1.

2. Add a Card Wrapper to the Vertical Section component.

   1. Delete the Card Header.

   2. Add a Row component to the Card Body.

   3. In the Properties tab of the Rol component, under DataSource properties, select the Use the Existing Data Source checkbox.

   4. In the Data Source Alias field, select CptmCustomerTicketsAlias.

   5. Add a header component to the Col component. For example: H3.

   6. In the Properties tab of the H3 component, under General properties, in the View Attribute field, select Ticket Id. The header component will now display the ticket Id fetched from the datasource.

3. Add another Col component to the row.

   1. Right-click on the Col component and add a Badge component, to display the status of the ticket.

   2. In the Properties tab of the Badge component, under General properties, in the Text field, enter New.

   3. In the Badge Color field, click Enter Custom and again click Expression Builder. The Expression Builder: Badge Color dialog box is displayed.

   4. In the bottom of the dialog box, in the Expression text box, enter the following expression: decode(#{CptmCustomerTicketsAlias.status},'1','danger','2','primary','3','warning','4','default','5','success')

   5. Click Submit. The expression specifies the badge color according to the status of the ticket.

   6. In the View Attribute field, select Status from the list.

   7. Add another Badge component to the column and in the Text field, enter Status.

   8. To add badge color, repeat step d. The expression specifies the badge color according to the priority status of the ticket.

   9. In the View Attribute field, select Priority from the list.

4. Add another Col component to the row.

   1. Add a Text Field component to the column.

   2. In the Properties tab of the Text Field component, under Label properties, delete the text in Field Label field.

   3. In the Placeholder field, click. The Expression Builder: Tool Tip dialog box is displayed.

      1. Under Category column, select Datasource.

      2. Under Choose a Datasource Alias column, select CptmCustomerTicketsAlias

      3. Under Choose an Attribute column, select Title.

      4. Click Submit.

5. Add another Col component, and set the base size, so that the column is displayed in left corner of the page.R

   1. Right-click on the Col component and add the Icon component.

   2. Add a Trigger On Click to the Icon component.

   3. Add the Set as Current StoreRecord and Show Popup actions to the trigger.

6. Add another Col component to the row

   1. Add a button to the Col component.

   2. In the Text field, enter Ticket Summary. You can select a suitable icon under the Icon field.

   3. Add the Go To Page action to the trigger.

   4. In the Properties tab of the Go To Page action, under General properties, in the Page State field, enter app.cptickets (the page state of the cpticketmgmt page).

7. Add another button to the Col component, and set the button title as Changes History.

   1. Add the Show Popup action to the trigger.

8. Add another button to the Col component, and set the button title as Internal Comments.

   1. Add the Show Popup action to the trigger.

9. Add another button to the Col component, and set the button title as Close.

   1. Add Confirm Message action to the trigger.

   2. In the Properties tab of the Confirm Message action, under General properties, in the Message field, type ‘Do you want to close this ticket?’

   3. Add Update StoreRecord action to the trigger.

   4. In the Properties tab of the Update StoreRecord action, under General properties, in the Target Attribute field, select Status from the list.

   5. In the Value Expression field, type 5.

   6. Add Save DataSource action to the trigger.

   7. In the Properties tab of the Save DataSource action, under General properties, in the Target Data Source Alias field, select CptmCustomerTicketsAlias.

   8. Add Refresh DataSource action to the trigger.

   9. In the Properties tab of the Save DataSource action, under General properties, in the Target Data Source Alias field, select CptmCustomerTicketsAlias.

10. Duplicate the Close button. The triggers are copied as well.

    1. Change the button title to Re-Open.

    2. In the Message field of the Confirm Message action, type ‘Do you want to re-open this ticket?’

    3. In the Value Expression field of the Update StoreRecord action, type 10.

11. Add another button to the Col component and set the button title as Save Changes.

    1. Add Update StoreRecord action to the trigger.

    2. In the Properties tab, under General properties, in the Target Data Source Alias field, select CptmCustomerTicketsAlias.

    3. Under Target Attribute, select Status from the list.

    4. 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 CptmCustomerTicketsAlias

       3. Under Choose an Attribute column, select Status.

       4. Click Submit.

    5. In the Enable Condition field, click. The Expression Builder: Enable Condition dialog box is displayed.

       1. Under Category column, select Datasource.

       2. Under Choose a Datasource Alias column, select CptmCustomerTicketsAlias

       3. Under Choose an Attribute column, select Status.

       4. Click Submit.

12. On the menu bar, click . The components added to the page are saved.

You have added the components to view the current ticket status.

To add components to the second Vertical Section for ticket description:

1. Right-click and add Vertical Layout Panel to the Vertical Section component.

2. For clear sectioning of the page, add a Horizontal Layout component to the Vertical Section component. By default, the child component, Horizontal Section, is added.

3. Add a Card Wrapper to the Horizontal Section component.

   1. In the Title field of the Card Header, type Ticket Comments and set a suitable icon.

4. To view comments or reviews related to the ticket, add the Collaboration component to the Card Body.

   1. In the Properties tab of the Collaboration component, under Context properties, in the Collaboration Datasource Alias field, select ticketCollaboration.

      1. In Context field, select issueId.

      2. In Date Format field, enter DD-MM-YY HH:mm

      3. Select the Show Likes, Show Attachments, and Always Show Delete checkboxes.

   2. In Context Value field, click. The Expression Builder: Context Value dialog box is displayed.

      1. Under Category column, select Datasource.

      2. Under Choose a Datasource Alias column, select CptmCustomerTicketsAlias

      3. Under Choose an Attribute column, select ticketId

      4. Click Submit.

   3. Under Look & Feel properties, in the Height field, type 1.

5. On the menu bar, click . The components added to the page are saved.

To add components to the second Horizontal Section component:

1. Add a Card Wrapper to the Horizontal Section component.

   1. In the Title field of the Card Header, type Ticket Details and set a suitable icon.

2. Right-click on the Card Body and add a Form component.

   1. In the Properties tab of the Form component, under DataSource properties, select the Use the Existing Data Source checkbox.

   2. In the Data Source Alias field, select CptmCustomerTicketsAlias

3. Add a Row component to the Form component.

   1. In the Properties tab of the Row component, under DataSource properties, select the Use the Existing Data Source checkbox.

   2. In the Data Source Alias field, select CptmCustomerTicketsAlias.

   3. In the Properties tab of the Col component, under General properties, in the Horizontal Alignment field, select Default.

   4. In the Vertical Alignment field, select Default.

4. Add the Paragraph component to the Col component.

   1. In the Text field of the Paragraph component, enter Created on.

   2. Add a Date component to the Col component, and place it against the Paragraph component.

   3. In the Properties tab of the Date component, under General properties, in the View Attribute field, select Creation Date.

   4. Add a User Picture component to the Col component., and place it against the Date component.

   5. In the Properties tab of the User Picture component, under General properties, in the View Attribute field, select Creation By. You can change the alignment of individual components or the Row on whole by changing the margin values or Display alignment position.

5. Duplicate the Col component.

   1. Change the Text value of the Paragraph component to Updated on.

   2. Change the View Attribute of the Date component to Last Update Date.

6. Right-click on the Row component and add a Text Field component.

   1. In the Properties tab of the Text Field component, under General properties, in the Field Label field, enter Ticket Description.

   2. Under Data properties, in the View Attribute field, select Issue Description.

   3. In the Total lines field, enter 6.

7. Right-click on the Row component and add a Select component.

   1. In the Field Label field of the Select component, enter Priority.

   2. In the View Attribute field, select Priority.

   3. Under Select DataSource properties, in the DataSource field, select CptmLookups.

   4. In the Data Source Alias field, enter CptmLookupsAlias1.

   5. In the Default Where Clause field, type LOOKUP TYPE=’TICKET_PRIORITY’

   6. In the Order By Clause field, type #meaning#ASC.

   7. In the Value Attribute field, select Lookup Code.

   8. In the Display Attribute field, select Meaning.

8. Duplicate the Select component.

   1. Change the Field Label value to Ticket Type

   2. Change the Default Where Clause field to LOOKUP TYPE=’TICKET_TYPE’

9. Duplicate the Select component.

   1. Change the Field Label value to Requested By.

   2. Change the datasource selected in the DataSource field to CptmCustomerUserMapping.

   3. Change the Order By Clause field to #userName#ASC.

   4. In the Value Attribute field, select User Id.

   5. In the Display Attribute, select User Name.

   6. Right-click and add the Trigger Before Select Query.

   7. Add the Set Query Filter Value action to the trigger.

   8. In the Properties tab of the Set Query Filter Value action, 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 CptmCustomerTicketsAlias

      3. Under Choose an Attribute column, select customerId.

      4. Click Submit.

10. Right-click on the Requested By Select component and add the Trigger Before Render.

    1. Add the Query DataSource action to the trigger.

    2. In the Properties tab of the Query DataSource action, under General properties, select the Force checkbox.

    3. In the Properties tab of the Query Param action, 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 CptmCustomerTicketsAlias

       3. Under Choose an Attribute column, select customerId.

       4. Click Submit.

    4. In the Param Attribute field, select Customer Id.

    5. In the Filter Type field, select =.

    6. In the Data Source Alias field, select the Item Id of the datasource added to the Select component.

11. Duplicate the Select component.

    1. Change the Field Label value to Assigned To.

    2. Change the datasource selected in the DataSource field to CptmCustomerUserMapping.

    3. In the Value Attribute field, select User Id.

    4. In the Display Attribute, select User Name.

12. Right-click on the Assigned To Select component and add the Trigger Before Render.

    1. Add the Query DataSource action to the trigger.

    2. In the Properties tab of the Query DataSource action, under General properties, select the Force checkbox.

    3. In the Data Source Alias field, select the Item Id of the datasource added to the Select component.

    4. In the Properties tab of the Query Param action, 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 CptmCustomerTicketsAlias

       3. Under Choose an Attribute column, select customerId.

       4. Click Submit.

    5. In the Param Attribute field, select Customer Id.

    6. In the Filter Type field, select =.

13. Similarly, add components for the following ticket details:

Component name	Ticket details
Text Field	Application URL
Text Field	User Name
Text Field	Password
Text Field	Ext Ticket Number
Text Field	Available on Build
LOV	Application Name
Date Field	Planned Resolution Date
Date Field	Actual Resolution Date
Text Field	Justification
Text Field	Root Cause Analysis
Text Field	Customer-Specific Tags

14. On the menu bar, click . The components added to the page are saved.

15. To view the page functionalities, on the menu-bar, click . You can now access the page with all the defined functionalities.