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

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` 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>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.