Frontend
When Lib

When condition apply for filter menu, block, to check disabled, shown state of an component.

Syntax

//
const when = ["truthy", "item.can_edit"];

** Nested Condtion **

const nestedWhen = [
  "and",
  ["truthy", "item.can_edit"],
  ["falsy", "item.can_delete"],
];
 
const nestedWhenOr = [
  "and",
  ["truthy", "item.can_edit"],
  ["falsy", "item.can_delete"],
];

Support Rules

  • truthy
  • falsy
  • equals
  • notEquals
  • strictEquals
  • notStrictEquals
  • lessThan
  • lessOrEquals
  • greater
  • greaterOrEquals
  • lengthEquals
  • lengthGreater
  • lengthLess
  • lengthGreaterOrEquals
  • lengthLessOrEquals
  • oneOf
  • exists
  • notExists

Examples

// true
when({ a: 1, b: 2, c: 3 }, [
  "and",
  ["equals", "a", 1],
  ["equals", "b", "2"],
  ["equals", "c", "3"],
]);
 
// true
when({ a: 1, b: 2, c: [1, 2, 3] }, ["lengthGreaterOrEquals", "c", 3]);
 
// false
when({ a: 1, b: 2, c: [1, 2, 3] }, ["lengthGreaterOrEquals", "c", 2]);

** Menu Items **

// file web.menu

return [
    [
        'showWhen' => [
            'and',
            ['truthy', 'item.is_pending'],
            ['truthy', 'item.extra.can_approve'],
        ],
        'menu' => 'blog.blog.detailActionMenu',
        'name' => 'approve',
        'label' => 'blog::phrase.approve',
        'ordering' => 4,
        'value' => 'approveItem',
        'icon' => 'ico-check-circle-o',
    ],
]
ValidationTranslation