AcumatiCaresLa semaine dernière, nous avons expliqué comment on pouvait facilement personnaliser un formulaire en ajoutant un nouveau champ et en effectuant une validation simple, illustrant ainsi notre intégration avec Visual Studio et la facilité de personnalisation des formulaires. Cette semaine, nous allons pousser la personnalisation à un niveau supérieur en prenant le produit prêt à l'emploi et en changeant complètement l'aspect et la convivialité que les éditeurs de logiciels indépendants peuvent utiliser pour mettre en marque blanche leur implémentation d'Acumatica.
Personnalisation de l'écran de base - Présentation de l'application
La première chose que je vais vous montrer est comment changer la palette de couleurs du produit. Sélectionnez l'onglet Configuration (1) et le sous-menu Paramètres communs (2). Choisissez ensuite Site Preferences (3) en bas du volet gauche sous USER SETTINGS. Dans la section DEFAUTS GENERAUX du formulaire, vous verrez que le thème de l'interface est réglé sur Défaut (4) - Figure 1 ci-dessous :
Lorsque vous cliquez sur la liste déroulante (4), deux choix s'offrent à vous : Défaut et Indigo - Figure 2.
Cependant, vous pouvez créer vos propres personnalisations et les installer vous-même pour qu'elles apparaissent comme un choix dans la liste déroulante, comme vous pouvez le voir dans la capture d'écran suivante, à la figure 3.
Pour créer votre propre thème, vous pouvez partir du thème par défaut et apporter des modifications spécifiques aux fichiers Cascading Style Sheets (.css) et Skins (.skin) qui se trouvent dans le dossier AppThemes, comme illustré ci-dessous à la figure 3.
Par exemple, vous pouvez ouvrir le fichier 00_Controls.css dans Visual Studio et apporter une simple modification à la couleur d'arrière-plan et à d'autres éléments contenus dans le fichier .css. Il suffit de double-cliquer sur le fichier qui se trouve dans le dossier App_Themes\Default de votre instance Acumatica du logiciel. Le fichier s'ouvrira par défaut dans Notepad où vous pourrez l'éditer - ou comme je le préfère, je fais un clic droit sur le fichier et je l'ouvre avec Visual Studio et j'y fais mes changements.
Vous remarquerez que le fichier 00_Control.css du thème Default a une couleur d'arrière-plan blanche représentée par le code hexagonal #FFFFFF pour blanc. Voir la capture d'écran(Figure 4) ci-dessous. Pour changer la couleur d'arrière-plan en noir, il suffit de remplacer le paramètre par #000000. En ayant de l'expérience avec les feuilles de style en cascade et les apparences, vous serez en mesure de créer différents thèmes adaptés à votre style et à l'image de marque de votre entreprise.
Les tutoriels et les références du site W3Schools.com constituent une ressource intéressante que vous pouvez exploiter, en particulier si vous êtes novice en matière de technologie ou si vous avez besoin d'une remise à niveau.
Prenons le thème AlCapone comme exemple d'un changement radical de l'aspect et de la convivialité du système pour montrer à quel point il est possible de modifier l'aspect du système. Tout d'abord, regardons les changements que ce thème apporte à l'apparence générale d'Acumatica :
Dans la capture d'écran de la figure 5, observez que la couleur d'arrière-plan est devenue noire et que les menus principaux, les sous-menus, la couleur d'arrière-plan du formulaire sont devenus gris foncé, etc. Vous remarquerez également que le contour du champ du module sélectionné est devenu jaune. Enfin, vous remarquerez que le logo en haut à droite de l'écran a été remplacé par la marque Al Capone. Comparez maintenant cette image à l'image par défaut ci-dessous :
J'ai pris essentiellement trois mesures pour mettre en œuvre les changements énumérés.
- J'ai changé le thème par défaut en AlCapone en sélectionnant l'onglet Configuration , Paramètres communs (sous-menu), Préférences du site. Puis PARAMÈTRES UTILISATEUR, DÉFAUTS GÉNÉRAUX. Et enfin, le thème de l'interface comme indiqué au début de ce billet.
- J'ai enregistré mes modifications et actualisé l'écran.
- J'ai ensuite modifié le logo en sélectionnant l'onglet ORGANISATION (menu principal), Structure de l'organisation (sous-menu), Branches et Logo (onglet), comme le montre la figure 7 ci-dessous.
Label blanc
Jusqu'à présent, je vous ai montré comment apporter des changements simples à l'aspect et à la convivialité du système, ainsi qu'à l'image de marque, et même comment remplacer le logo Acumatica par votre propre logo - en entrant dans le domaine du White Labeling. Le White Labeling est un terme qui dénote l'utilisation de produits génériques - y compris les progiciels qui peuvent être vendus par destiers (ISVs & OEMs) comme leurs propres produits. Les ISV et les OEM personnalisent l'aspect et la convivialité pour qu'ils correspondent au thème et à la marque de leur organisation, ainsi que la fonctionnalité de l'application (champs, logique commerciale, taxonomie, etc.) pour répondre aux besoins verticaux particuliers. Dans notre cas, un scénario courant consiste pour les éditeurs de logiciels indépendants à prendre nos principaux modules de gestion financière, de distribution, de gestion des services et de gestion des clients - individuellement ou en combinaison - et à les intégrer à leurs offres de produits verticaux afin de proposer une solution commerciale complète à leurs clients.
Revenons maintenant à une autre étape du processus de marquage blanc de l'application Acumatica en modifiant l'écran de connexion.
C'est très simple. Tout d'abord, vous devez disposer de quelques fichiers d'images à utiliser. Pour rester dans le thème d'Al Capone, j'ai pu trouver quelques photos historiques d'Al Capone que nous utiliserons ici pour illustrer notre propos. L'écran de connexion par défaut de la boîte est illustré ci-dessous à la figure 8. Lorsque vous actualisez l'écran de connexion, vous pouvez passer d'un fichier image à l'autre - celui-ci n'est qu'un des cinq fichiers livrés avec le produit.
Vous pouvez modifier non seulement l'image, mais aussi la couleur d'arrière-plan (ici en blanc) et le logo affiché en haut à droite de l'écran. Nous commencerons par modifier l'image. Puis l'arrière-plan et enfin le logo.
Ci-dessous, dans la figure 9, vous voyez l'image rendue ci-dessus dans la figure 8 avec le nom de fichier login_bg2.jpg (1). Chacun de ces fichiers - login_bg1.jpg, login_bg2.jpg, login_bg3.jpg, etc. est parcouru à chaque connexion ou rafraîchissement de la page web de connexion. Pour changer les images, il suffit de copier les nouvelles images dans le répertoire ...Acumatica ERP > AcumaticaDB6*>Icons et de les nommer comme ci-dessus.
Pour remplacer le logo en haut à droite par notre nouveau logo, nous remplaçons le fichier login_logo.png (2).
Après avoir fait cela, vous voyez que nous avons les fichiers d'image de connexion basés sur le thème Al Capone et le logo Al Capone, comme le montre la figure 10 ci-dessous.
Après avoir remplacé les images Acumatica par les images Al Capone, le résultat du rendu de la page de connexion est le suivant dans la figure 11 ci-dessous.
Mais attendez, nous n'avons pas encore fini... Il y a quelque chose qui cloche. C'est peut-être le designer qui est en moi. Mais nous devons faire un dernier changement pour mettre la "touche finale" à l'écran de connexion. Pour tirer parti de la couleur de l'arrière-plan, nous devons apporter une petite modification au fichier web.config.
Ouvrez Visual Studio et assurez-vous de l'avoir ouvert en faisant un clic droit dessus et en sélectionnant Run as administrator (Exécuter en tant qu'administrateur). Une fois chargé, ouvrez l'instance d'Acumatica Website en sélectionnant File>Open>Web Site et choisissez l'instance d'Acumatica que vous avez en cours d'exécution. Ouvrez ensuite le fichier web.config qui se trouve tout en bas du volet Solution à droite de l'écran (1). Faites une recherche sur styleSheetTheme (ligne 327) - (2) et changez le paramètre de "default" à "AlCapone" et sauvegardez votre changement. Voir la figure 12 ci-dessous.
Nous actualisons maintenant l'écran de connexion d'Acumatica et nous obtenons le rendu suivant(Figure 13) - qui, vous en conviendrez, a l'air plutôt net et complet. N'êtes-vous pas d'accord ?
Résumé
Nous venons de changer complètement l'aspect et la convivialité du produit - du produit Acumatica "par défaut" à un rebranding complet du produit sur le thème Al Capone - White Labeling le produit est prêt à être revendu comme votre propre offre avec nos grands modules de plate-forme de base - Financials, Distribution, Customer Management, and Service Management, etc.
Nous avons démontré à quel point il est simple d'apporter ces changements en créant notre propre thème pour représenter l'image de marque que nous voulions projeter - dans ce cas particulier, un thème de gangster à l'ancienne, si vous voulez.
Passons donc en revue les étapes de façon sommaire et ajoutons quelques éléments :
- Faites une sauvegarde des éléments par défaut dans le répertoire App_Themes de l'application Acumatica.
- Modifiez les fichiers.css - en changeant les couleurs des différents éléments - comme l'arrière-plan. Le plus simple est de trouver/remplacer tous les #007acc par votre nouvelle couleur d'arrière-plan.
- Dans l'application Acumatica, sélectionnez le thème d'interface que vous avez créé dans les Préférences du site - qui se trouvent sous CONFIGURATION > Paramètres communs > Préférences du site.
- Sauvegardez et actualisez la page web.
- Remplacer les images de l'écran de connexion en modifiant les images dans le répertoire des icônes de l'application Acumatica.
- Modifier le logo dans le répertoire des icônes.
- Modifier le logo en haut à gauche de l'application en téléchargeant un nouveau logo dans l'écran des branches sur l'onglet logo - qui se trouve sous ORGANISATION > Structure de l'organisation > Branches > Logo.
- Ouvrez le site Web Acumatica et modifiez le paramètre styleSheetTheme du fichier web.config comme indiqué ci-dessus afin de mettre en œuvre le thème de la couleur d'arrière-plan sur la page Web de connexion pour la touche finale.
Si nécessaire, vous pouvez modifier les feuilles de style en cascade (.css) et les apparences de manière plus approfondie afin de modifier davantage l'aspect et la convivialité du produit.
Nous disposons d'une plateforme très flexible et personnalisable, ce que nous avons, je l'espère, réussi à faire comprendre ici et dans les articles précédents. Nous sommes très enthousiastes quant à la puissance que cela représente pour nos partenaires et nos clients, et c'est pourquoi nous sommes si passionnés par la diffusion de cette nouvelle, afin que vous considériez les possibilités pour vos propres offres - que vous souhaitiez intégrer vos solutions existantes via des services Web et effectuer un simple échange de données ou produire une offre d'intégration complète et approfondie en écrivant des applications utilisant les objets de l'API de la plateforme Acumatica Cloud Xrp. Quoi qu'il en soit, nous espérons que vous prendrez le temps d'explorer la puissance de notre plateforme et de réfléchir à la manière dont vous pouvez l'exploiter et proposer des solutions convaincantes à vos clients.
Visitez notre site Acumatica Developer Network (ADN) pour plus d'informations et si vous n'avez pas lu nos précédents articles de blog et vidéos, n'hésitez pas à le faire. Enfin, nous avons récemment enregistré un webinaire dans lequel nous démontrons ces fonctionnalités. personnalisations et d'autres, et parler de l'étiquetage blanc plus en détail - Intégrer et incorporer l'ERP dans les applications d'entreprise.
Pensez à regarder ces articles récemment publiés :
