❗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:
.png)
OPTIONAL: Keep reading to learn how to build this mod from scratch with PixieBrix.
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.
.png)
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.
.png)
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:
Since we started the Title with an emoji, when we select text on a page, the emoji will appear.
.png)
Now any bricks added in this pipeline will be executed when this emoji is clicked.
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.
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:
Your brick should look something like this:
.png)
Now we need to parse the response into something we can work with.
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
.png)
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.
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:
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.
Update the following fields in the middle panel that appears:
Here's an example of how it should look:
.png)
**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.
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.
.png)
Set the Hidden value with: {{ true if not @mod.packageStatus.isSuccess}
This ensures you only see the order details if they are available.
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.
.png)
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:
.png)
If you want to display text if you have an error, repeat the same process in the previous step with two slight changes.
Your screen should look like this:
.png)
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.
.png)
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!
