@salesforce/afv-skills 1.8.0 → 1.9.0

package/skills/generating-lwc-components/assets/flow-screen-component/flowScreenComponent.js

@@ -0,0 +1,348 @@
+/**
+ * Flow Screen Component Template
+ *
+ * Demonstrates complete Flow integration patterns:
+ * - @api properties with inputOnly/outputOnly roles
+ * - FlowAttributeChangeEvent for output binding
+ * - FlowNavigationFinishEvent for programmatic navigation
+ * - availableActions for navigation state awareness
+ * - @AuraEnabled Apex integration for data operations
+ *
+ * @see https://developer.salesforce.com/docs/component-library/bundle/lightning-flow-support
+ */
+import { LightningElement, api, wire } from 'lwc';
+import { FlowAttributeChangeEvent, FlowNavigationFinishEvent } from 'lightning/flowSupport';
+
+// Apex imports (uncomment and modify as needed)
+// import getRecords from '@salesforce/apex/FlowScreenController.getRecords';
+// import processRecord from '@salesforce/apex/FlowScreenController.processRecord';
+
+export default class FlowScreenComponent extends LightningElement {
+    // ═══════════════════════════════════════════════════════════════════════
+    // FLOW INPUT PROPERTIES (inputOnly - Flow → Component)
+    // These receive values FROM the Flow. Changes in Flow update the component.
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Record ID from Flow context (e.g., from Record-Triggered Flow)
+     * Maps to: Flow variable or $Record.Id
+     */
+    @api recordId;
+
+    /**
+     * Object API Name for context-aware behavior
+     * Maps to: Flow variable or $Record.Object
+     */
+    @api objectApiName;
+
+    /**
+     * Custom label configurable in Flow Builder
+     * Maps to: Flow constant, variable, or direct text
+     */
+    @api inputLabel = 'Select a Record';
+
+    /**
+     * Available navigation actions - automatically populated by Flow runtime
+     * Possible values: ['NEXT', 'BACK', 'FINISH', 'PAUSE']
+     * Use this to conditionally show/hide navigation buttons
+     */
+    @api availableActions = [];
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // FLOW OUTPUT PROPERTIES (outputOnly - Component → Flow)
+    // These send values BACK to the Flow. Use FlowAttributeChangeEvent to update.
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Selected record ID - output to Flow
+     * IMPORTANT: Use FlowAttributeChangeEvent to notify Flow of changes
+     */
+    @api selectedRecordId;
+
+    /**
+     * Selected record name - output to Flow
+     */
+    @api selectedRecordName;
+
+    /**
+     * Boolean flag indicating completion - useful for Flow decisions
+     */
+    @api isComplete = false;
+
+    /**
+     * Error message if validation fails - Flow can use in fault path
+     */
+    @api errorMessage;
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // PRIVATE REACTIVE PROPERTIES
+    // ═══════════════════════════════════════════════════════════════════════
+
+    records = [];
+    error;
+    isLoading = true;
+    _selectedId;
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // LIFECYCLE HOOKS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    connectedCallback() {
+        // Initialize component when added to DOM
+        this.loadData();
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // DATA LOADING
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Load data - replace with @wire or imperative Apex call
+     */
+    async loadData() {
+        this.isLoading = true;
+        try {
+            // Example: Load records from Apex
+            // this.records = await getRecords({ parentId: this.recordId });
+
+            // Placeholder data for template
+            this.records = [
+                { id: '001xx000000001', name: 'Sample Record 1', description: 'Description 1' },
+                { id: '001xx000000002', name: 'Sample Record 2', description: 'Description 2' },
+                { id: '001xx000000003', name: 'Sample Record 3', description: 'Description 3' }
+            ];
+            this.error = undefined;
+        } catch (err) {
+            this.error = this.reduceErrors(err);
+            this.records = [];
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // FLOW OUTPUT - FlowAttributeChangeEvent
+    // CRITICAL: This is how you send values back to Flow variables
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Handle record selection and notify Flow
+     * @param {Event} event - Click event from record tile
+     */
+    handleRecordSelect(event) {
+        const recordId = event.currentTarget.dataset.id;
+        const recordName = event.currentTarget.dataset.name;
+
+        // Update local state
+        this._selectedId = recordId;
+        this.selectedRecordId = recordId;
+        this.selectedRecordName = recordName;
+
+        // ─────────────────────────────────────────────────────────────────
+        // CRITICAL: Dispatch FlowAttributeChangeEvent for EACH output
+        // This notifies the Flow runtime that output values have changed
+        // The first parameter is the @api property name (case-sensitive)
+        // The second parameter is the new value
+        // ─────────────────────────────────────────────────────────────────
+        this.dispatchEvent(new FlowAttributeChangeEvent(
+            'selectedRecordId',
+            this.selectedRecordId
+        ));
+
+        this.dispatchEvent(new FlowAttributeChangeEvent(
+            'selectedRecordName',
+            this.selectedRecordName
+        ));
+    }
+
+    /**
+     * Update completion status and notify Flow
+     * @param {Boolean} complete - Whether the screen is complete
+     */
+    setComplete(complete) {
+        this.isComplete = complete;
+        this.dispatchEvent(new FlowAttributeChangeEvent('isComplete', complete));
+    }
+
+    /**
+     * Set error message and notify Flow
+     * @param {String} message - Error message
+     */
+    setError(message) {
+        this.errorMessage = message;
+        this.dispatchEvent(new FlowAttributeChangeEvent('errorMessage', message));
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // FLOW NAVIGATION - FlowNavigationFinishEvent
+    // Programmatically trigger Flow navigation (Next, Back, Finish, Pause)
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Navigate to next screen
+     * Only works if 'NEXT' is in availableActions
+     */
+    handleNext() {
+        // Validate before navigation
+        if (!this.selectedRecordId) {
+            this.setError('Please select a record before proceeding.');
+            return;
+        }
+
+        // Clear any previous errors
+        this.setError(null);
+
+        // Mark as complete
+        this.setComplete(true);
+
+        // Check if NEXT action is available
+        if (this.canGoNext) {
+            // Dispatch navigation event - Flow will handle the rest
+            this.dispatchEvent(new FlowNavigationFinishEvent('NEXT'));
+        }
+    }
+
+    /**
+     * Navigate to previous screen
+     * Only works if 'BACK' is in availableActions
+     */
+    handleBack() {
+        if (this.canGoBack) {
+            this.dispatchEvent(new FlowNavigationFinishEvent('BACK'));
+        }
+    }
+
+    /**
+     * Finish the flow (for final screens)
+     * Only works if 'FINISH' is in availableActions
+     */
+    handleFinish() {
+        // Validate before finishing
+        if (!this.selectedRecordId) {
+            this.setError('Please select a record before finishing.');
+            return;
+        }
+
+        this.setComplete(true);
+
+        if (this.canFinish) {
+            this.dispatchEvent(new FlowNavigationFinishEvent('FINISH'));
+        }
+    }
+
+    /**
+     * Pause the flow (for pausable flows)
+     * Only works if 'PAUSE' is in availableActions
+     */
+    handlePause() {
+        if (this.canPause) {
+            this.dispatchEvent(new FlowNavigationFinishEvent('PAUSE'));
+        }
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // APEX INTEGRATION (Optional)
+    // Use @AuraEnabled methods for complex operations
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Example: Process selection with Apex before navigation
+     */
+    async handleProcessAndContinue() {
+        this.isLoading = true;
+        try {
+            // Call Apex to process the selection
+            // const result = await processRecord({
+            //     recordId: this.selectedRecordId,
+            //     operation: 'validate'
+            // });
+
+            // Simulate successful processing
+            const result = { success: true, message: 'Validated successfully' };
+
+            if (result.success) {
+                this.setComplete(true);
+                this.handleNext();
+            } else {
+                this.setError(result.message);
+            }
+        } catch (err) {
+            this.setError(this.reduceErrors(err));
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // COMPUTED PROPERTIES
+    // ═══════════════════════════════════════════════════════════════════════
+
+    get hasRecords() {
+        return this.records && this.records.length > 0;
+    }
+
+    get hasSelection() {
+        return !!this._selectedId;
+    }
+
+    get canGoBack() {
+        return this.availableActions.includes('BACK');
+    }
+
+    get canGoNext() {
+        return this.availableActions.includes('NEXT');
+    }
+
+    get canFinish() {
+        return this.availableActions.includes('FINISH');
+    }
+
+    get canPause() {
+        return this.availableActions.includes('PAUSE');
+    }
+
+    get showBackButton() {
+        return this.canGoBack;
+    }
+
+    get showNextButton() {
+        return this.canGoNext;
+    }
+
+    get showFinishButton() {
+        return this.canFinish && !this.canGoNext;
+    }
+
+    /**
+     * Compute selected class for record tiles
+     */
+    getRecordClass(recordId) {
+        return this._selectedId === recordId
+            ? 'slds-box slds-box_link slds-theme_shade slds-is-selected'
+            : 'slds-box slds-box_link';
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // UTILITIES
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Reduce various error formats to a string
+     * @param {*} errors - Error object(s)
+     * @returns {String} - Formatted error message
+     */
+    reduceErrors(errors) {
+        if (!Array.isArray(errors)) {
+            errors = [errors];
+        }
+
+        return errors
+            .filter(error => !!error)
+            .map(error => {
+                if (error.body?.message) return error.body.message;
+                if (error.message) return error.message;
+                return JSON.stringify(error);
+            })
+            .join('; ');
+    }
+}

package/skills/generating-lwc-components/assets/flow-screen-component/flowScreenComponent.js-meta.xml

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>66.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>Flow Screen Component</masterLabel>
+    <description>Component demonstrating complete Flow integration patterns with FlowAttributeChangeEvent and FlowNavigationFinishEvent</description>
+
+    <targets>
+        <!-- Primary target: Flow Screens -->
+        <target>lightning__FlowScreen</target>
+    </targets>
+
+    <targetConfigs>
+        <targetConfig targets="lightning__FlowScreen">
+            <!--
+            ═══════════════════════════════════════════════════════════════════════════
+            INPUT PROPERTIES (Flow → Component)
+            These receive values FROM the Flow.
+
+            Roles:
+            - inputOnly: Flow can set, component cannot change (default for inputs)
+            - outputOnly: Component sets, Flow receives
+            - (no role): Bidirectional - not recommended, use explicit roles
+            ═══════════════════════════════════════════════════════════════════════════
+            -->
+            <property
+                name="recordId"
+                type="String"
+                label="Record ID"
+                description="ID of the parent record for context (e.g., from $Record.Id)"
+                role="inputOnly"/>
+
+            <property
+                name="objectApiName"
+                type="String"
+                label="Object API Name"
+                description="API name of the object (e.g., from $Record.Object)"
+                role="inputOnly"/>
+
+            <property
+                name="inputLabel"
+                type="String"
+                label="Display Label"
+                description="Label to display in the component header"
+                default="Select a Record"
+                role="inputOnly"/>
+
+            <!--
+            ═══════════════════════════════════════════════════════════════════════════
+            OUTPUT PROPERTIES (Component → Flow)
+            These send values BACK to the Flow.
+            Component must dispatch FlowAttributeChangeEvent to update these.
+
+            Flow accesses these via: {!Get_Screen.outputPropertyName}
+            ═══════════════════════════════════════════════════════════════════════════
+            -->
+            <property
+                name="selectedRecordId"
+                type="String"
+                label="Selected Record ID"
+                description="ID of the record selected by the user"
+                role="outputOnly"/>
+
+            <property
+                name="selectedRecordName"
+                type="String"
+                label="Selected Record Name"
+                description="Name of the selected record"
+                role="outputOnly"/>
+
+            <property
+                name="isComplete"
+                type="Boolean"
+                label="Is Complete"
+                description="Whether the user has completed their selection"
+                default="false"
+                role="outputOnly"/>
+
+            <property
+                name="errorMessage"
+                type="String"
+                label="Error Message"
+                description="Error message if validation fails"
+                role="outputOnly"/>
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>

package/skills/generating-lwc-components/assets/form-component/formComponent.html

@@ -0,0 +1,165 @@
+<!--
+    FORM LWC COMPONENT TEMPLATE - HTML
+
+    This template shows two approaches:
+    1. lightning-record-edit-form (standard, recommended)
+    2. Custom form with lightning-input (for complex scenarios)
+
+    Choose based on your requirements.
+-->
+<template>
+    <lightning-card title={cardTitle} icon-name="standard:account">
+        <!-- Loading Overlay -->
+        <template if:true={isLoading}>
+            <lightning-spinner
+                alternative-text="Loading"
+                size="medium"
+                class="slds-is-absolute">
+            </lightning-spinner>
+        </template>
+
+        <!--
+        ═══════════════════════════════════════════════════════════════════════
+        OPTION 1: LIGHTNING-RECORD-EDIT-FORM (Recommended)
+
+        Pros:
+        - Automatic FLS enforcement
+        - Built-in validation
+        - Handles record types
+        - Less code
+
+        Cons:
+        - Less control over layout
+        - Limited custom validation
+        ═══════════════════════════════════════════════════════════════════════
+        -->
+        <lightning-record-edit-form
+            object-api-name={objectApiName}
+            record-id={recordId}
+            record-type-id={recordTypeId}
+            onload={handleLoad}
+            onsubmit={handleSubmit}
+            onsuccess={handleSuccess}
+            onerror={handleError}>
+
+            <!-- Error Messages Display -->
+            <lightning-messages></lightning-messages>
+
+            <div class="slds-p-around_medium">
+                <!-- Form Fields -->
+                <div class="slds-grid slds-wrap slds-gutters">
+                    <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
+                        <lightning-input-field
+                            field-name={nameField}
+                            required>
+                        </lightning-input-field>
+                    </div>
+
+                    <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
+                        <lightning-input-field
+                            field-name={industryField}>
+                        </lightning-input-field>
+                    </div>
+
+                    <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
+                        <lightning-input-field
+                            field-name={phoneField}>
+                        </lightning-input-field>
+                    </div>
+                </div>
+
+                <!-- Form Buttons -->
+                <div class="slds-m-top_medium">
+                    <lightning-button
+                        variant="neutral"
+                        label="Cancel"
+                        onclick={handleCancel}
+                        class="slds-m-right_x-small">
+                    </lightning-button>
+
+                    <lightning-button
+                        variant="neutral"
+                        label="Reset"
+                        onclick={handleReset}
+                        class="slds-m-right_x-small">
+                    </lightning-button>
+
+                    <lightning-button
+                        variant="brand"
+                        type="submit"
+                        label={submitButtonLabel}>
+                    </lightning-button>
+                </div>
+            </div>
+        </lightning-record-edit-form>
+
+        <!--
+        ═══════════════════════════════════════════════════════════════════════
+        OPTION 2: CUSTOM FORM (Alternative - uncomment to use)
+
+        Pros:
+        - Full control over layout
+        - Complex validation logic
+        - Multiple objects in one form
+
+        Cons:
+        - Manual FLS checking
+        - More code to maintain
+        ═══════════════════════════════════════════════════════════════════════
+        -->
+        <!--
+        <div class="slds-p-around_medium custom-form">
+            <div class="slds-grid slds-wrap slds-gutters">
+                <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
+                    <lightning-input
+                        type="text"
+                        label="Account Name"
+                        name="Name"
+                        value={formData.Name}
+                        onchange={handleInputChange}
+                        required
+                        message-when-value-missing="Account name is required">
+                    </lightning-input>
+                </div>
+
+                <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
+                    <lightning-combobox
+                        label="Industry"
+                        name="Industry"
+                        value={formData.Industry}
+                        options={industryOptions}
+                        onchange={handleInputChange}>
+                    </lightning-combobox>
+                </div>
+
+                <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
+                    <lightning-input
+                        type="tel"
+                        label="Phone"
+                        name="Phone"
+                        value={formData.Phone}
+                        onchange={handleInputChange}
+                        pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+                        message-when-pattern-mismatch="Enter phone as: 123-456-7890">
+                    </lightning-input>
+                </div>
+            </div>
+
+            <div class="slds-m-top_medium">
+                <lightning-button
+                    variant="neutral"
+                    label="Cancel"
+                    onclick={handleCancel}
+                    class="slds-m-right_x-small">
+                </lightning-button>
+
+                <lightning-button
+                    variant="brand"
+                    label={submitButtonLabel}
+                    onclick={handleCustomSubmit}>
+                </lightning-button>
+            </div>
+        </div>
+        -->
+    </lightning-card>
+</template>