Knowledge Base for DX 7 : How to develop a Userview Theme Plugin

Created by Hugo, last modified on Apr 06, 2020


In this tutorial, we will be following the guideline for developing a plugin to develop a Userview Theme plugin.

1. What is the problem?

Extends and customize the look and feel of existing Userview Theme to obtain different look and feel on the end user's interface.

2. How to solve the problem?

Joget has provided a plugin type called Userview Theme Plugin. We will develop one to a new Userview Theme by extending one of the existing themes.

3. What is the input needed for your plugin?

To develop a Userview Theme plugin, we will need to first determine the design change that we want to bring to the existing look and feel. In this tutorial, we will attempt to change the look and feel of how a form is displayed.

This is how a form looks like using the Universal Theme.

And, we are going to attempt to change the design by taking cues from this design (Source https://colorlib.com/etc/regform/colorlib-regform-2/).


4. What is the output and expected outcome of your plugin?

We are going to customize the design of the form, to adapt from the site that we have chosen, and introduce the necessary coding (CSS, JS etc) on top of the Universal Theme.

5. Are there any resources/API that can be reused?

We can refer to the documentation of Userview Theme Plugin and look at its Overridable Methods.

6. Prepare your development environment

We need to always have our Joget Workflow Source Code ready and built by following this guideline. 

The following tutorial is prepared with a Macbook Pro and Joget Source Code version 7.0-SNAPSHOT. Please refer to the Guideline for developing a plugin article for other platform commands. 

Let's say our folder directory is as follows. 

- Home
  - joget
    - plugins
    - jw-community
      -7.0-SNAPSHOT

The "plugins" directory is the folder we will create and store all our plugins and the "jw-community" directory is where the Joget Workflow Source code is stored.

Run the following command to create a maven project in "plugins" directory.

cd joget/plugins/
~/joget/jw-community/7.0-SNAPSHOT/wflow-plugin-archetype/create-plugin.sh org.joget.tutorial eva-theme 7.0-SNAPSHOT

Then, the shell script will ask us to key in a version number for the plugin and request for confirmation before generating the maven project.

Define value for property 'version':  1.0-SNAPSHOT: : 7.0.0
[INFO] Using property: package = org.joget.tutorial
Confirm properties configuration:
groupId: org.joget.tutorial
artifactId: eva-theme
version: 7.0.0
package: org.joget.tutorial
Y: : y

We should get "BUILD SUCCESS" message shown in our terminal and a "jdbc_options_binder" folder created in "plugins" folder.

Open the maven project with your favorite IDE. I will be using NetBeans.  

7. Just code it!

a. Extending the abstract class of a plugin type

In this case, we are extending UniversalTheme rather than UserviewV5Theme so that we can customize our theme on the top of it.

b. Implement all the abstract methods

Implementation of all basic abstract methods 
package org.joget.tutorial;

import java.util.Map;
import java.util.Set;
import org.joget.apps.app.service.AppUtil;
import org.joget.apps.userview.service.UserviewUtil;
import org.joget.commons.util.ResourceBundleUtil;
import org.joget.plugin.base.PluginManager;
import org.joget.plugin.enterprise.UniversalTheme;

public class EvaTheme extends UniversalTheme{
    //extends UniversalTheme so that we can take advantage of all PWA capabilities.
    
    @Override
    public String getName() {
        return "Eva Theme";
    }

    @Override
    public String getVersion() {
        return "7.0.0";
    }

    @Override
    public String getDescription() {
        return "Eva Theme based on Universal Theme to support PWA";
    }

    @Override
    public String getLabel() {
        return getName();
    }

    @Override
    public String getClassName() {
        return getClass().getName();
    }
    
    @Override
    public String getPropertyOptions() {
        return AppUtil.readPluginResource(getClass().getName(), "/properties/userview/EvaTheme.json", null, true, "messages/userview/EvaTheme");
    }
    

}

Then, we have to create a UI for admin user to provide inputs for our plugin. In getPropertyOptions method, we have already specified that our Plugin Properties Options definition file is located at "/properties/EvaTheme.json". Let us create a directory "resources/properties" under "eva-theme/src/main" directory. After creating the directory, create a file named "EvaTheme.json" in the "properties" folder.

In the properties definition options file, we will need to provide options as below. Please note that we will use "@@message.key@@" syntax to support i18n in our properties options.Since we are extending our theme from Universal Theme, we can simply copy Universal Theme's file and to modify line 2 to rename its label. Keep in mind the label key that we are declaring here - "theme.eva.config".

We have also added line 25-33 to allow app designer to upload their own background image to be placed on the left in the form design. The label key used here is "theme.eva.formImage".

[{
    title : '@@theme.eva.config@@',
    properties : [
    {
        name : 'horizontal_menu',
        label : '@@theme.universal.menu_position@@',
        type : 'selectbox',
        options : [{
            value : '',
            label : '@@theme.universal.menu.sideMenu@@'
        },
        {
            value : 'true',
            label : '@@theme.universal.menu.horizontalMenu@@'
        },
        {
            value : 'horizontal_inline',
            label : '@@theme.universal.menu.inlineHorizontalMenu@@'
        },
        {
            value : 'no',
            label : '@@theme.universal.menu.no@@'
        }]
    },
    {
        name : 'form_image',
        label : '@@theme.eva.formImage@@',
        type: 'image',
        appPath: '[APP_PATH]',
        allowInput : 'true',
        isPublic : 'true',
        imageSize : 'width:100px; height: 200px; background-repeat: repeat-y;'
    },
    {
        name : 'themeScheme',
        label : '@@theme.universal.themeScheme@@',
        type : 'selectbox',
        value: 'light',
        options : [{
            value : 'dark',
            label : '@@theme.universal.themeScheme.dark@@'
        },{
            value : 'light',
            label : '@@theme.universal.themeScheme.light@@'
        }]
    },
    {
        name : 'primaryColor',
        label : '@@theme.universal.primaryColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'DARKROYALBLUE',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }]
    },
    {
        name : 'customPrimary',
        label : '@@theme.universal.customPrimary@@',
        type : 'color',
        control_field: 'primaryColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'customPrimaryDark',
        label : '@@theme.universal.customPrimaryDark@@',
        type : 'color',
        control_field: 'primaryColor',
        control_value: 'custom',
        control_use_regex: 'false'
    },
    {
        name : 'customPrimaryLight',
        label : '@@theme.universal.customPrimaryLight@@',
        type : 'color',
        control_field: 'primaryColor',
        control_value: 'custom',
        control_use_regex: 'false'
    },
    {
        name : 'accentColor',
        label : '@@theme.universal.accentColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'BLUE',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }]
    },
    {
        name : 'customAccent',
        label : '@@theme.universal.customAccent@@',
        type : 'color',
        control_field: 'accentColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'customAccentLight',
        label : '@@theme.universal.customAccentLight@@',
        type : 'color',
        control_field: 'accentColor',
        control_value: 'custom',
        control_use_regex: 'false'
    },
    {
        name : 'buttonColor',
        label : '@@theme.universal.buttonColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'GREY',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }]
    },
    {
        name : 'customButton',
        label : '@@theme.universal.customButton@@',
        type : 'color',
        control_field: 'buttonColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'buttonTextColor',
        label : '@@theme.universal.buttonTextColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'WHITE',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }]
    },
    {
        name : 'customButtonText',
        label : '@@theme.universal.customButtonText@@',
        type : 'color',
        control_field: 'buttonTextColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'menuFontColor',
        label : '@@theme.universal.menuFontColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'BLACK',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }],
        control_field: 'themeScheme',
        control_value: 'light',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'customMenuFontColor',
        label : '@@theme.universal.customMenuFontColor@@',
        type : 'color',
        control_field: 'menuFontColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'fontColor',
        label : '@@theme.universal.fontColor@@',
        type : 'selectbox',
        options_label_processor : 'color',
        value: 'WHITE',
        options : [{
            value : '',
            label : ''
        },{
            value : 'RED',
            label : '@@theme.universal.colorScheme.red@@'
        },{
            value : 'PINK',
            label : '@@theme.universal.colorScheme.pink@@'
        },{
            value : 'LAVENDERBLUSH',
            label : '@@theme.universal.colorScheme.lavenderBlush@@'
        },{
            value : 'THISTLE',
            label : '@@theme.universal.colorScheme.thistle@@'
        },{
            value : 'PLUM',
            label : '@@theme.universal.colorScheme.plum@@'
        },{
            value : 'PURPLE',
            label : '@@theme.universal.colorScheme.purple@@'
        },{
            value : 'DEEP_PURPLE',
            label : '@@theme.universal.colorScheme.deepPurple@@'
        },{
            value : 'INDIGO',
            label : '@@theme.universal.colorScheme.indigo@@'
        },{
            value : 'LAVENDER',
            label : '@@theme.universal.colorScheme.lavender@@'
        },{
            value : 'GHOSTWHITE',
            label : '@@theme.universal.colorScheme.ghostWhite@@'
        },{
            value : 'BLUE',
            label : '@@theme.universal.colorScheme.blue@@'
        },{
            value : 'LIGHT_BLUE',
            label : '@@theme.universal.colorScheme.lightBlue@@'
        },{
            value : 'DARKROYALBLUE',
            label : '@@theme.universal.colorScheme.darkRoyalBlue@@'
        },{
            value : 'ROYALBLUE',
            label : '@@theme.universal.colorScheme.royalBlue@@'
        },{
            value : 'CORNFLOWERBLUE',
            label : '@@theme.universal.colorScheme.cornflowerBlue@@'
        },{
            value : 'ALICEBLUE',
            label : '@@theme.universal.colorScheme.aliceBlue@@'
        },{
            value : 'LIGHTSTEELBLUE',
            label : '@@theme.universal.colorScheme.lightSteelBlue@@'
        },{
            value : 'STEELBLUE',
            label : '@@theme.universal.colorScheme.steelBlue@@'
        },{
            value : 'LIGHTSKYBLUE',
            label : '@@theme.universal.colorScheme.lightSkyBlue@@'
        },{
            value : 'SKYBLUE',
            label : '@@theme.universal.colorScheme.skyBlue@@'
        },{
            value : 'DEEPSKYBLUE',
            label : '@@theme.universal.colorScheme.deepSkyBlue@@'
        },{
            value : 'AZURE',
            label : '@@theme.universal.colorScheme.azure@@'
        },{
            value : 'LIGHTCYAN',
            label : '@@theme.universal.colorScheme.lightCyan@@'
        },{
            value : 'CYAN',
            label : '@@theme.universal.colorScheme.cyan@@'
        },{
            value : 'TEAL',
            label : '@@theme.universal.colorScheme.teal@@'
        },{
            value : 'GREEN',
            label : '@@theme.universal.colorScheme.green@@'
        },{
            value : 'LIGHT_GREEN',
            label : '@@theme.universal.colorScheme.lightGreen@@'
        },{
            value : 'LIME',
            label : '@@theme.universal.colorScheme.lime@@'
        },{
            value : 'IVORY',
            label : '@@theme.universal.colorScheme.ivory@@'
        },{
            value : 'LEMONCHIFFON',
            label : '@@theme.universal.colorScheme.lemonChiffon@@'
        },{
            value : 'WHEAT',
            label : '@@theme.universal.colorScheme.wheat@@'
        },{
            value : 'YELLOW',
            label : '@@theme.universal.colorScheme.yellow@@'
        },{
            value : 'AMBER',
            label : '@@theme.universal.colorScheme.amber@@'
        },{
            value : 'ORANGE',
            label : '@@theme.universal.colorScheme.orange@@'
        },{
            value : 'DEEP_ORANGE',
            label : '@@theme.universal.colorScheme.deepOrange@@'
        },{
            value : 'BROWN',
            label : '@@theme.universal.colorScheme.brown@@'
        },{
            value : 'LIGHTGREY',
            label : '@@theme.universal.colorScheme.lightGrey@@'
        },{
            value : 'GREY',
            label : '@@theme.universal.colorScheme.grey@@'
        },{
            value : 'BLUE_GREY',
            label : '@@theme.universal.colorScheme.blueGrey@@'
        },{
            value : 'DEEP_GREY',
            label : '@@theme.universal.colorScheme.deepGrey@@'
        },{
            value : 'SILVER',
            label : '@@theme.universal.colorScheme.silver@@'
        },{
            value : 'BLACK',
            label : '@@theme.universal.colorScheme.black@@'
        },{
            value : 'WHITE',
            label : '@@theme.universal.colorScheme.white@@'
        },{
            value : 'custom',
            label : '@@theme.universal.colorScheme.custom@@'
        }]
    },
    {
        name : 'customFontColor',
        label : '@@theme.universal.customFontColor@@',
        type : 'color',
        control_field: 'fontColor',
        control_value: 'custom',
        control_use_regex: 'false',
        required : 'true'
    }],
},
{
    title : '@@theme.universal.advanced@@',
    properties : [
    {
        name : 'fav_icon',
        label : '@@theme.universal.favIcon@@',
        type: 'image',
        appPath: '[APP_PATH]',
        allowInput : 'true',
        isPublic : 'true',
        imageSize : 'width:16px;height:16px;'
    },
    {
        name : 'logo',
        label : '@@theme.universal.logo@@',
        type: 'image',
        appPath: '[APP_PATH]',
        allowInput : 'true',
        isPublic : 'true',
        imageSize : 'width:80px; height:35px; background-size: contain; background-repeat: no-repeat;'
    },
    {
        name : 'profile',
        label : '@@theme.universal.disabledProfile@@',
        type : 'checkbox',
        options : [{
            value : 'true',
            label : ''
        }]
    },
    {
        name : 'userImage',
        label : '@@theme.universal.userImage@@',
        type : 'selectbox',
        value : '',
        options : [{
            value : 'no',
            label : '@@theme.universal.userImage.no@@'
        },{
            value : '',
            label : '@@theme.universal.userImage.gravatar@@'
        },{
            value : 'hashVariable',
            label : '@@theme.universal.userImage.hashVariable@@'
        }]
    },
    {
        name : 'userImageUrlHash',
        label : '@@theme.universal.userImageUrlHash@@',
        type : 'textfield',
        control_field: 'userImage',
        control_value: 'hashVariable',
        control_use_regex: 'false',
        required : 'true'
    },
    {
        name : 'inbox',
        label : '@@theme.universal.inbox@@',
        type : 'selectbox',
        value : 'current',
        options : [{
            value : '',
            label : '@@theme.universal.inbox.no@@'
        },{
            value : 'all',
            label : '@@theme.universal.inbox.all@@'
        },{
            value : 'current',
            label : '@@theme.universal.inbox.current@@'
        }]
    },    
    {
        name : 'homeUrl',
        label : '@@theme.universal.homeUrl@@',
        type : 'textfield'
    },    
    {
        name : 'shortcutLinkLabel',
        label : '@@theme.universal.shortcutLinkLabel@@',
        value : '@@theme.universal.shortcut@@',
        type : 'textfield'
    },
    {
        name : 'shortcut',
        label : '@@theme.universal.shortcut@@',
        description : '@@theme.universal.shortcut.desc@@',
        type : 'grid',
        columns : [{
            key : 'label',
            label : '@@theme.universal.label@@'
        },
        {
            key : 'href',
            label : '@@theme.universal.href@@'
        },
        {
            key : 'target',
            label : '@@theme.universal.target@@',
            options : [
                {value: '', label: ''},
                {value: '_blank', label: '@@theme.universal.target.newTab@@'},
            ]
        },
        {
            key : 'isPublic',
            label : '@@theme.universal.shortcut.public@@',
            type : 'truefalse'
        }]
    },
    {
        name : 'userMenu',
        label : '@@theme.universal.userMenu@@',
        description : '@@theme.universal.userMenu.desc@@',
        type : 'grid',
        columns : [{
            key : 'label',
            label : '@@theme.universal.label@@'
        },
        {
            key : 'href',
            label : '@@theme.universal.href@@'
        },
        {
            key : 'target',
            label : '@@theme.universal.target@@',
            options : [
                {value: '', label: ''},
                {value: '_blank', label: '@@theme.universal.target.newTab@@'},
            ]
        }]
    },
    {
        name : 'enableResponsiveSwitch',
        label : '@@theme.universal.enableResponsiveSwitch@@',
        type : 'checkbox',
        value : 'true',
        options : [{
            value : 'true',
            label : ''
        }]
    },
    {
        name : 'removeAssignmentTitle',
        label : '@@theme.universal.removeAssignmentTitle@@',
        type : 'checkbox',
        options : [{
            value : 'true',
            label : ''
        }]
    },
    {
        name : 'homeAttractBanner',
        label : '@@theme.universal.homeAttractBanner@@',
        type : 'codeeditor',
        mode : 'html'
    },
    {
        name : 'css',
        label : '@@theme.universal.customCss@@',
        type : 'codeeditor',
        mode : 'css'
    },
    {
        name : 'js',
        label : '@@theme.universal.customJavascript@@',
        type : 'codeeditor',
        mode : 'javascript'
    },
    {
        name : 'subheader',
        label : '@@theme.universal.subHeader@@',
        type : 'codeeditor',
        mode : 'html'
    },
    {
        name : 'subfooter',
        label : '@@theme.universal.subFooter@@',
        type : 'codeeditor',
        mode : 'html'
    },
    {
        name: 'disableHelpGuide',
        label: '@@theme.universal.disableHelpGuide@@',
        type: 'checkbox',
        value: 'false',
        options: [{
            value: 'true',
            label: ''
        }]
    }]
},
{
    title : '@@pwa.settings@@',
    properties : [
    {
        name: 'disablePwa',
        label: '@@pwa.disablePwa@@',
        type: 'checkbox',
        value: 'false',
        options: [{
            value: 'true',
            label: ''
        }]
    },
    {
        name: 'disablePush',
        label: '@@push.disablePush@@',
        type: 'checkbox',
        value: 'false',
        options: [{
            value: 'true',
            label: ''
        }]
    },
    {
        name: 'urlsToCache',
        label: '@@pwa.urlsToCache@@',
        type:'textarea',
        description: '@@pwa.urlsToCache.desc@@',
        cols:'40',
        rows:'10'
    }],
    buttons : [{
        name : 'testpush',    
        label : '@@push.sendTestPush@@',
        ajax_url : '[CONTEXT_PATH]/web/json/push/message',
        ajax_method : 'POST',
        addition_fields : [
        {
            name : 'username',
            label : '@@push.username@@',
            type : 'textfield',
            required : 'True'
        },
        {
            name : 'title',
            label : '@@push.title@@',
            type : 'textfield',
            required : 'True'
        },
        {
            name : 'text',
            label : '@@push.text@@',
            type : 'textfield',
            required : 'True'
        },
        {
            name : 'url',
            label : '@@push.url@@',
            type : 'textfield',
            required : 'False'
        },
        {
            name : 'icon',
            label : '@@push.icon@@',
            type : 'textfield',
            required : 'False'
        },
        {
            name : 'badge',
            label : '@@push.badge@@',
            type : 'textfield',
            required : 'False'
        }]
    }]
}]

c. Customizing the Theme

This is the part we will insert our modifications to achieve the look and feel that we want.

It is good to note that each of the form element (i.e. textfield, textarea, date picker) has its own template file that follows a standardized layout with label on the left and content on the right. For example, this is the template file for TextField element.

textField.ftl 
<div class="form-cell" ${elementMetaData!}>
    <#if !(includeMetaData!) && element.properties.style! != "" >
        <script type="text/javascript" src="${request.contextPath}/plugin/org.joget.apps.form.lib.TextField/js/jquery.numberFormatting.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('.textfield_${element.properties.elementUniqueKey!}').numberFormatting({
                    format : '${element.properties.style!}',
                    numOfDecimal : '${element.properties.numOfDecimal!}',
                    useThousandSeparator : '${element.properties.useThousandSeparator!}',
                    prefix : '${element.properties.prefix!}',
                    postfix : '${element.properties.postfix!}'
                });
            });
        </script>
    </#if>
    <label field-tooltip="${elementParamName!}" class="label" for="${elementParamName!}">${element.properties.label} <span class="form-cell-validator">${decoration}</span><#if error??> <span class="form-error-message">${error}</span></#if></label>
    <#if (element.properties.readonly! == 'true' && element.properties.readonlyLabel! == 'true') >
        <div class="form-cell-value"><span>${valueLabel!?html}</span></div>
        <input id="${elementParamName!}" name="${elementParamName!}" class="textfield_${element.properties.elementUniqueKey!}" type="hidden" value="${value!?html}" />
    <#else>
        <input id="${elementParamName!}" name="${elementParamName!}" class="textfield_${element.properties.elementUniqueKey!}" type="text" placeholder="${element.properties.placeholder!?html}" size="${element.properties.size!}" value="${value!?html}" maxlength="${element.properties.maxlength!}" <#if error??>class="form-error-cell"</#if> <#if element.properties.readonly! == 'true'>readonly</#if> />
    </#if>
