# Webapp manifest A webapp manifest is a JSON structure used to build webapps. The target audience for this is developers. In an ideal world developers should be able to build any application by constructing a webapp manifest. ## Root level ```json { "version": "2.0", "schema": { // ... } } ``` | Variable | Required | Description | | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------- | | version | Yes | Signifies which parser to use for this manifest. Valid values are `"1.0"` and `"2.0"`. Version `2.0` is recommended for new projects. | | schema | Yes | Contents of the manifest. | ## Schema level ```json { "config": { "initial_screen": "start", "currency_template": "(currency) (amount, 1.2-2, ',', ' ')", "date_format": "DD/MM/YYYY", "default_values": { "data.loss_enabled": true }, "overwrite_values": { "data.theft_enabled": true }, "computed_values": { "data.policy_start_date": { "value": { "type": "jsonlogic", "schema": { "var": "active_policy.quote.customer_input.start_date" } } } }, "requests": [ { "type": "quote" }, { "type": "policy", "field_definition": [ { "path": "data", "name": "optin1", "validation": "accepted" } ] }, { "type": "payment" } ] }, "layout": { // ... }, "flow": [ { // ... } ] } ``` | Variable | Required | Example | Description | | ----------------------------------- | -------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | config.initial\_screen | Yes | `"start"` | Unique identifier (path) of the initial screen. | | config.currency\_template | No | `"(currency) (amount, 1.2-2, ',', ' ')"` | See [currency configuration article](https://docs.kasko.io/kasko-frontend-documentation/core-concepts/configuration/configuring-price-format) for more information. | | config.date\_format | No | `"DD/MM/YYYY"` | See [date configuration article](https://docs.kasko.io/kasko-frontend-documentation/core-concepts/configuration/configuring-date-format) for more information. | | config.default\_values | No | `{"field":"value"}` | Object of default values applied to the form. See [default values](#default-values) for special syntax options. | | config.overwrite\_values | No | `{"field":"value"}` | Overwrite `input` state values. | | config.computed\_values | No | `{"field":{"value":{...}}}` | Computes values and applies them into input state. See [computed values guide](https://docs.kasko.io/kasko-frontend-documentation/getting-started/manifest-computed-values) for more information. | | config.requests | No | `[{ ... }]` | An array of requests that should be performed for this webapp along with frontend specific field definition (validation rules). If, for example, there are some frontend only specific validation rules, they should be defined here. Other, both backend and frontend validation rules should be defined in the root field definition object (it's not stored in the manifest). More on this in the [api requests guide](https://docs.kasko.io/kasko-frontend-documentation/core-concepts/api-requests). | | config.scroll\_into\_view\_on\_edit | No | `true` | When user clicks "edit" from a summary screen, scroll to the field being edited. Defaults to `true`. | | config.content\_key | No | `{ "insurer_name": "content.key" }` | Global content keys used by components (for example, PayPal content keys). Keys map to content entries in translations. | | config.flow\_finish\_events | No | `["policy_purchase"]` | Events that mark the flow as finished. When any listed event fires, the flow is treated as complete. | | config.update\_offer\_on\_changes | No | `false` | Automatically update an existing offer when form data changes. Defaults to `false`. See [offers guide](https://docs.kasko.io/kasko-frontend-documentation/guides/offers) for more information. | | layout | No | `{"custom":{"components":[ ... ]}}` | Definitions of the layouts that can be used in webapp flow. See [layout guide](https://docs.kasko.io/kasko-frontend-documentation/getting-started/manifest-layouts) for more information. | | flow | Yes | `[{ ... }]` | An array of component definitions. See [building the flow article](https://docs.kasko.io/kasko-frontend-documentation/getting-started/manifest-flow) for more information. | ## Default Values The `default_values` config allows you to set initial values for form fields. Values can be static or use special syntax for dynamic values. ### Static Values ```json { "default_values": { "data.coverage_type": "basic", "data.loss_enabled": true, "data.item_count": 1 } } ``` ### Dynamic Date Values Use the `date:` prefix to set date fields dynamically. The value after `date:` is a date expression. **Basic expressions:** | Syntax | Description | | ---------------- | ------------------------------------------- | | `date:today` | Current date | | `date:now` | Current date and time (ISO datetime format) | | `date:tomorrow` | Tomorrow's date | | `date:yesterday` | Yesterday's date | **Relative calculations:** | Syntax | Description | | ----------------------- | ------------------ | | `date:today +1 day` | 1 day from today | | `date:today -7 days` | 7 days ago | | `date:today +1 month` | 1 month from today | | `date:today -3 months` | 3 months ago | | `date:today +1 year` | 1 year from today | | `date:1 day from now` | 1 day from now | | `date:2 months ago` | 2 months ago | | `date:5 years from now` | 5 years from now | **Month boundaries:** | Syntax | Description | | ----------------------------- | -------------------------- | | `date:start of current month` | First day of current month | | `date:end of current month` | Last day of current month | | `date:start of next month` | First day of next month | | `date:end of next month` | Last day of next month | **Year references:** | Syntax | Description | | ---------------- | --------------------------- | | `date:this year` | January 1st of current year | | `date:next year` | January 1st of next year | | `date:last year` | January 1st of last year | **Example:** ```json { "default_values": { "data.policy_start_date": "date:today", "data.policy_end_date": "date:today +1 year", "data.billing_start": "date:start of next month" } } ``` ### JsonLogic Values Default values can also be computed dynamically using [JsonLogic](https://docs.kasko.io/kasko-frontend-documentation/guides/jsonlogic). This is useful when the default value depends on other input or state. ```json { "default_values": { "data.premium_selected": { "type": "jsonlogic", "schema": { "if": [ {"===": [{"var": "input.data.customer_type"}, "business"]}, true, false ] } } } } ``` The JsonLogic expression has access to all standard [namespaces](https://docs.kasko.io/kasko-frontend-documentation/guides/jsonlogic#available-namespaces) including `input`, `quote`, `policy`, `flags`, etc.