@lowdefy/docs 4.0.0-alpha.7 → 4.0.0-alpha.8

package/tutorial/next-steps.yaml

@@ -1,83 +0,0 @@
-# Copyright 2020-2021 Lowdefy, Inc
-
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-
-#     http://www.apache.org/licenses/LICENSE-2.0
-
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-_ref:
-  path: templates/general.yaml.njk
-  vars:
-    pageId: next-steps
-    pageTitle: Next steps
-    section: Tutorial
-    prefetchPages:
-      - overview
-    filePath: tutorial/next-steps.yaml
-    content:
-      - id: body_next_steps
-        type: MarkdownWithCode
-        properties:
-          content: |
-            Congratulations! You have completed the tutorial and built a sort-of functioning app.
-
-            To carry on from here, you have a couple of options
-
-            ### Join the community
-
-            At our [Github Discussions](https://github.com/lowdefy/lowdefy/discussions) page you can get help with any problems you have, share you ideas, ask questions, and show off the apps you have built.
-
-            ### Understand the concepts
-
-            To get a more in-depth understanding of how everything works, you can start [here](/overview).
-
-            ### Play with blocks
-
-            The docs have an interactive playground where you can adjust a block's properties and see how that affects the block in real time. Go look at what you can do with a [`Button`](/Button).
-
-            ### Look at an example app
-
-            One of the best ways to learn is by doing things for yourself. You can clone an example app that is similar to something you want to build, and start experimenting from there.
-
-            ###### CRUD example
-
-            This example shows patterns to implement a data admin app which allows users to view, create new, edit and delete data records.
-
-            - [Example demo.](https://example-crud.lowdefy.com)
-            - [App source code.](https://github.com/lowdefy/lowdefy-example-crud)
-
-            ###### Survey example
-
-            This is a simple customer survey example built with Lowdefy. With this example we demonstrate how simple it is to define a public webform and thank you page in Lowdefy.
-
-            - [Example demo.](https://example-survey.lowdefy.com)
-            - [App source code.](https://github.com/lowdefy/lowdefy-example-survey)
-
-            ###### Case management (ticketing) system example
-
-            This example focuses on building a rich UI for a hypothetical case management app, in a customer relations setting.
-
-            - [Example demo.](https://example-case-management.lowdefy.com)
-            - [App source code.](https://github.com/lowdefy/lowdefy-example-case-management)
-
-            ###### Movies reporting example
-
-            This example demonstrates useful patterns for building a BI report/dashboard pages in Lowdefy. It connects to a MongoDB database with the Atlas Movies sample dataset pre-loaded.
-
-            - [Example demo.](https://example-reporting.lowdefy.com)
-            - [App source code.](https://github.com/lowdefy/lowdefy-example-reporting)
-
-      - _ref:
-          path: templates/navigation_buttons.yaml
-          vars:
-            previous_page_title: Requests
-            previous_page_id: tutorial-requests
-            next_page_title: Lowdefy overview
-            next_page_id: overview

package/tutorial/tutorial-actions-operators-config.yaml

@@ -1,142 +0,0 @@
-# Copyright 2020-2021 Lowdefy, Inc
-
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-
-#     http://www.apache.org/licenses/LICENSE-2.0
-
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-_ref:
-  path: templates/general.yaml.njk
-  vars:
-    pageId: tutorial-actions-operators-config
-    pageTitle: Interactive pages config
-    section: Tutorial
-    filePath: tutorial/tutorial-actions-operators-config.yaml
-    content:
-      - id: body_config
-        type: MarkdownWithCode
-        properties:
-          content: |
-            ##### `lowdefy.yaml`
-            ```yaml
-            name: lowdefy-project-template
-            version: CURRENT_LOWDEFY_VERSION
-
-            menus:
-              - id: default
-                links:
-                  - id: new-ticket
-                    type: MenuLink
-                    properties:
-                      icon: AiOutlinedAlert
-                      title: New ticket
-                    pageId: new-ticket
-                  - id: welcome
-                    type: MenuLink
-                    properties:
-                      icon: AiOutlinedHome
-                      title: Home
-                    pageId: welcome
-
-            pages:
-              - _ref: new-ticket.yaml
-              - id: welcome
-                type: PageHeaderMenu
-                #...
-            ```
-
-            ##### `new-ticket.yaml`
-            ```yaml
-            id: new-ticket
-            type: PageHeaderMenu
-            properties:
-              title: New ticket # The title in the browser tab.
-            layout:
-              contentJustify: center # Center the contents of the page.
-            blocks:
-              - id: content_card
-                type: Card
-                layout:
-                  size: 800 # Set the size of the card so it does not fill the full screen.
-                  contentGutter: 16 # Make a 16px gap between all blocks in this card.
-                blocks:
-                  - id: page_heading
-                    type: Title
-                    required: true
-                    properties:
-                      content: Log a ticket # Change the title on the page.
-                      level: 3 # Make the title a little smaller (an html `<h3>`).
-                  - id: ticket_title
-                    type: TextInput
-                    required: true
-                    properties:
-                      title: Title
-                  - id: ticket_type
-                    type: ButtonSelector
-                    required: true
-                    properties:
-                      title: Ticket type
-                      options: # Set the allowed options
-                        - Feature request
-                        - Bug report
-                        - Question
-                  - id: ticket_description
-                    type: TextArea
-                    properties:
-                      title: Description
-                  - id: confirm_restart
-                    type: ButtonSelector
-                    visible: # Test if block should be visible to the user
-                      _eq: # Equals operator
-                        - _state: ticket_type # Get the ticket_type value from state.
-                        - Bug report
-                    validate:
-                      # Show a warning that shows before validate is called
-                      # and does not block Validate action.
-                      - status: warning
-                        message: If you did not restart your device, we will ask you to restart it.
-                        pass:
-                          _eq:
-                            - _state: confirm_restart
-                            - Yes
-                    properties:
-                      title: Did you restart your device?
-                      label:
-                        colon: false # Hide the label colon
-                      options:
-                        - Yes
-                        - No
-                  - id: reset_button
-                    type: Button
-                    layout:
-                      span: 12 # Set the size of the button (span 12 of 24 columns)
-                    properties:
-                      title: Reset
-                      block: true # Make the button fill all the space available to it
-                      type: default # Make the button a plain button
-                      icon: AiOutlinedClear
-                    events:
-                      onClick:
-                        - id: reset
-                          type: Reset
-                  - id: submit_button
-                    type: Button
-                    layout:
-                      span: 12
-                    properties:
-                      title: Submit
-                      block: true
-                      type: primary # Make the button a primary button with color
-                      icon: AiOutlinedSave
-                    events:
-                      onClick:
-                        - id: validate
-                          type: Validate
-            ```

package/tutorial/tutorial-actions-operators.yaml

@@ -1,436 +0,0 @@
-# Copyright 2020-2021 Lowdefy, Inc
-
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-
-#     http://www.apache.org/licenses/LICENSE-2.0
-
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-_ref:
-  path: templates/general.yaml.njk
-  vars:
-    pageId: tutorial-actions-operators
-    pageTitle: 4. Interactive pages
-    section: Tutorial
-    filePath: tutorial/tutorial-actions-operators.yaml
-    prefetchPages:
-      - tutorial-requests
-    content:
-      - id: tutorial_video
-        type: DangerousMarkdown
-        properties:
-          DOMPurifyOptions:
-            ADD_TAGS:
-              - iframe
-            ADD_ATTR:
-              - allowfullscreen
-              - allow
-              - frameborder
-          content: |
-            <iframe
-              width="800"
-              height="470"
-              src="https://www.youtube.com/embed/s1qMpkxHa3Y" frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-            </iframe>
-      - id: body_reset
-        type: MarkdownWithCode
-        properties:
-          content: |
-            If you have been following along, you can continue with your current config. Else, you can find the config from the previous section [here](/tutorial-add-blocks-config).
-
-            ## Configuring the reset button
-
-            The reset button should reset all the user's inputs. To do this, we can add a reset action to the reset button.
-
-            #### Step 4.1 - Configure the reset button
-
-            Copy the following into the definition of the reset button:
-
-            ##### `new-ticket.yaml`
-            ```yaml
-            id: new-ticket
-            # ...
-            blocks:
-              - id: content_card
-                # ...
-                blocks:
-                  - id: page_heading
-                    # ...
-                    # ...
-                    # ...
-                  - id: reset_button
-                    type: Button
-                    layout:
-                      span: 12
-                    properties:
-                      title: Reset
-                      block: true
-                      type: default
-                      icon: AiOutlinedClear
-            ################ -------- Copy from here -------- ################
-                    events:
-                      onClick:
-                        - id: reset
-                          type: Reset
-            ################ -------- Copy to here ---------- ################
-                  - id: submit_button
-                    type: Button
-                    # ...
-            ```
-
-            If you add some inputs into the form and click the reset button, those inputs should be cleared.
-
-            ### How it works
-
-            Blocks can define events, which they can trigger when certain events happen on the page. You can then define a array of actions, that are executed sequentially when a block triggers an event. The button triggers an event called `onClick` when it gets clicked. We can add an array of action definitions that will be executed when this action is fired. We only added one action, the `Reset` action, that resets the page context to the state it was in when it first loaded.
-
-            ## Required fields
-
-            We should validate the data users are submitting to make sure our app has clean data and works as expected. The `ticket_title` and `ticket_type` fields should be compulsory, and the user should not be able to submit the ticket if they are not completed.
-
-            #### Step 4.2 - Mark fields as required
-
-            To make the fields required, add a required property to the input blocks like this:
-
-            ```yaml
-            - id: ticket_title
-              type: TextInput
-              required: true
-              properties:
-                title: Title
-            ```
-
-            A red star should appear next to each input field, looking like this:
-      - id: example1
-        type: TextInput
-        required: true
-        properties:
-          title: Title
-      - id: body_validate
-        type: MarkdownWithCode
-        properties:
-          content: |
-            We can now add a `Validate` action to the submit button. This will validate the inputs and give an error if any inputs are not filled in.
-
-            #### Step 4.3 - Add a Validate action
-
-            Add the validate action like this:
-
-            ##### `new-ticket.yaml`
-            ```yaml
-            id: new-ticket
-            # ...
-            blocks:
-              - id: content_card
-                # ...
-                blocks:
-                  - id: page_heading
-                    # ...
-                    # ...
-                    # ...
-                  - id: submit_button
-                    type: Button
-                    layout:
-                      span: 12
-                    properties:
-                      title: Submit
-                      block: true
-                      type: primary
-                      icon: AiOutlinedSave
-            ################ -------- Copy from here -------- ################
-                    events:
-                      onClick:
-                        - id: validate
-                          type: Validate
-            ################ -------- Copy to here ---------- ################
-            ```
-
-            Now if we click the submit button and all our inputs aren't complete, a message pops up saying we have validation errors on the page. All the fields that have not been completed are highlighted in red.
-
-            The result should look and work like this. The examples in this tutorial are live versions of the tutorial app, so you can verify that they work like your own app.
-      - id: example2
-        type: PageHeaderMenu
-        properties:
-          style:
-            minHeight: 300px
-          menu:
-            links: []
-        blocks:
-          - id: content_card
-            type: Card
-            layout:
-              contentGutter: 16
-            blocks:
-              - id: page_heading
-                type: Title
-                properties:
-                  content: Log a ticket
-                  level: 3
-              - id: ticket_title
-                type: TextInput
-                required: true
-                properties:
-                  title: Title
-              - id: ticket_type
-                type: ButtonSelector
-                required: true
-                properties:
-                  title: Ticket type
-                  options:
-                    - Feature request
-                    - Bug report
-                    - Question
-              - id: ticket_description
-                type: TextArea
-                properties:
-                  title: Description
-              - id: reset_button
-                type: Button
-                layout:
-                  span: 12
-                properties:
-                  title: Reset
-                  block: true
-                  type: default
-                  icon: AiOutlinedClear
-                events:
-                  onClick:
-                    - id: reset
-                      type: Reset
-              - id: submit_button
-                type: Button
-                layout:
-                  span: 12
-                properties:
-                  title: Submit
-                  block: true
-                  type: primary
-                  icon: AiOutlinedSave
-                events:
-                  onClick:
-                    - id: validate
-                      type: Validate
-      - id: body_visible
-        type: MarkdownWithCode
-        properties:
-          renderHtml: true
-          content: |
-            ### How it works
-
-            The validate action we added to the submit button evaluates all the input blocks on the page, and gives an error if any of them fail the validation. This will also stop the execution of any actions after that action. This means we won't insert the data into our database later. The first time a validate action is called on a page it sets a flag that tells all the input blocks to show their validation errors.
-
-            ## Hiding blocks
-
-            We would like to ask users if they restarted their device if they want to create a bug report. To do this we will add a input block with a `visible` property. This property expects a boolean value, so we will use the [`_eq`](/_eq) [`operator`](/operators) to test if the ticket type is equal to `Bug report`
-
-            #### Step 4.4 - Add a block with a visible condition
-            Add the following [`ButtonSelector`](ButtonSelector) to your app.
-
-            ##### `pages/new-ticket.yaml`
-            ```yaml
-            id: new-ticket
-            # ...
-            blocks:
-              - id: content_card
-                # ...
-                blocks:
-                  # ...
-                  - id: ticket_description
-                    type: TextArea
-                    properties:
-                      title: Description
-            ################ -------- Copy from here -------- ################
-                  - id: confirm_restart
-                    type: ButtonSelector
-                    visible: # Test if block should be visible to the user
-                      _eq: # Equals operator
-                        - _state: ticket_type # Get the ticket_type value from state.
-                        - Bug report
-                    properties:
-                      title: Did you restart your device?
-                      label:
-                        colon: false # Hide the label colon
-                      options:
-                        - Yes
-                        - No
-            ################ -------- Copy to here ---------- ################
-                  - id: reset_button
-                    type: Button
-            ```
-
-            If you select the "Bug report" ticket type, the selector confirming if you restarted your device should appear.
-
-            ### How it works
-
-            If the visible field value is `false`, the block won't be rendered. To change this value while our app is running, we use an operator. Operators evaluate every time something in the app changes, like when a user provides an input.
-
-            We used the [`_eq`](/_eq) operator to check the ticket type is 'Bug report'.
-
-            To get the value of the `ticket_type` input, we use the [`_state`](/_state) operator. This get a value from the page's [`state`](/context-and-state). _The `state` is an object where data the app needs is stored_. All inputs automatically write their values to state, and you can also set values in `state` by using the [`SetState`](/SetState) action.
-
-            ## Validation rules
-
-            We would like to add a validation rule on the `confirm_restart` block to warn users that they should restart their device before creating a bug report.
-
-             #### Step 4.5 - Add a validation rule
-
-             Add the following to your app
-            ##### `pages/new-ticket.yaml`
-            ```yaml
-            id: new-ticket
-            # ...
-            blocks:
-              - id: content_card
-                # ...
-                blocks:
-                  # ...
-                  - id: confirm_restart
-                    type: ButtonSelector
-                    visible: # Test if block should be visible to the user
-                      _eq: # Equals operator
-                        - _state: ticket_type # Get the ticket_type value from state.
-                        - Bug report
-            ################ ------- Copy from here -------- ################
-                    validate:
-                      # Show a warning that shows before validate is called
-                      # and does not block Validate action.
-                      - status: warning
-                        message: If you did not restart your device, we will ask you to restart it.
-                        pass:
-                          _eq:
-                            - _state: confirm_restart
-                            - Yes
-            ################ -------- Copy to here ---------- ################
-                    properties:
-                      title: Did you restart your device?
-                      label:
-                        colon: false # Hide the label colon
-                      options:
-                        - Yes
-                        - No
-            ```
-
-            Your app should now show a warning message if `confirm_restart` is not yes.
-
-            ### How it works
-
-            The `validate` field contains an array of validation rules that can be evaluated using operators.
-
-            If the pass field receives `true`, the rule passes and nothing happens. If the rule fails and the status is error, the `Validate` action will fail, like it did for required fields. If the status is warning, a warning will be shown to the user, but the `Validate` action will still pass.
-
-            Your final new ticket page should look and work like this:
-
-      - id: example3
-        type: PageHeaderMenu
-        properties:
-          style:
-            minHeight: 300px
-          menu:
-            links: []
-        events:
-          onInit:
-            - id: init
-              type: SetState
-              params:
-                example3_number_of_attendees: 2 - 3
-                example3_ticket_type: Bug report
-        blocks:
-          - id: example3_content_card
-            type: Card
-            layout:
-              contentGutter: 16
-            blocks:
-              - id: page_heading
-                type: Title
-                required: true
-                properties:
-                  content: Log a ticket # Change the title on the page.
-                  level: 3 # Make the title a little smaller (an html `<h3>`).
-              - id: ticket_title
-                type: TextInput
-                required: true
-                properties:
-                  title: Title
-              - id: ticket_type
-                type: ButtonSelector
-                required: true
-                properties:
-                  title: Ticket type
-                  options: # Set the allowed options
-                    - Feature request
-                    - Bug report
-                    - Question
-              - id: ticket_description
-                type: TextArea
-                properties:
-                  title: Description
-              - id: confirm_restart
-                type: ButtonSelector
-                visible: # Test if block should be visible to the user
-                  _eq: # Equals operator
-                    - _state: ticket_type # Get the ticket_type value from state.
-                    - Bug report
-                validate:
-                  - status: warning # Show a warning that shows before validate is called and does not block Validate action.
-                    message: If you did not restart your device, we will ask you to restart it.
-                    pass:
-                      _eq:
-                        - _state: confirm_restart
-                        - Yes
-                properties:
-                  title: Did you restart your device?
-                  label:
-                    colon: false # Hide the label colon
-                  options:
-                    - Yes
-                    - No
-              - id: reset_button
-                type: Button
-                layout:
-                  span: 12 # Set the size of the button (span 12 of 24 columns)
-                properties:
-                  title: Reset
-                  block: true # Make the button fill all the space available to it
-                  type: default # Make the button a plain button
-                  icon: AiOutlinedClear
-                events:
-                  onClick:
-                    - id: reset
-                      type: Reset
-              - id: submit_button
-                type: Button
-                layout:
-                  span: 12
-                properties:
-                  title: Submit
-                  block: true
-                  type: primary # Make the button a primary button with color
-                  icon: AiOutlinedSave
-                events:
-                  onClick:
-                    - id: validate
-                      type: Validate
-      - id: body_up_next
-        type: MarkdownWithCode
-        properties:
-          content: |
-            > You can find the final configuration files for this section [here](tutorial-actions-operators-config).
-
-            ## Up next
-
-            Our app doesn't save the form data anywhere when the submit button is clicked. In the next section we will set up a Google Sheets connection, and make a request to save the data in the sheet.
-
-      - _ref:
-          path: templates/navigation_buttons.yaml
-          vars:
-            previous_page_title: Adding blocks
-            previous_page_id: tutorial-add-blocks
-            next_page_title: Requests
-            next_page_id: tutorial-requests