Link copied!

Criteria Migration

Reason for Deprecation

The Criteria component only provided formatting, developers must write their own logic when using it, thus it lacks consistency.

New component to use

Rule Builder Benefits

  • It handles empty state.
  • It has top level exclusion (and-not relation).
  • It supports keyboard accessibility.
  • It handles subgroups in a group, unlike the Criteria component.
  • Groups and rules handle edit, collapse and delete by default.
  • It handles automatic labelling on a group and rule level as well.
  • In a group you can see the relation between the items (both subgroups and rules).
  • Labels and icons are customizable.
  • It provides events for every action (open, close and change).
  • Rules are built from four components. Blueprints handle data creation, visualization and interraction.

Side-by-Side Examples

<e-criteria id="testcriteria" label="A">
  <e-criteria-template key="condition_template">
    <label class="e-field__label">
      Input label
    </label>
    <input class="e-input" type="text" name="testname" e-criteria-input>
  </e-criteria-template>
  <e-criteria-template key="checkbox_template">
    <input class="e-checkbox" id="criteriacheckbox" type="checkbox" name="checkboxtest" e-criteria-input>
    <label for="criteriacheckbox">
      checkbox label
    </label>
  </e-criteria-template>
  <e-criteria-template key="condition_template2">
    <label class="e-field__label" for="selectvar">
      Select label
    </label>
    <e-select>
      <select class="e-select" id="selectvar" name="testgender" e-criteria-input>
        <option value="Female">
          Female
        </option>
        <option value="Male">
          Male
        </option>
        <option value="Other">
          Other
        </option>
      </select>
    </e-select>
  </e-criteria-template>
  <e-criteria-template key="condition_template3">
    <input class="e-input" type="text" name="testname2" e-criteria-input>
    <label class="e-field__label" for="selectvar">
      Daterange label
    </label>
    <e-datetime name="testdaterange" type="daterange"></e-datetime>
  </e-criteria-template>
</e-criteria>
Copy Javascript
Copied to clipboard! 
const criteriaElement = document.querySelector('#testcriteria');
criteriaElement.conditionTypes = [{ "key": "first_name", "label": "First Name", "templateKey": "condition_template" }, { "key": "checkbox_condition", "label": "Checkbox condition", "templateKey": "checkbox_template" }, { "key": "gender", "label": "Gender", "templateKey": "condition_template2" }, { "key": "daterange", "label": "Daterange", "templateKey": "condition_template3" }];

criteriaElement.value = {
  relation: 'and',
  conditions: [
    { conditionTypeKey: 'first_name', values: [{ name: 'testname', value: 'John'}] },
  ]
};

criteriaElement.addEventListener('change', event => {
  if (event.detail.type === 'relation') {
    return;
  }

  const template = event.detail.template;

  if (template.key !== 'condition_template3') { return; }

  const daterange = template.element.querySelector('e-datetime[name="testdaterange"]');

  criteriaElement.updateConditionValues(event.detail.id, [{ name: 'start', value: daterange.value.start }, { name: 'end', value: daterange.value.end }]);
});

criteriaElement.addEventListener('edit', event => {
  const template = event.detail.template;

  if (template.key !== 'condition_template3') { return; }

  const daterange = template.element.querySelector('e-datetime[name="testdaterange"]');

  const values = event.detail.values.reduce((previous, current) => {
    previous[current.name] = current.value;
    return previous;
  }, {});

  if (!values) { return; }

  daterange.start = values.start;
  daterange.end = values.end;
});
<e-rule-builder>

  <e-rule-blueprint name="rule-a" label="Rule A">
    <e-rule-blueprint-template>
      <div class="e-field">
        <label class="e-field__label" for="text-input">Text Input Label</label>
        <input data-field="textInput" class="e-input" id="text-input" type="text" placeholder="Type text here">
      </div>
    </e-rule-blueprint-template>
  </e-rule-blueprint>

  <e-rule-blueprint name="rule-b" label="Rule B">
    <e-rule-blueprint-template>
      <div class="e-field">
        <label class="e-field__label" for="text-input">Select Label</label>
        <e-select data-field="textInput" placeholder="Select an option">
          <e-select-option value="option-1-value">Option 1</e-select-option>
          <e-select-option value="option-2-value">Option 2</e-select-option>
          <e-select-option value="option-3-value">Option 3</e-select-option>
        </e-select>
      </div>
    </e-rule-blueprint-template>
  </e-rule-blueprint>

</e-rule-builder>