ScheduledMaintenanceComponent HTML

Overview

The HTML template for the ScheduledMaintenanceComponent is responsible for the visual representation of scheduled maintenance alerts within a Salesforce application. It uses Lightning Web Components (LWC) to render modals, accordions, and badges based on the state managed in the JavaScript code.

Structure

Modal Dialog

• Modal Container: Wraps the entire modal content.
  • Header: Contains the modal title and a close button if the modal is dismissible and not fully locked.
  • Content: Displays scheduled maintenance details in an accordion format if isInMaintenance is true, otherwise shows maintenance details in separate blocks.
  • Footer: Contains action buttons for navigation or dismissing the modal based on its dismissible status.

Properties

• isModalOpen: Controls the visibility of the modal.
• isDismissible: Determines if the modal can be dismissed.
• isFullLock: Indicates if the application is fully locked due to maintenance.
• title: The title of the modal.
• isInMaintenance: Indicates if one of the records is in the maintenance window.
• activeSectionName: Stores the name of the active section in the accordion.
• scheduledMaintenances: The list of scheduled maintenance records.

Elements

• Section: Represents the modal dialog with ARIA roles for accessibility.
  • Header:
    • Close Button: Conditional rendering based on isDismissible and isFullLock. Uses lightning-icon for the close icon.
    • Title: Displays the modal title.
    • Warning Badge: Shown if the app is not dismissible.
  • Content:
    • Accordion: Renders maintenance records in an accordion format if isInMaintenance is true.
    • Blocks: Renders maintenance records in separate blocks if isInMaintenance is false.
  • Footer:
    • Navigate Button: Allows navigation to another app if the modal is not fully locked and not dismissible.
    • Dismiss Button: Allows dismissing the modal if it is dismissible and not fully locked.

Conditional Rendering

• Modal Visibility: Controlled by isModalOpen.
• Close Button and Dismiss Button: Rendered based on isDismissible and isFullLock.
• Accordion vs. Blocks: Rendered based on the isInMaintenance state.
• Badges: Rendered based on the Dismissible__c property of each maintenance record.

Usage

The template works in tandem with the JavaScript code to display scheduled maintenance alerts dynamically. It ensures that the UI updates based on the current maintenance state and user interactions.