Sayfa Düzenleri

​

definePageLayout

import { definePageLayout, PageLayoutTabLayoutMode } from 'twenty-sdk/define';
import { EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER } from '../objects/example-object';
import { HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from '../front-components/hello-world';

export default definePageLayout({
  universalIdentifier: '203aeb94-6701-46d6-9af1-be2bbcc9e134',
  name: 'Example Record Page',
  type: 'RECORD_PAGE',
  objectUniversalIdentifier: EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER,
  tabs: [
    {
      universalIdentifier: '6ed26b60-a51d-4ad7-86dd-1c04c7f3cac5',
      title: 'Hello World',
      position: 50,
      icon: 'IconWorld',
      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
      widgets: [
        {
          universalIdentifier: 'aa4234e0-2e5f-4c02-a96a-573449e2351d',
          title: 'Hello World',
          type: 'FRONT_COMPONENT',
          configuration: {
            configurationType: 'FRONT_COMPONENT',
            frontComponentUniversalIdentifier:
              HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
          },
        },
      ],
    },
  ],
});

​

Önemli noktalar

• type, 'RECORD_INDEX', 'RECORD_PAGE', 'DASHBOARD' veya 'STANDALONE_PAGE' değerlerinden biridir. Belirli bir nesnenin ayrıntı görünümünü özelleştirmek için 'RECORD_PAGE' kullanın.
• 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: kayıt sayfaları ve bağımsız sayfalar için VERTICAL_LIST, panolar için GRID ve sekmenin görüntü alanını doldurması gereken tek bir widget için CANVAS. Bir VERTICAL_LIST sekmesi widget’ları dikey olarak sıralar. Zaman çizelgeleri, dosyalar, notlar, görevler ve iş akışları gibi kendi kaydırmalarını yöneten yerleşik widget’lar tek bir görüntü alanını doldurur; alanlar, ön bileşenler, grafikler ve içeriğe sığan diğer widget’lar ise içeriklerinde veya yapılandırılmış yüksekliklerinde oluşturulur. Bir GRID sekmesi, widget’larını her zaman 12 sütunlu bir ızgarada kartlar olarak düzenler. Bir CANVAS widget’ının açıkça belirtilmiş bir konumu yoktur; bir canvas sekmesi birden fazla widget içeriyorsa, görüntü alanını doldurmak yerine içerik yüksekliklerinde işlenirler.
• layoutMode değerini açıkça ayarlayın. Bunu atlamak, bir STANDALONE_PAGE üzerinde size VERTICAL_LIST ve diğer her yerde GRID verir; bu da, bir kayıt sayfasında nadiren istediğiniz davranıştır.
• 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.
• Bir FRONT_COMPONENT pencere öğesi, headerCommandMenuItemUniversalIdentifiers özelliğini aynı uygulamadaki komut menüsü öğelerinin evrensel tanımlayıcılarından oluşan sıralı bir diziye ayarlayabilir. Bu eylemler, pencere öğesi kart başlığında simge düğmeleri olarak görünür ve komut düzeyindeki kullanılabilirliklerini ve izin denetimlerini korur. Tanımlayıcılar benzersiz olmalı ve uygulama yüklendiğinde çözümlenebilmelidir.
• 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).

​

Alan bileşenleri

{
  universalIdentifier: 'c1c2c3c4-c5c6-4000-8000-000000000003',
  title: 'People → Opportunities',
  type: 'FIELD',
  configuration: {
    configurationType: 'FIELD',
    fieldMetadataId: PEOPLE_FIELD_UNIVERSAL_IDENTIFIER,
    fieldDisplayMode: 'TABLE',
    nestedRelationFieldMetadataId: OPPORTUNITIES_FIELD_UNIVERSAL_IDENTIFIER,
  },
}

