WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Forms

How-to-documents

  • How-to Wiki
  • WaveMaker Best Practices

App solution

  • Creating a Registration Page
  • Support for Password Encryption
  • Error Handling in WaveMaker App
  • Leaving Page with Unsaved Changes
  • Micro frontend using iframes
  • Enabling PWA

UI design

  • Passing Parameters to Pages
  • Passing Parameters to Partial Page
  • Accessing Script
  • Use Static Variable to pass data between pages
  • Customise Login Page
  • Incorporating Additional Icons
  • Change Icon Color on Condition
  • Change Icon for the Global Spinner
  • Changing Default Favicon
  • Changing App Logo
  • Changing Page Title
  • Customise App Style
  • How to use Conditional Class Property
  • How to use Conditional Style Property
  • Customize an Existing Theme
  • Adjust Left Navigation Width
  • Customizing Theme
  • Enable SPA
  • Choose Widget Template and Layout
  • Widget Template and Icons
  • Custom Template for Widgets
  • Apply Custom Data Formatter

Nav & Dropdown

  • Dynamic Menu based on User Role
  • Restricting Menu Items based on the User Role
  • Localization for Dropdown Menu

Localization

  • Localization in WaveMaker Apps
  • Setting Language and Date Format
  • Localization Using Select Locale
  • Localization of Error Messages

Security

  • SAML Integration - OneLogin
  • SAML Integration - ADFS
  • OpenID Integration - Azure AD
  • Custom Security using Google OAuth Prefab
  • Multiple Security Provider Implementation
  • Customizing Post Authentication Handlers
  • Configuring Content-Security-Policy
  • Configuring MTLS

Databases

  • Queries with Dynamic Where Clause
  • Connect To Azure SQL Server
  • Recommended JDBC Driver Versions for Databases
  • How to fetch more than the default number(100) of records from database?
  • How To: One-to-Many Relationship
  • Working with Temporals
  • Connect To AWS Redshift Database
  • Connect To SAP Hana Cloud Database
  • Transactional History of Entity
  • Row-Level Security using DB Event Listeners
  • Validations using CRUD Listeners
  • Custom Logic DB Event Listeners
  • Connect to MySQL database using SSL
  • How to Switch MariaDB to MySQL Connector

Web services

  • Using App Environment Properties
  • Consuming an Existing WaveMaker API
  • Using POST method to send data to a REST API
  • Request-Response Processing for REST Services
  • How to Intercept Request and Response of all API Calls in One Place
  • WebSocket Usage - Chatroom App
  • UI for API Server-side Pagination
  • Working with API with different pagination formats

Java services

  • Sending Email using WaveMaker Connector
  • Implementing Forgot Password feature using Java Service
  • Accessing REST APIs from Java Service
  • Scheduling a Java Service
  • Integrating JUnit Tests for WaveMaker Application
  • ORM Artifacts
  • Pre-Post Processing for Database Service APIs
  • Accessing Logged-in User Details using Java Service
  • Design a workflow in Camunda BPM and integrate into a WaveMaker app
  • Integrate Azure File Storage
  • Insert Data from Excel into Database
  • Integrate Amazon S3 into WaveMaker App
  • Integrate Twilio Connector
  • Integrate OTP (One-Time Passcode) Verification with WaveMaker App

Variables

  • Using Filter Conditions on Variable
  • Using Live Variable APIs
  • Using Notification Actions
  • Using Navigation Action
  • Using Variables for Queries and Procedure
  • Using Service Variable in a Form
  • Using Filter Criteria for a Data and Live Widgets
  • Using Filter Criteria for a Database CRUD Variable

JavaScript

  • Using JavaScript in Binding
  • Using JavaScript from External URL
  • Using JavaScript to loop a command
  • Using function for evaluating conditions

Developer options

  • Synchronizing WaveMaker Apps with IDEs
  • Synchronizing Java Services Controller
  • Integrating Amazon Cognito for User Authentication
  • Integrating Sample Jasper Report in WaveMaker Application
  • How to generate PDF File using Jasper Reports
  • Upgrading an App from WaveMaker 9.x to WaveMaker 10.0
  • App Migration from WaveMaker 9x to 10x
  • Setup Fusion Reactor for Debugging Issues

Deployment

  • SSL Termination in LoadBalancer

Mobile App Solutions

  • Notify users about new update

