> For the complete documentation index, see [llms.txt](https://windows.help.formit.autodesk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://windows.help.formit.autodesk.com/fr/plugins/how-to-develop-plugins/your-first-plugin/adding-your-own-features.md).

# 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).