#ctx.view

Le contrôleur de la vue actuellement active (fenêtre de dialogue, tiroir, popover, zone intégrée, etc.), utilisé pour accéder aux informations et aux opérations au niveau de la vue. Fourni par FlowViewContext, il est uniquement disponible dans le contenu des vues ouvertes via ctx.viewer ou ctx.openView.

#Scénarios d'utilisation

Note : ctx.view est uniquement disponible dans les environnements RunJS disposant d'un contexte de vue (par exemple, à l'intérieur du content de ctx.viewer.dialog(), dans les formulaires de dialogue ou à l'intérieur des sélecteurs d'association). Dans les pages standard ou les contextes backend, il est undefined. Il est recommandé d'utiliser le chaînage optionnel (ctx.view?.close?.()).

#Définition du type

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 dans les vues de configuration de flux de travail
};

#Propriétés et méthodes communes

Actuellement, seuls dialog et drawer prennent en charge Header et Footer.

#Champs communs de inputArgs

Les champs de inputArgs varient selon le scénario d'ouverture. Les champs courants incluent :

Accédez à ces champs via ctx.getVar('ctx.view.inputArgs.xxx') ou ctx.view.inputArgs.xxx.

#Exemples

#Fermer la vue actuelle

// Fermer le dialogue après une soumission réussie
await ctx.resource.runAction('create', { data: formData });
ctx.view?.close();

// Fermer et renvoyer les résultats
ctx.view?.close({ id: newRecord.id, name: newRecord.name });

#Utiliser Header / Footer dans le contenu

function DialogContent() {
  const ctx = useFlowViewContext();
  const { Header, Footer, close } = ctx.view;
  return (
    <div>
      <Header title="Modifier" extra={<Button size="small">Aide</Button>} />
      <div>Contenu du formulaire...</div>
      <Footer>
        <Button onClick={() => close()}>Annuler</Button>
        <Button type="primary" onClick={handleSubmit}>Envoyer</Button>
      </Footer>
    </div>
  );
}

#Branchement basé sur le type de vue ou inputArgs

if (ctx.view?.type === 'embed') {
  // Masquer l'en-tête dans les vues intégrées
  ctx.model.setProps('headerStyle', { display: 'none' });
}

const collectionName = ctx.view?.inputArgs?.collectionName;
if (collectionName === 'users') {
  // Scénario du sélecteur d'utilisateurs
}

#Relation avec ctx.viewer et ctx.openView

ctx.viewer est responsable de l'ouverture d'une vue, tandis que ctx.view représente l'instance de la vue "actuelle" ; ctx.openView est utilisé pour ouvrir des vues de flux de travail préconfigurées.

#Précautions

• ctx.view est uniquement disponible à l'intérieur d'une vue ; il est undefined sur les pages standard.
• Utilisez le chaînage optionnel : ctx.view?.close?.() pour éviter les erreurs lorsqu'aucun contexte de vue n'existe.
• Le result de close(result) est transmis à la Promise renvoyée par ctx.viewer.open().

#Voir aussi

• ctx.openView() : Ouvrir une vue de flux de travail préconfigurée
• ctx.modal : Fenêtres contextuelles légères (informations, confirmation, etc.)

ctx.viewer fournit des méthodes telles que dialog(), drawer(), popover() et embed() pour ouvrir des vues. Le contenu (content) ouvert par ces méthodes peut accéder à ctx.view.