WaveMaker Docs

WaveMaker Docs

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

›Variables

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

CRUD Variable for REST Services


For every service imported into the app, the APIs exposed by the service can be accessed to perform many operations with it. A variable needs to be created to invoke the service and store the results of that invocation. The Variable operations are restricted by the offerings of the underlying service.

WaveMaker automatically generates UI functionality for create, read, update, delete (CRUD) operations if you import REST API endpoints via Swagger/OpenAPI. For more information, see Import REST APIs via Swagger.

A comprehensive list of these APIs can be found from the API Designer after the import of the service.

note

Since the service needs to be invoked to fetch the data, the widgets bound to these variables will display values only at run-time, not in Studio mode.

Supported Widgets

Web: DataTable, Form

Mobile: List with Form

How to Create a CRUD Variable

You can create a CRUD variable by using the following two approaches.

  1. Create a CRUD variable from a Variable Dialog.
  2. Create a CRUD variable by drag-n-drop of the supported widget.

Using Variable Dialog

  1. Select Variable from the workspace toolbar.

variable creation

  1. Click New Variable from the Variable Dialog.

new variable

  1. Select Imported APIs as a target action for the Variable.

select imported api

  1. In the new Variable dialog, configure the properties for the variable.

create crud variable

note

You can create a service variable to perform one operation at once using Other Endpoints. For more information, see Service Variable for Imported APIs.

  • Service: Select the Imported Service.
  • Type: Select the Type as Entities (CRUD).
  • Entity: Select the entity from the dropdown. Create, Read, Update, and Delete methods group into a single entity. For more information, see Entity and Endpoints.
  • Name: Set by default, but you can modify it.
  • Owner: The scope of the Variable. Page is the default option. You can choose Application to make the variable available across the app.
  • Click Done to complete the variable creation process.

Using Drag and Drop of Widget

Drag and drop the supported-widget on the canvas. For example, in the following image, a Datatable widget is used to create a CRUD variable.

datatable crud variable

  • Retrieve Data From: Services is selected by default.
  • Select a Service type: To use CRUD variable, select All from the dropdown.
  • Select a Service: Select the entity from the drop-down which lists the services available in your application.
  • Variable Creation: Once you select the service and table/Entity for the service, a default variable will be created. See the Variable Name field populated by default which will be holding the dataset of the service. You can change the Variable name.
  • Select Form As Dialog or Form Below, and Click Next.
  • Select pagination, click Next.
  • Configure table columns. These fields can also be configured using Advanced Settings from the Properties panel.
  • Select template.
  • Configure Form fields. These fields can also be configured using Advanced Settings from the Properties panel.
  • Click Done.

For more information to create Datatable, see Create a Datatable.

Variable Properties and Events

variable creation

You will be directed to the Variables page, with the new variable listed. You can see the following options.

crud variable properties

  1. Name: You can modify the variable name.
  2. Owner: The scope of the Variable. Page is the default option. You can choose Application to make it available across the app.
  3. A new Imported APIs Variable created with the default exposed method/selected method as a target.
  4. The Properties tab contains all the properties like behavior and spinner behavior. Learn more.
  5. The Data tab contains the fields serving as Input Fields for the API.
  6. The Events tab contains the events that can be configured to trigger any action. Learn more.

Properties

PropertyDescription
Behavior
Update data on input changeIf checked, the component will be triggered automatically on the change of input data (as mentioned in the data tab) for the variable.
Request data on page loadIf checked, 'Page' variable will be triggered on page load while 'Application' variable will be triggered on application load.
In Flight BehaviorThis property determines the behavior when a call is fired through the variable with the previous call still pending. Variable queues all these calls, waits for the previous call completion and then based on the value of the inFlightBehavior property, decides what to do with all the queued calls:

- doNotExecute - all the queued calls will be discarded,
- executeAll - all the calls will be triggered one by one, or
- executeLast - only the last call is triggered and the rest are discarded, this is the default behavior
Spinner
Spinner ContextThis property specifies on which UI widget the spinner should show. Leave empty if no spinner required.
Spinner MessageThe message to be displayed below the spinner. Leave empty if no message is required below the spinner. Note: If multiple variables are fired then the spinner messages will be displayed as a list below a single spinner.

