/frappe-better-select-control

A small plugin for Frappe that adds the support of options group <optgroup> to the select control.

Primary LanguagePythonMIT LicenseMIT

Frappe Better Select Control

A small plugin for Frappe that adds the support of options group to the select control.

Table of Contents

Requirements

  • Frappe >= v13.0.0

Setup

⚠️ Important ⚠️

Do not forget to replace [sitename] with the name of your site in all commands.

Install

  1. Go to bench directory
cd ~/frappe-bench
  1. Get plugin from Github

(Required only once)

bench get-app https://github.com/kid1194/frappe-better-select-control
  1. Build plugin

(Required only once)

bench build --apps frappe_better_select_control
  1. Install plugin on a specific site
bench --site [sitename] install-app frappe_better_select_control
  1. Check the usage section below

Update

  1. Go to app directory
cd ~/frappe-bench/apps/frappe_better_select_control
  1. Get updates from Github
git pull
  1. Go to bench directory
cd ~/frappe-bench
  1. Build plugin
bench build --apps frappe_better_select_control
  1. Update a specific site
bench --site [sitename] migrate
  1. Restart bench
bench restart

Uninstall

  1. Go to bench directory
cd ~/frappe-bench
  1. Uninstall plugin from a specific site
bench --site [sitename] uninstall-app frappe_better_select_control
  1. Remove plugin from bench
bench remove-app frappe_better_select_control
  1. Restart bench
bench restart

Usage

  1. Go to Customization > Customize Form
  2. Enter the form type/name (ex: 'User')
  3. Scroll down to the form fields area and edit the select fields you want
  4. In the options property of the fields, add a hashtag # before the option text to make it a group label
  5. To close a group just add a single hashtag # in a new line

Examples

Single Options Group

  • Options:
One
Two
#Three
Four
Five
  • Result HTML:
<option value="One">One</option>
<option value="Two">Two</option>
<optgroup label="Three">
    <option value="Four">Four</option>
    <option value="Five">Five</option>
</optgroup>

Multiple Options Groups

  • Options:
#One
Two
Three
#Four
Five
Six
  • Result HTML:
<optgroup label="One">
    <option value="Two">Two</option>
    <option value="Three">Three</option>
</optgroup>
<optgroup label="Four">
    <option value="Five">Five</option>
    <option value="Six">Six</option>
</optgroup>

Normal Options After Options group

  • Options:
One
Two
#Three
Four
Five
#
Six
  • Result HTML:
<option value="One">One</option>
<option value="Two">Two</option>
<optgroup label="Three">
    <option value="Four">Four</option>
    <option value="Five">Five</option>
</optgroup>
<option value="Six">Six</option>

License

MIT