WaveMaker Docs

WaveMaker Docs

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

›Binding

Getting started

  • Introduction
  • Walkthrough

Pages

  • Pages Overview
  • Creating a Page
  • Layout and Styles

    • Page Layout
    • Templates
    • Themes
    • Accessibility

    Page Configure

    • Page Artefacts
    • Page Cache
    • Partial Page
    • Page Parameters
    • Examples

    Page Actions

    • Navigation
    • Events

    Custom Development

    • Theme Editor
    • Manual Theme
    • Create Template

SSPA

  • Micro Frontend App

Databases

  • Database Services Overview
  • Database Tools
  • Database Designing

    • Working with Databases
    • Data Modelling
    • DataBase Schema Modes
    • Working with DB Schema
    • Database Views
    • Temporal Support

    Accessing Database

    • Accessing Database

    Queries and Procedures

    • Working with Queries
    • Working with Stored Procedures
    • Version Queries & Procedures
    • Blob Queries and Procedures
    • Queries & Procedures - Java Services

    Database Variables & API

    • Database CRUD
    • CRUD Event Listeners
    • Database APIs
    • Database Service APIs

REST & SOAP

  • Web Services Overview
  • Restful

    • REST Services
    • Secure Server-side Properties
    • REST Request Timeouts
    • REST Services using OAuth 2.0

    SOAP

    • Working with SOAP Services
    • Imported SOAP APIs

    Websocket

    • Working with WebSockets

    APIs

    • API Designer
    • Mocking APIs
    • Mocking REST API
    • Swagger Import

    Variables

    • CRUD Variable
    • Service Variable
    • WebSocket Variable

Java Services

  • Java Service
  • Java Services

    • Java Integration Services
    • DB Service Integration
    • API Composition
    • Variables for Invocation
    • Generated REST APIs (API Designer)

    Java Services Variables & API

    • Variable for Java Service
    • Java Service APIs

    Source Files

    • Resources and Third-party Libraries
    • Using 3rd party JavaScript files
    • Using 3rd party jar files

Variables & Actions

    Variables

    • Variables Overview
    • Model Variable
    • Device Variables

    Binding

    • Variable Binding
    • Custom Formatter

    Actions

    • Actions
    • Navigation Action
    • Login Action
    • Logout Action
    • Timer Action
    • Notification Action

    Events

    • Events
    • JavaScript Access

Security

    App Security

    • Overview
    • Authentication
    • Authorization
    • Access Levels & Permissions
    • Login Configuration
    • Session Persistence
    • SSL Encryption
    • XSS antisamy policy configuration
    • OWASP
    • XSS Prevention
    • Central Authentication System
    • Token Based Authentication
    • SAML Integration
    • Secure Connection for Deployed Apps
    • Concurrent Sessions
    • HostHeader Injection

    Security Variable and API

    • Security Variables
    • Remember Me
    • Variable for Security Service
    • Security Service APIs

Developer options

  • Test and Run (Preview) Apps
  • Chrome Extension: Devtool
  • Debugging
  • Inspection Framework
  • Build Options
  • WaveMaker Mobile Apps Automation
  • Developer Integration

    • Project User Management
    • Developer Collaboration
    • Extending the Application using IDEs
    • Import, Export & Update Apps
    • Project Shells

    Add-ons

    • Localization
    • Artifacts Repository

Deployment

  • Overview
  • Deployment Profile
  • One-click Deployment
  • WaveMaker CI/CD Pipeline

    • Overview
    • Configuration Profiles
    • Configuration Management
    • Pipelines and Phases

    Pipeline Configuration

    • Default Pipelines in WMO
    • Configure Pipeline in WME

    Deploy to Cloud Providers

    • AWS
    • Azure
    • Google Cloud
    • DigitalOcean

    Pipeline Configuration cont.

    • Phase configurations
    • Webhooks Integration
    • Tests Integration

    Manage Deployed Apps

    • Manage Deployed Apps

    Integrate with your CI/CD Providers

    • Push Code to External repo
    • Custom VCS Integration
    • Export WaveMaker Application
    • Building Project with Maven
    • Build with Docker
    • Jenkins Integration
    • Deploy using Docker Compose
    • Deployment to Heroku

    WaveMaker apps Interation with CDN

    • App Integration with AWS CDN
    • App Integration with Azure CDN

    Deployment to external web servers

    • Application Server Overview
    • Deploy to Tomcat
    • WebSphere
    • JBoss - WildFly
    • WebLogic Server

Connectors

  • Introduction
  • Architecture
  • Import Connectors
  • List of Connectors
  • Build a New Connector

Teams

  • Overview
  • Team Setup
  • Dashboard
  • Manage Users
  • Manage Projects
  • Manage Prefabs
  • Project Branches
  • Manage Roles
  • Code Repository
  • Import VCS Project
  • Team Profile
  • Manage Subscription
  • FAQs
Edit

Variable Binding


WaveMaker leverages the concept of Data Binding by Angular, to bind Widgets with Variables. Widgets can be configured to bind the UI Elements to specific fields of the Data Model.

binding_concept

Binding is used to serve two purposes:

  1. Binding the value of variables to a component or widget
  2. Binding to data from Variables

Binding to Widgets