• fieldMetadataId, yerleşimin nesnesindeki bir alanın evrensel tanımlayıcısını alır.
• fieldDisplayMode, 'FIELD', 'CARD', 'EDITOR', 'VIEW' veya 'TABLE' değerlerinden biridir. TABLE, bire-çok ilişki alanının kayıtlarını listeleyen bir görünümü gömer.
• nestedRelationFieldMetadataId isteğe bağlıdır ve ilişki hedef nesnesi üzerinde, iki ilişki adımı uzaktaki kayıtları listelemek için bire-çok ilişki alanının evrensel tanımlayıcısını alır (örneğin, bir Şirket sayfasının şirketin kişilerinin fırsatlarını listelemesi veya bir Kişi sayfasının kişinin şirketinin fırsatlarını listelemesi gibi). İlk adım bire-çok veya çoktan-bire ilişki alanı olabilir, ikincisi mutlaka bire-çok olmalıdır (bağlantı ilişkileri desteklenmez) ve fieldDisplayMode: 'TABLE' gerektirir — bunu başka herhangi bir görüntüleme modu ile birleştirmek bir doğrulama hatasıdır, çünkü iç içe bir bileşen her zaman gömülü bir görünüm olarak işlenir.

​

definePageLayoutTab

import {
  definePageLayoutTab,
  PageLayoutTabLayoutMode,
  STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS,
} from 'twenty-sdk/define';
import { HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from '../front-components/hello-world';

export default definePageLayoutTab({
  universalIdentifier: 'b1b2b3b4-b5b6-4000-8000-000000000001',
  pageLayoutUniversalIdentifier:
    STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.companyRecordPage
      .universalIdentifier,
  title: 'Hello World',
  position: 1000,
  icon: 'IconWorld',
  layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
  widgets: [
    {
      universalIdentifier: 'b1b2b3b4-b5b6-4000-8000-000000000002',
      title: 'Hello World',
      type: 'FRONT_COMPONENT',
      configuration: {
        configurationType: 'FRONT_COMPONENT',
        frontComponentUniversalIdentifier:
          HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
      },
    },
  ],
});

​

Önemli noktalar

• pageLayoutUniversalIdentifier zorunludur ve kurulum anında zaten var olan bir sayfa düzenini işaret etmelidir — standart bir Twenty düzeni veya kendi uygulamanız tarafından tanımlanan bir düzen olabilir. Başka yüklü bir uygulamaya ait düzenlere uygulamalar arası referanslar bugün desteklenmemektedir. Üst düzen eksik olduğunda, kurulum net bir doğrulama hatasıyla başarısız olur.
• Standart Twenty yerleşimleri için tanımlayıcıları twenty-sdk/define içinden içe aktarın:
  import { STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS } from 'twenty-sdk/define';
  
  // STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.companyRecordPage.universalIdentifier
  // STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.personRecordPage.universalIdentifier
  // STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.universalIdentifier
  // STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.opportunityRecordPage.universalIdentifier
  // STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.noteRecordPage.universalIdentifier
  // …
  
  Her yerleşim girdisi ayrıca tabs ve bunların widgets ögelerini de açığa çıkarır, böylece herhangi bir düzeye başvurabilirsiniz:
  STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.tabs.home
    .universalIdentifier;
  STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.tabs.home.widgets
    .fields.universalIdentifier;
  
  Kısa bir takma ad STANDARD_PAGE_LAYOUT da kullanılabilir:
  import { STANDARD_PAGE_LAYOUT } from 'twenty-sdk/define';
  
  STANDARD_PAGE_LAYOUT.companyRecordPage.universalIdentifier;
  
• widgets yalnızca bu sekmeyle sınırlıdır — satır içi olarak definePageLayout içinde tanımlanan widget’larda olduğu gibi, ön uç bileşenlerine, görünümlere vb. tam olarak aynı şekilde referans verirler.
• position, hedeflenen düzende mevcut sekmelere göre sıralamayı kontrol eder. Yerleşik sekmelere göre sekmenizi istediğiniz konuma yerleştirecek bir değer seçin.
• Yalnızca mevcut bir düzene ekleme yapmak istediğinizde definePageLayout yerine bunu kullanın. Tüm düzene sahip olduğunuzda definePageLayout kullanın.