Skip to main content

Create Custom Widgets

While Appsmith provides an extensive array of built-in widgets for application development, there are instances where your project demands a widget tailored to specific requirements. Appsmith's Custom widget allows you to integrate unique functionalities with your HTML, CSS, and JavaScript code, whether it's a personalized calendar, accordion, or social media widget.

Configure Custom Widget​

  1. Drop a Custom widget on the canvas.

  2. Click the Edit Source button to configure the code for the Custom widget.

Within the Custom widget builder, you can add JS, CSS, and HTML code, and the Custom widget is displayed automatically on Appsmith.

Example: To create an image carousel(slider) that displays user documents, import the required React libraries and configure the CSS accordingly, like:

<!-- no need to write html, head, body tags, it is handled by the widget -->
<link href="
https://cdn.jsdelivr.net/npm/react-responsive-carousel@3.2.23/lib/styles/carousel.min.css
" rel="stylesheet">
<div id="root"></div>
  1. To pass data from Appsmith to Custom widget, use the Default model property. You can bind data from queries or widgets using mustache bindings {{}}.

Example: For the image slider, add code that captures selected row data, including document URL and ID, like:

{
  "data": [
    "{{tbl_docs.selectedRow.doc_type_passport}}",
    "{{tbl_docs.selectedRow.doc_type_dl}}",
    "{{tbl_docs.selectedRow.doc_type_bank}}"
  ],
  "id": [
    "{{tbl_docs.selectedRow.id}}"
]}
  1. To retrieve the data provided to the Default model property, use appsmith.model.propertyName within the JavaScript section of the Custom widget builder.

Example: For the image slider, create a function that uses the React Carousel component to render images dynamically from Appsmith's data model, with specific styling. 

function App() {
  return (
    <Carousel showThumbs={false} showStatus={false} onChange={(d) => {}}>
      {appsmith.model.data.map((d, index) => {
        // Rendering each image in the carousel
        return (
          <img key={index} src={d} style={contentStyle} />
        );
      })}
    </Carousel>
  );
}

// To access the data in the javascript editor use appsmith.model.property-name..
//To access data in CSS use var(--appsmith-model-{property-name}
  1. To pass data from the Custom widget to Appsmith, use the updateModel property within your JS code to save or update data. Once the model is updated, you can retrieve the value using {{Custom.model.propertyname}} within any widget or query.

Example:

//JS
Function App() {
    return (
        <Carousel showThumbs={false} showStatus={false} onChange={(d) => {
        appsmith.updateModel({selectedIndex: d });
    }}>
        {appsmith.model.data.map((d) => {...

To display data in a Text widget, set its Text property to:

{{Custom1.model.selectedIndex}}
  1. For widget interaction, you can create events using the Add Event button on the Custom widget and use the triggerEvent property inside the Custom widget builder.

Example: To add a button within the Custom widget that, when clicked, executes a query, use the following code:

// Example: Handle button click event
const buttonElement = document.getElementById("requestChangeButton");
buttonElement.addEventListener("click", () => {
   appsmith.triggerEvent("onRequestchange");
});

In the Custom widget, create a new event with the same name as defined in the function, and configure it to execute an action.

Sample apps​

  • Custom Calendar App
  • Signature Pad App
  • Image Slider App