Améliorer les performances de vos smartforms à onglets

Aujourd’hui, nous parlerons encore d’une manière d’accélérer le chargement d’un smartforms. C’est le troisième article sur les performances ! Voici les liens des deux autres :

La bonne pratique du jour concerne les formulaires à onglets.

Par défaut, le contenu de chaque onglet est chargé à l’ouverture du formulaire. Imaginez un formulaire avec trois onglets, dont les deux premiers se chargent en une seconde et le troisième en trois secondes. Par défaut donc, 1+1+3=5 secondes pour afficher le formulaire.

L’objectif est de charger les onglets au fur et à mesure que l’utilisateur navigue. Ainsi, le formulaire imaginé précédemment se chargera en une seconde (onglet 1), puis prendra une autre seconde pour l’onglet 2 et trois dernières secondes pour l’onglet 3. Les meilleurs en mathématique me diraient que les performances, à terme, sont les mêmes. Je leur répondrai que l’expérience utilisateur est pourtant bien meilleure.

Trève de discussion, voici la recette :

  1. ajouter un datalabel dans chaque onglet sauf le premier. Vous pouvez leur donner le nom de l’onglet dans lequel il se trouve.
  2. renommer vos onglets correctement.
  3. dans la règle When the Form is Initializing, supprimer les actions on MaVue, execute the Initialize method des vues de vos onglets autres que le premier.
  4. pour chaque onglet,
    1. ajouter un événementWhen a control on the form raises an event, configurez le pour devenir When Panel2 is Selected.
    2. ajouter une condition a control on the form does not contain a value, sélectionner le datalabel correspondant à l’onglet concerné. // 1/2 pour éviter de charger plusieurs fois l’onglet
    3. ajouter les actions Execute another rule, afin d’exécuter les règles Initialize des vues de l’onglet concerné.
    4. ajouter une action transfert data pour donner une valeur au datalabel correspondant à l’onglet concerné. // 2/2 pour éviter de charger plusieurs fois l’onglet
  5. Voilà !

Une remarque, j’ai utilisé l’événement Selected de l’onglet. Chaque onglet propose trois événements :

  • Clicked, pour une règle sur le clic sur l’onglet. Ne fonctionne pas avec l’action Go to a tab.
  • Selected, pour une règle sur l’affichage de l’onglet. Fonctionne avec l’action Go to a tab. S’active après l’événement Clicked.
  • Deselected, pour une règle à la sortie d’un onglet. Fonctionne avec l’action Go to a tab.

En bonus, voici une vidéo (en anglais) de la base de connaissance K2 : https://help.k2.com/displaycontent.aspx?id=6250.

C’est tout pour cette fois, cheers !

 

benjamin

Technical Specialist @t K2 France ----- Twitter : @benjaminbertram ----- LinkedIn : Benjamin Bertram

4 thoughts to “Améliorer les performances de vos smartforms à onglets”

  1. Hello Marwen,

    L’action sur le Click se déclenchera à chaque clique sur l’onglet, même sans changer d’onglet. Un peu comme le clique d’un bouton.
    L’action sur le Selected ne se déclenche pas si l’on reste dans le même onglet.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.