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.

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 and Page State, read the respective documentation.

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.