Web Script Engine pour Disign: Personnalisez vos affichages dynamiques

17 septembre 2024

Vous êtes nombreux à nous faire part de votre satisfaction quant à la personnalisation avancée offerte par Disign et à son adaptabilité dans divers cas d'utilisation. Toutefois, jusqu'à récemment, l'interaction avec le contenu d'une frame, notamment lors de l'utilisation de composants comme "Website" ou "Embed Content", était limitée. Vous ne pouviez pas modifier ou interagir directement avec le contenu à l'intérieur de cette frame, sauf si vous en étiez le propriétaire et aviez accès au SDK de Disign.

Qu'est-ce que le Web Script Engine ?

Avec l'introduction du Web Script Engine de Disign, cette limitation appartient désormais au passé. Vous pouvez désormais interagir facilement avec le contenu des frames, qu'il s'agisse de modifier des éléments ou d'automatiser des processus.

Cas d'Utilisation

Voyons quelques exemples concrets de ce que vous pouvez accomplir avec cette nouvelle fonctionnalité :

1. Authentification automatique

Supposons que vous souhaitiez afficher un tableau de bord comme Power BI ou Looker Studio, qui nécessite une authentification. Grâce au Web Script Engine, Disign peut désormais se connecter automatiquement à ces plateformes et afficher le contenu souhaité en utilisant une approche low code.

2. Modification de la page web

Une autre utilisation courante est la modification du contenu affiché. Vous pouvez, par exemple, supprimer des parties d'une page ou ajuster le style pour un affichage optimal. Cela vous permet de personnaliser les éléments pour qu'ils s'adaptent parfaitement à vos écrans dynamiques.

3. Accès à du contenu particulier

Si vous devez afficher un élément spécifique d'une page web sans lien direct, le Web Script Engine vous permet de faire défiler la page pour atteindre et afficher ce contenu.

Ces exemples ne sont que la partie émergée de l'iceberg. Le Web Script Engine est un outil puissant qui vous permet d'interagir de manière approfondie avec le contenu des sites tiers, tout en optimisant et sécurisant cette communication.

Fonctionnement du Web Script Engine

Pour comprendre comment utiliser le Web Script Engine, voici un exemple simple pour effectuer une recherche sur Google :

goAndWait("""https://google.com""")
type("""textarea""", """Disign""")
clickAndWait("""input""")

Chaque ligne d'instruction est exécutée séquentiellement. Vous avez également la possibilité d'injecter du code JavaScript ou CSS pour personnaliser encore plus vos pages :

runScript("""document.querySelector('header').style.backgroundColor = "green";""")
insertStyle("""dsStyleId""", """
    header {
        background-color: red !important;
    }
""")

Le Web Script Engine est conçu pour être lisible et accessible, masquant la complexité du pilotage, de la navigation et de l'interaction multi-site.

Pour des scripts plus avancés, vous pouvez utiliser des instructions conditionnelles :

if ("""return !!document.querySelector('header h2')""") {
    runScript("""document.querySelector('header').style.backgroundColor = "blue";""")
} else if ("""return !!document.querySelector('header h3')""") {
    runScript("""document.querySelector('header').style.backgroundColor = "green";""")
} else {
    runScript("""document.querySelector('header h1').textContent = "Disign";""")
}

Intégration avec l'Interactivity Editor

Le Web Script Engine se configure via l'Interactivity Editor. Ce dernier permet d'exécuter des scripts lors d'événements spécifiques dans Disign. Vous pouvez, par exemple, faire en sorte que le script s'exécute dès le chargement de la frame en utilisant les événements onLoad et onFirstLoad :

onLoad : Le script est exécuté à chaque changement de page ou de navigation. onFirstLoad : Le script s'exécute lors du premier chargement. Vous pouvez également créer des scripts dynamiques grâce à la syntaxe de script Disign :

goAndWait("""https://google.com""")
type("""textarea""", """{{ $this.vars.searchText }}""")
clickAndWait("""input""")

Le Web Script Engine complète ainsi l'arsenal de Disign pour offrir un affichage dynamique à la fois performant et hautement personnalisé, tout en éliminant de nombreuses barrières du affichage dynamique classique. Cette fonctionnalité est disponible pour les players sous Disign OS, Linux et Windows.

N'hésitez pas à nous faire part de vos retours ici. Vos feedbacks sont essentiels pour améliorer notre produit.

Si vous avez d'autres informations ou éléments à ajouter, n'hésitez pas à me le faire savoir !