# Custom JS Action

In some scenarios, users may need to add **custom actions or behaviors** to specific HTML elements on a page. ONEWEB supports this requirement by allowing developers to define **custom JavaScript actions** directly within **Page Designer**.

Custom JavaScript actions enable advanced UI interactions such as dynamic behavior, event handling, or custom logic execution in response to user actions.

***

#### **JavaScript Editor in Action Menu Panel**

Page Designer provides a built‑in **JavaScript Editor** within the **Action Menu Panel**.\
This editor allows users to write JavaScript functions that can be bound to UI elements or triggered by specific events.

To add a custom JavaScript action:

1. Open the page in **Page Designer**.
2. Open the **Action Menu Panel**.
3. Use the **JavaScript editor** to define the required JavaScript function.
4. Associate the function with the desired HTML element or event.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F6OoPP6kiQpqFDNFkVaa2%2Fimage.png?alt=media&#x26;token=0bdd0393-f942-4669-96c2-ae5bc38054ea" alt=""><figcaption></figcaption></figure>

***

#### **Use Cases for Custom JS Actions**

Custom JavaScript actions are commonly used for:

* Handling custom click or change events
* Dynamically showing or hiding page elements
* Triggering animations or transitions
* Executing custom client‑side logic
* Integrating additional UI behaviors not provided by default components

This flexibility allows designers and developers to enhance user interaction without altering backend logic.

***

#### **Benefits of Using Custom JS Actions**

By using custom JavaScript actions in Page Designer, users can:

* Extend default page behavior
* Implement interactive and dynamic UI features
* Improve user experience and responsiveness
* Keep customization localized to specific pages or elements

Custom JS actions complement other customization mechanisms such as **Custom CSS** and **Element Actions**.

***

#### **Summary**

**Custom JS Actions** provide a powerful way to enhance page behavior in ONEWEB applications.

Through the JavaScript editor in Page Designer, users can:

* Define custom client‑side logic
* Bind actions directly to UI elements
* Implement advanced and interactive UI functionality
* Maintain flexible and maintainable page designs

This capability enables Page Designer to support both simple enhancements and advanced UI interaction requirements.


---

# 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://docs.onewebstack.com/building-apps/ui-page-designer/ux-ui-customization/page-customization/custom-js-action.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.