> For the complete documentation index, see [llms.txt](https://docs.uibakery.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.uibakery.io/concepts/components/component-methods.md).
# Components methods
**Component methods** provide you with more flexibility when working with components. Using these methods, you can programmatically open and close components, set new or reset current values, and more. \
Component methods are available under `{{ui.componentName.methodName()}}` , and they can accept parameters and return values. You can see a list of component methods via the **App state** tab in the left side panel.
In this section, we'll explore two cases of using component methods.
## Opening and closing a modal programmatically
When working with a **Modal** component, you may want it to open via custom interaction - on *Button/Table row click* (using component triggers) or from a *custom JavaScript snippet*.
For this purpose, you simply need to add a Modal component to your working area and create a **JavaScript Code** action with the following code:
{{ui.myCustomModal.open()}} - open a modal
```javascript
{{ui.myCustomModal.close()}} - close a modal
```
## Resetting a form after submission
Now, let's review the case how you can reset a **Form** after creating a record and submitting your changes.
### To reset a form:
1. Add a **Form** to the working area.
2. Navigate to its **Triggers** section and select **Create action** for the **O*****n Submit*** trigger.
3. For the first step, select the **Create Row** action type.
4. Next, add another step to it of the **JavaScript Code** type and specify the following code:
```javascript
{{ui.yourForm.reset()}}
```
Done! Now, after submitting the form, it will return to its default condition.
{% embed url="" %}
---
# 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:
```
GET https://docs.uibakery.io/concepts/components/component-methods.md?ask=
```
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.