WaveMaker Docs

WaveMaker Docs

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

›Web services

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

WebSocket Usage - Chatroom App


Chatroom App utilizes a WebSocket service to enable chat among multiple users.

WebSocket Service Import

Step 1: WebSocket Service Import

  • Create a mobile project
  • From Web Service resource, add new web resource and select WebSocket

Test the WebSocket Service

Step 2: Test the WebSocket service

  • Provide the service URL (Use the wss:// URL, for example, here we are using wss://websocket-demos.wavemakeronline.com:443/websocket/chatroom?username=user1)
  • Enter test against Sample Request Body
  • Click Test.
  • Once the connection is established successfully with the service, the client will start receiving messages from the service and display it under the MESSAGES section.
  • Select one of the response messages by clicking on the radio button on the left. This will help the platform to generate metadata info against the service. This metadata will be helpful while binding the corresponding WebSocket Variable with widgets.

chat message

  • If the server does not respond with any message or the message you are expecting at runtime is different, you can provide the same manually in the editor under the SAMPLE RESPONSE section. Please note providing Sample Response is useful only if the target WebSocket service returns homogenous data. If the data is heterogeneous, selecting a sample response is not going to be much of a use as you will end up writing JavaScript code to deal with different data structures returned by the service.

Configure the Service and Import

Step 3: Configure the Service and Import

After successfully testing the service, click Next to configure the service with any parameters if required.

  • If the service requires query params, they will show up under the query params section. You can make the path of the URL dynamic by adding path params under the second tab.
  • Give a name to the service (in this case chatroomservice) and click Import and the service will be successfully imported into the project.

chat config

Create a WebSocket Variable

Step 4: Create a WebSocket Variable against the service

This variable is an interface between the client and the server. Follow the below steps to create the variable:

  • Open the page where you want to use the chat service

  • Create a Web Service Variable

  • Select chatroomservice (WebSocket service name entered while import) against the Service property.

  • Give the variable a name (in this case ChatroomVariable)

  • From the Variables dialog:

    • Check the properties Connect on page load and set On New Data to Add as the last record in dataSet (since we want to display the latest message at the bottom of the list)
    • Click Save & Close to save the variable.

    chat variable

Secure the App

Step 5: Secure the app

  1. We will be using a Database for login details
    • Import the Database with the login details (here we will be using the sample hrdb Employee table
  2. Enable Security and use Database as Service Provider
  3. Configure the Security as follows:

chat section

Create a DB CRUD Variable

Step 6: Create a DB CRUD Variable to get the logged-in user details.

This variable will get the logged-in employee details. Follow the below steps to create the variable:

  1. Create a Database CRUD Variable (in this case employeeDetails) for hrdb Employee entity.
    • Check the properties Request data on page load
    • From the Data tab, set empId Filter Field to loggedInUser.dataSet.id using the bind icon next to the empId

chat variable

variable data

Create a Database CRUD Variable

Step 7: Create a Database CRUD Variable to get all user details

This variable will get employee details to be displayed against the chat messages. Follow the below steps to create the variable:

  1. Create a Database CRUD Variable for hrdb Employee entity (in this case employeeData).
  • Check the properties Request data on page load
  • From the Events tab, set On Success to trigger JavaScript. Enter the following code to retrieve the picurl of the employees:
 Page.employeeDataonSuccess = function(variable, data) {
             for (var i = 0; i < data.length; i++) {
              Page.picUrls[data[i].username] = data[i].picurl;
              }
            };

wschat variable

variable event

chat variable js

Design the Chat Room

Step 8: We will design the Chat Room page

chat design

  1. We have chosen One column layout with top navbar for the Main Page
  2. Select the top navbar and set:
    • Title as Chat Room
    • Image Source as the employeeDetails.firstRecord.picurl
  3. Drag and drop a List. Use Chatroom as the Data Source.
    • Bind Name label to Chatroom -> username field
    • Bind Time label to Chatroom -> time field
  4. From the canvas
    • For the Time label Use Expression to set the time format to: toDate: 'hh:mm:ss a'
    • For the Picture widget Use Expression to set it to the appropriate picurl: picUrls[Widgets.chatmessageList.currentItem.username]
  5. Drag and drop a Grid Layout inside the Panel Footer. Set:
    • GridColumn1 width = 10
    • GridColumn2 width = 2
    • Drag and drop Textarea in GridColumn 1
    • Drag and drop a Button in Grid Column 2. Set
      • Icon Class = wi wi-paper-plane
      • on Click to chatroom.send

Variable Binding

Step 9: Variable Binding.

  1. Open Chatroom WebSocket Service Variable. From the Data tab, bind
  • username to loggedInUser.dataSet.name,
  • RequestBody the datavalue returned by textarea widget

chat data

Run the app

Step 7: Run the app

  1. Open three instances of the Chatroom app and login as three different users.
  2. When one user sends a message, the remaining users will receive the message in real-time.
  3. When remaining users send messages, the other users also receive it back in real-time.
Last updated on 8/31/2020 by Swetha Kundaram
← How to Intercept Request and Response of all API Calls in One PlaceUI for API Server-side Pagination →
  • WebSocket Service Import
  • Test the WebSocket Service
  • Configure the Service and Import
  • Create a WebSocket Variable
  • Secure the App
  • Create a DB CRUD Variable
  • Create a Database CRUD Variable
  • Design the Chat Room
  • Variable Binding
  • Run the app
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.