> 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/portal/portal-widgets/syntax.md).

# Syntaxe

Apprenez la syntaxe PSBlazor utilisée dans PowerShell Universal pour définir les composants, les attributs, les rappels d'événements et la liaison de données pour les widgets de portail.

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 pour définir de façon déclarative une interface utilisateur.

## Composants

Chaque composant est défini avec un nœud XML, comme `<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 du 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 feriez ce qui suit.

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

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

### Définir les attributs

Chaque composant possède des attributs disponibles. Dans l'éditeur de code de la page PSBlazor, les attributs seront automatiquement listés pour le composant que vous modifiez actuellement.

Définir des attributs revient à définir n'importe quel 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 à l'état danger, vous verrez qu'il est maintenant rouge.

### Contenu enfant

Certains composants offrent la possibilité de définir du 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 présumé être du contenu enfant. Ce qui précède peut être simplifié ainsi.

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

Certains composants fournissent des attributs de modèle 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 du contenu enfant composé de colonnes et d'un modèle de titre qui définit la façon dont le titre est affiché. Lorsque plusieurs nœuds enfants sont définis, `<ChildContent>` est requis.

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

## PowerShell

Chaque outil ou composant PSBlazor a un fichier PSM1 associé 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 les clics de souris, les soumissions de formulaire ou les saisies au clavier. Les rappels d'événements sont simplement des fonctions PowerShell. Ce qui suit pourrait être utilisé lorsqu'un utilisateur clique sur un bouton.

```powershell
function OnClick {
}
```

### Arguments

La plupart des rappels d'événements fournissent un objet qui contient des informations sur l'événement. Par exemple, les événements de souris incluent des informations comme 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 les variables de façon similaire à ce que vous feriez dans PowerShell.

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

Vous pouvez aussi utiliser des variables dans les attributs.

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

Les variables peuvent aussi être des objets complexes tels que `PSCustomObject` ou `Hashtable`. Si elles ont 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 sur un composant PSBlazor, utilisez la syntaxe `bind-{attribute}`.

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

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

Dans votre module PowerShell, vous pourriez ensuite accéder à la variable à partir de 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 auront 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.