Mobile gesture

  • Setting Swipe Gestures on a List Widget
  • Working with Pull to Refresh

Mobile widgets

  • Using Search Widget within the Navbar

Mobile UI design

  • Setting Splashscreen Images and App Icons
  • Using Cordova Plugins
  • Designing Tablet Views in Mobile Project
  • Sliding left navigation for Mobile App
  • Mobile App using Bar code
  • Custom Date Picker in Mobile

Cards

  • Capturing Card Items

DataTable

  • Customising Data Table Row Action
  • How to Configure Row Expansion in a Data Table
  • Using Widgets to represent Data Table Columns
  • View Master-Detail Data Records using Data Table
  • Add Master-Detail records using Data Table
  • Export Data from Data Table
  • Export Data from Data Table - 2
  • Setting Blob Filename
  • Dynamic Data Tables
  • Customize Dynamic Datatable
  • Data Table Column bound to Query
  • Combining Columns in Data Table
  • Custom Styling Data Table Columns & Rows
  • Formatting Data Table Columns
  • Concurrency and Record Locking in WaveMaker
  • Edit DataTable records bound to Query API

List

  • Creating an Employee List grouped by City
  • Creating an Employee List grouped by Birth Month and City
  • OnRender Event
  • Including a Data Table within a List
  • Building an Editable List
  • Building Cascading Lists
  • Accessing List Items
  • Localization of Data Table Column Headings

Forms

  • Using Live Form
  • How Tos: Form
  • Building Tabbed Live Form
  • How Tos: Live Form
  • Linking Live Form with another Widget for Input
  • Handling Related Fields in a Live Form
  • How to Get Validation Messages from a Form
  • Adding Master-Detail records in the same transaction
  • Submit Parent and Child Records in a Single Transaction
  • Submit Parent and Child Records in a Single Transaction using Form and Data Table
  • Using Cascading Select & Autocomplete for Live Form Fields
  • Using Cascading Select within Live Form
  • Using cascading Filter to populate Live Form
  • Using Wizard for Master-Detail Live Form
  • Copy to Clipboard
  • Create a form with multiple wizard steps
  • Smart Forms: Conditional Flows for form Widget

Calendar

  • How Tos: Calendar
  • Calendar Usage - Create an Event
  • Calender Usage - Google Calendar Integration

CheckboxSet

  • CheckboxSet to Filter List data

FileUpload

  • FileUpload - Basic Usage
  • File Upload Widget Operations
  • Upload File & Save in Database
  • File Upload & Blob Data
  • File Upload - Custom Directory
  • Accessing File Upload from Java Code
  • Upload Files from Live Form & Form

Radioset

  • Radioset to Filter a List

Rating

  • Building Rating Widget using Static Data
  • Building Rating Widget using Static Variable
  • Build Rating Widget using Model Variable
  • Building an Interactive Rating Widget

Select

  • Configuring Select Widget from a Static List of Values
  • Configuring Select Widget from a Static Variable
  • Configuring Select Widget from a Variable
  • Configuring Select Widget using Display and Data Fields
  • Configuring Select Widget from Database Fields
  • Configuring Cascading Select
  • Selection Widgets - Use Case

Progress Circle

  • Using Progress Circle Widget

Charts

  • Working with Charts
  • Display User Selection in another Widget
  • Handling Dynamic Data
  • Custom Data

Richtext Editor

  • Adding Custom Fonts to Richtext Editor

Live filter

  • Applying Live Filter to a Data Table or a Chart
  • Building a Multiple Selection Live Filter
  • Building a Range Live Filter

Container

  • Setting partial page content for Accordion within a List
  • Setting partial page content for Panel within a List using JavaScript
  • How Tos: Wizard
  • Dynamic Tabs and Accordions

Tree

  • Tree using Static Variable
  • Tree using Java Service
  • Tree using Dynamic Tree

Prefabs

  • Creating Partials in a Prefab
  • Create Prefab using Third Party UI Widgets
  • Create a Simple Prefab
  • Create Prefab Using D3 & NVD3 Charts
  • Create Prefab Using D3 Library DataMaps
  • Create Prefab using JQuery Plugin
  • Create Prefab using Angular Module
  • Create Prefab using Angular, React Components
  • Azure OAuth Prefab Integration

Team Poral Configure Vcs

  • Configure Azure Repos In CodeRepository
Edit

Using Live Form


