Layouturi de pagină

​

Prezentare generală

​

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',
          heightBehavior: 'TAB_VIEWPORT',
          configuration: {
            configurationType: 'FRONT_COMPONENT',
            frontComponentUniversalIdentifier:
              HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
          },
        },
      ],
    },
  ],
});

​

Puncte cheie

• type este unul dintre 'RECORD_INDEX', 'RECORD_PAGE', 'DASHBOARD', 'STANDALONE_PAGE' sau 'RECORD_FORM'. Folosiți 'RECORD_PAGE' pentru a personaliza vizualizarea de detaliu a unui obiect specific. 'RECORD_FORM' descrie formularul de creare al unui obiect și conține widgeturi FORM_FIELD, fiecare redând un singur câmp. Twenty oferă câte un aspect 'RECORD_FORM' pentru fiecare obiect, cu câte un widget pentru fiecare câmp care poate fi creat, astfel încât rareori trebuie să creați unul; acesta nu redă încă formulare de înregistrare.
• objectUniversalIdentifier specifică la ce obiect se aplică această machetă.
• Fiecare tab definește o secțiune a paginii cu un title, position și layoutMode: utilizați VERTICAL_LIST pentru pagini ale înregistrărilor și pagini independente și GRID pentru dashboard-uri. O filă VERTICAL_LIST stivuiește widgeturile pe verticală. Widgeturile integrate care își gestionează propria derulare, precum cronologiile, fișierele, notițele, sarcinile, fluxurile de lucru și conversațiile, ocupă în mod implicit o singură zonă de vizualizare; câmpurile, componentele frontale, graficele și alte widgeturi cu ajustare la conținut se redau la înălțimea conținutului sau la înălțimea configurată. O filă GRID își aranjează întotdeauna widgeturile ca carduri pe o grilă cu 12 coloane.
• Widgeturile dintr-o filă VERTICAL_LIST moștenesc modul de aspect al filei, iar ordinea lor provine din matricea widgets. Nu setați position; setați opționalul heightBehavior de nivel superior la 'TAB_VIEWPORT' atunci când un widget trebuie să ocupe o zonă de vizualizare completă a filei și să își gestioneze propria derulare sau la 'FIT_CONTENT' pentru a suprascrie o setare implicită integrată pentru înălțime completă. Widgeturile precedente nu reduc această înălțime. Este permis un singur widget TAB_VIEWPORT activ per filă și acesta trebuie să fie după widgeturile adaptate la conținut.
• Widgeturile GRID continuă să utilizeze position: { layoutMode: PageLayoutTabLayoutMode.GRID, row, column, rowSpan, columnSpan }. heightBehavior de nivel superior este valid doar pentru filele VERTICAL_LIST; utilizarea sa cu GRID sau CANVAS reprezintă o eroare de validare.
• Filele Canvas existente și pozițiile explicite ale widgeturilor rămân acceptate. SDK-ul afișează avertismente privind deprecierea, împreună cu înlocuirile recomandate.
• Setează explicit layoutMode. Dacă îl omiți, vei obține VERTICAL_LIST pe un STANDALONE_PAGE și GRID în rest, ceea ce rareori îți dorești pe o pagină de înregistrare.
• Fiecare widget dintr-o filă poate reda un front component, o listă de relații sau alte tipuri de widgeturi integrate.
• Un widget FRONT_COMPONENT poate seta headerCommandMenuItemUniversalIdentifiers la o matrice ordonată de identificatori universali ai elementelor meniului de comenzi din aceeași aplicație. Aceste acțiuni apar ca butoane cu pictograme în antetul cardului widgetului și își păstrează verificările de disponibilitate și permisiuni la nivel de comandă. Identificatorii trebuie să fie unici și trebuie să se rezolve atunci când aplicația este instalată.
• Un widget IFRAME poate utiliza microfonul sau camera pentru site-uri web aprobate prin requestedIframeMediaPermissions ale aplicației care îl deține. Membrii selectează Activare și aprobă o confirmare nativă a browserului care afișează aplicația, originea site-ului web și accesul solicitat la microfon sau cameră înainte ca accesul să înceapă. Aprobările de securitate ale spațiului de lucru și autorizațiile altor aplicații nu se aplică widgeturilor definite de aplicație.
• position pe file le controlează ordinea. Folosește valori mai mari (de ex., 50) pentru a plasa filele personalizate după cele integrate.
• twenty app pull scrie aspectele paginilor înapoi, cu filele și widgeturile lor inline. Un widget pe care exportul nu îl poate include încă, cum ar fi unul care afișează propria componentă front-end a aplicației dvs. sau unul de tipul VIEW depreciat, este raportat de pull în loc să fie scris; consultați ce nu scrie pull.

