@lowdefy/docs 4.0.0-alpha.7 → 4.0.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/operators/client/filter_default_value.js +55 -0
- package/{public/modules/connectDocsearch.js → dist/operatorsClient.js} +1 -19
- package/{templates/blocks/schemaTransformer.js → dist/types.js} +5 -10
- package/package.json +19 -3
- package/404.yaml +0 -26
- package/CHANGELOG.md +0 -697
- package/actions/CallMethod.yaml +0 -57
- package/actions/JsAction.yaml +0 -281
- package/actions/Link.yaml +0 -120
- package/actions/Login.yaml +0 -123
- package/actions/Logout.yaml +0 -44
- package/actions/Message.yaml +0 -68
- package/actions/Notification.yaml +0 -84
- package/actions/Request.yaml +0 -70
- package/actions/Reset.yaml +0 -42
- package/actions/ResetValidation.yaml +0 -102
- package/actions/ScrollTo.yaml +0 -100
- package/actions/SetGlobal.yaml +0 -78
- package/actions/SetState.yaml +0 -85
- package/actions/Throw.yaml +0 -89
- package/actions/Validate.yaml +0 -104
- package/actions/Wait.yaml +0 -40
- package/blocks/all_icons.yaml +0 -803
- package/blocks/container/Affix.yaml +0 -26
- package/blocks/container/Alert.yaml +0 -27
- package/blocks/container/Badge.yaml +0 -27
- package/blocks/container/Box.yaml +0 -27
- package/blocks/container/Card.yaml +0 -29
- package/blocks/container/Collapse.yaml +0 -38
- package/blocks/container/Comment.yaml +0 -43
- package/blocks/container/ConfirmModal.yaml +0 -36
- package/blocks/container/Descriptions.yaml +0 -51
- package/blocks/container/Drawer.yaml +0 -46
- package/blocks/container/Label.yaml +0 -28
- package/blocks/container/Modal.yaml +0 -46
- package/blocks/container/PageHCF.yaml +0 -28
- package/blocks/container/PageHCSF.yaml +0 -29
- package/blocks/container/PageHSCF.yaml +0 -29
- package/blocks/container/PageHeaderMenu.yaml +0 -52
- package/blocks/container/PageSHCF.yaml +0 -29
- package/blocks/container/PageSiderMenu.yaml +0 -53
- package/blocks/container/Result.yaml +0 -34
- package/blocks/container/Span.yaml +0 -27
- package/blocks/container/Spin.yaml +0 -27
- package/blocks/container/Tabs.yaml +0 -41
- package/blocks/container/Tooltip.yaml +0 -38
- package/blocks/display/Anchor.yaml +0 -25
- package/blocks/display/Avatar.yaml +0 -23
- package/blocks/display/Breadcrumb.yaml +0 -28
- package/blocks/display/Button.yaml +0 -43
- package/blocks/display/DangerousHtml.yaml +0 -62
- package/blocks/display/DangerousMarkdown.yaml +0 -46
- package/blocks/display/Divider.yaml +0 -23
- package/blocks/display/EChart.yaml +0 -53
- package/blocks/display/Html.yaml +0 -50
- package/blocks/display/Icon.yaml +0 -23
- package/blocks/display/Img.yaml +0 -40
- package/blocks/display/Markdown.yaml +0 -31
- package/blocks/display/MarkdownWithCode.yaml +0 -46
- package/blocks/display/Menu.yaml +0 -48
- package/blocks/display/Message.yaml +0 -34
- package/blocks/display/MobileMenu.yaml +0 -47
- package/blocks/display/Notification.yaml +0 -34
- package/blocks/display/Paragraph.yaml +0 -30
- package/blocks/display/Progress.yaml +0 -52
- package/blocks/display/Skeleton.yaml +0 -27
- package/blocks/display/Statistic.yaml +0 -35
- package/blocks/display/Title.yaml +0 -32
- package/blocks/input/AutoComplete.yaml +0 -30
- package/blocks/input/ButtonSelector.yaml +0 -36
- package/blocks/input/CheckboxSelector.yaml +0 -36
- package/blocks/input/CheckboxSwitch.yaml +0 -56
- package/blocks/input/ChromeColorSelector.yaml +0 -24
- package/blocks/input/CircleColorSelector.yaml +0 -24
- package/blocks/input/ColorSelector.yaml +0 -24
- package/blocks/input/CompactColorSelector.yaml +0 -24
- package/blocks/input/DateRangeSelector.yaml +0 -26
- package/blocks/input/DateSelector.yaml +0 -26
- package/blocks/input/DateTimeSelector.yaml +0 -28
- package/blocks/input/GithubColorSelector.yaml +0 -24
- package/blocks/input/MonthSelector.yaml +0 -26
- package/blocks/input/MultipleSelector.yaml +0 -117
- package/blocks/input/NumberInput.yaml +0 -24
- package/blocks/input/Pagination.yaml +0 -33
- package/blocks/input/ParagraphInput.yaml +0 -32
- package/blocks/input/PasswordInput.yaml +0 -48
- package/blocks/input/RadioSelector.yaml +0 -36
- package/blocks/input/RatingSlider.yaml +0 -24
- package/blocks/input/S3UploadButton.yaml +0 -28
- package/blocks/input/Selector.yaml +0 -98
- package/blocks/input/SliderColorSelector.yaml +0 -24
- package/blocks/input/SwatchesColorSelector.yaml +0 -24
- package/blocks/input/Switch.yaml +0 -24
- package/blocks/input/TextArea.yaml +0 -27
- package/blocks/input/TextInput.yaml +0 -59
- package/blocks/input/TitleInput.yaml +0 -32
- package/blocks/input/TwitterColorSelector.yaml +0 -24
- package/blocks/input/WeekSelector.yaml +0 -26
- package/blocks/list/ControlledList.yaml +0 -191
- package/blocks/list/List.yaml +0 -157
- package/blocks/list/TimelineList.yaml +0 -136
- package/body.html +0 -1
- package/concepts/blocks.yaml +0 -249
- package/concepts/cli.yaml +0 -173
- package/concepts/connections-and-requests.yaml +0 -114
- package/concepts/context-and-state.yaml +0 -82
- package/concepts/custom-blocks.yaml +0 -190
- package/concepts/custom-code.yaml +0 -197
- package/concepts/events-and-actions.yaml +0 -224
- package/concepts/hosting-files.yaml +0 -50
- package/concepts/layout.yaml +0 -1464
- package/concepts/lists.yaml +0 -162
- package/concepts/lowdefy-schema.yaml +0 -245
- package/concepts/operators.yaml +0 -66
- package/concepts/overview.yaml +0 -48
- package/concepts/secrets.yaml +0 -56
- package/connections/AWSS3.yaml +0 -228
- package/connections/AmazonRedshift.yaml +0 -75
- package/connections/AxiosHttp.yaml +0 -194
- package/connections/Elasticsearch.yaml +0 -378
- package/connections/GoogleSheet.yaml +0 -332
- package/connections/Knex.yaml +0 -181
- package/connections/KnexRequests.md +0 -121
- package/connections/MSSQL.yaml +0 -90
- package/connections/MariaDB.yaml +0 -77
- package/connections/MongoDB.yaml +0 -581
- package/connections/MySQL.yaml +0 -92
- package/connections/OracleDB.yaml +0 -73
- package/connections/PostgreSQL.yaml +0 -99
- package/connections/Redis.yaml +0 -147
- package/connections/SQLite.yaml +0 -94
- package/connections/SendGridMail.yaml +0 -113
- package/connections/Stripe.yaml +0 -139
- package/deployment/aws-lambda.yaml +0 -128
- package/deployment/docker.yaml +0 -118
- package/deployment/netlify.yaml +0 -69
- package/deployment/node-server.yaml +0 -111
- package/head.html +0 -7
- package/howto/generate-csv.yaml.njk +0 -252
- package/howto/generate-pdf.yaml.njk +0 -651
- package/howto/generateCsv/lowdefy.yaml +0 -64
- package/howto/generateCsv/public/csvMake.js +0 -27
- package/howto/generatePdf/inv_template.yaml +0 -200
- package/howto/generatePdf/lowdefy.yaml +0 -117
- package/howto/generatePdf/my_header.html +0 -1
- package/howto/generatePdf/public/logo_example.png +0 -0
- package/howto/generatePdf/public/modules/importUmd.js +0 -7
- package/howto/generatePdf/public/modules/pdfMake.js +0 -7
- package/howto/generatePdf/public/modules/vfs_fonts.js +0 -12
- package/howto/use-refrences.md +0 -5
- package/introduction.yaml +0 -100
- package/lowdefy.yaml +0 -66
- package/menus.yaml +0 -832
- package/operators/_actions.yaml +0 -123
- package/operators/_and.yaml +0 -90
- package/operators/_args.yaml +0 -79
- package/operators/_array.yaml +0 -326
- package/operators/_base64.yaml +0 -56
- package/operators/_change_case.yaml +0 -347
- package/operators/_date.yaml +0 -71
- package/operators/_diff.yaml +0 -75
- package/operators/_divide.yaml +0 -46
- package/operators/_eq.yaml +0 -67
- package/operators/_event.yaml +0 -103
- package/operators/_format.yaml +0 -209
- package/operators/_function.yaml +0 -66
- package/operators/_get.yaml +0 -108
- package/operators/_global.yaml +0 -107
- package/operators/_gt.yaml +0 -65
- package/operators/_gte.yaml +0 -65
- package/operators/_hash.yaml +0 -109
- package/operators/_if.yaml +0 -44
- package/operators/_if_none.yaml +0 -61
- package/operators/_index.yaml +0 -65
- package/operators/_input.yaml +0 -114
- package/operators/_js.yaml +0 -189
- package/operators/_json.yaml +0 -128
- package/operators/_list_contexts.yaml +0 -37
- package/operators/_location.yaml +0 -59
- package/operators/_log.yaml +0 -36
- package/operators/_lt.yaml +0 -65
- package/operators/_lte.yaml +0 -65
- package/operators/_math.yaml +0 -374
- package/operators/_media.yaml +0 -86
- package/operators/_menu.yaml +0 -81
- package/operators/_mql.yaml +0 -101
- package/operators/_ne.yaml +0 -77
- package/operators/_not.yaml +0 -47
- package/operators/_number.yaml +0 -157
- package/operators/_nunjucks.yaml +0 -73
- package/operators/_object.yaml +0 -193
- package/operators/_operator.yaml +0 -47
- package/operators/_or.yaml +0 -81
- package/operators/_product.yaml +0 -59
- package/operators/_random.yaml +0 -104
- package/operators/_ref.yaml +0 -266
- package/operators/_regex.yaml +0 -83
- package/operators/_request.yaml +0 -50
- package/operators/_secret.yaml +0 -74
- package/operators/_state.yaml +0 -114
- package/operators/_string.yaml +0 -283
- package/operators/_subtract.yaml +0 -38
- package/operators/_sum.yaml +0 -59
- package/operators/_switch.yaml +0 -51
- package/operators/_type.yaml +0 -92
- package/operators/_uri.yaml +0 -56
- package/operators/_url_query.yaml +0 -120
- package/operators/_user.yaml +0 -107
- package/operators/_uuid.yaml +0 -114
- package/operators/_var.yaml +0 -105
- package/operators/_yaml.yaml +0 -107
- package/pages.yaml +0 -227
- package/public/images/authors/gervwyk.jpeg +0 -0
- package/public/images/authors/sandile.jpeg +0 -0
- package/public/images/howto/header_generate_csv.jpg +0 -0
- package/public/images/howto/header_generate_pdf.jpg +0 -0
- package/public/logo_example.png +0 -0
- package/public/lowdefy_app_schema.png +0 -0
- package/public/modules/csvMake.js +0 -27
- package/public/modules/filterDefaultValue.js +0 -48
- package/public/modules/importUmd.js +0 -7
- package/public/modules/index.js +0 -5
- package/public/modules/pdfMake.js +0 -7
- package/public/modules/test/filterDefaultValue.test.js +0 -91
- package/public/modules/vfs_fonts.js +0 -12
- package/public/sitemap.xml +0 -1024
- package/templates/actions.yaml.njk +0 -68
- package/templates/blocks/defaultValueTransformer.js +0 -53
- package/templates/blocks/exampleTransformer.js +0 -81
- package/templates/blocks/layout.yaml +0 -114
- package/templates/blocks/propertiesFormTransformer.js +0 -419
- package/templates/blocks/propertiesGetterTransformer.js +0 -132
- package/templates/blocks/schema.yaml.njk +0 -42
- package/templates/blocks/style.yaml +0 -26
- package/templates/blocks/template.yaml.njk +0 -495
- package/templates/blog.yaml.njk +0 -221
- package/templates/cli_command.yaml.njk +0 -37
- package/templates/footer.yaml.njk +0 -604
- package/templates/general.yaml.njk +0 -124
- package/templates/generateSitemap.js +0 -41
- package/templates/header.yaml +0 -138
- package/templates/navigation_buttons.yaml +0 -68
- package/templates/operators.yaml.njk +0 -82
- package/templates/operatorsMethodTransformer.js +0 -119
- package/templates/test/array.test.js +0 -1335
- package/templates/test/boolean.test.js +0 -98
- package/templates/test/button.test.js +0 -166
- package/templates/test/color.test.js +0 -126
- package/templates/test/enum.test.js +0 -105
- package/templates/test/icon.test.js +0 -109
- package/templates/test/integer.test.js +0 -99
- package/templates/test/manual.test.js +0 -238
- package/templates/test/number.test.js +0 -99
- package/templates/test/object.test.js +0 -434
- package/templates/test/oneOf.test.js +0 -794
- package/templates/test/string.test.js +0 -98
- package/templates/test/yaml.test.js +0 -605
- package/tutorial/next-steps.yaml +0 -83
- package/tutorial/tutorial-actions-operators-config.yaml +0 -142
- package/tutorial/tutorial-actions-operators.yaml +0 -436
- package/tutorial/tutorial-add-blocks-config.yaml +0 -109
- package/tutorial/tutorial-add-blocks.yaml +0 -195
- package/tutorial/tutorial-create-page-config.yaml +0 -77
- package/tutorial/tutorial-create-page.yaml +0 -196
- package/tutorial/tutorial-deploy.yaml +0 -146
- package/tutorial/tutorial-requests-config.yaml +0 -186
- package/tutorial/tutorial-requests.yaml +0 -338
- package/tutorial/tutorial-start.yaml +0 -282
- package/users/login-and-logout.yaml +0 -164
- package/users/openid-connect.yaml +0 -84
- package/users/protected-pages.yaml +0 -67
- package/users/roles.yaml +0 -70
- package/users/user-object.yaml +0 -73
- package/users/users-introduction.yaml +0 -80
- package/version.yaml +0 -1
package/concepts/blocks.yaml
DELETED
|
@@ -1,249 +0,0 @@
|
|
|
1
|
-
# Copyright 2020-2021 Lowdefy, Inc
|
|
2
|
-
|
|
3
|
-
# Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
# you may not use this file except in compliance with the License.
|
|
5
|
-
# You may obtain a copy of the License at
|
|
6
|
-
|
|
7
|
-
# http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
-
|
|
9
|
-
# Unless required by applicable law or agreed to in writing, software
|
|
10
|
-
# distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
-
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
-
# See the License for the specific language governing permissions and
|
|
13
|
-
# limitations under the License.
|
|
14
|
-
|
|
15
|
-
_ref:
|
|
16
|
-
path: templates/general.yaml.njk
|
|
17
|
-
vars:
|
|
18
|
-
pageId: blocks
|
|
19
|
-
pageTitle: Blocks
|
|
20
|
-
section: Concepts
|
|
21
|
-
filePath: concepts/blocks.yaml
|
|
22
|
-
content:
|
|
23
|
-
- id: md1
|
|
24
|
-
type: MarkdownWithCode
|
|
25
|
-
properties:
|
|
26
|
-
content: |
|
|
27
|
-
#### TLDR
|
|
28
|
-
- All user interfaces in Lowdefy are assembled out of blocks.
|
|
29
|
-
##### Block types
|
|
30
|
-
- There a five block categories: `display`, `input`, `context`, `container` and `list`.
|
|
31
|
-
- Operators re-evaluate on every [`state`](/context-and-state) update or as request calls complete. This allows blocks to _live update_.
|
|
32
|
-
- Lowdefy has built in default block types, however this can be overwritten or extended with custom blocks by defining `types` on the Lowdefy config root.
|
|
33
|
-
- `input` blocks maintain a value in `state` matching the block `id` key. _Dot notation_ applies to specify nested fields.
|
|
34
|
-
##### Block validation
|
|
35
|
-
- Field level input validation can be achieved by marking a `input` block as `required` or by specifying a list of `validate` tests.
|
|
36
|
-
- Validation is invoked using the [`Validate`](/Validate) action.
|
|
37
|
-
##### Block events
|
|
38
|
-
- All blocks have`onMount` and `onMountAsync` events.
|
|
39
|
-
- Each block implements it's own additional events such as `onClick` etc.
|
|
40
|
-
##### Block loading
|
|
41
|
-
- By default all blocks render a loading skeleton when the block's source code is fetched or while the block is waiting on data from a request.
|
|
42
|
-
- A block's default loading can be overwritten by defining custom `loading` settings on a block.
|
|
43
|
-
|
|
44
|
-
-------
|
|
45
|
-
A Lowdefy page is compiled out of an arrangement of blocks. Every HTML element of this page is render as a result of a block placed and configured on the page. Blocks make it simple for Lowdefy developers to create apps since they only have to decide what block type to use, where in the layout the block should render, and what the block should do by defining the block's `properties`. How a block implements these `properties` is up to the specific block type selected.
|
|
46
|
-
|
|
47
|
-
Lowdefy offers a list of over 30 block types to cater for a wide range of use cases. All blocks are categorized according to their primary function:
|
|
48
|
-
- `display` - Display page elements.
|
|
49
|
-
- `input` - Modify a value in [`state`](/context-and-state).
|
|
50
|
-
- `context` - Create a new [`context`](/context-and-state).
|
|
51
|
-
- `container` - Render other blocks into [`content areas`](/layout).
|
|
52
|
-
- `list` - Render `content areas` and blocks for each element in the data array.
|
|
53
|
-
|
|
54
|
-
When `state` updates or a requests call completes, the Lowdefy engine reevaluates all operators and rerenders blocks for which the operator evaluation is different from the previous render result. The result is _live updates_ to all blocks on a page. Operators can be used to build _live update_ logic into all block fields, except for the `id`, `type`, `areas`, `blocks` and `loading` fields.
|
|
55
|
-
|
|
56
|
-
# Block Schema
|
|
57
|
-
|
|
58
|
-
The schema for a Lowdefy block is:
|
|
59
|
-
|
|
60
|
-
- `id: string`: __Required__ - A unique identifier for a block. For `Input` blocks the block `id` sets the field key which the block will modify in `state`. Field _dot-notation_ can be used to express fields which are nested in objects or arrays.
|
|
61
|
-
- `type: string`: __Required__ - The is the block type identifier and defines what block to used. The block type used must either be a default block type or must defined in your app's `types` configuration.
|
|
62
|
-
- `properties: object`: All the settings passed to a block component. __Operators are evaluated__.
|
|
63
|
-
- `areas: object`: Used to set the content areas and content layout settings for `container`, `context` and `list` blocks. See [layout](/layout) for more details on how to use `areas`.
|
|
64
|
-
- `blocks: array`: A array of blocks to render to the default `content` area for `container`, `context` and `list` blocks. See [layout](/layout) for more details on how to use the `blocks` array.
|
|
65
|
-
- `events: object`: Used to defined [`actions`](/events-and-actions) that run when the block triggers an [`event`](/events-and-actions).
|
|
66
|
-
- `layout: object`: Used to define the [layout](/layout) properties for a block. __Operators are evaluated__.
|
|
67
|
-
- `loading: object`: Used to overwrite a block's default loading behavior.
|
|
68
|
-
- `required: boolean | string`: For `input` blocks, whether or not a value value is required in `state` when the [`Validate`](/Validate) action is called. Can be either a boolean or a string that is used as the validation error message . __Operators are evaluated__.
|
|
69
|
-
- `style: css object`: Used to apply css style settings to the block's top level `div` element. __Operators are evaluated__.
|
|
70
|
-
- `validate: array`: A list of validation tests to pass when the [`Validate`](/Validate) action is called. __Operators are evaluated__.
|
|
71
|
-
- `visible: boolean`: Controls whether or not to render a block. Operators are generally used here, and must evaluate to `false` to make the block invisible. Blocks with `visible: false` are excluded from `state`. __Operators are evaluated__.
|
|
72
|
-
|
|
73
|
-
# Block types
|
|
74
|
-
|
|
75
|
-
Lowdefy has list of default block types as defined in the Lowdefy docs. The default Lowdefy blocks aim to cover a very generic implementation of the [Ant Design](https://ant.design/components/overview/) react component library. To use all the default block types, you can simply use the block `type` key, like [`Button`](/Button), [`TextInput`](/TextInput), or [`Box`](/Box).
|
|
76
|
-
|
|
77
|
-
###### Default block type config example:
|
|
78
|
-
```yaml
|
|
79
|
-
lowdefy: LOWDEFY_VERSION
|
|
80
|
-
pages:
|
|
81
|
-
- id: example_dashboard
|
|
82
|
-
type: PageHeaderMenu
|
|
83
|
-
blocks:
|
|
84
|
-
- id: basic_chart
|
|
85
|
-
type: Button
|
|
86
|
-
properties:
|
|
87
|
-
# ... Button details
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
However, the default types can overwritten or additional types can be define as required. For example, to set a `type` for a custom implementation of [AmCharts](https://www.amcharts.com/), we can do the following. We have created a custom [Lowdefy block for AmCharts v4](https://www.npmjs.com/package/@lowdefy/blocks-amcharts) that we can use.
|
|
91
|
-
|
|
92
|
-
###### Custom block type config example:
|
|
93
|
-
```yaml
|
|
94
|
-
lowdefy: LOWDEFY_VERSION
|
|
95
|
-
types:
|
|
96
|
-
AmChartsXY:
|
|
97
|
-
url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-amcharts/meta/AmChartsXY.json
|
|
98
|
-
pages:
|
|
99
|
-
- id: example_dashboard
|
|
100
|
-
type: Context
|
|
101
|
-
blocks:
|
|
102
|
-
- id: basic_chart
|
|
103
|
-
type: AmChartsXY
|
|
104
|
-
properties:
|
|
105
|
-
# ... AmCharts details
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
More details on custom blocks can be found [here](/custom-blocks).
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
# Input block validation
|
|
112
|
-
|
|
113
|
-
All `input` block types maintain a value in [`state`](/context-and-state). This value is set to the field name matching the block `id`. Nested fields can be created by using _dot notation_ in the `id` to specify the field path.
|
|
114
|
-
|
|
115
|
-
Client side field validation can be applied setting the `required` and / or `validate` block fields. The following schema applies to `required` and `validate`.
|
|
116
|
-
|
|
117
|
-
Field validation is first evaluated when the [`Validate`](/Validate) action is invoked on a page.
|
|
118
|
-
|
|
119
|
-
##### `required` schema:
|
|
120
|
-
`required` can be a `boolean` or `string` type. When `required: true` the field label will indicate this with a red dot for user feedback, and a value will have to be supplied in to the field in order to pass validation. If `required` is set to a `string`, this string will be used as the feedback message when the validation fails.
|
|
121
|
-
|
|
122
|
-
```yaml
|
|
123
|
-
- id: name
|
|
124
|
-
type: TextInput
|
|
125
|
-
required: Please provide your name.
|
|
126
|
-
properties:
|
|
127
|
-
title: Name
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
##### `validate` schema:
|
|
131
|
-
The `validate` field takes a `array` of test `objects` to evaluate before passing the field validation. This list of tests are evaluated sequentially, so the test that fails first will be used as the feedback message to the user.
|
|
132
|
-
|
|
133
|
-
The schema for the validation test `objects`:
|
|
134
|
-
- `pass: boolean`: __Required__ - The test that validates if this item passes or not. This is usually written as operators which evaluates to a `true` or `false`. __Operators are evaluated__.
|
|
135
|
-
- `message: string`: __Required__ - The feedback message to the user if this validation tests fails. __Operators are evaluated__.
|
|
136
|
-
- `status: enum`: The feedback type to present to the user. Option are `error` and `warning`. Default is `error`. __Operators are evaluated__.
|
|
137
|
-
|
|
138
|
-
The following `validate` example first verifies that something was entered into the `email` field, then checks that the field passes a email regex validation using the [`_regex`](/_regex) operator:
|
|
139
|
-
```yaml
|
|
140
|
-
- id: email
|
|
141
|
-
type: TextInput
|
|
142
|
-
validate:
|
|
143
|
-
- message: Please enter a email address.
|
|
144
|
-
status: error
|
|
145
|
-
pass:
|
|
146
|
-
_not:
|
|
147
|
-
_not:
|
|
148
|
-
_state: email
|
|
149
|
-
- message: Please provide a valid email address.
|
|
150
|
-
status: error
|
|
151
|
-
pass:
|
|
152
|
-
_regex: '^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
|
|
153
|
-
properties:
|
|
154
|
-
title: Email
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
# Block events
|
|
158
|
-
|
|
159
|
-
By default all blocks implements `onMount` and `onMountAsync` events. Both the `onMount` and `onMountAsync` events are triggered when the block is mounted. For the `onMount` event, the block only mounts when the event action chain is completed, however, for the `onMountAsync` event, the block will mount as soon as possible while the event actions completes execution.
|
|
160
|
-
|
|
161
|
-
Apart from the `onMount` and `onMountAsync` events, most blocks also implements their own block specific events such as `onOpen` for [Modal](/Modal) or `onClick` for [Button](/Button). See the events tab on each block's documentation for more details.
|
|
162
|
-
|
|
163
|
-
See [the events and actions page](/events-and-actions) for more details.
|
|
164
|
-
|
|
165
|
-
# Block loading
|
|
166
|
-
|
|
167
|
-
Block loading renders a placeholder block while the block component is being fetched, or a block is waiting on a request to return before to rendering the block. This allows for a smoother user experience and reduces 'bounce' in the user interface as more blocks takes up their full width and height on the page while in a loading state.
|
|
168
|
-
|
|
169
|
-
By default, Lowdefy tries to give a reasonable definition for how much space a block should take up in while loading, however this can vary depending on how the block is used. The `loading` property on blocks allows the Lowdefy developer to set a custom loading configuration for a block.
|
|
170
|
-
|
|
171
|
-
##### Custom block `loading` example:
|
|
172
|
-
|
|
173
|
-
```yaml
|
|
174
|
-
pages:
|
|
175
|
-
- id: page_one
|
|
176
|
-
type: Context
|
|
177
|
-
blocks:
|
|
178
|
-
# ...
|
|
179
|
-
- id: paragraph_one
|
|
180
|
-
type: Title
|
|
181
|
-
loading:
|
|
182
|
-
type: SkeletonParagraph
|
|
183
|
-
properties:
|
|
184
|
-
lines: 1
|
|
185
|
-
properties:
|
|
186
|
-
content: Lorem ipsum dolor sit amet.
|
|
187
|
-
# ...
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
## Loading placeholder types
|
|
191
|
-
|
|
192
|
-
The following loading placeholder types are available:
|
|
193
|
-
|
|
194
|
-
##### Spinner
|
|
195
|
-
A Lowdefy logo loading spinner placed at the center of the block. Often used as the full page loading spinner logo. The following `properties` apply to `Spinner`:
|
|
196
|
-
|
|
197
|
-
- `barColor: string`: Color of the bars in the Lowdefy spinner logo.
|
|
198
|
-
- `color: string`: Color of spinner logo. Default is `#f1f1f1`.
|
|
199
|
-
- `height: number | string`: Height of the spinner block including background. Default is `100%`.
|
|
200
|
-
- `shaded: boolean`: Masks the spinner block including background.
|
|
201
|
-
- `size: number | string`: Size of the spinner icon. Default is `50px`.
|
|
202
|
-
|
|
203
|
-
##### IconSpinner
|
|
204
|
-
A spinning loading icon. The following `properties` apply to `IconSpinner`:
|
|
205
|
-
|
|
206
|
-
- `size: number | enum`: Size of the spinner icon. Options are `small`, `medium` and `large`. Default is `20px`.
|
|
207
|
-
|
|
208
|
-
##### Skeleton
|
|
209
|
-
A rectangular loading skeleton to fill the full size of the block. The following `properties` apply to `Skeleton`:
|
|
210
|
-
|
|
211
|
-
- `height: number | string`: Height of the skeleton block. Default is `100%`.
|
|
212
|
-
- `width: number | string`: Width of the skeleton block. Default is `100%`.
|
|
213
|
-
|
|
214
|
-
##### SkeletonAvatar
|
|
215
|
-
A avatar loading skeleton. The following `properties` apply to `SkeletonAvatar`:
|
|
216
|
-
|
|
217
|
-
- `size: number | enum`: Size of the avatar skeleton. Options are `small`, `medium` and `large`. Default is `32px`.
|
|
218
|
-
- `shape: enum`: Shape of the avatar skeleton. Options are `square` and `round`. Default is `round`.
|
|
219
|
-
|
|
220
|
-
##### SkeletonButton
|
|
221
|
-
A button loading skeleton, matches the size of [`Button`](/Button) blocks. The following `properties` apply to `SkeletonButton`:
|
|
222
|
-
|
|
223
|
-
- `size: enum`: Size of the button skeleton. Options are `small`, `medium` and `large`. Default is `medium`.
|
|
224
|
-
- `shape: enum`: Shape of the button skeleton corners. Options are `square` and `round`. Default is `round`.
|
|
225
|
-
- `height: number | string`: Height of the button skeleton. Overwrites the size setting.
|
|
226
|
-
- `width: number | string`: Width of the button skeleton. Default is `100%`.
|
|
227
|
-
|
|
228
|
-
##### SkeletonInput
|
|
229
|
-
A input loading skeleton, used as a placeholder for input blocks with labels. The following `properties` apply to `SkeletonInput`:
|
|
230
|
-
|
|
231
|
-
- `size: enum`: Size of the input skeleton. Options are `small`, `medium` and `large`. Default is `medium`.
|
|
232
|
-
- `labelHeight: number | string`: Height of the label part of the input skeleton.
|
|
233
|
-
- `inputHeight: number | string`: Height of the input part of the input skeleton. Overwrites the size setting.
|
|
234
|
-
- `labelWidth: number | string`: Width of the label part of the input skeleton. Default is `100%`.
|
|
235
|
-
- `width: number | string`: Width of the input part of input skeleton. Default is `100%`.
|
|
236
|
-
|
|
237
|
-
##### SkeletonParagraph
|
|
238
|
-
A paragraph loading skeleton, used as a placeholder for text intensive section. The following `properties` apply to `SkeletonParagraph`:
|
|
239
|
-
|
|
240
|
-
- `lines: number`: The number of paragraph lines to render. Default is `4`.
|
|
241
|
-
- `width: number | string`: Width of the paragraph skeleton. Default is `100%`.
|
|
242
|
-
|
|
243
|
-
- _ref:
|
|
244
|
-
path: templates/navigation_buttons.yaml
|
|
245
|
-
vars:
|
|
246
|
-
previous_page_title: Context and State
|
|
247
|
-
previous_page_id: context-and-state
|
|
248
|
-
next_page_title: Layout
|
|
249
|
-
next_page_id: layout
|
package/concepts/cli.yaml
DELETED
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
# Copyright 2020-2021 Lowdefy, Inc
|
|
2
|
-
|
|
3
|
-
# Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
# you may not use this file except in compliance with the License.
|
|
5
|
-
# You may obtain a copy of the License at
|
|
6
|
-
|
|
7
|
-
# http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
-
|
|
9
|
-
# Unless required by applicable law or agreed to in writing, software
|
|
10
|
-
# distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
-
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
-
# See the License for the specific language governing permissions and
|
|
13
|
-
# limitations under the License.
|
|
14
|
-
|
|
15
|
-
_ref:
|
|
16
|
-
path: templates/general.yaml.njk
|
|
17
|
-
vars:
|
|
18
|
-
pageId: cli
|
|
19
|
-
pageTitle: The CLI
|
|
20
|
-
section: Concepts
|
|
21
|
-
filePath: concepts/cli.yaml
|
|
22
|
-
content:
|
|
23
|
-
- id: md1
|
|
24
|
-
type: MarkdownWithCode
|
|
25
|
-
properties:
|
|
26
|
-
content: |
|
|
27
|
-
The Lowdefy CLI is used to develop a Lowdefy app locally, and to build Lowdefy apps for deployment.
|
|
28
|
-
|
|
29
|
-
We recommend running the CLI using `npx`, to always use the latest version:
|
|
30
|
-
|
|
31
|
-
```
|
|
32
|
-
npx lowdefy@latest <command>
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
or, to use a specific version:
|
|
36
|
-
|
|
37
|
-
```
|
|
38
|
-
npx lowdefy@version <command>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
Alternative, you can install the CLI globally or to a npm project (with a `package.json` file) via npm or yarn.
|
|
42
|
-
|
|
43
|
-
To install the CLI globally run:
|
|
44
|
-
|
|
45
|
-
```
|
|
46
|
-
npm install lowdefy -g
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
The CLI can then be run using `lowdefy` as the executable name:
|
|
50
|
-
|
|
51
|
-
```
|
|
52
|
-
lowdefy <command>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
# CLI commands
|
|
56
|
-
|
|
57
|
-
## build
|
|
58
|
-
|
|
59
|
-
The `build` command runs a Lowdefy build. The options are:
|
|
60
|
-
|
|
61
|
-
- `--config-directory <config-directory>`: Change config directory. The default is the current working directory.
|
|
62
|
-
- `--blocks-server-url <blocks-server-url>`: The URL from where Lowdefy blocks will be served. See below for more information.
|
|
63
|
-
- `--disable-telemetry`: Disable telemetry.
|
|
64
|
-
- `--output-directory <output-directory>`: Change the directory to which build artifacts are saved. The default is `<config-directory>/.lowdefy/build`.
|
|
65
|
-
- `--ref-resolver <ref-resolver-function-path>`: Path to a JavaScript file containing a `_ref` resolver function to be used as the app default `_ref` resolver.
|
|
66
|
-
|
|
67
|
-
## build-netlify
|
|
68
|
-
The `build-netlify` command creates a production build for the [Netlify](https://www.netlify.com) web hosting service. It is designed to run as the Netlify build command.
|
|
69
|
-
|
|
70
|
-
We recommend setting the build command to `npx lowdefy@latest build-netlify`. The Netlify publish directory should be set to `.lowdefy/publish`, and the functions directory set to `.lowdefy/functions`.
|
|
71
|
-
|
|
72
|
-
- `--config-directory <config-directory>`: Change config directory. The default is the current working directory (The config directory should rather be configured in the Netlify build settings).
|
|
73
|
-
- `--blocks-server-url <blocks-server-url>`: The URL from where Lowdefy blocks will be served. See below for more information.
|
|
74
|
-
- `--disable-telemetry`: Disable telemetry.
|
|
75
|
-
- `--ref-resolver <ref-resolver-function-path>`: Path to a JavaScript file containing a `_ref` resolver function to be used as the app default `_ref` resolver.
|
|
76
|
-
|
|
77
|
-
## clean-cache
|
|
78
|
-
|
|
79
|
-
The Lowdefy CLI caches block metadata, and build and server scripts in the `.lowdefy/cache` directory. These cached files can be removed using the `clean-cache` command.
|
|
80
|
-
|
|
81
|
-
- `--config-directory <config-directory>`: Change config directory. The default is the current working directory.
|
|
82
|
-
- `--disable-telemetry`: Disable telemetry.
|
|
83
|
-
|
|
84
|
-
## dev
|
|
85
|
-
|
|
86
|
-
The `dev` command starts a Lowdefy development server, running locally. It can be accessed in a browser at [http://localhost:3000](http://localhost:3000). The CLI watches the file system, and rebuilds the app and reloads served pages every time a change is made to any of the files in the project directory.
|
|
87
|
-
|
|
88
|
-
- `--config-directory <config-directory>`: Change config directory. The default is the current working directory.
|
|
89
|
-
- `--blocks-server-url <blocks-server-url>`: The URL from where Lowdefy blocks will be served. See below for more information.
|
|
90
|
-
- `--disable-telemetry`: Disable telemetry.
|
|
91
|
-
- `--port <port>`: Change the port the server is hosted at. The default is `3000`.
|
|
92
|
-
- `--ref-resolver <ref-resolver-function-path>`: Path to a JavaScript file containing a `_ref` resolver function to be used as the app default `_ref` resolver.
|
|
93
|
-
- `--watch <paths...>`: A list of paths to files or directories that should be watched for changes.
|
|
94
|
-
- `--watch-ignore <patterns...>`: A list of paths to files or directories that should be ignored by the file watcher. Globs are supported.
|
|
95
|
-
|
|
96
|
-
#### Examples
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
Run the dev server, watching a relative directory for file changes:
|
|
100
|
-
```txt
|
|
101
|
-
npx lowdefy@latest dev --watch ../other-project
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
Run the dev server, ignoring the public directory:
|
|
105
|
-
```txt
|
|
106
|
-
npx lowdefy@latest dev --watch-ignore public/**
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
# Configuration
|
|
110
|
-
|
|
111
|
-
All the CLI options can either be set as command line options, or the `cli` config object in your `lowdefy.yaml` file. Options set as command line options take precedence over options set in the `lowdefy.yaml` file. The config in the `lowdefy.yaml` cannot be referenced using the `_ref` operator, but need to be set in the file itself.
|
|
112
|
-
|
|
113
|
-
Options set in the `lowdefy.yaml` should be defined in camelCase. The options that can be set are:
|
|
114
|
-
- `blocksServerUrl: string`: The URL from where Lowdefy blocks will be served. See below for more information.
|
|
115
|
-
- `disableTelemetry: boolean`: Disable telemetry.
|
|
116
|
-
- `outputDirectory: string`: Change the directory to which build artifacts are saved. The default is `<config-directory>/.lowdefy/build`.
|
|
117
|
-
- `refResolver: string`: Path to a JavaScript file containing a `_ref` resolver function to be used as the app default `_ref` resolver.
|
|
118
|
-
- `port: number`: Change the port the server is hosted at. The default is `3000`.
|
|
119
|
-
- `watch: string[]`: A list of paths to files or directories that should be watched for changes.
|
|
120
|
-
- `watchIgnore: string[]`: A list of paths to files or directories that should be ignored by the file watcher. Globs are supported.
|
|
121
|
-
|
|
122
|
-
The `--config-directory` option cannot be set from the `lowdefy.yaml` file.
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
# Telemetry
|
|
126
|
-
|
|
127
|
-
The CLI collects usage and error information to help us fix bugs, prioritize features, and understand how Lowdefy is being used.
|
|
128
|
-
|
|
129
|
-
All telemetry can be disabled by setting the `disableTelemetry` flag in `cli` config object in your `lowdefy.yaml` file (this cannot be a reference to another file), or by using the `--disable-telemetry` command line flag.:
|
|
130
|
-
|
|
131
|
-
###### `lowdefy.yaml`
|
|
132
|
-
```yaml
|
|
133
|
-
lowdefy: LOWDEFY_VERSION
|
|
134
|
-
|
|
135
|
-
cli:
|
|
136
|
-
disableTelemetry: true
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
We collect the following information:
|
|
140
|
-
|
|
141
|
-
- The CLI version.
|
|
142
|
-
- The Lowdefy version of your app.
|
|
143
|
-
- A random local app id (stored locally in your project folder at `.lowdefy/cli.json`).
|
|
144
|
-
- The CLI command used.
|
|
145
|
-
- If the CLI is being used in the Netlify CI environment (when using the `build-netlify` command).
|
|
146
|
-
- Your IP address.
|
|
147
|
-
- Error messages and stack traces for any errors.
|
|
148
|
-
|
|
149
|
-
# Blocks Server
|
|
150
|
-
|
|
151
|
-
The Lowdefy default blocks are not included in the Lowdefy build output, but are served from a CDN, and imported into the app using webpack module federation. All the default Lowdefy blocks are hosted at:
|
|
152
|
-
|
|
153
|
-
```yaml
|
|
154
|
-
https://blocks-cdn.lowdefy.com/v{LOWDEFY_VERSION}/
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
If you wish to host your own blocks instead, this url can be configured using the `--blocks-server-url` CLI option. This URL should serve the build artifacts of the Lowdefy default block packages (located in the `dist` directory). Each blocks package should be served under a path that corresponds to the package name. For example, `@lowdefy/blocks-basic` should be served under `{BLOCK_SERVER_URL}/blocks-basic/`. The required blocks packages and server paths are:
|
|
158
|
-
|
|
159
|
-
- `@lowdefy/blocks-basic` to be hosted at `{BLOCK_SERVER_URL}/blocks-basic/`.
|
|
160
|
-
- `@lowdefy/blocks-antd` to be hosted at `{BLOCK_SERVER_URL}/blocks-antd/`.
|
|
161
|
-
- `@lowdefy/blocks-color-selectors` to be hosted at `{BLOCK_SERVER_URL}/blocks-color-selectors/`.
|
|
162
|
-
- `@lowdefy/blocks-markdown` to be hosted at `{BLOCK_SERVER_URL}/blocks-markdown/`.
|
|
163
|
-
- `@lowdefy/blocks-echarts` to be hosted at `{BLOCK_SERVER_URL}/blocks-echarts/`.
|
|
164
|
-
|
|
165
|
-
If you wish to run the CLI dev server, the `@lowdefy/renderer` package build artifacts (located in the `dist` directory) should also be served from `{BLOCK_SERVER_URL}/renderer/`.
|
|
166
|
-
|
|
167
|
-
- _ref:
|
|
168
|
-
path: templates/navigation_buttons.yaml
|
|
169
|
-
vars:
|
|
170
|
-
previous_page_title: Overview
|
|
171
|
-
previous_page_id: overview
|
|
172
|
-
next_page_title: Lowdefy App Schema
|
|
173
|
-
next_page_id: lowdefy-schema
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
# Copyright 2020-2021 Lowdefy, Inc
|
|
2
|
-
|
|
3
|
-
# Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
# you may not use this file except in compliance with the License.
|
|
5
|
-
# You may obtain a copy of the License at
|
|
6
|
-
|
|
7
|
-
# http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
-
|
|
9
|
-
# Unless required by applicable law or agreed to in writing, software
|
|
10
|
-
# distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
-
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
-
# See the License for the specific language governing permissions and
|
|
13
|
-
# limitations under the License.
|
|
14
|
-
|
|
15
|
-
_ref:
|
|
16
|
-
path: templates/general.yaml.njk
|
|
17
|
-
vars:
|
|
18
|
-
pageId: connections-and-requests
|
|
19
|
-
pageTitle: Connections and Requests
|
|
20
|
-
section: Concepts
|
|
21
|
-
filePath: concepts/connections-and-requests.yaml
|
|
22
|
-
content:
|
|
23
|
-
- id: md1
|
|
24
|
-
type: Markdown
|
|
25
|
-
properties:
|
|
26
|
-
content: |
|
|
27
|
-
### TLDR
|
|
28
|
-
- `connections` define links to other services, like connecting to a database. They are defined at the root of the lowdefy configuration.
|
|
29
|
-
- `requests` use connections to make a call to the connected external services.
|
|
30
|
-
- Use the [`_secret`](/_secret) operator to reference API keys or other secrets as required - do not code secrets into your config or commit secrets to your config source control.
|
|
31
|
-
|
|
32
|
-
-----------
|
|
33
|
-
In a Lowdefy app you can integrate with other services like API's or databases using `connections` and `requests`. Connections configure the connection settings to the service, and often contain parameters like connection strings, urls and secrets like passwords or API keys. Requests are used to interact with the connection, like inserting a data record, executing a query or calling a API end-point.
|
|
34
|
-
|
|
35
|
-
- id: alert2
|
|
36
|
-
type: Alert
|
|
37
|
-
properties:
|
|
38
|
-
type: warning
|
|
39
|
-
showIcon: false
|
|
40
|
-
message: Sensitive information like passwords or API keys are often required to use external services. The _secret operator should be used to reference these secrets, they should never be coded directly in your app, or committed to source control.
|
|
41
|
-
|
|
42
|
-
- id: md2
|
|
43
|
-
type: Markdown
|
|
44
|
-
properties:
|
|
45
|
-
content: |
|
|
46
|
-
# Connections
|
|
47
|
-
|
|
48
|
-
Connections are defined at the root of your Lowdefy configuration, in the `connections` array. Each connection must have an `id`, a `type`, and `properties` defining the connection. Operators in connection properties are evaluated every time a request is called.
|
|
49
|
-
|
|
50
|
-
# Connection Schema
|
|
51
|
-
|
|
52
|
-
The schema for a Lowdefy connection is:
|
|
53
|
-
|
|
54
|
-
- `id: string`: __Required__ - A unique identifier for the connection. This is used by requests to specify which connection to use.
|
|
55
|
-
- `type: string`: __Required__ - The connection type to be used.
|
|
56
|
-
- `properties: object`: The settings passed to the connection. __Operators are evaluated__.
|
|
57
|
-
|
|
58
|
-
###### Connections definition example:
|
|
59
|
-
```yaml
|
|
60
|
-
lowdefy: LOWDEFY_VERSION
|
|
61
|
-
connections:
|
|
62
|
-
- id: connection1
|
|
63
|
-
type: ConnectionType1
|
|
64
|
-
properties:
|
|
65
|
-
# ...
|
|
66
|
-
- id: connection2
|
|
67
|
-
type: ConnectionType2
|
|
68
|
-
properties:
|
|
69
|
-
# ...
|
|
70
|
-
pages:
|
|
71
|
-
# ...
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
Our goal is to make connections for everything. As the Lowdefy community grows, we will continue to develop the most requested connections. If the connection you require is not supported yet, please head over to our [new connections voting board](https://github.com/lowdefy/lowdefy/discussions/309) to request and vote for new connections.
|
|
75
|
-
|
|
76
|
-
# Requests
|
|
77
|
-
|
|
78
|
-
Requests can be defined on any block, and the results of the request are available to any block in the same context. Requests must have an `id`, `type`, `connectionId` field specifying the connection to use, and `properties` defining the request settings. Requests can be called using the [`Request`](/Request) action. Operators in request properties are evaluated every time a request is called.
|
|
79
|
-
|
|
80
|
-
# Request Schema
|
|
81
|
-
|
|
82
|
-
The schema for a Lowdefy request is:
|
|
83
|
-
|
|
84
|
-
- `id: string`: __Required__ - A identifier for the request. It must be unique within the context the request is defined in.
|
|
85
|
-
- `type: string`: __Required__ - The request type to be used. It must be a type supported by the connection type.
|
|
86
|
-
- `connectionId: string`: __Required__ - The `id` of the connection that should be used.
|
|
87
|
-
- `properties: object`: The settings passed to the request. __Operators are evaluated__.
|
|
88
|
-
|
|
89
|
-
###### Requests definition example:
|
|
90
|
-
```yaml
|
|
91
|
-
id: block_with_requests
|
|
92
|
-
type: BlockType
|
|
93
|
-
requests:
|
|
94
|
-
- id: request1
|
|
95
|
-
type: RequestType1
|
|
96
|
-
connectionId: connectionId1
|
|
97
|
-
properties:
|
|
98
|
-
# ...
|
|
99
|
-
- id: request2
|
|
100
|
-
type: RequestType2
|
|
101
|
-
connectionId: connectionId2
|
|
102
|
-
properties:
|
|
103
|
-
# ...
|
|
104
|
-
properties:
|
|
105
|
-
# ...
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
- _ref:
|
|
109
|
-
path: templates/navigation_buttons.yaml
|
|
110
|
-
vars:
|
|
111
|
-
previous_page_title: Layout
|
|
112
|
-
previous_page_id: layout
|
|
113
|
-
next_page_title: Events and Actions
|
|
114
|
-
next_page_id: events-and-actions
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
# Copyright 2020-2021 Lowdefy, Inc
|
|
2
|
-
|
|
3
|
-
# Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
# you may not use this file except in compliance with the License.
|
|
5
|
-
# You may obtain a copy of the License at
|
|
6
|
-
|
|
7
|
-
# http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
-
|
|
9
|
-
# Unless required by applicable law or agreed to in writing, software
|
|
10
|
-
# distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
-
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
-
# See the License for the specific language governing permissions and
|
|
13
|
-
# limitations under the License.
|
|
14
|
-
|
|
15
|
-
_ref:
|
|
16
|
-
path: templates/general.yaml.njk
|
|
17
|
-
vars:
|
|
18
|
-
pageId: context-and-state
|
|
19
|
-
pageTitle: Context and State
|
|
20
|
-
section: Concepts
|
|
21
|
-
filePath: concepts/context-and-state.yaml
|
|
22
|
-
content:
|
|
23
|
-
- id: md1
|
|
24
|
-
type: Markdown
|
|
25
|
-
properties:
|
|
26
|
-
content: |
|
|
27
|
-
#### TLDR
|
|
28
|
-
- The first block on a page must be a `context` category block.
|
|
29
|
-
- A page can have multiple `context` blocks.
|
|
30
|
-
- Every `context` has a single `state` object.
|
|
31
|
-
- All input blocks write their value to `state`, with the their `id` as the key in the `state` object.
|
|
32
|
-
- Input blocks which are not visible are removed from `state`.
|
|
33
|
-
- The `SetState` action can also modify the `state` object.
|
|
34
|
-
|
|
35
|
-
-------
|
|
36
|
-
|
|
37
|
-
A Lowdefy block with category `context` provides the environment for a part of a Lowdefy app to run in. More than one context can be placed on a page, but generally only one is needed. The first block on a page must be a `context` category block.
|
|
38
|
-
|
|
39
|
-
The standard page blocks like [`PageHeaderMenu`](/PageHeaderMenu) or [`PageSiderMenu`](/PageSiderMenu) are all `context` category blocks, and the [`Context`](/Context) block is a simple container that also provides a context.
|
|
40
|
-
|
|
41
|
-
Each context provides encapsulation to the blocks inside it. It has it's own `state` object as well as requests.
|
|
42
|
-
|
|
43
|
-
Every `input` category block inside the context will have a value in the `state` object, with the their `id` as the key in the `state` object, unless the block is not visible, in which case the input value is removed the state object.
|
|
44
|
-
|
|
45
|
-
The only other way to modify the `state` object is to use a `SetState` action. See [`SetState`](/SetState) and [`events-and-actions`](/events-and-actions) for more details.
|
|
46
|
-
|
|
47
|
-
Contexts remain even as users navigate to new pages, so if a user returns to a page, the state as they left it will remain.
|
|
48
|
-
|
|
49
|
-
# Url queries
|
|
50
|
-
|
|
51
|
-
A new context is created for each distinct URL query parameters seen by the app. This means that if a page is open with two different URL queries, two different contexts, with separate `state` objects will be created.
|
|
52
|
-
|
|
53
|
-
# Context IDs
|
|
54
|
-
|
|
55
|
-
Each context created has a identifier with the following structure:
|
|
56
|
-
```
|
|
57
|
-
{pageId}:{blockId}:{JSON stringified urlQuery object}
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
# Context data objects
|
|
61
|
-
|
|
62
|
-
A Lowdefy `context` makes some additional data object accessible via operators. These include:
|
|
63
|
-
|
|
64
|
-
- [`_global`](/_global): The `global` object is a single app level data object defined in the Lowdefy [config root](/lowdefy-schema). This object is the same for every `context`, it is also passed between the client and server. If the [`SetGlobal`](/SetGlobal) action is called, it is not consistent between clients, like different users, or a single user with multiple tabs open.
|
|
65
|
-
|
|
66
|
-
- [`_state`](/_state): A `state` object is unique to a `context` and every [`input` block](/blocks) maintains a value in it's parent `state` object. This `state` object is passed to the server when requests are called. The [`SetState`](/SetState) action can be used to modify the value of a `state` object in the same `context` from which `SetState` is called.
|
|
67
|
-
|
|
68
|
-
- [`_url_query`](/_url_query): The `urlQuery` object is used to access variables set in the url. Url query parameters can be set using the `urlQuery` field in the [`Link`](/Link) action. It can be useful to create sharable links containing some additional information other than the page route. For example setting a document id in the url so that the document can be retrieved when the link is opened during the page [`onEnter`](/events-and-actions) event. __Note that any variables set to `urlQuery` will be publicly visible__.
|
|
69
|
-
|
|
70
|
-
- [`_input`](/_input): The `input` object is unique to a page, and works similar to the `urlQuery` object. The `input` object is used to pass information between page transitions. This variable set to the `input` object are not written to the url, so they are not visible publicly but also cannot be used to share the data in a link since a `input` object is only consistent between one `context` and the next to which it links. A `input` object is set to the `input` field of the [`Link`](/Link) action when linking from one page `context` to the next.
|
|
71
|
-
|
|
72
|
-
- [`_media`](/_media): The `media` object contains some information about the client screen size etc. This is useful in order to add additional responsive logic to a page.
|
|
73
|
-
|
|
74
|
-
- [`_user`](/user-object): The `user` object contains the data in the user idToken if OpenID Connect authentication is configured and a user is logged in.
|
|
75
|
-
|
|
76
|
-
- _ref:
|
|
77
|
-
path: templates/navigation_buttons.yaml
|
|
78
|
-
vars:
|
|
79
|
-
previous_page_title: Lowdefy Schema
|
|
80
|
-
previous_page_id: lowdefy-schema
|
|
81
|
-
next_page_title: Blocks
|
|
82
|
-
next_page_id: blocks
|