Link copied!

Rule Builder 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-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 id="rule-builder-example">

  <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>
Copy Javascript
Copied to clipboard! 
const ruleBuilder = document.querySelector('#rule-builder-example');
ruleBuilder.items =  {
    label: 'First group',
    items: [
      { blueprint: { name: 'rule-b' }, fields: { textInput: 'select-value-1' } }
    ],
    relation: 'and'
};
<e-rule-builder exclude-enabled>

  <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 id="rule-builder-example" exclude-enabled>

  <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>
Copy Javascript
Copied to clipboard! 
const ruleBuilder = document.querySelector('#rule-builder-example');
ruleBuilder.value =  {
    items: {
        label: 'First group',
        items: [
          { blueprint: { name: 'rule-b' }, fields: { textInput: 'select-value-1' } }
        ],
        relation: 'and'
    },
    excludedItems: {
        label: 'Second group',
        items: [
          { blueprint: { name: 'rule-a' }, fields: { textInput: 'My second value' } }
        ],
        relation: 'and'
    }
};
<e-rule-builder id="rule-builder-example">
  <e-formatter id="summary-formatter"></e-formatter>

  <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-summary>
      <e-rule-blueprint-summary-value type="blueprint" class="text-color-red">
      </e-rule-blueprint-summary-value>
      -
      <e-rule-blueprint-summary-value type="field" field="textInput">
      </e-rule-blueprint-summary-value>
    </e-rule-blueprint-summary>
  </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="selectInput" 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-summary>
          <e-rule-blueprint-summary-value type="blueprint" class="text-color-blue">
          </e-rule-blueprint-summary-value>
          Selected value:
          <e-rule-blueprint-summary-value type="field" field="selectInput" property="content">
          </e-rule-blueprint-summary-value>
        </e-rule-blueprint-summary>
  </e-rule-blueprint>

  <e-rule-blueprint name="rule-c" label="Rule C">
    <e-rule-blueprint-template>
      <div class="e-field">
        <e-checkbox data-field="checkboxInput" data-property="checked" label="Sample checkbox"></e-checkbox>
      </div>
    </e-rule-blueprint-template>
    <e-rule-blueprint-summary>
      <e-rule-blueprint-summary-value type="blueprint" class="text-color-green">
      </e-rule-blueprint-summary-value>
      -
      <e-rule-blueprint-summary-value type="field" field="checkboxInput" property="checked" formatter="checkbox">
      </e-rule-blueprint-summary-value>
    </e-rule-blueprint-summary>
  </e-rule-blueprint>
</e-rule-builder>
Copy Javascript
Copied to clipboard! 
const summaryFormatter = document.querySelector('#summary-formatter');
summaryFormatter.name = 'checkbox';
summaryFormatter.formatter = value => !!value ? 'Checked' : 'Unchecked';

const ruleBuilder = document.querySelector('#rule-builder-example');
ruleBuilder.items =  {
    label: 'First group',
    items: [
      { blueprint: { name: 'rule-b' }, fields: { selectInput: 'option-2-value' } },
      { blueprint: { name: 'rule-a' }, fields: { textInput: 'Custom text value' } },
      { blueprint: { name: 'rule-c' }, fields: { checkboxInput: true } }
    ],
    relation: 'and'
};
<e-rule-builder id="rule-builder-example">

  <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-action tooltip="Test" icon="e-clock-o" id="action"></e-rule-blueprint-action>
    <e-rule-blueprint-action tooltip="Test 2" icon="e-company" disabled></e-rule-blueprint-action>
  </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>
Copy Javascript
Copied to clipboard! 
const ruleBuilder = document.querySelector('#rule-builder-example');
ruleBuilder.items =  {
    label: 'First group',
    items: [
      { blueprint: { name: 'rule-a' }, fields: { textInput: 'Custom text value' } }
    ],
    relation: 'and'
};
<e-rule-builder id="rule-builder-example" auto-label exclude-enabled>

  <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>
Copy Javascript
Copied to clipboard! 
const ruleBuilder = document.querySelector('#rule-builder-example');
ruleBuilder.value =  {
    items: {
        label: 'First group',
        items: [
          { blueprint: { name: 'rule-b' }, fields: { textInput: 'select-value-1' } }
        ],
        relation: 'and'
    },
    excludedItems: {
        label: 'Second group',
        items: [
          { blueprint: { name: 'rule-a' }, fields: { textInput: 'My second value' } }
        ],
        relation: 'and'
    }
};
<e-rule-builder id="rule-builder-example">
  <e-rule-relation description="Test 1 description" label="test1" value="test1" icon="e-unlock"></e-rule-relation>
  <e-rule-relation description="Test 2 description" label="test2" value="test2" icon="link"></e-rule-relation>
  <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>
Copy Javascript
Copied to clipboard! 
const ruleBuilder = document.querySelector('#rule-builder-example');
ruleBuilder.items =  {
    label: 'First group',
    items: [
      { blueprint: { name: 'rule-b' }, fields: { textInput: 'select-value-1' } },
      { blueprint: { name: 'rule-a' }, fields: { textInput: 'Custom text value' } },
      { label: 'Second group',
        items: [
          { blueprint: { name: 'rule-b' }, fields: { textInput: 'select-value-1' } },
          { blueprint: { name: 'rule-a' }, fields: { textInput: 'Custom text value' } }
        ],
        relation: 'test2'
      }
    ],
    relation: 'test1'
};
<e-rule-builder id="rule-builder-example" readonly>

  <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>
Copy Javascript
Copied to clipboard! 
const ruleBuilder = document.querySelector('#rule-builder-example');
ruleBuilder.items =  {
    label: 'First group',
    items: [
      { blueprint: { name: 'rule-b' }, fields: { textInput: 'select-value-1' } }
    ],
    relation: 'and'
};
<e-rule-builder id="rule-builder-example" disabled>

  <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>
Copy Javascript
Copied to clipboard! 
const ruleBuilder = document.querySelector('#rule-builder-example');
ruleBuilder.items =  {
    label: 'First group',
    items: [
      { blueprint: { name: 'rule-b' }, fields: { textInput: 'select-value-1' } }
    ],
    relation: 'and'
};
<e-rule-builder id="rule-builder-validator-example">
  <e-validation name="testValidationA" id="testValidationIdA"></e-validation>
  <e-validation name="testValidationB" id="testValidationIdB"></e-validation>

  <e-rule-blueprint id='rule-a' name="rule-a" label="Rule A" validation="testValidationA">
    <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 id="rule-b" name="rule-b" label="Rule B" validation="testValidationB">
    <e-rule-blueprint-template>
      <div class="e-field">
        <label class="e-field__label" for="select-input">Select Label</label>
        <e-select id="select-input" data-field="selectInput" 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>
Copy Javascript
Copied to clipboard! 
const ruleBuilder = document.querySelector('#rule-builder-validator-example');
const testValidationA = ruleBuilder.querySelector('#testValidationIdA');
testValidationA.validation = (rule) => rule.fields['textInput'].indexOf(' ') === -1;
const testValidationB = ruleBuilder.querySelector('#testValidationIdB');
testValidationB.validation = (rule) => rule.fields['selectInput'] !== 'option-2-value';

ruleBuilder.items =  {
    label: 'First group',
    items: [
      { blueprint: { name: 'rule-a' }, fields: { textInput: 'test. 123' } },
      { blueprint: { name: 'rule-b' }, fields: { selectInput: 'option-2-value' } },
    ],
    relation: 'and'
};