Skip to main content

Web Interface

A Web Interface is the visual layer of your application — the environment in which users interact with your forms, dashboards, and manual task screens. Designed with responsive behavior in mind, the interface automatically adapts to desktop, tablet, or mobile devices.

In Softyflow, every interface is built around screens, which are essentially application pages. These screens are composed of widgets — modular design elements such as tables, forms, charts, or buttons that define what the user sees and how they interact with your app.

To get started, make sure you've completed your project setup and understand the core concepts behind Softyflow interfaces.

web interface

1. Screens​

A screen is like a mask applied to your web interface. It defines what each user sees, when they see it, and how they interact with it throughout the workflow. Instead of duplicating pages or forms, screens allow you to personalize visibility and behavior for different roles or process steps — all within the same interface structure.

Why Use Screens?​

For example, in a leave request application built with our process design tools:

  • Launch Screen: The employee fills out the form.
  • HR Manager Screen: The HR team validates the request.
  • Approve Screen: A final reviewer confirms or rejects it.
exmple use screens

Even though all users interact with the same interface, screens control what's shown and editable based on context. This is especially powerful when combined with role-based access control.

How Screens Work​

When you add a new screen:

  • It inherits all widgets and layout from the original screen.
  • You don't need to duplicate or rebuild content.
  • Each widget can be configured with rules:
    • Available: Is the widget present in the interface?
    • Visible: Is it shown to the user?
    • Required: Must it be filled?
    • Disabled: Is it read-only?

These toggles are screen-specific and define how widgets behave across process steps.

Connecting Screens to Process Steps​

Each screen can be assigned directly to a process step in our process modeler. This linkage ensures the interface automatically adapts when a user reaches a specific step.

This allows behavior to shift depending on:

  • The current step in the process
  • The user's role (configured through user management)
  • Data values present in the form
screens to process

2. Widgets​

Widgets are the building blocks of your screen. You can drag and drop them into your canvas to create interactive and data-driven user interfaces. Each widget can be configured individually and linked to variables, MongoDB collections, processes, or external sources through our integration features.

Widget Categories​

Widgets are organized into five categories:

1. Form Components​

Used to gather user input within forms or workflows:

widget

2. Basic Components​

Used for fundamental UI elements and content display:

widget

3. Layout Components​

Used for structuring and organizing content on the page:

  • Grid Systems: Grid, Section
  • Container Elements: Collapse, Popup, Drawer
  • Navigation Layout: Tabs
widget

4. Data Components​

Used for displaying and managing data from database sources and reporting:

widget

5. Advanced Components​

Support extended process control and interactivity:

  • Process Flow: Steps (multi-step workflows), Drive Picker (cloud file selection)
  • Security: Captcha (bot protection), Signature (digital signatures)
  • Integration: QR Code (quick scanning functionality)
widget

Widgets are designed via drag-and-drop inside the web modeler and are aligned using the grid layout system for a responsive structure.

Widget Configuration​

Each widget comes with configuration options that let you adapt its behavior per screen and context:

  • Name: Name you give to your components. In some cases: PopUp, Divider or Input it will be shown in rendering.
  • Variable / Model: A distinctive name that holds or represents the component's data model.
  • ID: A unique identifier you assign to the component to distinguish it within the interface or logic.
  • Default Value: The initial value assigned to the component. It can be a static value or dynamically bound to a variable.
  • Visibility Rules: Define whether a widget is visible or hidden based on role, screen, or form data.
  • Editability: Specifies whether the component is editable or read-only.
  • Requirement: Marks the component as required, based on defined conditions.
  • Binding: Links the content of the component to variables, data collections, or API responses from our integration system.

You can define different rules per screen, ensuring one widget behaves differently across steps without duplicating it.

widget

3. Actions​

Actions bring interactivity and logic to your interface using our comprehensive actions system. They define what happens when users perform events — like clicking a button or submitting a form.

Creating a New Action​

Follow these steps to create a new action from the interface:

  1. Click on any widget.
  2. Click Create On Click Action.
  3. Add your desired Actions.
  4. Click Save to store the actions on the interface.
widget

An action is a predefined triggerable behavior that can be linked to widgets, variables, or logic conditions. Common uses include:

  • Calling APIs (e.g., fetch or post data)
  • Starting workflows or processes
  • Updating variables or models
  • Toggling widget visibility
  • Running custom functions or scripts
  • Displaying alerts, confirmations, or messages

