Qu’est-ce que le Code Behind ?

Le “Code Behind” est une classe TypeScript qui est rattachée à une page. Elle permet de définir tous les événements de la page au même endroit, au lieu d’avoir jusqu'à présent une multitude de scripts éparpillés.

Exemple sans Code Behind

Exemple avec Code Behind

Comment ça marche ?

Il suffit de définir le nom de la méthode à appeler dans la configuration

"BeforeChildrenLoad": {
  "Method": "page_BeforeChildrenLoad"
}

Puis naviguer vers la méthode en positionnant le curseur sur le nom et appuyer sur F12.
Ou bien clic droit sur le nom et choisir “Go to Definition”

Si la page ne possède pas encore de Code Behind, le Studio nous demandera de valider sa création

Si la page possède déjà son Code Behind, le Studio nous demandera de valider la création de la méthode

On obtient l’exemple ci-dessous, prêt à être codé

export default class mypage_component {
  async page_BeforeChildrenLoad() {
    // Let's code
  }
}

Mutualisation de code

Comme les différents événements sont écrits dans une même classe, il est possible de mutualiser du code dans une méthode qui serait appelée par les autres.

export default class mypage_component {
   async cbCustomer_ValueChange() {
      const cbCustomer = $sender as ComboboxComponent;
      this.refreshFilter(cbCustomer.getValue());
   }

   async resetCustomer_Click() {
      this.refreshFilter(0);
   }

   async refreshFilter(customerId: number) {
      $variable.set('customer_ID', customerId, true);
      await $component.getById<ComboboxComponent>('cbContact').refreshAsync();
      await $component.getById<ComboboxComponent>('cbDeal').refreshAsync();
   }
}