</div>

We would also like to note that it would be easier to customize on top of existing themes such as Universal Theme as there were lots of meticulous works have gone down there to make it PWA-complaint as well. It is, of course, possible to develop a new theme from scratch but that would involve a lot of work in planning out the entire theme, down to every single detail.

We can make use of the browser's developer console to inspect the elements and introduce changes necessary to get to what we want.

After which we have carried out the task of customizing, we would need the ability to insert the CSS/JS code into the plugin itself. We can introduce these 2 methods into the class.

EvaTheme.java 
    @Override
    public String getJsCssLib(Map<String, Object> data) {
        String cssJs = super.getJsCssLib(data);
        
        //change where needed to to inject custom css on top of the universal theme
        String bn = ResourceBundleUtil.getMessage("build.number");
        cssJs += "<link href=\"" + data.get("context_path") + "/plugin/"+getClassName()+"/eva.css?build=" + bn + "\" rel=\"stylesheet\" />\n";
        cssJs += "<script src=\"" + data.get("context_path") + "/plugin/"+getClassName()+"/eva.js?build=" + bn + "\" async></script>\n";
        
        //overrides with user's selected form image background if set
        if(getProperty("form_image") != null && !getProperty("form_image").toString().isEmpty()){
            cssJs += "<style type=\"text/css\">";
            cssJs += ".form-container{ background-image : url('" + getProperty("form_image").toString() + "')}";
            cssJs += "</style>";
        }
        return cssJs;
    }


    @Override
    public Set<String> getOfflineStaticResources() {
        String contextPath = AppUtil.getRequestContextPath();
        String bn = ResourceBundleUtil.getMessage("build.number");
        Set<String> urls = super.getOfflineStaticResources();
        urls.add(contextPath + "/plugin/"+getClassName()+"/eva.css?build=" + bn);
        urls.add(contextPath + "/plugin/"+getClassName()+"/eva.js?build=" + bn);
        
        return urls;
    }