​

Widget-uri Câmp

{
  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 primește identificatorul universal al unui câmp de pe obiectul layout-ului.
• fieldDisplayMode este unul dintre 'FIELD', 'CARD', 'EDITOR', 'VIEW' sau 'TABLE'. TABLE încorporează o vizualizare care listează înregistrările unui câmp de relație de tip unu-la-mulți.
• isUIEditable se aplică câmpurilor de relație în modul de afișare TABLE. Valoarea implicită este true; setați-o la false pentru a împiedica editarea înregistrărilor din tabelul sau kanbanul încorporat.
• nestedRelationFieldMetadataId este opțional și primește identificatorul universal al unui câmp de relație unu-la-mulți de pe obiectul țintă al relației, pentru a afișa în listă înregistrări aflate la două salturi de relație distanță (de ex., o pagină Company care afișează oportunitățile persoanelor companiei sau o pagină Person care afișează oportunitățile companiei persoanei). Primul salt poate fi un câmp de relație unu-la-mulți sau mulți-la-unu, al doilea trebuie să fie unu-la-mulți (relațiile de tip junction nu sunt acceptate) și necesită fieldDisplayMode: 'TABLE' — combinarea lui cu orice alt mod de afișare reprezintă o eroare de validare, deoarece un widget îmbricat este întotdeauna redat ca o vizualizare încorporată.

​

Widgeturi de tabel de înregistrări

{
  universalIdentifier: 'd1d2d3d4-d5d6-4000-8000-000000000004',
  title: 'Open opportunities',
  type: 'RECORD_TABLE',
  configuration: {
    configurationType: 'RECORD_TABLE',
    viewUniversalIdentifier: OPPORTUNITIES_VIEW_UNIVERSAL_IDENTIFIER,
    recordLimit: 8,
    isUIEditable: false,
  },
}

• viewUniversalIdentifier identifică vizualizarea de afișat.
• recordLimit este opțional și limitează numărul de înregistrări afișate de widget.
• isUIEditable se aplică vizualizărilor de tabel și kanban. Acesta permite editarea celulelor din tabel sau editarea, mutarea și crearea cardurilor kanban. Valoarea implicită este true pentru aspectele RECORD_PAGE și false pentru alte aspecte.
• isUIEditable controlează doar acțiunile din interfața cu utilizatorul. Permisiunile pentru înregistrări se aplică în continuare, iar setările vizualizării rămân editabile numai în editorul de aspect al paginii.

​

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,
      },
    },
  ],
});

​

Puncte cheie

• pageLayoutUniversalIdentifier este obligatoriu și trebuie să indice către un layout de pagină care există deja la momentul instalării — fie un layout standard Twenty, fie unul definit de propria ta aplicație. Referințele cross-app către layouturi deținute de o altă aplicație instalată nu sunt acceptate în prezent. Când lipsește layoutul părinte, instalarea eșuează cu o eroare clară de validare.
• Pentru layout-urile standard Twenty, importați identificatorii din twenty-sdk/define:
  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
  // …
  
  Fiecare intrare de layout își expune, de asemenea, tabs și widgets, astfel încât puteți face referire la orice nivel:
  STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.tabs.home
    .universalIdentifier;
  STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.tabs.home.widgets
    .fields.universalIdentifier;
  
  Este disponibil și un alias scurt STANDARD_PAGE_LAYOUT:
  import { STANDARD_PAGE_LAYOUT } from 'twenty-sdk/define';
  
  STANDARD_PAGE_LAYOUT.companyRecordPage.universalIdentifier;
  
