Boolean queries

Boolean queries allow users to use regular expressions to create complex filtering queries; they must always be accompanied by the information box that renders the produced query.

Code output

HTML Markup

Copy<div class="alert alert-info">
  <p><strong>Produced conditions:</strong> Field 1 <span class="color-categorical-1"><strong>equal to</strong></span> value-1 <span class="color-categorical-5"><strong>AND</strong></span> field 2 <span class="color-categorical-1"><strong>greater than</strong></span> value-2</p>
  </div>
  <div class="spacer-sm"></div>
  <div class="nested-group">
  <div class="nested-group-header">
    <select class="form-control-xs">
      <option>AND</option>
      <option>OR</option>
    </select>
  </div>
  <div class="nested-group-row">
    <div class="row row-sm">
      <div class="col-xxs-12 col-xs-4">
        <select class="form-control-sm">
          <option>Field 1</option>
          <option>Field 2</option>
          <option>Field 3</option>
        </select>
      </div>
      <div class="col-xxs-12 col-xs-4">
        <select class="form-control-sm">
          <option>greater than</option>
          <option>less than</option>
          <option>equal to</option>
          <option>not equal to</option>
        </select>
      </div>
      <div class="col-xxs-12 col-xs-4">
        <input type="text" class="form-control-sm" placeholder="value">
      </div>
    </div>
    <a class="btn btn-sm btn-nested-row-action"></a>
  </div>
  <div class="nested-group-footer">
    <div class="btn-group">
      <a href=# class="btn btn-xs btn-sec">Add group</a>
      <a href=# class="btn btn-xs btn-sec">Add condition</a>
    </div>
  </div>
  <div class="nested-group">
    <a class="btn btn-xs btn-nested-group-action">Remove</a>
    <div class="nested-group-header">
      <select class="form-control-xs">
        <option>AND</option>
        <option>OR</option>
      </select>
    </div>
    <div class="nested-group-row">
      <div class="row row-sm">
        <div class="col-xxs-12 col-xs-4">
          <select class="form-control-sm">
            <option>Field 1</option>
            <option>Field 2</option>
            <option>Field 3</option>
          </select>
        </div>
        <div class="col-xxs-12 col-xs-4">
          <select class="form-control-sm">
            <option>greater than</option>
            <option>less than</option>
            <option>equal to</option>
            <option>not equal to</option>
          </select>
        </div>
        <div class="col-xxs-12 col-xs-4">
          <input type="text" class="form-control-sm" placeholder="value">
        </div>
      </div>
      <a class="btn btn-sm btn-nested-row-action"></a>
    </div>
    <div class="nested-group-footer">
      <div class="btn-group">
        <a href=# class="btn btn-xs btn-sec">Add group</a>
        <a href=# class="btn btn-xs btn-sec">Add condition</a>
      </div>
    </div>
  </div>
</div>