Skip to content

WorkCardComponent HTML

Ethan Dunzer edited this page Aug 29, 2024 · 1 revision

Overview

The HTML template for the WorkCardComponent is designed to display action items related to a selected work record. It uses Lightning Web Components (LWC) to render individual work item action cards, with pagination controls that appear when more than four action items are present.

Structure

Lightning Card: The primary container for each work item action, with a title and content area displaying action details. Pagination Controls: Positioned below the cards, enabling users to navigate through multiple pages of action items.

Properties

  • workItemActions: The list of work item actions displayed in individual cards.
  • paginatedWorkItemActions: The subset of work item actions displayed on the current page.

Elements

Action Cards:

  • Title: Displays the name of the action.
  • Content: Shows details such as type, status, due date, and description.
  • Edit Button: Allows users to edit the action item by opening a modal dialog.

Pagination Controls:

  • Previous Button: Navigates to the previous page of action items.
  • Next Button: Navigates to the next page of action items.
  • Page Indicator: Displays the current page number and the total number of pages.

Conditional Rendering

Action Cards: Rendered if there are action items available for the selected work record. Pagination Visibility: Pagination controls are only visible when there are more than four action items. Error Handling: Displays an error message if there is an issue fetching the action items.

Usage

The template collaborates with the JavaScript code to display and paginate work item actions dynamically. It ensures that users can efficiently navigate through multiple action items associated with a work record, enhancing the user experience with clear, actionable information.