• widgets sunt limitate doar la această filă — fac referire la front components, vizualizări etc., exact ca widgeturile definite inline în definePageLayout.
• position controlează ordonarea în raport cu filele existente din layoutul țintă. Alege o valoare care să plaseze fila ta acolo unde dorești, relativ la filele predefinite.
• Folosește aceasta în loc de definePageLayout atunci când vrei doar să adaugi la un layout existent. Folosește definePageLayout atunci când deții întregul layout.
• twenty app pull scrie înapoi o filă pe care ai adăugat-o la un aspect de pagină care nu îți aparține ca fișier definePageLayoutTab(), cu widgeturile sale inline, în aceleași limite ca widgeturile unui definePageLayout().

​

definePageLayoutWidget

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

export default definePageLayoutWidget({
  universalIdentifier: 'b1b2b3b4-b5b6-4000-8000-000000000003',
  pageLayoutTabUniversalIdentifier:
    STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.companyRecordPage.tabs.home
      .universalIdentifier,
  title: 'Hello World',
  type: 'FRONT_COMPONENT',
  position: {
    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
    index: 1000,
    heightBehavior: PageLayoutWidgetVerticalListHeightBehavior.TAB_VIEWPORT,
  },
  configuration: {
    configurationType: 'FRONT_COMPONENT',
    frontComponentUniversalIdentifier:
      HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
  },
});

​

Puncte cheie

• pageLayoutTabUniversalIdentifier este obligatoriu și trebuie să indice către o filă care există deja la momentul instalării: o filă standard Twenty (STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.\<object>RecordPage.tabs.\<tab>.universalIdentifier), o filă a unuia dintre propriile tale layouturi sau o filă a paginii de înregistrare pe care Twenty o generează pentru unul dintre obiectele tale. Filele generate au identificatori deterministici, astfel încât îi poți calcula:
  import {
    getSystemPageLayoutTabUniversalIdentifier,
    getSystemRecordPageLayoutUniversalIdentifier,
  } from 'twenty-sdk/define';
  
  const EXAMPLE_HOME_TAB_UNIVERSAL_IDENTIFIER =
    getSystemPageLayoutTabUniversalIdentifier({
      objectMetadataApplicationUniversalIdentifier:
        APPLICATION_UNIVERSAL_IDENTIFIER,
      pageLayoutUniversalIdentifier:
        getSystemRecordPageLayoutUniversalIdentifier({
          objectMetadataApplicationUniversalIdentifier:
            APPLICATION_UNIVERSAL_IDENTIFIER,
          objectUniversalIdentifier: EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER,
        }),
      title: 'Home',
    });
  
• position este obligatoriu, deoarece fila nu face parte din manifestul tău, iar modul său de layout nu poate fi dedus. Potrivește modul de layout al filei: filele paginii de înregistrare sunt liste verticale, așadar folosește { layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST, index } cu un index mai mare decât cel al widgeturilor integrate (widgetul Fields este la 0).
• Pentru o listă verticală, setați position.heightBehavior la PageLayoutWidgetVerticalListHeightBehavior.TAB_VIEWPORT pentru a umple zona de vizualizare a unei file sau la PageLayoutWidgetVerticalListHeightBehavior.FIT_CONTENT pentru a utiliza conținutul widgetului sau înălțimea configurată. Importați această enumerare din twenty-sdk/define, ca în exemplul de mai sus. Dacă este omis, widgetul își păstrează valoarea implicită integrată. Doar un widget activ per filă poate umple zona de vizualizare, iar indexul său trebuie să îl plaseze după toate widgeturile cu conținut adaptat. heightBehavior nu este acceptat în pozițiile GRID sau CANVAS.
• configuration funcționează exact ca un widget definit inline în definePageLayout sau definePageLayoutTab: face referire la componente front, vizualizări, câmpuri și așa mai departe.
• Folosește această opțiune în loc de definePageLayoutTab atunci când fila există deja și vrei doar să plasezi un widget pe ea. Folosește definePageLayoutTab atunci când vrei o filă proprie.
• twenty app pull scrie înapoi un widget pe care l-ai adăugat la o filă care nu îți aparține ca fișier definePageLayoutWidget(), în aceleași limite ca widgeturile unui definePageLayout().