Xpoda platformunda oluşturulan raporların tek bir dashboard üzerinde toplanarak görselleştirilmesini sağlar. Bu form aracı, raporlama dashboard'ları için daha verimli bir kullanım sunmaktadı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 |
Özellikleri
Type (Alan Türü): Eklenen form aracının alan türünü gösterir. Burada yer alan değer değiştirilemez.
Name (Alan İsmi): Eklenen form aracına bir isim verilir. Form içerisinde kullanılacak aksiyonlarda, Tile Layout alan ismi olarak burada tanımlanan alan ismi kullanılır.
Rows Height (Satır Yüksekliği): Form aracı içerisinde, her bir satırda yer alacak sütunun yüksekliğini belirler.
Columns Width (Sütun Genişliği): Form aracı içerisinde, her bir satırda yer alacak sütunun genişliğini belirler.
Help Text (Yardım Metni): Client ekranında, Tile Layout form aracının üzerine fare ile gelindiğinde gösterilmesi istenen bilgilendirme metni yazılır.
Height / Width (Yükseklik / Genişlik): Form aracının yüksekliği ve genişliği ayarlanır.
From Left / Top: Form aracının soldan ve üstten konumu ayarlanır.
Fit Horizontal (Yatay Olarak Sığdır): Client ekranında, form aracını yatay olarak tam ekrana sığdırır.
Display (Görüntüleme): Form aracının client ekranında görünüm durumu bu alandan ayarlanır. (Yes à Görünür / No à Görünmez)
Column Count (Sütun Sayısı): Form aracı içerisinde, her bir satırda yer alacak sütun sayısını belirtir.
Örnek Kullanım 1:
Öncelikle Free Form özelliğine sahip yeni bir form açalım. Bu işlem için aşağıdaki resimde kırmızı çerçeve ile işaretlenmiş, New Form ikonuna tıklayalım.
Açılan pencereden Free Form seçeneğini seçelim.
Free Form seçildiğinde Form_1 isminde yeni bir form ekranı oluşacaktır.
Fom_1 isimli formu seçelim, ardından ekranın sağ tarafında bulunan form özelliklerini aşağıdaki gibi düzenleyelim.
1 numara ile gösterilen Properties alanını seçelim. Ardından 2 numara ile gösterilen Type alanından Report seçeneğini seçelim.
Formların Type özelliği ‘Form’ olarak seçildiğinde, Table Name özelliğinde yazılı isim ile SQL içinde bulunan XPODA veri tabanı altında yeni bir tablo oluşturulur. Eğer tablo oluşturulması istenmiyorsa, ilgili formun Type özelliği 'Report' olarak seçilmelidir.
Oluşturduğumuz form, Free Form ve Report özellikleriyle açılmıştır.
1 numara ile gösterilen alandan Tile Layout form aracını sürükleyip formumuza bırakalım ve aracın yükseklik ile genişliğini arttıralım. Bu işlem sonrasında, 2 numarayla gösterildiği gibi Tile Layout form aracı formumuza eklenmiş olacaktır.
| Tile Layout aracı içerisine, aynı veya farklı modüllerde bulunan formlar eklenebilir. |
| Tile Layout aracı içerisine eklenecek formların, Responsive Form tasarımıyla oluşturulması önerilmektedir. |
Bu örnekte, daha önce Responsive Form tasarımıyla oluşturulmuş olan Sales Stock Chart, Sales Company Chart, Sales Sector Chart ve Sales List isimli formları, Tile Layout aracı içerisine ekleyeceğiz.
Formlar, Tile Layout içerisine aşağıdaki görselde gösterildiği şekilde eklenecektir.
Bunun için gerekli ayarlamaları yapalım.
Tile Layout aracını seçelim. Ardından özellikler bölümünde yer alan Rows Height, Columns Width ve Column Count alanlarının değerlerini aşağıdaki resimde gösterildiği şekilde ayarlayalım.
Ayrıca, Client ekranında Tile Layout form aracının yatay olarak tam ekrana sığması için, Fit Horizontal alanını Yes olarak ayarlayalım.
Tile Layout aracının içeriği üç sütundan oluşacak şekilde düzenlenecek; her bir sütunun yüksekliği 300, genişliği ise 550 piksel olacaktır.
| Tile Layout aracına eklenecek her form için Add Widget seçeneğine tıklanarak yeni bir Template ekranı oluşturulmalı ve bu Template ekranı içerisinde eklenmek istenen form seçilmelidir. |
Template Kullanımı
Tile Layout form aracına Template eklemek için öncelikle Tile Layout form aracı seçilmeli, ardından Tile Layout üzerindeki Add Widget seçeneğine tıklanmalıdır.
Ekranın sol tarafında, Tile Layout form aracının altında Template ekranı eklenmiş olarak görüntülenecek ve ekranın sağ tarafında, bu Template ekranı için özellikler bölümü karşımıza çıkacaktır.
Eklenen Template’ in Özellikleri
Type (Alan Türü): Eklenen Template’in alan türünü gösterir. Burada yer alan değer değiştirilemez.
Name (Alan İsmi): Eklenen Template’e bir isim verilir.
Header (Başlık): Tile Layout aracı içinde, eklenen Template’in hangi sütun ismi ile gösterileceği bu alanda belirlenir.
İlgili Template’in görsel düzeni içerisinde sütun ismi girilerek, verinin doğru şekilde etiketlenmesi ve ekran üzerinde doğru bir şekilde görüntülenmesi sağlanır. Bu işlem, daha düzenli ve anlaşılır bir veri görünümü elde edilmesine olanak tanır.
Rows Span (Satır Aralığı): Eklenen Template’in, Tile Layout aracında kaç satır yer kaplayacağı bu alanda belirtilir.
Bu değer, Template’in görsel yapısını belirleyerek, Tile Layout aracındaki alanların daha verimli kullanılmasına olanak tanır ve düzen açısından uyumlu bir görüntü oluşturulmasına yardımcı olur.
Column Span (Sütun Aralığı): Eklenen Template’in, Tile Layout aracında kaç sütun yer kaplayacağı bu alanda belirtilir.
Bu değer, Template’in görsel yapısını belirleyerek, Tile Layout aracındaki alanların daha verimli kullanılmasına olanak tanır ve düzen açısından uyumlu bir görüntü oluşturulmasına yardımcı olur.
Help Text (Yardım Metni): Client ekranında, eklenen Template’in üzerine fare ile gelindiğinde gösterilmesi istenen bilgilendirme metni yazılır.
Help Text özelliği şu an istenilen işlemi tam olarak yerine getirememektedir. Yeni sürümlerde, bu özellik üzerinde iyileştirme çalışmaları yapılacaktır.
Height / Width (Yükseklik / Genişlik): Eklenen Template’in yüksekliği ve genişliği ayarlanır.
Template’in yükseklik ve genişlik ayarı, Tile Layout aracının özellikler bölümünde bulunan Rows Height ve Columns Width alanlarından yapıldığı için bu kısım şu an istenilen işlemi tam olarak yerine getirememektedir. Yeni sürümlerde, bu özellik üzerinde iyileştirme çalışmaları yapılacaktır.
From Left / Top: Eklenen Template’in soldan ve üstten konumu ayarlanır.
From Left / Top özelliği şu an istenilen işlemi tam olarak yerine getirememektedir. Yeni sürümlerde, bu özellik üzerinde iyileştirme çalışmaları yapılacaktır.
Order (Sıra): Eklenen Template’in, Tile Layout aracı içinde hangi sütun sırasıyla gösterileceği, bu alanda belirlenir.
Order özelliği şu an istenilen sıralama fonksiyonunu tam olarak yerine getirememektedir. Yeni sürümlerde, bu özellik üzerinde iyileştirme çalışmaları yapılacaktır.
Bu aşamada, Order değerinin -1 olarak bırakılması önerilmektedir. Bu değer, şimdilik en uygun seçenek olup, ilerleyen güncellemelerle birlikte daha fonksiyonel bir çözüm sağlanacaktır.
Display (Görüntüleme): Eklenen Template’in client ekranında görünüm durumu bu alandan ayarlanır. (Yes à Görünür / No à Görünmez)
Module: Tile Layout aracına eklenmek istenen form veya rapor ekranının yer aldığı proje, bu alanda seçilir.
Form: Tile Layout aracına eklenmek istenen form veya rapor ekranı, bu alanda seçilir.
Sub Form Mapping (Alt Form Eşleme): Üst kısımda bulunan form alanından seçilen form veya raporun, alan eşleştirmelerinin yapıldığı bölümdür.
Sub Form Mapping özelliği şu an istenilen eşleştirme işlemini tam olarak yerine getirememektedir. Yeni sürümlerde, bu özellik üzerinde iyileştirme çalışmaları yapılacaktır.
- Field (Alan): Üst kısımda bulunan form alanından seçilen form veya raporun, içinde yer alan form elemanları field bölümünde görüntülenir.
- Type: Eşleştirme yapılmak istenen satırda, Field alanındaki ilgili form alanı ile hangi tür eşleştirme yapılacağı bu alanda seçilir.
Üç farklı eşleştirme türü bulunmaktadır: Form Field (Form Alanı), Constant Value (Sabit Değer) ve SQL Query (SQL Sorgusu).
- Value (Değer): Eşleştirme yapılmak istenen satır için, eşleştirme yapılacak değer bu alanda seçilir.
Üst kısımda bulunan type alanında Form Field seçeneği seçildiğinde, ilgili form içerisindeki bir alan seçilerek eşleştirme yapılabilir.
Type alanında Constant Value seçeneği seçildiğinde, manuel olarak sabit bir değer girilerek eşleştirme yapılabilir.
Type alanında SQL Query seçeneği seçildiğinde, istenilen SQL sorgusu bu alana yazılarak eşleştirme yapılabilir.
Template Alanı ve Form Ekranı Arasında Geçiş İşlemi
| Template, sol tarafta Tile Layout form aracının altına eklenmektedir. Form ekranından Template ekranına geçiş yapmak için, 1 numara ile gösterilen Tile Layout form aracının sol tarafındaki sembole tıklanmalıdır. Bu işlem sonrasında, 2 numara ile gösterilen Template_1 alanı görüntülenecektir. Template_1 alanına çift tıklanarak Template alanına geçiş yapılabilir. |
| Template alanından form ekranına geçiş yapmak için, sol taraftaki ilgili forma çift tıklanmalıdır. Bu örnekte, Form_1 alanına çift tıklanarak Template alanından form ekranına geçiş yapılabilir. |
Template_1 isimle Template’i seçelim.
Ardından özellikler bölümündeki Name alanından Template’e yeni bir isim verelim.
Header alanına Template için uygun bir başlık yazalım.
Eklediğimiz Template’in Tile Layout aracında, 1 satır ve 1 sütunluk bir yer kaplamasını istediğimiz için Rows ve Column Span alanlarına 1 değerini girelim.
Son olarak, Module ve Form alanlarından, Tile Layout aracında görüntülenmesini istediğimiz formu seçelim.
Tile Layout aracına Sales Company Chart formunu eklemek için öncelikle yeni bir Temlate ekleyelim.
Bunun için, Tile Layout form aracını seçelim.
Ardından, Tile Layout üzerindeki Add Widget seçeneğine tıklayalım.
Bu işlemle birlikte, Template_2 adıyla yeni bir Template oluşturulacaktır.
Template_2 isimle Template’i seçelim.
Ardından özellikler bölümündeki Name alanından Template’e yeni bir isim verelim.
Header alanına Template için uygun bir başlık yazalım.
Eklediğimiz Template’in Tile Layout aracında, 1 satır ve 1 sütunluk bir yer kaplamasını istediğimiz için Rows ve Column Span alanlarına 1 değerini girelim.
Son olarak, Module ve Form alanlarından, Tile Layout aracında görüntülenmesini istediğimiz formu seçelim.
Tile Layout aracına Sales Sector Chart formunu eklemek için öncelikle yeni bir Temlate ekleyelim.
Bunun için, Tile Layout form aracını seçelim.
Ardından, Tile Layout üzerindeki Add Widget seçeneğine tıklayalım.
Bu işlemle birlikte, Template_3 adıyla yeni bir Template oluşturulacaktır.
Template_3 isimle Template’i seçelim.
Ardından özellikler bölümündeki Name alanından Template’e yeni bir isim verelim.
Header alanına Template için uygun bir başlık yazalım.
Eklediğimiz Template’in Tile Layout aracında, 1 satır ve 1 sütunluk bir yer kaplamasını istediğimiz için Rows ve Column Span alanlarına 1 değerini girelim.
Son olarak, Module ve Form alanlarından, Tile Layout aracında görüntülenmesini istediğimiz formu seçelim.
Son olarak Tile Layout aracına Sales List formunu eklemek için öncelikle yeni bir Temlate ekleyelim.
Bunun için, Tile Layout form aracını seçelim.
Ardından, Tile Layout üzerindeki Add Widget seçeneğine tıklayalım.
Bu işlemle birlikte, Template_4 adıyla yeni bir Template oluşturulacaktır.
Template_4 isimle Template’i seçelim.
Ardından özellikler bölümündeki Name alanından Template’e yeni bir isim verelim.
Header alanına Template için uygun bir başlık yazalım.
Eklediğimiz Template’in Tile Layout aracında, 1 satır ve 3 sütunluk bir yer kaplamasını istediğimiz için Rows Span alanına 1 değerini, Column Span alanlarına 3 değerini girelim.
Son olarak, Module ve Form alanlarından, Tile Layout aracında görüntülenmesini istediğimiz formu seçelim.
Gerekli ayarlamaları tamamladıktan sonra projeyi kaydedelim ve ardından Run butonuna tıklayarak client ekranına geçiş yapalım.
|
Client ekranında, projenin en son kaydedilen hali görüntülenir. Proje kaydedilmeden client ekranına geçiş yapıldığında, son yapılan değişiklikler ekran üzerinde görüntülenemez. |
Tile Layout form aracı ekli olan formumuzun client ekranındaki görüntüsü aşağıdaki gibi olacaktır.
Tile Layout aracının özellikler bölümünde, Column Count (bir satırda bulunması gereken sütun sayısı) değeri 3 olarak ayarlanmıştır.
Sales Stock Chart, Sales Company Chart ve Sales Sector Chart Template’lerinin her biri için Rows ve Column Span değerleri 1 olarak tanımlanmıştır. Bu tanımlama, her bir Template’in Tile Layout üzerinde 1 satır ve 1 sütunluk alan kaplayacağını belirtmektedir.
Bu yapı sayesinde, söz konusu üç Template ilk satırda yer alarak toplam 3 sütunluk alanı doldurmuştur.
Tile Layout’ta bir satırda tanımlanan sütun sayısı (Column Count) olan 3’ten fazla öğe yer alamayacağı için, Sales List Template otomatik olarak bir alt satıra yerleşmiştir.
Sales List Template için ise Row Span değeri 1, Column Span değeri ise 3 olarak belirlenmiştir. Bu da Template’in yeni satırda yatay olarak tüm sütunları kapsayacak şekilde konumlanacağı anlamına gelmektedir.
Örnek Kullanım 2:
Bu örnekte, bir önceki örnek üzerinden devam ederek işlemlerimizi sürdüreceğiz.
Tile Layout aracında, her satırda 4 sütun olacak şekilde bir düzen oluşturalım ve ikinci satırdaki Sales List Template’inin ilk satırda görüntülenmesini sağlayalım.
İlk olarak Tile Layout form aracını seçelim. Ardından, özellikler bölümünden Column Count (Sütun Sayısı) değerini 4 olarak ayarlayalım.
Projeyi kaydedelim ve ardından Run butonuna tıklayarak client ekranına geçiş yapalım.
Client ekranına, Tile Layout aracı içerisinde, aşağıdaki kırmızı çerçeve ile işaretlenmiş alana dördüncü sütun için yer açılmıştır. Sütunların genişlik ve yükseklik değerleri, Tile Layout aracının özellikler bölümünde yer alan Rows Height (300) ve Columns Width (550) parametrelerine göre belirlenmiştir.
İlk satırda 1 sütunluk yer açılmasına rağmen, Sales List Template'in ikinci satırda görünmesinin nedeni, Template'in özellikler bölümünde yer alan Column Span değerinin 3 olarak belirlenmiş olmasıdır.
Bu template, 3 sütunluk alan kaplayacak şekilde yapılandırıldığından, ilk satırdaki 1 sütunluk yer yeterli olmamakta ve bu nedenle otomatik olarak bir alt satıra taşınmaktadır.
| Template’in kaplayacağı sütun sayısı, satırda boşta kalan sütun sayısından fazla olduğunda, Template otomatik olarak bir alt satıra taşınmaktadır. |
Sales List Template'ini ilk satırdaki 1 sütunluk alana yerleştirmek için, öncelikle Template'i seçelim. Ardından, özellikler bölümünde bulunan Column Span değerini 1 olarak ayarlayalım.
Projeyi kaydedelim ve ardından Run butonuna tıklayarak client ekranına geçiş yapalım.
Client ekranında, Sales List Template’i ilk satıra taşınmış olarak görünecektir.
|
Template içerisine eklenen formlar, Responsive Form tasarımı kullanılarak oluşturulduğu için, form içindeki elemanlar Template'in ölçülerine göre otomatik olarak boyutlandırılmaktadır. |
Sales List Template’i içerisine eklenen formdaki liste de aynı şekilde, Template'in ölçülerine göre boyutlandığı için liste üzerinde kaydırma çubukları (scroll) görünmektedir.
Örnek Kullanım 3:
Bu örnekte, bir önceki örnek üzerinden devam ederek işlemlerimizi sürdüreceğiz.
Tile Layout aracının görünümünü, aşağıdaki görseldeki gibi oluşturabilmek için gerekli ayarlamaları yapalım.
Tile Layout aracını seçelim. Ardından özellikler bölümündeki Column Count alanına 5 değerini yazalım.
Sales Stock Chart, Sales Company Chart ve Sales Sector Chart Template’lerinin özellikler bölümündeki Column Span alanına 2 değerini yazalım.
Son olarak, Sales List Template’inin Column Span değerine 3 yazalım.
Projeyi kaydedelim ve ardından Run butonuna tıklayarak client ekranına geçiş yapalım.
Tile Layout aracının client ekranındaki görünümü, aşağıdaki görseldeki gibi olacaktır.
İlk satırdaki 4 sütunluk alanı, Sales Stock Chart ve Sales Company Chart Template’leri kaplamıştır.
Sales Sector Chart Template’i 2 sütunluk alan kaplayacak şekilde ayarlandığı için, ilk satırda kalan 1 sütunluk alana yerleştirilememiş ve otomatik olarak bir alt satıra taşınmıştır.
İkinci satırda ise Sales Sector Chart Template’i 2 sütunluk, Sales List Template’i 3 sütunluk alan kaplayarak yatay olarak tüm sütunları kapsamıştır.
Tile Layout İçerisindeki Sütun Sıralarının Değiştirilmesi
| Tile Layout içerisinde sütun sırasını değiştirebilmek için öncelikle Template seçilmelidir. Ardından, özellikler bölümündeki Header alanından, seçilen Template’e uygun bir başlık ismi belirlenmesi gerekmektedir. |
Client ekranında, sütunların sıraları Header bölümünden mouse ile sürükle – bırak yöntemi kullanılarak değiştirilebilir.
Header bölümünün Client ekranında görünmesi için, Studio ekranında Template’lerin özellikler bölümündeki Header alanının dolu olması gerekmektedir.
Header alanı boş olan Template’lerin Client ekranında sütun sıraları değiştirilememektedir.
Projeyi kaydedelim ve ardından Run butonuna tıklayarak client ekranına geçiş yapalım.
Client ekranında, Header bölümü üzerine mouse ile gelindiğinde, dört yönlü ok simgesi görüntülenir. Bu simgeyi gördükten sonra, ilgili sütun sürüklenip bırakılarak istenilen sıraya taşınabilir.
Taşıma işlemi yalnızca mevcut satırdaki sütunlarla sınırlı kalmaz; bir alt veya bir üst satırdaki istenilen sütuna da taşıma işlemi gerçekleştirebilir.
Örnek Kullanım 4:
Bu örnekte, bir önceki örnek üzerinden devam ederek işlemlerimizi sürdüreceğiz.
Tile Layout aracının görünümünü, aşağıdaki görseldeki gibi oluşturabilmek için gerekli ayarlamaları yapalım.
Tile Layout aracını seçelim. Ardından özellikler bölümündeki Column Count alanına 5 değerini yazalım.
Sales Stock Chart, Sales Company Chart, Sales Sector Chart ve Sales List Template’lerinin özellikler bölümündeki Rows Span ve Column Span değerlerini, aşağıda bulunan görsellerdeki gibi ayarlayalım.
Projeyi kaydedelim ve ardından Run butonuna tıklayarak client ekranına geçiş yapalım.
Tile Layout aracının client ekranındaki görünümü, aşağıdaki görseldeki gibi olacaktır.
Sales Stock Chart aracının Rows Span değeri 2 olarak ayarlanarak, 2 satırlık bir alan kaplaması sağlanmıştır.
Örnek Kullanım 5:
| Client ekranında, Template'lerin kenar çizgileri üzerinden sürükle ve bırak yöntemiyle, ölçekler hem yatay hem de dikey olarak değiştirilebilmektedir. |
| Burada önemli olan husus, ölçeklendirme yapılan Template'in genişliğinin satırdaki sütun sayısını aşması durumunda, Template otomatik olarak bir alt satıra taşınacaktır. |
Sales Stock Chart Template'inin genişliği artırıldığında, satırda diğer Template'ler için yeterli alan kalmadığı için, Template'ler bir alt satıra taşınmıştır.
| Client ekranı üzerinden yapılan düzenlemelerin, ekran yenilense dahi eski haline geri dönmemesi durumunda, ekranı varsayılan ayarlarına döndürmek için, tarayıcınızdaki çerezleri temizlemeniz gerekmektedir. |
Örnek Kullanım 6:
| Tile Layout aracının özellikler bölümündeki Column Count (Sütun Sayısı) alanına 0 değeri girildiğinde, eklenen Template’ler, her satırda yalnızca bir sütun olacak şekilde alt satırlarda görüntülenir. |
Tile Layout aracını seçelim. Ardından özellikler bölümündeki Column Count alanına 0 değerini yazalım.
Sales Stock Chart ve Sales Company Chart Template’lerinin Rows ve Column Span alanlarına 1 değerini girelim.
Projeyi kaydedelim ve ardından Run butonuna tıklayarak client ekranına geçiş yapalım.
Tile Layout aracının client ekranındaki görünümü, aşağıdaki görseldeki gibi olacaktır.
Aksiyonlar
Tile Layout form aracının bağlı olduğu formda bulunan bir değer, Template içerisindeki bağlı formda yer alan bir alana aktarılabilir.
Bu işlemi gerçekleştirmek için, öncelikle Tile Layout form aracımızın yer aldığı Form_1 adlı formumuza bir adet Drop Down Box aracı ekleyelim ve ardından aşağıdaki gibi alanın özellik ayarlarını yapalım.
Sales Liste Template'ine bağladığımız Sales List form ekranına bir adet Text Box aracı ekleyelim ve bu alana TemplateSectorName ismini verelim.
SalesList_Template adını verdiğimiz Template’in ismini Template_4 olarak değiştirelim.
| Kullanılacak aksiyon içerisinde Item List alanının görünür hale gelmesi için, Template isimleri Template_1, Template_2 ... gibi isimlendirilmesi gerekmektedir. |
Son olarak, SectorName alanını seçtikten sonra, aksiyonlar bölümüne geçelim.
Add New Action alanına tıklayalım.
Gelen seçeneklerden;
Type of Action: On Value Change seçeneğini seçelim.
Operation: Update Value seçeneğini seçelim.
Value Area: Template_4 seçeneğini seçelim.
Value Area alanında Template_4 seçeneği seçildiğinde, hemen altında Item List alanı görünür hale gelecektir.
Item List: TemplateSectorName seçeneğini seçelim.
(Açılır kutudan seçilen değerin, Template_4 isimli Template ekranındaki TemplateSectorName alanına aktarılması sağlanacaktır.)
SQL Query: SELECT '$PSectorName$' yazalım.
Ardından aksiyonu kaydedelim.
Kaydedilen aksiyon, resimdeki gibi görünecektir.
Projeyi kaydedelim ve ardından Run butonuna tıklayarak client ekranına geçiş yapalım.
Client ekranında, açılır kutudan bir Sector Name seçildiğinde, bu bilgi Sales List Template içerisindeki Sector Name alanına otomatik olarak aktarılmaktadır.