Events

During the life cycle of a Variable, a set of events are emitted by the Variable, thus giving you the option to control the behavior of the Variable such as input data validations, data processing, success/error handling, and more.

  • OnBeforeUpdate
  • OnResult
  • OnError
  • OnBeforeDatasetReady
  • OnCanUpdate
  • OnSuccess

To learn how to implement Events, see Events Documentation.

Methods

Few Methods are exposed for Variables which can be used for achieving more control and accessing extra functionality. Listed here are the same.

invoke()

This method updates the Variable’s dataSet with new data by making a call to the target service. There are four ways to call this method.

list.invoke()

create.invoke()

update.invoke()

delete.invoke()

Parameters

options (object) - It can have fields as:

  • inputFields (key-value pair of inputData)
  • success (callback)
  • error (callback)

Return Value

none

Example

var sv = Page.Variables.[variable_name];
    sv.list.invoke({
       "inputFields": {
       "fname": "Steve",
       "lname": "Rogers"
       }
      }, function(data) {
        // Success Callback
        console.log("success", data);
     }, function(error) {
        // Error Callback
        console.log("error", error)
    });

var sv = Page.Variables.[variable_name];
sv.create.invoke();

var sv = Page.Variables.[variable_name];
sv.update.invoke();

var sv = Page.Variables.[variable_name];
sv.delete.invoke();

setInput(key, value)

This method sets the input field value against the specified field(key) for the specified operation(list, create, update or delete) based on how we call it. There are four ways to call a setInput method.

list.setInput(key, value)

create.setInput(key, value)

update.setInput(key, value)

delete.setInput(key, value)

Parameters

  • key(string): name of the input field
  • value(*): value for the input field

Return Value

  • Updated inputFields object

Example

var sv = Page.Variables.[variable_name];
    sv.list.setInput("page", 1);
    sv.list.setInput("size", 50);
 sv.list.invoke();

var sv = Page.Variables.[variable_name];
    sv.create.setInput("Employee", {
        "firstName": "John",
        "lastName": "Doe"
    });
 sv.create.invoke();

var sv = Page.Variables.[variable_name];
    sv.update.setInput("Employee", {
        "firstName": "John",
        "lastName": "Doe"
    });
    sv.update.setInput("empId", 50);
 sv.update.invoke();
var sv = Page.Variables.[variable_name];
    sv.delete.setInput("empId", 50);
 sv.delete.invoke();

setInput(object)

This method can also be used to set all the specified key-value pairs as input fields in the variable for a particular operation(list, create, update or delete) based on how we call it. There are four ways to call a setInput method.

list.setInput(object)

create.setInput(object)

update.setInput(object)

delete.setInput(object)

Parameters

  • Object: key-value pairs {“key”: “value”,…}

Return Value

  • Updated inputFields object

Example

var sv = Page.Variables.[variable_name];
    sv.list.setInput({
        "page": 1,
        "size": 50
    });
 sv.list.invoke();



var sv = Page.Variables.[variable_name];
    sv.create.setInput({
        "Employee": {
            "firstName": "John",
            "lastName": "Doe"
        }
    });
 sv.create.invoke();


var sv = Page.Variables.[variable_name];
    sv.update.setInput({
        "Employee": {
            "firstName": "John",
            "lastName": "Doe"
        },
     "empId": 50
    });
 sv.update.invoke();


var sv = Page.Variables.[variable_name];
    sv.delete.setInput({
        "empId": 50
    });
 sv.delete.invoke();
Last updated on 7/14/2020 by Swetha Kundaram
← Swagger ImportService Variable →
  • How to Create a CRUD Variable
    • Using Variable Dialog
    • Using Drag and Drop of Widget
    • Variable Properties and Events
  • Properties
  • Events
  • Methods
  • invoke()
  • setInput(key, value)
  • setInput(object)
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.