# Přidání vlastních funkcí

### Panely jazyků HTML, JavaScript a CSS

Když kliknete na tlačítko Edit (Upravit) ve vzorovém modulu plug-in Plugin Playground, uvidíte panely HTML, JavaScript (JS) a CSS. Panel HTML (vlevo) umožňuje upravit uživatelské rozhraní modulu plug-in. Panel JS (uprostřed) umožňuje psát funkce, které mohou komunikovat s aplikací FormIt pomocí rozhraní API modulu plug-in FormIt JS. Pomocí panelu CSS (vpravo) můžete definovat styl HTML.

![](/files/iolKKEVa0IJ4dq369rya)

### Přidání funkce pro vytvoření válce

Přidejte do tohoto modulu plug-in funkci pro vytvoření válce.

Nejprve nakonfigurujte vstupní pole a tlačítko uživatelského rozhraní v panelu HTML. Zkopírujte následující kód a vložte jej za řádek 23 a před řádek *\<!-- Do not remove below scripts unless you know what you're doing- - >*

Tím do modulu plug-in přidáte některé základní prvky uživatelského rozhraní.

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

Nyní přidejte dvě funkce na panelu JS. Zkopírujte následující kód a vložte jej na konec souboru (za řádek 16).

Tento kód umožní v pracovním prostoru aplikace FormIt vytvořit válec.

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

### Spuštění a náhled

Až si budete chtít prohlédnout výsledky, klikněte znovu na tlačítko Přehrát ![](/files/VRngRc0qDMuO38jERb2t) a na stejném panelu se zobrazí aktualizace modulu plug-in.

![](/files/K4Cn181N4b9cRuxKHXxI)

### Rozhraní API modulů plug-in pro aplikaci FormIt

Úplnou dokumentaci k rozhraní API modulů plug-in pro aplikaci FormIt naleznete v části [užitečné odkazy](/cs/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/cs/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.