Overview 

Tines exists to empower people to automate work, with no coding knowledge required. In this bootcamp, you will learn how to build an application in Tines using pages. It is recommended but not required that you complete the basic and advanced sessions before this bootcamp.

The goal of this training is to introduce you to more concepts of Tines pages. You will learn how pages can be used as inputs to your Tines stories, how you can surface information from your Tines stories, and ultimately how to create your own apps without writing any code.

Set up your a credential 

If you have already configured a bootcamp_api credential, you can skip to the “First Page” section, otherwise follow these steps to build your credential.

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 will alert you of 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.

First page 

On the left panel, hover over the “Tools” button, click and drag a page over to your storyboard above the action titled “Employee”. Hover over the bottom left side of your new page and drag the arrow down to the “Employee” action to connect this page to your story.

Now click on your new page and click “Edit” to configure it.

Elements and style 

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 in other pages in Tines.

Configuring page elements 

The first thing to do is change the heading. Hover your mouse over the words “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 “First Name” and “Last Name” of our new employee 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. Drag a “Short text” element over below the first one, change the name, and mark it as required.

Finally, add an “Option” element to create a checkbox list of tools for the new user. Click and drag the element over to the page below the “Last Name” field and above the “Submit” button.

Rename this element to “Tools”, and then under the list, you will want to input three tools to match the picture below. Use the three tools shown in the screenshot below, which are Github, Salesforce, and Crowdstrike. Set this as required and select the box for “Multi select” to allow the user to pick several options on your list.

Click on the name of your story in the top left of your window to get back to the main story board.

Configuring the page 

From the story board, click on your page to open the configuration menu. Note the toolbar under the page, and also note the “Build | Status | Logs” in the right pane.

Rename the page from “New Page” to “Start”. This gives us an indication where the app will start in our story.

Next, select the dropdown below “Page behavior”. By default, a page will show a custom success message, whereas the option “Move to next page” creates a dynamic app. Your page configuration should look like the image below:

You can also configure a loading message to present to your end users while the story executes, as well as the ability to customize your page URL path. For example, your address could be https://<<your_tines_tenant>>.com/pages/onboarding. For now, leave that field with the generated ID.

Test your page 

When the page is selected, click the arrow pointing to the top right on the toolbar below the page. This should allow you to open up the page for viewing and interacting as an end user.

Now, type in a first name and last name, select any of the tools from the list, and then click “Submit.” You will see a success message because there are no additional pages downstream to load.

Close this tab to return to your story and keep building.

There is now a number icon to the top right of the page. An event was emitted because you submitted the page!

You can click this number to open the event pane at the bottom of the window or you click on the “Events” tab below the page.

Click on the {...} next to “start”: in order to expand the event. Expand the {...} next to “body”: to see the information that you submitted.

Please refer to this gif below:

Using page data in the story 

Surprise! You can refer to data from pages the same way you refer to any actions in Tines. The next few steps will walk you through configuring your actions to make use of the page you created.

Click on the “Employee” action and view the “Builder” tab in the right pane. This is an event transform action where the data is statically defined, as seen here:

Highlight the text Trey and then click the + icon that you see below it.

Once you click the + icon, click “Value”. This will open the pill builder, where you can reference the data from the page you created above.

For this pill, type: start.body.

Note that Tines automatically populates data from upstream events.

Select first_name from the options. You can view the name that you submitted in the bottom right pill builder after Result:. Now click out of the pill builder and the data will automatically save.

Repeat the process for the last_name field.

The last key to change is tools. Select the text that says Github, and create a pill like you did with first name and last name. You will use Tines’s JOIN function to change the list received from the page to a text field.

Copy in the following into the pill that you entered for Github:

JOIN(start.body.tools, ", ")

The end result should look like the below, with all of the static text of the employee action replaced by three pills, and the third pill using a JOIN() function to add a comma and space between multiple tool selections.

Build an “End” page 

Now you will create a page to surface information from your story. Drag a new page onto the story board, and connect it below the “Send Email to Employee" action.

Change the name of the page to “End”, and then change the page behavior to “Redirect to URL”.

Under the URL field in the bottom of the build tab, delete http://example.com, and click the + icon to create a pill, which will be set to PAGE.start. The PAGE object is a special value in Tines which allows you to easily reference the link to a page in your story.

Setting this as the redirect URL means your app can quickly go back to the beginning of the story to onboard multiple employees in a row.

The end result should look like the below, with an “End” page, the page behavior changed, and the URL at the bottom replaced with a pill that references the first start page.

Now, click “Edit” or double click the new page to get to configure it.

Change the “New Page” heading to “Employee Created.” Then, change the rich text element to present information that would be valuable to your end user so they have context on what happened within the story.

Copy the below code block, and paste it into the contents of the “Rich text” element, replacing the auto-generated text. The pills will be automatically created from the below code block.

