Form sayfası içerisinde raporlama yapmak için kullanılan form araçlarından bir diğeridir. İstenilen bilgiler kart olarak kullanıcı ekranında görüntülenmektedir. Bir süreç içinde hareket ederken işi yönetmek için de List Card elemanı kullanılabilir. Bu görsel sistemin kullanılması için List Card aracının List Card Connected aracı ile birlikte kullanılması gerekmektedir.
| Araç Kutusundaki Görünümü | Free Formdaki Görünümü | Responsive Formdaki Görünümü |
| Bu form aracı yalnızca Free Formda kullanılmaktadır. |
Uyumluluk
| Free Form | Responsive Form | Mobile |
List Card form aracı beyaz tuvale sürüklenip bırakıldığında iki form elemanı ile birlikte gelmektedir. Bunlardan en geniş kapsayıcı olan List Card elemanıdır. Group Box ise List Card içerisinde yer alacak kartı/kartları temsil etmektedir.
Group Box form aracını incelemek için tıklayınız.
List Card form aracının özellikleri |
|
Type: Eklenilen form aracının alan türünü gösterir. Burada yer alan değer değiştirilemez. Name: Form içerisinde kullanılacak aksiyonlarda, alanın ismini temsil eder. Help Text: Client tarafında, eleman içine nasıl bir bilgi girileceği yönünde bilgilendirme metni yazılır. Height/Width: Form aracının yüksekliğini ve genişliğini düzenler(Genişlik alanı Responsive Formlardan kaldırılmıştır). SQL Query: List Card içerisinde görünecek olan değerler için sorgu yazılmalıdır. Sorgu alanı boş bırakıldığı takdirde List Card içerisinde herhangi bir veri görünmeyecektir. Fit Horizontal: Kullanıcının ekranında form aracını yatay olarak tam ekrana sığdırır. Pin Right: Form aracını sağa sabitler. Display: Form aracının Client ekranında görünmemesini sağlar. Paging: List Card alanında sayfalama özelliğinin açılması için kullanılan özelliktir. List Card içerisinde çok fazla değer yer alıyorsa bu alan 'Yes' olarak seçilir ve sayfalama özelliği eklenmiş olur. |
List Card içerisinde kullanılabilecek aksiyonlar
Form sayfasında her eklenen form elemanı için farklı aksiyonlar bulunmaktadır. List Card aracı için tanımlanmış olan aksiyonlar görüntülenmek istenirse öncelikle List Card elemanı seçimi yapılır, ardından aksiyon menüsü açılır.
List Card içerisinde kullanılabilecek aksiyonlar ve detayları aşağıdaki gibidir.
When the row selected(Kayıt seçildiğinde): List Card içerisinde seçilen karta göre bir işlem yapılacağı durumlarda kullanılan form aksiyonudur.
Record is Added(Kayıt Eklendi): List Card aracına yeni bir kart eklendiğinde çalışan aksiyondur.
| List Card içerisine gönderilen değerlerin Client ekranında gösterilmesi için dışarıdan bir aksiyonla tetiklenmesi gerekmektedir. Form sayfası açıldığında değer güncelle aksiyonu ile List Card alanını tetikleyebilirsiniz. |
Kullanım Örneği 1:
Bir form içerisinde kullanıcılarımızı gösterebileceğimiz tasarım oluşturalım. XPODA_CLIENT_USERS tablomuz kullanıcılarımızı kapsadığı için bu tablonun içinde bulunan istediğimiz bilgileri kart formatında gösterelim.
Bu örnek için öncelikle free form açalım ve formumuza List Card aracımızı ekleyelim. Liste Card aracı kullanıcılarımızı içerisinde yer alacak bilgiler XPODA_CLIENT_USERS bir tablodan geleceği için SQL Query alanına aşağıdaki sorgu yazılır.
Yazılan sorgu aşağıdaki gibidir.
SELECT
XPODA_CLIENT_USERS.UserID,
XPODA_CLIENT_USERS.UserFullName,
XPODA_CLIENT_USERS.UserEmail
FROM dbo.XPODA_CLIENT_USERS WITH (NOLOCK)
|
|
List Card form aracı dışarıdan tetiklenerek çalışan bir form aracıdır. Bu sebeple formumuza When the form is opened aksiyonu ekleyerek form açıldığında List Card aracını tetikleyelim. Aksiyonumuzun son görüntüsü aşağıdaki gibi olacaktır. |
Bu işlem sonrası öncelikle aksiyonu kaydedelim. Ardından form sayfasını kaydedip Run butonu ile Client ekranına gidelim. Form elemanının Client ekranında görünümü aşağıdaki gibi olacaktır.
Kartlar içerisinde gösterilmek istenen değerler Label aracı eklenerek kart içerisinde gösterilmektedir. Bu sebeple studio’ya geri dönelim. Öncelikle ListCard aracımızda bulunan küçük kutucuğa tıklayıp özellikler bölümünde bulunan Text alanına istediğimiz başlığı yazalım ve ardından Label alanlarını sürükle bırak yaparak kutucuğa ekleyelim.
Label alanlarını $P…$ formatında dolduralım. Bu format tablodan çekilen dinamik değerlerimizin gelmesini sağlayacaktır. Aşağıdaki görselde olduğu gibi alanlarımızı bu formata göre düzenleyelim.
|
|
Eğer sorgu içerisinde ALIAS kullanıldıysa ALIAS sonrası değer, yoksa alan ismi aynen yazılmalıdır. |
Düzenlemeler yapıldıktan sonra form sayfasını kaydedelim ve Run butonu ile client ekranına gidelim. List Card'ın Client ekranında görünümü aşağıdaki gibi olacaktır.
|
|
Süreç yönetimi List Card üzerinden yapılmak istenirse List Card Connected aracı ile birlikte kullanılması gerekmektedir. List Card Connected aracı için tıklayınız. |
Kullanım Örneği 2:
Bu örneğimizde bir firmanın ürünleri üretim durumlarını list card aracı ile gözlemleyeceğimiz bir fom yapalım. List Card aracımızın kullanımı için aşağıdaki görselde yeşil ile işaretlenmiş butona tıklayıp yeni bir form açalım.
Ardından gelen form seçim ekranından Responsive Form seçeneğini seçelim.
Bu form ürünlerimize ait verilerin kaydedileceği bir form olacaktır. Verilerimizin veri tabanına kayıt olması için bir tablosu olmalı. Bu sebeple formumuz açıldığında sağ tarafta bulunan özellikler alanından gerekli isimlendirmeleri yapalım. Aşağıdaki gibi isimlendirelim. Bu alanları oluşturduktan sonra artık form elemanlarını ekleyebiliriz.
Name: Products
Table Name: PRODUCTS
Type: Form
Ardından ürün detaylarını girmek adına formumuza aşağıdaki araçları ekleyelim:
Product Image için Picture aracı,
Product ID ve Product Name için Text Box aracı,
Category için DropDownBox aracı,
Price, Planned Quantity, Produced Quantity ve Num_5 alanları için Figures Box,
Son olarak da görsel bir görünüm sağlayabilmek adına Progress Bar aracını sürükleyip bırakalım. İsimlendirmeleri yaptıktan sonra aşağıdaki gibi bir görünüm oluşturalım.
Tablomuzda olmasını istediğimiz alanları yukarıdaki gibi hazırladıktan sonra alanları istediğimiz şekilde düzenleyip aksiyonlarımızı eklemeye başlayabiliriz.
Öncelikle DropDown Box aracımıza tıklayalım ve Field Type alanını Combo Box olarak seçelim. Field Style alanını veri tabanından çekmeyeceğimiz ve sabit değer yazacağımız için Constant Value olarak belirleyelim. Ardından Values alanına Drop Down aracımızda görünmesini istediğimiz seçenekleri aşağıdaki gibi ekleyelim.
Electronics
Clothing
Food
Home and Furniture
Sports and Outdoor
Category alanlarımızı belirledikten sonra Planned Quantity ve Produced Quantity alanlarına aksiyon ekleyelim. Bu aksiyon bu iki alan her değiştiğinde Num_5 olarak eklediğimiz numeric alana planlanan miktarın yüzde kaçının üretildiğini yazdırılacaktır. Bunun için öncelikle Planned Quantity alanını seçelim ve sağda bulunan özellikler bölümünden aksiyon sekmesine geçelim. Ardından alanları aşağıdaki gibi doldurup aksiyonun kendi kaydet butonuna tıklayarak aksiyonumuzu kaydedelim.
Type of action; On Value Change
Operation; Calculate From Fileds
Linked Field; Num_5
Calculate Grid; ('$PProducedQuantity$'*100)/'$PPlannedQuantity$'
Aksiyonumuzun son görüntüsü aşağıdaki gibi olacaktır:
Aynı işlemi Produced Quantity alanına da yapıp aynı aksiyonu orada da oluşturalım ve kaydedelim.
Num_5 aracımız tetiklendiğinde Progress Bar aracımızın da tetiklenmesini istediğimiz için bir aksiyon daha ekleyelim. Bu aksiyon için önce Num_5 aracımıza tıklayalım, sonra sağ tarafta bulunan aksiyonlar sekmesine girelim. Aksiyonu aşağıdaki gibi dolduralım ve kendi kaydet butonu ile kaydedelim.
Type of action; On Value Change
Operation; Update Value
Value Area; Progress_1
SQL Query; SELECT ‘$PNum_5$’
Ardından Num_5 alanının kullanıcılar tarafından görünmesini istemediğimiz için yetkilendirme yapalım. Bunun için öncelikle formumuzu seçelim ve sağ tarafta bulunan yetkilendirme sekmesine tıklayalım. Bu sekmedeki alanları aşağıdaki gibi dolduralım ve yetkilendirmeyi kendi kaydet butonu ile kaydedelim.
Type of Authority; Authority of Field
Action; It can not see fields
Fields; Lbl_10- (Lbl_10), Num_5 (Num_5 aracımızın her iki isimlendirmesini barındırmaktadır.)
Condition Type; Manually select users…
User Type; Those Selected
Users; Admin (Örneğimizde admin kullanıcısı için bu yetkilendirmeyi uyguladık. Fakat eğer bütün kullanıcılardan görünümü gizlemek isteniyorsa User Type alanını “All Users” seçmeliyiz.)
Formumuzu kaydet butonuna basıp run butonu ile çalıştırdığımızda karşımıza aşağıdaki gibi bir ekran açılacaktır.
Bu alana istediğimiz şekilde bilgiler girdikten sonra sağ alt taraftaki yeşil butona tıklayıp kaydedelim. Örnek bir kayıt aşağıdaki gibi olacaktır:
Şimdi List Card aracının listelenmesi adına bir form daha oluşturalım. Oluşturacağımız bu form Free Form şeklinde olmalıdır.
| ListCard aracı sadece Free Form’da çalışmaktadır. |
Bu formumuzun Type alanı Report olarak seçilmelidir. İsimlendirmeleri de aşağıdaki gibi yaptıktan sonra sol tarafta bulunan araçlarımızın arasından ListCard aracımızı formumuza sürükleyip bırakalım.
Name; ListCard_Report
Type; Report
Report Type; List
Display Name; ListCard Report
Sonraki aşamamız ilk oluşturduğumuz Products tablomuzda verilerimizin list card aracımızda görünmesini sağlamak. Bunun için Listcard aracımızın içerisinde bulunan GroupBox’a ilk formumuzdaki alanları sol taraftaki araç kutusundan sürükleyip bırakalım. Bu sefer formumuza ek olarak bir Picture aracı ve Button ekleyelim. Picture aracı bizim Icon’umuzu tuttuğumuz alan olacaktır. Button aracına ekleyeceğimiz aksiyon ile de ilgili kaydın detayına gitmeyi sağlayacağız.
| Verileri çekeceğimiz bir tablomuz olduğu için bu dinamik değerleri $P…$ formatıyla yazmamız gerekmektedir. |
Araçları sürükleyip bıraktıktan ve isimlendirmeleri yaptıktan sonraki son görünüm aşağıdaki gibi olacaktır.
Verilerin List Card aracımızın içerisine bulunmasını istediğimiz için List card aracımıza tıklayalım ve özellikler alanında bulunan SQL Query alanına ilk oluşturduğumuz tablomuza ait alanları içeren sorgumuzu yazalım. Bu sorgumuza ek olarak List card aracımıza farklı uzantılara sahip görsellerin de konulabileceği için Icon olarak eklediğimiz Picture aracına hangi koşulda hangi görselin ekleneceğini belirleyen bir case when yapısı ekledik. Bu yapımızda Num_5 alanı 45’ten büyük ve eşitse belirlediğimiz .gif uzantılı görseli, küçükse belirlediğimiz .png uzantılı görseli göstereceğiz. Sorgumuz aşağıdaki gibi olacaktır.
SELECT
PRODUCTS.UserTableID,
PRODUCTS.ProductID,
PRODUCTS.ProductName,
PRODUCTS.Category,
PRODUCTS.Price,
CONVERT (NVARCHAR(50), CreatedDate, 104) AS CreatedDate,
PRODUCTS.PlannedQuantity,
PRODUCTS.ProducedQuantity,
CASE WHEN Num_5<= 45 THEN 'https://cdn.pixabay.com/animation/2023/10/08/03/19/03-19-26-213_512.gif'
else 'https://cdn.pixabay.com/photo/2018/02/26/14/47/check-3183217_1280.png' END as Icon,
PRODUCTS.Product_Image,Num_5 as [Percent]
FROM
dbo.PRODUCTS WITH (NOLOCK)
Eklediğimiz butona aksiyon eklememiz gerekmektedir. Bunun için butona tıklayalım ve sağ taraftan aksiyon sekmesine geçelim. Aşağıdaki gibi alanları dolduralım ve aksiyonun kendi kaydet butonu ile kaydedelim.
Type of action; When clicked
Operation; Open Form- Detail
Condition; In New Tab
Module; ListCard
Form; Products
List ID Field; UserTableID
List Type Field; FormTypeID
Bütün verileri kaydettikten sonra formumuzu çalıştırmadan önce form açıldığında List Card aracına verilerin gelmesini istediğimiz için form açılışına List Card aracımızı tetikleyen bir aksiyon eklememiz gerekmektedir. Bunun için rapor formumuzu seçelim ve sağ taraftan aksiyonlar sekmesine geçelim. Aşağıdaki gibi alanları doldurup aksiyonun kendi kaydet butonu ile aksiyonumuzu kaydedelim.
Type of action; When the form is opened
Operation; Update Value
Value Area; ListCard_1
Son olarak uygulamamız kullanıma hazır olduğu için kaydet butonuna tıklayıp formumuzu kaydedelim ve run butonu ile client ekranına gidelim. Nihayetinde son görüntü aşağıdaki gibi olacaktır: