WaveMaker Learn

WaveMaker Learn

  • Docs
  • Widgets
  • How-to
  • Releases
  • Login
  • Start free trial

›Prefabs

How-to-documents

  • How-to Wiki

App Development

  • How-tos: App Development

- 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
  • Use Static Variable to pass data between pages
  • Incorporating Additional Icons
  • Change Icon Color on Condition
  • Changing Default Favicon
  • Changing App Logo
  • Changing Page Title
  • Customise App Style
  • Customize an Existing Theme
  • Customizing Theme

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

- Web services

  • Using App Environment Properties
  • Using POST method to send data to a REST API
  • How to Intercept Request and Response of all API Calls in One Place

- Java services

  • Sending eMail using Java Service
  • Implementing Forgot Password feature using Java Service
  • Accessing REST APIs from Java Service
  • Scheduling a Java Service
  • Pre-Post Processing for Database Service APIs

- 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

- Developer-side

  • Synchronizing WaveMaker Apps with IDEs Beta
  • 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

Mobile Development

  • How-tos: Mobile Development

- 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

Widgets

  • How-tos: Widgets

- 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
  • Dynamic Data Tables
  • Data Table Column bound to Query
  • Custom Styling Data Table Columns & Rows

- 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
  • 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
  • Adding Master-Detail records in the same 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 Progressive Data Entry in a Live Form
  • Using Wizard for Cumulative Data Entry in a Live Form

- Calendar

  • Calendar Usage - Create an Event
  • Calender Usage - Google Calendar Integration

- CheckboxSet

  • CheckboxSet to Filter List data

- FileUpload

  • 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 Variable
  • Configuring Select Widget using Display and Data Fields
  • Configuring Select Widget from Database Fields
  • Configuring Cascading Select

- Charts

  • Charts - Displaying User Selection in another Widget
  • Charts - Handling Dynamic Data
  • Charts - 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

- Tree

  • Tree Use Case - from Static Variable
  • Tree Use Case - from Java Service
  • Tree Use Case - Dynamic Tree

- Nav

  • Nav - Basic Usage

- Dropdown

  • Restricting menu item display based on user role
  • Implementing Localization for Dropdown Menu

Prefabs

  • How-tos: Prefabs
  • Create Prefab using Third Party UI Widgets
  • Create Prefab Using D3 & NVD3 Charts
  • Create Prefab Using D3 Library (DataMaps)
  • Create Prefab using JQuery Plugin
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.

Prerequisites

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

Creating the Prefab

  1. Click on Create from the Prefab tab of the [Project Dashboard](http://[supsystic-show-popup id=102])

  2. Enter a name (say TreeView2) and description for the Prefab.

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

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

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

    2. 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:

    3. 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

    4. In the Methods tab, add the following methods:

      1. SelectNode: Method to select a node
        • Parameters: Node, Type: any
        • Return type: void
      2. Redraw: Method to redraw the whole tree
        • Return type: void
      3. selectAllNodes: Method to select all Nodes
        • Return type: void
      4. deselectAllNodes: Method to deselect all nodes
        • Return type: void
      5. deselectNode: Method to deselect a node
        • Parameters: Node, Type: any
        • Return type: void

  5. 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.

  6. Here 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. */ 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(); }

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

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

  8. Publish the Prefab. Know more about publishing Prefabs from here.

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.

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 On Click events for each of the buttons.

  3. This will create the snippet for the

  4. The code for the

Invoking Prefab Events in Project

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

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”

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" } ] } ]

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

  3. Run the app and see the Prefab in action

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)
  • 5. Prefab using JQuery Plugin
    • i. Creation
    • ii. Usage
      • ○ Invoking Methods
      • ○ Invoking Events
      • ○ Passing Data
Last updated on 11/12/2019 by Swetha Kundaram
← Create Prefab Using D3 Library (DataMaps)
  • 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-2019 WaveMaker, Inc. All rights reserved.