#ctx.view

El controlador de la vista activa actualmente (diálogo, cajón, capa emergente, área incrustada, etc.), utilizado para acceder a información y operaciones a nivel de vista. Proporcionado por FlowViewContext, solo está disponible dentro del contenido de la vista abierta a través de ctx.viewer o ctx.openView.

#Escenarios de uso

Nota: ctx.view solo está disponible en entornos RunJS con un contexto de vista (por ejemplo, dentro del content de ctx.viewer.dialog(), en formularios de diálogo o dentro de selectores de asociación). En páginas estándar o contextos de backend, es undefined. Se recomienda utilizar el encadenamiento opcional (ctx.view?.close?.()).

#Definición de tipos

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>;  // Disponible en vistas de configuración de flujo de trabajo
};

#Propiedades y métodos comunes

Actualmente, solo dialog y drawer admiten Header y Footer.

#Campos comunes en inputArgs

Los campos en inputArgs varían según el escenario de apertura. Los campos comunes incluyen:

Acceda a estos mediante ctx.getVar('ctx.view.inputArgs.xxx') o ctx.view.inputArgs.xxx.

#Ejemplos

#Cerrar la vista actual

// Cerrar el diálogo tras un envío exitoso
await ctx.resource.runAction('create', { data: formData });
ctx.view?.close();

// Cerrar y devolver resultados
ctx.view?.close({ id: newRecord.id, name: newRecord.name });

#Uso de Header / Footer en el contenido

function DialogContent() {
  const ctx = useFlowViewContext();
  const { Header, Footer, close } = ctx.view;
  return (
    <div>
      <Header title="Editar" extra={<Button size="small">Ayuda</Button>} />
      <div>Contenido del formulario...</div>
      <Footer>
        <Button onClick={() => close()}>Cancelar</Button>
        <Button type="primary" onClick={handleSubmit}>Enviar</Button>
      </Footer>
    </div>
  );
}

#Ramificación basada en el tipo de vista o inputArgs

if (ctx.view?.type === 'embed') {
  // Ocultar cabecera en vistas incrustadas
  ctx.model.setProps('headerStyle', { display: 'none' });
}

const collectionName = ctx.view?.inputArgs?.collectionName;
if (collectionName === 'users') {
  // Escenario de selector de usuarios
}

#Relación con ctx.viewer y ctx.openView

ctx.viewer es responsable de "abrir" una vista, mientras que ctx.view representa la instancia de la vista "actual"; ctx.openView se utiliza para abrir vistas de flujo de trabajo preconfiguradas.

#Notas

• ctx.view solo está disponible dentro de una vista; es undefined en páginas estándar.
• Use encadenamiento opcional: ctx.view?.close?.() para evitar errores cuando no existe un contexto de vista.
• El result de close(result) se pasa a la Promesa devuelta por ctx.viewer.open().

#Relacionado

• ctx.openView(): Abrir una vista de flujo de trabajo preconfigurada
• ctx.modal: Ventanas emergentes ligeras (información, confirmación, etc.)

ctx.viewer proporciona métodos como dialog(), drawer(), popover() y embed() para abrir vistas. El contenido (content) abierto por estos métodos puede acceder a ctx.view.