Overview 

Tines exists to empower people to automate work with no coding knowledge required. The goal of this bootcamp is to introduce new users to some of the core concepts of Tines by creating a simple employee onboarding story. By the end, you should be comfortable enough to build your own story from scratch and have an understanding of how you can save time by automating your manual workflows.

Building your first story 

Today, you will be building an employee onboarding story. This story will allow you to submit a new employee and will simulate adding that employee to your HR system. You will utilize two different API endpoints and then send a welcome email to the new employee. Finally, you'll create a page so your HR team can use this automation themselves.

Lights, camera, ACTIONS! 

Actions are the foundation for your Tines stories; connecting them enables you to build nearly anything you can imagine.

Set employee 

In the action pane on the left side, click and drag an event transform action over to the storyboard.

While the action is selected, note the right pane is now the action menu. The menu contains action configuration, status, and logs.

At the top of the menu, you can change the name of the action. Name this action “Set Employee”.

In the “Payload” section, click message in the gray box. This is the key that this action will output. Highlight that key and change it to first_name.

Now highlight the value of this key, currently set to This is an automatically generated message from Tines. Replace this with an employee name of your choosing.

Your employee also has a last name, so add a second key by selecting the “+” icon on the right side of the payload builder.

This time, replace the key ?? on the left side of the : with last_name and set a last name in the value.

Click on the action and click “Run” in the context menu beneath the action.

You have your first event! With the action selected, click "Events" in the context bar to open the events panel.

Here, you can click on an event ID on the left side to inspect the output. If you have multiple events, you can click through to inspect separate events, re-emit your event to send it through the story again or delete the event to discard the selected event. Click on the event ID on the left side to inspect this one.

Click on the {...} to expand the object next to set_employee to see the key and the value that you set. This will be the key you reference later in your story.

Close the event panel for now by clicking the "X" in the top right of the panel.

Generate a new user email address 

You will use the public templates in the left sidebar for your next action.  Click "Templates".

Click in the search bar and search for “Tines Bootcamp.” Click and drag the Tines Bootcamp template onto the storyboard. You will see the action name is "Select a template". In the configuration pane on the right side, select "Generate user email".

This is a preconfigured HTTP request action. Note the settings of your HTTP request in the right pane.

There is a header named "Authorization." The value is currently set to "Bearer" and the pill set to CREDENTIAL.bootcamp_api.

Create a new credential by clicking anywhere on the storyboard to bring up the story menu on the right pane. Find the “Credentials” section.

Note that your story is alerting you that you have a missing credential. Hover over “bootcamp_api” and click the kebab menu that appears to the right.

Click “+ Create New” and in the modal that pops up, select “Text”.

Leave the name as “bootcamp_api” and for the value, type “secret_api_key”.

Next, click “Save” and click “OK” on the warning about domain-based credentials.

Hover your mouse over the “Set Employee” action and note the arrow that appears on the left side. Click and drag that arrow to the left side of your “Generate User Email” to connect them.

You will often find that Tines templates have placeholder pills. These are meant to show a user the data that an API request might need in order to return the correct results. You will typically need to update them with data from your own story.

Click on the “Generate User Email” action and view the “Payload” section. Note the two example pills in the values of first_name and last_name.

If you were to run this now, the API request would not work as expected, as these two values are not valid references to any previous actions, any Tines resources, or any Tines credentials. When clicking on one of the pills, you can confirm by viewing the “Result” preview in the bottom right of the pill editor.

That path that you’re trying to reference doesn’t exist, so the result displays “null.”

You can update these to the first and last name values from your “Set Employee” action upstream, and that data will populate here and be sent along in the HTTP request.

In the “Builder” field, under “Payload” of your new HTTP request action, click on the pill for first_name. You can access all upstream actions and their keys in this pill editor.

Highlight the current value first_name and delete it. Click or type set_employee.  Add a period . and see that you can now select the key first_name.

Save your changes by clicking anywhere outside the pill editor or by the keyboard shortcut CMD+Enter on Mac or CTRL+Enter on Windows.

Complete these same actions for the new employee's last name.

Now that you have some pills configured, you must run the story from the top action. Pill values can be considered run-time variables because their value is set when the referenced action runs.

Run it from the top and test it!

Click on “Set Employee” and click “Run” in the context menu to run the story. Notice that the event counter in the top right corner is incremented, and now there is an event in “Generate User Email.”

Click on the event counter on “Generate User Email” to go straight to the events pane for that action.

Click on the most recent event on the left side of your event pane to inspect it.

Click the {...} to expand the object for generate_user_email and see that you have multiple key/value pairs returned from your HTTP request. There is body, headers, and status. Each of these can be used as a pill for additional logic later in your story, but focus on the “body” key for now.

Your event should resemble this one here:

Add new employee to BambooHR 

