Order Tracking

Use template
❗Before beginning, import this file to your Automation Anywhere control room. This API task takes a tracking number and returns tracking details.

To try it out:

  1. Configure your Automation Anywhere integration,
  2. Activate the mod.
  3. Select an order tracking numbe, like this one: 9205590164917312751089 and click the package emoji
  4. 🎉View your sidebar with the order information.
OPTIONAL: Keep reading to learn how to build this mod from scratch with PixieBrix.

Open the Page Editor

To build mods with PixieBrix, you'll use the Page Editor. This is found in the Chrome Dev tools, which you can access by right-clicking on any page and choosing "Inspect". Look for the PixieBrix tab (typically the last one). Pro tip: Dock your dev tools at the bottom of the page instead of the right side.

Add a Context Menu

When building a mod (automation workflows built in PixieBrix), you'll start with a starter brick based on how you want to initiate the automation. You can launch a mod in multiple ways, but for this example, let's use a context menu that will appear when text is selected on a page or is available via right-clicking on a page.

From the Page Editor, click the Add button next to the PixieBrix logo and choose Context Menu.

After selecting the Context Menu, you'll see the middle panel appears with customization options. (This middle panel is called the Brick Configuration Panel).

Customize the following items: 

  • NameTrack Package
  • Title: 📦 Track Package
  • Menu context: remove all and choose selection
  • Sites: choose All URLs so this mod can be run from any webpage

Since we started the Title with an emoji, when we select text on a page, the emoji will appear.

Now any bricks added in this pipeline will be executed when this emoji is clicked.

Add a Run with Async Mod Variable Brick to Store the Data

To add more brick to the pipeline, click the + button below the Context Menu brick in the second panel (the Brick Actions Panel).

Search for the Run with Async Mod Variable brick. Hover over it, and then click the blue Add button.

The Run with Async Mod Variable brick allows you to set a variable that runs a task and keeps track of the output and the status. Any bricks added inside the body of this brick will execute and the final result will be stored as the Mod Variable name provided.

Set the Mod Variable Name to packageStatus

Notice the body that was added? Let's add a few brick in here to fetch the data from the API task and store it.

Add the Run Automation Anywhere API Task brick

Click the + button just underneath body and just above @async in the Brick Actions Panel.

Search for the Run Automation Anywhere API Task brick, hover over it, then click the blue Add button.

Configure your Automation Anywhere Integration and select the job that was created via the zip file at the top of this page.

You'll need to fill in a few additional details: 

  • Choose the API task that was uploaded
  • Specify a user ID to run as
  • Toggle on Await Result
  • Provide the Input Arguments and pass the @input.selectionText as the iStrTrackingNumber property.

Your brick should look something like this:

Now we need to parse the response into something we can work with.

Add the Parse JSON brick

Just below the Automation Anywhere brick, click the + button to add one more brick to this section.

Search for the Parse JSON brick, then hover over it, and click the blue Add button.

In the Brick Configuration Panel that appears, you'll need to pass the response from the API task, which will be a string.

Set the content field to @apiTask.oStrResultJSON

This converts the string to a JSON object so we can access items in that response.

Lastly, we just need to display the data in a sidebar.

Add the Display Temporary Information brick

At the very bottom of the Brick Actions Panel, click the + button (below the @async block).

Search for the Display Temporary Information brick, hover over it, then click the blue Add button.

In the Brick Configuration Panel that appears, update the follow fields: 

  • TitleOrder Tracking
  • Refresh TriggerMod Variable/Page State Changed

You might have noticed that another brick was added and nested inside the Display Temporary Information - the Render Document brick. Click the Render Document brick and you'll view a preview of the sidebar on the far right side of the Page Editor (the Data/Preview Panel).

The Render Document brick allows you to style the sidebar and inject dynamic information in it.

Click the Example Document title in the Preview Panel, then edit the text in the Brick Configuration Panel.

Update the following fields in the middle panel that appears: 

  • Title📦 Order Tracking
  • Heading: change to H4

Here's an example of how it should look: 

Next, click the Example text element, and replace the Text field in the Brick Configuration Panel with the following: 

**Carrier**: {{ @mod.packageStatus.data.carrier | default("") }}<br>
**Tracking Number**: {{ @mod.packageStatus.data.tracking_number | default("") }}<br>
**From**: {{ @mod.packageStatus.data.address_from.city | default("") }}, {{@mod.packageStatus.data.address_from.state}}<br>
**To**: {{ @mod.packageStatus.data.address_to.city | default("") }}, {{@mod.packageStatus.data.address_from.state}}<br>

This uses Text Templating to inject variables from other bricks with hardcoded text to create a dynamic display of information.

Update the Row that holds the Text Element to be hidden if there is no data.

The Text element sits inside a column, which sits inside a row. Click the Row element, which is two steps outside of the text. You can confirm if you've selected the row, because the Brick Configuration Panel will show Current element: Row.

Set the Hidden value with: {{ true if not @mod.packageStatus.isSuccess}

This ensures you only see the order details if they are available.

Create another row to display text when information is Loading

Since we've set the content to be hidden if it's not available yet, you may want to display text while it's loading so a user can tell it's working.

To do this, click the second-outer-most three dot menu in the Preview Panel, and click Row. Click the innermost three dot menu in the newly added Row element, to add a Text element.

Click the Paragraph text in the Preview Panel and replace the Text field in the Brick Configuration Panel with: Loading...

Just like we did with the other text, we'll need to select the Row and update the Hidden field on the Row.

Paste the following in the Hidden field on the Row element that holds the loading Text: {{ true if @mod.packageStatus.isError or @mod.packageStatus.isSuccess }}

Your screen should look like this: 

Repeat the process to add an "Error" row.

If you want to display text if you have an error, repeat the same process in the previous step with two slight changes.

  • Set the Text to Error
  • Replace the Hidden value on the row to {{true if not @mod.packageStatus.isError}}

Your screen should look like this: 

Click save and you're ready to go!

Click the Save icon in the first panel, the Mod Listing Panel, and you can now close the Page Editor and try out your mod.

Select a tracking number on the page, click the emoji, and watch your sidebar appear and do its magic!

Congrats! You did it! Need any help? Join the PixieBrix Community Slack and we're happy to help troubleshoot any problems, show you how to add more features, or inspire your next build! You can also talk to an onboarding specialist!

Use this template to create a decision tree.

Step 1/7

Step 1

Activate The Template
Step 2/7

Step 2

Configure Your Template
Copy The Existing Google Sheet
Step 3/7

Step 3

Build Your Decision Tree Using Google Sheets
Step 4/7

Step 4

Once Sheet Is Filled, Return To Template And Finish Activating
*Ensure you have selected your spreadsheet from the dropdown
Step 5/7

Step 5

Your Decision Tree Is Ready, Click Ok to Begin Using
Your Decision Tree Is Ready, Click Ok to Begin Using
Step 6/7

Step 6

Click "Start Decision Tree"
Step 7/7

You're All Set!

Back
NExt Step

Done!

Now you can clone this project and reuse the form.
Clone
Oops! Something went wrong while submitting the form.

Get started in under 10 minutes

Get started with PixieBrix to immediately use our low-code web app extension builder. Explore all the possibilities so you can work better, your way.