🖼️
KASKO Frontend Documentation
  • README
  • Getting started
    • Setting up a new webapp
    • Webapp manifest
    • Building the flow
    • Defining layouts
    • Defining computed values
    • Defining dynamic paths
  • Core concepts
    • Forms
    • Validation
      • Using existing validators
      • Adding custom validators
    • Configuration
      • Price format
      • Date format
    • Performing API calls
    • Toggling visibility of components
    • Translations
    • Rules For Robust Application
  • Guides
    • Using logical statements (JsonLogic)
    • Adding discount codes
    • Developing Custom Plugins
    • Setting required requests
    • Adding save quote for later
    • Transforming request data
    • Manifest merging strategy
    • Knockout flow
    • Local pricing logic
    • Setting up dashboard policy profile
    • Handling offers
    • Repeater
  • Snippets
    • Reset input state
  • Useful resources
    • All component descriptions
    • JsonLogic core documentation
    • Kasko.js documentation
    • Example webapp
    • Example plugins (w/ various frameworks)
Powered by GitBook
On this page
  1. Core concepts

Toggling visibility of components

Last updated 9 months ago

Often it is necessary to show/hide a component based on some customer's input. This can be achieved with visibility_condition.

Visibility condition is using . The available variables within it are input and flags. The input variable will contain all of the customer input. For example, input.first_name contains the value of first_name field. flags on the other hand contains some system defined attributes. These are:

  • editing (boolean - set to true when the "edit" button is clicked in summary screen)

  • quote_loaded (boolean)

  • active_items (integer - count of items)

  • is_lead (boolean - is the customer entering the application is a lead)

  • is_prefilling (boolean - is the customer entering the application with some data prefilled)

Example visibility condition:

{
  "type": "jsonlogic",
  "schema": {
    "if": [
      {
        "var": "input.data.module_enabled"
      },
      true,
      false
    ]
  }
}
JsonLogic