WaveMaker Docs

WaveMaker Docs

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

›How-to-documents

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

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
  • Choose Widget Template and Layout
  • 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

Databases

  • Queries with Dynamic Where Clause
  • Connect To Azure SQL Server
  • Download JDBC Driver jar
  • 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

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

Java services

  • Sending Email using WaveMaker Connector
  • Implementing Forgot Password feature using Java Service
  • Accessing REST APIs from Java Service
  • Scheduling a Java Service
  • 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

Cards

  • Capturing Card Items

DataTable

  • Customising Data Table Row Action
  • 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
  • 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

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
  • Using Wizard for Cumulative Data Entry in a 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
  • Adding Parent and Child Records in a Single Transaction
  • 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
  • Using Wizard for Cumulative Data Entry in a Live Form
  • Using Wizard for Progressive Data Entry in a Live Form
  • Copy to Clipboard

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

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

Tree

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

Prefabs

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

WaveMaker Best Practices

Best Practices to follow while building apps using WaveMaker. Responsive Web Apps

WaveMaker apps can run on the mobile browsers. The browsers on these devices have limited resources to render and run JavaScript logic. Below are some hand rules for achieving design and performance. The same can be applied for any web application.

  • Ideally for good user experience you should have one task per screen/page. The application functionality should be broken into smaller tasks and design one page for each of these tasks. Page load will help:
    • managing service call
    • less code for compilation
    • back button on device for navigation
  • Page size can be optimized using the records per request property for variables rendering data on those pages.
  • Avoid complex user interface for repeatable items like list
  • Load small sized images
  • Avoid using dialog or popups. Ideally dialogs in mobile application are to be used only for notification purposes.
  • Avoid inline styles and delegating the style functionality to CSS classes

Doc Reference

App Building Essentials Page Layouts Page Layouts help you design app pages. By default there are six layouts provided, choose one as per your app needs:

  • Use Blank layout for full screen UI eg. Login screen
  • Use Layout with header & footer for pages without any links for navigation e.g. landing page of application
  • Use Layout with header, topnav & footer for pages with primary navigation links on top
  • Use Layout with header, left-panel & footer for pages with primary navigation links on left
  • Use Layout with header, topnav, left-panel & footer for pages with primary navigation links on top and contextual content /navigation on left
  • Use Layout with header, topnav, left-panel, right-panel & footer for pages with primary navigation links on top, contextual content /navigation on left and a site map or reference links on the right.

Additional Tips:

  • It is recommended to keep only one navigation panel either top or left
  • Do not include two headers or two left panels for the same page
  • Use square logo in the header for better resizing in mobile and web browsers
  • Avoid more than 7 links/actions in navigation bar

Doc Reference

  • Page Layouts

    Page Structure

Page is designed using various widgets. Proper placement of these widgets along with proper responsive behavior is of essence when building web responsive apps. For this purpose, WaveMaker offres a wide range of Container Widgets. Use them judiciously for maximum responsive benefits. Following are guidelines in using these container widgets.

  • Use Grid Layout for responsive UI. WaveMaker uses 12-column grid layout defined by bootstrap for responsive design, you can customize this layout using the Grid Layout container.
  • Use Accordion for:
    • progressive disclosure of long wizards thus reducing the number of pages,
    • when the content must fit on one screen height,
    • questionnaires where you want to be able to show answers or exit quickly.For example, checkout-type transactions.
  • Use Tabs to:
    • alternate between views within the same context
    • when users do not need to see the entire content simultaneously,Tabs have unlimited height and they can span a number of screens
  • Use Panel for an auxiliary window that contains controls and options that affect the active screen content or selection
  • Use Tiles for showing less but important information like aggregated information or call to action. Tiles are mostly used in groups and Layout Grid can be used in arranging Tiles
  • Use Container for multi-purpose, lightweight elements which can load the content from partial pages. They can be positioned absolute in the parent container and need not have any structured information.

Doc Reference

  • Container Widgets

    Version Control

Version control is the process of tracking and controlling changes to a project’s files, which includes source code, documentation, and web pages. Subversion and Git are examples of such version control systems. WaveMaker includes an integrated version control system hosted on GitLab. In this document we look into the best practices to avoid conflicts. Conflict Prevention When multiple users are working on the same project following practices can help reduce conflict situations:

  • Pull before push: Before starting always Pull from the Stash, resolve conflicts if any and then start working.
  • Frequent pushes: Keep pushing changes frequently, with proper versioning and comments for easy tracking and reverts, if needed.
  • Divide and conquer: Ideally, each developer should be working on separate pages within the app. In case of overlap, ensure that they are not working on the same widget in the shared page.
  • Database tips: When working with an external database, it is advisable to make any database design related changes at the external database and have the developers re-import the database. Though it is possible to make changes from the database designer within WaveMaker, it might lead to merge conflicts when not done properly.
  • Separation of intent: For other services, like Java, security etc., having one developer responsible for each of these services helps in avoiding conflict situations.

Doc Reference

  • VCS
Last updated on 8/30/2019 by rnaresh
← How-to WikiCreating a Registration Page →
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2021 WaveMaker, Inc. All rights reserved.