@salesforce/afv-skills 1.7.5 → 1.9.0

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

@@ -0,0 +1,275 @@
+/**
+ * FORM LWC COMPONENT TEMPLATE
+ *
+ * This template demonstrates a form component with:
+ * - lightning-record-edit-form for standard forms
+ * - Custom validation
+ * - Imperative Apex submission
+ * - Toast notifications
+ *
+ * Replace: formComponent → yourComponentName
+ * Replace: FormComponent → YourComponentName
+ */
+
+import { LightningElement, api, wire } from 'lwc';
+import { getObjectInfo } from 'lightning/uiObjectInfoApi';
+import { ShowToastEvent } from 'lightning/platformShowToastEvent';
+import { NavigationMixin } from 'lightning/navigation';
+import saveRecord from '@salesforce/apex/FormComponentController.saveRecord';
+
+// Import schema for field references
+import ACCOUNT_OBJECT from '@salesforce/schema/Account';
+import NAME_FIELD from '@salesforce/schema/Account.Name';
+import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
+import PHONE_FIELD from '@salesforce/schema/Account.Phone';
+
+export default class FormComponent extends NavigationMixin(LightningElement) {
+    // ═══════════════════════════════════════════════════════════════════════
+    // PUBLIC API
+    // ═══════════════════════════════════════════════════════════════════════
+
+    @api recordId;           // For edit mode
+    @api objectApiName = 'Account';
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // PRIVATE PROPERTIES
+    // ═══════════════════════════════════════════════════════════════════════
+
+    isLoading = false;
+    recordTypeId;
+
+    // Field values for custom form
+    formData = {
+        Name: '',
+        Industry: '',
+        Phone: ''
+    };
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // SCHEMA REFERENCES
+    // ═══════════════════════════════════════════════════════════════════════
+
+    accountObject = ACCOUNT_OBJECT;
+    nameField = NAME_FIELD;
+    industryField = INDUSTRY_FIELD;
+    phoneField = PHONE_FIELD;
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // WIRE SERVICE
+    // ═══════════════════════════════════════════════════════════════════════
+
+    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
+    objectInfo({ data, error }) {
+        if (data) {
+            // Get default record type
+            this.recordTypeId = data.defaultRecordTypeId;
+        }
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // GETTERS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    get isEditMode() {
+        return !!this.recordId;
+    }
+
+    get cardTitle() {
+        return this.isEditMode ? 'Edit Account' : 'New Account';
+    }
+
+    get submitButtonLabel() {
+        return this.isEditMode ? 'Save' : 'Create';
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // LIGHTNING-RECORD-EDIT-FORM HANDLERS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Called when the form loads successfully
+     */
+    handleLoad(event) {
+        this.isLoading = false;
+        console.log('Form loaded', event.detail);
+    }
+
+    /**
+     * Called when the record is saved successfully
+     */
+    handleSuccess(event) {
+        this.isLoading = false;
+        const recordId = event.detail.id;
+        const recordName = event.detail.fields.Name.value;
+
+        this.showToast(
+            'Success',
+            `Account "${recordName}" ${this.isEditMode ? 'updated' : 'created'} successfully`,
+            'success'
+        );
+
+        // Dispatch event for parent components
+        this.dispatchEvent(new CustomEvent('save', {
+            detail: { recordId, recordName }
+        }));
+
+        // Navigate to record page
+        if (!this.isEditMode) {
+            this.navigateToRecord(recordId);
+        }
+    }
+
+    /**
+     * Called when there's an error saving
+     */
+    handleError(event) {
+        this.isLoading = false;
+        const errorMessage = event.detail.message || 'An error occurred';
+
+        this.showToast('Error', errorMessage, 'error');
+
+        console.error('Form error:', event.detail);
+    }
+
+    /**
+     * Called before the form submits - opportunity to validate
+     */
+    handleSubmit(event) {
+        event.preventDefault();  // Stop default submission
+
+        // Custom validation
+        const fields = event.detail.fields;
+
+        if (!this.validateForm(fields)) {
+            return;
+        }
+
+        this.isLoading = true;
+
+        // Modify fields if needed before submission
+        // fields.Custom_Field__c = 'Computed Value';
+
+        // Submit the form
+        this.template.querySelector('lightning-record-edit-form').submit(fields);
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // CUSTOM FORM HANDLERS (Alternative to lightning-record-edit-form)
+    // ═══════════════════════════════════════════════════════════════════════
+
+    handleInputChange(event) {
+        const field = event.target.name || event.target.dataset.field;
+        const value = event.target.value;
+        this.formData = { ...this.formData, [field]: value };
+    }
+
+    async handleCustomSubmit() {
+        if (!this.validateCustomForm()) {
+            return;
+        }
+
+        this.isLoading = true;
+
+        try {
+            const result = await saveRecord({
+                recordData: JSON.stringify(this.formData),
+                recordId: this.recordId
+            });
+
+            this.showToast('Success', 'Record saved successfully', 'success');
+
+            this.dispatchEvent(new CustomEvent('save', {
+                detail: { recordId: result.Id }
+            }));
+
+        } catch (error) {
+            const errorMessage = error.body?.message || error.message || 'Unknown error';
+            this.showToast('Error', errorMessage, 'error');
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // VALIDATION
+    // ═══════════════════════════════════════════════════════════════════════
+
+    validateForm(fields) {
+        // Custom validation logic
+        if (fields.Name && fields.Name.length < 2) {
+            this.showToast('Validation Error', 'Name must be at least 2 characters', 'error');
+            return false;
+        }
+
+        // Validate all input fields
+        const allValid = [...this.template.querySelectorAll('lightning-input-field')]
+            .reduce((validSoFar, inputField) => {
+                inputField.reportValidity();
+                return validSoFar && inputField.checkValidity();
+            }, true);
+
+        return allValid;
+    }
+
+    validateCustomForm() {
+        const inputFields = this.template.querySelectorAll('lightning-input, lightning-combobox');
+        let isValid = true;
+
+        inputFields.forEach(field => {
+            if (!field.checkValidity()) {
+                field.reportValidity();
+                isValid = false;
+            }
+        });
+
+        return isValid;
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // BUTTON HANDLERS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    handleCancel() {
+        // Reset form
+        const inputFields = this.template.querySelectorAll('lightning-input-field');
+        inputFields.forEach(field => {
+            field.reset();
+        });
+
+        this.dispatchEvent(new CustomEvent('cancel'));
+    }
+
+    handleReset() {
+        const inputFields = this.template.querySelectorAll('lightning-input-field');
+        inputFields.forEach(field => {
+            field.reset();
+        });
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // NAVIGATION
+    // ═══════════════════════════════════════════════════════════════════════
+
+    navigateToRecord(recordId) {
+        this[NavigationMixin.Navigate]({
+            type: 'standard__recordPage',
+            attributes: {
+                recordId: recordId,
+                objectApiName: this.objectApiName,
+                actionName: 'view'
+            }
+        });
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // UTILITIES
+    // ═══════════════════════════════════════════════════════════════════════
+
+    showToast(title, message, variant) {
+        this.dispatchEvent(new ShowToastEvent({
+            title,
+            message,
+            variant
+        }));
+    }
+}

package/skills/generating-lwc-components/assets/graphql-component/graphqlComponent.html

@@ -0,0 +1,100 @@
+<template>
+    <lightning-card title="Contacts (GraphQL)" icon-name="standard:contact">
+        <!-- Actions slot -->
+        <div slot="actions">
+            <lightning-button-icon
+                icon-name="utility:refresh"
+                alternative-text="Refresh"
+                onclick={handleRefresh}>
+            </lightning-button-icon>
+        </div>
+
+        <div class="slds-p-horizontal_medium">
+            <!-- Loading State -->
+            <template lwc:if={isLoading}>
+                <div class="slds-align_absolute-center slds-p-around_large">
+                    <lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
+                </div>
+            </template>
+
+            <!-- Error State -->
+            <template lwc:if={error}>
+                <div class="slds-notify slds-notify_alert slds-alert_error" role="alert">
+                    <span class="slds-assistive-text">Error</span>
+                    <h2>{error}</h2>
+                </div>
+            </template>
+
+            <!-- Empty State -->
+            <template lwc:if={hasNoData}>
+                <div class="slds-illustration slds-illustration_small">
+                    <div class="slds-text-longform">
+                        <h3 class="slds-text-heading_medium">No contacts found</h3>
+                        <p class="slds-text-body_regular">
+                            There are no contacts to display. Try adjusting your filters or creating new contacts.
+                        </p>
+                    </div>
+                </div>
+            </template>
+
+            <!-- Data Display -->
+            <template lwc:if={hasData}>
+                <!-- Page Info -->
+                <div class="slds-m-bottom_small slds-text-body_small slds-text-color_weak">
+                    {currentPageInfo}
+                </div>
+
+                <!-- Contact List -->
+                <ul class="slds-has-dividers_bottom-space">
+                    <template for:each={contacts} for:item="contact">
+                        <li key={contact.id}
+                            class="slds-item slds-p-vertical_small slds-is-relative"
+                            data-id={contact.id}
+                            onclick={handleRowClick}>
+                            <article class="slds-tile slds-media">
+                                <div class="slds-media__figure">
+                                    <lightning-icon
+                                        icon-name="standard:contact"
+                                        size="small">
+                                    </lightning-icon>
+                                </div>
+                                <div class="slds-media__body">
+                                    <h3 class="slds-tile__title">
+                                        <a href="javascript:void(0);">{contact.name}</a>
+                                    </h3>
+                                    <div class="slds-tile__detail">
+                                        <dl class="slds-list_horizontal slds-wrap">
+                                            <template lwc:if={contact.title}>
+                                                <dt class="slds-item_label slds-truncate">Title:</dt>
+                                                <dd class="slds-item_detail slds-truncate">{contact.title}</dd>
+                                            </template>
+                                            <template lwc:if={contact.email}>
+                                                <dt class="slds-item_label slds-truncate">Email:</dt>
+                                                <dd class="slds-item_detail slds-truncate">{contact.email}</dd>
+                                            </template>
+                                            <template lwc:if={contact.accountName}>
+                                                <dt class="slds-item_label slds-truncate">Account:</dt>
+                                                <dd class="slds-item_detail slds-truncate">{contact.accountName}</dd>
+                                            </template>
+                                        </dl>
+                                    </div>
+                                </div>
+                            </article>
+                        </li>
+                    </template>
+                </ul>
+
+                <!-- Load More Button -->
+                <template lwc:if={hasNextPage}>
+                    <div class="slds-align_absolute-center slds-m-top_medium">
+                        <lightning-button
+                            label="Load More"
+                            onclick={handleLoadMore}
+                            disabled={isLoading}>
+                        </lightning-button>
+                    </div>
+                </template>
+            </template>
+        </div>
+    </lightning-card>
+</template>