लाइटनिंग वेब कंपोनेंट्स (LWC) में कॉम्बोबॉक्स की खोज

कम्बोबॉक्स LWC की परिभाषा

लाइटनिंग वेब कंपोनेंट्स (एलडब्ल्यूसी) में एक कॉम्बोबॉक्स एक शक्तिशाली यूआई तत्व है जो उपयोगकर्ताओं को पूर्वनिर्धारित विकल्पों की सूची से एक विकल्प चुनने की अनुमति देता है। यह घटक एक ड्रॉपडाउन सूची और एक संपादन योग्य टेक्स्ट बॉक्स का संयोजन है, जो ड्रॉपडाउन की सुविधा और टेक्स्ट इनपुट फ़ील्ड का लचीलापन दोनों प्रदान करता है। कॉम्बोबॉक्स उन स्थितियों में विशेष रूप से उपयोगी होता है जहां उपयोगकर्ताओं को या तो मौजूदा विकल्पों में से चयन करना होता है या अपना स्वयं का कस्टम मान इनपुट करना होता है।

LWC में कॉम्बोबॉक्स वस्तुओं को चुनने और खोजने का सहज तरीका प्रदान करके उपयोगकर्ता अनुभव को बढ़ाते हैं। उनका उपयोग विभिन्न रूपों और अनुप्रयोगों में किया जा सकता है, जिससे डेटा प्रविष्टि और चयन प्रक्रिया अधिक कुशल और उपयोगकर्ता के अनुकूल हो जाती है। कॉम्बोबॉक्स घटक का लाभ उठाकर, डेवलपर्स गतिशील और उत्तरदायी उपयोगकर्ता इंटरफ़ेस बना सकते हैं जो उपयोगकर्ता इनपुट और प्राथमिकताओं की एक विस्तृत श्रृंखला को पूरा करते हैं।

नया LWC घटक बनाने के चरण

एक नया LWC घटक बनाने में सीधे चरण शामिल हैं। आरंभ करने में आपकी सहायता के लिए यहां चरण-दर-चरण मार्गदर्शिका दी गई है:

1. अपना Salesforce DX परिवेश सेट करें: LWC घटक बनाने से पहले, सुनिश्चित करें कि आपका Salesforce DX वातावरण सेट हो गया है। इसमें सेल्सफोर्स सीएलआई स्थापित करना और सेल्सफोर्स डीएक्स प्रोजेक्ट बनाना या कनेक्ट करना शामिल है।
2. एक नया LWC घटक बनाएँ: अपना टर्मिनल या कमांड प्रॉम्प्ट खोलें और अपनी Salesforce DX प्रोजेक्ट निर्देशिका पर जाएँ। नया LWC घटक बनाने के लिए निम्नलिखित कमांड का उपयोग करें:

एसएफडीएक्स फोर्स: लाइटनिंग: कंपोनेंट: क्रिएट -टाइप एलडब्ल्यूसी -कंपोनेंटनाम कॉम्बोबॉक्सकंपोनेंट -आउटपुटडीआईआर फोर्स-ऐप/मेन/डिफॉल्ट/एलडब्ल्यूसी

यह कमांड निर्दिष्ट निर्देशिका में आपके LWC घटक के लिए आवश्यक फ़ाइलें बनाएगा।

घटक फ़ाइलें संपादित करें: पर जाए comboboxComponent आपके प्रोजेक्ट निर्देशिका में फ़ोल्डर। आपको तीन मुख्य फ़ाइलें मिलेंगी: comboboxComponent.html, comboboxComponent.jsऔर comboboxComponent.js-meta.xml. अपने कॉम्बोबॉक्स घटक की संरचना, कार्यक्षमता और मेटाडेटा को परिभाषित करने के लिए इन फ़ाइलों को संपादित करें।

कम्बोबॉक्स तर्क लागू करें: में comboboxComponent.js फ़ाइल, कम्बोबॉक्स के लिए तर्क लागू करें। इसमें कॉम्बोबॉक्स के लिए विकल्पों को परिभाषित करना और उपयोगकर्ता इनपुट और चयन को संभालना शामिल है।

सेल्सफोर्स में घटकों को तैनात करें: एक बार जब आपका घटक तैयार हो जाए, तो इसे निम्नलिखित कमांड का उपयोग करके अपने सेल्सफोर्स संगठन में तैनात करें:

sfdx force:source:deploy -p force-app

