WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • How-to
  • Releases
  • Login
  • Start free trial

›Tree

How-to-documents

  • How-to Wiki

App solution

  • Creating a Registration Page
  • Support for Password Encryption
  • Error Handling in WaveMaker App
  • Leaving Page with Unsaved Changes

UI design

  • How-tos for App Development
  • How-tos for Widgets
  • 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 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

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

  • 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

Tree Use Case - Dynamic Tree

If you have a requirement, whereby the user decides the structure of the tree. For example, you are building a folder-file structure and the user decides how many folders and files are to be present in a tree. This section deals with such a situation.

  1. Drop a Tree widget and 2 buttons (Add File, Add Folder) onto the canvas

  2. Select the Tree widget and specify a Script Variable as dataset property, "treeData"

  3. From the Script tab, use the following script for treeData:

    // should be an array of objects consisting of label, icon, children keys // populate the initial data Page.treeData = [{ "label": "folder1", "icon": "fa fa-folder", "children": [] }, { "label": "folder2", "icon": "fa fa-folder", "children": [] }];

  4. Select JavaScript for the onSelect event of the tree widget as:

    Page.activeTreeElement = $item;

  5. For the buttons addfile and add folder, select JavaScript for the onClick events and add the following code:

    Page.addfileClick = function ($event, widget) { // add file if (Page.activeTreeElement) { if (_.isArray(Page.activeTreeElement.children)) { Page.activeTreeElement.children.push({ "label": "new file", "icon": "fa fa-file" });

         }
     }
    

    };

    Page.addfolderClick = function ($event, widget) { // add folder if (Page.activeTreeElement) { if (_.isArray(Page.activeTreeElement.children)) { Page.activeTreeElement.children.push({ "label": "new folder", "icon": "fa fa-folder", "children": [] });

         }
     }
    

    };

  6. Preview the page and see two folders given by default. Select one node and click Add File to add files, or Add Folder to add folder.

Tree Widget Cases

  • 1. How to build a tree from static variable
  • 2. How to build tree from java service
  • 3. How to build a dynamic tree
Last updated on 9/11/2019 by rnaresh
← Tree Use Case - from Java ServiceRestricting menu item display based on user role →
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2019 WaveMaker, Inc. All rights reserved.