Criteria & Rule Builder Migration
Reason for Deprecations
The Criteria component only provided formatting, developers had to write their own logic to use it, so it lacked consistency. So we developed the Rule Builder component.
As time goes by we experience that it is impossible to scale the way developers would like. Because of these blockers we deprecated it as well and made the Rule List component,
which is like a skeleton for developers to build their own criteria/rule builder with their own logic.
New component to use
Rule List Benefits
- It has everything what was benefit for rule builder. E.g.: it handles empty state, supports keyboard and screen reader accessibility.
- It's use slots. This means we are providing places where you can put what you need.
- It has the css and use shadow dom for the sake of consistency.
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>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><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><e-rulelist-group>
<div slot="header">
<e-icon icon="logic-and" color="neutral"></e-icon>
<e-select>
<e-select-option selected="selected">Match all (AND)</e-select-option>
<e-select-option>Match any (OR)</e-select-option>
</e-select>
</div>
<div slot="items">
<e-rulelist-item>
<div slot="summary">Rule A</div>
<div slot="summary-action">
<button class="e-btn e-btn-onlyicon e-btn-borderless">
<e-icon icon="trash"></e-icon>
</button>
</div>
<div slot="header">
<b>Edit Rule:</b> Rule A
</div>
<div slot="content" class="e-field">
<label class="e-field__label" for="input1">Input Label</label>
<input class="e-input" id="input1" type="text" placeholder="Type text here"/>
</div>
<button slot="footer-action" class="e-btn">Cancel</button>
<button slot="footer-action" class="e-btn e-btn-highlight">Save</button>
</e-rulelist-item>
</div>
</e-rulelist-group>