> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/fr/portail/portal-widgets/syntax.md).

# Syntaxe

PSBlazor est une syntaxe personnalisée basée sur Blazor et les pages Razor. Elle est similaire à XML ou XAML et fournit un mécanisme permettant de définir de manière déclarative une interface utilisateur.

## Composants

Chaque composant est défini avec un nœud XML, tel que `<Button>` ou `<Text>`. Chaque composant possède son propre ensemble d'attributs qui personnalisent le comportement et l'apparence du widget. Certains composants prennent en charge le contenu enfant et peuvent inclure des composants imbriqués.

### Définir un composant

Pour définir un composant, vous utiliserez l'éditeur de code PSBlazor pour ajouter les balises XML du composant. Par exemple, pour créer un bouton, vous procéderiez comme suit.

```xml
<Button>Click Me</Button>
```

Le résultat est une page avec un bouton défini.

<figure><img src="/files/tUnp0M5boFsMobXsh1zh" alt=""><figcaption><p>Bouton sur un outil</p></figcaption></figure>

### Définir des attributs

Chaque composant dispose d'attributs disponibles. Dans l'éditeur de code de la page PSBlazor, les attributs seront automatiquement répertoriés pour le composant en cours de modification.

<figure><img src="/files/f0yxIv9Nty8VjC6WMee6" alt=""><figcaption><p>Composants d'attributs PSBlazor</p></figcaption></figure>

La définition des attributs est identique à celle de tout attribut XML. Cet exemple change le bouton à l'état danger.

```xml
<Row>
    <Button Danger="true">Click Me</Button>
</Row>
```

Une fois l'outil enregistré, l'affichage sera mis à jour. Avec le bouton en état danger, vous verrez qu'il est maintenant rouge.

<figure><img src="/files/RqBO2LsSBH3TkGhRAyZy" alt=""><figcaption><p>Bouton danger</p></figcaption></figure>

### Contenu enfant

Certains composants offrent la possibilité de définir un contenu enfant. Vous pouvez utiliser le nœud `<ChildContent>` pour indiquer que c'est le cas.

```xml
<Row>
   <ChildContent>
      <Button>Click Me</Button>
   </ChildContent>
</Row>
```

Si aucun autre nœud n'est spécifié dans l'enfant du composant, il est supposé être un contenu enfant. Ce qui précède peut être simplifié comme suit.

```xml
<Row>
    <Button>Click Me</Button>
</Row>
```

Certains composants fournissent des attributs de gabarit qui peuvent être définis en spécifiant plusieurs nœuds de contenu enfant avec les noms de nœuds appropriés. Par exemple, le tableau peut avoir un contenu enfant composé de colonnes et un gabarit de titre définissant la façon dont le titre est affiché. Lorsque plusieurs nœuds enfants sont définis, `<ChildContent>` est obligatoire.

```xml
<Table DataSource="$Services">
   <ChildContent>
       <PropertyColumn Name="Name" />
   </ChildContent>
   <TitleTemplate>
      <Text>My Services</Text>
   </TitleTemplate>
</Table>
```

## PowerShell

Chaque outil ou composant PSBlazor est associé à un fichier PSM1 qui contient la logique interactive. Cette logique peut interagir avec des modules, invoquer des scripts dans PSU ou mettre à jour l'interface en fonction des données traitées par le script.

### Rappels d'événements

Les rappels d'événements se produisent lorsque l'utilisateur interagit avec un composant PSBlazor. Cela peut inclure des clics de souris, des soumissions de formulaires ou des saisies au clavier. Les rappels d'événements sont simplement des fonctions PowerShell. Ce qui suit peut être utilisé lorsqu'un utilisateur clique sur un bouton.

```powershell
function OnClick {
}
```

### Arguments

La plupart des rappels d'événements fournissent un objet contenant des informations sur l'événement. Par exemple, les événements de souris incluent des informations telles que les coordonnées du clic. Vous pouvez y accéder en fournissant un paramètre `$EventArgs`.

```powershell
function OnClick {
   param($EventArgs)
}
```

### Contexte

Certains composants sont contextuels, par exemple une ligne de tableau ou un élément de formulaire. Les valeurs de contexte sont transmises au rappel d'événement avec un paramètre `$Context`.

```powershell
function OnClick {
   param($Context)
}
```

## Variables

Les variables peuvent être utilisées pour mettre à jour les composants PSBlazor avec des données provenant de PowerShell. Utilisez le dictionnaire `$Variables` pour obtenir et définir des variables.

```powershell
$Variables["TestVariable"] = "Not Clicked"

function OnClick {
    $Variables["TestVariable"] = "Clicked"
}
```

Dans la syntaxe PSBlazor, vous pouvez référencer des variables de la même manière que vous le feriez dans PowerShell.

```xml
<Text>$TestVariable</Text>
<Button OnClick="OnClick">Click Me</Button>
```

Vous pouvez également utiliser des variables dans les attributs.

```xml
<Alert Message="$TestVariable"></Alert>
<Button OnClick="OnClick">Click Me</Button>
```

Les variables peuvent également être des objets complexes tels que `PSCustomObject` ou `Hashtable`. Si elles possèdent des propriétés, vous pouvez également les référencer dans la syntaxe PSBlazor.

```xml
<Alert Message="$TestVariable.Name"></Alert>
<Button OnClick="OnClick">Click Me</Button>
```

### Liaison de données

La liaison de données fournit un mécanisme pour mettre à jour les variables sans avoir à appeler un script PowerShell. Pour définir une liaison entre un attribut d'un composant PSBlazor, utilisez la syntaxe `bind-{attribute}`.

Par exemple, vous pourriez lier une variable `$test` à une zone de saisie comme suit.

```xml
<Input bind-Value="$TextValue"></Input>
```

Dans votre module PowerShell, vous pourriez ensuite accéder à la variable depuis l'objet `$Variables`.

```powershell
$Message.Info($Variables["TextValue"])
```

### Cycle de vie

Les variables sont effacées lorsqu'un utilisateur actualise la page. Elles ne sont pas mises en cache au-delà de cette portée. Chaque utilisateur et chaque page d'outil disposera d'un ensemble différent de variables.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/fr/portail/portal-widgets/syntax.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
