Στο Salesforce LWC, εάν θέλετε να επιτρέψετε στον χρήστη να επιλέξει μια επιλογή από την καθορισμένη λίστα επιλογών, χρησιμοποιείται το combobox. Σε αυτόν τον οδηγό, θα συζητήσουμε πώς να δημιουργήσετε ένα combobox και τα διαφορετικά χαρακτηριστικά που υποστηρίζονται από το combobox με παραδείγματα.
Combobox
Βασικά, το combobox είναι ένα πεδίο μόνο για ανάγνωση που παρέχει μια είσοδο για να επιλέξετε μια επιλογή από τις καθορισμένες επιλογές. Μπορούμε να το δημιουργήσουμε χρησιμοποιώντας την ετικέτα lightning-combobox. Τα χαρακτηριστικά είναι η ταχύτητα η μία μετά την άλλη που χωρίζεται από χώρο. Ας συζητήσουμε ορισμένα χαρακτηριστικά που απαιτούνται κατά τη δημιουργία ενός σύνθετου πλαισίου.
- επιγραφή – Χρησιμοποιείται για να καθορίσετε την ετικέτα (κείμενο) για το σύνθετο κουτί σας.
- επιλογές – Κάθε επιλογή λαμβάνει τα χαρακτηριστικά «ετικέτα» και «τιμή». Μπορούμε να καθορίσουμε τις πολλαπλές επιλογές σε μια λίστα διαχωρισμένη με κόμμα.
- κράτησης θέσης : Πριν από την επιλογή μιας επιλογής, ο χρήστης πρέπει να γνωρίζει τις πληροφορίες που σχετίζονται με τις επιλογές. Έτσι, αυτό το χαρακτηριστικό καθορίζεται.
- απαιτείται : Σε ορισμένες περιπτώσεις, είναι υποχρεωτικό να επιλέξετε την επιλογή. Μπορούμε να το απαιτήσουμε καθορίζοντας αυτό το χαρακτηριστικό.
- άτομα με ειδικές ανάγκες : Μπορεί να είναι δυνατή η αποτροπή του χρήστη επιλέγοντας την επιλογή από το πλαίσιο ελέγχου. Αυτό το χαρακτηριστικό απενεργοποιεί το σύνθετο πλαίσιο.
Σύνταξη:
Ας δούμε πώς να δημιουργήσετε ένα combobox με μερικά σημαντικά χαρακτηριστικά.
<κεραυνός-combobox
όνομα = 'όνομα'
label='label_name'
value={value_from_the_option}
placeholder='Κείμενο βοήθειας'
επιλογές={Λίστα_επιλογών}
onchange={handleChange} >
Προσδιορισμός:
Ας δούμε τα βήματα για να δημιουργήσουμε το combobox και να εργαστούμε μαζί του.
Στο αρχείο JavaScript, δημιουργήστε μια λίστα επιλογών με ετικέτα και τιμή μέσα στη μέθοδο 'getter'.
Δημιουργήστε μια μεταβλητή που αποθηκεύει την προεπιλεγμένη επιλογή.
Γράψτε τη συνάρτηση λαβής που αποθηκεύει την επιλογή που επιλέγει ο χρήστης από τη διεπαφή χρήστη.
Στο αρχείο HTML, δημιουργήστε ένα σύνθετο πλαίσιο και περάστε τα χαρακτηριστικά. Επίσης, πρέπει να περάσουμε τον χειριστή συμβάντων onchange() που χειρίζεται τις επιλογές στο combobox. Παίρνει τη συνάρτηση 'Handler' που δημιουργήθηκε στο αρχείο 'js'.
Σε όλα τα παραδείγματα που πρόκειται να συζητήσουμε σε αυτόν τον οδηγό, η λογική θα παρέχεται ως κώδικας 'js'. Μετά από αυτό, καθορίζουμε το στιγμιότυπο οθόνης που περιλαμβάνει ολόκληρο τον κώδικα 'js'.
Παράδειγμα 1:
Δημιουργήστε ένα combobox με πέντε θέματα (λεπτομέρειες) στο αρχείο Javascript. Καθορίστε την προεπιλεγμένη τιμή ως 'JAVA'. Χειριστείτε το combobox στη μέθοδο handleSubjectsOnChange(). Μεταβιβάστε την τιμή και τις λεπτομέρειες στα χαρακτηριστικά 'τιμή και επιλογές' στο αρχείο HTML με μια ετικέτα και αναπτύξτε το στοιχείο.
firstExample.html
<πρότυπο><αστραπή-κάρτα τίτλος = 'Συνδυασμός θεμάτων' >
< div τάξη = 'slds-var-m-around_medium' >
<κεραυνός-combobox
επιγραφή = 'Επιλέξτε το θέμα σας:'
αξία = { αξία }
επιλογές = { Λεπτομέριες }
onchange = { handleSubjectsOnChange } >< / αστραπή-combobox>
< br >
< Π > Το θέμα σου: < σι > {αξία} < / σι >< / Π >
< / div >
< / αστραπή-κάρτα>
< / πρότυπο>
firstExample.js
// Δημιουργία προεπιλεγμένης τιμής - 'JAVA' για το Comboboxαξία = 'ΙΑΒΑ' ;
// Εμφάνιση των θεμάτων
παίρνω Λεπτομέριες ( ) {
// 5 θέματα
ΕΠΙΣΤΡΟΦΗ [ { επιγραφή : 'Ιάβα' , αξία : 'ΙΑΒΑ' } ,
{ επιγραφή : 'Πύθων' , αξία : 'ΠΥΘΩΝ' } ,
{ επιγραφή : 'HTML' , αξία : 'HTML' } ,
{ επιγραφή : 'ΝΤΟ' , αξία : 'ΝΤΟ' } ,
{ επιγραφή : 'C++' , αξία : 'C++' } ] ;
}
// Χειριστείτε τη λογική για να ορίσετε την τιμή
handleSubjectsOnChange ( Εκδήλωση ) {
Αυτό . αξία = Εκδήλωση. λεπτομέρεια . αξία ;
}
}
Ολόκληρος ο κωδικός:
firstComponent.js-meta.xml
εκδοχή = '1.0' ?><στόχοι>
<στόχος> lightning__AppPage < / στόχος>
<στόχος> lightning__RecordPage < / στόχος>
< / στόχοι>
< / LightningComponentBundle>
Παραγωγή:
Προσθέστε αυτό το στοιχείο στη σελίδα 'Εγγραφή' οποιουδήποτε αντικειμένου. Στο αρχείο HTML, εμφανίζουμε την τιμή στην ετικέτα παραγράφου. Όταν ένας χρήστης επιλέξει οποιαδήποτε επιλογή, θα εμφανίζεται με έντονη γραφή. Από προεπιλογή, το 'JAVA' επιλέγεται και εμφανίζεται μετά την απόδοση του στοιχείου στη σελίδα.
Ας επιλέξουμε το θέμα ως 'C'. Το 'C' επιστρέφεται κάτω από το σύνθετο πλαίσιο.
Παράδειγμα 2:
Σε αυτό το παράδειγμα, θα αποδώσουμε τα διαφορετικά στοιχεία με βάση τις τιμές λίστας επιλογής Τύπος καμπάνιας (από το αντικείμενο Καμπάνια).
- Εάν ο τύπος καμπάνιας είναι 'Διάσκεψη', θα αποδώσουμε το πρότυπο που επιστρέφει το κείμενο – Κατάσταση καμπάνιας: ΣΧΕΔΙΑΣΜΕΝΗ
- Εάν ο τύπος καμπάνιας είναι 'Διαδικτυακό σεμινάριο', θα αποδώσουμε το πρότυπο που επιστρέφει το κείμενο – Κατάσταση καμπάνιας: ΟΛΟΚΛΗΡΩΜΕΝΗ
- Εάν ο τύπος καμπάνιας είναι 'Συνεργάτες', θα αποδώσουμε το πρότυπο που επιστρέφει το κείμενο – Κατάσταση καμπάνιας: ΣΕ ΕΞΕΛΙΞΗ
- Κατάσταση καμπάνιας: ΜΑΤΩΡΗΘΗΚΕ για τις υπόλοιπες επιλογές.
secondExample.html
<πρότυπο><αστραπή-κάρτα τίτλος = 'ΤΥΠΟΣ ΚΑΜΠΑΝΙΑΣ' εικόνισμα- όνομα = 'standard:campaign' >
< div τάξη = 'slds-var-m-around_medium' στυλ = 'ύψος: 20 εικονοστοιχεία; πλάτος: 400 εικονοστοιχεία' >
<πρότυπο τύχη:αν = { CampaignTypeValues. δεδομένα } >
<κεραυνός-combobox αξία = { αξία }
επιλογές = { CampaignTypeValues. δεδομένα .αξίες }
onchange = { λαβήΑλλαγή } >
< / αστραπή-combobox>
< / πρότυπο>< br / >
< / div >
< br >< br >
<πρότυπο τύχη:αν = { συνεδριακό } >
< κέντρο > Κατάσταση καμπάνιας: < σι >< Εγώ > ΣΧΕΔΙΑΣΜΕΝΟΣ< / Εγώ >< / σι > < / κέντρο >
< / πρότυπο>
<πρότυπο luck:elseif = { webinarval } >
< κέντρο > Κατάσταση καμπάνιας: < σι >< Εγώ > ΟΛΟΚΛΗΡΩΘΗΚΕ< / Εγώ >< / σι > < / κέντρο >
< / πρότυπο>
<πρότυπο luck:elseif = { συνεργάτης } >
< κέντρο > Κατάσταση καμπάνιας: < σι >< Εγώ > ΣΕ ΕΞΕΛΙΞΗ< / Εγώ >< / σι > < / κέντρο >
< / πρότυπο>
< κέντρο > Κατάσταση καμπάνιας: < σι >< Εγώ > ΑΠΟΡΡΗΘΗΚΕ< / Εγώ >< / σι > < / κέντρο >
< / πρότυπο>
< / αστραπή-κάρτα>
< / πρότυπο>
secondExample.js
Εισάγουμε το αντικείμενο Campaign (Τυπικό) ως CAMPAIGN και πληκτρολογούμε από αυτό ως TYPE. Από το lightning/uiObjectInfoApi, εισάγουμε το getPicklistValues και το getObjectInfo. Αυτά θα λάβουν τις διαθέσιμες τιμές λίστας επιλογής στο πεδίο Τύπος. Αυτά θα χρησιμοποιηθούν ως επιλογές για το combobox. Τα ακόλουθα χειρίζονται στο handleChange().
- Εάν η τιμή === 'Conference', ορίζουμε τη μεταβλητή conferenceval σε true και τις άλλες δύο ως false.
- Εάν η τιμή === 'Webinar', ορίζουμε τη μεταβλητή webinarval σε true και τις άλλες δύο ως false.
- Εάν η τιμή === 'Partners', ορίζουμε τη μεταβλητή partnerval σε true και τις άλλες δύο ως false.
- Εάν η τιμή δεν είναι στις δεδομένες επιλογές, όλες είναι ψευδείς.
εισαγωγή ΚΑΜΠΑΝΙΑ από '@salesforce/schema/Campaign' ;
εισαγωγή TYPE από '@salesforce/schema/Campaign.Type' ;
εισαγωγή { getPicklistValues } από 'lightning/uiObjectInfoApi' ;
εισαγωγή { getObjectInfo } από 'lightning/uiObjectInfoApi' ;
εξαγωγή Προκαθορισμένο τάξη Δεύτερο Παράδειγμα εκτείνεται LightningElement {
@ αξία διαδρομής ;
// Λήψη του αντικειμένου
@ σύρμα ( getObjectInfo , { objectApiName : ΚΑΜΠΑΝΙΑ } )
αντικείμενο Πληροφορίες ;
// Λάβετε τον Τύπο καμπάνιας - Λίστα επιλογών
@ σύρμα ( getPicklistValues , { recordTypeId : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : ΤΥΠΟΣ } )
CampaignTypeValues ;
συνεδριακό = ψευδής ;
webinarval = ψευδής ;
συνεργάτης = ψευδής ;
άλλα = ψευδής ;
// Χειριστείτε τη λογική
λαβήΑλλαγή ( Εκδήλωση ) {
Αυτό . αξία = Εκδήλωση. στόχος . αξία ;
αν ( Αυτό . αξία === 'Διάσκεψη' ) {
// Εμφάνιση της κατάστασης ως ΣΧΕΔΙΑΣΜΕΝΗ
Αυτό . συνεδριακό = αληθής ;
Αυτό . webinarval = ψευδής ;
Αυτό . συνεργάτης = ψευδής ;
}
αλλού αν ( Αυτό . αξία === 'Διαδικτυακά σεμινάρια' ) {
// Εμφάνιση της κατάστασης ως ΟΛΟΚΛΗΡΩΜΕΝΗ
Αυτό . webinarval = αληθής ;
Αυτό . συνεδριακό = ψευδής ;
Αυτό . συνεργάτης = ψευδής ;
}
αλλού αν ( Αυτό . αξία === «Συνεργάτες» ) {
// Εμφάνιση κατάστασης ως ΣΕ ΕΞΕΛΙΞΗ
Αυτό . webinarval = ψευδής ;
Αυτό . συνεδριακό = ψευδής ;
Αυτό . συνεργάτης = αληθής ;
}
αλλού {
// Εμφάνιση κατάστασης ως ΜΑΤΩΡΗΜΕΝΗ
Αυτό . webinarval = ψευδής ;
Αυτό . συνεδριακό = ψευδής ;
Αυτό . συνεργάτης = ψευδής ;
}
}
}
secondComponent.js-meta.xml
εκδοχή = '1.0' ?><στόχοι>
<στόχος> lightning__AppPage < / στόχος>
<στόχος> lightning__RecordPage < / στόχος>
< / στόχοι>
< / LightningComponentBundle>
Παραγωγή:
Πληκτρολογήστε – «Συνέδριο». Άρα, η κατάσταση είναι 'ΠΡΟΓΡΑΜΜΑΤΙΣΜΕΝΗ'.
Τύπος – «Διαδικτυακό σεμινάριο». Άρα, η κατάσταση είναι 'ΟΛΟΚΛΗΡΩΜΕΝΗ'.
Τύπος – «Συνεργάτες». Άρα, η κατάσταση είναι «ΣΕ ΕΞΕΛΙΞΗ».
Ο τύπος δεν περιλαμβάνεται στις παρεχόμενες επιλογές. Άρα, η κατάσταση είναι «ΑΠΟΣΤΟΛΗ».
Παράδειγμα 3:
Τώρα, δημιουργούμε ένα σύνθετο πλαίσιο με τις εγγραφές καμπάνιας ως επιλογές. Εάν επιλέξουμε οποιαδήποτε επιλογή, ο αντίστοιχος τύπος καμπάνιας θα επιστραφεί στη διεπαφή χρήστη.
Αρχικά, πρέπει να δημιουργήσουμε μια κλάση Apex με τη μέθοδο getCampaign(). Αυτή η μέθοδος επιστρέφει μια λίστα με όλες τις καμπάνιες με το αναγνωριστικό, το όνομα, τον τύπο και την κατάσταση.
CampaignRecords. apxcκοινό με κοινή χρήση τάξη CampaignRecords {
@ Aura Enabled ( cache = αληθής )
// Λάβετε τη λίστα με τις καμπάνιες
δημόσιο στατικός Λίστα < καμπάνια > getCampaign ( ) {
ΕΠΙΣΤΡΟΦΗ [ SELECT ID , Ονομα , Τύπος , Κατάσταση από την καμπάνια ] ;
}
}
thirdExample.html
<πρότυπο><αστραπή-κάρτα τίτλος = 'ΤΥΠΟΣ ΚΑΜΠΑΝΙΑΣ' εικόνισμα- όνομα = 'standard:campaign' >
< div τάξη = 'slds-var-m-around_medium' στυλ = 'ύψος: 20 εικονοστοιχεία; πλάτος: 400 εικονοστοιχεία' >
<κεραυνός-combobox όνομα = 'Καμπάνια'
επιγραφή = 'Επιλογή ονόματος καμπάνιας'
επιλογές = { Επιλογές καμπάνιας }
αξία = { αξία }
onchange = { αλλαγή λαβής }
>
< / αστραπή-combobox>
< / div >< br >
< br >
< Π > Τύπος καμπάνιας για αυτήν την καμπάνια: < σι > {αξία} < / σι >< / Π >
< / αστραπή-κάρτα>
< / πρότυπο>
thirdExample.js
- Πρέπει να καθορίσουμε τη μέθοδο που λαμβάνει μια λίστα με Campaigns μέσα στη μέθοδοconnectedcallback(). Δηλώστε έναν πίνακα με το όνομα 'στρατόπεδα' και αποθηκεύστε το αποτέλεσμα με την ετικέτα ως αναγνωριστικό καμπάνιας και την τιμή ως Τύπος καμπάνιας. Αυτός ο πίνακας είναι η είσοδος για τα Ονόματα καμπάνιας (αυτό πρέπει να δημιουργηθεί με τον διακοσμητή κομματιού).
- Στη μέθοδο λήψης Campaignoptions(), επιστρέψτε τον πίνακα Ονόματα καμπάνιας. Έτσι, το combobox χρησιμοποιεί αυτές τις επιλογές.
- Ορίστε την επιλεγμένη τιμή στη μέθοδο χειριστή handleonchange().
εισαγωγή getCampaign από '@salesforce/apex/CampaignRecords.getCampaign' ;
εξαγωγή Προκαθορισμένο τάξη Τρίτο Παράδειγμα εκτείνεται LightningElement {
αξία = '' ;
@ παρακολουθήστε ονόματα καμπανιών = [ ] ;
παίρνω Επιλογές καμπάνιας ( ) {
ΕΠΙΣΤΡΟΦΗ Αυτό . Ονόματα καμπάνιας ;
}
// Προσθέστε τις επιλογές στον πίνακα camps από το Apex.
Η ετικέτα // θα είναι το όνομα της καμπάνιας
Η τιμή // θα είναι ο Τύπος καμπάνιας
συνδεδεμένη Επανάκληση ( ) {
getCampaign ( )
. έπειτα ( αποτέλεσμα => {
ας κατασκηνώσεις = [ ] ;
Για ( ήταν κ = 0 ; κ < αποτέλεσμα. μήκος ; κ ++ ) {
στρατόπεδα. Σπρώξτε ( { επιγραφή : αποτέλεσμα [ κ ] . Ονομα , αξία : αποτέλεσμα [ κ ] . Τύπος } ) ;
}
Αυτό . Ονόματα καμπάνιας = στρατόπεδα ;
} )
}
// Χειριστείτε την τιμή
αλλαγή λαβής ( Εκδήλωση ) {
Αυτό . αξία = Εκδήλωση. λεπτομέρεια . αξία ;
}
}
Παραγωγή:
Ας επιλέξουμε την εγγραφή και ας δούμε τον τύπο.
συμπέρασμα
Μάθαμε πώς να δημιουργούμε ένα combobox στο LWC με χαρακτηριστικά και παραδείγματα. Αρχικά, δημιουργήσαμε ένα σύνθετο πλαίσιο με μια λίστα τιμών και εμφανίσαμε την επιλεγμένη τιμή. Στη συνέχεια, αποδίδουμε το πρότυπο HTML με βάση την επιλεγμένη τιμή μέσω της απόδοσης υπό όρους. Τέλος, μάθαμε πώς να δημιουργήσουμε τις επιλογές για το combobox από τις υπάρχουσες εγγραφές Salesforce και να εμφανίσουμε τα σχετικά πεδία στη διεπαφή χρήστη.