• Français

      • FlowContext

      Dans le step handler de registerFlow, le paramètre ctx est une instance de FlowRuntimeContext. Grâce à la chaîne de délégation, il peut accéder à toutes les propriétés et méthodes au niveau du modèle et au niveau du moteur.

      La chaîne de délégation est la suivante :

      FlowRuntimeContext (contexte d'exécution du flow courant)
  → FlowModelContext (model.context, niveau modèle)
    → FlowEngineContext (engine.context, niveau global)

      Propriétés courantes

      Les propriétés ctx les plus utilisées dans le développement de plugins :

      PropriétéTypeDescription
      ctx.modelFlowModelInstance FlowModel courante
      ctx.apiAPIClientClient de requêtes HTTP, provenant de @nocobase/sdk
      ctx.viewerFlowViewerGestionnaire de popup/drawer, fournit des méthodes comme dialog(), drawer()
      ctx.messageMessageInstanceInstance message d' Antd, par exemple ctx.message.success('OK')
      ctx.notificationNotificationInstanceInstance notification d' Antd
      ctx.modalHookAPIInstance Modal.useModal d' Antd
      ctx.t(key, options?)(string, object?) => stringMéthode de traduction i18n
      ctx.routerRouterInstance de routeur react-router
      ctx.routeRouteOptionsInformations de la route courante (observable)
      ctx.locationLocationObjet location de l'URL courante (observable)
      ctx.refReact.RefObjectRéférence DOM du conteneur de vue du modèle courant
      ctx.flowKeystringClé du flow courant
      ctx.mode'runtime' | 'settings'Mode d'exécution courant : runtime à l'exécution, settings dans le panneau de configuration
      ctx.tokenstringToken d'authentification de l'utilisateur courant
      ctx.rolestringRôle de l'utilisateur courant
      ctx.authobjectInformations d'authentification : { roleName, locale, token, user }
      ctx.themeTokenobjectToken de thème Antd, utilisé pour récupérer les couleurs du thème, etc.
      ctx.dataSourceManagerDataSourceManagerGestionnaire de sources de données
      ctx.engineFlowEngineInstance FlowEngine
      ctx.appApplicationInstance Application de NocoBase
      ctx.i18ni18nInstance i18next

      Méthodes courantes

      Requêtes

      MéthodeDescription
      ctx.request(options)Émet une requête HTTP : URL interne via APIClient, URL externe via axios
      ctx.makeResource(ResourceClass)Crée une instance de Resource (par exemple MultiRecordResource, SingleRecordResource)
      ctx.initResource(className)Initialise une resource sur le model context

      Popups

      MéthodeDescription
      ctx.viewer.dialog(options)Ouvre une boîte de dialogue ; options.content reçoit (view) => JSX, fermez avec view.close()
      ctx.viewer.drawer(options)Ouvre un drawer
      ctx.openView(uid, options)Ouvre une vue déjà enregistrée (popup / drawer / dialog)

      Contrôle d'exécution du flow

      MéthodeDescription
      ctx.exit()Interrompt l'exécution du flow courant
      ctx.exitAll()Interrompt l'exécution de tous les flows
      ctx.getStepParams(stepKey)Récupère les paramètres enregistrés d'un step donné
      ctx.setStepParams(stepKey, params)Définit les paramètres d'un step donné
      ctx.getStepResults(stepKey)Récupère le résultat d'exécution d'un step antérieur

      Action et Event

      MéthodeDescription
      ctx.runAction(actionName, params?)Exécute une action enregistrée
      ctx.getAction(name)Récupère la définition d'une action enregistrée
      ctx.getActions()Récupère toutes les actions enregistrées
      ctx.getEvents()Récupère tous les events enregistrés

      Permissions

      MéthodeDescription
      ctx.aclCheck(params)Vérifie les permissions ACL
      ctx.aclInstance ACL

      Autres

      MéthodeDescription
      ctx.resolveJsonTemplate(template)Résout un template d'expression {{ ctx.xxx }}
      ctx.getVar(path)Résout un chemin d'expression unique ctx.xxx.yyy
      ctx.runjs(code, variables?, options?)Exécute dynamiquement du code JavaScript
      ctx.requireAsync(url)Charge dynamiquement un module (style CommonJS)
      ctx.importAsync(url)Charge dynamiquement un module (style ESM)
      ctx.loadCSS(href)Charge dynamiquement un fichier CSS
      ctx.onRefReady(ref, callback, timeout)Attend qu'un ref React soit prêt avant d'exécuter le callback
      ctx.defineProperty(key, options)Enregistre dynamiquement une nouvelle propriété
      ctx.defineMethod(name, fn, info?)Enregistre dynamiquement une nouvelle méthode

      Cas d'usage typiques en développement de plugins

      Afficher un message dans un click handler

      MyModel.registerFlow({
  key: 'clickFlow',
  on: 'click',
  steps: {
    showMessage: {
      async handler(ctx) {
        ctx.message.success(ctx.t('Opération réussie'));
      },
    },
  },
});

      Créer un enregistrement via une dialog

      MyModel.registerFlow({
  key: 'clickFlow',
  on: 'click',
  steps: {
    openDialog: {
      async handler(ctx) {
        ctx.viewer.dialog({
          title: ctx.t('Nouvel enregistrement'),
          content: (view) => <MyForm onClose={() => view.close()} />,
        });
      },
    },
  },
});

      Récupérer les données de la ligne courante (action sur enregistrement)

      MyRecordAction.registerFlow({
  key: 'clickFlow',
  on: 'click',
  steps: {
    showRecord: {
      async handler(ctx) {
        const index = ctx.model.context.recordIndex;
        const record = ctx.model.context.record;
        ctx.message.info(`Ligne ${index} : ${record.title}`);
      },
    },
  },
});

      Manipuler des données via une resource

      async handler(ctx) {
  const resource = ctx.model.context.resource;
  // Créer un enregistrement
  await resource.create({ title: 'New item', completed: false });
  // Rafraîchir les données
  await resource.refresh();
}

      Liens connexes