This tutorial shows how you can integrate PixieBrix and AARI to perform two types of actions:
- Create an AARI requests from any web page
- View a list of AARI requests, incl. details like status and createdOn, from any web page
The example in this tutorial involves employee onboarding, where an HR manager creates an AARI request to provision IT accounts from Jira.
Here’s a step-by-step video to accompany the written tutorial:
Getting Set Up
We use Jira’s issue tracking software for this tutorial. If you don’t have a Jira account, you can try using another web page as a starting point, as the steps to integrate PixieBrix and AARI are the same no matter what web app you’re working with.
Here’s our example Jira ticket:
Part 1: Create an AARI Request with the Quick Bar
In Part 1, we’ll learn how to extract details from a Jira ticket, and send them off to an Automation Anywhere form in just a few clicks.
Step 1. Add a Quick Bar
In the Page Editor, add a new Quick Bar item.
Configure the Quick Bar as follows:
- Name:
Provision IT Account
- Action Title:
Provision IT Account
- Icon:
Automation Anywhere
Step 2. Login to Automation Anywhere (AAI) Community Edition
Navigate to the Automation Anywhere Community edition login portal.
For me it’s https://community.cloud.automationanywhere.digital/
Login and go to the “Automation” tab
Step 3. Create an AAI Form
3.1 Create a new Form
Click Create New and select Form
Name the Form Provision IT Accounts - Initial Request
A new view opens and we’re presented with a Form.
3.2 Delete unwanted input fields
Select the right box and delete it.
3.3 Add a text box for Email Address
From the left-hand side select Text Box and drag it over the Form. Configure the Element Label to Email Address
Then, make sure to check off the Make Field Required in the Advanced Behavior section
👀 Please note the Element ID is TextBox0
We’ll to use this later!
3.4 Add a text box for Software Name
From the left-hand side select Text Box and drag it over the Form. Configure the Element Label to Software Name
Then, make sure to check off the Make Field Required in the Advanced Behavior section
đź‘€ Please note the Element ID here is TextBox1
3.4 Add a text box for Jira Ticket ID and Save
From the left-hand side, select Text Box and drag it below the one we just created
We’re going to name this text box.
Let’s write under Element Label - JIRA Ticket ID
đź‘€ Please note the Element ID here is TextBox2
Now you can save the form by clicking the save button in the top right.
Step 4. Create an AAI Process
Navigate back to the Automation tab using the left hand sidebar.
4.1 Create a new Process
Now click the Create new button and select Process
Name it Provision IT Account - Process
Click Create & edit
4.2 Configure the Process
Next select the Rocketship icon
Click Browse on the right-hand side menu and select “Provision IT Accounts” which is what we just created.
Set the Request title field to Provision Accounts
In the Data Privacy tag, we’re going to perform the following steps:
- Click the Insert a Variable (x) button
- Select
Request
from the Variable Source dropdown that appears
- Select
JIRA Ticked ID
from the Variable dropdown and click Add
The right-hand side menu should now look like this. If it does, go to the top-right menu and click Save
Additionally, if you click Run the form should appear in a new tab
Step 4. Extract from Page brick
Next, we’ll extract the JIRA issue ID from the page using the Extract from Page brick
After adding this brick, use the selector to highlight the issue ID.
When I highlight PIXI-149, I get the following selector:[role="presentation"] > li > a > span
Finally, change the property name to issueId
so you can easily reference it later.
The Page Editor should look like this
Step 5. Modal Form brick
Next add the Show a modal or sidebar form brick
Configure it like this:
- Form Title:
Provision IT Software
5.1 Add a field to capture Email Address
Then under the form settings, below the “add new field” blue button.
- Name:
email
- Label:
Email Address
- Field Description:
The user’s email address
- Input Type:
Email
- Default Value:
@input.selectionText
- Required Field:
True
- Submit Button Text:
Submit request
5.2 Add a field to capture Software name
Once again, after configuring the second field, go ahead and add a new field by using the “Add new field” blue button
- Name:
software
- Label:
Software
- Field Description:
The software to provision
- Input:
Dropdown
- Options: Add three options
Jira
Automation Anywhere
Microsoft Office
- Required Field:
True
Step 6. Create AARI Request brick
Next, we need to pass the information from the PixieBrix Form Modal to Automation Anywhere. To achieve this add the Create AARI request brick.
6.1 Add Inputs
This brick requires us to add inputs for our form fields.
To do this click the Add Item button. We’re prompted to specify an input name and string
- name:
TextBox0
- string:
@form.email
Let’s add a second input, click the blue button again
- name:
TextBox1
- string:
@form.software
Let’s add a third input, click the blue button again
- name:
TextBox2
- string:
@data.issueId
6.2 Add Service
Next, we’ll add the Control Room integration in the Service dropdown.
To make the integration available, you first need to configure it in the PixieBrix mod options.
To complete this step, refer to the documentation
6.3 Add Process ID
Finally, we’ll add the processId.
To find the processId, go to the AAI Control Room Automation tab.
Click on Provision IT Account - Process and then the Run button (top right).
A new tab opens. The processId is in the URL after processInfoId=. In this example it’s 973
🎉 Congratulations! You completed Part 1
You can now create AARI requests with the Quickbar
Part 2: View AARI Requests in the Sidebar
In Part 2, we’ll create a second mod that calls the Control Room API and displays AARI requests data in the PixieBrix Sidebar panel.
Step 1. Add a Sidebar mod
In this step we’re going to add a new mod. We’ll add a sidebar panel to track the status of our Automation Anywhere processes
- Name:
JIRA AARI Request
- Heading:
AARI Request
Step 2. Extract from Page brick
Just like we did before, we want to grab the JIRA issue ID from the page. To do that we can use the PixieBrix brick called Extract from Page.
Let’s add this brick to our mod.
Select your JIRA issue and use the selector interactive menu to highlight the top of the ticket where the ID is specified.
In my case, it’s looking like this.
First I changed the Property name to ticketId
.
Secondly, I use this selector as the Value:[role="presentation"] > li > a > span
Step 3. List AARI Requests brick
Next, add the List AARI Requests brick.
For piiTag, use the value from the previous brick @data.tickedId
For Service, use the same service that you configured earlier in this tutorial.
Step 4. Render Document brick
Next, add the Render Document brick. This brick allows us to populate the sidebar with data.
4.1 Remove unwanted elements and add a Header
In this step, we’ll remove unwanted elements from the Render Document brick, and add a Header or title to our Sidebar.
Before
After
Select the penultimate box as shown in the picture above (blue outline). Then click Remove element. This will remove the boxes we don’t need for this tutorial. Once you remove them you will have nothing left except the body box.
Next, click the three-dot menu and add a Header 1. You can call the header AARI Requests
4.2 Add a List
In this step, we’ll add and configure a List component, which allows us to organize an array of results in the sidebar.
Before
After
Go on the three dot menu again and add a List.
In a List, you can specify an Array, an Element Key and an Item Type.
Let’s set these up now!
- Array:
@transformed.list
- Element Key:
element
- Item Type:
Card
4.3 Configure the Card’s Header
In this step, we’ll configure the Card’s header with two variables, which will return the name and status of the AARI request.
Before
After
Click the inside of the element (notice the blue outline). You will see a new configuration appear in the middle of the Page Editor in the Mod Configuration Panel.
Here we want to set the heading field:
- Heading:
{{@element.title}} - {{@element.status}}
This takes the output from the previous brick and maps it to a single key called @element from which we can extract title and status, individually.
4.4 Add a “Refresh” button
In this step, we’ll add a button to refresh the content in the Sidebar.
Before
After
Click the three dot menu from the top-most container and add a button.
Next, click the blue Action button in the Preview panel. You will see a lot of options appear in the middle of your screen!
Let’s configure it like this:
- Title: Refresh
Next, click the “Select a Brick” button (below the fields).
Search and select the “reactivate all” brick. This will add the brick @pixiebrix/reactivate
as the action when you click the Refresh blue button.
4.5 Add a Button to open AARI
In this step, we’ll add a button to open the AARI
Before
After
This time we’re going to add a button inside the Card element. Select the box highlighted in blue and click the three dot menu inside it.
From the dropdown select button.
Once you’ve added a button, click it.
Once again we’re presented with the button configuration view. Change the following settings:
- Title:
Open in AARI
- Variant:
Info
Next, click the “Select a Brick” button (below the fields)
Search and select the “Open a new tab” brick. This will add the brick @pixiebrix/browser/open-tab
as the action when you click the Open in AARI blue button.
We’re presented with the button configuration view. Change the following settings:
- Url:
https://community.cloud.automationanywhere.digital/aari/#/requests/ref/{{@element.ref}}/
4.6 Add the createdOn time to each Card
In this FINAL step, we’ll add the createdOn time to each Card item to help us tell each AARI request apart.
Before
After
We’ll add a text field inside the Card element.
Select the Card item and click the three dot menu inside it. Then select Text from the dropdown.
Once you’ve added a Text element, click it.
We’re presented with the Text configuration view. Change the following settings:
- Text:
{{@element.createdOn}}