Avant-première développeur de la nouvelle interface utilisateur moderne d'Acumatica

Résumé 

Dans cet article de blog, je vais vous montrer comment activer l'aperçu développeur de la nouvelle interface utilisateur d'Acumatica, publiée dans la version 23R1. Après avoir activé l'interface utilisateur, je vous montrerai comment reconstruire le site de sorte qu'après avoir apporté des modifications aux fichiers, vous puissiez voir les changements que vous avez apportés pendant le développement. 

J'ai été extrêmement enthousiaste au sujet de la nouvelle interface moderne d'Acumatica et j'ai attendu avec impatience sa sortie. Dans Acumatica 23R1, sorti le 4/4/2023, elle est enfin disponible en avant-première. Je vais vous montrer comment l'activer pour que vous puissiez la voir aussi. 

Activation de l'interface utilisateur moderne

Étape 1 : Modifier le fichier web.config  

Under the <Appsettings> tag of the web.config file, add the following: 

GIST: https://gist.github.com/lekker-solutions/a99f55e8da2613c1670a0ebe48e6b0ad

Étape 2 : Activer l'interface utilisateur moderne pour certaines pages

L'interface utilisateur moderne n'est disponible que pour certaines pages. Vous pouvez voir quelles pages dans le chemin d'accès au site \FrontendSources\screen\src\screens. Naviguez vers l'écran "Site Map" et assurez-vous que la colonne "UI" est visible.

Étape 3 : Visualiser la page

Voilà, l'écran est rendu avec la nouvelle interface utilisateur !

Structure de l'interface utilisateur moderne

Localisation

Sous le chemin {siteRoot}\FrontendSources\screen\src\screens, vous verrez une collection de dossiers. Chaque dossier représente un seul écran, et à l'intérieur du dossier se trouvent les fichiers qui pilotent l'écran. Ainsi, dans le chemin {siteRoot}\FrontendSources\screen\src\screens\SO\SO301000 se trouvent les fichiers qui pilotent l'écran 'Commande client'.

Ce dossier contient les fichiers suivants :

1. html - Un fichier HTML qui définit la présentation de l'écran du SO301000
2. ts - Un fichier TypeScript Screen viewmodel pour SO301000
3. ts - Un fichier TypeScript supplémentaire qui définit des modèles de vue supplémentaires (facultatif, il rend simplement le fichier principal SO301000.ts moins dense à lire).

Ces fichiers constituent ce qui était auparavant une paire unique SO301000.aspx et SO301000.aspx.cs dans le paradigme actuel de l'interface utilisateur d'Acumatica. Dans d'autres articles de blog, je détaillerai comment ces fichiers peuvent être édités.

Créer sa propre page

Si vous souhaitez créer une nouvelle page, suivez les étapes suivantes :

1. Copier un répertoire entier d'une page existante
2. Renommez le répertoire avec l'identifiant de votre plan du site, par exemple LS301000.
3. Renommez les fichiers .html et .ts en fonction de l'identifiant du plan du site que vous avez choisi à l'étape 2.
4. Apportez vos modifications comme décrit dans la section suivante de ce billet.

Construire vos changements

Si vous créez un nouvel écran ou si vous mettez à jour les fichiers sources d'un écran existant, vous devez reconstruire les écrans. Pour ce faire, procédez comme suit :

1. Assurez-vous que vous avez installé node et npm. Voici un guide : Configurer NodeJS sur Windows natif | Microsoft Learn
2. Dans le terminal Windows, naviguez vers le chemin {siteRoot}\frontendsources
3. Exécutez les commandes suivantes :
   1. npm run getmodules
   2. npm run build
4. Vous pouvez maintenant soit visualiser les modifications apportées à la page, soit ajouter une entrée de plan du site dans un nouveau dossier.

Si vous rencontrez des problèmes après la construction, et que vous ne voyez toujours pas vos modifications reflétées dans l'application, vous pouvez effacer les caches de l'application, ce qui peut être fait en appuyant sur le bouton "Clear Caches" sur l'écran "Apply Updates" (SM203510), et vos modifications devraient ensuite être visibles.

Résumé

Après avoir écouté les discussions de l'équipe de la plateforme sur la nouvelle interface utilisateur depuis plusieurs années, je suis heureux de pouvoir enfin jouer avec ! C'est une étape majeure qui permet à Acumatica de rester l'ERP (Enterprise Resource Planning) le plus moderne du marché.

Bon codage !