WaveMaker Docs

WaveMaker Docs

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

›Prefabs

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

Create Prefab Using D3 & NVD3 Charts


D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction. The chart widgets which are offered by WaveMaker are based out of NVD3 charts, which are re-usable charts for D3 charts. and as such implementing any of the NVD3 & D3 charts becomes easy. Here we will see two simple examples - line chart (D3) and line plus bar chart (NVD3).

Implementing D3 Charts

We will see the implementation of a simple d3 line chart using the following example.

note

This implementation is for D3 version: 3.5.17 charts.

  1. Click on Create from the Prefab tab of the Project Dashboard

  2. Enter a name and description for the Prefab

  3. SAVE the project setting without making any changes

  4. Open the SCRIPT tab of the Main page

    • Add a variable var data = [];
    • Add the following code to the propertyChangeHandler function. This code is taking the input data in the form of an object and generating the values to be represented on the sale- and year- attributes for the chart. The input object, according to the below code snippet, is expected to have at least two fields named budget and year. We are using this since in implementation we will show binding the chart to Department database.
    function propertyChangeHandler(key, newVal, oldVal) {
        switch (key) {
        case "dataset":
            //                    debugger;
            var year = 2000;
            _.each(newVal.data, function (obj) {
                data.push({
                    "sale": obj.budget / 10000,
                    "year": year
                });
    
                year += 1;
            });
            renderChart();
            break;
        case "prop2":
            // do something with newVal for property 'prop2'
            break;
        }
    }
    /* register the property change handler */
    Prefab.onPropertyChange = propertyChangeHandler;
    
    • Enter the following code (you can copy and paste the same). This code is to set up the visual rendering of D3 chart.
    function renderChart() {
        var vis = d3.select("#visualisation"),
                WIDTH = 1000,
                HEIGHT = 1000,
                MARGINS = {
                    top: 20,
                    right: 20,
                    bottom: 20,
                    left: 50
                },
                xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2000, 2004]),
                yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, 350]),
                xAxis = d3.svg.axis()
                .scale(xScale),
                yAxis = d3.svg.axis()
            vis.append("svg:g")
                .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                .call(xAxis);
                    yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");
            vis.append("svg:g")
                .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                .call(yAxis);
            var lineGen = d3.svg.line()
                .x(function(d) {
                    return xScale(d.year);
                })
                .y(function(d) {
                    return yScale(d.sale);
                });
            vis.append('svg:path')
                .attr('d', lineGen(data))
                .attr('stroke', 'green')
                .attr('stroke-width', 2)
                .attr('fill', 'none');
    
    • Invoke the above function when Prefab loads:
    Prefab.onReady = function() {
        renderChart();
    }
    

  5. In the MARKUP tab add the following code within the wm-content tag:

     <svg id="visualisation" width="100%" height="500"></svg>
    
  6. Import Resource, to import the d3-min js file (download and extract the file) into the Resource folder of your Prefab.

  1. From Project Configurations, choose Config Prefab under Settings:

    • From Resources, add the js files

note

You can expose many properties and set the values as static or dynamic to be bound. For details of the properties that can be exposed refer to the D3 website.

  • Add Property - dataset with attributes Widget set to text, Type set to object (type it, if not selectable) and Bindable set to in-bound

  1. You can set the display icon and mention the group for Prefab from the Packaging tab
  2. You can publish the Prefab to a project for testing or publish it to EDN for making it available across the enterprise.
  3. Save and Publish the Prefab. You can set the version for the Prefab and Publish it. Know more about publishing Prefabs from here.
  4. Once approved by the EDN Admin, the Prefab will be available for use across the Projects. You can see the entry in the Artifacts list from the Developer Utilities on the Project Workspace. Import it to see the same in the Widget Toolbox of any Project within your workspace.

Using D3 Charts Prefab

  1. Open the app, where you want to incorporate this Prefab.
  2. If you have published to the app, in the Prefab section of the toolbox on the left, you will see the newly imported Prefab.
  3. Drag and drop the Prefab onto the canvas and Bind its dataset property. For this example, we have bound it to the HrdbDepartmentData dataset, which is available on the import of sample database

  1. Preview the app

Implementing NVD3 Charts

