#LWC Development4 人がディスカッション中

Hi @Sai Kumar Good question! The best way to learn LWC and Apex integration is to build small projects and gradually move to real-world scenarios.

1. Recommended Practical Projects

1. Account Search: Fetch Account records using Apex and @wire.
2. Contact Management: Create, update, and delete Contacts using Lightning Data Service.
3. Student Management: Practice parent-child communication using @api and custom events.
4. Opportunity Dashboard: Display Opportunity data using Apex and refresh it after updates.

2. Important Concepts to Practice

• Lifecycle Hooks: connectedCallback() and renderedCallback().
• Component Communication: @api and custom events.
• Wire Adapters: Fetch Salesforce data using @wire.
• Apex Integration: Use @AuraEnabled methods for server-side operations.
• Error Handling: Handle exceptions and display meaningful messages.

3. Official Salesforce Resources

• LWC Developer Guide
• Lifecycle Hooks
• LWC and Apex Integration
• LWC Recipes with Examples

Start with an Account Search component, then build a complete Student Management application using LWC and Apex.

Key Point: Don't just copy code from Trailhead. Practice writing code, debugging errors, and understanding how LWC communicates with Apex.

Hope this helps!

Venkat Yadav | SFDCINDIA

Hello community! 

I had similar task and was able to complete it using just lwc! 

For that I had to create the following js method:

handlePrintClick () {
        let printableElement = this.template.querySelector('.print-section');
         if (printableElement) {
            let clone = printableElement.cloneNode(true);
            let printWindow = window.open('', '_blank');
            if (printWindow) {
                printWindow.document.body.appendChild(clone);
                let style = printWindow.document.createElement('style');
                style.textContent = `
                    @page {
                        size: auto;   /* auto is the initial value */
                        margin: 0mm;  /* this affects the margin in the printer settings */
                    }
                    @media print {
                        body {
                            margin: 0;
                            padding: 0;
                        }
                        .no-print {
                            display: none;
                        }
                    }
                `;
                printWindow.document.head.appendChild(style);
                printWindow.focus();
                printWindow.print();
                printWindow.close();
            } else {
                console.error('Failed to open print window');
            }
        } else {
            console.error('Printable element not found');
        }
    }

and you need to update the content of html with css class to the place which you wanted to print (I had lots of inner data, parent and childs)

<div class="print-section">
    Data which should be printed
</div>

Note: In my case I had all css values in the same html file (not a separate css, I used style tag) 

Hello, 

You can use lightning-dual-listbox

in LWC. 

Below is Link to documentation. Using js you can iterate & form picklist values 

Link -

Hii,

To navigate back and reload the previous page, the most straightforward solution is to use window.history.back() followed by a short delay and window.location.reload().

The implementation may look something like this : 

window.history.back();
setTimeout(function() {
 window.location.reload();
}, 500);

To display checkboxes in two columns using lightning-checkbox-group, you'll need to adjust the layout using CSS because lightning-checkbox-group doesn't natively support multi-column layouts out of the box.

You can achieve the two-column layout by wrapping the checkboxes in a custom div container and using CSS Grid or Flexbox to display the checkboxes in two columns.

You can use something like this : 

/* Styling for the checkbox container to use grid */

.checkbox-container {

 display: grid; /* Use grid layout */

 grid-template-columns: repeat(2, 1fr); /* Create two equal columns */

 gap: 16px; /* Add space between checkboxes */

 max-width: 600px; /* Optional: set a max width */

}

/* Ensure the checkbox options fit well inside each column */

.lightning-checkbox-group .slds-checkbox_faux {

 margin-bottom: 8px; /* Adjust the spacing between checkboxes */

}