Lightning Studio Uzantısı Tanıtımı
Lightning Studio, Salesforce LWC geliştirmeyi kolay ve hızlı bir şekilde oluşturur. Bu editör içerisinde doğrudan Apex/message kanallarını ve LWC scriptlerini oluşturabiliriz. Ayrıca, LWC (özel) bileşenlerini tek seferde doğrudan devreye alabiliriz. Bunu web sitemize nasıl ekleyeceğimizi ve açacağımızı görelim.
Web sitesine gidin ve “Lightning Studio – Chrome Ekle” ifadesini arayın (Chrome kullanıyorsanız). 'Chrome'a Ekle' düğmesini tıklayın.
Chrome'a eklendiğini görebiliriz. Şimdi devre dışı bırakıldı. Yalnızca Salesforce Org açılırsa etkinleştirilir.
Salesforce Org'da oturum açıldıktan sonra etkinleştirilir.
Uzantıya tıklayın.
Sola gidin ve yeni bir LWC bileşeni oluşturmak için kullanılan üçüncü simgeyi seçin.
- İlk olarak, bileşenin adını belirtmemiz gerekiyor.
- Salesforce'ta bileşen görünürlüğünü ayarlamak için 'isExposed' kullanılır. True olarak ayarlanmalıdır.
- Bileşenin yerleştirileceği hedefi belirlemek önemlidir. Birden fazla hedef seçilebilir.
- Bileşeni dağıtmak son adımdır (“Dağıt” seçeneğine tıklayın).
Örnek 1: Kayıt Sayfasına Ekleme
Bu senaryoda, 'Kayıta Eklendi' metnini görüntüleyen 'birinci Bileşen' LWC komut dosyasını oluşturuyoruz ve bu bileşeni 'Hesap Kaydı' sayfasına ekliyoruz. “FirstComponent.js-meta.xml” dosyasında ise hedefi Lightning__RecordPage olarak belirtmemiz gerekiyor.
Kod Yapısı:
ilk Bileşen.html
< şablon >< şimşek kartı değişken = 'Dar' başlık = 'Linux' >
< P >> Kayıt sayfasına eklendi P >
şimşek kartı >
şablon >
ilk Bileşen.js
içe aktarmak { Yıldırım Öğesi } itibaren 'şans' ;ihracat varsayılan sınıf FirstComponent, LightningElement öğesini genişletir {
}
firstComponent.js-meta.xml
< ?xml versiyon = '1.0' ? >< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< api Sürümü > 57.0 api Sürümü >
< açıkta > doğru açıkta >
< hedefler >
< hedef > yıldırım__Kayıt Sayfası hedef >
hedefler >
LightningComponentBundle >
Bileşen Ekleme:
Salesforce Org'a gidin ve Uygulama Başlatıcı altında 'Satış' uygulamasını arayın.
'Hesaplar' sekmesine giderek herhangi bir hesap kaydını açın. Dişli çark simgesine gidin ve 'Sayfayı Düzenle'yi seçin.
Şimdi sola gidin ve bileşeninizi arayın.
Bileşeni sürükleyin ve 'Öne Çıkanlar Paneli'nin altına yerleştirin.
'Etkinleştir'e tıklayın ve Org varsayılanı olarak atayın. Son olarak, kayıt sayfasını kaydedin.
Bitti. Şimdi, 'Satış' uygulama sayfasına geri dönün ve 'Hesap Kaydı'na (herhangi bir kayıt) gidin. Özel bileşenin eklendiğini görebilirsiniz.
Örnek 2: Ana Sayfaya Ekleme
“FirstComponent”i kullanalım. HTML dosyasındaki paragraf metnini 'Ana Sayfaya Eklendi' olarak değiştirin. “FirstComponent.js-meta.xml” dosyasında hedefi “lightning__HomePage” olarak belirtin.
ilk Bileşen.html
<şablon>< P > Ana sayfaya eklendi < / P >
< / yıldırım kartı>
< / şablon>
firstComponent.js-meta.xml
versiyon = '1.0' ?>< / hedefler>
< / LightningComponentBundle>
Bileşen Ekleme:
'Satış' uygulamasına gidin ve 'Ana Sayfa' sekmesine tıklayın.
Dişli çark simgesinin altında bulunan düzenleme sayfasına tıklayın. Bileşeni arayın ve 'Performans' bileşeninin üzerine yerleştirin. Sayfayı kaydedin.
'Satış Ana Sayfası' sekmesini yenileyin.
Bileşenimizin Ana sayfaya eklendiğini görebiliriz.
Örnek 3: Uygulama Sayfasına Ekleme
“FirstComponent”i kullanalım. HTML dosyasında paragraf metnini 'Uygulama sayfasına eklendi' olarak değiştirin. 'FirstComponent.js-meta.xml' dosyasında hedefi 'lightning__AppPage' olarak belirtin.
ilk Bileşen.html
< şablon >< şimşek kartı değişken = 'Dar' başlık = 'Linux' >
< P > Uygulama sayfasına eklendi P >
şimşek kartı >
şablon >
firstComponent.js-meta.xml
versiyon = '1.0' ?>< / hedefler>
< / LightningComponentBundle>
Bileşen Ekleme:
Öncelikle, Lightning App Builder'ı kullanarak Salesforce'ta bir Uygulama sayfası oluşturmamız gerekiyor. 'Hızlı Bul'da 'Lightning App Builder'ı arayın ve yeni bir Lightning sayfası oluşturmak için 'Yeni'ye tıklayın.
Uygulama sayfasını seçin ve 'İleri'ye gidin.
Etiketi “Linuxhint Uygulaması” olarak verin ve “İleri” ye gidin.
Şu an itibariyle, bileşeni yerleştirmek için yalnızca bir bölgeye ihtiyacımız var. Bu nedenle, 'Bir Bölge'yi seçin ve 'Bitti'yi tıklayın.
Şimdi “FirstComponent”i sayfaya sürükleyin ve sayfayı kaydedin.
Sayfanın etkinleştirilmesi gereken bir açılır pencere açılacaktır. 'Etkinleştir'e tıklayın.
Bundan sonra, uygulamaya bir sayfa eklemeniz gerekir. “YILDIRIM DENEYİMİ” sekmesine gidin ve bunu yapın. Bu aktivasyonu kaydedin.
Şimdi, Uygulama Başlatıcı'ya gidin ve 'Linuxhint Uygulaması'nı arayın. Uygulama sayfasına bileşenimizin eklendiğini görebilirsiniz.
Çözüm
Artık Uygulama sayfasına, Ana sayfaya ve Kayıt sayfasına LWC'yi nasıl ekleyeceğimizi anlayabiliyoruz. Tüm senaryolarda, daha iyi bir fikir edinmek için aynı örnekleri kullandık. “isExposed” ifadesinin doğru olduğundan emin olun. Aksi takdirde bileşen, Salesforce Org'da görünmez. Bu kılavuzun tamamında, kodu geliştirmek için Lightning Studio (Beta) editörünü kullandık. Bu kılavuzun başında bu düzenleyicinin nasıl indirileceği ve kullanılacağı ile ilgili tüm adımlar açıklanmaktadır.