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 JQuery Plugin


This post walks you through the creation and usage of a Prefab using JQuery Plugin. This is to showcase the use of Events and Methods in a Prefab.

Let us create a simple Prefab named TreeView which is interactive. We are going to use a JQuery plugin named jsTree. jsTree is a JQuery plugin, that provides interactive trees. jsTree is easily extendable, theme-able and configurable, it supports HTML & JSON data sources and AJAX loading.

Creating the Prefab

From the Project Dashboard, go to the Prefab tab and click Create.

create prefab

Enter a name and description of the Prefab. For example, TreeView2.

Download files

Download the jsTree JQuery Plugin from https://www.jstree.com/. Unzip the file downloaded and use the files from the dist folder.

jstree_prefab_download

From File Explorer add the JS and CSS files from the downloaded dist folder. Here we have created a folder jsTree to hold the same structure as the dist folder.

jstree_prefab_import

Project Configuration

  1. Click Config Prefab from the Settings dropdown.

prefab project config

  1. In the Resources tab, choose the css and js files.

jstree_prefab_resources

  1. In the Properties tab, add an inbound property as an object, array (type if not selectable) which should consist of parent and child node names:

jstree_prefab_inbound

  1. In the Events tab, add events to be triggered when a node is Selected, Deselected, Expanded or Collapsed.
note

By default, two events are already given - Load and Destroy.

jstree_prefab_events

  1. In the Methods tab, add the following methods:
  • SelectNode: Method to select a node
    • Parameters: Node, Type: any
    • Return type: void
  • Redraw: Method to redraw the whole tree
    • Return type: void
  • selectAllNodes: Method to select all Nodes
    • Return type: void
  • deselectAllNodes: Method to deselect all nodes
    • Return type: void
  • deselectNode: Method to deselect a node
    • Parameters: Node, Type: any
    • Return type: void

jstree_prefab_methods

Custom Functions

Once these properties, methods, and events are added to Prefab configuration in the Prefab Script the Method snippets will be auto-generated. You can fill with the code for the same.

jstree_prefab_script

The following is the script for all methods.

Declare a variable

var treeMapInstance;

Property Change event:

Prefab.onPropertyChange = function(key, newVal, oldVal) {
    switch (key) {
        case "treedata": //UI Property for the node array
            initJStreeView();
            break;
        case "multiple":
        case "dots":
            _redraw();
            break;
    }
};

Function to initialize the tree view

function initJStreeView() {
    var treeViewELe = Prefab.Widgets.treeViewContainer.$element;
    treeViewELe.jstree({
        core: {
            multiple: true,
            themes: {
                dots: true,
            },
            data: Prefab.treedata
        }
    });
    treeMapInstance = Prefab.Widgets.treeViewContainer.$element.jstree(true);
    // treeViewELe.on("changed.jstree", function(node, action, selected, event) {
    //     console.log("The selected nodes are:");
    //     console.log(action.selected);
    // });

    // select event
    treeViewELe.on("select_node.jstree", function(e, data) {
        Prefab.onSelect(e, data);
    });

    // deselect event
    treeViewELe.on("deselect_node.jstree", function(e, data) {
        Prefab.onDeselect(e, data);
    });

    // expand event
    treeViewELe.on("open_node.jstree", function(e, data) {
        Prefab.onExpand(e, data);
    });

    // collapse event
    treeViewELe.on("close_node.jstree", function(e, data) {
        Prefab.onCollapse(e, data);
    });
}

Function to redraw the tree view

    function _redraw() {
        if (treeMapInstance) {
            treeMapInstance.redraw();
        }
    }

    Methods for the tree:

    /*
     * Method to select all nodes
     */
    Prefab.selectAllNodes = function() {
        if (treeMapInstance) {
            treeMapInstance.select_all();
        }
    };

    /*
     * Deselect all nodes
     */
    Prefab.deselectAllNodes = function() {
        if (treeMapInstance) {
            treeMapInstance.deselect_all();
        }
    };

    /*
     * Method for selecting a node in the tree by id.
     * preventOpen: If set to true parents of the selected node won't be opened
     */
    Prefab.selectNode = function(node, preventOpen) {
        if (treeMapInstance) {
            treeMapInstance.select_node(node, false, preventOpen);
        }
    };

    /*
     * Method for deselecting a node in the tree.
     */
    Prefab.deselectNode = function(node) {
        if (treeMapInstance) {
            treeMapInstance.deselect_node(node);
        }
    };

    /*
     * Re Draws the whole tree
     */
    Prefab.redraw = function() {
        _redraw();
    }

Add Container tag

Add a wm-container tag with the name treeViewContainer in the Markup, as follows:

<wm-container name="treeViewContainer"></wm-container>

jstree_prefab_html

Publish the Prefab

  1. Save and Publish the Prefab.
  2. You can set the version for the Prefab and Publish it. For more information about publishing Prefabs, see Publish Prefab.
  3. The Prefab will be available for use across the Projects. You can see the entry in the Artefacts list and in the Widget Toolbox of any Project within your workspace.

