#ctx.view

The currently active view controller (dialog, drawer, popover, embedded area, etc.), used to access view-level information and operations. Provided by FlowViewContext, it is only available within view content opened via ctx.viewer or ctx.openView.

#Use Cases

Note: ctx.view is only available in RunJS environments with a view context (e.g., inside the content of ctx.viewer.dialog(), in dialog forms, or inside association selectors). In standard pages or backend contexts, it is undefined. It is recommended to use optional chaining (ctx.view?.close?.()).

#Type Definition

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>;  // Available in workflow configuration views
};

#Common Properties and Methods

Currently, only dialog and drawer support Header and Footer.

#Common inputArgs Fields

The fields in inputArgs vary depending on the opening scenario. Common fields include:

Access these via ctx.getVar('ctx.view.inputArgs.xxx') or ctx.view.inputArgs.xxx.

#Examples

#Closing the Current View

// Close dialog after successful submission
await ctx.resource.runAction('create', { data: formData });
ctx.view?.close();

// Close and return results
ctx.view?.close({ id: newRecord.id, name: newRecord.name });

#Using Header / Footer in Content

function DialogContent() {
  const ctx = useFlowViewContext();
  const { Header, Footer, close } = ctx.view;
  return (
    <div>
      <Header title="Edit" extra={<Button size="small">Help</Button>} />
      <div>Form content...</div>
      <Footer>
        <Button onClick={() => close()}>Cancel</Button>
        <Button type="primary" onClick={handleSubmit}>Submit</Button>
      </Footer>
    </div>
  );
}

#Branching Based on View Type or inputArgs

if (ctx.view?.type === 'embed') {
  // Hide header in embedded views
  ctx.model.setProps('headerStyle', { display: 'none' });
}

const collectionName = ctx.view?.inputArgs?.collectionName;
if (collectionName === 'users') {
  // User selector scenario
}

#Relationship with ctx.viewer and ctx.openView

ctx.viewer is responsible for "opening" a view, while ctx.view represents the "current" view instance. ctx.openView is used to open pre-configured workflow views.

#Notes

• ctx.view is only available inside a view; it is undefined on standard pages.
• Use optional chaining: ctx.view?.close?.() to avoid errors when no view context exists.
• The result from close(result) is passed to the Promise returned by ctx.viewer.open().

#Related

• ctx.openView(): Open a pre-configured workflow view
• ctx.modal: Lightweight popups (info, confirmation, etc.)

ctx.viewer provides methods like dialog(), drawer(), popover(), and embed() to open views. The content opened by these methods can access ctx.view.