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

# Dodawanie własnych funkcji

### Panele HTML, JavaScript i CSS

Po kliknięciu przycisku Edit (Edytuj) w przykładowej wtyczce w obszarze Plugin Playground (Zabawa z wtyczkami) zostaną wyświetlone panele HTML, JavaScript (JS) i CSS. Panel HTML (po lewej) umożliwia modyfikowanie interfejsu użytkownika wtyczki. Panel JS (środkowy) umożliwia pisanie funkcji, które mogą komunikować się z programem FormIt za pomocą interfejsu API wtyczki JS programu FormIt. Natomiast panel CSS (po prawej) określa styl HTML.

![](/files/OIkzE8Sq7YeD1VaxQTfA)

### Dodawanie funkcji do tworzenia walca

Dodajmy do tej wtyczki element służący do tworzenia walca.

Najpierw skonfigurujmy pole wprowadzania i przycisk interfejsu użytkownika w panelu HTML. Skopiuj następujący kod i wklej go po 23. wierszu i przed tekstem *\<!-- Do not remove below scripts unless you know what you're doing- - >*

Spowoduje to dodanie do wtyczki pewnch podstawowych elementów interfejsu użytkownika.

```
<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/Hp95JOtuj12MD3XPGlxd)

Następnie dodajmy dwie funkcje w panelu JS. Skopiuj następujący kod i wklej go na końcu pliku (po 16. wierszu).

Spowoduje to utworzenie walca w obszarze roboczym programu 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/4oR7IA47FFTUWowvPsny)

### Uruchamianie i podgląd

Gdy wszystko będzie gotowe do wyświetlenia wyników, ponownie kliknij przycisk Odtwórz ![](/files/eBvtfhgF39lzDSw9iDWO), a aktualizacje wtyczki pojawią się w tym samym panelu.

![](/files/Genwer0lDJaPEh6SUSIQ)

### Interfejs API wtyczek programu FormIt

Aby zapoznać się z pełną dokumentacją dotyczącą interfejsu API wtyczek programu FormIt, zobacz sekcję [przydatnych łączy](/pl/plugins/useful-links.md).