Once you have created the necessary variables (Variable Access), you can display the data or capture user input by binding data to a component/widget. The connection between a widget (or widget property) and a source of data is called the binding.

  1. To bind widgets to data, you need to use the Bind dialog.
  2. In the Properties Panel, anything that can support data from a different source is marked with the bind chain icon. You can edit or delete the bindings. Click the bind icon to display the Bind dialog.

bind

  1. Clicking on the bind chain icon next to any widget property will open a Bind dialog. From this dialog you can:
    • see a listing the various binding options, fields along with the data types,
    • do multiple bindings, that is all the fields can be bound at the same time,
    • do a parent level binding using the objects
    • understand the binding requirement.
  2. The Bind dialog displays the binding options i.e. a list of everything that you can bind to, including all variables, widgets and so on. You can bind to widgets, variables that are defined on the current page, or that are defined at the app level.
important

The compatible types are indicated by success or failure message once you select a field from the variable list.

  • Variable: List of available variables are listed here.
  • Widgets: List of all the widgets on the current page.
  • Resource: List of resources included in the project, including images, HTML, CSS, and JavaScript.
  • Use Expression: Any JavaScript expression.
  • Localized Messages: Any of the application messages that you created in the Application Messages repository.
  1. Select the appropriate binding options and click Bind.

widget_binding

  1. A validation message will be displayed to indicate whether the binding is valid or not.
note

Along with the message, you will see the expected data type (Target) and your selection (Bound to). Based on this information, you may either choose to ignore the message or change the binding accordingly.

Binding to Data from Variables

Variables can be bound to each other. Usually, this is the requirement with Variables when the data needs to be filtered i.e. output limited by a constraint or when a Variable which needs parameters as input in order to process information from the data source. These input/filter parameters will be available from the Data tab of the Variable. For example, the Variable corresponding to the Employee CRUD API from the sample hrdb can be filtered on any field of the dataset:

var_bind

Clicking on the bind chain icon next to any parameter will open a Bind dialog. From this dialog you can:

  • see a listing the various binding options, fields along with the data types,
  • do multiple bindings, that is all the fields can be bound at the same time,
  • do a parent level binding using the objects
  • understand the binding requirement.

Binding Options

  • Variable: List of available variables are listed here.
  • Widgets: List of all the widgets on the current page.
  • Resource: List of resources included in the project, including images, HTML, CSS, and JavaScript.
  • Expression: Any JavaScript expression.
  • Localized Messages: Any of the application messages that you created in the Application Messages repository.

var_bind

A validation message will be displayed to indicate whether the binding is valid or not. Along with the message, you will see the expected data type (Target) and your selection (Bound to). Based on this information, you may choose to ignore the message or change the binding accordingly.

var_bind_warn

Binding Options

Binding to Variables

We can use bind option to bind variables to appropriate widgets or another variable. Note:

  • When binding to Service Variables make sure that the Request data on page load is selected to ensure the component/widget is initialized with data at the time of page (application in case of app owned variables) load.
  • Use Update data on input change to trigger the live variable automatically when the filter condition or the input parameter value changes.

Binding to Widgets

You can bind a widget value to another widget value. For example, you can bind a Text widget to a selected value from the Data Table or Live List.

Binding to Resource

You can bind your widgets to images, videos etc.. For this you have to Import Resource first.

Binding using Expression

From the Use Expression tab, you can write a custom expression to change the display setting. The expression can be simple string concatenation expressions or HTML syntax following AngularJS conventions for binding. For complex expressions, it is advisable to write a function. For example, when displaying name you want the display to say User Name is: some_value, you can achieve this by using the expression:

"User Name is: " + datavalue

You can also change the data format, combine various data fields and do much more using the Expressions to bind your widgets. You can select the variable you want to bind this text box from the left side panel. Using the arithmetic symbols you can build an expression involving multiple variables and the format you want it to be displayed. Currently, there are the following formatting options to choose from:

  • numberToString - formats number to a string. Fraction Size specifies the number of decimal places to round the number to. Eg: If the value is 12345.6789 and fraction size is 3, then the formatted value is 12,345.679.
  • prefix - allows you to add a prefix to the expression,
  • stringToNumber - formats string to a number. Eg: If value is '123', then formatted value is 123
  • suffix - allows you to add a suffix to the expression,
  • timeFromNow - Formats date and time to a relative time. Eg: If the value is 5 PM and the current time is 6 PM, formatted value is 'an hour ago'. Moment library is used for this functionality. Moment supports localization. Moment locale files are bundled with the project. Thus at runtime, when the locale changes, the respective locale file is loaded and all-time conversions are localized accordingly.
  • toCurrency - lets you define the type of currency thus giving the appropriate display symbol and specify the precision value,
  • toDate - lets you select the date format, and
  • toNumber - allows you to convert the text to number format for use in arithmetic operations and specify the precision value.

Binding to Localized Messages

You can bind your custom Application messages and bind them to a widget. This is particularly useful when trying to implement localization in your app. See here for more.

Last updated on 11/27/2019 by Swetha Kundaram
← Device VariablesCustom Formatter →
  • Binding to Widgets
  • Binding to Data from Variables
    • Binding Options
  • Binding Options
    • Binding to Variables
    • Binding to Widgets
    • Binding to Resource
    • Binding using Expression
    • Binding to Localized Messages
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.