Saisie de données

Language	Title	Date
en	-	-
fr	-	-
es	-	-

= Préambule =

La saisie de données a pour but d'ajouter de nouvelles données via la présence d'un formulaire affiché dans le tableau de bord.

6

7

Le principe consiste à la création d'un formulaire créant automatiquement une table dans une base de données relationnelle de type MySQL, PostgreSQL, MariaDB, H2 ou Oracle.

8

9

Les données saisies par l'utilisateur final seront stockées dans cette table, il sera donc possible, via le Studio, de créer un modèle de données basé sur cette table.

10

11

= Configurer la saisie de données =

12

13

Pour utiliser cette fonctionnalité, il faut la configurer au niveau de l'interface **Paramètres serveurs > Bases de données > [[Saisie des données>>doc:Digdash.deployment.configuration.configuration_guide.data_entry.WebHome]]**[[.>>doc:Digdash.deployment.configuration.configuration_guide.data_entry.WebHome]]

14

15

Cette interface vous permet d'activer la fonctionnalité et de choisir la base de données dans laquelle les données issues de la saisie seront stockées.

16

17

[[image:Data_entry_configuration_FR.png||alt="Configuration saisie données"]]

18

19

Il est possible de choisir la base de données par défaut, celle-ci est une base de données de type H2. Cette base de données n'est pas une base de données de production, nous ne conseillons donc pas de l'utiliser.

20

21

(% class="box warningmessage" %)

22

(((

23

❗Seules les bases de données de type MySQL, PostgreSQL, MariaDB, H2 et Oracle sont supportées.

24

)))

25

26

= Créer un formulaire =

27

28

Une fois la fonctionnalité activée et configurée, il est possible de créer un ou plusieurs formulaires.

Pour cela :

1. Connectez-vous à l'éditeur de tableau de bord, et cliquez sur **Formulaires** dans le panneau de gauche listant les éléments pouvant être ajoutés au tableau de bord.

33

[[image:Data_entry_new_form_FR.png||alt="Nouveau formulaire"]]

34

1. Cliquez alors sur le bouton **Nouveau formulaire**.

35

➡ L'interface de création de formulaire s'affiche alors.

36

37

(% class="box infomessage" %)

38

(((

39

ℹ Cette interface n'est disponible qu'aux utilisateurs ayant l'autorisation **Tableau de bord > Créer un formulaire**.

40

)))

41

42

Voici l'interface de création de formulaire :

43

44

[[image:Data_entry_new_form_page_FR.png]]

45

46

1. Dans la section **Propriétés**, renseignez l'**Identifiant** du formulaire : celui-ci correspond au nom de la table créée dans la base de données. Cet identifiant doit être unique et ne doit contenir que des caractères alphanumériques.

47

1. Entrez le **Nom **du formulaire : celui-ci correspond au nom du formulaire affiché dans les différentes interfaces.

48

1. Le champ **Rôle **permet de restreindre l'accès au formulaire à un rôle. Consultez le paragraphe [[Sécuriser un formulaire>>doc:||anchor="Sécurité_form"]] pour plus de détails.

49

1. Le champ **Partage **permet de restreindre l'accès au formulaire à un profil utilisateur ou définir un partage personnalisé. Consultez le paragraphe [[Sécuriser un formulaire>>doc:||anchor="Sécurité_form"]] pour plus de détails.

50

1. Dans la section **Contenu**, définissez les champs du formulaire : glissez-déposez les champs souhaités depuis la liste des différents types de champs (à gauche) dans le formulaire de saisie (à droite).

51

➡ Pour chaque champ ajouté, une fenêtre de configuration du champ s'affiche. Consultez le paragraphe [[Configurer les champs de formulaire>>doc:||anchor="Configuration_champ_form"]] ci-dessous pour plus de détails.

52

53

(% class="box infomessage" %)

54

(((

55

ℹ Un formulaire doit comporter **au minimum un champ et un bouton** permettant l'envoi des données.

56

)))

