WaveMaker Docs

WaveMaker Docs

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

›Custom Development

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

Creating Themes using the Manual Setup


Themes are used to apply a style to the entire application. WaveMaker app (web, and mobile) themes are based on the BootStrap CSS markup and it requires you to know HTML, CSS, LESS, and Grunt.

Styling Elements

Mainly, themes contain the following styling for all the elements on a page.

  1. Color: Background, text color, border color, hover/active/focus colors, and more.
  2. Properties: For text like text-align, text-decoration, font-size, font-weight, and more.
  3. Layout: Includes margin, padding, border-radius, and more.
tip

You can also develop themes instantly without needing to code; you can do this by using WaveMaker theme builder. For more information, see the Theme Builder Editor Tool.

Using the Manual Setup

In this document, see how to develop themes in WaveMaker using the manual approach which requires you to install the whole setup into the local environment.

Prerequisites

Before creating a theme, make sure you have installed the following on your machine:

  • Nodejs
  • GIT

Setup

  1. Open GIT Bash prompt

  2. Install grunt using the following command

    npm install -g grunt-cli
    

    For more information, see Grunt.

  3. Install bower using the following command:

    npm install -g bower
    

    For more information on bower, see click here.

  4. Setup the WaveMaker Theme repository.

    • For Git clone, see Grunt WaveMaker Theme.
    cd grunt-wavemaker-theme
    
    npm install
    

    Follow the instructions given at the Git repository.

  5. After setting up the repository, under the src folder you will find the following files that can be modified as per your needs.

    theme-web

note

Themes for Web and Mobile (Android/iOS) apps are different, use the appropriate theme source file to generate the theme bundle.

Theme Package Structure

Directory Structure

  1. Fonts folder: The web fonts can be copied here and referenced in the theme. There will be references to Roboto regular fonts in the variables.less (src/web), to avail them please download Roboto regular fonts and paste them in fonts directory (src/web/fonts).

  2. .wmprojects.properties: This contains essential properties required to identify the theme.

    .wmprojects.properties

    • name: for the theme,
    • version: of the theme. Updated version will be used to replace the existing theme in the project.
    • description: a short meaningful description of the theme,
    • type: THEME (DO NOT CHANGE THIS), and
    • author: name of the author for the theme.
  3. theme.png: Used to visually identify the Theme in the Theme dialog. The size of the image should be 160 x 120 px.

  4. style.less: This less file includes styles for components like header, footer, leftnav, calendar etc., which are not defined in the bootstrap CSS. These components can be further customized in this file by using the variables defined at the beginning of the file eg header background color can be changed using the @wm-header-bg-color variable.

  5. variables.less: This less file includes the styles defined by bootstrap. The values defined in this file are used by widgets like buttons, links, textbox, and more. For more information, see Bootstrap documentation on LESS variables.

Web Responsive

For creating a custom theme for a WaveMaker application, you need to understand the package structure. The theme package contains the following files:

NameDescription
FontsFolder containing web-based fonts used in the app.Required
.wmproject.propertiesContaining essential properties required to identify the theme which includes the name of the theme, version of the theme, a short meaningful description of the theme, the type should be THEME (DO NOT CHANGE THIS), and the name of the author for the theme.Required
style.cssContaining styles related to the theme.Required
theme.pngTheme icon.Required
variables.lessLESS variables to define colors, sizes and more.Required

Hybrid Mobile

In a hybrid app mobile theme, there can be different flavors for android and ios systems. Hence, in a theme bundle, there are different folders for android and ios.

Following is the package structure:

Sub-FolderNameDescription
none.wmproject.propertiesContaining essential properties required to identify the theme which includes the name of the theme, version of the theme, a short meaningful description of the theme, the type should be THEME (DO NOT CHANGE THIS), and the name of the author for the theme.Required
nonetheme.pngTheme icon.Required
AndroidFontsFolder containing web-based fonts used in the app.Required
style.cssContaining styles related to the theme.Required
variables.lessLESS variables to define colors, sizes and more.Required
iosFontsFolder containing web-based fonts used in the app.Required
style.cssContaining styles related to the theme.Required
variables.lessLess variables to define colors, sizes and more.Required

Creating Theme for Web Apps