The Live Form widget has built-in functionality for performing CRUD operations on the data source it is bound to. A typical Live Form set up in WaveMaker has the following steps:

  1. Set the data source that the Live Form will be working on. This takes the form of a Live Variable or a selected item from a Widget like a List or a Data Table.
  2. Select the display layout of the Live Form. You can choose from one-column, two-column or a three-column layout.
  3. Select the fields to be available for the user to interact with. All the fields from the selected data source will be presented for selection.
  4. Form actions - Cancel and Save are provided by default with every Live Form. No need to code these functionalities .

Drag and drop the Live Form widget on to the page. lf_sel

STEP 1 – SELECT DATA

There can be different scenarios to deal with when configuring your Live Form Widget with data source. Data source can be in the form of a Live variable created from a database or from an another widget, usually Data Table, on the page.

Scenario 1

You do not have any databases available in your project. In this scenario, no live variables can be created as there are no services available in your project.

  1. You will prompted to import either a database. Click the appropriate button to proceed.
  2. Once a service is available in your application, you need to drag and drop the Widget AGAIN on to your canvas to bind the widget to data source and follow the same steps as mentioned in scenario 2.

Scenario 2

There are no live variables created for any of the services in your application.

  1. Select Source: Variables is selected by default. If no widgets are placed in the current page, the widgets option will be disabled.
  2. Select CREATE NEW
  3. Select a Service: Select a service from the drop-down which lists the services available in your application.
  4. Select the operation/type of the service which would correspond to the entity in case of database service
  5. Variable Creation: Once you select the service and operation/type for the service, a default variable will be created for you – see the Variable Name field populated by default which will be holding the dataset of the service. You can change the Variable name.
  6. Select the Data Node: You are given the option of choosing either the entire dataset – when you are binding the widget to a data source or any of the fields in the dataset – from Select data node tree when binding a single widget or a List item to a field in the dataset.
  7. Data Configuration Options: You also have the option of setting the following Data Configuration options:
    • Records per request: with an option to enter the number of records to be fetched on each request. Default is 20.
    • Update Data on input change: which is checked on by default. This means that whenever there is a change in the input parameter or filter field of the variable the data will be fetched from the service. This option will have an impact on the app performance.
    • Request data on Page Load: which is checked on by default. This allows for data to be shown when the page is loaded. If this is not checked, you will not be able to view the data when the page gets loaded. Instead No Data Found message appears on the widget at run-time.

Scenario 3

If the live/service variables are already created in the project.

  1. Select Source: Select the source of data for the widget that was dragged and dropped onto the canvas. Variables or Widgets are the options provided to you for choosing the source of data.
  2. Select Use Existing. Note that you can create a new variable if you so desire.
  3. Select a Variable from the drop-down list of the variables available in the application. You can select the one needed to bind the List Widget to. You can also search for a specific variable by typing in select variable option. If you are able to find your variable in the drop-down select the same.
  4. Once you select the variables, it shows the dataset that it is bound to.
  5. As Data Configuration options are already set for this variable, you do not see those options in this scenario.

Scenario 4: Binding to widget

  1. Select Source : Select the source of data to Widget.
  2. Select a widget from the drop-down list. This will list the widgets present on this page, you cannot access the widgets from other pages.
  3. You can select data node to be the entire widget or the selecteditem node in case of another Data Table or List or Cards or result from a Live Filter
  4. As you are not using a Variable the Data Configuration options will not be available.

lf_data

Layout and Alignment Configuration

  • You can choose to have a 1-, 2- or 3-column layout.
  • You can also set the Mode as READ ONLY or EDITABLE. Read only will be used for display purposes alone, while with a Editable form, user will be allowed to enter or modify values.
  • You can set the Alignment, Position and Size of the Caption for the Form.

lf_layout

Step 3: Field Configuration

  • select the fields to be displayed on the form,
  • the display widget to represent the selected field. The widgets applicable to the field based upon the field data type, are available for selection from the drop-down box.
  • In case of a multi-column layout you can choose the fields to be displayed in the respective columns. You can use the up and down arrows to arrange the fields.

lf_field

Last updated on 11/29/2019 by Swetha Kundaram
← Localization of Data Table Column HeadingsHow Tos: Form →
  • STEP 1 – SELECT DATA
    • Scenario 1
    • Scenario 2
    • Scenario 3
    • Scenario 4: Binding to widget
  • Layout and Alignment Configuration
  • Step 3: Field Configuration
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.