इससे आपका नया LWC घटक आपके Salesforce संगठन में उपलब्ध हो जाएगा।

LWC घटक की फ़ाइल संरचना

कुशल विकास के लिए LWC घटक की फ़ाइल संरचना को समझना महत्वपूर्ण है। यहां LWC घटक के लिए विशिष्ट फ़ाइल संरचना का विवरण दिया गया है:

एचटीएमएल फ़ाइल (comboboxComponent.html): इस फ़ाइल में आपके LWC घटक के लिए टेम्पलेट शामिल है। यह घटक के यूआई की संरचना और लेआउट को परिभाषित करता है। कॉम्बोबॉक्स के लिए, इसमें इनपुट फ़ील्ड के लिए ड्रॉपडाउन सूचियां और मार्कअप शामिल हो सकते हैं।

जावास्क्रिप्ट फ़ाइल (comboboxComponent.js): इस फ़ाइल में घटक का तर्क और कार्यक्षमता शामिल है। यह उन गुणों, विधियों और ईवेंट हैंडलर को परिभाषित करता है जो घटक के व्यवहार को संचालित करते हैं।

import { LightningElement, track } from 'lwc';

export default class ComboboxComponent extends LightningElement {
    @track value="";
    @track options = [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
    ];

    handleChange(event) {
        this.value = event.detail.value;
    }
}

मेटाडेटा कॉन्फ़िगरेशन फ़ाइल (comboboxComponent.js-meta.xml): यह XML फ़ाइल LWC घटक के बारे में मेटाडेटा प्रदान करती है, जैसे इसका API संस्करण और दृश्यता। यह नियंत्रित करता है कि सेल्सफोर्स वातावरण में घटक कैसे प्रदर्शित होता है।

    55.0
    true
    
        lightning__AppPage
        lightning__RecordPage
        

के गुण इसे टैग करें

LWC में टैग एक बहुमुखी तत्व है, जिसे ड्रॉपडाउन सूचियों और संपादन योग्य टेक्स्ट बॉक्स का संयोजन बनाने के लिए डिज़ाइन किया गया है। इस तत्व का प्रभावी ढंग से उपयोग करने के लिए इसके गुणों को समझना आवश्यक है। यहाँ की मुख्य विशेषताएं हैं टैग:

नाम: यह विशेषता कम्बोबॉक्स तत्व का नाम निर्दिष्ट करती है। यह प्रोग्राम प्रबंधन या फॉर्म सबमिशन में तत्वों की पहचान करने के लिए उपयोगी है।

लेबल: यह विशेषता कॉम्बोबॉक्स के लिए एक लेबल प्रदान करती है, जो उपयोगकर्ता को प्रदर्शित होती है। यह कॉम्बोबॉक्स के उद्देश्य को पहचानने में मदद करता है।

कीमत: यह विशेषता कम्बोबॉक्स के चयनित मान को बांधती है। यह दो-तरफा बाइंडिंग है, जिसका अर्थ है कि यह वर्तमान में चयनित विकल्प को दर्शाता है और इसे प्रोग्रामेटिक रूप से अपडेट किया जा सकता है।

प्लेसहोल्डर: यह विशेषता प्लेसहोल्डर टेक्स्ट को निर्दिष्ट करती है जो तब दिखाई देता है जब कोई विकल्प नहीं चुना जाता है। यह उपयोगकर्ता को अपेक्षित इनपुट के बारे में सचेत करता है।

कॉम्बोबॉक्स को संभालने के लिए जावास्क्रिप्ट

लाइटनिंग वेब घटक में कॉम्बोबॉक्स को संभालने के लिए, आपको जावास्क्रिप्ट फ़ाइल में आवश्यक गुणों और विधियों को परिभाषित करने की आवश्यकता है। इसमें चयनित मान को प्रबंधित करना और उपयोगकर्ता इनपुट ईवेंट को संभालना शामिल है। यहाँ एक उदाहरण है:

import { LightningElement, track } from 'lwc';

export default class ComboboxComponent extends LightningElement {
    @track selectedValue="";
    @track options = [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
    ];

    handleChange(event) {
        this.selectedValue = event.detail.value;
    }
}

इस उदाहरण में, selectedValue यह एक ट्रैक की गई संपत्ति है जो कम्बोबॉक्स से वर्तमान में चयनित मान रखती है। options एक सरणी में विकल्पों की एक सूची होती है जो ड्रॉपडाउन में प्रदर्शित की जाएगी। handleChange मेथड एक इवेंट हैंडलर है जो अपडेट होता है selectedValue जब उपयोगकर्ता कोई भिन्न विकल्प चुनता है.

