Mardi technique : Construire des tableaux de bord de flux de processus dans Acumatica

Les tableaux de bord Acumatica permettent d'inclure des widgets HTML, de sorte que vous puissiez créer des liens vers des pages internes et des sites externes. Cette capacité démontre l'avantage d'utiliser un système ERP basé sur le web.

Dans cet article, je décrirai comment vous pouvez créer ce qui suit :

• Un tableau de bord des flux de processus qui renvoie à des domaines spécifiques de l'application Acumatica.
• Un article du tableau de bord qui renvoie à un système externe

Scénario 1 : Création d'un tableau de bord de flux de processus avec des liens internes

Dans cette section, nous créons un tableau de bord qui affiche un diagramme de flux comme celui illustré ci-dessous.

Les différentes icônes du diagramme peuvent être reliées à des écrans spécifiques dans Acumatica. Par exemple, en cliquant sur l'image de l'entrepôt 1, vous accédez à l'écran de l'entrepôt dans Acumatica qui affiche des informations sur l'entrepôt 1. Dans ce cas, nous ouvrons un nouvel onglet pour que vous puissiez examiner ce que vous voulez voir, puis nous fermons l'onglet pour revenir à votre diagramme de processus.

Ce processus tire parti d'une nouvelle fonctionnalité qui a été ajoutée à Acumatica 4.2. Cette fonctionnalité permet d'établir un lien avec des écrans spécifiques en spécifiant un identifiant d'écran ainsi qu'un enregistrement spécifique en spécifiant le paramètre clé de l'écran. Dans ce cas, le paramètre clé est l'ID de l'entrepôt.

Nous pouvons donc disséquer notre URL comme suit :

http://localhost/demodata/?ScreenId=IN204000&SiteCD=WHOLESALE+

• La section bleue renvoie au site de l'application. Dans de nombreux cas, elle peut être remplacée par "..." pour rendre votre code plus portable.
• La section verte renvoie à l'écran spécifique (entrepôt dans ce cas).
• La section orange renvoie à l'entrepôt spécifique

Si la troisième section n'est pas incluse, le lien renvoie à l'écran de l'entrepôt sans rechercher un entrepôt spécifique.

Étape 1 : Créer l'image de votre organigramme

La première étape consiste à créer une image pour votre organigramme. Dans ce cas, j'ai utilisé Microsoft PPT pour créer l'image à l'aide d'images de stock. Incluez des images, du texte ou tout autre élément nécessaire à la représentation de votre processus. J'ai fourni quelques exemples ci-dessous, mais vous pouvez créer n'importe quoi qui corresponde à votre processus.

Étape 2 : Créer une page wiki pour votre tableau de bord

Voici les étapes de la création d'une nouvelle page wiki pour vos tableaux de bord. Si vous disposez déjà d'un wiki, vous pouvez ignorer cette étape.

• Naviguer vers Configuration > Gestion des documents > Gérer > Wiki
• Cliquez sur "+" pour créer un nouveau wiki
• Complétez les informations et ajoutez-les à votre plan du site. L'image ci-dessous est l'exemple que j'ai créé.

Étape 3 : Créez un nouvel article wiki et ajoutez votre image

Suivez les étapes ci-dessous pour créer un nouvel article wiki qui inclura votre image.

• Naviguez jusqu'à l'emplacement de votre plan du site où vous avez ajouté le wiki à l'étape 2.
• Cliquez sur l'option "Créer un nouvel article". Dans la capture d'écran ci-dessous, j'ai déjà ajouté plusieurs articles, de sorte que l'option "Créer un nouvel article" apparaît en bas de la liste.

1. 1. Ajouter un numéro d'article et un nom
   2. Sélectionnez Html pour le type d'article. C'est important, car le langage de balisage du wiki ne prend pas en charge la construction de la carte d'image que nous allons utiliser.
   3. Cliquez sur le bouton "attacher" pour ajouter l'image que vous avez créée avec votre diagramme de flux.
   4. Après avoir joint l'image, accédez à l'onglet "Pièces jointes", sélectionnez le fichier que vous avez joint et cliquez sur le bouton "Obtenir le lien". Copiez l'URL du "lien externe" dans la fenêtre contextuelle.

1. Collez le code ci-dessous dans l'onglet contenu de votre article wiki. Utilisez la référence de votre lien externe pour référencer l'image.

• Note 1 : le code de la capture d'écran ci-dessous est inclus en annexe de cet article, vous pouvez donc le copier/coller.
• Note 2 : la discussion du code html et de l'image map est fournie dans la section suivante.

Étape 4 : Finaliser le code de votre article wiki

Vous pouvez créer la carte d'images en utilisant la construction HTML pour le mappage d'images.

<img src=”link to image” usemap=”#mymap”>

<map name=”mymap”>

<area shape=”rect” coords=”0,8,105,97″ href=”url you want to link to” target=”_blank” alt=”goto vendor 1″>

</map>