We are pointing to 2 files in the methods above - eva.css, and eva.js. Create these 2 files in "eva-theme/main/resources/resources" folder.

eva.js 
$(function(){
    if ($("#form-canvas").length > 0) {
        $("#form-canvas").find(".form-cell, .subform-cell").each(function(){
            var label = $(this).find("> label.label").text();
            $(this).find("> textarea, > input, > select").attr("placeholder", label);
        });
    }
});
eva.css 
main #form-canvas .label {
    display: none;
}

legend, main #form-canvas .form-section-title span, main #form-canvas .subform-section-title span{
    text-transform: uppercase;
    padding: 10px 0;
    font-size: xx-large;
    margin: 10px 0;
    background: none;
    color: #222;
}

body input:not([type]), body input[type=text], body input[type=password], body input[type=email], body input[type=url], body input[type=time], body input[type=date], body input[type=datetime], body input[type=datetime-local], body input[type=tel], body input[type=number], body input[type=search], body textarea, body select:not([class^=ui]), body .editor-cell input:not([type]), body .editor-cell input[type=text], body .editor-cell input[type=password], body .editor-cell input[type=email], body .editor-cell input[type=url], body .editor-cell input[type=time], body .editor-cell input[type=date], body .editor-cell input[type=datetime], body .editor-cell input[type=datetime-local], body .editor-cell input[type=tel], body .editor-cell input[type=number], body .editor-cell input[type=search], body .editor-cell textarea, body .editor-cell select:not([class^=ui]){
    max-width: 100%;
    width: 100%;
}

