Adding components to the lookup page

PreviousDesigning the user interface NextAdding components to the ticket summary page

Last updated 4 years ago

Was this helpful?

Adding components to the lookup page

Navigate to the LookupPage page canvas.

You can view that the page is already added as a component in the Tree tab.

Right-click on the Page component, and add the Data Store component. You can fetch the data from the datasource that is to be displayed on the UI.
1. In the Properties tab of the Data Store component, under Datasource properties, in the Data Source field, select the CptmLookups datasource. By default, in the Data Source Alias field, an alias name for the datasource is created. You can use the alias name of the data source henceforth.
Right-click on the Page component and add a Card Wrapper.
Change the Card Header title to Manage Lookups. Add a suitable icon for the title.
Right-click on the Card Header and add an Action Button component. A separate trigger is not needed for the Action Button, as it contains pre-defined actions.
1. In the Properties tab of the Action Button, under Action properties, in the Action field, select New.
2. In the Data Source Alias field, select CptmLookupsAlias.
3. Under General properties, in the Text field, type NEW. You can select a suitable icon for the button, for example: plus-circle. You can also align the button by changing its margin values under Layout properties.
Right-click on the Action Button and click Duplicate. The triggers and properties of the Action Button are copied.
1. Change the Title to SAVE.
2. In the Action field, select Save.
Duplicate the Action Button and change the Title to DELETE.
1. In the Action field, select Delete Selected.
Right-click on the Card Body and add a Vertical Layout Panel.
1. Right-click on the first Vertical section and add a Smart Search component.
2. In the Properties tab of the Smart Search component, under General properties, in the Data Source Alias field, select CptmLookupsAlias.
3. Right-click on the Smart Search component, and click Auto Populate Attributes. The attributes of the CptmLookups datasource are added to the search component. You can use these attributes to search for a particular ticket. You can add, delete, or modify any of the filters added to the Smart Search component.
Right-click on the second Vertical section and add a Grid component.
1. In the Properties tab of the Grid component, under DataSource properties, select the Use the Existing Data Source checkbox.
2. In the Data Source Alias field, select CptmLookupsAlias.
3. In the Properties tab of the Grid component, under General properties, select the Auto Fill Columns checkbox. The grid will automatically take the width of the page.
4. Right-click on the Grid component, and click Auto Populate Attributes. The datasource attributes are automatically added to the Grid. You can remove any column component as per your requirement.
  1. Add the Checkbox Column component to the Grid. This component allows you to select a particular entry and perform any of the added operations (save or delete).
On the menu bar, click . The components added to the page are saved.
To view the page functionalities, on the menu-bar, click . You can now access the page with all the defined functionalities.

PreviousDesigning the user interface NextAdding components to the ticket summary page

Last updated 4 years ago

Was this helpful?

Navigate to the LookupPage page canvas.

You can view that the page is already added as a component in the Tree tab.

Right-click on the Page component, and add the Data Store component. You can fetch the data from the datasource that is to be displayed on the UI.
1. In the Properties tab of the Data Store component, under Datasource properties, in the Data Source field, select the CptmLookups datasource. By default, in the Data Source Alias field, an alias name for the datasource is created. You can use the alias name of the data source henceforth.
Right-click on the Page component and add a Card Wrapper.
Change the Card Header title to Manage Lookups. Add a suitable icon for the title.
Right-click on the Card Header and add an Action Button component. A separate trigger is not needed for the Action Button, as it contains pre-defined actions.
1. In the Properties tab of the Action Button, under Action properties, in the Action field, select New.
2. In the Data Source Alias field, select CptmLookupsAlias.
3. Under General properties, in the Text field, type NEW. You can select a suitable icon for the button, for example: plus-circle. You can also align the button by changing its margin values under Layout properties.
Right-click on the Action Button and click Duplicate. The triggers and properties of the Action Button are copied.
1. Change the Title to SAVE.
2. In the Action field, select Save.
Duplicate the Action Button and change the Title to DELETE.
1. In the Action field, select Delete Selected.
Right-click on the Card Body and add a Vertical Layout Panel.
1. Right-click on the first Vertical section and add a Smart Search component.
2. In the Properties tab of the Smart Search component, under General properties, in the Data Source Alias field, select CptmLookupsAlias.
3. Right-click on the Smart Search component, and click Auto Populate Attributes. The attributes of the CptmLookups datasource are added to the search component. You can use these attributes to search for a particular ticket. You can add, delete, or modify any of the filters added to the Smart Search component.
Right-click on the second Vertical section and add a Grid component.
1. In the Properties tab of the Grid component, under DataSource properties, select the Use the Existing Data Source checkbox.
2. In the Data Source Alias field, select CptmLookupsAlias.
3. In the Properties tab of the Grid component, under General properties, select the Auto Fill Columns checkbox. The grid will automatically take the width of the page.
4. Right-click on the Grid component, and click Auto Populate Attributes. The datasource attributes are automatically added to the Grid. You can remove any column component as per your requirement.
  1. Add the Checkbox Column component to the Grid. This component allows you to select a particular entry and perform any of the added operations (save or delete).
On the menu bar, click . The components added to the page are saved.
To view the page functionalities, on the menu-bar, click . You can now access the page with all the defined functionalities.