Over the past few months, we’ve been working on an exciting new feature—the Workflows tab!
Though website workflows can get technical quite quickly, they should also be easy to build… if the front-end is designed well. This is exactly what we set out to do at Ycode!
In our improved, intuitive workflow environment, you can build easy (or advanced) workflows using logical steps.
We’ll walk you through how to build workflows in Ycode and show examples of different actions that you can use for your web projects.
Every workflow is triggered by a certain event and once it’s “on”, each step thereafter happens automatically in the application’s back-end. Kind of like a domino effect, except that you decide on the time that each domino falls.
Before you start building your own workflow, let us take you through the process of building workflows in Ycode.
Note that all workflow events will happen in the exact order you add them, so it’s good to map out beforehand what you want to have happen.
For our example, we want to show people a success "Thank you" message after they sign up and click on the submit button.
You can clone the project we'll use for the example steps, you can see exactly how it's built as you read along.
This step is optional. There are two ways to go about creating workflows.
Right-click on an element in your canvas and select Create workflow—Ycode will automatically create a unique ID name.
Set your own ID name and then start building your workflow in the Workflows tab.
In your Ycode canvas, select the element that you want to create the workflow for. We’ll select the submit button in the contact form. Navigate to the Settings tab and add an ID name so you can identify the element when creating the workflow.
If you used the first method in the previous step, you’re already in the Workflows tab. You can continue to step 4.
If you set your own ID name, first navigate to the Workflows tab in the Ycode editor (on your left-hand side). Then click on + Create workflow and add a workflow name. Finally, click on the blue Create workflow button (video below).
Note: Skip this step if you right-clicked to create the workflow in step 1.
To start a new workflow, we need to add the first event. Press Click here to add an event.
You’ll see different categories like General and Elements, and if you hover over them you’ll see the events for each category.
As the first event, we’ll open the Element category and select Clicked. In the dropdown menu, you can then select the ID name you set in the first step.
As a next event, we’ll need the action that submits a form. Add a new event and click on Data and then Submit form.
With the first step completed, we can add the additional actions that make the success message appear.
Add a new event and select Other and then Show element. Then select the Element ID from the dropdown menu.
Don't forget to hide the message by default, that can be done in your canvas. Open the Design tab, then Layout, and select the Hidden icon on the far right.
Before you exit the Workflows tab, you first need to select the blue Save changes button on the upper-right.
Now we need to create a new workflow that closes (or hides) the pop-up after a visitor clicks on the close button. In your canvas, select the element that's the close button. Then right-click and select Create workflow.
This event will hide the success message pop-up when the website visitor clicks on the close button.
By using the shortcut "right-click to create workflow" in the first step, the event for the button click will be automatically created in your new workflow.
For the second event, select Other and then Hide element. Then select the Element ID from the dropdown menu (same ID name as in step 5).
Back in your canvas, select the main layer that contains all elements that belong to your success message.
Then in the Design tab on the right, open Layout and select the Hidden icon on the far right.
Now Save and Preview your project. Perform the actions and you'll see that your workflow does exactly what you set it to do.
You can always go back and add more events. For example, you might also want to send people a confirmation email. The number of events in one workflow is infinite, but you’ll often find that keeping things simple is the way to go.
Now let’s look at different types of workflows that you can build in Ycode.
This workflow is perfect for projects that include any type of dynamic content list. With the steps below, you can build a system where visitors can delete items from a list.
In your canvas, add a Delete button to a list with dynamic elements
Right-click element and select Create workflow
Add event: Data → Delete database record
This workflow is great when you want to receive an automated email notification every time someone creates an account on your website or web app.
Select the element in the canvas and add ID name in the Settings tab (this could be a signup form completion button)
Right-click element and select Create workflow
Add event: Other → Send email → Fill in email form fields. Example:
To email: Your email address
Subject: You’ve got a new website signup!
Body: Yay! Someone signed up on your website. Log in to Ycode and check the user list in your database to see more details about this signup.
This workflow makes elements appear or disappear when an action is taken on the page.
Show and hide a pop-up
Show and hide an information card when a button or icon is clicked
For this example, we’ll create a workflow for a pop-up. As preparation, you’ll first need to build a pop-up in Ycode. You can clone this project to see how to build a pop-up.
Navigate to the Workflows tab and select Create new workflow
General → Page is loaded
Other → Wait seconds → Add total seconds
Element → Show → Select element ID in dropdown
Navigate to the canvas
Right-click X (closing element) in the pop-up and select Create workflow
Add event → Element → Hide → Select element ID in dropdown
Go back to the canvas and hide the pop-up by default. In the Design tab on the right, open Layout and then select the Hidden icon on the far right.
This workflow logs out users from their profiles when you have user authentication enabled.
For this workflow, user authentication needs to be enabled. Read how to set this up here. Then, users need to be present in your database (here’s how to add data). Thirdly, you will need to create a user profile page that contains a logout button.
Select the element in the canvas and add ID name in the Settings tab
Right-click and select Create workflow
Other → Logout
Other → Redirect → Select homepage from the dropdown
We love to see real examples of Ycode builders. Add your project link in the comments or in the Ycode community and let us know which workflow you’ve used!