Awesome! The new employee <<employee.first_name>> <<employee.last_name>> has been added to BambooHR.  

Other tools selected were <<employee.tools>> and those may require approval.

Finally, change the text of the button label to “Add another employee?”. This indicates that once the button is clicked, the user will be taken back to the start of the app flow. Your page preview should now look like this:

Test it out 

Now that your start and end pages are configured and set up, go back to the URL of your “Start” page, and give it a try!

You should see the end page, with a result that looks similar to the below:

After you navigate back to the story, you can check everything worked correctly by following the path of the events as they ran down the story. Each of the tools that you checked should have an event emitted with the trigger of the same name. Below the trigger, there is also an event for each of the HTTP requests, where the user is either added to Github, Salesforce, or Crowdstrike.

Adding an approval workflow 

You could stop here as you essentially have a complete story already, but in the interest of adding something useful in the real world and showing off a few more interesting techniques with pages, you can add in an approval flow workflow for sensitive tools before access is granted to them.

Email the approver 

First, disconnect the “Add User to Github” action from the “Github” trigger and move it down the story board. Then drag an event transform action over from the left-hand side onto the story board. Connect the new action below the “Github” trigger.

Change the name of the action to be “Delay”, and then change the mode from “message_only” to “delay”.

You will be sending an email (to yourself) that contains a link to a new approval page. You can copy and paste the below code into your story board which will create a new email action for you.

{"standardLibVersion":"35","actionRuntimeVersion":"4","agents":[{"disabled":false,"name":"Send Email for Approval","description":null,"options":"{\"recipients\":[\"nobody@tines.com\"],\"reply_to\":\"nobody@tines.com\",\"sender_name\":\"Tines\",\"subject\":\"Approval for <<generate_user_email.body>>\",\"body\":\"Please go to the following link to approve access to Github for <<employee.first_name>> <<employee.last_name>>:\\n\\n<<PAGE.approval>>\"}","position":{"x":4230,"y":735},"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:eaabf08703da13faa9bf843a17bb0610"}],"links":[],"diagramNotes":[]}

After the action is copied, you will need to change the email under recipients from nobody@tines.com to your own email. This is important so that you receive the approval page later on.

Connect the “Send Email for Approval” action below the “Delay” action. Your story should now look like below.

Create a new approval page 

Now drag a new page onto your story board below the “Send Email for Approval” action. Connect that page to the “Send Email for Approval” action, and rename the page to “Approval”. After renaming, double click on the page to edit it.

For the heading, change the contents to “Approval workflow”.

For the rich text field, delete the example text and replace it with the following:

Approve Access to Github for <<employee.first_name>> <<employee.last_name>>

Finally, you are going to add a second button, so the approver can deny the change if they need to.

Drag a button element from the left pane and place it below the main button, and then change the buttons to read as “Approve” and “Deny”.

Change the style on the “Deny” button to “secondary”.

When you are done, your page preview will resemble the following:

Create a new “Approved” trigger 

You now need a trigger that will look for when the approve button is pressed. Click the back arrow to the main story board, then with the help of some cooking show magic, I have already created this trigger for you. Just copy paste the below code block into your Tines story, and then connect the page to the trigger. Also connect the “Add User to Github” action to below your “Approved” trigger.

{"standardLibVersion":"35","actionRuntimeVersion":"4","agents":[{"disabled":false,"name":"Approved","description":null,"options":"{\"rules\":[{\"type\":\"regex\",\"value\":\"Approve\",\"path\":\"<<approval.body.button>>\"}]}","position":{"x":4125,"y":1365},"type":"trigger","timeSavedUnit":"minutes","timeSavedValue":0,"monitorAllEvents":false,"monitorFailures":false,"monitorNoEventsEmitted":null,"recordType":null,"recordWriters":[],"form":null,"cardIconName":null,"createdFromTemplateGuid":null,"createdFromTemplateVersion":null,"originStoryIdentifier":"cloud:c3351784425c6520fdbce5424919e5ad:eaabf08703da13faa9bf843a17bb0610"}],"links":[],"diagramNotes":[]}

After connecting the trigger, you can finally connect the “Add User to Github” action below the “Approved” trigger.

Now, your Github branch should look like this:

Run it from the top 

Now, open your “Start” page, input your desired information, and the story should route you through the process successfully.

You should notice an email about 10 seconds later if you selected Github as a tool.

Click on the link in the email to complete the approval process for Github and note that the approval trigger emits an event and then calls out to Github to provision access.

Wrap up 

Congratulations, you’ve built an onboarding application in Tines!

Along the way you learned how to design and customize pages to build a user interface for a Tines story to create a self-service application to onboard employees and automatically provision access to tools in your environment. You also learned how to change the mechanics of a page to operate differently according to a specific use case, and added an approval flow that can make your application even more dynamic.

More resources 

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

Come talk to us 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.