Link copied!

Criteria Examples

This component of the Design System is deprecated, which means it'll be replaced or removed soon. Until that, the Design System team will support existing implementations, but please avoid implementing this component in new projects.
<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;
});