Form içinde tablolardan gelen veri/verileri listelemek için kullanılan araçtır.
|
Araç Kutusundaki Görünümü |
Free Formdaki Görünümü |
Responsive Formdaki Görünümü |
|
|
Uyumluluk
| Free Form | Responsive Form | Mobile |
|
Liste aracında picture alanına kaydedilen resimlerin yolu URL ile gösterilmek istenildiğinde alan adının başına $IMG ifadesi koyularak bu işlem gerçekleştirilebilir. |
Liste aracının içerisinde kullanabilecek aksiyonlar
Form sayfasında her eklenen form elemanı için farklı aksiyonlar bulunmaktadır. Liste aracı için tanımlanmış olan aksiyonları görüntülemek için öncelikle liste aracı seçilir ardından sağ panelde yer alan aksiyonlar menüsü açılır.
Liste aracı içerisinde kullanabilecek aksiyonlar ve detayları aşağıdaki gibidir.
When the row is selecter(Satır seçildiğinde): Satır değeri değişiklikleri işleyicisinde olduğu gibi bir "Eylem" atayın.
When double clicked on row(Satıra çift tıklandığında): Çift tıklama işleyicisi olarak bir "Eylem" atayın.
Detail is Opened(Ayrıntı açıldığında): Ayrıntı açma işleyicisinde olduğu gibi bir "Eylem" atayın.
Add button to row (Satıra buton eklendiğinde): Satıra buton ekleme işleyicisinde olduğu gibi bir "Eylem" atayın.
When cell value changes aksiyonu; Listede seçilen satırın, UserTableID, Kolon Adı ve Hücre değerlerinin gösterilmesini sağlar.
Örnek Kullanımı 1:
| Liste aracını kullanmak için bir güncelleme değeri gereklidir. Bu işlem bir düğme üzerinde; bir alanı tıkladı; değer veya istediğimiz form değiştiğinde; Form açıldığında ekleyebiliriz. Listedeki değerleri işlem olarak görüntülemek için değer güncelleme işlemini seçmemiz gerekiyor. İşlemin güncellenmesi için değer alanı olarak liste seçilmelidir. İşlemin özelliklerini seçip kaydettikten sonra, form açıldığında liste görüntülenecektir. |
- Bu işlemi bir buton ekleyerek butona tıklandığında liste güncellenecek şekilde yapalım:
Örnek Kullanımı 2:
SQL sihirbazını kullanarak bir sorgu oluşturalım ve XP_TEST tablomuzdan Month(Ay) ve Profit(Kar) bilgilerimizi listeleyelim. Burada “UserTableID” Listede görünmüyor.
| Listede " UserTableID " görmek istiyorsanız bir takma ad vermeniz gerekir. |
Örnek Kullanımı 3:
Kriterlere göre renk vermek istiyorsanız Color Style(Renk Stili) özelliğini kullanmalısınız. Burada renklendirme bilgileri şu şekilde; Color Style(Alan|Criteria|Value|Type|Colors|Cell(0-1). Cell den sonra |Renklendirilecek Alan bilgisi eklenmesi gerekiyor.
|
Eğer Listenin başlıklarının isimlerinde boşluk varsa bu alanlar renklendirmede birleşik yazılmalı. |
Örnek Kullanımı 3:
Fare ile tıklanan değerin sütun adını eklediğimiz alana yazdırmak için listenin aksiyonları bölümüne When row is selected aksiyonunu ekliyoruz. Yeni eklediğimiz alanın değerini güncellemek için SQL sorgusu alanına SELECT '$PXpodaGridActiveColName$' yazıyoruz. Bu ismi dilerseniz : (iki noktaya tıklayarak seçim alanından belirleyebilirsiniz.
- Farklı bir kullanım olarak seçilen hücrenin sütun başlığını almak yerine hücre içerisindeki değer bilgisi de alınabilir.
Bu örnek için az önce yapmış olduğumuz örneği biraz değiştirelim.
Az önce SELECT ile sorguladığımız '$PXpodaGridActiveColName$' değerinin tırnaklarını ve sonundaki $ işaretini kaldırarak seçtiğimiz satır ve sütunlardaki değeri bir Textbox nesnesine yazdırabiliriz.
| NOT: Bu örnekte liste sorgunuzdaki alanların isimlerine ALİAS verilmemesi, alan isimlerinin aynen kullanılması gerekmektedir. |
Örnek Kullanımı 4:
|
Listemize buton eklemek için iki farklı yöntem bulunmaktadır. |
-
Formumuzda kullandığımız butonun listede çıkmasını istiyorsak ya da listede görünmesini istediğimiz bir buton varsa öncelikle forma buton ekliyoruz. Butonumuzun özellik sekmesine geçerek "Linked List" alanına butonumuzun görünmesini istediğimiz listeyi seçelim. Bu buton seçtiğimiz listede her satırda görüntülenecektir. Aynı kullanımı Button Group elemanında da uygulayabiliriz.
- Listemizde bulunan satırlara buton eklemek için listenin aksiyonları bölümüne Add button to row aksiyonunu ekliyoruz. Operation kısmına istediğimiz aksiyonu ekleyebiliriz. Bu aksiyonla listede bulunan her satıra buton eklemektedir.
|
Bu aksiyon kullanımında Decription alanı Client ekranında butonumuzun görünmesini istediğimiz şekilde isimlendirdiğimiz alandır. Bu alan boş bırakıldığında client ekranında sağlıklı bir görünüm oluşmamaktadır. |
- Delete Aksiyonunu eklediğimiz örnek bir gösterim
| Konuyla ilgili örnek video : Listede Buton Kullanımı | |
Liste'de Kolon Ölçeklendirmesi Özelliği
Eğer listemizde bulunan bir kolonu ölçeklendirmek istiyorsak FileName as 'FileName [W#=200#]' formatını kullanarak verilen piksel kadar uzayacaktır. Aşağıda bununla ilgili bir örnek kullanım bulunmaktadır.
Öncelikle formumuza bir liste ekleyelim ve listemize sorgumuzu yazalım. Ardından form açıldığında liste sorgumuzun çalışması için When the form is opened / Update Value > GridList_1 aksiyon seçimi yapıp aksiyonumuzu kendi alanından kaydedelim. En sonunda formumuzu kaydedip Run yaptığımızda listemizin görüntüsü aşağıdaki gibi olacaktır.
Client Görünümü
Örnek kullanımı sağlamak için tekrar studio alanına dönelim ve listemizde bulunan SQL Query alanındaki sorgumuzda istediğimiz alana 'FileName [W#=20#]' formatında bir örnek sorgu yazalım ve kaydedip Run ile projemize gidelim.
Listemizin son görünümü aşağıdaki gibi olacaktır. Adi alanını ölçeklendirdiğimiz gibi görünmektedir.
Client Görünümü
Clientta liste içinde seçilen hücrenin editleme özelliği
Free form özellikli form oluşturalım ve formun Table Name alanından tablo adı verelim. Tabloda yapılan her değişikliğin kaydının önlenmesi için form geliştirmesi tamamlanıp son haline ulaşana kadar Type alanından Report seçilmelidir. Form tamamlandığında Type alanını değiştirilip Form seçimiyle form kaydedildiğinde tablosu oluşacaktır.
Kırmızı renklendirilmiş formun adının olduğu ve seçildiğinde formun kendisiyle alakalı işlemler yapılabilir. Yeşil renklendirmiş alandan formun özellikleri görülür. Mavi renklendirilmiş alandan da formun aksiyonlarına ulaşılır.
Örneğimizde formumuza 2 tane text box ve 1 tane Figures Box alan sürükleyip bırakalım ve iki araca da isimlendirme yapalım. Bir Text Box aracına Adi, diğerine de Aciklama yazalım ve Figures Box aracını da Miktar olarak isimlendirelim.
Ardından formumuza bir buton ekleyelim ve Kaydet olarak isimlendirip aksiyon ekleyelim. Kaydetme işlemini yapması adına bir buton ekleyelim ve isimlendirmeyi yaptıktan sonra aksiyonlardan When clicked / Save iklisini seçerek aksiyonu kaydedelim. Aksiyonumuzun son görüntüsü aşağıdaki gibi olacaktır.
Not: Aksiyon hemen altındaki kaydet butonuyla kaydedilmelidir. Sadece formun kaydet butonu kullanılması aksiyonun kaydedilmesini sağlamaz.
Sonraki aşamada liste aracımızı seçelim ve SQL Query alanına aşağıdaki sorguyu yazalım. Sorguyu yazdıktan sonra listemizin ekran görüntüsü aşağıdaki gibi olacaktır.
SELECT
UserTableID,
Adi,
Miktar AS [$Miktar],
Aciklama AS [$Aciklama]
FROM XPD_LISTE_TEST WITH (NOLOCK)
Liste seçilir ve liste sorgusu Sql server alanına yazılır. Client açıldığında listeye kayıtlı olan veri içinde değişiklik yapılacak hücreyi seçebilmek için kullanılan Allias’ın başına $ işareti konulmalıdır.
Örneğimizde kullandığımız sorguda Miktar AS [$Miktar],Aciklama AS [$Aciklama] alanlarına bu kural uygulanmıştır.
Client ekranına gitmeden önce form aksiyonlarına gidip form açıldığında listemize verilen yüklenmesi için bir aksiyon tanımlamalıyız. Bunun için Formumuzu seçip aksiyon sekmesine geçtikten sonra Add New Action diyelim ve When the form is opened / Update Value ikilisini kullanalım. Ardından Value Area alanında listemizi seçelim ve aksiyonumuzu kaydedelim. Aksiyonumuzun ekran görüntüsü aşağıdaki gibi olacaktır.
Form özelliklerine geri dönüp Type alanını Form seçelim ve böylece tablomuzun hatasız bir şekilde oluşmasını sağlayalım. Formumuzu kaydedelim ve Run butonuna gidip Client ekranına gidelim. Formumuzun son görüntüsü aşağıdaki gibi olacaktır.
Formumuzu kaydedelim ve Run butonuna gidip Client ekranına gidelim. Formumuzun son görüntüsü aşağıdaki gibi olacaktır.
Adı, Miktar ve Açıklama alanları doldurulup kayıtlar oluşturulduktan sonra, liste SQL sorgusu içinde $ işareti kullanılan alanların hücreleri tıklandığında hücre aktif olur ve editlenebilir.
When cell value changes aksiyonu örnek kullanımı: Listede seçilen satırın, UserTableID, Kolon Adı ve Hücre değerlerinin gösterilmesini sağlar.
Önceki örnek formumuza 1 tane Figures Box ve 2 tane Text Box sürükleyip bırakalım ve isimlendirelim. Figures Box alanını UserTableID değeri basılmasını istediğimiz için SatırID olarak, Text Box alanlarını seçilen kaydın kolon adı gösterileceği için ChangeColName ve seçilen kaydın hücre değeri gösterileceği için ChangeValue olarak isimlendirelim.
Not: Aksiyon sorgusunda da aynı isim verilmiştir ama aynı isim kullanılması zorunlu değildir.
Sonraki aşamada liste aracını seçelim ve aksiyon ekleyelim. Aksiyonumuz When cell value changes / Create New Data Object ikilisini kullanalım. Object Name alanına oluşacak object nesnesine isim verilir. Bu örneğimizde Hücre Bilgisi olarak isimlendirelim.
SQL Query alanına aşağıdaki SQL sorgusunu yazalım. (Sorgu yazımında tırnak içindeki alanları kendiniz yazabildiğiniz gibi “:” işaretini yazıp çıkan listeden seçebilirsiniz. Ardından isteğe bağlı alias kullanabilirsiniz. )
SELECT
'$PUserTableID$' AS ID,
'$PXpodaGridChangeValue$' AS ChangeValue,
'$PXpodaGridChangeColName$' AS ChangeColName
Aksiyonumuzun ekran görüntüsü aşağıdaki gibi olacaktır. Ardından aksiyon hemen altındaki kaydet butonuyla kaydedilir.
Sırayla SatırID, ChangeColName ve ChangeValue alanları seçelim ve yukarıdaki görselde kırmızı işaretlenmiş alandan; Linked Object alanı açılır kutusunda aksiyonda Object Name alanındaki isimle görünen nesneyi seçelim.
Linked Object Field alanı açılır kutusunda aksiyon SQL sorgusu içinde verilen alan isimlerinden seçim yaparak eşleştirelim.
Örneğimizdeki eşleştirmeler şöyledir:
SatırID=ID
ChangeColName= ChangeColName
ChangeValue= ChangeValue
Sonrasında form kaydedilir ve run butonuyla client ekranına gidilir.
Değişiklik yapılabilecek (Liste sorgusunda içinde allias’ına $ işareti verilen) hücre seçelim. Hücrede değişiklik yapılıp klavyeden enter tuşuna veya mouse ile ekrandan boş bir yere dokunulduğunda değişiklik yapılan hücrenin UserTableID (SatırID alanı içinde), Kolon Adı (ChangeColName alanı içinde) ve Hücre Değerleri (ChangeValue alanı içinde) ilgili alanlarda gösterilir.
Liste Template Özelliği
Free form ve form type özelliği report olan bir form açalım ve forma List aracını sürükleyelim. List elemanının sağ üst köşesindeki Add Customization seçildiğinde template tuvali açılacaktır. Template alanı açıldıktan sonra sol alt köşede template elemanları görülmektedir. (Aşağıdaki ekran görüntüsündeki elemanlar)
|
|
Listede her bir template elemanı için Add Customization yapılarak, yeni template eklenerek uygulanmalıdır. |
Label Template Elemanı;
SQL Query alanına listede gösterilecek SQL sorgusu yazalım. Örneğimizde aşağıda paylaşılan sorgu kullanılmıştır. SQL sorgusunda Personel alanında template uygulanacaktır.
SELECT
UserID,
UserFullName,
'50' AS Progress,
'4' AS Rating,
'' AS Personel,
UserImage AS UserImage
FROM dbo.XPODA_CLIENT_USERS WITH (NOLOCK)
Sonrasında List elemanının sağ üst köşesindeki Add Customization seçelim ve Label elemanını template alanına sürükleyip bırakalım.
Örnek olarak kullanılan liste SQL sorgumuzun içindeki Personel alanı kolonu template uygulamamız için seçilmiştir. Template alanı içine $Pxxxx$ şeklinde gösterilecek alanın adı yazılır. (Örneğimizde Lbl_2 de gösterilmek için $PUserID$ ve Lbl_1 de gösterilmek içinde $PUserFullName$ şeklinde yazılmıştır). Sorguda alias kullanılmışsa bu yapının içine alias değerleri yazılmalıdır.
Ardından Label için eklenen Template seçelim. (Yukarıdaki ekran görüntüsünün solundaki yeşil işaretli alandan). Template özelliklerinden Column Name alanına liste SQL sorgusu içinde uygulanacak alanın adı yazılmalıdır. Eğer alias kullanıldıysa alias adı buraya yazılmalıdır. Örneğimizde yukarıda paylaşılan görselin sağ tarafında yeşil renklendirilmiş Column Name alanına Personel yazılmıştır.
Client ekranı açıldığında listenin tetiklenmesi ve listeye kayıtlı verilerin gelmesi için aksiyon eklenmesi unutulmamalıdır. Formun kendisine veya formdaki butona bu aksiyon eklenebilir.
Formun aksiyonu için; Formu seçip sağ kısımdaki özellikler alanından Aksiyon sekmesini seçelim. Add New Action butonuna tıklandıktan sonra aşağıdaki gibi düzenleyelim ve aksiyonu kaydedelim.
Type of action; When the form is opened
Action; Update Value
Value Area; GridListe_X (Güncellenmesi istenilen liste)
Butona aksiyon için; Butonu seçip sağ kısımdaki özellikler alanından Aksiyon sekmesini seçelim. Add New Action butonuna tıkladıktan sonra aşağıdaki gibi düzenleyelim ve aksiyonu kaydedelim.
Type of action; When clicked
Action; Update Value
Value Area; GridListe_X (Güncellenmesi istenilen liste)
Formu kaydedelim ve run butonuyla client ekranına gidelim. Aşağıdaki paylaşılan client ekranında Personel kolonunda çalışır hali görülmektedir.
Picture Template Elemanı;
SQL Query alanına listede gösterilecek SQL sorgusu yazılır. Örneğimizde aşağıdaki sorgu kullanılmıştır. SQL sorgusunda UserImage alanında template uygulanacaktır.
SELECT
UserID AS ID,
UserFullName AS [Adı Soyadı],
UserImage AS UserImage
FROM dbo.XPODA_CLIENT_USERS WITH (NOLOCK)
Sonrasında List elemanının sağ üst köşesindeki Add Customization seçilir.
Picture template elemanı seçilir ve template tuvaline sürüklenip bırakılır. Örnek olarak kullanılan liste SQL sorgusu içindeki UserImage alanı kolonu uygulama için seçilmiştir. Template alanı içine $Pxxxx şeklinde gösterilecek alanın adı yazılır. Örneğimizde $PUserImage yazılmıştır. Alias kullanılmışsa kullanılan alias yazılmalıdır.
Picture için eklenen Template seçilir. (Yukarıdaki ekran görselindeki kırmızı işaretli alandan). Template özelliklerinden Column Name alanına liste sql sorgusu içinde uygulanacak alanın adını yazalım. Örneğimizde $PUserImage yazılmıştır. Alias kullanılmışsa kullanılan alias yazılmalıdır.
Formu kaydedip run butonuyla client ekranına gidelim. Aşağıdaki paylaşılan client ekranında UserImage kolonunda çalışır hali görülmektedir.
Progress_1 Template Elemanı;
SQL Query alanına listede gösterilecek SQL sorgusu yazılır. Aşağıdaki sorguyu bu alana yazalım. Sorgumuzdaki Progress alanında template uygulanacaktır.
SELECT
UserID AS ID,
UserFullName AS [Adı Soyadı],
'50' AS Progress,
UserImage AS UserImage
FROM dbo.XPODA_CLIENT_USERS WITH (NOLOCK)
Sorguyu yazdıktan sonra List aracının sağ üst köşesindeki Add Customization seçelim ve template ekranı açalım. Ardından Progress Bar aracını template alanına sürükleyip bırakalım.
Template alanı içine $Pxxxx şeklinde gösterilecek alanın adı yazılır. Kullandığımız listedeki SQL sorgusundaki Progress kolonunu uygulama için seçtiğimiz için $PProgress yazalım. Sorguda alias kullanıldıysa bu alana alias yazılmalıdır.
Progress Bar template elemanı için eklenen Template alanını yukarıdaki ekran görüntüsünün sol tarafındaki kırmızı alandan seçelim ve sağ taraftaki kırmızı alanda bulunan Column Name alanına SQL sorgumuzda kullandığımız isimlendirmeyi yazalım. Bizim sorgumuzda Progress yazdığı için o alana bunu yazacağız.
Son olarak formu kaydedelim ve run butonyla client ekranına gidelim. Aşağıdaki paylaşılan client ekranında Progress kolonunda çalışır hali görülmektedir.
Circular Progress Bar Template elemanı;
SQL Query alanına listede gösterilecek SQL sorgusu yazılmalıdır. Bu örneğimizde aşağıdaki sorguyu bu alana yazalım. SQL sorgusundaki Puan alanına template uygulanacaktır.
SELECT
1 AS ID,
'A Stok' AS [Adi],
41 AS [Puan],
20 AS [Miktar]
UNION ALL
SELECT
2,
'B Stok',
6,50
Sonrasında List elemanının sağ üst köşesindeki Add Customization butonuna tıklayalım.
Circular Progress Bar template elemanını seçip template alanına sürükleyerek bırakalım. Template alanı içine $Pxxxx şeklinde gösterilecek alanın adı yazılır. Bu örneğimizde sorgumuzda kullanılan şekilde $PPuan yazacağız.
Örneğimizde Circular Progress Bar template elemanı için eklenen Template seçilir. Template özelliklerinden Column Name alanına liste sql sorgusu içinde uygulanacak alanın adını yazalım. Alias kullanıldıysa alias adı buraya yazılır. Bizim örneğimizde sorgumuzda Puan olarak yazıldığı için bu alana Puan yazalım.
Son olarak formu kaydedelim ve run butonyla client ekranına gidelim.
Rating Template elemanı;
SQL Query alanına listede gösterilecek SQL sorgusu yazılır. Aşağıdaki sorguyu bu alana yazalım. Sorgumuzdaki Rating alanında template uygulanacaktır.
SELECT
UserID AS ID,
UserFullName AS [Adı Soyadı],
'50' AS Progress,
'4' AS Rating,
UserImage AS UserImage
FROM dbo.XPODA_CLIENT_USERS WITH (NOLOCK)
Sonrasında List elemanının sağ üst köşesindeki Add Customization butonuna tıklayalım.
Rating template elemanını seçip template alanına sürükleyerek bırakalım. Template alanı içine $Pxxxx şeklinde gösterilecek alanın adı yazılır. Bu örneğimizde sorgumuzda kullanılan şekilde $PRating yazacağız.
Örneğimizde Rating template elemanı için eklenen Template seçilir. Template özelliklerinden Column Name alanına liste SQL sorgusu içinde uygulanacak alanın adını yazalım. Alias kullanıldıysa alias adı buraya yazılır. Bizim örneğimizde sorgumuzda Rating olarak yazıldığı için bu alana Rating yazalım.
Son olarak formu kaydedelim ve run butonyla client ekranına gidelim.
Javascript Koduyla Template Oluşturma;
Listede Javascript koduyla da template oluşturulabiliriz. Bu örneğimizde Quality Score alanına yazılan Javascript koduyla birlikte kayıt QualityScore’a verilen değerden büyükse Good, küçükse Progress sonucuyla listede gösterilmesi istenilmiştir.
SQL Server alanına listede gösterilecek SQL sorgusu yazılmalıdır. Aşağıdaki sorguyu bu alana yazalım. Sorgumuzda bulunan QualityScore alanında template uygulanacaktır.
SELECT 1 AS ID,'A Stok' AS [Adi],41 AS [Puan], 20 AS [Miktar], 60 AS QualityScore
UNION ALL
SELECT 2,'B Stok',6,50,0
Sonrasında List elemanının sağ üst köşesindeki Add Customization butonunu seçelim.
Template alanı boş tutulur. (Yukarıda paylaşılan örnekte ölçeklendirme yapılmıştır). Template’in özellikler kısmında Column Name alanına liste sorgusunda gösterilecek alan adı yazılır. Alias kullanıldıysa kullanılan alias yazılır. Bizim örneğimizde bu alana QualityScore yazılacaktır.
Template alanına aşağıdaki Javascript kodunu yazalım:
#if(QualityScore > 5 )
{#
<span style=" padding: 10px 20px; display: inline-block; font-size: 14px; background: rgb(255 0 0 / 77%); color: rgb(255 255 255); border-radius: 20px;"> Good </span>
#}else{#
<span style=" padding: 10px 20px; display: inline-block; font-size: 14px; background: rgb(55 116 0 / 77%); color: rgb(255 255 255); border-radius: 20px;"> Progress </span>
# }#
Quality Score 5’in üzerindeyse Good, altında bir değeri varsa Progress sonucuyla Quality Score kolonunda görülecektir.
Formu kaydedip run butonu ile client ekranına gidelim. Aşağıdaki paylaşılan client ekranında template’in QualityScore kolonunda çalışır hali görülmektedir.
Client ekranı açıldığında listenin tetiklenmesi ve listeye datanın gelmesi için aksiyon eklenmesi unutulmamalıdır. Formun kendisine veya formdaki butona bu aksiyon eklenebilir.
Formun aksiyonu için; Formu seçip sağ kısımdaki özellikler alanından Aksiyon sekmesini seçelim. Add New Action butonuna tıklandıktan sonra aşağıdaki gibi düzenleyelim ve aksiyonu kaydedelim.
Type of action; When the form is opened
Action; Update Value
Value Area; GridListe_X (Güncellenmesi istenilen liste)
Butona aksiyon için; Butonu seçip sağ kısımdaki özellikler alanından Aksiyon sekmesini seçelim. Add New Action butonuna tıkladıktan sonra aşağıdaki gibi düzenleyelim ve aksiyonu kaydedelim.
Type of action; When clicked
Action; Update Value
Value Area; GridListe_X (Güncellenmesi istenilen liste)