How to develop a Userview Theme Plugin

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

1. What is the problem?

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

2. How to solve the problem?

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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.

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

3. What is the input needed for your plugin?

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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?

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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?

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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

6. Prepare your development environment

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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.

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

- Home
  - joget
    - plugins
    - jw-community

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.

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

cd joget/plugins/
~/joget/jw-community/wflow-plugin-archetype/create-plugin.sh org.joget.tutorial eva-theme 8.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.

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

Define value for property 'version':  1.0-SNAPSHOT: : 8.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 the "plugins" folder.

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

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

7. Just code it!

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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 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.

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

<!-- 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

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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.

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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.

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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

f. Register your plugin to the Felix Framework

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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.

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

    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

License Error

The license of the app Translations for Confluence (formerly Language Macros) has expired. Please renew the license.

License Details

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.