Kuika’nın Timeline elementi, olayların, görevlerin veya süreç adımlarının kronolojik sırayla kullanıcıya görsel olarak sunulmasını sağlar. Bir sürecin nasıl ilerlediğini, hangi adımların tamamlandığını veya belirli tarihlerde gerçekleşen olayları anlaşılır bir düzende göstermek için kullanılabilir
Timeline elementi, web ve mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Proje Yönetimi Süreçleri: Projenin başlangıcından teslimat aşamasına kadar tüm adımların kronolojik olarak görüntülenmesi. Örneğin: Analiz → Tasarım → Geliştirme → Test → Yayın.
Sipariş & Teslimat Akışı: Sipariş alındı, hazırlanıyor, kargoya verildi, yolda, teslim edildi gibi aşamaların kullanıcıya adım adım gösterilmesi.
Etkinlik veya Eğitim Programı Akışı: Bir konferansın oturum saatleri, bir eğitimin modülleri veya bir etkinliğin zaman çizelgesinin sunumu.
Tarihsel Süreçlerin Gösterimi: Bir markanın kuruluşundan bugüne gelişimi, bir ürünün evrim süreci, bir projenin kilometre taşları gibi tarih bazlı anlatımlar.
Görev / Ticket Süreç Takibi: Bir görevin hangi aşamada olduğunu gösterme: oluşturuldu, atandı, üzerinde çalışılıyor, tamamlandı, kapatıldı.
2. Temel Özellikler
Kronolojik Görselleştirme: Timeline elementi, olayları zaman sırasına göre düzenleyerek kullanıcıların bir sürecin başlangıcından sonuna kadar olan tüm adımları kolayca takip etmesini sağlar.
Adım Bazlı İçerik Gösterimi: Her adım için başlık, açıklama, tarih, ikon veya görsel eklenebilir. Kullanıcı, sürecin hangi aşamada olduğunu hızlıca kavrar.
Dinamik Veri Bağlama: Timeline içeriği, statik olarak elle girilebildiği gibi Datasource üzerinden de dinamik olarak doldurulabilir. Böylece olay listesi veritabanı veya API üzerinden otomatik güncellenebilir.
Zengin İçerik Desteği: Adımlar içine Label, Image, Icon gibi diğer Kuika elementleri eklenerek görsel olarak zengin zaman akışları oluşturulabilir.
2.1. Timeline Elementi Özellikleri
Timeline elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.
Options: Aksiyon bağlantıları ve veri bağlama işlemlerinin gerçekleştirildiği alandır. Aksiyon bağlantısı yapıldıktan sonra, bu alanda yeni özellikler görüntülenir.
Bu alanı kullanabilmek için öncelikle Datasource içerisinde bir tablo oluşturmalı ve ardından SQL Actions oluşturmalısınız.
Mode: Timeline verilerinin ekranda nasıl görüntüleneceğini belirler. Aşağıdaki seçenekler arasından seçim yapabilirsiniz:
Right: Tüm olaylar sağ tarafta görüntülenir.
Left: Tüm olaylar sol tarafta görüntülenir.
Alternate: Olaylar sağ ve sol tarafta dönüşümlü olarak görüntülenir (varsayılan ayar).
2.1.1. SQL Datasource ile Örnek
Bu örnekte, Timeline elementi bir SQL Datasource ile bağlantı kurarak veri gösterecektir.
1. Datasource Oluşturma
Datasource modülüne girin.
Yeni bir tablo oluşturun ve aşağıdaki değişkenleri tanımlayın:
title (String): Olayın başlığı
description (String): Olayın açıklaması
color (String): Her olay için kullanılacak renk kodu
CREATE butonuna tıklayarak tabloyu oluşturun.
2. SQL Action Oluşturma
Sol paneldeki Actions bölümünden + ikonuna tıklayın.
New SQL Action seçeneğini seçin.
Aşağıdaki SQL komutunu girerek yeni bir SQL Action oluşturun:
SELECT * FROM timeline_datasource
CREATE butonuna tıklayarak işlemi tamamlayın.
3. SQL Action’ı Timeline Elementine Bağlama
Timeline elementini seçin.
Sağ kenardaki Properties panelinden +Add Action butonuna tıklayın.
Search Box alanına oluşturduğunuz SQL Action ismini (örneğin, TimelineAll) yazın ve aksiyonu seçin.
Seçilen aksiyon, Timeline elementinin Options alanında görüntülenecektir.
Bu aşamada, verileri aşağıdaki şekilde eşleştirin:
Title: title
Description: description
Color: color
Önemli Notlar
Mode alanını kullanarak Timeline’ın sağ, sol veya dönüşümlü şekilde görüntülenmesini ayarlayabilirsiniz.
Veriler güncellendikçe Timeline elementi otomatik olarak güncellenir.
Bu işlemleri tamamladıktan sonra, Timeline elementiniz artık belirlediğiniz verilerle birlikte çalışacaktır.
2.2. Elemente Eklenebilen Aksiyonlar
Timeline elementi, bilgi görüntülemeye odaklanan pasif bir bileşen olduğu için kullanıcı etkileşimiyle tetiklenen aksiyonları desteklemez. Bu nedenle Timeline seçildiğinde sağ panelde ADD ACTION butonu görünmez ve element üzerine OnClick veya OnChange gibi aksiyonlar eklenemez.
Aşağıdaki noktalar Timeline elementinin aksiyon yapısını açıklar:
Timeline üzerinde tıklama, seçim veya adım etkileşimi gerçekleştiğinde herhangi bir aksiyon tetiklenmez.
Örneğin: Bir filtre seçildiğinde timeline içeriğinin değişmesi gerekiyorsa, bu işlem Select Box, Button veya Page Init gibi başka tetikleyicilerle yapılır.
Timeline yalnızca kendisine bağlanan veriyi görsel olarak sunar ve kendi içinde işlem başlatmaz.
3. Timeline Elementi Nasıl Kullanılır?
Bu bölümde Timeline elementinin uçtan uca kullanımını, örnek bir senaryo üzerinden ele alacağız.
Senaryo: İzin Talebi Sürecinin Timeline Üzerinden Gösterimi
Bir insan kaynakları uygulamasında çalışanlar, oluşturdukları izin taleplerinin hangi aşamada olduğunu takip etmek ister. Bu sürecin anlaşılır ve görsel olarak düzenli sunulabilmesi için Timeline elementi kullanılır.
Kullanıcı izin talebini oluşturduğunda:
Talebin hangi adımda olduğu,
Hangi aşamaların tamamlandığı,
Hangi adımların beklemede olduğu
Timeline üzerinde kronolojik sırayla gösterilir.
Bu yapı sayesinde kullanıcı, izin sürecinin tamamını tek bakışta takip edebilir.
Senaryoda:
Timeline verileri dinamik olarak SQL Action’dan alınır.
Sayfa açıldığında Timeline otomatik olarak doldurulur.
Renkler ile durum ayrımı yapılır.
Adım 1 - Dinamik Kullanım için Gerekli Aksiyonları Tanımlama
Arayüzde verileri göstermek için:
Bir aksiyon tanımlamanız gerekir.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Örnek Verileri Ekleyen Aksiyon (GetHotelListMock):
SELECT *
FROM (
VALUES
(1, 'Leave Request Submitted',
'Employee submitted the leave request. - 2024-01-10',
'#4CAF50'),
(2, 'Manager Approval',
'Waiting for manager approval. - 2024-01-11',
'#FFC107'),
(3, 'HR Review',
'HR department is reviewing the request. - 2024-01-12',
'#9E9E9E'),
(4, 'Leave Approved',
'Leave request has been approved. - 2024-01-13',
'#2196F3')
) AS LeaveTimeline(StepId, Title, DescriptionWithDate, Color)
ORDER BY StepId;
Sayfaya Elements > Display > Timeline elementini sürükleyip bırakın.
Timeline elementini dinamik veriye bağlayın Timeline > Properties > Options > Action > GetLeaveTimelineMock. Alanları aşağıdaki gibi tanımlayın.
Mode tercihinizi isteğe bağlı yapabilirsiniz. Mevcut senaryoda varsayılan olarak Alternate kullanılmıştır. Uzun süreçlerde adımların sağ–sol dönüşümlü görünmesini sağlar.
Preview
Uygulama test edildiğinde, izin talebine ait sürecin Timeline yapısı üzerinde adım adım ve kronolojik sırayla görüntülendiği görülür. Her adımda sürecin başlığı, açıklaması ve tarih bilgisi birlikte sunulur. Sürecin mevcut durumu renkli göstergeler ile vurgulanırken, kullanıcı izin talebinin hangi aşamada olduğunu ve önceki adımları tek bir ekran üzerinden net bir şekilde takip edebilir.
4. Ortak Özellikler (Properties)
Timeline elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Zaman sırasını tutarlı şekilde düzenleyin. Timeline üzerindeki olayların kronolojik olarak doğru sıralandığından emin olun; ters sıralama gerekiyorsa veri kaynağında sıralama yapın.
Uzun açıklamalardan kaçının. Timeline, hızlı bilgi vermek için kullanılır. Metinler çok uzunsa, event detayını ayrı bir sayfa veya modal üzerinden gösterin.
Renkleri anlamlı kullanın. Farklı olay türlerini (tamamlandı, devam ediyor, beklemede gibi) ayırt etmek için tutarlı bir renk sistemi oluşturun.
Mobil görünümü test edin. Mobil ekranlarda Timeline daha dar bir alanda gösterileceği için metin uzunluklarına ve ikon boyutlarına dikkat edin.
6. Kısıtlamalar
Timeline elementi aksiyon desteklemez. OnClick, OnChange gibi kullanıcı etkileşimiyle tetiklenen aksiyonlar eklenemez.
Veri kaynağı zorunludur. Timeline’ın içerik göstermesi için mutlaka bir Datasource veya Set Value bağlanmalıdır; aksi halde çizelge boş görünür.