लाइटनिंग वेब कंपोनेंट में कस्टम ड्रॉपडाउन कैसे बनाएं

LWC में एक कस्टम ड्रॉपडाउन बनाने में ड्रॉपडाउन यूआई बनाना और उसके व्यवहार को प्रबंधित करने के लिए आवश्यक तर्क लागू करना शामिल है। ये रहा एक सरल उदाहरण:

1. एचटीएमएल फ़ाइल (customDropdown.html):

जावास्क्रिप्ट फ़ाइल (customDropdown.js):

import { LightningElement, track } from 'lwc';

export default class CustomDropdown extends LightningElement {
    @track isDropdownOpen = false;
    @track selectedLabel="Select an option";
    @track options = [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
    ];

    toggleDropdown() {
        this.isDropdownOpen = !this.isDropdownOpen;
    }

    selectOption(event) {
        const value = event.currentTarget.dataset.value;
        const selectedOption = this.options.find(option => option.value === value);
        this.selectedLabel = selectedOption.label;
        this.isDropdownOpen = false;
    }
}

सीएसएस फ़ाइल (customDropdown.css):

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-button {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    cursor: pointer;
}

.dropdown-content {
    display: block;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f1f1f1;
}

घटकों को तैनात और उपयोग करें

अपने LWC घटक को तैनात और उपयोग करने के लिए, इन चरणों का पालन करें:

घटक लागू करें: सुनिश्चित करें कि आपने अपनी सभी घटक फ़ाइलें सहेज ली हैं (customDropdown.html, customDropdown.jsऔर customDropdown.css) आपके Salesforce प्रोजेक्ट में उपयुक्त निर्देशिका में। अपने घटक को अपने सेल्सफोर्स संगठन में तैनात करने के लिए निम्नलिखित कमांड का उपयोग करें:

sfdx force:source:deploy -p force-app/main/default/lwc/customDropdown

सामग्री का प्रयोग करें: एक बार तैनात होने के बाद, आप सेल्सफोर्स लाइटनिंग पेज में अपने कस्टम ड्रॉपडाउन घटक का उपयोग कर सकते हैं। यहां बताया गया है कि आप लाइटनिंग ऐप या अन्य LWC घटक में घटक कैसे जोड़ सकते हैं:

लाइटनिंग ऐप में:

दूसरे LWC घटक में:

अपने घटक को तैनात करने और शामिल करने के बाद, अपने कस्टम ड्रॉपडाउन को क्रियान्वित होते देखने के लिए अपने Salesforce संगठन में उपयुक्त पृष्ठ पर जाएँ।

इन चरणों का पालन करके, आप लाइटनिंग वेब कंपोनेंट्स में कॉम्बोबॉक्स या कस्टम ड्रॉपडाउन को प्रभावी ढंग से बना सकते हैं, तैनात कर सकते हैं और उपयोग कर सकते हैं, जिससे आपके सेल्सफोर्स एप्लिकेशन की इंटरऑपरेबिलिटी और उपयोगिता बढ़ जाएगी।

अक्सर पूछे जाने वाले प्रश्न (एफएक्यू)

1. लाइटनिंग वेब कंपोनेंट्स (LWC) में कॉम्बोबॉक्स क्या है?

ए सम्मिश्रण पटी लाइटनिंग वेब कंपोनेंट्स (एलडब्ल्यूसी) एक यूजर इंटरफेस घटक है जो उपयोगकर्ताओं को ड्रॉपडाउन सूची से विकल्प चुनने की अनुमति देता है। यह टेक्स्ट इनपुट फ़ील्ड और ड्रॉपडाउन सूची की विशेषताओं को जोड़ता है, जो चयन योग्य विकल्पों की सूची प्रस्तुत करने का एक सुविधाजनक तरीका प्रदान करता है। lightning-combobox इस कार्यक्षमता को लागू करने के लिए एलडब्ल्यूसी के घटकों का उपयोग किया जाता है, जो सेल्सफोर्स लाइटनिंग डिजाइन सिस्टम के अनुरूप एक लुक और अनुभव प्रदान करता है।

2. आप LWC में कॉम्बोबॉक्स कैसे बनाते हैं?