En spécifiant plusieurs zones et liens, vous pouvez établir des liens vers différents endroits de votre application. Vous pouvez inclure trois formes (cercle, rect, poly) définies dans la fonction html map. Pour plus d'informations, consultez le site http://www.w3schools.com/tags/tag_area.asp.

Après avoir défini toutes les correspondances, vous pouvez mettre à jour le code fourni.

Méthode alternative

Si vous avez accès à un programme web tel qu'Adobe Dreamweaver, vous pouvez utiliser l'interface pour créer rapidement le code de mappage défini dans la section précédente. Dreamweaver vous permet de pointer et de cliquer pour définir les régions et les liens afin d'accélérer considérablement le processus et de réduire la probabilité d'erreurs. Exemple ci-dessous.

Dans ce cas, je peux ouvrir le code créé par Dreamweaver et le coller dans mon article wiki.

Étape 5 : Ajouter un wiki au tableau de bord

Après avoir sauvegardé votre article wiki, allez dans le coin supérieur droit de votre article et cliquez sur le bouton "ajouter un wiki". Le wiki sera alors inséré dans le tableau de bord que vous avez sélectionné.

Après avoir ajouté l'article au tableau de bord, vous pouvez naviguer dans le tableau de bord et redimensionner l'article.

Scénario 2 : Création d'un tableau de bord de flux de processus lié à un système externe

La construction HTML peut également être utilisée pour intégrer un site Web externe à un tableau de bord de flux de processus Acumatica. Ceci est utile pour utiliser Acumatica comme portail vers d'autres systèmes.

Étape 1 : Créer une page wiki pour votre tableau de bord

Il s'agit des mêmes étapes que celles prévues pour l'étape 2 du premier scénario.

• Naviguer vers Configuration > Gestion des documents > Gérer > Wiki
• Cliquez sur "+" pour créer un nouveau wiki
• Complétez les informations et ajoutez-les à votre plan du site. L'image ci-dessous est l'exemple que j'ai créé.

Étape 2 : Créer le code du tableau de bord

La construction iframe permet d'intégrer des vidéos et des pages d'autres sites web dans votre tableau de bord Acumatica. Supposons que nous ayons une vidéo YouTube que nous voulons publier dans un tableau de bord. Notre tâche avec YouTube est facile car YouTube fournit les codes d'intégration.

• Ouvrir YouTube, sélectionner une vidéo
• Cliquez sur partager, intégrer, puis copiez le code.
• Collez le code dans votre page wiki Acumatica

• Cliquez sur le tableau de bord pour ajouter la vidéo (ou une autre page web) à un tableau de bord. Dans ce cas, j'ai ajouté ma vidéo pédagogique sur la gestion des bons de commande au tableau de bord des bons de commande.

ANNEXE 1 : Code pour l'article Wiki

Code complet :

<img src=”../Frames/GetFile.ashx?fileID=4d79f2da-6cea-4132-aa66-b2361abbfde7″ usemap=”#distribution”>

<map name=”distribution”>

<area shape=”rect” coords=”0,8,105,97″ href=”../Main.aspx?ScreenId=AP303000&AcctCD=WIDGETSUP1+” target=”_blank” alt=”goto vendor 1″>

<area shape=”rect” coords=”0,153,116, 243″ href=”../Main.aspx?ScreenId=AP303000&AcctCD=WIDGETSUP2″ target=”_blank” alt=”goto vendor 2″>

<area shape=”rect” coords=”256,8,453,140″ href=”../Main.aspx?ScreenId=IN204000&SiteCD=WHOLESALE+” target=”_blank” alt=”goto warehouse 1″>

<area shape=”rect” coords=”310,197,408,285″ href=”../Main.aspx?ScreenId=IN204000&SiteCD=WHNORTH+++” target=”_blank” alt=”goto warehouse 2″>

<area shape=”rect” coords=”576,47,636,135″ href=”../Main.aspx?ScreenId=IN204000&SiteCD=RETAIL++++” target=”_blank” alt=”goto retail warehouse”>

<area shape=”rect” coords=”114, 96, 246, 126″ href=”../Main.aspx?ScreenId=PO505000″ target=”_blank” alt=”goto create PO screen”>

<area shape=”rect” coords=”442, 114, 571, 145″ href=”../Main.aspx?ScreenId=PO505000″ target=”_blank” alt=”goto create PO screen”>

<area shape=”rect” coords=”744,46,884,109″ href=”../Main.aspx?ScreenId=AR303000&AcctCD=WIDGETBUY1″ target=”_blank” alt=”goto customer 1″>

<area shape=”rect” coords=”744,200,884,259″ href=”../Main.aspx?ScreenId=AR303000&AcctCD=WIDGETBUY2″ target=”_blank” alt=”goto customer 2″>

<area shape=”rect” coords=”744,296,884,355″ href=”../Main.aspx?ScreenId=AR303000&AcctCD=WIDGETBUY3″ target=”_blank” alt=”goto customer 3″>

<area shape=”rect” coords=”572,129,629,200″ href=”http://www.acumatica.com” target=”_blank” alt=”goto ecommerce site”>

</map>