Tutorials

In this section, you'll build your first working application in softyflow, step by step.
We’ll guide you through a real-world use case: a Budget Approval Request App, where employees submit budget requests and managers validate or reject them.

Level: Beginner
Estimated time: 15–20 minutes

What You’ll Learn​

• Create your first project
• Design a user form for budget approval
• Build an approval workflow
• Store data in a collection
• Add a basic report
• Test and run your app in a few clicks

No coding required — just follow the steps and watch your application come to life.

Build Your First App​

Let’s walk through building a simple Budget Approval Request App, where employees initiate purchase requests and managers validate them based on amount thresholds.

1. Create Your First Project​

Every app starts with a project, which brings together all components: forms, workflows, collections, and reports.

1. Go to the IDE and click New Project

2. Name your project (e.g., budget-approval-demo)
3. Optionally, add a description

4. Click Create project

You’re now ready to start building inside your project.

2. Create Your First Form​

This is the form employees will use to submit budget approval requests.

Fields to Include:

Request details​

• Requestor Auto-filled with current user.

• Status Automatically updated based on approval stage. Values include:

  • Draft Waiting for department manager approval Waiting for financial director approval
  • Waiting for managing director approval Waiting for executive director approval Rejected Approved

• Department Department submitting the request.

• Request Title Short title of the purchase request.

• Expenditure Type Category or type of expenditure.

• Completion Date Expected date of purchase.

• Cost Justification Optional explanation of the need or savings related to the purchase.

Purchase Details​

Comments​

• Optional field where different actors may leave comments.

Actions​

• Save (as Draft)
• Save and Submit for Approval

1. Go to Web Interface

2. Click New Form, then name it: budget-approval-form

add details (screen )

3. Add Widgets like:
   • Input Read-only field (Requestor)
   • Input Read-only field (Status)
   • Dropdown (Department)
   • Text inputs (Title)
   • checkbox (Expenditure Type)
   • Date (Completion Date)
   • Text inputs (Budget period)
   • Text area (Cost Justification)
   • Loop (Purchase Details)
   • Buttons: Save, Submit

4. Click Save

5. Test with Preview mode

3. Build the Workflow​

Define the validation flow based on the total amount requested.

Approval Rules:

• ≤ 5,000 €:
  2 mandatory steps
  3 optional steps
• 5,001 € to 10,000 €:
  3 mandatory steps
• > 10,000 €:
  5 mandatory steps

Steps:

1. Go to Workflow, then click icon plus and click New Process
2. Name your process (e.g., Budget Approval Management)

2. Add a Start Event triggered by form submission
3. Add Manual Tasks for each approver (department manager, finance director, etc.)
4. Use Gateways to define conditional paths based on total amount
5. Add Approve / Reject actions for each task
6. Link Notifications as needed
7. End with an End Event to finalize the process

This visually models the business logic without writing code.

Once a new request is submitted, the team manager receives a notification email with a link towards to the manual task that was assigned to him/her. Once the team manager opens the manual task, he/she can then approve or reject the request by clicking on the corresponding button.

Note: to reject a request, the team manager needs to select a refusal reason.

If the request is rejected, an email is sent to the requestor notifying him/her of the rejection which terminates the process. If the demand is validated, another manual task is created and is assigned to the financial director, who then has to validate or reject the request. Once all the manual tasks have been validated, the requestor is notified of the validation of his/her request.

4. Run the Budget Approval Report Web Interface:​

Create a Report​

5. Create a Collection​

Use collections to store all budget approval requests and their details.

Steps:

1. Go to Collections, then click New Collection
2. Name it: budget-requests
3. Add fields such as:
   • Requestor
   • Department
   • Request Title
   • Completion Date
   • Total Amount
   • Status
   • Approval Trail
4. Click Save

This collection centralizes all data for reporting and workflow processing.