57

58

[[image:Data_entry_form_example_FR.png]]

59

60

(% start="5" %)

61

1. Une fois tous les champs ajoutés au formulaire, vous pouvez le sauvegarder en cliquant sur **OK** en bas du formulaire.

62

➡ Une table ayant pour nom l'identifiant du formulaire est créée dans la base de données.

63

64

(% id="cke_bm_2989S" style="display:none" %) (%%)Il est possible d'éditer, déplacer, copier ou supprimer un composant via la barre d'outils qui s'affiche au survol du composant avec la souris.

65

[[image:Editer_composant.png||alt="Edition_composant"]]

66

67

68

Lors de la sauvegarde de celui-ci, la table sera automatiquement mise à jour. Par contre, il n'est pas possible de modifier le type d'un champ (ex: passer d'un champ de type Date à un champ de type Nombre).

69

70

Cette table contiendra l'ensemble des champs présents dans le formulaire ainsi que les colonnes suivantes :

71

72

* **un identifiant unique **(incrémenté de manière automatique) permettant la modification d'une donnée (son nom est id_formulaire_id).

73

* **dd_user** : identifiant de l'utilisateur ayant ajouté ou modifié la donnée

74

* **creation_date** : date de création de la donnée

75

* **modification_date** : date de modification de la donnée

76

77

La suppression d'un formulaire entraînera la suppression de la table et des données qu'elle contient.

78

79

== Configurer les champs de formulaire ==

80

81

Lors de l'ajout d'un champ, une fenêtre de configuration du champ apparaît. Cette interface comporte plusieurs onglets et permet à la fois de configurer le rendu du champ et son comportement dans le formulaire.

82

83

(% class="box infomessage" %)

84

(((

85

💡 Vous pouvez obtenir de l'aide sur le composant courant en cliquant sur le bouton **Aide **en haut à droite de la fenêtre de configuration.

86

)))

87

88

La section** Aperçu** à droite permet d'avoir un aperçu du rendu du formulaire et de sauvegarder la configuration du champ.

89

90

[[image:Boite_composant.png||alt="Composant"]]

91

92

(% class="box infomessage" %)

93

(((

94

ℹ Les onglets ainsi que les champs et options disponibles pour chacun d'eux diffèrent selon le le type de composant.

95

)))

96

97

* L'onglet **Affichage** permet de configurer l'aspect visuel du champ.

98

On retrouve notamment les éléments suivants :

99

** **Libellé** : Choix du libellé à afficher dans le formulaire (il sera aussi utilisé comme nom de la colonne de la table de données).

100

** **Suggestion d'entrée / Description** : permet d'ajouter une description ou une aide pour ce champ afin d'aiguiller l'utilisateur lors de la saisie.

101

** **Masqué** : permet de masquer le champ qui ne sera donc pas visible par l'utilisateur final mais qui sera quand même présent dans le formulaire.

102

103

* L'onglet **Données** permet de configurer les données à afficher pour ce champ.

104

On retrouve notamment les éléments suivants :

105

** **Valeur par défaut **: permet de spécifier la valeur par défaut du formulaire

106

** **Valeurs** : permet de spécifier les valeurs parmi lesquelles l'utilisateur pourra choisir (pour les champs de type liste déroulante, case à cocher...)

107

108

* L'onglet **Validation** permet de configurer la validation de la donnée pour ce champ.

109

On retrouve notamment les éléments suivants :

110

** **Obligatoire **: permet de rendre obligatoire la saisie du champ par l'utilisateur. Le formulaire ne pourra être soumis tant que le champ sera vide.

111

** **Unique** : permet de spécifier que la valeur de ce champ est unique et donc ne peut pas être saisie plusieurs fois par l'utilisateur. Si plusieurs champs ont ce paramètre activé, c'est la combinaison de tous les champs uniques qui est unique. Lors de l'édition du champ par l'utilisateur, si la valeur de celui-ci est déjà présente dans la base de données, alors le formulaire passe en mode édition et les autres champs seront remplis avec les valeurs stockées dans la base. Dans ce cas là, les données envoyées modifieront les données déjà présentes.

112

113

* L'onglet **Conditionnel** permet de conditionner l'affichage de ce champ par rapport à la valeur d'un autre champ présent dans le formulaire.

114

115

* L'onglet **Logique** permet de réaliser une configuration avancée pour contrôler et manipuler de manière conditionnelle les paramètres des champs, le schéma JSON, les valeurs des données et les événements personnalisés. Il est possible, par exemple, de sécuriser le champ d'un formulaire. Consultez le paragraphe [[Sécurisation>>doc:||anchor="Sécurité_form"]] pour plus de détails.

116

117

=== Configurer un bouton Sauvegarder en tant que brouillon{{id name="Brouillon"/}} ===

118

119

Il est possible de créer un bouton permettant de sauvegarder un formulaire dans l'état ("brouillon") même si tous les champs, notamment les champs définis comme obligatoires, ne sont pas remplis. Pour cela :

120

121

1. Glissez-déposez un composant **Bouton** dans le formulaire.

122

➡ La fenêtre de configuration du bouton s'affiche.

123

1. Modifiez le **Libellé** comme souhaité : par exemple, //Sauvegarder en tant que brouillon//.

124

1. Dans la liste déroulante **Action**, sélectionnez **Enregistrer dans l'état**.

125

1. Dans le champ **Enregistrer dans l'état** qui s'affiche, entrez //draft.//

126

[[image:Composant_bouton_brouillon.png||alt="Bouton_brouillon"]]

127

1. Configurez les autres champs/options si besoin.

128

1. Cliquez sur **Sauvegarder** pour valider la configuration du composant Bouton.

129

130

=== Configurer une liste déroulante en fonction du nombre d'éléments{{id name="Liste"/}} ===

131

132

Lorsqu'une liste déroulante est liée à une dimension, la configuration diffère selon le nombre de membres de la dimension.

133

134

1. Glissez-déposez un composant **Liste déroulante **dans le formulaire.

135

➡ La fenêtre de configuration du bouton s'affiche.

136

1. Modifiez le **Libellé** comme souhaité : par exemple, //Ville//.

137

1. Sélectionnez le **Type de Widget :**

138

1*. **ChoicesJS** est recommandé** **pour les dimensions avec un grand nombre d'éléments : il contient un champ de recherche pour rechercher un élément du côté du serveur.

139

[[image:Widget_choiceJS.png||queryString="width=399&height=207" alt="Liste_choicesJS" height="207" width="399"]]

140

1*. **HTML5** est recommandé pour les dimensions avec un petit nombre d'éléments : il ne contient pas de champ de recherche et, dans le cas où il y a beaucoup d'éléments, l'affichage peut être long ou les données peuvent être partielles.

141

[[image:Widget_HTML5.png||queryString="width=427&height=99" alt="Liste_HTML5" height="99" width="427"]]

142

143

(% class="box infomessage" %)

144

(((

145

Le nombre d'éléments affichés dans le champ de recherche est lié à la valeur définie pour **LIMIT_RESULT_SEARCHBOX** dans **Configuration -> Paramètres serveur -> Cubes -> Constantes**.

)))

(% start="4" %)

1. Configurez les autres champs/options si besoin.

150

1. Cliquez sur **Sauvegarder** pour valider la configuration du composant Liste déroulante.

151

152

== Éditer / Supprimer un formulaire ==

153

154

Pour éditer ou supprimer un formulaire, cliquez droit sur le formulaire dans la section **Formulaires** du panneau de gauche puis sur **Editer** ou **Supprimer**.

155

156

[[image:Data_entry_form_menu_FR.png||alt="Editer/Supprimer formulaire"]]

157

158

= Ajouter un formulaire au tableau de bord =

159

160

L'étape suivante consiste à ajouter le formulaire dans une page de tableau de bord. Pour cela, il vous suffit de glisser-déposer le formulaire nouvellement créé vers le contenu de la page de tableau de bord.

161

162

La configuration des objets de type Formulaire se fait depuis le menu **Paramètres -> Propriétés**.** **

163

164

== Lier un champ à une donnée ==

165

166

Il est possible de lier un champ du formulaire à une donnée présente dans le tableau de bord. Deux types de lien sont possibles :

167

168

* **lien vers une dimension **présente sur la page de tableau de bord. Cela permet de remplir automatiquement la valeur du champ si cette dimension est filtrée. Cela permet aussi de remplir les valeurs du champs par les membres de la dimension pour les champs à choix (liste déroulante, cases à cocher...).

169

* **lien vers un paramètre utilisateur**. Cela permet de remplir automatiquement la valeur du champ par la valeur du paramètre utilisateur de l'utilisateur connecté. Peut être utile pour les formulaires de type sondage afin de stocker l'utilisateur ayant répondu au formulaire.

Pour cela :

1. Cliquez sur **Aucun **à droite du nom du champ à lier.

174

➡ La boite **Lien **s'affiche.

175

1. Sélectionnez le **Type** de lien puis la **Dimension **ou l'**Attribut utilisateur** à lier.

176

1. Cliquez sur **OK**.

177

[[image:Data_entry_link_FR.png||alt="Lien"]]

178

179

== Afficher un aperçu des données ==

180

181

L'option **Afficher un aperçu des données** permet d'afficher un aperçu des données telles quelles sont stockées dans la base de données tout en choisissant les champs à afficher (une colonne **Affichage** est ajoutée pour les champs du formulaire) . Cette interface permet aussi de gérer les données en donnant la possibilité de modifier ou supprimer une donnée.

182

183

[[image:Aperçu_données.png||queryString="width=735&height=249" alt="Aperçu_données" height="249" width="735"]]

184

185

(% class="box infomessage" %)

186

(((

187

ℹ Cette interface n'est disponible que pour les utilisateurs ayant l'autorisation **Tableau de bord > Gérer les données de formulaire**.

188

)))

189

190

== Configurer une action ==

191

192

Le champ **Action **permet de configurer une action à exécuter après l'envoi du formulaire. Cela peut être utilisé, par exemple, pour rafraîchir le graphique en se basant sur les données du formulaire et ainsi visualiser les données nouvellement créées. Consultez la page [[Rafraîchir les flux après la saisie de données>>doc:.form_refresh_flow.WebHome]] pour en savoir plus.

193

194

= Utiliser un formulaire =

195

196

Une fois l'objet Formulaire ajouté et configuré sur la page de tableau de bord, et la page sauvegardée, le formulaire devient accessible aux utilisateurs ayant accès à cette page et ayant l'autorisation **Tableau de bord > Ajouter des données via un formulaire**.

197

198

Une fois les données saisies par l'utilisateur, celles-ci sont automatiquement sauvegardées dans la base de données. Si un rafraîchissement de la source de données est configuré, les nouvelles données sont rapatriées dans DigDash et seront donc disponibles dans le tableau de bord.

199

200

Il est aussi possible d'afficher le formulaire sous forme de popup, via l'utilisation de la fonction openFormInWindow paramétrable au niveau du graphique et dont la définition est disponible dans la documentation [[Fonctions Javascript>>doc:Digdash.customization.customization_DDE.customization_api.WebHome]].

201

202

= Utiliser les données d'un formulaire =

203

204

Une fois le formulaire créé, la table de données est créée dans la base de données, ces données peuvent donc être exploitées par DigDash.

205

206

Pour cela, il vous suffit, via le Studio, de créer un modèle de données basé sur la table SQL nouvellement créée en choisissant la base qui a été choisie pour stocker les données des formulaires. Pour rappel, le nom de la table est l'identifiant du formulaire saisi par l'utilisateur.

207

208

Si la table est stockée dans notre base H2 embarquée, voici les identifiants de connexion permettant d'y accéder :

209

210

211

url : jdbc:h2:file:[répertoire de configuration de DigDash]\Enterprise Server\ddenterpriseapi\config\DDDataEntry;AUTO_SERVER=TRUE

identifiants : sa/sa

Une fois le modèle de données créé, il est donc possible de créer des graphiques à partir de celui-ci.

= Sécurisation =

(% class="box warningmessage" %)

220

(((

221

❗ **Code JSON Logic invalide**

222

\\L'entrée de code JSON invalide (conditions jamais vérifiées, erreur de typographie, etc) rend l'accès au formulaire impossible.

223

L'autorisation **Admin -> Gérer tous les formulaires** permet de pouvoir afficher le formulaire et corriger ce problème. Consultez la page [[Autorisations (ACL)>>doc:Digdash.deployment.configuration.administration.User_management.Authorization_management.acls.WebHome]] pour plus de détails.

224

)))

225

226

== Sécuriser un formulaire{{id name="Sécurité_form"/}} ==

227

228

Pour sécuriser un formulaire, il est possible d'associer celui-ci à un rôle. Seuls les utilisateurs disposant du rôle défini pourront accéder au formulaire. Pour cela, sélectionnez le rôle auquel le formulaire est associé dans le la liste déroulante **Rôle**.

229

Si vous souhaitez laisser le formulaire visible pour tous les rôles, sélectionnez **Aucun**.

230

231

Il est également possible de sécuriser un formulaire en fonction d'un profil utilisateur ou via un partage personnalisé. Pour cela, sélectionnez une des options de la liste déroulante **Partage** :

232

233

(% class="box infomessage" %)

234

(((

235

Dans le cas où un **Rôle **est sélectionné, seuls les utilisateurs ayant le rôle auront accès.

236

)))

237

238

* **Tous **: tous les utilisateurs auront accès au formulaire.

239

* **//Profil utilisateur//** : si des profils utilisateurs sont disponibles, vous pouvez sélectionner un profil utilisateur auquel restreindre l'accès au formulaire. Seuls les utilisateurs ayant ce profil utilisateur auront accès au formulaire.

240

* **Personnalisé** : vous pouvez définir un partage personnalisé via l'utilisation de JSON Logic. Pour cela, cliquez sur le bouton [[image:1709631321085-490.png||queryString="width=17&height=18" height="18" width="17"]] et entrez le JSON Logic souhaité dans l'interface de **Partage personnalisé**. Par exemple, pour restreindre l'accès au formulaire aux utilisateurs ayant le profil utilisateur profil_A ou profil_B, on utilise :

241

[[image:Data_entry_custom_share_FR.png||alt="Partage personnalisé"]]

242

243

Lorsqu'un utilisateur n'a pas accès à un formulaire :

244

245

* le formulaire n'apparaît plus dans la liste **Formulaires **de l'éditeur de tableaux de bord.

246

* si le formulaire est ajoutée à une page de tableau de bord, une erreur s'affiche :

247

[[image:Erreur_formulaire.png||queryString="width=563&height=315" alt="Erreur formulaire" height="315" width="563"]]

248

249

== Sécuriser un champ de formulaire{{id name="Sécurité_champ_form"/}} ==

250

251

=== Selon un profil utilisateur ou un paramètre utilisateur ===

252

253

(% class="wikigeneratedid" %)

254

{{id name="Sécurité_champ_form"/}}Il est possible de sécuriser un champ de formulaire en fonction d'un profil utilisateur ou d'un paramètre utilisateur.

255

256

Pour cela, on va configurer une logique dans l'onglet **Logique** de la fenêtre d'édition du composant.

257

258

Pour tester si l'utilisateur a le profil spécifié, un profil peut être utilisé sous la forme ${user.profile.profilename} dans le JSON Logic. Ce mot clé renvoie une valeur "true" ou "false".

259

Pour tester le paramètre de l'utilisateur connecté, un paramètre utilisateur peut être utilisé sous la forme ${user.myparam} dans le JSON Logic.

260

261

1. Entrez le **Nom de la logique**.

262

1. Dans la section **Déclencheur**, sélectionnez le type **JSON Logic**.

263

1. Entrez le code JSON Logic. Par exemple :

{

"==": [

"${user.profile.profil_A}",

"true"

]

}

Dans cet exemple, le déclencheur est activé si l'utilisateur a le profil //profil_A. //

275

276

(% start="4" %)

277

1. Définissez ensuite l'action effectuée lorsque le déclencheur est activé.

278

Dans cet exemple, si le déclencheur est activé alors la propriété "//Désactivé//" est définie à l'état "//Vrai//". Le champ du formulaire est alors en lecture seule.

279

[[image:Exemple_action.png||queryString="width=493&height=477" alt="Exemple_action" height="477" width="493"]]

280

1. Cliquez sur **Sauvegarder l'action **puis sur** Sauvegarder la logique.**

281

282

=== Selon les données ===

283

284

Il est possible de sécuriser un champ de formulaire en fonction de la valeur d'une dimension ou mesure récupérée depuis un flux (graphique) ou un modèle de données.

285

286

Pour cela, on procède de la même façon que dans le paragraphe précédent mais avec du code JSON Logic utilisant l'identifiant du flux ou modèle de données, des filtres et une dimension ou mesure, pour définir le déclencheur.

287

288

**Exemple de JSON Logic basé sur un flux (graphique) **:

{

"==":

[

"${cube.value({\"flowId\":\"b312f6be\",\"filters\":[{\"dim\": \"Matériel\", \"member\":\"Samsung Galaxy\"}],\"res\":\"Type de ligne\"})}",

"Mobile"

]

}

dans lequel :

* **flowId**: identifiant du fllux dans lequel on va récupérer la donnée souhaitée.

303

* **filters**: filtres à appliquer sur le graphique pour n'avoir qu'une ligne de données renvoyée par le serveur.

304

* **res**: dimension ou mesure de la valeur que l'on souhaite récupérer.

305

306

Si la valeur renvoyée par //"${cube.value({\"flowId\":\"b312f6be\",\"filters\":[{\"dim\": \"Matériel\", \"member\":\"Samsung Galaxy\"}],\"res\":\"Type de ligne\"})}" //est égale à la valeur souhaitée //"Mobile" //alors l'action est déclenchée.

307

308

(% class="box infomessage" %)

309

(((

310

ℹ Les antislash "\" sont utilisés dans le code JSON pour échapper les guillemets doubles " afin qu'ils ne soient pas interprétés comme la fin d'une chaîne de caractères. Cela permet au code JSON de conserver sa structure correcte et d'être interprété correctement par le système sans erreur.

311

)))

312

313

**Exemple de JSON Logic basé sur un modèle de données **:

{

"==":

[

"${cube.value({\"dmId\":\"0b2583609f86d37754ce2ada372f31ae\",\"filters\":[{\"dim\": \"Matériel\", \"member\":\"Samsung Galaxy\"}],\"res\":\"Type de ligne\"})}",

"Mobile"

]

}

dans lequel :

* **dmId**: identifiant du modèle de données dans lequel on va récupérer la donnée souhaitée.

328

* **filters**: filtres à appliquer sur le modèle de données pour n'avoir qu'une ligne de données renvoyée par le serveur.

329

* **res**: dimension ou mesure de la valeur que l'on souhaite récupérer.

330

331

Si la valeur renvoyée par //"${cube.value({\"dmId\":\"0b2583609f86d37754ce2ada372f31ae\",\"filters\":[{\"dim\": \"Matériel\", \"member\":\"Samsung Galaxy\"}],\"res\":\"Type de ligne\"})}" //est égale à la valeur souhaitée //"Mobile" //alors l'action est déclenchée.

Wiki source code of Saisie de données

Sommaire