Retool Custom Design

Cette application Retool est un Configurateur Personnalisé (Bêta) conçu pour

les produits Exxelia. Elle permet aux utilisateurs de spécifier les
caractéristiques techniques exactes des produits souhaités à travers une série
de formulaires guidés. Les configurations soumises sont ensuite envoyées par
email et potentiellement intégrées à un système Notion.
L'application est structurée en plusieurs pages, chacune dédiée à une
catégorie de produits ou à une étape du processus de configuration.

2. Paramètres Globaux de l'Application

Largeur Maximale de l'Application : 1432px

Thème : Un thème personnalisé est appliqué ( $appTheme ).

Couleur Primaire : #00a160 (vert)

Couleur Secondaire : #365160 (bleu-gris foncé)

Couleur de Fond (Canvas) : #ffffff (blanc)

Rayon des Bordures : 11px

Polices : Tailles et graisses spécifiques pour les titres (H1-H6), le texte

par défaut et les étiquettes.

Navigation : La navigation entre les écrans est gérée par des boutons et
des actions d'ouverture de page.

Page d'Accueil par Défaut : Welcome_Page

Styles CSS Personnalisés ( $appStyles ) :

Un style est appliqué pour rendre certaines images de catégories de

produits (celles qui sont désactivées) en niveaux de gris avec une
opacité réduite, indiquant visuellement leur indisponibilité actuelle.

Liens JS Préchargés : L'application précharge [Link] et [Link] ,

suggérant des capacités 3D potentielles (bien que non explicitement
utilisées par les widgets décrits).

3. Structure des Pages et Composants Clés

Retool Custom Design 1

 L'application comprend les pages (écrans) principales suivantes :

3.1. Page d'Accueil ( Welcome_Page )

Objectif : Page de bienvenue et point d'entrée de l'application.

Composants Clés :

: Titre de bienvenue : "## Welcome to Exxelia's Custom

text1

Configurator (Beta)".

text2: Description : "Fine-tune Exxelia products to your exact specs—

engineered precision, powered by your expertise.".

button1 ("Start Customizing Now") :

Action : Navigue vers la page Full_Menu .

Action : Déclenche la requête Countries_List (probablement pour

précharger les données des pays pour les formulaires).

image34 : Image GIF affichée sur la page.

3.2. Page Menu Principal ( Full_Menu )

Objectif : Présenter les différentes catégories de produits configurables.

Composants Clés :

button11 ("Back") : Navigue vers la page Welcome_Page .

: Affiche une note : "Note: Currently, disabled categories are

alert1

unavailable, but they will be accessible soon!".

Conteneurs de Catégories de Produits : Plusieurs conteneurs ( container2

à container9 ), chacun représentant une famille de produits. Chaque
conteneur affiche généralement une image du produit, un titre et un
bouton "Customize it".

container3 (Ohmcraft Resistors) :

image3 : Image des résistances Ohmcraft.

text5 : Titre "#### Ohmcraft Resistors".

button4 ("Customize it") : Navigue vers la page Ohmcraft_Resistors .

container5 (Position Sensors) :

image5 : Image des capteurs de position.

Retool Custom Design 2

 text7 : Titre "#### Position Sensors".

button6 ("Customize it") : Navigue vers la page Position_Sensors .

container6 (Slip Rings & Integrated Solutions) :

image6 : Image des collecteurs tournants.

text8 : Titre "#### Slip Rings & Integrated Solutions".

button7 ("Customize it") : Navigue vers la page Slip_Rings .

Autres conteneurs (Magnetics, Capacitors, Materials & Tuning

Components, Filters, Electronic Printing) : Actuellement désactivés
( disabled: true ). Leurs images ( image2 , image4 , image7 , image8 , image9 )
sont grisées grâce aux styles CSS personnalisés, et leurs boutons
"Customize it" ( button3 , button5 , button8 , button9 , button10 ) sont
également désactivés et affichent un tooltip "Coming soon! Stay
tuned".

3.3. Page Résistances Ohmcraft ( Ohmcraft_Resistors )

Objectif : Configurer les résistances Ohmcraft.

Composants Clés :

tabbedContainerResistors : Conteneur à onglets principal.

Vue 1 : "Menu (chip type)" ( c3e06 )

button38 ("Back") : Retourne à la page Full_Menu .

container45 ("Chip Resistor") :

image60 : Image de résistance chip.

button39 ("Customize it") :

