Getting a Record of Item Details

Upon clicking an item record, smoothly transition the user to a dedicated section or page displaying the order records associated with that item's details.

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

Payload:

Item Details Payload

Preview:

Item Details Preview

Item Details Overview

• Present a summarized view of item records on the screen, which includes:

  • Item Name

  • Item Description

  • Item Code

  • Item Weight

  • Item Quantity

Back To Item Record Button

• Maintain a clear and easily navigable path back to the item records screen, allowing users to switch between item and item detail records effortlessly.

Back To Item Record Button

Item Details Code Snippet

// Function to get item details using the API service
function getItemsDetails(comingId) {
   apiService.getItemDetails(comingId)
       .then(response => {
           if (response.status == 'failed') {
               console.log(response.message);
               showToast(response.message, 'danger');
           } else {
               // Update the UI with item details
               itemDetail = response.data;
               document.getElementById('itemName').textContent = itemDetail.itemName;
               document.getElementById('description').textContent = itemDetail.itemDescription;
               document.getElementById('itemCode').textContent = itemDetail.itemCode;
               document.getElementById('itemWeight').textContent = itemDetail.weight;
               document.getElementById('itemQuantity').textContent = itemDetail.quantity;
               document.getElementById('itemPic').src = itemDetail.picture;
           }
       })
       .catch(error => {
           showToast(error.message, 'danger');
       });

Code Description

The getItemsDetails retrieve comprehensive information about a specific item identified by the `comingId`. This function fetches detailed data, providing in-depth insights into the attributes, characteristics, and relevant details of the specified item.

API Request

Invokes the apiService.getItemDetails(comingId) method, making an asynchronous request to the server to fetch detailed information about a specific item.

Handling API Response

• Uses the then method to handle the response from the API request asynchronously.

• Checks if the response status is 'failed', logs the error message to the console and displays a danger toast with the error message.

Update UI with Item Details

• If the response status is not 'failed', updates the global variable itemDetail with the detailed information about the item received from the response.

• Utilizes document.getElementById to update various HTML elements with the corresponding item details:

  • 'itemName'

  • 'description'

  • 'itemCode'

  • 'itemWeight'

  • 'itemQuantity'

  • 'itemPic' (image source)

Error Handling

Uses the catch block to handle any errors that may occur during the API request and displays a danger toast with the error message.