Dropdown select Field Beta(ui_dropdown_select_field)

UiBibz::Ui::Core::Forms::Selects::DropdownSelectField

This component is based on the library Bootstrap select.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • options[hash]<default: {}>
  • html_options[hash]<default: {}>

 # by variable 
 ui_dropdown_select_field name, options, html_options 

 # or by block 
 ui_dropdown_select_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • state[symbol](:disabled, :active)(use component state method)
  • option_tags[array/object]
  • searchable[boolean]
  • include_blank[boolean]
  • prompt[string]
  • max_options[integer]
  • select_text_format[string]
  • menu_size[integer]
  • header[string]
  • actions_box[boolean]
  • show_tick[boolean]
  • show_menu_arrow[boolean]
  • dropup[boolean]
  • connect[hash]
  • refresh[hash]
  • append[string/html]
  • prepend[string/html]
  • multiple[boolean]
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • action[string](use component stimulus-options method)
  • target[string](use component stimulus-options method)

Examples

Some examples explain how to use the options present in the component.

Dropdown Select Field

options_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_dropdown_select_field "example1", option_tags: option_tags, prompt: "Select an option", include_blank: true

<div class="btn-group bootstrap-select">
  <button type="button" class="btn dropdown-toggle btn-secondary" data-toggle="dropdown" data-id="example1" title="option 0">
    <span class="filter-option pull-left">option 0</span>&nbsp;
    <span class="bs-caret">
      <span class="caret"></span>
    </span>
  </button>
  <div class="dropdown-menu open">
    <ul class="dropdown-menu inner" role="menu">
      <li data-original-index="0" class="selected">
        <a tabindex="0" class="" style="" data-tokens="null">
          <span class="text">Select an option</span>
          <span class="fa fa-check check-mark"></span>
        </a>
      </li>
      <li data-original-index="1">
        <a tabindex="0" class="" style="" data-tokens="null">
          <span class="text"></span>
          <span class="fa fa-check check-mark"></span>
        </a>
      </li>
      <li data-original-index="2" class="selected">
        <a tabindex="0" class="" style="" data-tokens="null">
          <span class="text">option 0</span>
          <span class="fa fa-check check-mark"></span>
        </a>
      </li>
      <li data-original-index="3">
        <a tabindex="0" class="" style="" data-tokens="null">
          <span class="text">option 1</span>
          <span class="fa fa-check check-mark"></span>
        </a>
      </li>
      <li data-original-index="4">
        <a tabindex="0" class="" style="" data-tokens="null">
          <span class="text">option 2</span>
          <span class="fa fa-check check-mark"></span>
        </a>
      </li>
      <li data-original-index="5">
        <a tabindex="0" class="" style="" data-tokens="null">
          <span class="text">option 3</span>
          <span class="fa fa-check check-mark"></span>
        </a>
      </li>
      <li data-original-index="6">
        <a tabindex="0" class="" style="" data-tokens="null">
          <span class="text">option 4</span>
          <span class="fa fa-check check-mark"></span>
        </a>
      </li>
      <li data-original-index="7">
        <a tabindex="0" class="" style="" data-tokens="null">
          <span class="text">option 5</span>
          <span class="fa fa-check check-mark"></span>
        </a>
      </li>
    </ul>
  </div>
  <select name="example1" id="example1" class="selectpicker" tabindex="-98">
    <option value>Select an option</option>
    <option value label=""> </option>
    <option value="option 0">option 0</option>
    <option value="option 1">option 1</option>
    <option value="option 2">option 2</option>
    <option value="option 3">option 3</option>
    <option value="option 4">option 4</option>
    <option value="option 5">option 5</option>
  </select>
</div>

Optgroup options

grouped_options = { "North America" => [["United states","US"], "Canada"], "Europe" => ["Denmark","Germany","France"] }
ui_dropdown_select_field "example 1", option_tags: grouped_options_for_select(grouped_options)

<select name="example 1" id="example_1" class="select-field form-control">
  <optgroup label="North America">
    <option value="US">United states</option>
    <option value="Canada">Canada</option></optgroup>
  <optgroup label="Europe">
    <option value="Denmark">Denmark</option>
    <option value="Germany">Germany</option>
    <option value="France">France</option>
  </optgroup>
</select>

Searchable option

options_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_dropdown_select_field "example1", searchable: true, multiple: true, option_tags: option_tags

Max_options option

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_dropdown_select_field "example1", max_options: 3, multiple: true, option_tags: option_tags

Selected_text_format option

values: A comma delimited list of selected values (default)
count: If one item is selected, then the option value is shown. If more than one is selected then the number of selected items is displayed, e.g. 2 of 6 selected
count > x: Where x is the number of items selected when the display format changes from values to count
static: Always show the select title (placeholder), regardless of selection 

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_dropdown_select_field 'example1', multiple: true, selected_text_format: "count", option_tags: option_tags

Surround options

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_dropdown_select_field 'example1', option_tags: select_options_tags, append: ui_glyph('pencil-alt'), prepend: ui_glyph('gem')

Field Connected

You can connect several components together using option connect. With this option, you can determine the target, the trigger event, and the connection mode.

  • You can choose the connection mode: local or remote. If you choose local mode, you will need to populate the data with an array.
  • If you choose the remote mode, you must fill in the url so that the component can retrieve the information in Ajax. The input name will be send in parameter.

Output data, whether local or remote, must be written in this way: [{ value: Integer||String, text: String||Integer, connect_option_id: Integer||String }, {...}] .

