> For the complete documentation index, see [llms.txt](https://docs.pixiebrix.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pixiebrix.com/developing-mods/developer-concepts/building-interfaces/adding-advanced-elements.md). # Adding Advanced Elements You can do a lot with text, markdown, and images to style your Sidebar or modal, but you might want to do a bit more to make things look nicer and more interactive. ### **Buttons** Adding buttons to your panel allows you to launch specific actions and workflows when your users interact with your panel. This can be useful for collecting information, saving data, scraping info from a page, or any other action. Anything you use PixieBrix for, you can make it happen by clicking a button in a Sidebar or modal. ![](https://files.cdn.thinkific.com/file_uploads/720267/images/7eb/e47/b47/1690578674701.jpg) You can configure style settings for your button in the middle panel and add actions underneath the pipeline on the left side. In the pipeline, add bricks you want to trigger when the button clicks. We'll go through an example of doing this in our mod in the next lesson, but first, let’s look at another type of advanced brick you might use. ### **Forms** Forms are a common way to collect information from a user and send it to another source (either a spreadsheet, a PixieBrix database, or somewhere else via an API). In this case, you'll use the **Form** element, which embeds a form, similar to the **Show a modal or sidebar form** brick. Even if you're just displaying data to a user, you still might use a form to create a search or a dropdown field to let the user select what is displayed. When you add a form element via the three dots, you'll see a new brick appear in the pipeline called **Custom Form**. Click that brick to see all your options for configuring a form. You might notice you have a few more configuration options than you saw in the **Show a modal or sidebar form** brick from a previous chapter. You can choose to Auto Save and display a custom success message when the form is submitted. You can also choose if you want to save the responses to a PixieBrix database or the Page State. To learn more about [Databases](https://docs.pixiebrix.com/enterprise/admin-guide/team-databases) and [Page State](https://docs.pixiebrix.com/page-state), read the respective documentation. ![](https://files.cdn.thinkific.com/file_uploads/720267/images/9b8/b39/a93/1691095406908.jpg) Below the form configuration, you'll recognize the specific field configuration options. ### **Lists** If you have an array of data (multiple items rather than just one), such as multiple rows from a spreadsheet or many objects in a response from an API, you can use the **List** element, which allows you to create an element for each item in an array. For example, if you look up a row in Google Sheets and get 5 matches, you might want to show them in a card format with the row's ID in the card's header and then the other details below. Lists allow you to create an element for each item in this array with the specific details from that item. ### **Bricks** In some cases, you might still need to do something in your sidebar panel that you haven't been able to do yet. Maybe you need to manipulate data with a JQ filter, or you need to render some custom HTML, or you want to show some information in a table. Add a **brick** element, and then you'll be able to add any brick you'd like to the pipeline, just like with the Custom Form or the Button element. --- # 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://docs.pixiebrix.com/developing-mods/developer-concepts/building-interfaces/adding-advanced-elements.md?ask=&goal= ``` `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.