Je partage un nouveau widget Grist : Grist Design Web, un constructeur de pages web visuel en glisser-déposer (basé sur GrapesJS), directement intégré à Grist.
En bref
Il permet de créer des pages HTML/CSS/JS sans aucune ligne de code : on glisse des blocs (sections Hero, Call-to-Action, Features, Pricing, FAQ, Navbar, Footer, formulaires, colonnes, textes, images…), on ajuste le style dans des panneaux visuels, et c’est prêt.
Ce qu’on peut faire
Composer une page par glisser-déposer, 100 % sans code
Régler les styles visuellement (mise en page, typo, couleurs, bordures…)
Aperçu responsive : Desktop / Tablette / Mobile
Sauvegarder les pages dans le document Grist (et les recharger)
Le ZIP exporté (HTML + JavaScript) est directement réutilisable comme widget personnalisé : il embarque déjà l’API Grist (grist-plugin-api.js) et grist.ready(). Il suffit d’héberger les deux fichiers et de pointer l’URL du widget dessus. On peut donc concevoir visuellement une page, puis l’utiliser comme widget dans n’importe quel document.
Les images téléchargées depuis votre ordinateur sont directement embarquées dans le code HTML sous forme de données encodées en Base64.
Le ZIP exporté (HTML + JavaScript) est directement réutilisable comme widget personnalisé : il embarque déjà l’API Grist (grist-plugin-api.js) et grist.ready(). Il suffit d’héberger les deux fichiers et de pointer l’URL du widget dessus. On peut donc concevoir visuellement une page, puis l’utiliser comme widget dans n’importe quel document.
En tant que débutant, je trouve ce Grist Design Web très intéressant. Par contre, j’aurais besion d’un pas à pas détaillé pour la partie utilisation que j’ai collé plus haut.
Merci pour votre aide.
Cordialement
Après avoir finalisé la mise en page de votre document à l’aide du widget Design Web et compressé les fichiers au format ZIP, il suffit de créer un nouveau document dans Grist, puis d’ouvrir Custom Widget Builder et d’accéder à sa configuration.
Dans l’onglet HTML, copiez-collez le contenu des fichiers décompressés correspondant au code HTML ainsi qu’au fichier widget.js de votre mise en page que vous avez créé. Ensuite, dans l’onglet JavaScript, copiez-collez le contenu du fichier widget.js.
Une fois ces étapes réalisées, le widget est prêt à être utilisé dans Grist.
Merci Isaytoo,
A mon grand étonnement, j’ai réussi à créer ma page d’acceuil
Je n’ai compris tout de suite la manip téléchargement - edition locale - copier coller - des codes, mais c’est bon…
Est-ce que le site web ainsi créé permet de manipuler des données contenues dans un document Grist ? Cela serait particulièrement intéressant pour alléger l’utilisation de certains documents.
Par exemple pour utiliser le site web produit comme une interface utilisateur, qui est alimenté par les données du document ouvert, et qui peut input dans le document (via le formulaire par exemple)
Un petit peu dans l’idée d’un site web “publiposté”, où le document grist derrière sert de base de donnée au site.
Le widget permet de créer une interface utilisateur visuelle (type site web / landing page) qui :
S’alimente des données du document Grist :
Tableau Grist : affiche une table complète (choix des colonnes, limite de lignes, en-tête)
Cartes Grist : génère une carte par ligne avec mapping des colonnes (titre, sous-titre, image, description)
Champ Grist : insère une valeur précise n’importe où dans la page (publipostage : Table + Colonne + N° de ligne)
Panneau de champs : pour chaque table du document, une catégorie de blocs apparaît : tu glisses directement les colonnes sur ta mise en page
Permet d’écrire dans le document via le bloc Formulaire Grist :
Tu choisis la table cible
Les champs sont générés automatiquement depuis les colonnes modifiables
À la soumission → une nouvelle ligne est créée dans Grist
Concrètement, tu composes ta page en drag & drop (sections, textes, images, blocs Grist…), tu lies les données, et le tout fonctionne en temps réel dans le document Grist ouvert.
C’est bien l’idée d’un site « publiposté » où Grist sert de base de données, sauf qu’ici tout reste dans Grist (pas besoin d’héberger un site externe).
Je cherche à intégrer via l’outil “Custom code” des widgets personnalisés simple, mais quand j’essaie d’intégrer directement le JS dans le HTML, j’ai ce retour :
Custom code with cannot be rendered on canvas
Comment intégrer ce JS custom ? Nécessairement en manipulant la table ?
Tout dépend comment a été développé le widget concerné.
Si c’est un widget simple codé en HTML et JavaScript, tu peux passer par le Custom widget builder. puis utiliser l’onglet HTML et l’onglet JAVASCRIPT.
Le widget charge le plugin grapesjs-custom-code, qui ajoute un bloc « Custom Code » (catégorie « Extra » dans la liste des blocs). Concrètement :
Tu glisses le bloc où tu veux dans ta mise en page.
Tu double-cliques dessus → une fenêtre s’ouvre avec un éditeur de code.
Tu y mets ton HTMLet ton JavaScript (<script>…</script>) → c’est intégré à la page.
C’est donc exactement l’esprit du « custom widget builder » de Grist : tu injectes ton HTML + ton JS, mais à l’intérieur de ta propre mise en page (tu peux l’entourer de sections, colonnes, etc.).
2 points à connaître
Le JS ne s’exécute pas dans l’aperçu de l’éditeur (GrapesJS affiche un cadre « Custom code with <script>can’t be rendered on the canvas »). C’est normal et voulu (sécurité éditeur). En revanche, le script tourne bien sur la page exportée / le widget final.
Le <script> exporté a accès à l’API Grist (déjà chargée), donc tu peux y faire du grist.docApi.fetchTable(...) / applyUserActions(...) à la main si tu veux du sur-mesure au-delà des blocs Tableau/Formulaire.
Différence avec le custom builder de Grist
Le custom builder a 2 champs séparés (HTML | JS). Ici c’est un seul éditeur combiné (tu écris le HTML puis un <script> pour le JS). Fonctionnellement identique, UX un peu différente.
Dans la liste des blocs, catégorie « Extra », nouveau bloc </> Code HTML + JS. Pour ton utilisateur non-codeur :
tu glisse le bloc dans sa page.
Double-clic → une fenêtre s’ouvre avec 2 zones séparées :
HTML (en haut),
JavaScript (en bas).
Enregistrer → c’est intégré dans sa mise en page.
Exactement le modèle « custom builder » de Grist : HTML d’un côté, JS de l’autre, mais inséré où on veut dans notre page (entre les sections, colonnes…).
Le JavaScript ne s’exécute PAS dans l’éditeur (volontaire, pour ne pas casser l’édition), il tourne sur la page publiée / le widget exporté (via un script[type="text/embed-js"] que le runtime exécute au chargement).
Le JS a accès à l’API Grist (déjà chargée) → il peut lire/écrire le document si tu le souhaite.
Page / widget (GitHub Pages) : https://isaytoo.github.io/grist-design-web/
Code source (GitHub) : https://github.com/isaytoo/grist-design-web
Exactement le modèle « custom builder » de Grist : HTML d’un côté, JS de l’autre, mais inséré où on veut dans notre page (entre les sections, colonnes…).
