# Ajout de vos propres fonctionnalités

### Dans les groupes de fonctions HTML, JavaScript et CSS

Lorsque vous cliquez sur Modifier dans l’exemple de plug-in Plugin Playground, les groupes de fonctions HTML, JavaScript (JS) et CSS s’affichent. Le groupe de fonctions HTML (à gauche) vous permet de modifier l’interface utilisateur de votre plug-in. Le groupe de fonctions JS (au milieu) vous permet d’écrire des fonctions qui peuvent communiquer avec FormIt à l’aide de l’API du plug-in JS FormIt. Enfin, le groupe de fonctions CSS (à droite) détermine le style de votre code HTML.

![](/files/2O29ExRAcJgM9BBVhKcm)

### Ajout d’une fonction pour créer un cylindre

Ajoutez une fonction à ce plug-in pour créer un cylindre.

Commencez par configurer le champ de saisie et le bouton d’interface utilisateur dans le groupe de fonctions HTML. Copiez le code suivant et collez-le après la ligne 23 et avant *\<!-- Ne supprimez pas les scripts ci-dessous, sauf si vous savez ce que vous faites -- >*

Cela permet d’ajouter des éléments de base de l’interface utilisateur au plug-in.

```
<p>Cylinder: Create a cylinder at the origin.</p>
<div>
    <input id="Radius" type=number value=2 />
    <label>Radius</label>
</div>

<div>
    <input id="CHeight" type=number value =0.5 />
    <label>Height</label>
</div>


<input id="CreateCylinderBtn" type=button value="Create Cylinder" />
```

![](/files/cicV2hxK8f26NzIaOFhu)

Ajoutez ensuite deux fonctions dans le groupe de fonctions JS. Copiez le code suivant et collez-le à la fin du fichier (après la ligne 16).

Cela permet de créer un cylindre dans l’espace de travail FormIt.

```
// Create cylinder
const createCylinder = async (r,h) =>
{
    const posCenter = await WSM.Geom.Point3d(0,0,0);

    const histID = await FormIt.GroupEdit.GetEditingHistoryID();
    console.log(histID,posCenter,r,h);

    const cyl = await WSM.APICreateCylinder(histID,posCenter,r,h);
}


// Execute function when 'create cylinder' button is clicked
document.getElementById("CreateCylinderBtn").addEventListener("click", ()=>
{
    console.log('create cylinder clicked')

    const r = Number(document.getElementById("Radius").value);
    const h = Number(document.getElementById("CHeight").value);

    createCylinder(r,h);

});
```

![](/files/xsu6Ma4F6t5l2ElCCVGn)

### Exécution et aperçu

Lorsque vous êtes prêt à voir les résultats, cliquez sur le bouton Play (Lecture) ![](/files/swMheUG4HfLdjHG5oVRq), et vous verrez vos mises à jour du plug-in dans le même groupe de fonctions.

![](/files/kWYyYuXXRkzKi1zHcY0A)

### API des plug-ins FormIt

Pour obtenir une documentation complète sur l’API des plug-ins FormIt, reportez-vous à la section [liens utiles](/fr/plugins/useful-links.md).


---

# Agent Instructions: 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://windows.help.formit.autodesk.com/fr/plugins/how-to-develop-plugins/your-first-plugin/adding-your-own-features.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.