body #form-canvas .form-section {
    border-radius: 15px;
}

#form-canvas *, #form-canvas textarea {
    font-size: 16px;
}

body .form-cell, body .subform-cell {
    padding-bottom: 10px;
}

.form-container{
    padding-left: 220px;
    background-image: url("eva-bg.jpg");
    background-color: #f9f9f9;
    background-position: left;
    background-repeat: repeat-y;
    background-clip: border-box;
    background-size: 190px;
    border-radius: 10px;
    margin: 10px;
    padding-top: 10px;
}

d. Manage the dependency libraries of your plugin

<!-- Change plugin specific dependencies here -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.0</version>
</dependency>
<!-- End change plugin specific dependencies here -->

e. Make your plugin internationalization (i18n) ready

We are using i18n message key in getLabel and getDescription method. We also used i18n message key in our properties options definition as well. So, we will need to create a message resource bundle properties file for our plugin.Create directory "resources/messages" under "eva-theme/src/main" directory. Then, create a "EvaTheme.properties" file in the folder. In the properties file, let us add all the message keys and labels as below.

theme.eva.config=Configure Eva Theme
theme.eva.formImage=Form Image

f. Register your plugin to the Felix Framework

We will have to register our plugin class in Activator class (Auto generated in the same class package) to tell the Felix Framework that this is a plugin.

    public void start(BundleContext context) {
        registrationList = new ArrayList<ServiceRegistration>();
        //Register plugin here
        registrationList.add(context.registerService(EvaTheme.class.getName(), new EvaTheme(), null));
    } 

g. Build it and test

Let build our plugin. Once the building process is done, we will find that a "eva-theme-7.0.0.jar" file is created under "eva-theme/target" directory.

Then, let us upload the plugin jar to Manage Plugins. After uploading the jar file, double check that the plugin is uploaded and activated correctly.Configure any of your app's userview to point to the newly built theme.

8. Take a step further, share it or sell it

You can download the source code from eva-theme.zip. 




Attachments:

jdbc_options_binder_src.zip (application/zip)
jdbc_options_binder.zip (application/zip)
test_connection.png (image/png)
test3.png (image/png)
test2.png (image/png)
test1.png (image/png)
config3.png (image/png)
config2.png (image/png)
config1.png (image/png)
form.png (image/png)
manage_plugin.png (image/png)
Booking_Room _ Manage_Request.png (image/png)
Au_Register_Forms_by_Colorlib.png (image/png)
Cursor_and_Userview__Booking_Room_-_Userview_Builder.png (image/png)
Cursor_and_Booking_Room _ Manage_Request.png (image/png)
Cursor_and_Booking_Room _ Manage_Request.png (image/png)
Userview__Booking_Room_-_Userview_Builder.png (image/png)
eva-theme.zip (application/zip)