> 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/it/plugins/how-to-develop-plugins/your-first-plugin/adding-your-own-features.md).

# Aggiunta di funzionalità personalizzate

### All'interno dei pannelli HTML, JavaScript e CSS

Quando si fa clic su Edit nel plug-in di esempio Plugin Playground, vengono visualizzati i pannelli HTML, JavaScript (JS) e CSS. Il pannello HTML (a sinistra) consente di modificare l'interfaccia utente del plug-in. Il pannello JS (al centro) consente di scrivere funzioni in grado di comunicare con FormIt utilizzando l'API del plug-in JS di FormIt. Infine, il pannello CSS (a destra) determinerà lo stile del codice HTML.

![](/files/4vKGJk4zbGLBHpoDhFzN)

### Aggiunta di una funzione per la creazione di un cilindro

Aggiungiamo una funzionalità a questo plug-in per creare un cilindro.

Innanzitutto, configuriamo il campo di input e il pulsante dell'interfaccia utente nel pannello HTML. Copiare il seguente codice e incollarlo dopo la riga 23 e prima di *\<!-- Do not remove below scripts unless you know what you're doing- - >*.

In questo modo verranno aggiunti alcuni elementi dell'interfaccia utente di base al 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/dLF5k4jNI5QUTp4hzgFK)

Ora, aggiungiamo due funzioni nel nostro pannello JS. Copiare il seguente codice e incollarlo alla fine del file (dopo la riga 16).

In questo modo verrà creato un cilindro nell'area di lavoro di 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/E5GabQ0fTbpDpO230ihY)

### Esecuzione e anteprima

Quando si è pronti a vedere i risultati, fare nuovamente clic sul pulsante di riproduzione ![](/files/JsHA4SyKYz4UKimXW1W4) e visualizzare gli aggiornamenti al plug-in nello stesso pannello.

![](/files/j0AmSHu6hz9A8rgKt2of)

### API dei plug-in di FormIt

Per la documentazione completa sull'API dei plug-in di FormIt, vedere la sezione dei [collegamenti utili](/it/plugins/useful-links.md).