Web Interface

How to design and build interface Talk about Screens Widgets (link to widget page) Actions (link to action page ) Page security CSS and look and feel Code (link to refrences)

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.

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:

• 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.

Even though all users interact with the same interface, screens control what’s shown and editable based on context.

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 the workflow editor. 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
• Data values present in the form

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, collections, processes, or external sources.

Widget Categories​

Widgets are organized into five categories:

1. Form Components​

Used to gather user input within forms or workflows:

• Input Types: Input, Email, Text Area, Number
• Date & Time: Timer, Time, Date
• Selectors: Radio Button, Checkbox, Dropdown, Switch, Slider
• Rating & Feedback: Rate
• Advanced Input: Autocomplete, File Upload
• User Management: User Picker, Group Picker
• Actions: Button
• Content Tools: Editor, Currency

2. Basic Components​

Used for fundamental UI elements and content display:

• Layout Elements: Spacer, Divider
• Text Components: Title, Text
• Media Elements: Image, Thumbnail
• Content Display: Card, Alert
• Development Tools: Html
• Visual Elements: Icon
• Document Tools: PDF Reader

3. Layout Components​

Used for structuring and organizing content on the page:

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

4. Data Components​

Used for displaying and managing data:

• Data Display: Table
• Data Visualization: Basic Chart
• Performance Metrics: WidgetHistory

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)

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 redering.
• 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.

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

3. Actions​

Actions bring interactivity and logic to your interface. 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.

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

Collection (Data Handling)​

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

Workflow/Process​

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

API Integrations​

• invokeApi, sendEmail, nextValue
• editPDFTemplate, previewPDF

User Management​

• findUserById, findUsers
• userMetadata, getUserPendingTasks

Basic​

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

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.

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.

5. Page Settings​

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

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. 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.

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

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.

Links​

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.

UI Design​

Customize the interface using JavaScript-compatible expressions and URLs.

• 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.