Rappel : les widgets 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 2 fichier 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 graphique

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

  • par exemple gt_art_graph_TopFournisseurs.widget.json

  • indique le type de rendu/layout de 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
}

• WIDGET au format DataReader

{
	"Children": {
	    "widgetDatareader": {
	      "Type": "datareader",
	      "DataSource": "rc_d2_list_GestionBanq",
	      "Children": {
	        "journal": {
			"Type": "textbox",
			"Label": "Journal de banque"
	        },
		"transmission": {
			"Type": "textbox",
			"Label": "Transmission bancaire"
			},
		"dailly": {
			"Type": "textbox",
			"Label": "Plafond cession Dailly"
			},
		"frais": {
			"Type": "textbox",
			"Label": "Frais d'impayé"
			},
		"limite": {
			"Type": "textbox",
			"Label": "Limite de décaissement"
			}
	      }
	    }
	  },
    "Label": "Gestion bancaire",
    "Icon": "list",
    "Description": "Gestion bancaire",
    "ColSpan": 5,
    "RowSpan": 1
}

• Harmony : code correspondant

Function Char d2_List_GestionBanq(DataSourceName, ZoomId, ZoomPage, ZoomEntityId)
1 		DataSourceName 			S
1 		ZoomId 						L
1 		ZoomPage 					S
1 		ZoomEntityId 				L
Record 		ddsys.dhsd 			ListWidget 		Widget
RecordSQL	rcrsebctab.dhoq	COMPTEBQE		RS_CompteBqe
1		Cond							S
1		idReader						L
BeginF
	Load_C3_ID(ZoomEntityId, allcolumns = true)
	C3 = Get_C3_Record()
	widget = InitListWidget()
	ReaderOpen_CompteBqe(Rs_CompteBqe, IdReader)
	CC_ClearAllCondition(Rs_CompteBqe)
	Cond = ' '
	Rs_CompteBqe.Where.Equal_Cpt(C3.CPT)	| Rs_CompteBqe.Where.Equal_Cpt.AddAndCondition(Cond)
	Rs_CompteBqe.Where.AddCondition('Iban', Cond)
	ReaderSelect_CompteBqe(Rs_CompteBqe, IdReader)
	ReaderNext_CompteBqe(Rs_CompteBqe, IdReader)
	ListWidgetNewRow(widget)
	ListWidgetAddToCurrentRow(widget, "journal", NoSpaces(Rs_CompteBqe.JNL))
	ListWidgetAddToCurrentRow(widget, "transmission", NoSpaces(Rs_CompteBqe.EmeNo))
	ListWidgetAddToCurrentRow(widget, "dailly", Rs_CompteBqe.DaillyMt)
	ListWidgetAddToCurrentRow(widget, "frais", Rs_CompteBqe.MtImp)
	ListWidgetAddToCurrentRow(widget, "Limite", Rs_CompteBqe.DecaissMt)
	ReaderClose_CompteBqe(Rs_CompteBqe, IdReader)
	FReturn CreateListWidget(widget)
EndF

si, dans certain cas, le Widget peut ne rien afficher (exemple : un Widget lié aux comptes de banques)

	if NoSpaces(Rs_CompteBqe.JNL) <> ''
		if Rs_CompteBqe.Dev <> ' '
			Dev	= Rs_CompteBqe.Dev
		else
			Dev	= 'EUR'
		endif
		ListWidgetNewRow(widget)
		ListWidgetAddToCurrentRow(widget, "journal", NoSpaces(Rs_CompteBqe.JNL))
		ListWidgetAddToCurrentRow(widget, "transmission", ConvertAmountToString(Rs_CompteBqe.DaillyMt) & ' ' & Dev)
		ListWidgetAddToCurrentRow(widget, "dailly", ConvertAmountToString(Rs_CompteBqe.DaillyMt) & ' ' & Dev)
		ListWidgetAddToCurrentRow(widget, "frais", ConvertAmountToString(Rs_CompteBqe.MtImp) & ' ' & Dev)
		ListWidgetAddToCurrentRow(widget, "Limite", ConvertAmountToString(Rs_CompteBqe.DecaissMt) & ' ' & Dev)
	endif

Fichier JSON catalogue

Un catalogue de widgets est un fichier JSON qui liste les widgets disponibles pour chaque entité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"
	]
}

...

{
    "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é)

...

Pour accéder aux JSON : installer MS visual 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": {
          }
        }
      }
    }
  }
}

Information techniques sur le contenu de fichier JSON

La structure et balises JSON sont détaillées dans la documentation en ligne suivante, accessible une fois connecté à un projet : https://weavy.divalto.com/doc/script/index.html

On y trouve par exemple la doc du graph : https://weavy.divalto.com/doc/script/interfaces/GraphModel.html

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

Ensuite modifier le JSON qui fait le lien entre une entité et le catalogue (ici gt_art.catalog.json) pour ajouter un catalogue ‘spé’, puis s’inspirer du catalogue existant

En surcharge de zoom:

...

il faut créer un fichier nommé “nom du masque” + ‘u' + “.dashboard.json” en faisant une COPIE du fichier “sans le u” (car pas de fusion automatique). Dès que le fichier ‘u’ est trouvé il remplace le 'non u’

...

il faut nécessairement avoir un masque écran 'u' dans le projet client pour compiler un objet “nom du masque” + u + .dhof pour déclencher la recherche du fichier JSON (même si aucune modification faite dans le zoom)

...

. 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.