#ctx.view

Der aktuell aktive View-Controller (Dialog, Drawer, Popover, eingebetteter Bereich usw.), der für den Zugriff auf Informationen und Operationen auf Ansichtsebene verwendet wird. Er wird von FlowViewContext bereitgestellt und ist nur innerhalb von Inhalten verfügbar, die über ctx.viewer oder ctx.openView geöffnet wurden.

#Anwendungsfälle

Hinweis: ctx.view ist nur in RunJS-Umgebungen mit einem View-Kontext verfügbar (z. B. innerhalb des content von ctx.viewer.dialog(), in Dialogformularen oder innerhalb von Verknüpfungsauswahlen). In Standardseiten oder Backend-Kontexten ist es undefined. Es wird empfohlen, Optional Chaining zu verwenden (ctx.view?.close?.()).

#Typdefinition

type FlowView = {
  type: 'drawer' | 'popover' | 'dialog' | 'embed';
  inputArgs: Record<string, any>;
  Header: React.FC<{ title?: React.ReactNode; extra?: React.ReactNode }> | null;
  Footer: React.FC<{ children?: React.ReactNode }> | null;
  close: (result?: any, force?: boolean) => void;
  update: (newConfig: any) => void;
  navigation?: ViewNavigation;
  destroy?: () => void;
  submit?: () => Promise<any>;  // In Workflow-Konfigurationsansichten verfügbar
};

#Gängige Eigenschaften und Methoden

Derzeit unterstützen nur dialog und drawer die Komponenten Header und Footer.

#Gängige Felder in inputArgs

Die Felder in inputArgs variieren je nach Öffnungsszenario. Zu den häufigsten Feldern gehören:

Greifen Sie auf diese über ctx.getVar('ctx.view.inputArgs.xxx') oder ctx.view.inputArgs.xxx zu.

#Beispiele

#Schließen der aktuellen Ansicht

// Dialog nach erfolgreichem Absenden schließen
await ctx.resource.runAction('create', { data: formData });
ctx.view?.close();

// Schließen und Ergebnisse zurückgeben
ctx.view?.close({ id: newRecord.id, name: newRecord.name });

#Verwendung von Header / Footer im Inhalt

function DialogContent() {
  const ctx = useFlowViewContext();
  const { Header, Footer, close } = ctx.view;
  return (
    <div>
      <Header title="Bearbeiten" extra={<Button size="small">Hilfe</Button>} />
      <div>Formularinhalt...</div>
      <Footer>
        <Button onClick={() => close()}>Abbrechen</Button>
        <Button type="primary" onClick={handleSubmit}>Absenden</Button>
      </Footer>
    </div>
  );
}

#Verzweigung basierend auf Ansichtstyp oder inputArgs

if (ctx.view?.type === 'embed') {
  // Kopfzeile in eingebetteten Ansichten ausblenden
  ctx.model.setProps('headerStyle', { display: 'none' });
}

const collectionName = ctx.view?.inputArgs?.collectionName;
if (collectionName === 'users') {
  // Szenario für Benutzerauswahl
}

#Beziehung zu ctx.viewer und ctx.openView

ctx.viewer ist für das „Öffnen“ einer Ansicht zuständig, während ctx.view die „aktuelle“ Ansichtsinstanz darstellt. ctx.openView wird verwendet, um vorkonfigurierte Workflow-Ansichten zu öffnen.

#Hinweise

• ctx.view ist nur innerhalb einer Ansicht verfügbar; auf Standardseiten ist es undefined.
• Verwenden Sie Optional Chaining: ctx.view?.close?.(), um Fehler zu vermeiden, wenn kein View-Kontext existiert.
• Das result von close(result) wird an das von ctx.viewer.open() zurückgegebene Promise übergeben.

#Verwandte Themen

• ctx.openView(): Öffnet eine vorkonfigurierte Workflow-Ansicht
• ctx.modal: Leichtgewichtige Popups (Informationen, Bestätigungen usw.)

ctx.viewer bietet Methoden wie dialog(), drawer(), popover() und embed() zum Öffnen von Ansichten an. Der über diese Methoden geöffnete content kann auf ctx.view zugreifen.