# Hinzufügen eigener Funktionen

### In den Gruppen HTML, JavaScript und CSS

Wenn Sie im Beispiel-Plugin Plugin Playground auf Edit klicken, werden die Gruppen HTML, JavaScript (JS) und CSS angezeigt. In der Gruppe HTML (links) können Sie die Benutzeroberfläche Ihres Plugins ändern. Die Gruppe JS (Mitte) ermöglicht Ihnen das Schreiben von Funktionen, die über die FormIt-JS-Plugin-API mit FormIt kommunizieren können. Schließlich bestimmt die Gruppe CSS (rechts) den Stil Ihres HTML-Codes.

![](/files/qk5yxFU1FCoHMIekZffw)

### Hinzufügen einer Funktion zum Erstellen eines Zylinders

Wir fügen diesem Plugin eine Funktion hinzu, um einen Zylinder zu erstellen.

Zunächst konfigurieren wir das Eingabefeld und die Schaltfläche UI in der Gruppe HTML. Kopieren Sie den folgenden Code, und fügen Sie ihn nach Zeile 23 und vor *\<! ein.-- Entfernen Sie die unten aufgeführten Skripte nicht, es sei denn, Sie wissen, was Sie tun- - >*

Dadurch werden einige grundlegende Elemente der Benutzeroberfläche zu unserem Plugin hinzugefügt.

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

Als Nächstes fügen wir zwei Funktionen in der JS-Gruppe hinzu. Kopieren Sie den folgenden Code, und fügen Sie ihn am Ende der Datei (nach Zeile 16) ein.

Dadurch wird ein Zylinder im FormIt-Arbeitsbereich erstellt.

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

### Ausführen und Vorschau

Wenn Sie die Ergebnisse sehen möchten, klicken Sie erneut auf die Schaltfläche Wiedergabe ![](/files/DEnORpyKDUlUrvW8sEHB). Ihre Aktualisierungen des Plugins werden in derselben Gruppe angezeigt.

![](/files/lUNFObI8ggqWNl5YUT4N)

### FormIt-Plugin-API

Eine vollständige Dokumentation zur FormIt-Plugin-API finden Sie im Abschnitt [Nützliche Links](/de/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/de/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.