Introduction

Enhanced Color Picker is a color picker form element that offers additional features and functionalities to improve the user experience and provide more advanced color selection capabilities.

Plugin Info

Plugin Available in the Bundle:

  1. Enhanced Color Picker

This plugin bundle is compatible with Joget DX 8.

Expected Outcome

Able to select desired color while offering customization options according to individual theme preferences.

Figure 1: Expected outcome of Enhanced Color Picker

Getting Started

Setting up the Color Picker

1. Download the Enhanced Color Picker Plugin

Get the plugin jar from Enhanced Color Picker Plugin. For more information of the plugin can read https://github.com/jogetoss/enhanced-color-picker-form-element.

2. Import the plugin

To use the Enhanced Color Picker we need to import the downloaded plugin into Joget by going to Settings → Manage Plugins → Upload Plugin.

Figure 2: Import Plugin

3. Plugin setup

Go to Form Builder → Marketplace category → Enhanced Color Picker . Drag the form element into the form to use it.

Figure 3: Using the Enhanced Color Picker Form Element

Plugin Configuration

1. Enhanced Color Picker Configuration

The Enhanced Color Picker gives user the ability to customize the Color Picker UI.

Figure 4: Color Picker Configuration


NameDescription
Color Picker Theme

Type of the theme:

  • Default

  • Large

  • Polaroid

  • Pill

Theme Mode

Type of Theme Modes:

  • Light

  • Dark

Enhanced Color Picker in runtime

After customizing the Color Pickers, each of it will display different kinds of theme in runtime based on the customizations.

During runtime the Enhanced Color Picker will give users the ability to choose the color format between Hex, RGB and HSL.

Figure 5: Default theme with RGB color format


Figure 6: Dark Large theme with HSL color format


Figure 7: Polaroid theme with Hex color format


Figure 7: Polaroid theme with Hex color format


Figure 8: Dark Pill theme with RGB color format


Color will be saved based on the color format chosen by user.

Figure 9: Datalist of the saved color

Source Code and Plugin Download

  1. Please visit https://github.com/jogetoss/enhanced-color-picker-form-element for the plugin's source code.
  2. You can find the latest release at https://github.com/jogetoss/enhanced-color-picker-form-element/releases.

Sample App

APP_kb_dx8_enhancedColorPicker.jwa



  • No labels