---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Concevoir une variante de page dans UIB

# Concevoir une variante de page dans UIB {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute de lecture

Configurez une variante de page du générateur d'IU à transmettre d'un modal d'espace de travail à la variante. Cette étape fait partie du processus de configuration d'un bouton d'action pour ouvrir une fenêtre modale personnalisée.

## Avant de commencer

Effectuez les actions suivantes :

* [Créer une action de formulaire](https://servicenow-prod.fluidtopics.net/j18CtiMUZQtyjMorlLy75A "Ajoutez un bouton d’action de formulaire à votre espace de travail configurable.")
* [Activer Customer Service Management](https://www.servicenow.com/docs/access?context=t_ActivateCustomerService&version=xanadu&pubname=xanadu-customer-service-management&ft:locale=en-US)
* Ouvrez votre page d'enregistrement dans UIB ou [créez une variante de page dans UIB](https://www.servicenow.com/docs/access?context=create-variant&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US)
{#design-a-page-variant-in-uib__ul_wlf_xnm_d1c}

Rôle requis : administrateur

## Procédure

1. Ouvrez votre variante de page.
2. Ajoutez des composants à afficher sur la page en sélectionnant +Ajouter un composant sous l'élément Corps.
3. Sélectionnez le composant ajouté et sélectionnez le champ Table .
4. Basculez le paramètre sur Lier les données et remonter pas à pas vers la propriété de table en saisissant <kbd class="ph userinput">@context.props.table</kbd>.
5. Sélectionnez le champ Titre et passez en mode Script .
6. Entrez le script suivant et transmettez le sysID reçu via le paramètre URL en tant que variable de modèle JS.  

       function evaluateProperty({ api, helpers }) {
       	return `Only ${api.context.props.sysId}`;
       }

7. Sélectionnez Appliquer pour le script, puis sélectionnez Enregistrer.

## Résultats

Les variables de table et sysID sont configurées pour être transmises du modal à la variante via l'URL.