Customer Services Screen in Experience Cloud
​Goal
​
-
It states that the screen allows customers to:
-
Access all their products via a single screen.
-
View details and summaries of their products.
-
Update customer information.
-
This statement effectively communicates the screen's purpose and capabilities.
​Requirement
Create a Component in LWC
-
Query the Customers, Credits and Credit Cards records from Salesforce using an apex methods
-
Query should have related field from Customers, Credits and Credit Cards objects
-
Call the apex methods in your lwc
-
Iterate over the results in html file
-
​
​Design&Config Stesps
​
-
Users can enter a customer number in the input field.
-
Clicking the "Search" button triggers a search operation.
-
If search results are available (searchData is truthy), they are displayed in a table.
-
Users can select a single row from the table.
-
The behavior of the input field and the "Search" button is controlled by JavaScript functions (handleAccountName and handleSearch), and the selection of rows triggers the selectRecord function. The specifics of these functions should be defined elsewhere in the code.
-
The tabs help organize and present different aspects of customer data.
-
Data is displayed conditionally, meaning it only appears if there's relevant information available.
-
The code utilizes Salesforce components like <lightning-card>, <lightning-datatable>, and <lightning-input-field> to create the user interface.
-
"Summary" Tab:
-
The first tab, labeled "Summary," provides an overview of customer information.
-
It shows the number of cards and their total limit (if available).
-
It also displays the number of credits and their total limit (if available).
-
There's an option to show additional information.
-
"Credits" Tab:
-
The third tab, labeled "Credits," displays a table with information about the customer's credits.
-
Similar to the "Credit Cards" tab, it includes columns like credit type, amount, etc.
​
"Credits" Tab:
-
The third tab, labeled "Credits," displays a table with information about the customer's credits.
-
Similar to the "Credit Cards" tab, it includes columns like credit type, amount, etc.
-
This tab provides a summary of credit data.
​
​"Detail Edit" Tab​​​​​​​​
-
The fourth tab, labeled "Detail Edit," allows you to edit customer details.
-
It provides input fields to edit fields such as first name, last name, and additional details.
-
You can cancel or save changes using the buttons provided
​
​
-
Also, when you update the record successfully, you can complete it with confetti.:))