Skip to content
Buttonize.io Logo Buttonize.io Logo Buttonize Docs

If Statements

If-then-else statements are crucial feature for any app longer than a couple of lines. Buttonize acknowledges this and provides the B symbol, which contains all you need in order to construct if statements in your Buttonize apps.

How to make if statements in Buttonize

lib/MyStack.ts
17 collapsed lines
import { Action, Buttonize, ButtonizeApp, Input, B } from 'buttonize/cdk'


Buttonize.init(this, {
  apiKey: 'btnz_mybuttonizekey1234567'
})


new ButtonizeApp(this, 'MyButtonizeApp')
  .page('MyButtonizePage', {
    body: [
      Input.select({
        id: 'operation',
        options: [
          { label: 'Create', value: 'create' },
          { label: 'Delete', value: 'delete' }
        ],
        label: 'Select operation to perform'
      }),
      Input.button({
        onClick: Action.buttonize.app.changePage('MyButtonizePage'),
        label: B.if(
          B.eq('{{operation.value}}', 'create'),
          'Create',
          B.if(
            B.eq('{{operation.value}}', 'delete'),
            'Delete',
            'Select...'
          )
        ),
        intent: B.if(
          B.eq('{{operation.value}}', 'create'),
          'positive',
          B.if(
            B.eq('{{operation.value}}', 'delete'),
            'negative',
            'default'
          )
        )
      })
    ]
  })
app.buttonize.io

References

B.if

If statement.

B.if(LogicalOperator | MathOperator, positiveResult, negativeResult) => RuntimeIfExpression

Example

B.if(B.eq('A', 'B'), 'A equals B', 'A does not equal B')

B.eq

Equality operator.

B.eq(leftOperand, rightOperand) => MathOperator

Example

B.if(
  B.eq('{{variable}}', 'B'),
  'variable equals B',
  'variable does not equal B'
)
Equivalent of this expression in TypeScript
if (variable == 'B') {
  return 'variable equals B'
} else {
  return 'variable does not equal B'
}

B.gt

Greater than operator.

B.gt(leftOperand, rightOperand) => MathOperator

Example

B.if(
  B.gt('{{variable}}', '3'),
  'variable is greater than 3',
  'variable is lower or equal than 3'
)
Equivalent of this expression in TypeScript
if (variable > 3) {
  return 'variable is greater than 3'
} else {
  return 'variable is lower or equal than 3'
}

B.gte

Greater than or equal operator.

B.gte(leftOperand, rightOperand) => MathOperator

Example

B.if(
  B.gte('{{variable}}', '3'),
  'variable is greater or equal than 3',
  'variable is lower than 3'
)
Equivalent of this expression in TypeScript
if (variable >= 3) {
  return 'variable is greater or equal than 3'
} else {
  return 'variable is lower than 3'
}

B.lt

Lower than operator.

B.lt(leftOperand, rightOperand) => MathOperator

Example

B.if(
  B.lt('{{variable}}', '3'),
  'variable is lower than 3',
  'variable is greater or equal than 3'
)
Equivalent of this expression in TypeScript
if (variable < 3) {
  return 'variable is lower than 3'
} else {
  return 'variable is greater or equal than 3'
}

B.lte

Lower than or equal operator.

B.lte(leftOperand, rightOperand) => MathOperator

Example

B.if(
  B.lte('{{variable}}', '3'),
  'variable is lower or equal than 3',
  'variable is greater than 3'
)
Equivalent of this expression in TypeScript
if (variable <= 3) {
  return 'variable is lower or equal than 3'
} else {
  return 'variable is greater than 3'
}

B.and

Logical AND operator.

B.and(...operands: (LogicalOperator | MathOperator)[]) => LogicalOperator

Example

B.if(
  B.and(B.gt('{{variable}}', '3'), B.lt('{{variable}}', '5')),
  'variable is equal to 4', // In case we use just integers
  'variable is number not equal to 4'
)
Equivalent of this expression in TypeScript
if (variable > 3 && variable < 5) {
  return 'variable is equal to 4' // In case we use just integers
} else {
  return 'variable is number not equal to 4'
}

B.or

Logical OR operator.

B.or(...operands: (LogicalOperator | MathOperator)[]) => LogicalOperator

Example

B.if(
  B.or(B.eq('{{variable}}', 'Joe'), B.eq('{{variable}}', 'Alex')),
  'name in the variable is either Joe or Alex',
  'name in the variable is not Joe or Alex'
)
Equivalent of this expression in TypeScript
if (variable === 'Joe' || variable === 'Alex') {
  return 'name in the variable is either Joe or Alex'
} else {
  return 'name in the variable is not Joe or Alex'
}

B.not

Logical NOT operator.

B.not(operator: LogicalOperator | MathOperator) => LogicalOperator

Example

B.if(
  B.not(B.eq('{{variable}}', 'Joe')),
  'name in the variable not Joe',
  'name in the variable is Joe'
)
Equivalent of this expression in TypeScript
if (!(variable === 'Joe')) {
  return 'name in the variable not Joe'
} else {
  return 'name in the variable is Joe'
}