Using the Prefab in Project

  1. Let us now use the above-created Prefab in an application.
  2. We are using the WaveMaker non-enterprise version and have Published the Prefab to Workspace.
  3. Create or Open an application.
  4. You can see the Prefab in the Prefab Listing.
  5. On the Main page drag and drop the TreeView2 Prefab.

jstree_prefab_appdnd

Invoking Prefab Methods in Project

The prefab has exposed methods which can be triggered by the application as shown below.

  1. To call the exposed methods, drag and drop four Button Widgets in the main page under the Prefab and give the captions for the buttons as SELECT ALL, SELECT NODE, DESELECT NODE and DESELECT ALL. We have named the buttons as selectAll, selectNode, deselectNode and deselectAll.
  2. Create an On Click event for each button.

jstree_prefab_appmethods

  1. This will create the snippet for the <button>Click event in the script tab of the main page in the application.
  2. The code for the <button>Click event will call the exposed methods respectively.
note

Check the name of the Button widget, it might be different if you have not named them as mentioned in step 1. Ensure that the Prefab name matches what you have in your project.

Page.selectAllClick = function($event, widget) {
    Page.Widgets.TreeView21.selectAllNodes();
    alert("Selected All Nodes");
};
Page.selectNodeClick = function($event, widget) {
    Page.Widgets.TreeView21.selectNode(2);
    alert("Selected second Node");
};

Page.deselectNodeClick = function($event, widget) {
    Page.Widgets.TreeView21.deselectNode(2);
    alert("DeSelected second Node");
};

Page.deselectAllClick = function($event, widget) {
    Page.Widgets.TreeView21.deselectAllNodes();
    alert("DeSelected All Nodes");
};

jstree_prefab_appscript

Invoking Prefab Events in Project

The events are also exposed on the events tab and you can create actions for each of them.

jstree_prefab_appevents

Here we have created Notification Action to be displayed for each of the Event:

  • selectAction for On Select - Create a Notification Action and when any node is selected, it will give a callback as a notification with the text “Node Selected”
  • collapseAction for On collapse - Create a Notification Action and when nodes are collapsed, it will give a callback as a notification with the text “Nodes Collapsed”
  • expandAction for On expand - Create a Notification Action and when nodes are expanded it will give a callback as a notification with the text “Nodes expanded”
  • deselectAction for On deselect - Create a Notification Action and when any node is deselected, it will give a callback as a notification with the text “Node DeSelected”

jstree_prefab_appnotification

The Prefab application can also add an Event listener for an event and take some appropriate action once the event happens.

Passing Data to Prefab in Project

Finally, this Prefab needs data to render in the Tree format.

  1. For this, we have created a Model Variable with the following JSON structure:
[
    {
    "id": 1,
    "text": "Root node",
    "state": {
        "opened": true
    },
    "icon": "",
    "type": [],
    "children": [
        {
        "id": 2,
        "text": "Child node 1",
        "state": {
            "selected": true
        },
        "icon": "glyphicon glyphicon-flash"
        },
        {
        "id": 3,
        "text": "Child node 2",
        "children": [
            {
            "id": 4,
            "text": "Child node 2 - 1",
            "state": {
                "opened": true
            },
            "icon": "",
            "type": [],
            "children": [
                {
                "id": 5,
                "text": "Child node 2 - 1 - 1",
                "state": {
                    "selected": true
                },
                "icon": "glyphicon glyphicon-flash"
                },
                {
                "id": 6,
                "text": "Child node 2 - 1 - 1",
                "icon": "glyphicon glyphicon-flash"
                }
            ]
            }
        ]
        },
        {
        "id": 7,
        "text": "Child node 3",
        "state": {
            "selected": true
        },
        "icon": "glyphicon glyphicon-flash"
        }
    ]
    }
]

stree_prefab_appvar

  1. Bind the above Variable to the Tree Data property of the Prefab:

jstree_prefab_appdata

jstree_prefab_appbind

  1. Run the app and see the Prefab in action

jstree_prefab_apprun

Prefab Use Cases

  • 1. Prefab to compare two strings
  • 2. Prefab using 3rd Party UI Widgets
  • 3. Prefab Using D3 & NVD3 Charts
  • 4. Prefab Using D3 Library (DataMaps)
Last updated on 1/28/2021 by PriyankaPathoori
← Create Prefab Using D3 Library DataMapsCreate Prefab using Angular Module →
  • Creating the Prefab
    • Download files
    • Project Configuration
  • Custom Functions
    • Declare a variable
    • Function to initialize the tree view
    • Function to redraw the tree view
    • Add Container tag
  • Publish the Prefab
  • Using the Prefab in Project
    • Invoking Prefab Methods in Project
    • Invoking Prefab Events in Project
    • Passing Data to Prefab in Project
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.