Organization Chart aracı, Xpoda'da organizasyon şemalarınızı ağaç yapısı ile görselleştirebileceğiniz bir 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 |
Organization Chart aracının özellikleri:
Type(Alan Türü): Eklenilen form aracının alan türünü gösterir. Burada yer alan değer değiştirilemez.
Edit Form(Düzenleme Formu): Veri tabanında oluşacak olan alanın ismi yazılır.
Parent: Edit form üzerinde, organizasyon şemasında bir kaydın bağlı olduğu üst birimi (ebeveyn öğeyi) tanımlamak için kullanılır. Bu alanda seçilen değer, şemada ilgili kaydın hangi birime bağlı olarak konumlanacağını belirler.
Name: Edit formda, organizasyon şemasında her bir öğeyi temsil eden başlık ya da isim bilgisini göstermek için kullanılan alandır. Bu alanda seçilen değer, şema üzerinde ilgili kutucukta görünen isim olarak görüntülenir. (Örneğin çalışanlar için ad-soyad bilgisi, departmanlar için ise birim adı bu alandan alınarak gösterilebilir.)
Title: Edit formda, organizasyon şemasında her öğeye ait ek bir açıklama veya detay bilgisinin gösterileceği alan bu kısımdan belirlenir. Bu alanda seçilen değer, şema kutucuklarında “Name” bilgisinin altında yer alır. (Örneğin bu alanda bir çalışanın görev tanımı (örn. “Satış Müdürü”)
Avatar: Edit formda, organizasyon şemasında her öğeye ait görsel (örneğin bir profil fotoğrafı veya simge) olarak gösterilecek alan bu bölümden seçilir. Bu alanda belirtilen değer, şemadaki kutucukların sol üst kısmında görsel olarak yer alır. Genellikle kullanıcı fotoğrafı, departman logosu ya da temsil edici bir ikon gibi görseller burada kullanılır. Şemaya görsel zenginlik katmak ve öğelerin daha kolay ayırt edilmesini sağlamak için avatar alanı kullanılır
Expand: Edit formda, organizasyon şemasında bir öğenin altında alt birimler (child) olup olmadığını kontrol etmek için kullanılan alandır. Bu alanda seçilen değer, şema üzerinde ilgili kaydın genişletilebilir olup olmadığını belirler. Eğer bu alan "true" ise, öğenin altında alt kırılımlar olduğu kabul edilir ve kullanıcıya genişletme imkanı sunulur.
Xpoda üzerinde bu alan için ‘Switch elemanı’ kullanılarak kullanıcıdan evet/hayır (true/false) şeklinde seçim yapılması sağlanabilir. Bu sayede şemanın dinamik yapısı pratik biçimde kontrol edilebilir.
Help Text(Yardım Metni): Form aracı üzerine Fare ile gelindiğinde açıklama çıkması için girilen metindir.
Height/Width (Yükseklik/Genişlik):Form aracının yüksekliğini ve genişliğini düzenler.
From Left/ Top (Soldan/Üstten): Liste aracının soldan ve üstten mesafesini ayarlar.
Edit: Var olan organizasyon şeması üzerindeki kayıtların düzenlenebilmesini sağlar. "Yes" yapılırsa, Kullanıcılar, Client tarafında şema içindeki mevcut öğelerin bilgilerini değiştirebilir. (Örneğin isim, pozisyon veya bağlı olduğu kişi gibi detaylar güncellenebilir.)
Create: "Yes" yapılırsa Organizasyon şemasına yeni kayıtlar (yeni pozisyonlar veya kişiler) eklenmesini mümkün kılar.
Display: "Yes" yapılırsa client ekranında componentin görünmesi sağlanır.
Delete: "Yes" yapılırsa, Organizasyon şemasındaki mevcut kayıtların silinmesini sağlar.
Organization Chart Örneği:
Beraber bir Organization Chart örneği oluşturalım.
Bu örnekte bir hastanenin, yetkili kişilerinin bulunduğu bir organizasyon şeması hazırlayacağız.
Bu organizasyon şeması ile hastane personel yapısı hiyerarşik biçimde sunulacak ve interaktif bir görünüm sağlanacaktır.
Öncelikle, Organization Chart bileşeninin verileri alacağı bir Edit Forma ihtiyacımız var. Organization Chart üzerinde gösterilecek öğe değerlerinin alınacağı bir Edit Form (Düzenleme Formu) ekranı tasarlayalım. Bu form, organizasyon şemasında yer alacak her bir öğeye dair gerekli bilgilerin kullanıcı tarafından girilmesini sağlar. Öğelerin doğru şekilde Organization Chart’ta görüntülenebilmesi için, Edit Form’un doğru ve etkili bir şekilde yapılandırılması büyük önem taşır.
Studio tarafında tasarımı gerçekleştireceğimiz sayfaya gelelim.
Form_1 isimli formu seçelim, ardından ekranın sağ tarafında bulunan formun özellikler bölümünde, Name alanına 'HospitalOrganizationChart' yazarak forma isim verelim Veri tabanına kayıt işlemi yapacağımız için formun türünü 'Form' olarak seçelim. Eklemek istediğimiz tablo adını ise TableName alanına 'HospitalOrgChart' olarak yazalım.
Sol taraftaki form araçları kısmından 1 Drop Down Box, 2 Text Box, 1 Picture ve 1 Switch aracını sürükleyerek formumuza ekleyelim.
Label'ları ve alanları sırayla seçip, özellikler bölümündeki Text alanına resimdeki örneğe göre isimlendirmeleri yapalım. Her isimlendirmeden sonra Enter tuşuna basalım.
Edit formdaki Parent Unit (Bağlı Olduğu Departman) açılır kutusuna, kullanıcıların seçim yapabilmesi için özel bir sorgu yazmamız gerekiyor. Bu sorguda, öncelikle üst birim olarak herhangi bir departmana bağlı olmayan yani “en üst seviye” departmanları temsil eden bir seçenek ekliyoruz. Bu seçenek genellikle “Yok” veya “None” gibi ifade edilir ve ID değeri olarak sıfır (0) atanır.
|
ID değeri olarak (0) atanması zorunludur. |
Ardından, HospitalOrgChart tablosundan gelen UserTableID ve Position birimlerini listeleyerek, kullanıcının kolayca bağlı olduğu departmanı seçebilmesini sağlıyoruz. Böylece kullanıcı, eğer birimin bağlı olduğu üst departman yoksa “Yok” seçeneğini işaretleyebilir; aksi durumda ise ilgili departmanı (bölümü) açılır listeden seçebilir.
Parent Unit açılır kutu sorgusu:
SELECT 0 AS id, 'None' AS DepartmentName
UNION ALL
SELECT UserTableID, Position FROM HospitalOrgChart WITH (NOLOCK)
Bu sorgu ile kullanıcıya, organizasyon şemasında "None" (ebeveyn yok) seçeneğiyle birlikte, tüm mevcut pozisyonları (Position sütunu) ve onların UserTableID değerlerini liste olarak vermiş oluyoruz.
|
Organization Charttaki Parent alanı, Title alanından beslenmek zorundadır.Çünkü ilgili tabloya atılan her kayıt yeni bir ıd oluşturmaktadır ve bu ıd, Parent alanı için kullanılmaktadır. Bu örnekte Parent‘a karşılık gelen ’Parent Unit’ açılır kutusunun sorgusunda Title’a karşılık gelen ’Position’ u tablodan id’si ile çekmemizin sebebi budur. |
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. |
|
|
Proje kaydedildikten sonra, ekranın Type değeri 'Form' olarak seçildiği için, XPODA veri tabanında ekrana eklenen alan isimleri ve veri tipleri ile birlikte, Table Name alanına yazılan isimle yeni bir tablo oluşturulacaktır. |
Organization Chart'ta gösterilmek üzere birkaç örnek kayıt girelim ve ekranın sağ alt tarafında bulunan kaydet butonu ile kaydedelim. (Bu buton kullanılmak istenmezse studio tarafından bir buton aracı sürüklenir ve ona save aksiyonu verilebilir.) Her bir kişinin bağlı olduğu departmanı (parent) seçerek hiyerarşiyi oluşturalım.
İlk kaydımız bir parent’a sahip olmayan kayıttır bu nedenle bu kayıt Organization şemasının en üstünde görüntülenecektir.
Açılır kutudan ‘None’ verisini seçelim( Bu kişinin herhangi bir departmana bağlı olmadığı anlamına gelir) Daha sonra numaraları takip ederek diğer bilgileri de girdikten sonra sağ alttaki yeşil kaydet butonu ile kaydedelim.
Örnek bir kaç kayıt daha girelim.
‘HospitalOrgChart’ Tablosunda eklediğimiz kayıtlar aşağıdaki gibidir.
Bu aşamalardan sonra Organization Chart’ı ekleyeceğimiz bir form oluşturalım ,forma isim verelim. Veri tabanına kayıt işlemi yapmayacağımız için formun türünü Report olarak seçelim ve Organization Chart’ı sürükleyip bırakalım.
Sürüklediğimiz Organization Chart’ın üzerine tıklayalım sağ tarafta özellikleri açılacaktır.
Bu aşamada öncelikle Organization Query kısmına verilerimizi alacağımız sorguyu yazmalıyız ve Edit Formu seçmeliyiz.Sorguyu yazdıktan ve Edit formu seçtikten sonra yukarıdaki ’Parent’,’Name’,’Title’,’Avatar’,’Expand’ açılır kutularına veri yüklenecektir,sağ taraflarında bulunan küçük üçgen iconlarına tıklayarak seçimleri yapabiliriz.Aşağıdaki görselde mapplemesi yapılmış halleri verilmiştir.
Client ekranında, form açıldığında Organization Chart elemanının otomatik olarak çalışmasını sağlamak için, ilk olarak Organization Chartın bulunduğu studio ekranında sol taraftan ilgili formu seçelim. Ardından, sağ tarafta yer alan aksiyonlar bölümüne giderek Add New Action alanına tıklayalım.
When the form is opened > Update Value > OrgChart_1 aksiyonunu tanımlayıp kaydedelim.
Ekranı kaydedelim ve run tuşu ile Client ekranına gidelim.
Client ekranında Organization şeması aşağıdaki gibi görünecektir.
Organization Chart Üzerinde Düzenleme, Oluşturma ve Silme İşlemleri
Organization Chart aracında, her bir kayıt üzerinde işlem yapabilmek için kullanıcıya kolay ve pratik bir erişim sağlanmıştır. Kullanıcı, herhangi bir kayıt üzerinde bulunan üç nokta (⋮) ikonuna tıklayarak, aşağıdaki seçeneklere ulaşabilir:
- Düzenleme (Edit): Var olan kaydın bilgilerini güncellemek için bu seçeneğe tıklanır.
- Silme (Delete): İlgili kaydı organizasyon şemasından tamamen kaldırmak için kullanılır.
- Yeni Kayıt Oluşturma (Create): Organizasyon şemasına yeni bir pozisyon veya kişi eklemek için bu seçenek tercih edilir.
Bu fonksiyonların aktif hale gelmesi, Organization Chart aracının özellikler kısmında bulunan Edit, Create, Delete butonlarının “Yes” olarak ayarlanmasıyla mümkün olmuştur. Bu ayar sayesinde, client tarafında şema üzerinde dinamik düzenlemeler yapılabilmekte ve kullanıcı etkileşimi artırılmaktadır.
Baş hekim olan Dr. Alice Young’ a Çocuk Sağlığı ve Hastalıkları Bölüm Başkanını (Head of Pediatrics) bağlayalım,bunun için aşağıdaki görseldeki gibi 3 nokta ikonunun üzerine gelinip Create yazısına tıklayalım,karşımıza edit ekranı açılacaktır.Aşağıdaki gibi bilgileri ekleyelim, kaydete basalım.