View Source

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

1. What is the problem?

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

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

2. How to solve the problem?

วิธีแก้ปัญหา

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

3. What is the input needed for your plugin?

การป้อนข้อมูลที่จำเป็นสำหรับปลั๊กอินของคุณคืออะไร?

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

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

Knowledge Base for DX 7 > How to develop a Userview Theme Plugin > Booking_Room _ Manage_Request.png

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

Knowledge Base for DX 7 > How to develop a Userview Theme Plugin > Au_Register_Forms_by_Colorlib.png

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

ผลลัพธ์และผลลัพธ์ที่คาดหวังของปลั๊กอินของคุณคืออะไร?

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

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

มีทรัพยากร / API ที่สามารถนำกลับมาใช้ใหม่ได้หรือไม่?

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

6. Prepare your development environment

เตรียมสภาพแวดล้อมการพัฒนาของคุณ

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

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

Let's say our folder directory is as follows.

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

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

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

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

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

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

ไดเรกทอรี "ปลั๊กอิน" คือโฟลเดอร์ที่เราจะสร้างและจัดเก็บปลั๊กอินทั้งหมดของเราและไดเรกทอรี "jw-community" เป็นที่เก็บ Joget Workflow Source code เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างโครงการ maven ในไดเรกทอรี "ปลั๊กอิน"

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

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

จากนั้นเชลล์สคริปต์จะขอให้เราใส่หมายเลขเวอร์ชันสำหรับปลั๊กอินและขอการยืนยันก่อนที่จะสร้างโครงการ Maven

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

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

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

เราควรได้รับข้อความ "BUILD SUCCESS" ที่ปรากฏในเครื่องของเราและโฟลเดอร์ "eva-theme" ที่สร้างในโฟลเดอร์ "plugins" เปิดโครงการ maven ด้วย IDE ที่คุณโปรดปราน ฉันจะใช้ NetBeans

7. Just code it!

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

a. Extending the abstract class of a plugin type

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

b. Implement all the abstract methods

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.

จากนั้นเราต้องสร้าง UI สำหรับผู้ใช้ผู้ดูแลระบบเพื่อให้อินพุตสำหรับปลั๊กอินของเรา ในวิธีการ getPropertyOptions เราได้ระบุไว้แล้วว่าไฟล์ข้อกำหนด Plugin Properties Options ของเราตั้งอยู่ที่ "/properties/jdbcOptionsBinder.json" ให้เราสร้างไดเรกทอรี "resources / properties" ภายใต้ไดเร็กทอรี "eva-theme / src / main" หลังจากสร้างไดเร็กทอรีให้สร้างไฟล์ชื่อ "EvaTheme.json" ในโฟลเดอร์ "properties" ในไฟล์ตัวเลือกคำจำกัดความของคุณสมบัติเราจะต้องระบุตัวเลือกดังต่อไปนี้ โปรดทราบว่าเราจะใช้ไวยากรณ์ "@@ message.key @@" เพื่อรองรับ i18n ในตัวเลือกคุณสมบัติของเรา

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.

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

Knowledge Base for DX 7 > How to develop a Userview Theme Plugin > Cursor_and_Booking_Room _ Manage_Request.png

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.

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

$(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);
        });
    }
});

main #form-canvas .label {
    display: none;
}

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

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

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

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

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

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

d. Manage the dependency libraries of your plugin

จัดการไลบรารีปลั๊กอินของคุณ

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

e. Make your plugin internationalization (i18n) ready

เตรียมปลั๊กอินสากลให้พร้อม (i18n)

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.

เรากำลังใช้คีย์ข้อความ i18n ในวิธี getLabel และ getDescription นอกจากนี้เรายังใช้คีย์ข้อความ i18n ในการกำหนดตัวเลือกคุณสมบัติของเราเช่นกัน ดังนั้นเราจะต้องสร้างไฟล์สำหรับปลั๊กอินของเรา

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.

สร้างไดเรกทอรี "ทรัพยากร / ข้อความ" ภายใต้ไดเรกทอรี "eva-theme / src / main" จากนั้นสร้างไฟล์ "JdbcOptionsBinder.properties" ในโฟลเดอร์ ในไฟล์คุณสมบัติให้เราเพิ่มคีย์ข้อความและป้ายกำกับทั้งหมดดังต่อไปนี้

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

f. Register your plugin to the Felix Framework

ลงทะเบียนปลั๊กอินของคุณไปที่ Felix Framework

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

เราจะต้องลงทะเบียนคลาสปลั๊กอินของเราในคลาส Activator (สร้างอัตโนมัติในแพ็คเกจคลาสเดียวกัน) เพื่อบอก Felix Framework ว่านี่เป็นปลั๊กอิน

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

g. Build it and test

สร้างและทดสอบ

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

Then, let us upload the plugin jar to Manage Plugins. After uploading the jar file, double check that the plugin is uploaded and activated correctly.

ให้สร้างปลั๊กอินของเรา เมื่อกระบวนการสร้างเสร็จสิ้นเราจะพบว่าไฟล์ "jdbc_options_binder-5.0.0.jar" ถูกสร้างขึ้นภายใต้ไดเรกทอรี "eva-theme / target" จากนั้นให้เราอัปโหลด jar ปลั๊กอินไปที่ Manage Plugins หลังจากอัปโหลดไฟล์ jar ให้ตรวจสอบอีกครั้งว่ามีการอัปโหลดและเปิดใช้งานปลั๊กอินอย่างถูกต้อง

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

Knowledge Base for DX 7 > How to develop a Userview Theme Plugin > Cursor_and_Userview__Booking_Room_-_Userview_Builder.png

Knowledge Base for DX 7 > How to develop a Userview Theme Plugin > Userview__Booking_Room_-_Userview_Builder.png

Knowledge Base for DX 7 > How to develop a Userview Theme Plugin > Cursor_and_Booking_Room _ Manage_Request.png

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

ก้าวไปอีกขั้นแบ่งปันหรือขายมัน

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

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