After generating an email for the employee, you have all the information needed to create this employee in the company’s HR system.

This time, to create the action, you will use another built-in Tines function called ”Curl2Tines”. If you have a working cURL command, copy and paste it directly onto your storyboard, and an HTTP request action will automatically be generated. This is extremely helpful when working with tools that have cURL examples in their API documentation!

Try it with this command here:

curl -v \
-X POST \
--location \
"https://toolkit.tines.com/api/public/addUserToBambooHR" \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer <<CREDENTIAL.bootcamp_api>>' \
-d '{"first_name":"<<set_employee.first_name>>","last_name":"<<set_employee.last_name>>","email":"<<generate_user_email.body>>"}'

Copy the code here and paste it onto your storyboard.

You should now have an action called "Request to toolkit.tines.com".

Connect to the story by hovering your mouse over “Generate User Email” and dragging the arrow down into the new action.

Click on your new action and change the name to “Add User to BambooHR.”

Run the story again from the top “Set Employee” action and view the results.

Trigger on success 

A trigger action in Tines will only emit an event if the rule (or rules) is evaluated as true. Using triggers, you can create different branches in your story to handle different types of data, perform error handling, or to make other logical decisions in your story run.

In this case, you only want to send a new employee a welcome letter if the employee creation was successful in BambooHR. Use a trigger as a gatekeeper to effectively stop the story if the user creation returns an error.

In the actions on the left sidebar, click and drag a trigger action onto the storyboard. You will name this action “Successfully Added to BambooHR.”

Connect “Add User to BambooHR” to your new trigger action by dragging the arrow between the two actions.

Click on the default pill somekey.subkey.subkey.goal. Change this value to add_user_to_bamboohr.status.

Click on the drop-down menu to view the operators you can choose from, and click on “is equal to.”

The bottom box is the value that you’re comparing against. Change this to 200.

Your action should now look like this:

This trigger checks that the status field returned from your “Add User to BambooHR” action is equal to 200, which indicates a successful return. Only events that match this trigger will flow further in the story.

Email the results 

Now that you have the results, you need to send them somewhere. Tines email actions allow you to write a body in HTML while still being able to create pills for dynamic values. To save us some time, We have written an email action that you can plug right into your story. Simply copy and paste everything onto your storyboard:

{"standardLibVersion":"36","actionRuntimeVersion":"4","agents":[{"disabled":false,"name":"Send Email to Employee","description":null,"options":"{\"recipients\":[\"<<generate_user_email.body>>\"],\"subject\":\"Welcome to the Team, <<set_employee.first_name>>!\",\"body\":\"<div>\\n  Greetings, <<set_employee.first_name>>.\\n<br>\\n<br>\\n  Welcome to Tines! We are excited for you to join the team. As a reminder, your first day is <<DATE(\\\"now\\\", \\\"%d %B %Y\\\")>>. You will receive a calendar invite shortly with a Google Meet link to log on at 9 a.m. to join our onboarding meeting.\\n<br>\\n<br>\\n  We are also in the process of scheduling meetings for you to meet your colleagues, including others within the organization. We will send calendar invites to each of these meetings, along with an orientation and onboarding schedule in the next day or two. Your first day will also include a virtual team lunch, with a gift certificate for takeout arriving to your inbox shortly.\\n<br>\\n<br>\\n  In the next day or two, you will also be hearing from our IT director, who will ensure that you are set up with the necessary technology equipment before your start date.\\n<br>\\n<br>\\n  We Will be in touch again before your start date with details about your onboarding schedule.\\n<br>\\n<br>\\n  Welcome aboard! We are happy to have you on the team.\\n<br>\\n</div>\"}","position":{"x":900,"y":855},"type":"email","timeSavedUnit":"minutes","timeSavedValue":0,"monitorAllEvents":false,"monitorFailures":false,"monitorNoEventsEmitted":null,"recordType":null,"recordWriters":[],"form":null,"cardIconName":null,"createdFromTemplateGuid":null,"createdFromTemplateVersion":null,"originStoryIdentifier":"cloud:c3351784425c6520fdbce5424919e5ad:9cd11d2c7544289eba109b418ac156cc"}],"links":[],"diagramNotes":[]}

Connect your "Successfully Added to BambooHR" trigger to your new email action.

This email action has already been configured with the contents of a welcome letter. However, you will need to update a few things for testing today.

In the “Recipients” section of the send email action, replace the pill containing generate_user_email.body and type your own email.

Run from the top!

Click on the “Set Employee” action at the top of your story and click “Run” to run your story.

Check your email for your results!

Adding error handling 

Everything seems to run well so far, but what might happen if an error were to occur and your new employee is not added to BambooHR? With the story as it is now, the story run would stop at the trigger. However, you can easily update the story by sending an email to the HR team to alert them if something unexpected happens.

