Page History

...

1. What is the problem?

Thai
อะไรคือปัญหา?

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

Thai

2. How to solve the problem?

...

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

Image Modified

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

Image Modified

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

...

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

6. Prepare your development environment

...

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

...

Thai

เราจำเป็นต้องให้ซอร์สโค้ด Joget Workflow ของเราพร้อมและสร้างโดยปฏิบัติตาม this guideline

บทช่วยสอนต่อไปนี้จัดทำขึ้นด้วย Macbook Pro และ Joget Source Code เวอร์ชั่น 7.0-SNAPSHOT โปรดอ้างอิง Guideline for developing Developing a pluginPlugin สำหรับคำสั่งแพลตฟอร์มอื่น ๆ

สมมติว่าไดเรกทอรีโฟลเดอร์ของเรามีดังนี้

...

7. Just code it!

Thai
เพียงแค่รหัส!

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

Code Block

language	java
title	Implementation of all basic abstract methods
collapse	true

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");
    }
    

}

...

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

Code Block

language	js
linenumbers	true
collapse	true

[{
    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 : 'themeSchemeform_image',
        label : '@@theme.universaleva.themeScheme@@formImage@@',
        type : 'selectboximage',
        valueappPath: 'light[APP_PATH]',
        optionsallowInput : [{'true',
            valueisPublic : 'darktrue',
        imageSize : 'width:100px; height: label200px; background-repeat: '@@theme.universal.themeScheme.dark@@'
    repeat-y;'
    },{
    {
        valuename : 'lightthemeScheme',
            label : '@@theme.universal.themeScheme.light@@themeScheme@@',
        }] type : 'selectbox',
    },
     {value: 'light',
        nameoptions : 'primaryColor',[{
            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'
        }]
    }]
}]

...

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.

Code Block

language	java
title	EvaTheme.java
linenumbers	true
collapse	true

    @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";
        
        return cssJs;
    //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;
    }

...

Code Block

title	eva.css
linenumbers	true
collapse	true

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;
}

...

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

f. Register your plugin to the Felix Framework

...

Configure any of your app's userview to point to the newly built theme.

Image Modified

Image Added

Image Modified

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

...

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

To download the ready-to-use plugin jar, please find it in http://marketplace.joget.org/.

...

คุณสามารถดาวน์โหลดซอร์สโค้ดจาก jdbc_options_binder_src.zip

...

Thai
คุณสามารถดาวน์โหลดซอร์สโค้ดจาก eva-theme.zip.

Space shortcuts

Page tree

Versions Compared

Old Version 3

New Version Current

Key

1. What is the problem?

อะไรคือปัญหา?

2. How to solve the problem?

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

6. Prepare your development environment

7. Just code it!

เพียงแค่รหัส!

a. Extending the abstract class of a plugin type

b. Implement all the abstract methods

f. Register your plugin to the Felix Framework

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