ला LWC में कम्बोबॉक्स बनाएंआप उपयोग करते हैं lightning-combobox तत्व आपके HTML टेम्प्लेट फ़ाइल में आवश्यक विशेषताओं जैसे तत्वों को परिभाषित करते हैं name, labelऔर options. options एक विशेषता वस्तुओं की एक सरणी है, प्रत्येक में एक होता है label और ए value. यह सरणी ड्रॉपडाउन सूची को पॉप्युलेट करती है। अपने जावास्क्रिप्ट नियंत्रक में, आप विकल्प सरणियों को प्रारंभ और प्रबंधित कर सकते हैं। value विशेषता कॉम्बोबॉक्स के चयनित मान का उपयोग आपके तत्व में किसी विशेषता से जुड़ने के लिए किया जा सकता है।

3. लाइटनिंग-कॉम्बोबॉक्स घटक के मुख्य गुण क्या हैं?

मुख्य गुण चलो भी lightning-combobox सामग्री में शामिल हैं:

• लेबल: कम्बोबॉक्स के लिए टेक्स्ट लेबल।
• विकल्प: चयन योग्य विकल्पों को परिभाषित करने वाली वस्तुओं की एक सरणी, प्रत्येक के साथ label और value गुण
• कीमत: वर्तमान में चयनित मान.
• प्लेसहोल्डर: जब कोई विकल्प नहीं चुना जाता है तो टेक्स्ट प्रदर्शित होता है।
• नाम: कम्बोबॉक्स के लिए एक अद्वितीय पहचानकर्ता।
• अक्षम: बूलियन यह दर्शाता है कि कॉम्बोबॉक्स अक्षम है या नहीं। ये गुण आपके LWC घटक के साथ लचीले कॉन्फ़िगरेशन और एकीकरण की अनुमति देते हैं।

4. आप एलडब्ल्यूसी में गतिशील डेटा के साथ कॉम्बोबॉक्स कैसे भर सकते हैं?

ला LWC में गतिशील डेटा के साथ कॉम्बोबॉक्स बनाएंआप किसी बाहरी स्रोत, जैसे Salesforce Apex नियंत्रक या REST API से डेटा प्राप्त करते हैं, और फिर इसे ऑब्जेक्ट की एक सरणी में प्रारूपित करते हैं। label और value इस सरणी में गुण निर्दिष्ट करें options के गुण lightning-combobox आप जीवनचक्र हुक जैसे घटकों का उपयोग कर सकते हैं connectedCallback घटक लोड होने पर डेटा आरंभ करने के लिए। यह दृष्टिकोण सुनिश्चित करता है कि कम्बोबॉक्स विकल्प वास्तविक समय डेटा के आधार पर गतिशील रूप से पॉप्युलेट किए जाते हैं।

5. क्या आप LWC में कॉम्बोबॉक्स के लुक को कस्टमाइज़ कर सकते हैं?

इसलिए लाइटनिंग-कॉम्बोबॉक्स घटक को सेल्सफोर्स लाइटनिंग डिज़ाइन सिस्टम का पालन करने के लिए डिज़ाइन किया गया है, इसका रूप हो सकता है अनुकूलित कुछ कस्टम सीएसएस का उपयोग करना। आप तत्व की सीएसएस फ़ाइल में सीएसएस वर्ग को परिभाषित और उपयोग करके शैलियों को कॉम्बोबॉक्स पर लागू कर सकते हैं। class में गुण lightning-combobox टैग हालाँकि, व्यापक अनुकूलन सीमित हो सकता है, क्योंकि घटक का उद्देश्य सेल्सफोर्स प्लेटफ़ॉर्म पर एक सुसंगत रूप और अनुभव बनाए रखना है। अधिक उन्नत स्टाइलिंग के लिए, मानक HTML और CSS का उपयोग करके LWC क्षमताओं के साथ एक कस्टम कॉम्बोक्स तत्व बनाने पर विचार करें।

6. आप एलडब्ल्यूसी में कम्बोबॉक्स चयनों द्वारा उत्पन्न घटनाओं को कैसे संभालते हैं?

