Référence du code de page (Vue.js)

Chaque interface SoftyFlow s'exécute dans le navigateur comme une instance Vue.js 2, avec les composants Element UI. Les scripts de sa page Code (ouverte avec Open Action / Script Editor dans le rail de droite du builder) deviennent les options de cette instance. Cette page décrit ce que chaque script doit contenir et ce que le code peut utiliser. Pour l'éditeur lui-même (déclencheurs, historique des versions, thèmes de l'éditeur), voir La page Code ; pour le no-code, voir les Actions ; pour les classes appelées depuis le code, voir le SDK Web Modeler.

1. Construction d'une page#Lien direct vers 1. Construction d'une page

À l'ouverture d'une page, SoftyFlow assemble une instance Vue à partir :

1. des widgets du builder : chaque champ lit et écrit sa valeur dans this.models.<model> (le Model du widget) ;
2. des scripts de la page Code : Functions devient les méthodes, Variables les données, Computed les valeurs calculées, Watch les observateurs et Filters les filtres ;
3. des actions visuelles : chaque fonction des déclencheurs On Click, Watch et On Mounted devient une méthode de la page, sous son nom ; chaque action Computed devient une valeur calculée copiée dans this.models.<nom>.

Quand la page est montée, les observateurs démarrent, puis les actions On Mounted s'exécutent l'une après l'autre, puis le script On Mounted.

2. Ce que le code peut utiliser#Lien direct vers 2. Ce que le code peut utiliser

Dans chaque script, this est la page (l'instance Vue) :

Les classes du SDK (Collection, Users, SQLDatabase, SoftyTables, Report, Instance, Task, Api, Email, File…) et des bibliothèques comme moment et _ (lodash) sont disponibles dans le code ; this.$message({ type: 'success', message: '…' }) affiche un message (Element UI).

3. Les scripts#Lien direct vers 3. Les scripts

Functions#Lien direct vers Functions

Un objet dont les propriétés sont des fonctions : les méthodes de la page. Une méthode peut être async et utiliser await.

{
  async loadOrders() {
    const orders = new Collection({ id: 'orders', mode: this.SF_mode });
    this.models.orders = await orders.find({
      criteria: { requester: this.SF_connectedUser.mail },
      sortby: 'createdAt',
      direction: -1
    });
  },

  orderTotal() {
    return (this.models.lines || []).reduce((sum, line) => sum + (Number(line.amount) || 0), 0);
  }
}

Variables#Lien direct vers Variables

Un objet dont les clés deviennent des données de la page, lues et écrites avec this.<clé>. Gardez les valeurs des widgets dans this.models.

{
  "loading": false,
  "statuses": ["draft", "sent", "paid"]
}

Watch#Lien direct vers Watch

Un objet dont les clés sont les expressions observées (models.<model> pour un widget) et les valeurs des fonctions (newValue, oldValue), ou des objets { handler, deep: true } pour observer aussi l'intérieur d'un objet ou d'une liste.

{
  'models.client': function (newValue, oldValue) {
    if (newValue !== oldValue) this.loadOrders();
  },
  'models.lines': {
    deep: true,
    handler(lines) {
      this.models.total = this.orderTotal();
    }
  }
}

Une fonction du déclencheur visuel Watch sur la même variable s'exécute aussi : depuis la 8.6, l'observateur du script s'exécute d'abord, puis les actions, qui reçoivent SF_input.newValue et SF_input.oldValue (aussi dans leurs actions imbriquées, dans un if, sa branche else ou une boucle). Avant la 8.6, les actions Watch remplaçaient l'observateur du script.

Computed#Lien direct vers Computed

Un objet de fonctions qui renvoient une valeur calculée à partir d'autres valeurs. La valeur est mise en cache et recalculée quand ce qu'elle lit change ; lisez-la avec this.<nom>.

{
  fullName() {
    return `${this.models.firstName || ''} ${this.models.lastName || ''}`.trim();
  }
}

Multilingual#Lien direct vers Multilingual

La table de traduction de la page, en JSON : un tableau avec une ligne par texte à traduire. Chaque ligne contient id_ (un identifiant généré, par exemple input1_name), le texte dans la langue par défaut (colonne Default language(<code>) : ce texte est la clé recherchée à l'exécution de la page) et une colonne par autre langue de la page.

[
  { "id_": "input1_name", "Default language(fr)": "Nom", "en": "Last name" },
  { "id_": "btn_submit_buttonName", "Default language(fr)": "Envoyer", "en": "Submit" }
]

La table est le plus souvent remplie par l'import CSV de l'action visuelle Multilingual, qui règle aussi la langue par défaut et les langues de la page. À l'exécution, les textes des widgets passent par le filtre SF_translate, qui les remplace par la traduction de la langue active ; utilisez le même filtre pour vos propres textes dans un widget HTML ({{ 'Mon texte' | SF_translate }}). Voir Multilingue.

Filters#Lien direct vers Filters

Un objet de fonctions qui mettent une valeur en forme pour l'affichage (filtres Vue 2).

{
  currency(value) {
    return Number(value || 0).toFixed(2) + ' €';
  }
}

On Mounted#Lien direct vers On Mounted

Le corps d'une fonction, exécuté une fois la page montée, après les actions On Mounted. this est la page et await s'utilise directement.

this.models.requester = this.SF_connectedUser.fullName;
if (this.SF_taskId) {
  // page ouverte comme tâche
}
await this.loadOrders();

CSS Styling#Lien direct vers CSS Styling

Le CSS de la page. Il est chargé en dernier, après toutes les autres feuilles de style de la page (voir Ordre des feuilles de style).

4. Règles appliquées à l'exécution de la page (8.6)#Lien direct vers 4. Règles appliquées à l'exécution de la page (8.6)

• Un script qui ne compile pas est ignoré : si Functions, Variables, Watch, Computed, Filters ou On Mounted ne compile pas (une accolade manquante, une virgule en trop), ce script est laissé de côté et le reste de la page fonctionne ; avant la 8.6, la page restait blanche. La console du navigateur nomme les scripts ignorés : SoftyFlow: the page code functions, watch does not compile, it is ignored ou SoftyFlow: the page onMounted code does not compile, it is ignored. Si une méthode ou une variable semble manquer, ouvrez d'abord la console.
• Les règles de widget invalides valent faux : une règle Visible invalide masque le widget, une règle Required ou Disable invalide laisse le widget ni obligatoire ni désactivé, et une expression {{ }} invalide dans un texte s'affiche telle quelle. Elles sont listées dans la console (SoftyFlow: parts of this page are ignored because they are not valid).
• Les paramètres d'URL ne remplacent pas les données internes de la page : un paramètre nommé comme une donnée interne (models, management, SF…, par exemple ?models=1) ne la remplace plus.
• Actions Watch et script Watch se cumulent (voir Watch).
• Bibliothèques chargées à la demande : CKEditor n'est chargé que si la page a un widget Editor ou nomme DecoupledEditor ou CKEDITOR, le lecteur de QR code que si la page contient qrcode, l'API Google au premier appel gapi.load(...). Un code qui en utilise une sans ces marqueurs doit la charger lui-même (voir La page Code).
• Appels contrôlés par le serveur : les appels du SDK faits par la page s'exécutent avec les droits de l'utilisateur connecté, et depuis la 8.6 le serveur refuse certaines étapes d'agrégation et certains opérateurs de critères (voir Règles appliquées par le serveur).
• Les dates sans heure sont enregistrées à 12:00 UTC du jour choisi : comparez des jours, pas des heures (voir Enregistrement des dates sans heure).