Skip to main content
Layout entities control how your app surfaces inside Twenty’s UI — what lives in the sidebar, which saved views ship with the app, and how a record detail page is arranged.

Layout concepts

Views, navigation items, and page layouts reference each other by universalIdentifier:
  • A navigation menu item of type VIEW points at a defineView identifier, so the sidebar link opens that saved view.
  • A page layout of type RECORD_PAGE targets an object and can embed front components inside its tabs as widgets.
Görünümler, bir nesnenin kayıtlarının nasıl görüntüleneceğine ilişkin kaydedilmiş yapılandırmalardır — hangi alanların görünür olacağını, sıralarını ve uygulanan filtreleri veya grupları içerir. Uygulamanızla önceden yapılandırılmış görünümler sunmak için defineView() kullanın:
src/views/example-view.ts
Önemli noktalar:
  • objectUniversalIdentifier, bu görünümün hangi nesneye uygulanacağını belirtir.
  • key, görünüm türünü belirler (ör. ana liste görünümü için ViewKey.INDEX).
  • fields, hangi sütunların görüneceğini ve sıralarını kontrol eder. Her alan bir fieldMetadataUniversalIdentifier öğesine referans verir.
  • Daha gelişmiş yapılandırmalar için filters, filterGroups, groups ve fieldGroups de tanımlayabilirsiniz.
  • position, aynı nesne için birden fazla görünüm olduğunda sıralamayı kontrol eder.
Gezinme menüsü öğeleri, çalışma alanı kenar çubuğuna özel girişler ekler. Görünümlere, harici URL’lere veya nesnelere bağlanmak için defineNavigationMenuItem() kullanın:
src/navigation-menu-items/example-navigation-menu-item.ts
Önemli noktalar:
  • type, menü öğesinin neye bağlanacağını belirler: kaydedilmiş bir görünüm için NavigationMenuItemType.VIEW veya harici bir URL için NavigationMenuItemType.LINK.
  • Görünüm bağlantıları için viewUniversalIdentifier ayarlayın. Harici bağlantılar için link ayarlayın.
  • position, kenar çubuğundaki sıralamayı kontrol eder.
  • icon ve color (isteğe bağlı) görünümü özelleştirir.
Sayfa düzenleri, bir kayıt ayrıntı sayfasının nasıl görüneceğini özelleştirmenizi sağlar — hangi sekmelerin görüneceği, her sekmenin içinde hangi widget’ların olacağı ve bunların nasıl düzenleneceği. Uygulamanızla özel düzenler sunmak için definePageLayout() kullanın:
src/page-layouts/example-record-page-layout.ts
Önemli noktalar:
  • type genellikle belirli bir nesnenin ayrıntı görünümünü özelleştirmek için 'RECORD_PAGE' olur.
  • objectUniversalIdentifier, bu düzenin hangi nesneye uygulanacağını belirtir.
  • Her tab, bir title, position ve layoutMode ile sayfanın bir bölümünü tanımlar (serbest biçimli düzen için CANVAS).
  • Bir sekmenin içindeki her widget, bir ön uç bileşeni, bir ilişki listesi veya diğer yerleşik widget türlerini oluşturabilir.
  • Sekmelerdeki position, sıralarını kontrol eder. Özel sekmeleri yerleşik olanların sonrasına yerleştirmek için daha yüksek değerler kullanın (ör. 50).