Rappel : les widgets divalto Infinity

Les widgets permettent de donner une information rapide et visuelle à l’utilisateur.

Dans Divalto infinity, les widgets comportent trois familles

• les widgets métier (liste, tableau, feu, jauge,camemberts, graphiques,…) pour afficher des données provenant de l’ERP Divalto

• les widgets de fournisseurs externes (météo, flux RSS,…)

• les widgets liés à une fonctionnalité (module CRM tâches/agenda et recherche Power search)

Retrouvez toutes les informations concernant ces widgets en suivant ce lien Principe de fonctionnement des widgets

L’expérience divalto one offre toujours les widgets métier, et vient compléter l'étendue avec de nombreux nouveaux widget. De plus, les widgets Divalto infinity étaient limités à un usage dans l’interface d’accueil uniquement, alors que la nouvelle expérience divalto one permet également l’usage dans les entités pour disposer par exemple de widget par client, article, fournisseur, etc…

Les widgets de fournisseurs externes ou liés à une fonctionnalité ne sont pas disponibles actuellement.

Information technique : les widgets présents sous Divalto infinity dans le zoom des widgets (table MWIDGET) sont disponibles en expérience one, et les nouveaux widgets divalto one sont fournis sous forme de fichiers (fichiers JSON de description).

Les widgets en expérience one

Avec l’expérience divalto one, une nouvelle notion est introduite : les dashboard ou tableaux de bord. Retrouvez les informations en suivant ce lien Tableaux de bord et widgets.

Un dashboard est un ensemble de widgets, groupés sous un même nom qui apparaîtra sous forme d'élément cliquable, permettant à l’utilisateur de le sélectionner.

Exemple ici : Mon dashboard des articles

Dashboard IA

Les dashboard ou tableau de bord “Interface d’accueil” sont les dashboard disponibles dans l’interface d’accueil de l’expérience one

Ces dashboard “IA” peuvent recevoir des widgets one et tous les widgets métier existant sous Divalto infinity

Exemple de widgets pour le dashboard IA

Dashboard entités

Les dashboard ou tableau de bord “Entités” sont les dashboard disponibles dans les zooms des entités en expérience one, comme par exemple une fiche client, une fiche article, …

Ces dashboard entités peuvent recevoir des widgets one qui ont été conçus pour l’entité uniquement. A cette fin il existe la notion de catalogue afin de donner à l’utilisateur une liste de widgets pour son entité

Exemple de widgets pour le dashboard article

Les fichiers JSON catalogue et widget

Voici quelques informations techniques concernant l’organisation des données qui permettent d’utiliser les widgets.

Les widgets entité sont nécessairement liés à un module diva et à une fonction diva qui retourne les valeurs attendues.

Un page est dédiée au sujet Créer un dashboard, un catalogue et des Widgets

Fichiers JSON widget entité

Chaque widget entité est décrit via deux fichiers JSON

• DATASOURCE

  • Nommage : codeModule + '_' + famille + typeWidget + nomWidget + “.datasource.json”

  • par exemple gt_art_graph_TopFournisseurs.datasource.json

  • indique le module diva et la fonction diva à appeler, et les colonnes nécessaires au rendu

    • Les balises ‘Module’ et ‘Function’ indique le code diva

    • Balises ‘Type’ et ‘Mapping’: ouvrir un widget qui a le même rendu visuel et en copier la structure

  • Exemple de contenu gt_art_graph_TopFournisseurs.datasource.json

{
    "Type": "infinityGraphSource",
    "Mapping": {
        "AbscissLabelField": "abscissLabel",
        "AbscissValueField": "abscissValue"
    },
    "Module": "gttmdashboard001.dhop",
    "Function": "art_graph_TopFournisseurs"
}

• WIDGET

  • Nommage : codeModule + '_' + famille + typeWidget + codeWidget + “.widget.json”

  • par exemple gt_art_graph_TopFournisseurs.widget.json

  • indique le type de rendu/layout, et les informations d’affichage comme le titre, les libellés, la taille des colonhnes. Sert au binding entre le retour de la fonction diva et le rendu visuel

    • La balise ‘Label’ contient le nom qui sera affiché à l’utilisateur

    • Autres balises : ouvrir un widget qui a le même rendu visuel et en copier la structure

  • Exemple de contenu gt_art_graph_TopFournisseurs.widget.json

