βœ‰οΈ

Auto-populate Forms (3 min)

🚧

Under construction: this tutorial is currently being updated for PixieBrix release 1.4.0

🍎

Before you begin this tutorial, make sure you've completed the Quick Start Guide

In this tutorial, we'll create a button to auto-populate a form with a message template. We'll use Todd Schiller's LinkedIn profile to develop this workflow.

There's a video at the end of the tutorial demonstrating what’s covered in the text.

1. Place a Button

Open the Page Editor

Start by navigating your browser to Todd Schiller's LinkedIn profile. Then, open the PixieBrix Page Editor, and grant PixieBrix access to the page.

Place a Button

  • In the top left of the Page Editor, click Add and choose Button
  • Then choose Use Existing Button
  • image

🚨

If you don't see the Use Existing Button option, expand the Page Editor by dragging the black header vertically with your mouse

  • Search for the LinkedIn Connect Invitation Button and choose it

image

  • To view the button, click Connect on the LinkedIn profile page and the Add Note
  • You should see a blue button that says "Action"

image

Customize the Caption

  • To customize the caption, click the Page Editor Menu Item tab. Then replace the word "Action" in the Caption text box with "Greeting"

image

2. Select Data

Select the Page Element

  • Start by clicking the Data tab in the Page Editor
  • Next, scroll down to see firstName, which is the property we'll use when configuring our message template

image
image
πŸ’‘

You can click the πŸ“ƒ icon next to "Todd" to copy its property path firstName to your clipboard. This will come in handy when configuring the action later in this tutorial.

3. Perform an Action

Configure the Set Input Value Action

  • Go to the Effect tab of the Page Editor and click Add Brick
  • Search "set input value" and choose this action

image

  • In the Page Editor click Add Item
  • Click the cursor icon in the Selector row. Then hover over the text input box and click.

image

  • In the Page Editor's Value row add a greeting. We'll surround the variable firstName with two sets of "{{"
  • For this tutorial, I'll use "Hi {{firstName}}, it would be great to connect"
  • image

Test Your Set Input Value Action

Press the Greeting button to test the action. If you're happy with it, click Save and try the greeting from different profiles.