In the previous section, we have seen a simple implementation using D3 Chart. This section we will see the implementation of NVD3 charts. NVD3 is wrapper upon D3 which simplifies the implementation when compared to D3. These can also be incorporated easily into WaveMaker applications. In this section, we will see how to implement the Line Plus Bar Chart as seen here.

note

his implementation is for NVD3 version: 1.8.4 charts.

  1. Click on Create from the Prefab tab of the Project Dashboard

  2. Enter a name and description for the Prefab

  3. SAVE the project setting without making any changes

  4. Import Resource to import the following resource files: nv-d3-min & nv-d3 file into the Resource folder of your Prefab (download and extract the files).

  5. Open the SCRIPT tab of the Main page

  6. Enter the following code (you can copy and paste the same). This code generates the sin and cosine values that can be represented on the chart. Note that for the sin values, the bar attribute is set to true, thus the sine values are represented as bar chart while cosine values are represented as line graph. Click here for the code.

    Enter the following function, too, within Prefab.onReady function after the above code. This code is to set up the visual rendering of NVD3 chart. Click here for the code

  7. In the MARKUP tab add the following code within the wm-content tag:

<svg id="visualisation" width="100%" height="500"></svg>
  1. Preview the app.

    Try selecting a part of the graph from the bottom miniature graph and see the UI changes

  2. To be used as the Prefab, it would be nice to bind the data to an object in the app using the Prefab instead of static graph display. Next couple of steps will help do the same.

  3. From Project Configurations, choose Config Prefab under Settings:

    • From Resources, include the script and css files imported earlier, you can pick from the drop down list

    OR, You can instead include http url in place of script and style files: https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.css https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js

note

You can expose many properties and set the values as static or dynamic to be bound. For details of the properties that can be exposed refer to the NVD3 website.

  • Add property dataset, with text as widget, array (type if not selectable) as type and in-bound as the bindable attributes.

    • Add the following code to the propertyChangeHandler function. This function is triggered when the Prefab property changes in the incorporated app. This replaces the data built in the onInitPrefab function. Here, instead of taking static data, we are using the object passed to the Prefab to calculate the values to be represented on the x- and y-axis. The input object, according to the below code snippet, is expected to have two fields budget and q1. We are using this since in the app incorporating this Prefab we will see the binding with Department database. Add the following variable declaration:
    var data = [],
        sin = [],
        cos = [];
    
        switch (key) {
            case "dataset":
                //    debugger;
                _.each(newVal.data, function(obj, index) {
                    sin.push({
                        "y": obj.budget,
                        "x": index
                    });
                    cos.push({
                        "y": obj.q1,
                        "x": index
                    });
    
                });
    
                data = [{
                    values: sin,
                    bar: true,
                    key: 'Sine Wave',
                    color: '#ff7f0e'
                }, {
                    values: cos,
                    key: 'Cosine Wave',
                    color: '#2ca02c'
                }];
    
                break;
            case "prop2":
                // do something with newVal for property 'prop2'
                break;
        }
    }
    

    • You can publish the Prefab to a project for testing or publish it to EDN for making it available across the enterprise.
    • Save and Publish the Prefab. You can set the version for the Prefab and Publish it. Know more about publishing Prefabs from here.
    • Once approved by the EDN Admin, the Prefab will be available for use across the Projects. You can see the entry in the Artifacts list from the Developer Utilities on the Project Workspace. Import it to see the same in the Widget Toolbox of any Project within your workspace.

Using NVD3 Charts Prefab

  1. Open the app, where you want to incorporate this Prefab
  2. Since we published the Prefab, in the Prefab section of the toolbox on the left, you will see the newly imported Prefab
  3. Drag and drop the Prefab onto the canvas and bind its dataset property. For this example, we have bound it to the HrdbDepartmentData dataset, created from the Database CRUD APIs available on the import of sample database

  1. Preview the app.

nvd3_app_run

See Also

Prefab to compare two strings
Prefab using 3rd Party UI Widgets
Prefab Using D3 Library (DataMaps)
Prefab Using JQuery Plugin - showcases using Events and Methods

Last updated on 3/5/2021 by Swetha Kundaram
← Create a Simple PrefabCreate Prefab Using D3 Library DataMaps →
  • Implementing D3 Charts
  • Using D3 Charts Prefab
  • Implementing NVD3 Charts
  • Using NVD3 Charts Prefab
  • See Also
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.