Getting a List of Customer Records

If the access token is obtained successfully, redirect the user to the Customers screen of the application. When the customers page is loaded, call the GET_CUSTOMERS api to get a list of all the customers.

Request URL: https://api.eng-dev-1.trilloapps.com/ds/function/shared/GetCustomers

Customer Records

Customer Record Overview

Showing customer records on the screen involves creating a user-friendly and secure experience. Below are key points to consider when implementing a "Customer Records" screen:

• Design the customer record screen to provide a concise and organized overview. Include key information, such as:

  • Customer names

  • Email, Phone

  • Address

  • Status (Active, Inactive)

Search Customer By Name

• Implement search options to help users quickly find specific customer records based on customer names.

Search Customer

Pagination

• If the customer record list is extensive, pagination is implemented to display records in smaller, more manageable chunks.

Pagination

Pagination

Customer Record Code Snippet

getCustomerList(incommingStart, incommingSize) {
   this.bLoader = true;
   let body = {
     start: incommingStart,
     size: incommingSize
   }
   this.dataService.GetCustomerLists(body).subscribe({
     next: (result: any) => {
       if (result.status === "success") {
         this.customersList = result.data.customers;
         this.totalSize = result.data.totalData;
         this.temp = [...this.customersList]
         this.bLoader = false;
       }
     },
     error: (error) => {
       console.error(error);
     },
     complete: () => { },
   });
 }

Code Description

This TypeScript function, getCustomerList, is designed to retrieve a list of customers from a data service. Here's a breakdown of its functionality:

Loading Indicator

• Sets this.bLoader to true, presumably to indicate that data is being loaded.

Request Body Preparation

• Creates a body object containing start and size properties based on the provided incommingStart and incommingSize parameters.

API Request

• Calls the GetCustomerLists method of this.dataService to get a list of customers.

• Subscribes to the observable returned by the GetCustomerLists method.

Response Handling

In the next callback:

Checks if the response status is "success".

• If successful, updates the local this.customersList with the customer data from the response (result.data.customers).

• Sets this.totalSize to the total data size from the response (result.data.totalData).

• Creates a copy of the customer list in this.temp.

• Sets this.bLoader to false, indicating the end of the loading process.

Error Handling

In the error callback:

• Logs the error to the console using console.error.