Documentation
AcademyCommunitySign In
  • 👋Overview
  • 💙Platform Features
  • Getting started
    • 🚪Signing up & Logging in
      • 👤Profile Settings
    • 🎛️App Management
    • ✴️Templates to Start With
      • Basic Template (Blank app)
      • CRM Template
    • 👨‍🎓Learning Directual
      • 👨‍🏫Webinars
  • Data base
    • Data Structures
      • System Structures
    • Data Types
      • Markdown Cheat Sheet
      • Indexing Fields
      • Formatting Date/Time
    • Directual Query Language (DQL)
    • Import and Export
      • Import API
    • File Storage
      • API for File Storage
  • API and integraions
    • API-Endpoints
      • Advanced techniques for GET and POST requesting
        • Paging for GET-requests
        • Dynamic sorting for GET-requests
        • Custom filtering parameters for GET-requests
        • Advanced filtering for GET-requests
        • Formatting response for GET-request
        • Fields validation for POST-requests
        • Synchronic scenarios for POST-requests
        • Cross-Origin Resource Sharing CORS
      • API testing and debugging
      • Coding mode (raw mode) in filters
      • Swagger specification
    • Webhooks
    • Authentication API
      • Login/password
      • OpenID connect
      • Facebook oAuth
      • Google oAuth
    • Security Features
    • Other Integrations
      • OpenAI
      • Integration Hubs
        • Zapier
      • Telegram
        • Telegram: Advanced Techniques
      • Email
        • SMTP
        • Gmail
      • Twilio SMS
      • Airtable
      • Coupler.io
      • Other No-Code Tools
        • Bubble.io
          • Authorization
          • Displaying Data from Directual on Bubble
        • Adalo
        • UI bakery
        • Tilda
        • AppGyver
  • App interface
    • Web-App Builder basics
    • Web-App Settings
      • General web-app settings
      • Main menu
      • Creating a logotype
      • Web-App color scheme
      • Web-app typography
      • White Labeling
      • Web-App Icon
      • Custom Domain
      • Custom code
    • Setting Up Page Layout
      • Subpages and URL Parameters
    • Components
      • Multistep Form
      • Cards
      • Table
      • Kanban
      • Chart
      • Markdown text
      • HTML code
      • Hint
      • Link Button
      • Video
      • Form (outdated)
    • Embedding Pages
  • Scenarios
    • Understanding Directual Scenarios
      • Directual Event Model
    • Event-Based Triggers
    • Scheduled Triggers
      • Cron Format
    • Synchronous Scenarios
    • Editing Scenarios
      • System Steps
        • Start step
        • Delay step
        • Comment step
        • Catch error step
        • Link scenario step
        • Exit step
      • Action steps
        • Edit object step
        • Create object step
        • Search objects step
        • JSON step
        • Delete object step
        • Run report step
        • Generate document step
        • JS SDK step
      • Condition steps
        • Condition step
        • A/B test step
        • JS SDK condition step
      • Integration steps
        • HTTP-request step
        • Zapier step
        • Telegram step
        • API response
        • Email step
        • SQL-request step
        • Queue step
    • Using Variables
      • Global Variables
      • Context Variables (scenario parameters)
    • Testing and Debugging
    • System Scenarios
    • Advanced Scenario Settings
  • Template system
    • Templating Principles
      • Templating Techniques for Scenarios
      • Templating Techniques for Web-pages
    • Coding Mode (evaluating as a JS-expression)
    • Comparison Component
      • Regular Expressions
    • Tips for Dealing with Data
  • Telegram
    • Telegram
  • Plugins
    • 🔌Using Plugins
      • Scenario Steps Plugins
      • Web Plugins
      • User Authentication Plugins (Not Web3)
        • TMA (Telegram Mini App)
        • Google OAuth Plugin
        • Facebook OAuth Plugin
        • Open ID Auth Plugin
      • Blockchain (Web3)
        • TON (The Open Network)
        • Polygon
        • Ethereum
        • NEAR Protocol
        • NFT and Smart-Contracts
        • MetaMask Wallet
        • WalletConnect
      • WebSockets (Socket.IO)
    • 🪚Developing Plugins
      • Developing Scenario Plugins
      • Developing Web-plugins
        • Example: Using Chart.js in Directual
        • Example: Building Simple Form
        • Example: TON plugin
  • Teams
    • Teams
    • Sandbox Apps
  • JavaScript SDK
    • Directual + JavaScript SDK: The Basics
    • Internal $D Methods
    • Using Google Sheets
    • JS SDK: Examples
  • Reports
    • Reports
  • App life cycle management
    • App Versions
  • Directual 💙 React JS
    • Directual + React JS
  • Pricing and billing
    • 💳How Billing Works
    • 🎁Promo Codes
    • Pricing Plans for Apps
    • Team Pricing Plans
    • How we count requests and operations
    • On-Demand Resource Consumption
    • 🤝Affiliate Program
  • Hire a Directual expert
    • 🏆Certification
    • 🤝Matching with Experts
    • 🏦Escrow service
  • Security and stability
    • 🛡️Public Cloud
    • Platform Architecture
  • Support
    • 📬Contact Directual
  • Directual step-by-step
    • Public Development Roadmap
      • Step 0: Planning App Architecture
      • Step 1: Requesting Features
      • Step 2: Approving Features
      • Step 3. Upvoting Features
      • Step 4. Watching Features
    • Weather Forecast App
    • Web3 Marketplace on Polygon
    • Transferring NFT