In the actions on the left sidebar, click and drag a “Send Email” action onto the storyboard just to the right of your “Send Email to Employee” action.

Position your cursor at the bottom of your trigger action, just to the right of the connector line. When you do this, you will see a second connector type appear: “No match.”

Connect this “No match” to the “Send Email” action that was just added to the storyboard.

Next, in the action configuration on the right sidebar, rename this action to “Send Failure Email to HR.”

In the “Recipients” list, again, enter your own email address here for testing purposes.

Come up with your own subject and body for your email.

Turning to a new page 

Tines has a built-in feature called pages. Pages allow you to expose simple, beautiful web pages connected to your stories. Through these web pages, your end users can provide input to – and view output from – your Tines-powered workflows.

Creating the page 

In the left sidebar, hover over "Tools". Click and drag a page onto the storyboard at the top of your story and connect it to your “Set Employee” action.

Note the configuration menu on the right panel; change the name of this page to “New Employee Submission.”

In the same right panel, note the "Public" field below. This is how you control access to the page. You can either leave it default, which would only allow users with an account in your Tines tenant to access the page, or you can click the slider to allow public access to the page. If you have SSO enabled, you can also set it only to allow users authenticated to your SSO to access the page.

For now, leave this setting as the default.

Now, click the "Edit" button in the context menu below the page.

First, take a look at the options on the left pane. Note that there are two tabs, “Elements” and “Style.” On the “Elements” tab, you can choose from several display elements and input fields to make your page fit your needs. As you add your elements, you can configure them by simply clicking on them in the page preview in the center of the screen.

To learn more about all the element types, check our documentation here.

On the “Style” tab, you can design the look of your page. You can add your own logo, fully customize the color palette, and set up themes that you can reuse on other pages in Tines.

Configuring your page 

The first thing to do is change the heading. Hover your mouse over the words “My New Page.” and click on it. Now, you can configure this element. Type in “Onboard New Employee” and see that it automatically updates on your page preview.

Now, hover your mouse over the paragraph of text and click on it. You’ll see a trash icon in the top right of the pop-out. Click on that to remove that element from your page.

It’s time to add some input elements to the page. Since this is an onboarding story, the required inputs will be your new employee’s first name and last name and a list of tools they need access to.

Click and drag a “Short text” element over to the page. When dragging, you can drop an element wherever you want it on the page. Place it above the “Submit” button as shown below.

Change the name of this element from “Short text” to “First Name” by clicking on it and configuring the “Name” field. You will also see a list of options for the element. Check the “Required” box to make this a mandatory input.

Repeat those steps to create a second input field for the last name. Click and drag another “Short text” in the left pane and position it before the “First Name” element. Let’s name this “Last Name” and make it required as well. Your page should now resemble the following:

Click the arrow at the top left of the screen to exit the page editor and go back to the story view.

Test the page 

On the storyboard, click the page action and select the “Visit page” button.

Fill in the page with any first and last name and click “Submit.”

Now close this tab to return to your storyboard.

Update actions 

Things should have failed on your last test. Why? You originally hardcoded the first and last of the employees.

Now that you have a page, you will need to update that action with a pill. This will reference the inputs from the page submission and dynamically set the employee's first and last name.

To do that, you can use another cool Tines feature, “Copy path to clipboard.”

Click the "1" on the top right of the Page to get into the events and select the most recent event to view the data that you submitted.

Click {...} to expand the event and click {...} next to the “body” key to expand the object.

Double-click on “first_name” to copy the path to your clipboard. You should see this popup at the bottom of your storyboard:

Exit the event panel and click on the “Set Employee” action.

Click on the pill you previously configured as the value for first_name and press CMD+V or CTRL+V to paste your path to the data on the page.

Update the pill for last_name as well. You can just click the pill and update that to new_employee_submission.body.last_name.

Your “Set Employee” action should now be configured with its payload as such:

Now, since your downstream actions are all referencing the values in the “Set Employee” action, they will use data submitted on the page dynamically.

From the top 

Select the "New Employee Submission” page at the top of your story and click on "Visit page" in the context menu that appears, as you did previously. Fill out your page, click “Submit,” and then check your email for results.

Wrap up 

Congratulations! You've just built your first Tines story! You went through setting up credentials, using event transform actions, using HTTP requests for multiple API calls, using a trigger action to control the flow of events, consolidating and sending data via email, as well as then creating a page so that our users can have a self-service portal for adding new employees.

More importantly, you have seen how easy it can be to automate. You have only scratched the surface of Tines today, as there is so much more that can be done. Take the next step with our advanced bootcamp to dig even deeper!

More resources 

Discover more use cases and prebuilt stories in our Library..

Collaborate with us and other users on our Community Slack by signing up here.

Check out more of our learning content in the Tines University.

Take the next step and get certified for no cost here.

Want to talk more? You can book a demo with our team on our Pricing Page.