Change la vue de container22 (conteneur de sélection de

type dans l'étape 1) à "Resistors".

Change la vue de tabbedContainerResistors à "View 5" (le

configurateur principal).

container46 ("Chip Divider") :

image61 : Image de diviseur chip.

button40 ("Customize it") :

Retool Custom Design 3

 Change la vue de tabbedContainerResistors à "View 5".

Change la vue de container22 à "Dividers".

Vue 2 : Configurateur Principal ( 0d8c5 )

button41 ("Back") : Retourne à la vue "Menu (chip type)".

steps5 : Widget d'étapes verticales (RESISTORS SELECTION,

ELECTRICAL SPECIFICATIONS, RESISTORS DIMENSIONS,
ENVIRONMENTAL CONDITIONS, SUBMIT) qui contrôle le
steppedContainer5 .

steppedContainer5 : Conteneur à étapes.

Étape 1 : RESISTORS SELECTION ( 21cdf )

: Permet de choisir entre "Resistors" et

container22

"Dividers".

Vue "Resistors" ( 4fa05 ) :

container24 (SURFACE MOUNT RESISTORS) :

checkbox29 , image31 . Un clic sélectionne ce type et
configure les vues des étapes suivantes pour
"SMD".

container23 (LEADED RESISTORS) : checkbox28 ,

image30. Un clic sélectionne ce type et configure
les vues des étapes suivantes pour "LEADED".

Vue "Dividers" ( 20f9e ) :

container26 (SMD DIVIDER) : checkbox31 , image33 .

Configure pour "SMD".

(LEADED DIVIDER) :
container25 checkbox30 , image32 .
Configure pour "LEADED".

Étape 2 : ELECTRICAL SPECIFICATIONS ( 4da32 )

container21 : Affiche les champs spécifiques pour "SMD"

ou "LEADED".

Vue "SMD" ( 707bd ) : Champs pour résistance

( numberInput12 , segmentedControl7 ), tolérance
( numberInput13 ), TCR ( numberInput14 ), VCR ( numberInput15 ),

Retool Custom Design 4

 tension max ( numberInput16 ), puissance ( numberInput17 ),
terminaison ( multiselect3 ).

Vue "LEADED" ( 253b0 ) : Champs similaires

( numberInput24 à numberInput29 , segmentedControl8 ,
multiselect5 ).

Étape 3 : RESISTORS DIMENSIONS ( d5bdb )

container20 : Affiche les champs spécifiques pour "SMD"

ou "LEADED".

Vue "SMD" ( a97bb ) : Dimensions L, W, T ( textInput132 ,

textInput134, textInput136 ), unité ( segmentedControl2 ), image
( image29 ), zone de dépôt de fichiers ( fileDropzone6 )
pour plans.

Vue "LEADED" ( 3f3fe ) : Dimensions A, B, C, D,

épaisseur max des broches ( textInput142 à textInput138 ),
unité ( segmentedControl6 ), image ( image28 ).

Étape 4 : ENVIRONMENTAL CONDITIONS ( 51920 )

rangeSlider1 : Plage de température de fonctionnement.

checkboxGroup35 : Procédures de test (Thermal Shock,

etc.).

multiselectListbox1 : Normes de qualification (MIL-PRF,

NASA, etc.).

textArea8 : Taille de l'échantillon pour tests.

: Description de l'application et de
textArea6

l'environnement opérationnel.

textArea7 : Spécifications additionnelles ou requêtes

personnalisées.

Étape 5 : SUBMIT ( 777e4 )

Formulaire de contact : Marché ( select10 ), Timeline projet

( dateRange5 ), Prénom ( textInput121 ), Nom ( textInput120 ), Email
( email5 ), Téléphone ( phoneNumber5 ), Pays ( select11 - utilise
Countries_List.data ), Société ( textInput122 ), Commentaires
( textArea5 ).

Retool Custom Design 5

 prevButton5 / nextButton5 : Navigation entre les étapes.

button16 ("Send Message") : Visible à la dernière étape.

