Nous sommes ravis de vous présenter la nouvelle version de la plateforme IoT magic Builder. Voici un aperçu des fonctionnalités et des améliorations apportées.

Nouvelles fonctionnalités

Tableau de bord, mode slider

Découvrez notre nouvel outil de visualisation de vos données : le slider qui vous permet de créer des présentations fluides et dynamiques de vos dashboards.

Basé sur des dashboards, il vous permet d'afficher et de faire défiler les pages de tableaux de bords, tout en conservant les fonctionnalités de navigation entre les pages, dans le temps ou dans votre hiérarchie.

Menu et pages

Cliquer pour ouvrir

Pour créer votre slider, rien de plus simple. Vous remarquerez qu'une nouvelle option est disponible au sein du mode édition des paramètres du module App Builder : "Ajouter : Nouveau slider".

Vous n'avez plus qu'à y glisser les dashboards que vous souhaitez inclure dans votre slider, et le tour est joué.

Profitez de nombreuses options de personnalisation :

• Transitions automatiques ou spécifiques pour chaque page
• Utilisez ou non les contrôles d'affichage pour une navigation manuelle ou automatique
• Affichage du temps restant pour chaque page
• Fonctionnalité de pause et reprise à tout moment
• Possibilité de passer en mode plein écran pour une visualisation optimisée

Création de liens publics pour une exposition plus large

Les liens publics vous permettent de partager vos dashboards de manière publique sans nécessiter de connexion. Idéal pour les expositions, démonstrations ou communications ouvertes.

Pour créer un lien public, vous devez commencer par créer un utilisateur technique, de la même manière que vous créeriez un nouvel utilisateur. Les utilisateurs techniques sont dédiés à la gestion des accès publics.

Attribuez à cet utilisateur technique les autorisations spécifiques pour contrôler la visibilité et les droits d'accès aux données que vous souhaitez partager.

Créez ensuite des liens publics à partir du "Menu et page" de l'App Builder en cliquant sur la colonne dédiée aux liens publics.

Création de liens publics

Cliquer pour ouvrir

À savoir

• Le lien public créé deviendra le point d'entrée de l'app builder. La navigation entre les dashboards reste possible selon les autorisations définies à votre utilisateur technique
• L'utilisateur technique ne se déconnectera pas de la plateforme, sauf si le lien public est supprimé

Formulaires dynamiques pour une personnalisation accrue

Avec les formulaires dynamiques, générez de nouveaux champs d'informations pour vos devices, sites, et clients. Pour ce faire, rendez-vous dans l'onglet "informations techniques" en bas de la page de configuration de votre CA (Customer account).

Exemple de configuration du formulaire :

Configuration du formulaire

Cliquer pour ouvrir

Exemple de nouveaux champs créés :

Nouveaux champs créés

Cliquer pour ouvrir

Configurez ces champs via un format JSON, en suivant les normes prédéfinies ci-dessous pour une personnalisation sans limites.

Types de champs disponibles

Field type	Custom Field	Description	Input type
text	{   "type": "text",   "id": "adresse",   "title": "Adresse" }	Champ texte classique. Les validations sont effectuées sur la taille du texte, et un message d'erreur ainsi que ses traductions sont déjà configurés.	textbox
text (email)	{   "input": "email",   "type": "text",   "id": "userEmail",   "title": "User Email" }	Validation par défaut DevExtreme pour les emails. Les traductions par défaut sont déjà implémentées. La validation n'est effectuée que si le champ est obligatoire.	email
text (phone)	{   "input": "phone_number",   "type": "text",   "id": "phoneNumber",   "title": "Phone Number" }	Vérification effectuée à l'aide de libphonenumber-js. Le numéro est formaté pour être lisible. La validation n'est effectuée que si le champ est obligatoire.	phone_number
text (select)	{   "type": "text",   "input": "selectbox",   "id": "country",   "title": "Country",   "selectOptions": [...] }	Permet de sélectionner une option parmi des valeurs prédéfinies. Ces options sont configurées via le champ selectOptions. L'information enregistrée est l'id.	dropdown selectbox radio_buttons
text (large)	{   "input": "large_textbox",   "type": "text",   "id": "description",   "title": "Description" }	Reprend le principe du texte mais accepte des entrées plus grandes, et la taille du texte acceptée est plus importante. Champ texte Cliquer pour ouvrir	large_textbox
number	{   "type": "number",   "input": "textbox",   "id": "postalCode",   "numberBoxControls": true,   "title": "Postal code",   "min": 0,   "max": 99999 }	Des champs supplémentaires peuvent être utilisés pour définir une plage max et min. Les boutons sur le côté peuvent être utilisés pour incrémenter ou décrémenter la valeur de 1. Champ numérique Cliquer pour ouvrir	number_box
text_list	{   "input": "selectbox",   "type": "text_list",   "id": "country",   "title": "Country",   "selectOptions": [...] }	Même principe que pour le texte, mais permet de sélectionner plusieurs options prédéfinies.	dropdown selectbox radio_buttons
date datetime time	{   "type": "datetime",   "input": "datetime_selector",   "id": "registrationTimestamp",   "title": "Registration Timestamp",   "displayFormat": "MMMM dd, yyyy HH:mm:ss" }	Ces champs fournissent un sélecteur pour sélectionner une date, une heure ou les deux. Un champ displayFormat est utilisé pour définir l'affichage. Sélecteur de date Cliquer pour ouvrir Exemples de format d'affichage (timestamp du 15/06/2021 à 20:45:34) : • MM/dd/yyyy → 07/15/2021 • MM/dd/yy → 07/15/21 • dd.MM.yyyy → 15.07.2021 • MMMM dd, yyyy → July 15, 2021 • EEEE, MMMM dd → Thursday, July 15 • HH:mm:ss → 20:45:34 • hh:mm a → 08:45 PM • MMMM dd, yyyy HH:mm:ss → July 15, 2021 20:45:34	date_selector datetime_selector time_selector
boolean	{   "type": "checkbox",   "id": "activeContact",   "title": "Active contact",   "defaultValue": true }	Le champ est représenté par une case à cocher. L'état par défaut est undefined. Pour cocher ou décocher la case par défaut, utilisez le champ defaultValue. Case à cocher Cliquer pour ouvrir	(checkbox)

Références

Pour plus d'informations sur les formats et validations, consultez la documentation officielle :

• Format de date personnalisé - DevExpress
• Validation des numéros de téléphone - libphonenumber-js
• Validation des emails - DevExpress EmailRule