Salesforce LWC'de kullanıcının belirtilen seçenekler listesinden bir seçenek seçmesine izin vermek istiyorsanız açılan kutu kullanılır. Bu kılavuzda, bir açılan kutunun nasıl oluşturulacağını ve açılan kutunun desteklediği farklı nitelikleri örneklerle tartışacağız.
Açılan kutu
Temel olarak açılan kutu, belirtilen seçenekler arasından bir seçeneği seçmek için girdi sağlayan salt okunur bir alandır. Bunu Lightning-combobox etiketini kullanarak oluşturabiliriz. Nitelikler boşlukla ayrılmış birbiri ardına hızdır. Combobox oluştururken gerekli olan bazı özellikleri tartışalım.
- etiket – Bu, birleşik giriş kutunuzun etiketini (metni) belirtmek için kullanılır.
- seçenekler – Her seçenek “etiket” ve “değer” niteliklerini alır. Birden çok seçeneği virgülle ayırarak bir liste halinde belirtebiliriz.
- Yer tutucu : Bir seçeneği seçmeden önce kullanıcının seçeneklerle ilgili bilgileri bilmesi gerekir. Yani bu özellik belirtilmiştir.
- gerekli : Bazı durumlarda seçeneğin seçilmesi zorunludur. Bu özelliği belirterek gerekli hale getirebiliriz.
- engelli : Onay kutusundan seçenek seçilerek kullanıcının engellenmesi mümkün olabilir. Bu özellik açılan kutuyu devre dışı bırakır.
Sözdizimi:
Bazı önemli özelliklere sahip bir açılan kutunun nasıl oluşturulacağını görelim.
ad = 'isim'
etiket = 'etiket_adı'
değer={value_from_the_option}
placeholder = 'Yardım Metni'
seçenekler={List_of_options}
onchange={handleChange} >
Şartname:
Açılan kutuyu oluşturma ve onunla çalışma adımlarını görelim.
JavaScript dosyasında, 'getter' yönteminin içinde etiket ve değer içeren bir seçenekler listesi oluşturun.
Varsayılan seçeneği saklayan bir değişken oluşturun.
Kullanıcı tarafından kullanıcı arayüzünden seçilen seçeneği saklayan tanıtıcı işlevini yazın.
HTML dosyasında bir açılan kutu oluşturun ve nitelikleri iletin. Ayrıca, birleşik giriş kutusundaki seçenekleri işleyen onchange() olay işleyicisini de aktarmamız gerekir. “js” dosyasında oluşturulan “Handler” fonksiyonunu alır.
Bu kılavuzda ele alacağımız tüm örneklerde mantık “js” kodu olarak sağlanacaktır. Sonrasında “js” kodunun tamamını içeren ekran görüntüsünü belirliyoruz.
Örnek 1:
Javascript dosyasında beş konu (ayrıntı) içeren bir açılan kutu oluşturun. Varsayılan değeri “JAVA” olarak belirtin. Birleşik giriş kutusunu tanıtıcıSubjectsOnChange() yönteminde işleyin. Değeri ve ayrıntıları HTML dosyasındaki 'değer ve seçenekler' niteliklerine bir etiketle aktarın ve bileşeni dağıtın.
ilkÖrnek.html
<şablon>< div sınıf = 'slds-var-m-around_medium' >
etiket = 'Konunuzu seçin:'
değer = { değer }
seçenekler = { detaylar }
değişiklik = { tanıtıcıSubjectsOnChange } >< / yıldırım açılan kutusu>
< br >
< P > Senin konun: < B > {değer} < / B >< / P >
< / div >
< / yıldırım kartı>
< / şablon>
ilkÖrnek.js
// Combobox için varsayılan değer - 'JAVA' oluşturdeğer = 'JAVA' ;
// Konuları göster
elde etmek detaylar ( ) {
// 5 konu
geri dönmek [ { etiket : 'Java' , değer : 'JAVA' } ,
{ etiket : 'Python' , değer : 'PYTHON' } ,
{ etiket : 'HTML' , değer : 'HTML' } ,
{ etiket : 'C' , değer : 'C' } ,
{ etiket : 'C++' , değer : 'C++' } ] ;
}
// Değeri ayarlamak için mantığı işle
tanıtıcıSubjectsOnChange ( etkinlik ) {
Bu . değer = etkinlik. detay . değer ;
}
}
Kodun Tamamı:
FirstComponent.js-meta.xml
versiyon = '1.0' ?>< / hedefler>
< / LightningComponentBundle>
Çıktı:
Bu bileşeni herhangi bir nesnenin “Kayıt” sayfasına ekleyin. HTML dosyasında paragraf etiketindeki değeri görüntüleriz. Kullanıcı herhangi bir seçeneği seçtiğinde kalın olarak görüntülenecektir. Varsayılan olarak, bileşen sayfada işlendikten sonra “JAVA” seçilir ve görüntülenir.
Konuyu “C” olarak seçelim. Açılan kutunun altına “C” döndürülür.
Örnek 2:
Bu örnekte, Kampanya Türü seçim listesi değerlerine göre (Kampanya nesnesinden) farklı bileşenleri oluşturacağız.
- Kampanya türü 'Konferans' ise, şu metni döndüren şablonu oluşturacağız: Kampanya Durumu: PLANLANMIŞ
- Kampanya türü 'Web Semineri' ise, şu metni döndüren şablonu oluşturacağız: Kampanya Durumu: TAMAMLANDI
- Kampanya türü 'İş Ortakları' ise şu metni döndüren şablonu oluşturacağız: Kampanya Durumu: DEVAM EDİYOR
- Kampanya Durumu: Geri kalan seçenekler için İPTAL EDİLDİ.
ikinciÖrnek.html
<şablon>< div sınıf = 'slds-var-m-around_medium' stil = 'yükseklik:20 piksel; genişlik:400 piksel' >
<şans şablonu:if = { CampaignTypeValues. veri } >
seçenekler = { CampaignTypeValues. veri .değerler }
değişiklik = { tanıtıcıDeğiştir } >
< / yıldırım açılan kutusu>
< / şablon>< br / >
< / div >
< br >< br >
<şans şablonu:if = { konferans toplantısı } >
< merkez > Kampanya Durumu: < B >< Ben > PLANLANMIŞ< / Ben >< / B > < / merkez >
< / şablon>
<şablon şans:elseif = { web semineri } >
< merkez > Kampanya Durumu: < B >< Ben > TAMAMLANDI< / Ben >< / B > < / merkez >
< / şablon>
<şablon şans:elseif = { ortaklık } >
< merkez > Kampanya Durumu: < B >< Ben > DEVAM EDİYOR< / Ben >< / B > < / merkez >
< / şablon>
<şans şablonu:başka>
< merkez > Kampanya Durumu: < B >< Ben > İPTAL EDİLDİ< / Ben >< / B > < / merkez >
< / şablon>
< / yıldırım kartı>
< / şablon>
ikinciÖrnek.js
Kampanya nesnesini (Standart) CAMPAIGN olarak ve Type'ı da TYPE olarak içe aktarıyoruz. Lightning/uiObjectInfoApi'den getPicklistValues ve getObjectInfo'yu içe aktarıyoruz. Bunlar Tür alanında mevcut olan seçim listesi değerlerini alacaktır. Bunlar açılan kutunun seçenekleri olarak kullanılacaktır. Aşağıdakiler tanıtıcıDeğiştir()'de işlenir.
- === “Konferans” değeri ise konferansval değişkenini true, diğer ikisini ise false olarak ayarlıyoruz.
- === “Webinar” değeri ise webinarval değişkenini true, diğer ikisini false olarak ayarlıyoruz.
- === “Partners” değeri ise partnerval değişkenini true, diğer ikisini false olarak ayarlıyoruz.
- Değer verilen seçeneklerde değilse hepsi yanlıştır.
içe aktarmak KAMPANYA '@salesforce/schema/Kampanya' ;
içe aktarmak TYPE itibaren '@salesforce/schema/Campaign.Type' ;
içe aktarmak { getPicklistValues } itibaren 'yıldırım/uiObjectInfoApi' ;
içe aktarmak { getObjectInfo } itibaren 'yıldırım/uiObjectInfoApi' ;
ihracat varsayılan sınıf İkinci Örnek uzanır YıldırımElemanı {
@ değeri takip et ;
// Nesneyi al
@ tel ( getObjectInfo , { nesneApiAdı : KAMPANYA } )
nesne bilgisi ;
// Kampanya Türünü Alın - Seçim Listesi
@ tel ( getPicklistValues , { kayıt Türü Kimliği : '$objectInfo.data.defaultRecordTypeId' , fieldApiName : TİP } )
Kampanya Türü Değerleri ;
konferans toplantısı = YANLIŞ ;
web semineri = YANLIŞ ;
ortaklık = YANLIŞ ;
diğer = YANLIŞ ;
// Kol mantığı
tanıtıcıDeğiştir ( etkinlik ) {
Bu . değer = etkinlik. hedef . değer ;
eğer ( Bu . değer === 'Konferans' ) {
// Durumu PLANLANMIŞ olarak göster
Bu . konferans toplantısı = doğru ;
Bu . web semineri = YANLIŞ ;
Bu . ortaklık = YANLIŞ ;
}
başka eğer ( Bu . değer === 'Web Seminerleri' ) {
// Durumu TAMAMLANDI olarak göster
Bu . web semineri = doğru ;
Bu . konferans toplantısı = YANLIŞ ;
Bu . ortaklık = YANLIŞ ;
}
başka eğer ( Bu . değer === 'Ortaklar' ) {
// Durumu DEVAM EDİYOR olarak göster
Bu . web semineri = YANLIŞ ;
Bu . konferans toplantısı = YANLIŞ ;
Bu . ortaklık = doğru ;
}
başka {
// Durumu İPTAL EDİLDİ olarak göster
Bu . web semineri = YANLIŞ ;
Bu . konferans toplantısı = YANLIŞ ;
Bu . ortaklık = YANLIŞ ;
}
}
}
SecondComponent.js-meta.xml
versiyon = '1.0' ?>< / hedefler>
< / LightningComponentBundle>
Çıktı:
Tür – “Konferans”. Yani durum “PLANLANMIŞ”tır.
Tür – “Web Semineri”. Yani durum “TAMAMLANDI”.
Tür – “Ortaklar”. Yani durum “DEVAM EDİYOR”.
Tür, sağlanan seçenekler arasında yer almıyor. Yani durum “İPTAL EDİLDİ”.
Örnek 3:
Şimdi, Kampanya kayıtlarını seçenek olarak içeren bir açılan kutu oluşturuyoruz. Herhangi bir seçeneği belirlersek ilgili Kampanya türü kullanıcı arayüzünde döndürülür.
Öncelikle getCampaign() metoduyla bir Apex sınıfı oluşturmamız gerekiyor. Bu yöntem, kimliği, adı, türü ve durumuyla birlikte tüm Kampanyaların bir listesini döndürür.
Kampanya Kayıtları. apxcpaylaşımla halka açık sınıf Kampanya Kayıtları {
@ Aura Etkin ( önbelleğe alınabilir = doğru )
// Kampanyaların listesini alın
halk statik Liste < Kampanya > getKampanya ( ) {
geri dönmek [ Kimliği SEÇİN , İsim , Tip , Kampanyadan Durum ] ;
}
}
üçüncüÖrnek.html
<şablon>< div sınıf = 'slds-var-m-around_medium' stil = 'yükseklik:20 piksel; genişlik:400 piksel' >
etiket = 'Kampanya Adını Seçin'
seçenekler = { Kampanya seçenekleri }
değer = { değer }
değişiklik = { tanıtıcı değişiklik }
>
< / yıldırım açılan kutusu>
< / div >< br >
< br >
< P > Bu Kampanyaya İlişkin Kampanya Türü: < B > {değer} < / B >< / P >
< / yıldırım kartı>
< / şablon>
üçüncüÖrnek.js
- Connectedcallback() yönteminin içinde Kampanyaların listesini alan yöntemi belirtmemiz gerekiyor. 'Kamplar' adında bir dizi bildirin ve sonucu, Kampanya Kimliği etiketi ve Kampanya Türü değeriyle birlikte saklayın. Bu dizi,campaignNames'in girişidir (bunun kanal dekoratörüyle oluşturulması gerekir).
- Campaignoptions() alıcı yönteminde,campaignNames dizisini döndürün. Yani açılan kutu bu seçenekleri kullanır.
- Seçilen değeri handonchange() işleyici yönteminde ayarlayın.
içe aktarmak Kampanyayı al '@salesforce/apex/CampaignRecords.getCampaign' ;
ihracat varsayılan sınıf Üçüncü Örnek uzanır YıldırımElemanı {
değer = '' ;
@ kampanya adlarını izle = [ ] ;
elde etmek Kampanya seçenekleri ( ) {
geri dönmek Bu . kampanyaAdları ;
}
// Seçenekleri Apex'ten camps dizisine ekleyin.
// etiketi Kampanya Adı olacaktır
// değer Kampanya Türü olacaktır
bağlıGeri arama ( ) {
getKampanya ( )
. Daha sonra ( sonuç => {
kamplara izin ver = [ ] ;
için ( öyleydi k = 0 ; k < sonuç. uzunluk ; k ++ ) {
kamplar. itmek ( { etiket : sonuç [ k ] . İsim , değer : sonuç [ k ] . Tip } ) ;
}
Bu . kampanyaAdları = kamplar ;
} )
}
// Değeri işle
tanıtıcı değişiklik ( etkinlik ) {
Bu . değer = etkinlik. detay . değer ;
}
}
Çıktı:
Kaydı seçip tipini görelim.
Çözüm
LWC'de nitelikleri ve örnekleri içeren bir birleşik giriş kutusunun nasıl oluşturulacağını öğrendik. Öncelikle değerlerin listesini içeren bir açılan kutu oluşturduk ve seçilen değeri görüntüledik. Daha sonra, koşullu oluşturma yoluyla seçilen değere göre HTML şablonunu oluşturuyoruz. Son olarak mevcut Salesforce kayıtlarından açılan kutuya ilişkin seçeneklerin nasıl oluşturulacağını ve ilgili alanların kullanıcı arayüzünde nasıl görüntüleneceğini öğrendik.