# Adicionar seus próprios recursos

### Dentro dos painéis HTML, JavaScript e CSS

Quando você clicar em Editar no plug-in de amostra Plugin Playground, verá os painéis HTML, JavaScript (JS) e CSS. O painel HTML (à esquerda) permite modificar a interface do usuário do plug-in. O painel JS (meio) permite gravar funções que podem se comunicar com o FormIt usando a API do plug-in JS do FormIt. Finalmente, o painel CSS (direita) determinará o estilo do HTML.

![](/files/iiL9I308bcLvZ5ZT0Hd4)

### Adicionar uma função para criar um cilindro

Vamos adicionar uma figura a esse plug-in para criar um cilindro.

Primeiro, vamos configurar o campo de entrada e o botão da interface do usuário no painel HTML. Copie o seguinte código e cole-o após a linha 23 e antes de *\<!— Não remova os scripts abaixo, a menos que você saiba o que está fazendo — >*

Isso adicionará alguns elementos básicos da interface do usuário ao nosso 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/MsRMHDAuMyvOUqya7ZYg)

Em seguida, vamos adicionar duas funções ao painel JS. Copie o seguinte código e cole-o no final do arquivo (após a linha 16).

Isso criará um cilindro em nosso espaço de trabalho do 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/n5MzExs9lPKcbXPIgyhh)

### Execução e visualização

Quando estiver pronto para ver os resultados, clique no botão Reproduzir ![](/files/R5xJj0YQhf2G96ARbVDX) novamente e você verá no mesmo painel as atualizações que fez no plug-in.

![](/files/Pry4aDWLMAuyBjQMzsqb)

### API de plug-ins do FormIt

Para obter a documentação completa sobre a API de plug-ins do FormIt, consulte a seção [links úteis](/pt-br/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/pt-br/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.