To have optgroup, format must be like that: { label1: [{ text: String||Integer, value: String||Integer, connect_option_id: Integer||String }, {...}], label2: [...]} 

connect: {
  event: String, # change|click|change click|... <default: 'change'>
  mode:  String, # local|remote <default: 'remote'>
  target: {
    selector:  String, # .my-target|#my-target
    data:      Array,  # [{ text: 'option', value: 1, connect_option_id: 2}]
    url:       String, # url_data.html'
  }
}

You can connect an input to any other input:

Select field Dropdown select field Multi column field Multi select field
Select field
Dropdown select field
Multi column field
Multi select field
= Done, = In progress

Connected (remote)



options_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
# First Dropdown Field
connect = { mode: "remote", target: { selector: "#example_1_target", url: components_forms_selects_select_field_path }}
ui_dropdown_select_field "example 1", { option_tags: select_options_tags, connect: connect }
# Second Dropdown Field
ui_dropdown_select_field "example 1 target", option_tags: select_options_tags

Connected (local)



option_tags  = options_for_select(5.times.map{ |i| ["option #{i}", i] })
# First Select input
options_data = 5.times.map{ |o| 5.times.map{ |i| { text: "New option #{ o }.#{ i }", value: i, connect_option_id: o }}}.flatten
connect      = { mode: "local", target: { selector: "#example_2_target", data: options_data }}}
ui_dropdown_select_field "example 2", { option_tags: options_html, connect: connect }
# Second Select input
options_html = options_for_select(5.times.map{ |i| "option #{i}" })
ui_dropdown_select_field "example 2 target", option_tags: options_html

<select name='example 1' id='example_1' data-connect="{'type':'remote','target':{'selector':'#example_1_target','url':'/components/forms/selects/select-field'}}" class="ui-bibz-connect select-field form-control">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option></select>
<select name="example 1 target" id="example_1_target" class="select-field form-control">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>

Refresh Connected

Option refresh take same arguments than connect option.

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
refresh     = { status: :primary, target: { url: components_forms_selects_select_field_path }}
ui_dropdown_select_field "example 3", option_tags: option_tags, refresh: refresh

<div class="input-group select-field-refresh">
  <div class="btn-group bootstrap-select input-group-btn">
    <button type="button" class="btn dropdown-toggle btn-secondary" data-toggle="dropdown" data-id="example_3_target" title="New option 2" aria-expanded="false">
      <span class="filter-option pull-left">New option 2</span>&nbsp;<span class="bs-caret">
        <span class="caret">
        </span>
      </span>
    </button>
    <div class="dropdown-menu open" style="max-height: 6169px; overflow: hidden; min-height: 0px;">
      <ul class="dropdown-menu inner" role="menu" style="max-height: 6151px; overflow-y: auto; min-height: 0px;">
        <li data-original-index="0" class="">
          <a tabindex="0" class="" style="" data-tokens="null">
            <span class="text">New option 1</span>
            <span class="fa fa-check check-mark"></span>
          </a>
        </li>
        <li data-original-index="1" class="selected">
          <a tabindex="0" class="" style="" data-tokens="null">
            <span class="text">New option 2</span>
            <span class="fa fa-check check-mark"></span>
          </a>
        </li>
      </ul>
    </div>
    <select name="example 3 target" id="example_3_target" class="selectpicker" tabindex="-98">
      <option value="1">New option 1</option>
      <option value="2">New option 2</option>
    </select>
  </div>
  <span class="input-group-btn">
    <button data-connect="{&quot;events&quot;:&quot;click&quot;,&quot;mode&quot;:&quot;remote&quot;,&quot;target&quot;:{&quot;selector&quot;:&quot;#example_3_target&quot;,&quot;url&quot;:&quot;/components/forms/selects/select-field&quot;,&quot;data&quot;:[]}}" class="btn-primary ui-bibz-connect input-refresh-button btn">
    <i class="glyph fa fa-refresh"></i>
    </button>
  </span>
</div>

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_dropdown_select_field. You can use Simple Form input options and Ui Bibz ui_dropdown_select_field options.

Then in your view, you can insert your input dropdown select field. This simple form component is based on simple_form collection
Collection inputs accept two other options beside collections:

  • label_method => the label method to be applied to the collection to retrieve the label (use this instead of the text_method option in collection_select)
  • value_method => the value method to be applied to the collection to retrieve the value
label_method and value_method are optional 

ui_form_for(@user) do |f|
  ...
  f.association :country, as: :ui_dropdown_select_field, collection: @countries, label_method: :name, value_method: :id
  ...
end

You can use `grouped: true` option to group collection
Grouped collection inputs accept the same :label_method and :value_method options, which will be used to retrieve label/value attributes for the option tags. Besides that, you can give:

  • group_method => the method to be called on the given collection to generate the options for each group (required)
  • group_label_method => the label method to be applied on the given collection to retrieve the label for the optgroup (Simple Form will attempt to guess the best one the same way it does with :label_method)

ui_form_for(@search) do |f|
  ...
  f.input :country, as: :ui_dropdown_select_field, grouped: true, collection: @collection,  group_method: :last, label_method: :name, value_method: :value
  ...
end

You can add option refresh in your association.

ui_form_for(@user) do |f|
  refresh = { status: :danger, target: { selector: 'form:last select[name="user[name]"]', url: components_forms_selects_select_field_path }}
  connect = { target: { selector: '#company', url: components_forms_selects_select_field_path }}
  ...
  f.association :country, as: :ui_dropdown_select_field, refresh: refresh, connect: connect, collection: @countries, label_method: :name, value_method: :id
  ...
end

Contents