Build Quick Access to Templates and Snippets

PixieBrix is great for fetching information and making it accessible anywhere you need it. A great example of this is message templates or text snippets. If you find yourself constantly typing similar messages, why not save them in a Google Sheet and fetch them to display on a sidebar on any page?

You can build a mod with PixieBrix that does this in less than ten minutes.

Or, you can activate our template mod and customize as you like.

Don't believe me? Follow along!

🏁 Before starting:

• Copy this Google Doc, then update the Text items with your own templates
• Sign up for PixieBrix
• Open the Page Editor (Right-click anywhere on this page and select Inspect, then find the PixieBrix tab. Check out our docs for more help with opening the Page Editor.)

Okay, now go ahead and start that timer!

⌨️ Step 1- Add a Sidebar Starter Brick

From the Page Editor, click the Add button next to the PixieBrix logo on the left side. Choose the Sidebar Panel.

Customize the Show Sidebar Panel brick items in the middle panel that appears. You'll name the mod, give a title to the Tab Title at the top of the Sidebar Panel, and define the sites where you can trigger this. Click All URLs to run from any page.

Lastly, choose State Change from the Trigger options. We'll be adding a search box in the Sidebar Panel and we want our panel to refresh when there is a new search.

Next up, you'll start adding bricks that will be triggered when you click that action from your Quick Bar. Bricks are like mini predefined functions that perform a variety of tasks for you. Piecing a couple of bricks together is how we'll render your saved templates in a sidebar!

🧱 Step 2- Get the templates from Google Sheet

In this example, we've defined our templates in a Google Sheet, so we'll add a brick for looking up data from a Google Sheet.

You'll need to go to the second panel from the left to add a brick. This is your Brick Actions pipeline, and you should see the Sidebar Panel brick with a + button below it.

Click the + button and search for the brick you want to add. In this instance, search for Lookup Google Sheet row.

Hover over the desired brick and click the blue Add button that appears. You'll see a new brick appear in the pipeline, and a new set of configuration options appear in the panel just to the right of it.

To lookup our templates, select the Google Sheet you created at the beginning of this tutorial. (You might need to connect your Google Account if you haven't already!)

After selecting a sheet, choose the Tab Name from the dropdown and the Column Header you want to search. Assuming you used the same format from the provided Google Sheet, you'll want the Templates tab name, and the Template column header.

Lastly, make sure to click the toggle for All Matches so it returns all the rows and not just the first match. Your brick should look like this:  

We've fetched the results, so we'll just need to build a section to display them on our webpage.

💻 Step 3- Add info in the Render Document brick

Since we selected a Sidebar Panel as our starter brick, so we got a Render Document brick added to our mod already!

Click that brick, then look on the far right of the Page Editor. You should see a preview of your sidebar! We call this the Preview Panel. Click on the text in the Preview Panel to edit it in the middle of the Page Editor.

Let's click on Example Document and then jump to the middle of the Page Editor and change the text to Templates

Click the green text in the preview panel. Then jump to the middle and change it to something like Select your template.

🔍 Step 4- Make a search box

You might have a lot of templates saved in your Google Sheet, and being able to search for templates that contain specific keywords could help narrow down the results so you can find what you need when you need it. So, let's add a search box to our sidebar.

To do this, click the three dots on the second-outermost box in the Page Editor.

Click the three dots in the Preview Panel in the new column element and choose the Form option.

Click the new Custom Form brick that appeared in the Brick Actions Pipeline (second panel from the left!)

Scroll to the Submit Caption field and change the text from Save to Search.

Keep scrolling til you see the Current Field section, and configure the following settings on the existing example field.

• Name: search
• Label: Search templates
• Field Description: Click ABC, then exclude to omit
• Input Type: Single line text

If you want to preview your search box, run your mod by opening the Quick Bar and clicking the Show Templates action.

⭐ Step 5- Filter the results based on your search

At the moment, our search box isn't very useful because it's collecting the search query, but it's not filtering the data from Google Sheets. Let's fix that with some JQ magic.

Start by clicking the + button just above the Render Document brick.  Search for the jq - JSON processor brick and add it. Configure the following fields:

• filter: .[]|.Text | [select(ascii_downcase | contains(""))]
• data: @row

One more thing - go to the top of that brick's configuration options and rename the output that says transformed to be filtered instead.

Alright, enough configuring... now it's time to show these templates!

✅ Step 6- Display the templates

Let's head back to the Render Document brick by clicking Render Document in the Brick Actions pipeline.

Just like we added the form, we'll need to add another element by clicking the three dots in the second-most outer box in the Preview Panel.

Click the three dots inside the element that appears and choose List.

Click the text that says List: undefined in the Preview Panel.

Configure the fields that appear in the middle of the Page Editor as follows:

• Click the Array field and reference the filtered items we just built by typing @filtered
• Rename the element item to template
• Select Row from the Item Type options.

You might have noticed there's now a new column element inside the list element. Click the three dots on the innermost element and choose the Button option. Click the blue button and change the following fields:

• Pipeline name: Templates
• Button Label: @template
• Button Style: Primary (light outline) Or any other style you prefer!
• Full Width: toggle on

Run your mod by opening the Quick Bar and choosing the action, and you'll see your templates appear as buttons in the sidebar! They're on top of each other, so let's add some margin to space them out a bit.

To do this, click the Row element surrounding the buttons from the Preview Panel. Then, in the middle panel with the configuration options, find the Advanced: Layout section and click the caret to open the options. Click the caret next to Margin and select 2 from the dropdown next to Top.

Feels like a lot of steps? Watch this and pause as you go to see each step:

We're nearly finished! You can now view your templates, but they'll be most useful when you can copy them to your clipboard so you can use them wherever you need them; let's finish by adding that functionality.

📋 Step 7- Copy a template to the clipboard

This step is super easy. Remember when we created the buttons and renamed the Button Pipeline name Template? You might have noticed that you have a new section in your Brick Actions Pipeline called Template!

Click that + button underneath Template, and you'll be able to add a brick. Any bricks added here will trigger whenever the button (in this case, a template) is clicked. Search for the Copy to clipboard brick and add it.

In the content field, simply type @template . This will copy the text of the template that you click in the sidebar directly to your clipboard.

All that's left is to try it out!

🏎️ Step 8- Take it for a test drive

To confirm everything works as expected, run your mod by opening the Quick Bar and choosing the Show Templates action. You should see the sidebar panel appear with all of your templates displayed as buttons. Clicking any one of them copies the text of that template to your clipboard.

Search for some text in the search box, and you should see your templates decrease to only show ones that contain the text in the search box.

🎉 Congrats! You've successfully built a message template sidebar. But this is just the start. You can build anything else on top of this, like additional actions such as setting input value on the current page or asking AI to rewrite the template. You can also fetch template messages from another tool (like Airtable, your own API, or something else).