Follow the steps below for creating a theme for a web app.

  1. After setting up the theme repository, navigate to the web folder.

  2. Open style.less and variables.less in the editor of your choice.

  3. To use the web fonts in the theme, copy the web fonts (.ttf,.eot, .woff) in the font folder and include the font definition in variables.less.

    @font-face {
        font-family: 'robotoregular';
        src: url('fonts/Roboto-Regular-webfont.eot');
        src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Regular-webfont.woff') format('woff'),
        url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
        url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    }
    
  4. The variables.less contain variables which are used while building the bootstrap CSS. For example, @brand-primary value change will affect all the styles using this specific property value. For more information on variables, see Bootstrap customization.

    //## Gray and brand colors for use across Bootstrap.
    @brand-primary:         #551C2B;
    @brand-success:         #088362;
    

    For more information, see Styling App Components.

  5. Replace the theme.png with your image in the web folder.

  6. Update the .wm-properties to provide theme information.

  7. Build the theme.

  8. The theme will be saved under grunt-wavemaker-theme/dist as web.zip.

  9. Import and Apply the Theme to your app.

Creating Theme for Web Apps - Bootswatch

Bootswatch provides bootstrap themes that can be integrated into your WaveMaker web apps. The prerequisites and setup for building the WaveMaker theme are the same as above.

  1. Select a theme from Bootswatch.
  2. Download the variables.less and bootswatch.less files for the selected theme.
  3. After setting up theme repository, navigate to the bootswatch folder.
  4. Copy bootswatch.less and variables.less files to grunt-wavemaker-theme/src/bootswatch folder.

bootswatch_folder

note

The variable files downloaded from bootswatch will fail if placed in any other theme folders like mobile or web.

  1. You can further customize the theme in style.less specific to the header, footer, leftnav, etc. See here for details.
  2. Replace the theme.png with your image in the bootswatch folder.
  3. Update the .wm-properties to provide theme information.
  4. Build the theme.
  5. The theme will be saved under grunt-wavemaker-theme/dist as bootswatch.zip
  6. Import and Apply the Theme to your app.

Creating Theme for Mobile Apps

Mobile Apps come in two flavors - Android and iOS. The theme renders differently on these platforms and as such the theme needs to be packaged differently.

For example, below is the rendering of a Live Form within the List.

For Android

theme-diff-android

For iOS

theme-diff-ios

As mentioned earlier in the setup structure, WaveMaker provides two folders for Mobile Themes - Android and iOS. The structure is a replica of that for Web with the content tailored for the specific platform. When building a theme for Mobile Apps, make sure that you use the appropriate files and make the same changes to both sets. DO NOT replicate the files, make changes only where needed.

Build Theme

Once you have incorporated all your changes to the Theme files, you'll need to build it.

  1. From the command prompt, build the themes using the following commands:

    cd grunt-wavemaker-theme
    grunt themes
    
  2. A zip file (web.zip/mobile.zip/bootswatch.zip) for the theme will get generated in the grunt-wavemaker-theme/dist folder.

  3. You can import the theme and apply it to your application.

Testing the Theme

You can test the custom theme, before import, by copying the style.css file directly into your app. From the left Developer Utilities, open File Explorer and you will find the style.css file under webapps -> current theme folder. Save and run the app.

note

These changes are temporary, for the permanent change, you have to import the Theme.

warning

If you make changes to the default theme style.css file, and if you do not import it as your custom theme, updating the theme will erase those changes.

Publishing the Theme

important

Applies for Enterprise Version from 10.0 release.

In order to make a custom theme available to developers across the enterprise, it needs to be published. Follow the steps below to publish a Theme.

  1. Once you have created a custom theme, import and test it in your application.

  2. From the Project Configurations, under Export select the Theme to EDN option. publish theme

  3. The theme publishing wizard with three steps will display as below.

    • Information regarding the Category, Version, Description and Change Log.
    • Configuration allows you to add Tags for search and tracking purposes and also includes the Metadata populated automatically.
    • Summary for a review before Publishing.

    theme publish dialog

  4. Note that the current Theme applied to the application will be selected for Publishing.

  5. Once the EDN Admin approves the Theme, the same will be available in the Artifacts listing in the Themes dialog for other developers to select and apply.

See Also

Apply and Import Theme
Customize an Existing Theme
How to Customize Themes

Last updated on 6/9/2020 by Swetha Kundaram
← Theme EditorCreate Template →
  • Using the Manual Setup
    • Prerequisites
    • Setup
  • Theme Package Structure
    • Directory Structure
    • Web Responsive
    • Hybrid Mobile
  • Creating Theme for Web Apps
  • Creating Theme for Web Apps - Bootswatch
  • Creating Theme for Mobile Apps
    • For Android
    • For iOS
  • Build Theme
  • Testing the Theme
  • Publishing the Theme
  • See Also
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.