{
    "Children": {
        "graphTest": {
            "Type": "graph",
            "Title": "Nombre affaires / opportunités en cours utilisant mon article réparti par type d'arborescence d'affaire",
            "DataSource": "gt_art_graph_AffairesBesoin_Arbo",
            "Series": [
                {
                    "Label": "EvtCrm",
                    "ValueField": "PieValue",
                    "GraphType": "donut"
                }
            ]
        }
    },
    "Label": "Nombre affaires / opportunités en cours utilisant mon article réparti par type d'arborescence d'affaire",
    "Icon": "chart-line",
    "Description": "Nombre affaires / opportunités en cours utilisant mon article réparti par type d'arborescence d'affaire",
    "ColSpan": 6,
    "RowSpan": 2
}

Fichier JSON catalogue

Un catalogue de widgets est un fichier JSON qui liste les widgets disponibles dans ce catalogue.

• Nommage : codeModule + '_' + famille + codeCatalogue + “.catalog.json”

• par exemple gt_art_vente.catalog.json

• liste les widgets entités, pour chaque entité

  • La balise ‘Label’ contient le nom qui sera affiché à l’utilisateur

  • La balise ‘WidgetNames' liste les fichiers JSON widget (sans extension)

• Exemple de contenu gt_art_vente.catalog.json

{
    "Label": "Vente",
    "WidgetNames": [
		"gt_art_list_PceVentes",
		"gt_art_list_tarif_vente",
		"gt_art_graph_TopClients"
	]
}

Autre exemple gt_art_prod.catalog.json

{
    "Label": "Production",
    "WidgetNames": [
		"gt_art_metric_OF",
    ]
}

Les catalogues pour IA utilisent le même principe, mais sont nommés par ‘home_’ + CodeGroupe + “.catalog.json”

Exemple home_crm.catalog.json

{
    "Label": "CRM",
    "WidgetNames": [
		"WIPROJET",
		"WIGRAPHEVTQFAM",
		"WIAPPOINTMENT",
        "WITASK"
  ]
}

Fichier JSON dashboard pour entité

Un dashboard de widgets est un fichier JSON qui indique quels sont les catalogues de widgets disponibles pour une entité, et quels sont ceux du dashboard par défaut (visible dans le tableau de bord d’un zoom one d’une entité)

Exemple : gtez000_sql.dashboard.json

{
	"CatalogNames": [
		"gt_art_prod",
		"gt_art_Ddb",
		"gt_art_AffInd",
		"gt_art_stock",
		"gt_art_achat",
		"gt_art_vente"
	],
	"Views": {
		"Default": {
			"Label": "Article",
			"Tiles": {
				"gt_art_list_infos": {},
				"gt_art_list_caracteristiques": {},
				"gt_art_list_infostat": {},
				"gt_art_list_infostatstock": {},
				"gt_art_list_tarif_achat": {},
				"gt_art_list_tarif_vente": {},
				"gt_art_list_fournisseur_principal": {},
				"gt_art_list_PceAchats": {},
				"gt_art_list_PceVentes": {},
				"gt_art_graph_TopClients": {},
				"gt_art_graph_TopFournisseurs": {},
				"gt_art_graph_EntreesSorties_line": {},
				"gt_art_graph_EntreesSorties_bar": {},
				"gt_art_metric_OF": {},
				"gt_art_metric_DA": {},
				"gt_art_metric_AO": {},
				"gt_art_graph_StockParDepot_bar": {},
				"gt_art_graph_DispoStock_line": {},
				"gt_art_grid_FouRef": {},
				"gt_art_grid_PrixVente": {}				
			}
		}
	}
}

Fichier JSON dashboard pour IA

Un dashboard de widgets est un fichier JSON qui indique quels sont les catalogues de widgets disponibles. Le principe est identique aux entités, mais il y a une fichier unique qui indique tous les catalogues disponibles danbs l’interface d’accueil.

Le fichier unique est : home.component.json

{
  "Type": "page",
  "Title": {
    "Label": "Bienvenue"
  },
  "Children": {
    "dashboard": {
      "Type": "dashboard",
      "CatalogNames": [
		"__INFINITY__",
		"home_cc",
		"home_rc",
		"home_services",
		"home_crm",
		"home_admin",
		"home_stocks",
		"home_achat",
		"home_vente",
		"home_qualite",
		"home_production",
		"home_ddb",
		"home_affind"
      ],
      "Views": {
        "Default": {
          "Label": "Default",
          "Tiles": {
          }
        }
      }
    }
  }
}