ला कम्बोबॉक्स चयनों द्वारा ट्रिगर की गई घटनाओं को संभालें LWC में, आप उपयोग करते हैं onchange के गुण lightning-combobox तत्व विशेषता आपके जावास्क्रिप्ट नियंत्रक में एक हैंडलर फ़ंक्शन निर्दिष्ट करती है जिसे चयनित मान बदलने पर कॉल किया जाएगा। इस हैंडलर फ़ंक्शन में, आप चयनित मान का उपयोग करके पहुंच सकते हैं event.target.value संपत्ति। यह आपको उपयोगकर्ता चयन के आधार पर कोई भी आवश्यक कार्रवाई करने की अनुमति देता है, जैसे यूआई के अन्य हिस्सों को अपडेट करना, सर्वर कॉल करना, या डेटा संसाधित करना।

7. LWC में कॉम्बोबॉक्स का उपयोग करने की सीमाएँ क्या हैं?

इसलिए लाइटनिंग-कॉम्बोबॉक्स जबकि घटक शक्तिशाली और लचीला है, इसकी कुछ सीमाएँ हैं। एक महत्वपूर्ण सीमा है बहु-चयन के लिए समर्थन का अभाव क्षमता; तत्व केवल एक मान चुनने की अनुमति देता है। एक और सीमा है कस्टम सीमाएँ, क्योंकि यह घटक सेल्सफोर्स लाइटनिंग डिज़ाइन सिस्टम का पालन करने के लिए डिज़ाइन किया गया है, जो व्यापक शैली परिवर्तनों को सीमित करता है। इसके अतिरिक्त, विकल्पों की एक बहुत बड़ी सूची को संभालने से प्रदर्शन पर असर पड़ सकता है, जिससे डेवलपर्स को बेहतर उपयोगकर्ता अनुभव के लिए पेजिनेशन या खोज कार्यक्षमता लागू करने की आवश्यकता होती है।

8. आप LWC में कॉम्बोबॉक्स में किसी मान का पूर्व-चयन कैसे करते हैं?

ला कम्बोबॉक्स में एक मान का चयन करें LWC में, आप सेट करते हैं value के गुण lightning-combobox वांछित मूल्य के लिए कारक। यह विकल्प सरणी में किसी एक मान से मेल खाना चाहिए। आप इस मान को अपने जावास्क्रिप्ट नियंत्रक में हार्डकोडेड मानों, सर्वर से प्राप्त डेटा के माध्यम से, या कुछ शर्तों के आधार पर प्रारंभ कर सकते हैं। व्यवस्थित करके value संपत्ति, जब तत्व प्रस्तुत किया जाता है तो कॉम्बोबॉक्स पूर्व-चयनित विकल्प प्रदर्शित करेगा।

9. क्या आप LWC में लाइटनिंग डेटाटेबल में कॉम्बोबॉक्स का उपयोग कर सकते हैं?

हाँ तुम कर सकते हो लाइटनिंग डेटाटेबल में कॉम्बोबॉक्स का उपयोग करें LWC में आपके डेटाटेबल कॉलम के लिए कस्टम डेटा प्रकारों को परिभाषित करके। इसमें एक कस्टम सेलरेंडरर घटक बनाना शामिल है lightning-combobox घटक फिर आप इसे एक कस्टम रेंडरर में निर्दिष्ट करते हैं columns आपकी विशेषता lightning-datatable घटक दृष्टिकोण आपको डेटाटेबल में एक विशिष्ट सेल के लिए ड्रॉपडाउन चयन प्रदान करने की अनुमति देता है, जिससे तालिका के भीतर सीधे गतिशील और इंटरैक्टिव डेटा हेरफेर सक्षम हो जाता है।

10. आप एलडब्ल्यूसी में कम्बोबॉक्स चयन को कैसे मान्य करते हैं?

ला कम्बोबॉक्स के चयन को सत्यापित करें LWC में, आप सत्यापन तर्क लागू कर सकते हैं onchange हैंडलर या अलग प्रमाणीकरण फ़ंक्शन। यह तर्क जाँच सकता है कि चयनित मान कुछ मानदंडों को पूरा करता है या नहीं, जैसे कि खाली न होना या किसी निश्चित प्रारूप से मेल नहीं खाना। यदि चयन अमान्य है, तो आप इसका उपयोग करके एक त्रुटि संदेश प्रदर्शित कर सकते हैं setCustomValidity और reportValidity कॉम्बोबॉक्स तत्व पर विधियाँ। यह सुनिश्चित करता है कि उपयोगकर्ताओं को किसी भी प्रमाणीकरण समस्या के बारे में सूचित किया जाता है और वे तदनुसार अपनी पसंद को सही कर सकते हैं, जिससे समग्र उपयोगकर्ता अनुभव में वृद्धि होती है।