Example Use Cases​

  • A button that submits a form and sends data to a collection.
  • A screen that, on load, fetches filtered reports from an API.
  • A toggle that reveals another field and sets a variable.

Available Actions​

Actions are organized by category. Here's an overview:

DOM (Interface/UI Manipulation)​

  • show, hide, toggleVisibilty
  • setRequired, setDisable, disableForm
  • refreshWidget, fillForm, clearForm
  • confirm, pushToArray, alertMessage
  • validateForm, validateHistoryComment
  • setModel, setVariable
actions

Collection (Data Handling)​

Manage data in MongoDB collections and external databases:

  • addToCollection, addManyToCollection, updateCollection
  • getCollection, AggregateCollection
  • getDocument, deleteDocument
  • insertTable (EDS), updateTables (EDS)
  • findOne (EDS), findMany (EDS), countTables (EDS)
  • insertMany (EDS), delete (EDS), exectuteStatement (EDS)
actions_collection

Workflow/Process​

Integrate with process design and monitoring:

  • startProcess,OpenNextTask, update, save
  • openInstance, redirect, execute
actions_process

API Integrations​

Connect with external services through our integration system:

  • invokeApi, sendEmail, nextValue
  • editPDFTemplate, previewPDF
widget

User Management​

Integrate with user management and authentication:

  • findUserById, findUsers
  • userMetadata, getUserPendingTasks
actions_user

Basic​

  • if, if(deprecated)
  • repeat (loop), loopArray
widget

4. CSS and Styling​

Styling controls how your app looks and feels — both at the widget level and across the full page layout. SoftyFlow gives you several layers of styling capabilities to keep your interface consistent, responsive, and easy to customize.

widget

Each widget includes a Style panel where you can:

  • Set placeholder text
  • Control width (e.g. 100%, auto)
  • Assign a custom class (e.g. input-demo)

This allows you to manage spacing, visibility, and alignment directly inside the web modeler — no code required.

widget

5. Page Settings​

The Page Settings panel defines the identity and display behavior of your interface page. It governs metadata, layout preferences, user visibility based on role management, and navigation.

exmple use screens

General Information​

  • Name: The title of the page shown in menus and headers.
  • Dynamic Name: Optional. Use variables (e.g., ${request_number}) to dynamically adjust the page title depending on user or form data.
  • Favicon URL: A URL to a custom favicon displayed in the browser tab.
  • User: Controls who can access the page based on our user management system. By default, access is set to Everybody.
  • Show in HP: Toggle whether this page appears in the application's home interface (homepage).
    • Thumbnail URL: Sets a preview image for the page in the homepage or project gallery.
    • Workspace: Optional. Use it to logically group pages in multi-app environments.
exmple use screens

Configuration​

  • Title: Align the page title to the Left, Right, or Top.
  • Label Width: Define the width (in pixels) of form labels for consistent layout (e.g., 100).
  • Show Nav: Toggle whether the navigation panel is displayed.
  • Hide Title / Hide Header: Show or hide the page title and global header.
  • Size: Define the visual density of your form:
    • mini: Compact layout
    • small: Standard layout
    • medium: Spacious layout
exmple use screens

These settings help tailor the presentation and accessibility of your page to specific needs — whether you're building for all users or specific roles, internal back-office or public-facing apps.

You can add external CDN links to load JavaScript or CSS libraries into your application.

  • Paste the CDN URL in the input field.
  • Select the type: JS (JavaScript) or CSS.
  • Use Add link to include multiple CDN resources.
  • Click the red minus (–) button to remove a link.

📘 Common use cases include loading libraries like Bootstrap, jQuery, Font Awesome, etc.

exmple use screens

UI Design​

Customize the interface using JavaScript-compatible expressions and URLs compatible with our SDK.

ui_design

  • CSS URL
    A custom URL for loading a CSS file that styles the UI.

  • Logo URL
    A direct URL to the logo image displayed in the application interface.

Next Steps​

Now that you understand web interface design, continue building your application:

For hands-on experience, try our step-by-step tutorials or watch our web modeler video tutorials.

For advanced customization, explore our Web Modeler SDK and learn about the complete widget library.