WaveMaker Docs

WaveMaker Docs

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

›Getting started

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

Product Walkthrough


WaveMaker is a RAD solution for developing web and mobile applications. In this document, learn WaveMaker terminologies and get familiar with the product dashboard.

Product Terminology

Following are some of the terms commonly used in Studio parlance.

TermsDescriptionSee this document
PagesPages contain app components. You can organize data by using widgets and define a workflow by interlinking them.Creating a Page
LayoutsDemarcating the page into sections.Page Layouts
TemplatesRe-usable arrangement of one or more widgets in the page content put together.
Templates
Template BundleCustom templates built into a bundle.Template Bundle
WidgetsUI components for user interaction and responsive design.Widgets Overview
List of Widgets.Widget Library
PrefabsCollection of one or more widgets that are bound to API or services.
Read more Prefab is a reusable, API-integrated component that can be used across apps. It encapsulates functionality, interaction & data and as such can be used to build custom widgets. For example, GoogleMap Prefab, QRCode reader or Youtube Prefab.
Prefab Basics
List of prefabs that are already created.Predefined Prefabs
Build your own Prefab.Creating Prefabs
Project ShellFoundation for multiple apps in an enterprise.Project Shells
ThemeColors, fonts, and branding elements (CSS & images) that is applied to all pages within an app.Themes Overview
Create your own custom theme.Creating Themes
VariableProvides data integration for the widgets.
Read more Variable holds the actual data to be rendered by the widgets. It is based on a data model obtained from the API source (from services like database and web-based) and renders the same in the form of a data structure used for binding, with attributes and related objects.
Variables Overview
Variable Types
Database CRUDFor the basic insert, read and update operation on the Database tables.Database CRUD
Database APIFor accessing the queries and procedures and additional Database functionality.Database API
Service API
Web ServicesFrom Web for the service APIs exposed by the Web services.Web Service
Java ServicesService API from Java for the service APIs exposed by the Java services.Java Service
Security ServicesService API from Security for the service APIs exposed by the Security services.Security Service
Model VariableIt can be used as storage model to store data in the client-side.Model Variable
Device VariableTo access device features in case of mobile applications.Device Variable
ActionsImplement the business logic, rules and data flow.
Read more Actions assist in invoking a backend API, Database operation or navigation to another page when a UI event occurs. Events can be either user-initiated, notification response or as a result of another task being performed.
Actions
BindingConnecting variables and widgets.
Read more Binding of the Variables to Widgets helps in capturing the data from the user or fetching data from the backend services.
Variable Binding

Dashboard Walkthrough

Project Workspace


When a project from the Project Dashboard is opened, it opens in the Project Workspace. This space is the designer pallet for your app. The various sections of the Project Workspace assist you in building the app.

  • Resources are building blocks of an App like Page, Database, APIs etc.

  • Resources Panel gives access to various resources categories - a group or category of resources of the same type such as Pages, Databases, Web Services, Java Services, and APIs.

  • Resource Explorer lists all the resources of the selected resource category

  • Resource Elements constituting a selected a resource can be viewed within the Canvas along with the appropriate Resource Toolbar.

  • Project Actions give a quick access to recently used resources, preview and deploy the app

  • Project Configurations helps secure, export, internationalize and version control the app. Also, the Configuration Profiles, Project Settings, and Studio Settings can be accessed from here.

  • For the Pages Category
    • the Resource Explorer includes Widgets, Prefabs, Page Structure and Variables which aid in designing and building the Page
    • Workspace Toolbar helps in defining runtime functionality of the Page in terms of Variables, Themes, Layout etc..
    • Widget Breadcrumb giving the relative path to the selected element on the Page
  • Properties Panel gives the settings for the selected Resource Element
  • Developer Utilities gives access to the
    • Files generated for the app through File Explorer,
    • Logs - server and client with download option and
    • miscellaneous functions like:
      • manage various project artefacts like Templates, Themes, Prefabs etc.,
      • save project shell,
      • update project source,
      • edit access to frequently used files like app.css and app.js.

Project Canvas


Once you create a project, the Main Page is created by default. You can add pages to the app, by using the + button next to the Page on Resource Explorer. On selection of a page, Canvas is provided:

  1. you can select the page to design/edit from the Pages resource category
  2. the selected page UI is displayed in the Canvas
  3. the Properties Panel displays the properties of the Page
  4. from the Page Structure section, you can see the various elements placed on the Page and their hierarchy
  5. you can select the widget from the Page structure
  6. selected widget is highlighted on the Canvas
  7. selected widget properties like data source, styles, events, device, and security can be set from the Properties Panel
  8. Widget hierarchy shows the widget construct and allows you to traverse to the parent container.

Project Settings

You can view and change project details and settings from the Project Settings dialog.

Project Settings can be accessed from the Settingsoption of theSecondary Actions.

  • Type indicates whether it is an application - web or mobile; or a prefab. For Prefabs, an additional Prefab Settings tab is displayed.
  • Project Name non-editable field giving the name of the project.
  • Description giving a brief description of the project as entered at the time of project creation which can be modified.
  • Package prefix defines the default package for the generated code across all services. The package prefix is generated by concatenating the com and project name. This can be modified as per your requirements.
  • The copyright information is generated by default, which can be modified.
  • Provatar or project avatar is an icon depicting the nature of the project, editable set from the selection from the drop-down menu.
  • Version number can take any format as per your company standards.
  • Default Language can be set for the project. This works in conjunction with the Localization. The developer has to provide the Language Bundle via the App Messages, translation facility is not provided by this feature. In case the Language Bundle is not provided the application will run in English, which is the default language. The browser language preference of the user can be captured. If the user running the WaveMaker app has language preference set in their browser and that language is supported by the app (i.e. available in the language bundle) then the app will be rendered in that language instead of the default language of the app.
  • Home Page defines the initial or the first page for the app at run-time. It is set to the Main page by default. NOTE: Few things that you need to be aware of regarding the Home Page
    • In case the app is not secure, the user is redirected to the Home page configured in the project settings
    • In case the app is secure but the Home Page is not (permission set to everyone), the user is redirected to the Home page configured in the project settings
    • In case the app and Home Page are secure(permission set to specific user role), the user is redirected to the configured login page as per the user role
  • Display Format can be used to set the display format for all the date/time fields in the app. The Configure Formats link directs you to the localization dialog where the date and time formats can be set. (click here to know more)
  • Project Shell used in building the app, non-editable
  • Created date is the project creation timestamp, non-editable.
  • Last Accessed date is the timestamp of last project modification, non-editable.
Last updated on 3/5/2021 by Swetha Kundaram
← IntroductionPages Overview →
  • Product Terminology
  • Dashboard Walkthrough
  • Project Workspace
  • Project Canvas
  • Project Settings
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.