LWC – Combobox

Lwc Combobox



Wenn Sie in Salesforce LWC dem Benutzer die Auswahl einer Option aus der angegebenen Optionsliste ermöglichen möchten, wird die Kombinationsbox verwendet. In dieser Anleitung besprechen wir anhand von Beispielen, wie man eine Combobox erstellt und welche verschiedenen Attribute die Combobox unterstützt.

Kombinationsfeld

Grundsätzlich handelt es sich bei einer Combobox um ein schreibgeschütztes Feld, das eine Eingabe zur Auswahl einer Option aus den angegebenen Optionen bietet. Wir können dies mit dem Lightning-Combobox-Tag erstellen. Die Attribute sind nacheinander Geschwindigkeit, getrennt durch Leerzeichen. Lassen Sie uns einige Attribute besprechen, die beim Erstellen einer Combobox erforderlich sind.





  1. Etikett – Hiermit geben Sie die Beschriftung (Text) für Ihre Combobox an.
  2. Optionen – Jede Option übernimmt die Attribute „label“ und „value“. Wir können die mehreren Optionen in einer durch Komma getrennten Liste angeben.
[ { label: label1, value: value1 }, ,,,];
  1. Platzhalter : Bevor der Benutzer eine Option auswählt, muss er die Informationen zu den Optionen kennen. Daher ist dieses Attribut angegeben.
  2. erforderlich : In manchen Fällen ist es obligatorisch, die Option auszuwählen. Wir können es durch die Angabe dieses Attributs erforderlich machen.
  3. deaktiviert : Es kann möglich sein, den Benutzer zu verhindern, indem er die Option aus dem Kontrollkästchen auswählt. Dieses Attribut deaktiviert die Combobox.

Syntax:

Sehen wir uns an, wie man eine Combobox mit einigen wichtigen Attributen erstellt.






label='label_name'

value={value_from_the_option}

placeholder='Hilfetext'

Optionen={List_of_options}

onchange={handleChange} >

Spezifikation:

Sehen wir uns die Schritte zum Erstellen der Combobox und zum Arbeiten damit an.



Erstellen Sie in der JavaScript-Datei eine Liste von Optionen mit Beschriftung und Wert innerhalb der „Getter“-Methode.



Erstellen Sie eine Variable, die die Standardoption speichert.



Schreiben Sie die Handle-Funktion, die die vom Benutzer auf der Benutzeroberfläche ausgewählte Option speichert.

Erstellen Sie in der HTML-Datei eine Combobox und übergeben Sie die Attribute. Außerdem müssen wir den Ereignishandler onchange() übergeben, der die Optionen in der Combobox verarbeitet. Es verwendet die Funktion „Handler“, die in der Datei „js“ erstellt wurde.

In allen Beispielen, die wir in diesem Handbuch besprechen werden, wird die Logik als „js“-Code bereitgestellt. Danach geben wir den Screenshot an, der den gesamten „js“-Code enthält.

Beispiel 1:

Erstellen Sie in der Javascript-Datei eine Combobox mit fünf Themen (Details). Geben Sie den Standardwert „JAVA“ an. Behandeln Sie die Combobox in der Methode handleSubjectsOnChange(). Übergeben Sie den Wert und die Details mit einer Bezeichnung an die Attribute „Wert und Optionen“ in der HTML-Datei und stellen Sie die Komponente bereit.

erstesBeispiel.html



Titel = „Fächer-Combobox“ >

< div Klasse = „slds-var-m-around_medium“ >



Etikett = „Wählen Sie Ihr Thema:“

Wert = { Wert }

Optionen = { Einzelheiten }

bei Änderung = { handleSubjectsOnChange } >< / Lightning-Combobox>

< br >

< P > Dein Fach: < B > {Wert} < / B >< / P >

< / div >

< / Blitzkarte>

< / Vorlage>

firstExample.js

// Standardwert „JAVA“ für die Combobox erstellen
Wert = 'JAVA' ;


// Zeige die Themen
erhalten Einzelheiten ( ) {
// 5 Fächer
zurückkehren [ { Etikett : 'Java' , Wert : 'JAVA' } ,
{ Etikett : 'Python' , Wert : 'PYTHON' } ,
{ Etikett : 'HTML' , Wert : 'HTML' } ,
{ Etikett : 'C' , Wert : 'C' } ,
{ Etikett : 'C++' , Wert : 'C++' } ] ;
}

// Behandeln Sie die Logik, um den Wert festzulegen
handleSubjectsOnChange ( Ereignis ) {
Das . Wert = Ereignis. Detail . Wert ;
}
}

Gesamter Code:

firstComponent.js-meta.xml

Ausführung = „1,0“ ?>

= „http://soap.sforce.com/2006/04/metadata“ >

57,0 < / apiVersion>

WAHR < / isExposed>



Lightning__AppPage < / Ziel>

lightning__RecordPage < / Ziel>

< / Ziele>

< / LightningComponentBundle>

Ausgabe:

Fügen Sie diese Komponente zur Seite „Datensatz“ eines beliebigen Objekts hinzu. In der HTML-Datei zeigen wir den Wert im Absatz-Tag an. Wenn ein Benutzer eine Option auswählt, wird diese fett angezeigt. Standardmäßig wird „JAVA“ ausgewählt und angezeigt, nachdem die Komponente auf der Seite gerendert wurde.

Wählen wir als Betreff „C“. „C“ wird unterhalb der Combobox zurückgegeben.

Beispiel 2:

In diesem Beispiel rendern wir die verschiedenen Komponenten basierend auf den Werten der Auswahlliste „Kampagnentyp“ (aus dem Kampagnenobjekt).

  1. Wenn der Kampagnentyp „Konferenz“ ist, rendern wir die Vorlage, die den Text zurückgibt – Kampagnenstatus:  GEPLANT
  2. Wenn der Kampagnentyp „Webinar“ ist, rendern wir die Vorlage, die den Text zurückgibt – Kampagnenstatus:   ABGESCHLOSSEN
  3. Wenn der Kampagnentyp „Partner“ lautet, rendern wir die Vorlage, die den Text zurückgibt – Kampagnenstatus:   IN BEARBEITUNG
  4. Kampagnenstatus: Abgebrochen für die restlichen Optionen.

zweites Beispiel.html



Titel = „KAMPAGNENTYP“ Symbol- Name = „Standard:Kampagne“ >

< div Klasse = „slds-var-m-around_medium“ Stil = „Höhe:20px; Breite:400px“ >

= { CampaignTypeValues. Daten } >

Wert = { Wert }

Optionen = { CampaignTypeValues. Daten .Werte }

bei Änderung = { handleChange } >

< / Lightning-Combobox>

< / Vorlage>< br / >

< / div >

< br >< br >

= { Konferenzval } >

< Center > Kampagnenstatus:   < B >< ich >GEPLANT< / ich >< / B > < / Center >

< / Vorlage>