List Card

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. 

 

 

 

Uyumluluk

 

 

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 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. 

 

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)

 

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.

 

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.

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. 

 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.

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: