🖼️
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. Getting started

Defining layouts

Last updated 9 months ago

Each app has some components that repeat on every page. For example, this may be the header or the footer component. In order to make the app.component.html file generic across all applications layouts should be used.

Full list of components and their properties is available in .

Usage

In root level of the manifest the full list of layouts can be defined. Each layout must use a unique name. The default layout can be also overridden.

Example:

{
  // ...
  "layout": {
    "default": {
      "components": [
        { "type": "header" },
        { "type": "flow" }
      ],
    },
    "custom": {
      "components": [
        { "type": "header" },
        { "type": "flow" },
        { "type": "footer" }
      ]
    }
  },
  "flow": [
    {
      "path": "first",
      "components": []
    },
    {
      "path": "second",
      "layout": "custom"
      "components": []
    }
  ]
}

The component with type flow will be replaced with whatever is defined in the screen the customer is on.

Component type flow can also be nested:

{
  // ...
  "layout": {
    "default": {
      "components": [
        { "type": "header" },
        {
          "type": "container",
          "config": {
            "components": [
              { "type": "flow" },
            ],
          },
        },
      ],
    }
  },
  "flow": [
    {
      "path": "first",
      "components": []
    }
  ]
}
component storybook