WaveMaker Docs

WaveMaker Docs

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

›UI design

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

How to use Conditional Style Property


The conditional style settings allow you to bind expressions to the style property. The conditional property applies to the widgets specified below, and it is similar to the Conditional Class property.

Syntax

{‘CSSpropertyName’:  ‘valueExpression’}

Example

{‘color’: ‘red’}
{‘color’: Widgets.colorPicker1.datavalue}
{‘background’: Page.Variables.MyVariable.dataSet.status === ‘pending’ ? ‘yellow’: ‘green’}
{‘color’: ‘red’, ‘font-size’: ‘30px’, ‘background’: Page.Variables.MyVariable.dataSet.status === ‘pending’? ‘blue’: ‘green’}

The property adds to the widget that has conditional class property.

  • Anchor
  • Button
  • Label
  • Icon
  • Checkbox
  • Picture
  • Container
  • Panel
  • Tile

The editable options being inline or dialog-based. Data Table provides a tabular view for database Entities or API response data.#docs

Database Enhancements Working with databases:

  • Database Import has been renamed to Connect to Database, to clearly indicate that the database schema is imported into WaveMaker applications by directly connecting to the database. #docs
  • Create Database dialog now includes option to import of a script file.
  • Database columns can be configured to be User defined, Server defined and DB defined types
    • User defined properties are passed on from the frontend layer to the backend services through API.
    • Server defined properties take the values configured by the backend service and are not passed on through API. e.g.: Auditing details for maintaining create/update time for every record.
    • DB defined properties take the default values provided during creation of DB schema
  • Introducing New identity generator - “UNIQUE ID” for string types for MS SQL Server only. An identity generator defines the value of the column in database table while inserting new records into it.

Googlemaps PrefabIntroducing new map type - Heatmap.

The Googlemaps Prefab can now be used to depict three types of maps:

  1. Markers - provide visual markets for given data set of locations across the globe
  2. Heatmap - provides a heat map based on the locations provided, usually adding a colored layer with gradient indicating intensity. e.g.: heatmap of areas with most number of restaurants or most crimes reported in the last year etc.
  3. Route - displays route between given origin and destination points, adds traffic layer and wayback points if required.

Usability Enhancements

  1. Terminology changes: Following are the changes related to widgets and property naming conventions
    • Live or Data Grid renamed to Data Table
    • LiveList widget has been renamed to List
    • Card based templates offered by the LiveList have been moved out to the new widget Cards
    • Chart widget properties have been moved to Advanced Settings
    • Tab Order, Hint, Help Text, Shortcut Key properties are moved to the Accessibility group in Properties Panel
    • Badge Type and Value properties for applicable widgets now show up in Basic Properties group
  2. Working with multiple dialogs is now made easier by providing tab based switching to different dialogs in design mode, within canvas area.
  3. DB Widgets are removed from the widgets panel from this release, they offered same functionality as Data Table or List widgets with pre-defined data-set binding to a specific Entity. These have been removed for the reasons of redundancy.

Known Issues

  1. Googlemaps Prefab: The new projects deployed to external server will need the API Key in order to use Maps. The old projects will continue to work until there are more updates from google. This is due to the policy change updates from Google regarding the Maps API from June 22. Please refer here for more information on the Google Policy change. This issue will be addressed in future releases. For now the following workaround will enable the Googlemaps:
    1. Locate and open the config.json file, you will find it at /app/prefabs/googlemaps/config.json
    2. You will find the following code: "scripts": [ "https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,visualization,drawing,geometry" ],
    3. Add key=YOUR_API_KEY& as shown below: YOUR_API_KEY is the key you obtain once you register your app at Google "scripts": [ "https://maps.googleapis.com/maps/api/js?&ampkey=YOUR_API_KEY&sensor=false&libraries=places,visualization,drawing,geometry" ],

Technology Stack for WaveMaker 8.2.3

UI Frameworks

DescriptionJS LibraryVersion
JS Bindingjquery2.2.3
jquery-ui*1.11.4
MVC Frameworkangular1.5.5
angular-ui-bootstrap1.3.2
Editorace-editor1.2.2
Stylesbootstrap3.3.6
Chartingd33.5.17
nvd31.8.3
CORS support, prefabsxdomain0.7.5
Built-in functionslodash4.12.0
Device support, gestureshammerjs2.0.8

*Optimised jQuery-UI library excluding unwanted components like accordion, datepicker, dialog, progressbar, spinner, tabs, and all jQuery-UI Effects.

Run Time Environment

DescriptionVersion
JDK7.0
Tomcat6.0

Back-end Frameworks

DescriptionJava LibraryVersion
Spring Framework4.2.o
Security frameworkSpring Security3.2.3
Java JSON utilitiesGson2.2.4
DB Persistence libraryHibernate4.3.11
Sample databaseHSQL2.3.3
JSON libraryJackson2.6.3
Logging frameworkSLF4j1.7.12
Http client libraryHttpComponentsclient-4.3.3, core-4.3.2, mime-4.2.5
REST API annotationsSwagger1.3.10
Logging frameworkLog4j1.2.17

If you already have registered for Studio 7.5.0, you can use the same credentials, else you need to register.

  1. How do I uninstall 7.5.0?
    • Uninstall option is given in the desktop installation. But be aware your projects will be deleted on uninstall of Studio 7.5.0, if you have selected the Force delete option.
  2. Why am I getting "HTTP 404 Error"?
    • Due to caching problems, some current 7.5 users might get a HTTP 404 Error. In such cases clearing the cache would work or change the url " /wavemaker/app/index.html" to " /wavemaker/studio/index.html#projects/"
  3. Where can I find the release notes?
    • WaveMaker Online release notes are same as that for Desktop version and can be found at http://www.wavemaker.com/learn/docs/Studio/release-notes/. Note: Desktop release 7.7 includes the enhancements for both 7.7.0 and 7.7.1 of WaveMaker Online release.
  4. Why are my databases from 7.5/7.6 not working in 7.7?
    • If your existing applications use database with date/time/timestamp related data fields, these applications need the database to be re-imported to avail of the new features.
  5. Why import of SQL Server/Oracle databases not working?
    • For SQL Server and Oracle database import, the respective driver jar files need to be imported to ..studioWEB-INFlib and into the project using that db.
Last updated on 1/20/2020 by Swetha Kundaram
← How to use Conditional Class PropertyCustomize an Existing Theme →
  • Syntax
  • Example
    • UI Frameworks
    • Run Time Environment
    • Back-end Frameworks
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.