Powered by GitBook
On this page
  • Component Overview
  • Component Settings Sections
  • General Form Settings
  • Fields Settings
  • Sections
  • Conditional Sections
  • Link and ArrayLink Quick Search Option
  • Hidden Fields
  • Personalization
  • Editing Existing Objects
  • Result Resubmission
  • Online Result Processing

Was this helpful?

  1. App interface
  2. Components

Form (outdated)

An interactive web form ⌨️

PreviousVideoNextEmbedding Pages

Last updated 1 year ago

Was this helpful?

This component is outdated. Use advanced instead

Component Overview

The Form component serves several purposes:

  • Collecting data

  • Interacting with the user through online .

Component Settings Sections

  • : Settings like the header, description, button text

  • : Inputs for each form field

  • : On-line submission processing.

General Form Settings

  • . Defines the fields available for writing in the form

  • Form Title

  • Form Description (you can use here)

  • Submit Button Text (Submit by default)

  • Labels or Placeholders. Switches the view of inputs: field names can be displayed above the field or as a placeholder.

  • Form max width in pixels

  • Default http-request parameters.

Fields Settings

Sections

You can display sections as visible sections or as invisible groups, which can be particularly useful for conditional sections.

Conditional Sections

If you want to check if a field is empty, enter the null value. Conversely, use isNotNull, if you want the field to have any value other than empty.

Link and ArrayLink Quick Search Option

The maximum quantity of options in the dropdown is limited to 1000.

Hidden Fields

If you marked a field as hidden (which is possible for string and link fields), their values will be obtained from the URL query parameters.

It should look like this:

yourapp.directual.app/FormPage?fieldOne=value&fieldTwo=1984

Query parameters must start with a '?' and be separated by '&'.

In the submitted object, you will receive:

fieldOne = value

fieldTwo = 1984

Personalization

You can include a hidden field for User ID, which will be filled automatically if the user is logged in.

First, you need to have a field type of link to WebUser data structure available for posting in your API-endpoint.

Find the section Personalization in the Fields settings:

The user's ID will be posted in this field automatically If the user is logged in. If the user isn't logged in, the field will remain empty.

Remember, that you can configure your API-endpoint in a way that unauthorized user will not be able to submit the form.

Editing Existing Objects

If you want to enable the option to edit existing objects in addition to creating new ones, you can turn on that option in the Fields settings section.

Don't forget to include the id field in API-endpoint, making it available both for writing and reading. Additionally, ensure all the fields you want to be fetched available for reading in API-endpoint settings. By default, the id field is included in the form, but it's hidden.

There are three ways to get theid of the object to edit:

  1. From the query parameter: @editObject=_id_ form the URL, where_id_ represents the id of the object you would like to edit.

  2. Use the user's id as the id of the object to edit. This allows you to edit the App user (WebUser) object or any other object with such an ID. This option is commonly applied for profile settings.

Result Resubmission

By default, after submitting the form, the user will see a success message and a button "Submit again". You can remove the button and disable resubmission, hide the button and redirect the user back to the form automatically after a few seconds. Also, you can edit the message (by using HTML).

Online Result Processing

  • Result: success/fail. A Boolean field. If the field is true, the Success block is displayed. If that field is false, the error block is displayed.

  • Result message title. A String field. The title of the result block.

  • Result message text. A String field (HTML usage is available here). The text of the result block.

Hint: you can build an online calculator for your app using that form with a synchronous result processing.

Each field, which is available for writing (POST-requesting) or reading (GET-requesting) in an , has a specific . You can configure the form input field and set the default value according to the field type.

The visibility of a section can depend on the user's choice of field values above (or on existing objects fields in the case of ). If you add more than one conditional, you can choose either the AND or OR operator to join your conditionals.

When the dropdown for link/arrayLInk field is ON (it is OFF by default), objects from the linked structure can be displayed as options in dropdown selects. The of the linked will be displayed, and if there is no such, name, the id field will be displayed instead.

To make this feature work, you need to create an API endpoint for it. You can also add to that endpoint, such as "objects connected with the current user."

From URL parameters (this option matches with )

Submitted object can be processed in a , and then the result is to be displayed to the user. There three fields of the object for interpreting the result of object processing:

Remember, that object is saved regardless of the result of synchronous processing. However, if the object does not meet the , it will not be saved. Validations are crucial to ensure that only data meeting specified criteria is stored.

API-endpoint
data type
different filters
subpages
synchronous scenario
validation rules
multi-step form
API-endpoint
Markdown
Editing objects
result processing
General
Fields
Result
object editing
visible name
In this example, Section 2 is visible only if the user choses value "bug" for the field {{feature_type}}