Déclenche la requête Ohmcraft (envoi d'email SMTP).

Déclenche la requête Notion (envoi des données à Notion).

Affiche des confettis et une notification de succès.

Désactivé si les champs requis ne sont pas remplis.

3.4. Page Capteurs de Position ( Position_Sensors )

Objectif : Menu de sélection et configuration pour différents types de
capteurs de position.

Slug URL : Position_Sensors_Menu2

Composants Clés :

("Back") : Retourne à
button42 Full_Menu . Visible si tabbedContainer2 est sur la
vue 'MENU'.

button50 ("Back") : Retourne à la vue 'MENU' de tabbedContainer2 . Visible si

tabbedContainer2 n'est PAS sur la vue 'MENU'.

alert3: Note sur les catégories désactivées. Visible si tabbedContainer2 est

sur la vue 'MENU'.

tabbedContainer2 : Conteneur principal avec plusieurs vues.

Vue 'MENU' ( faaba ) : Sélection du type de capteur

(Contactless Rotary Encoders) : button49 -> Navigue

container55

vers la vue 'View 1' (configurateur encodeurs optiques).

container54 (Rotary Potentiometer) : button48 -> Navigue vers la

vue 'View 2' (configurateur potentiomètres rotatifs).

container53 (Linear Potentiometer) : button47 -> Navigue vers la vue

'View 3' (configurateur potentiomètres linéaires).

container52 (Hybrid Systems) : Désactivé.

Vue 'View 1' ( b0f31 ) : Configurateur Encodeurs Optiques

(Contactless Rotary Encoders)

steps10 : Étapes (ENCODER DEFINITION, ELECTRICAL

INTERFACE, COM PROTOCOL, MECHANICAL

Retool Custom Design 6

 CHARACTERISTICS, ENVIRONMENTAL CONDITIONS, SUBMIT).

steppedContainer10 : Conteneur à étapes.

Champs spécifiques pour chaque étape (résolution,

alimentation, protocole, dimensions, conditions
environnementales).

Formulaire de contact à la fin.

prevButton10 , nextButton10 .

("Send Message") : Déclenche

button51 ContactlessRotaryEncoders

(SMTP) et SendNotion (Notion API).

Vue 'View 2' ( 85453 ) : Configurateur Potentiomètres Rotatifs

: Étapes (Potentiometer type, Mechanical characteristics,

steps11

Electrical characteristics, Environment, SUBMIT).

steppedContainer11 : Conteneur à étapes.

Champs pour type de potentiomètre, caractéristiques

mécaniques (dimensions, montage), électriques (type de
piste, résistance), environnementales.

Formulaire de contact.

prevButton11 , nextButton11 .

button44 ("SEND MY CUSTOM REQUEST") : Déclenche

RotaryPotentiometer (SMTP) et SendNotion .

Vue 'View 3' ( 044d1 ) : Configurateur Potentiomètres Linéaires

steps12 : Étapes (MECHANICAL CHARACTERISTICS,

ELECTRICAL INTERFACE, ENVIRONMENTAL CONDITIONS,
SUBMIT).

steppedContainer12 : Conteneur à étapes.

Champs pour caractéristiques mécaniques (course,

vitesse), électriques (type de piste, résistance),
environnementales.

Formulaire de contact.

prevButton12 , nextButton12 .

Retool Custom Design 7

 button45 ("SEND MY CUSTOM REQUEST") : Déclenche
LinearPotentiometer (SMTP) et SendNotion .

3.5. Page Collecteurs Tournants ( Slip_Rings )

Objectif : Configurer les collecteurs tournants.

Composants Clés :

button52 ("Back") : Retourne à la page Full_Menu .

tabbedContainer1 :

Vue 'View 4' ( cf7ca ) : "SLIP RINGS"

: Étapes (SLIP RING TYPE, MECHANICAL

steps9

CHARACTERISTICS, ELECTRICAL CHARACTERISTICS,

ENVIRONMENTAL CONDITIONS, SUBMIT).

steppedContainer9 : Conteneur à étapes.

SLIP RING TYPE ( 3f14a ) : Sélection du type de collecteur

(Hollow shaft, High Data Rates, Rotary Joint Assembly,
Standard/Compact) via des conteneurs cliquables avec
checkboxes.

MECHANICAL CHARACTERISTICS ( d5bdb ) : Longueur,

diamètre, vitesse de rotation, interface mécanique, couple
de démarrage, durée de vie, masse.

ELECTRICAL CHARACTERISTICS ( 51920 ) : Nombre de

canaux, type de canal, résistance d'isolement, bruit de
contact, liaison, type de connecteur.

ENVIRONMENTAL CONDITIONS ( 0462d ) : Températures

(fonctionnement, stockage), vibrations, étanchéité,
corrosion, chocs.

SUBMIT ( 777e4 ) : Formulaire de contact.

prevButton9 , nextButton9 .

("SEND MY REQUEST") : Déclenche

button21 Slip_Rings_Email

(SMTP) et SendNotion .

3.6. Autres Pages (Moins Détaillées dans le JSON initial pour la

configuration)

Retool Custom Design 8

 : Semble être une version antérieure ou une page
Position_Sensors_Menu

alternative pour le menu des capteurs de position.

: Semble être une page dédiée au menu de

Ohmcraft_Resistors_Menu_Chip

sélection pour les résistances chip Ohmcraft, similaire à la première vue de

tabbedContainerResistors sur la page Ohmcraft_Resistors .

4. Requêtes et Sources de Données

Countries_List (JavascriptQuery) :

Objectif : Fournir une liste statique de pays avec leurs codes.

Utilisation : Popule les listes déroulantes de sélection de pays ( select11 ,

select19 , select21 , select23 , select25 ) dans les différents formulaires de

contact.

Ohmcraft (SMTPQuery) :

Objectif : Envoyer un email avec les spécifications configurées pour les

résistances Ohmcraft.

Destinataire : [Link]@[Link]

Sujet : "Custom Design Ohmcraft"

Corps : Email HTML formaté, incluant dynamiquement les valeurs des

champs du formulaire Ohmcraft. Utilise une logique conditionnelle (ex:
v-if="[Link] === 'Leaded'" ) pour afficher les sections SMD ou

Leaded.

Déclencheur : Clic sur button16 (Send Message) dans le formulaire

Ohmcraft.

Notion (RESTQuery - POST) :

Objectif : Envoyer les données de configuration à une base de données

Notion.

Endpoint : API Notion (création de page dans la base de données

7f1d4dc3b3a54f91b51b6324f39002b5 ).

Corps : Structure JSON complexe mappant les champs du formulaire

Retool aux propriétés de la base de données Notion. Le champ
"Request" dans Notion contient un texte riche agrégeant la plupart des
informations du formulaire.

Retool Custom Design 9

 Déclencheurs : Clic sur les boutons d'envoi des différents formulaires
( button16 , button51 , button44 , button45 , button21 ).

ContactlessRotaryEncoders (SMTPQuery) :

Objectif : Envoyer un email avec les spécifications pour les encodeurs

rotatifs sans contact.

Destinataire : [Link]@[Link]

Sujet : "Custom Design Contactless Rotary Encoders"

Corps : Email HTML formaté avec les données du formulaire des

encodeurs.

Déclencheur : Clic sur button51 .

Slip_Rings_Email (SMTPQuery) :

Objectif : Envoyer un email avec les spécifications pour les collecteurs

tournants.

Destinataire : [Link]@[Link]

Sujet : "Custom Design Slip Rings"

Corps : Email HTML formaté avec les données du formulaire des

collecteurs tournants.

Déclencheur : Clic sur button21 .

RotaryPotentiometer (SMTPQuery) :

Objectif : Envoyer un email avec les spécifications pour les

potentiomètres rotatifs.

Destinataire : [Link]@[Link]

Sujet : "Custom Design Rotary Potentiometer"

Corps : Email HTML formaté avec les données du formulaire des

potentiomètres rotatifs.

Déclencheur : Clic sur button44 .

LinearPotentiometer (SMTPQuery) :

Objectif : Envoyer un email avec les spécifications pour les

potentiomètres linéaires.

Destinataire : [Link]@[Link]

Retool Custom Design 10

 Sujet : "Custom Design Linear Potentiometer"

Corps : Email HTML formaté avec les données du formulaire des

potentiomètres linéaires.

Déclencheur : Clic sur button45 .

5. Flux Utilisateur Typique

1. L'utilisateur arrive sur la Welcome_Page .

2. Clique sur "Start Customizing Now" ( button1 ) et est redirigé vers Full_Menu .

3. Sur Full_Menu , l'utilisateur sélectionne une catégorie de produit (par exemple,

"Ohmcraft Resistors" en cliquant sur button4 ).

4. Il est redirigé vers la page spécifique du produit (ex: Ohmcraft_Resistors ).

Pour Ohmcraft Resistors, il choisit d'abord entre "Chip Resistor" ou

"Chip Divider".

Ensuite, il suit un processus en plusieurs étapes ( steps5 /

steppedContainer5 ) :

1. Sélection du type (SMD/Leaded).

2. Spécifications électriques.

3. Dimensions.

4. Conditions environnementales.

5. Soumission du formulaire de contact.

5. À la dernière étape "SUBMIT", l'utilisateur remplit ses informations de

contact.

6. En cliquant sur "Send Message" ( button16 ), les données sont envoyées par
email (via la requête Ohmcraft ) et à Notion (via la requête Notion ).

7. Un flux similaire s'applique aux autres catégories de produits configurables

(Position Sensors, Slip Rings), chacune avec ses propres étapes et champs
spécifiques.

Retool Custom Design 11