Ajout de widget en surcharge

Les widgets sont tous décrits par des fichiers JSON. Il s’agit donc de modifier les fichiers concernés

Pour cela il est indispensable d’installer Microsoft Visual code (gratuit) et un composant Divalto qui permet de naviguer dans les fichiers JSON du serveur après connexion au projet. Plus d’informations en suivant ce lien Utilisation de Divalto Studio

Il faut ensuite, selon la modification que l’on souhaite apporter, modifier le ou les fichiers JSON selon les règles suivantes.

Création d’un widget entité de surcharge

Pour la création d’un widget complémentaire, suivez le chapitre ci-dessus “Fichier JSON widget entité” qui décrit les fichiers JSON d’un widget entité, et prenez un exemple de widget dont le comportement est proche au niveau du rendu, donc par exemple prendre pour modèle un widget ‘tableau’ si l’on souhaite créer un nouveau tableau, et de préférence dans le même module.

Les fichiers JSON seront nécessairement dépendants d’un module diva de surcharge xxTMDASHBOARDyyy.dhsp qui construit la chaîne JSON envoyée au widget, et peut récupérer l’ID de l’entité courante (pour un widget d’entité)

On pourra ajouter la lettre 'u' au fichier JSON en préfixe pour les distinguer

Ajout d’un widget entité en surcharge

L’ajout de widget entité se fait en trois phases

• Surcharge du masque écran de zoom de l’entité concernée

• Création d’un fichier JSON “catalogue surcharge” avec le nouveau widget

• Création d’un fichier JSON “dashboard avec surcharge” avec le nouveau catalogue

La première phase consiste à s’assurer d’avoir un masque écran de surcharge dans le projet client (par exemple gtez000_sqlu.dhsf qui est la surcharge de gtez000_sql.dhsf), afin d’obtenir un objet de surcharge. La surcharge n’implique pas forcément de modification par rapport au standard (si par exemple on souhaite uniquement ajouter un widget sans modifier le masque écran), mais la présence d’un objet ‘xxxxu.dhof’ est indispensable pour déclencher la recherche du fichier JSON de la troisième étape.

La seconde étape consiste à créer un fichier JSON “catalog surcharge” que l’on peut par exemple préfixer de la lettre ‘u' (par exemple ugt_art_prod), et de prendre la structure du chapitre ci-dessus “Fichier JSON catalogue” afin de donner un nom qui sera visible à l’utilisateur et le nom du widget de surcharge

La troisième étape consiste à copier le fichier JSON “dashboard pour entité” déjà existant et associé au zoom, en ajoutant un ‘u' avant le début de l’extension pour obtenir un fichier JSON “dashboard avec surcharge”. Par exemple gtez000_sql.dashboard.json devient par copie gtez000_sqlu.dashboard.json, et y ajouter, dans la balise ‘CatalogNames’, le nom du catalogue de surcharge (sans extension). Attention, dès que ce fichier ‘u' est présent il remplace le 'non u’, ce qui implique que le contenu doit être identique et augmenté de la surcharge (et pas uniquement la surcharge)

Ajout d’un widget IA en surcharge

L’ajout de widget IA se fait en deux phases

• Création d’un fichier JSON “home catalogue surcharge” avec le nouveau widget

• Modification d’un fichier JSON “home” avec le nouveau catalogue

La première étape consiste à créer un fichier JSON “home catalog surcharge” dans lequel on peut par exemple ajouter la lettre ‘u' (par exemple homu_monvertical), et de prendre la structure du chapitre ci-dessus “Fichier JSON catalogue” afin de donner un nom qui sera visible à l’utilisateur et le nom du widget de surcharge.

La seconde étape consiste à modifier le fichier JSON “dashboard IA” déjà existant. Comme indiqué plus haut dans le chapitre “Fichier JSON dashboard pour IA“, le nom de fichier unique est home.component.json. Il s’agit donc de le modifier pour ajouter dans la liste des ‘CatalogNames' le “home catalog surcharge” créé à l'étape 1.