Lowdefy

https://docs.lowdefy.com
Admin
Lowdefy is a low-code framework for building internal tools and web applications with minimal...
Tokens:386,165
Snippets:3,719
Trust Score:7.5
Update:5 months ago
Show doc for...
Tokens:
Raw
### Basic AxiosHttp Request Example

Source: https://docs.lowdefy.com/AxiosHttp

A minimal example demonstrating how to configure an AxiosHttp connection and make a GET request to fetch posts.

```APIDOC
## Basic AxiosHttp Request Example

This example shows a basic setup for an `AxiosHttp` connection and a request to retrieve posts.

### Configuration

```yaml
lowdefy: 5.1.0
name: Lowdefy starter
connections:
  - id: my_api
    type: AxiosHttp
    properties:
      baseURL: https://jsonplaceholder.typicode.com

pages:
  - id: welcome
    type: PageHeaderMenu
    requests:
      - id: get_posts
        type: AxiosHttp
        connectionId: my_api
        properties:
          url: /posts
    events:
      onInit:
        - id: fetch_get_posts
          type: Request
          params: get_posts
    blocks:
      - id: rest_data
        type: Markdown
        properties:
          content:
            _string.concat:
              - | 
                ```yaml
              - _custom_yaml_stringify:
                  - _request: get_posts
              - | 
                ```
```

### Explanation

*   A connection with `id: my_api` of type `AxiosHttp` is defined with a `baseURL`.
*   A request with `id: get_posts` uses the `my_api` connection and specifies the `url` as `/posts`.
*   The `onInit` event triggers the `get_posts` request.
*   The response from the `get_posts` request is then displayed in a Markdown block.
```

--------------------------------

### Initialize and Run Lowdefy App

Source: https://docs.lowdefy.com/introduction

Use this command to set up a new Lowdefy application and start a local development server. Ensure Node.js v18+ and pnpm are installed.

```bash
pnpx lowdefy@4 init && pnpx lowdefy@4 dev
```

--------------------------------

### Start Lowdefy Production Server

Source: https://docs.lowdefy.com/cli

The `start` command initiates a Lowdefy production server. Ensure your app is built using the `build` command before starting. Customize the port with `--port` or the server directory with `--server-directory`.

```bash
pnpx lowdefy@4 start
```

--------------------------------

### NPM Start Command

Source: https://docs.lowdefy.com/Splitter

The command to start a React development server using npm. This compiles the application and serves it locally.

```bash
$ npm start
```

--------------------------------

### Alert Component Examples

Source: https://docs.lowdefy.com/Alert

Illustrative examples of how to use the Alert component with various configurations, including theme overrides for appearance.

```APIDOC
## Alert Component Examples

### Description

Examples demonstrating the usage and customization of the Alert component.

### Example 1: Basic Alert

```yaml
- type: alert
  message: This is a basic info alert.
```

### Example 2: Alert with Description and Icon

```yaml
- type: alert
  message: "Important message"
  description: "This alert provides additional details."
  type: warning
  showIcon: true
```

### Example 3: Alert with Theme Overrides (Large Border Radius)

```yaml
- type: alert
  message: "Alert with softer appearance."
  theme:
    borderRadius: 16
    borderRadiusLG: 16
```

### Example 4: Alert with Theme Overrides (Sharp Corners)

```yaml
- type: alert
  message: "Alert with sharp corners."
  theme:
    borderRadius: 0
    borderRadiusLG: 0
```

### Example 5: Fully Customized Alert

```yaml
- type: alert
  message: "Customized alert message."
  description: "This alert has custom padding, font size, and icon size."
  type: success
  theme:
    defaultPadding: "16px 24px"
    withDescriptionPadding: "30px 40px"
    fontSize: 16
    fontSizeLG: 18
    withDescriptionIconSize: 32
    borderRadius: 12
```
```

--------------------------------

### Basic CallAPI Action Example

Source: https://docs.lowdefy.com/lowdefy-api

This example demonstrates how to use the `CallAPI` action within a Lowdefy application to fetch user data. It includes setting state with the response and displaying it.

```yaml
blocks:
  - id: user_id_input
    type: TextInput
    properties:
      title: User ID

  - id: fetch_user_btn
    type: Button
    properties:
      title: Fetch User Data
    events:
      onClick:
        - id: call_user_api
          type: CallAPI
          params:
            endpoint_id: get_user_data
            payload:
              user_id:
                _state: user_id_input

        - id: set_user_data
          type: SetState
          params:
            user_data:
              _actions: call_user_api.response.user

  - id: user_display
    type: Descriptions
    properties:
      items:
        _state: user_data

```

--------------------------------

### Example .env File for Sentry Integration

Source: https://docs.lowdefy.com/logger

An example `.env` file demonstrating the necessary environment variables for Sentry integration, including DSNs and auth token.

```dotenv
# .env
SENTRY_DSN=https://abc123@o123456.ingest.sentry.io/1234567
NEXT_PUBLIC_SENTRY_DSN=https://abc123@o123456.ingest.sentry.io/1234567
SENTRY_AUTH_TOKEN=your-auth-token

```

--------------------------------

### Example: Send a reminder email

Source: https://docs.lowdefy.com/SendGridMail

An example demonstrating how to configure a SendGridMail connection and send a reminder email using the SendGridMailSend request.

```APIDOC
## Example: Send a reminder email

This example shows how to set up a SendGridMail connection and use it to send a reminder email.

### Connections

```yaml
connections:
  - id: my_sendgrid
    type: SendGridMail
    properties:
      apiKey:
        _secret: SENDGRID_API_KEY
      from: reminders@example.org
```

### Requests

```yaml
requests:
  - id: send_reminder
    type: SendGridMailSend
    connectionId: my_sendgrid
    properties:
      to: Harry Potter <harry@example.org>
      subject: Reminder for Mr. Potter to water the 🌱
      text: |
        Hi Harry

        Please remember to water the magic plants today :)

        Thank you
```
```

--------------------------------

### Redis Request Examples

Source: https://docs.lowdefy.com/Redis

Examples of how to perform various Redis operations using Lowdefy requests, including setting and getting key-value pairs, and using conditional commands.

```APIDOC
## Redis Requests

### Description
Execute Redis commands from your Lowdefy application. You can specify the command, parameters, and modifiers.

### Properties
- **command** (string): **Required** - Redis command to be executed.
- **parameters** (array): An array of parameters to be passed to the Redis command.
- **modifiers** (object): Modifiers to be passed to the Redis command.

### Examples
#### Setting a key-value pair in Redis:
```yaml
id: redisRequest
type: Redis
connectionId: redis
properties:
  command: set
  parameters:
    - key
    - value
```

#### Getting a value from Redis:
```yaml
id: redisRequest
type: Redis
connectionId: redis
properties:
  command: get
  parameters:
    - key
```

#### Setting a key-value pair only if the key does not exist (NX modifier):
```yaml
id: redisRequest
type: Redis
connectionId: redis
properties:
  command: set
  parameters:
    - key
    - value
  modifiers:
    nx: true
```
```

--------------------------------

### Block Loading and Skeleton Screen Example

Source: https://docs.lowdefy.com/blocks

This example illustrates how to control block loading behavior and implement a skeleton screen. The paragraph block will display a skeleton while the 'done' state is false, providing a visual cue during loading.

```yaml
pages:
  - id: page_one
    type: Box
    blocks:
      # ...
      - id: paragraph_one
        type: Paragraph
        loading:
          _eq:
            - _state: done
            - false
        skeleton:
          type: SkeletonParagraph
          properties:
            lines: 1
        properties:
          content: Lorem ipsum dolor sit amet.
      # ...
```

--------------------------------

### Install Lowdefy CLI

Source: https://docs.lowdefy.com/Paragraph

Install the Lowdefy command-line interface globally.

```bash
npm install lowdefy
```

--------------------------------

### Complete Authentication Test Suite Example

Source: https://docs.lowdefy.com/e2e-auth

A comprehensive example demonstrating various authentication testing scenarios, including authenticated access to protected pages, public pages without a user, and protected pages requiring authentication.

```javascript
import { test } from './fixtures.js';

test('protected page loads with authenticated user', async ({ ldf }) => {
  // Default user from mocks.yaml is used (has admin role)
  await ldf.goto('/home');
  await ldf.url().expect.toBe('/home');
});

test('public page loads without user', async ({ ldf }) => {
  await ldf.user(null);
  await ldf.goto('/login');
  await ldf.url().expect.toBe('/login');
});

test('protected page redirects without user', async ({ ldf }) => {
  await ldf.user(null);
  await ldf.goto('/home');
  await ldf.url().expect.toBe('/login');
});
```

--------------------------------

### Start Lowdefy Development Server

Source: https://docs.lowdefy.com/cli

Start a local development server for Lowdefy apps. The server watches for file changes and automatically reloads the app. This command is not recommended for production use. Options control configuration, directories, telemetry, log level, browser opening, port, and file watching.

```bash
lowdefy dev --config-directory <config-directory> --dev-directory <dev-directory> --disable-telemetry --log-level <level> --no-open --port <port> --ref-resolver <ref-resolver-function-path> --watch <paths...> --watch-ignore <patterns...> --skip-codemod-check
```

--------------------------------

### Wait Action Example

Source: https://docs.lowdefy.com/Wait

Example of using the Wait action to pause for 500 milliseconds. Ensure the 'ms' parameter is a positive integer.

```yaml
- id: wait
  type: Wait
  params:
    ms: 500

```

--------------------------------

### Initialize Lowdefy Configuration

Source: https://docs.lowdefy.com/Title

Use this command to initialize the Lowdefy configuration. Ensure Lowdefy is installed first.

```javascript
const config = lowdefy.init()
```

--------------------------------

### Unified YAML Patch Example

Source: https://docs.lowdefy.com/DiffGit

This example shows the output format of a unified YAML patch generated by DiffGit, highlighting additions and removals.

```yaml
order:    notes:      - draft-   status: pending-   total: 10+     - sent+   status: paid+   total: 15
```

--------------------------------

### PasswordInput Examples

Source: https://docs.lowdefy.com/PasswordInput

Illustrates various configurations and use cases for the PasswordInput component.

```APIDOC
## PasswordInput Examples

### Sizes
Demonstrates the different size options for the PasswordInput.

```yaml
properties:
  size_small: 
    type: PasswordInput
    size: small
  size_default: 
    type: PasswordInput
  size_large: 
    type: PasswordInput
    size: large
```

### Visibility Toggle
Shows PasswordInput with and without the visibility toggle.

```yaml
properties:
  toggle_on: 
    type: PasswordInput
    visibilityToggle: true
  toggle_off: 
    type: PasswordInput
    visibilityToggle: false
  toggle_disabled: 
    type: PasswordInput
    visibilityToggle: false
    disabled: true
```

### Placeholder Variations
Illustrates different placeholder configurations.

```yaml
properties:
  placeholder_default: 
    type: PasswordInput
    placeholder: Default Placeholder
  placeholder_hint: 
    type: PasswordInput
    placeholder: Use at least 8 characters with a mix of letters, numbers & symbols.
  placeholder_none: 
    type: PasswordInput
    placeholder: null
```

### Disabled State
Shows disabled PasswordInput variations.

```yaml
properties:
  disabled_empty: 
    type: PasswordInput
    disabled: true
  disabled_no_toggle: 
    type: PasswordInput
    disabled: true
    visibilityToggle: false
```

### Borderless Variant
Demonstrates the borderless variant of the PasswordInput.

```yaml
properties:
  borderless_default: 
    type: PasswordInput
    variant: borderless
  borderless_disabled: 
    type: PasswordInput
    variant: borderless
    disabled: true
```

### AutoFocus
Shows the autofocus behavior of the PasswordInput.

```yaml
properties:
  autofocus_on: 
    type: PasswordInput
    autoFocus: true
  autofocus_off: 
    type: PasswordInput
    autoFocus: false
```

### Label Options
Illustrates various label configurations.

```yaml
properties:
  label_default: 
    type: PasswordInput
    label:
      title: Default Label
  label_custom_title: 
    type: PasswordInput
    label:
      title: **Bold** Label Title
  label_no_colon: 
    type: PasswordInput
    label:
      title: No Colon
      colon: false
  label_right_align: 
    type: PasswordInput
    label:
      title: Right Aligned
      align: right
  label_disabled: 
    type: PasswordInput
    label:
      title: Disabled Label
      disabled: true
```

### Label Inline
Demonstrates inline label configurations.

```yaml
properties:
  inline_default: 
    type: PasswordInput
    label:
      title: Inline Label
      inline: true
  inline_right: 
    type: PasswordInput
    label:
      title: Inline Right
      inline: true
      align: right
  inline_wide: 
    type: PasswordInput
    label:
      title: Wide Label Span
      inline: true
      span: 4
```

### Label Extra & Feedback
Shows configurations for label extra text and validation feedback.

```yaml
properties:
  label_extra: 
    type: PasswordInput
    label:
      title: With Extra Text
      extra: Use at least 8 characters with a mix of letters, numbers & symbols.
  label_extra_html: 
    type: PasswordInput
    label:
      title: Extra With HTML
      extra: "Tip: avoid using personal information."
  label_no_feedback: 
    type: PasswordInput
    label:
      title: No Validation Feedback
      hasFeedback: false
```

### CSS Styles & Class Names
Demonstrates applying custom styles and class names.

```yaml
properties:
  style_element: 
    type: PasswordInput
    style:
      element: 
        width: 200px
  style_label: 
    type: PasswordInput
    label:
      title: Custom Label Style
      style:
        element: 
          color: red
  style_extra: 
    type: PasswordInput
    label:
      title: Styled Extra
      extra: This extra text is styled.
      style:
        extra:
          color: blue
  style_feedback: 
    type: PasswordInput
    label:
      title: Styled Feedback
      style:
        feedback:
          color: green
  class_element: 
    type: PasswordInput
    class:
      element: 
        - "text-blue-500"
  class_custom: 
    type: PasswordInput
    class:
      custom: 
        - "my-custom-class"
```

### Combined State Examples
Examples combining multiple properties.

```yaml
properties:
  combo_large_no_toggle: 
    type: PasswordInput
    size: large
    visibilityToggle: false
    variant: borderless
  combo_small_disabled_toggle: 
    type: PasswordInput
    size: small
    disabled: true
    visibilityToggle: true
```

### Theme Token Overrides
Shows how to override Ant Design theme tokens.

```yaml
properties:
  theme_large_radius: 
    type: PasswordInput
    theme:
      borderRadiusLG: 20
  theme_purple: 
    type: PasswordInput
    theme:
      activeBorderColor: "purple"
      activeShadow: "0 0 0 2px rgba(128, 0, 128, 0.2)"
  theme_large_pill: 
    type: PasswordInput
    theme:
      borderRadiusLG: 50
  theme_font_padding: 
    type: PasswordInput
    theme:
      fontSize: 24
      padding: 16
  theme_inline_pink: 
    type: PasswordInput
    label:
      inline: true
    theme:
      activeBorderColor: "pink"
      activeShadow: "0 0 0 2px rgba(255, 192, 203, 0.2)"
```

### PasswordInput in Login Form
An example of PasswordInput used within a login form.

```yaml
authentication:
  login_card:
    type: Card
    content:
      login_form:
        type: Form
        fields:
          username: 
            type: TextInput
            label: Username
          password: 
            type: PasswordInput
            label: Password
            label:
              extra: Must be at least 8 characters.
        actions:
          sign_in: 
            type: Button
            content: Sign In
```

### PasswordInput in Account Security
An example of PasswordInput used in an account security form for changing passwords.

```yaml
authentication:
  applied2_security_card:
    type: Card
    content:
      password_change_form:
        type: Form
        fields:
          current_password: 
            type: PasswordInput
            label: Current Password
          new_password: 
            type: PasswordInput
            label: New Password
            label:
              extra: Use at least 8 characters with a mix of letters, numbers, and symbols.
          confirm_password: 
            type: PasswordInput
            label: Confirm New Password
            label:
              extra: Must match the new password above.
        actions:
          update_password: 
            type: Button
            content: Update Password
```
```

--------------------------------

### Basic Checkbox Examples

Source: https://docs.lowdefy.com/CheckboxSwitch

Demonstrates the basic usage of the CheckboxSwitch component.

```APIDOC
## Basic Checkbox

### Description

Single checkbox for boolean input.

### Endpoint

N/A (Component Usage)

### Parameters

N/A (Component Properties)

### Request Example

```json
{
  "basic_default": false,
  "basic_with_desc": false,
  "basic_simple": false
}
```

### Response

N/A (Component State)
```

--------------------------------

### Basic MultipleSelector Configuration

Source: https://docs.lowdefy.com/MultipleSelector

Demonstrates the basic setup for a MultipleSelector with string and number options.

```yaml
basic_multi: []
```

```yaml
basic_placeholder: []
```

```yaml
prim_strings: []
```

```yaml
prim_numbers: []
```

--------------------------------

### Basic AutoComplete Example

Source: https://docs.lowdefy.com/AutoComplete

A simple AutoComplete input for selecting fruits.

```yaml
basic: null
```

--------------------------------

### Event Try-Catch Actions Example

Source: https://docs.lowdefy.com/events-and-actions

Example demonstrating how to use 'try' and 'catch' actions to handle errors thrown by event actions. This ensures that if an action in the 'try' block fails, the actions in the 'catch' block are executed.

```yaml
- id: block_with_actions
  type: Block
  properties:
    # ...
  events:
    onEvent1:
      try:
        - id: action1
          type: ActionType1
          params:
            # ...
        - id: action2
          type: ActionType2
      catch:
        - id: unsuccessful
          type: ActionType1
          params:
            # ...
```

--------------------------------

### Install Lowdefy CLI Globally

Source: https://docs.lowdefy.com/cli

Install the Lowdefy CLI globally using pnpm for system-wide access. This allows running commands directly using the `lowdefy` executable.

```bash
pnpm add -g lowdefy
```

--------------------------------

### Run App with Docker Compose

Source: https://docs.lowdefy.com/docker

Command to start the Lowdefy application defined in the docker-compose.yaml file.

```bash
docker compose up

```

--------------------------------

### Reduce array with initial value

Source: https://docs.lowdefy.com/_array

Provide an initialValue to _array.reduce to start the accumulation from a specific number. This example starts summing from 10.

```yaml
sum:
  _array.reduce:
    on: [1, 2, 3, 4]
    callback:
      _function:
        __sum:
          - __args: 0
          - __args: 1
    initialValue: 10
```

--------------------------------

### Signup Button with authUrl.urlQuery

Source: https://docs.lowdefy.com/login-and-logout

This example demonstrates how to use the `Login` action with the `authUrl.urlQuery` parameter to specifically request the signup screen from the OAuth provider. This is useful for initiating a signup flow instead of a standard login.

```yaml
id: Signup
type: Button
events:
  onClick:
    - id: signup
      type: Login
      params:
        authUrl:
          urlQuery:
            screen_hint: signup
```

--------------------------------

### MonthSelector in Subscription Billing

Source: https://docs.lowdefy.com/MonthSelector

Illustrates the use of the MonthSelector within a subscription billing setup for selecting the billing start month.

```yaml
applied3_billing_card: null
```

--------------------------------

### Scaffold E2E Testing Setup

Source: https://docs.lowdefy.com/e2e-getting-started

Run this command in your project root to set up end-to-end testing. It detects your app, offers MongoDB support, creates test files, and updates package.json and .gitignore.

```bash
npx @lowdefy/e2e-utils
```

--------------------------------

### Confetti Action using js-confetti

Source: https://docs.lowdefy.com/plugins-actions

An example action that uses the js-confetti package to display confetti with customizable emojis and parameters. Ensure the js-confetti package is installed.

```javascript
// Confetti.js
import JSConfetti from 'js-confetti';

async function Confetti({ params }) {
  const jsConfetti = new JSConfetti();
  const { emojis, confettiRadius = 3, confettiNumber = 50, emojiSize = 10 } = params;
  jsConfetti.addConfetti({
    emojis,
    confettiRadius,
    confettiNumber,
    emojiSize,
  });
}

export default Confetti;

```

--------------------------------

### Start the Lowdefy Development Server

Source: https://docs.lowdefy.com/tutorial-start

Launch the Lowdefy development server to preview your application locally. The server will automatically reload when configuration files are changed.

```bash
pnpx lowdefy@4 dev
```

--------------------------------

### Call a JSON API Endpoint with Fetch

Source: https://docs.lowdefy.com/Fetch

Example of using the Fetch component to make a GET request to a JSON API endpoint and process the response as JSON.

```yaml
- id: fetch
  type: Fetch
  params:
    url: https://example.com/api/products
    options:
      method: GET
    responseFunction: json
```

--------------------------------

### Page State Example Output

Source: https://docs.lowdefy.com/page-and-app-state

This JSON demonstrates the structure of the 'state' object after the SetState action has been executed.

```json
{
  "Name": "Alice", 
  "Age": 99, 
  "person": {
    "name": "Alice",
    "age": 99,
    "example": true
  }
}
```

--------------------------------

### Implement Custom Operator: Multiply by 11

Source: https://docs.lowdefy.com/plugins-operators

Example of a custom operator that multiplies a number by 11. Ensure operator names start with an underscore and follow snake_case convention.

```javascript
function _times_eleven({ params }) {
  return params.number * 11;
}

export default _times_eleven;
```

--------------------------------

### Get Value from Array using _get

Source: https://docs.lowdefy.com/_get

Accesses an element from an array using its numerical index. Arrays are 0-indexed. This example retrieves the 'name' property from the first object in the array.

```yaml
_get:
  from:
    - id: 1
      name: Joe
    - id: 2
      Name: Dave
  key: 0.name
```

--------------------------------

### Initialize Lowdefy for Vercel Deployment

Source: https://docs.lowdefy.com/cli

Set up the necessary scripts and files for deploying a Lowdefy application on Vercel. This includes creating a `deploy` directory, a `vercel.install.sh` script, and a README with configuration instructions. Options control the config directory, telemetry, and log level.

```bash
lowdefy init-vercel --config-directory <config-directory> --disable-telemetry --log-level <level>
```

--------------------------------

### Get Single Row from Google Sheet by Filter

Source: https://docs.lowdefy.com/GoogleSheet

Retrieve a specific row from a Google Sheet using `GoogleSheetGetOne` with a filter. This example fetches the row where the 'name' is exactly 'Zarya'.

```yaml
requests:
  - id: get_10_rows
    type:  GoogleSheetGetOne
    connectionId: google_sheets
    properties:
      filter:
        name:
          $eq: Zarya
```

--------------------------------

### Button with Loading State Example

Source: https://docs.lowdefy.com/Spinner

Configure a button to display a loading spinner when clicked, indicating an ongoing process. This provides visual feedback to the user.

```yaml
type: button
properties:
  text: Submit Application
  loading: true
```

--------------------------------

### Get Google Sheet Rows by Filter (Age > 25)

Source: https://docs.lowdefy.com/GoogleSheet

Fetch rows from a Google Sheet that meet specific criteria using the `filter` property in `GoogleSheetGetMany`. This example retrieves records where the 'age' is greater than 25.

```yaml
requests:
  - id: get_10_rows
    type:  GoogleSheetGetMany
    connectionId: google_sheets
    properties:
      filter:
        age:
          $gt: 25
```

--------------------------------

### Responsive Layout Example

Source: https://docs.lowdefy.com/layout-overview

Demonstrates how to set responsive layout properties for a block, changing its span based on screen size. `md` breakpoint applies to screens smaller than 768px.

```yaml
id: responsive_block
type: Box
layout:
  span: 12
  md:
    span: 24
```

--------------------------------

### String Trim Start Method

Source: https://docs.lowdefy.com/_string

Removes whitespace from the start of a string.

```APIDOC
## _string.trimStart

### Description
Removes whitespace from the start of a string.

### Method
N/A (Function call)

### Endpoint
N/A

### Parameters
#### Arguments Object
- **string** (string) - Required - The string to trim.

#### Arguments Array
- **string** (string) - Required - The string to trim.

### Request Example
```json
{
  "string": "   hello world"
}
```

### Response
#### Success Response (string)
- The string with leading whitespace removed.

#### Response Example
```json
"hello world"
```
```

--------------------------------

### Login Page with onMount Redirect

Source: https://docs.lowdefy.com/login-and-logout

This example shows a login page that redirects users to 'page1' if they are already logged in, or initiates the login flow if they are not. It uses the `Login` action with a `callbackUrl` to specify the redirect destination after successful login.

```yaml
id: login
type: Box
events:
  onMount:
    # Redirect to "page1" if user is already logged in.
    - id: logged_in_redirect
      type: Link
      skip:
        _eq:
          - _user: sub
          - null
    # Call the Login action to log the user in.
    - id: login
      type: Login
      skip:
        _ne:
          - _user: sub
          - null
      params:
        # Redirect to "page1" after login is complete.
        callbackUrl:
          pageId: page1
```

--------------------------------

### Switch in Settings Panel Example

Source: https://docs.lowdefy.com/Switch

Illustrates how to integrate the Switch component within a settings panel, commonly used for toggling application preferences.

```yaml
comp_settings_card: null
```

--------------------------------

### Get Value from Redis

Source: https://docs.lowdefy.com/Redis

Retrieve a value from Redis by specifying the 'get' command and the key. The connection ID must be correctly set.

```yaml
id: redisRequest
type: Redis
connectionId: redis
properties:
  command: get
  parameters:
    - key
```

--------------------------------

### Run Installed Lowdefy CLI

Source: https://docs.lowdefy.com/cli

Execute the Lowdefy CLI after it has been installed globally or within a project. Replace `<command>` with the desired CLI command.

```bash
lowdefy <command>
```

--------------------------------

### Switch with Multiple :return Statements

Source: https://docs.lowdefy.com/%3Areturn

This example shows how to use :return within a :switch control to provide different responses based on user subscription types. It includes a default case for users without a premium subscription.

```yaml
- id: get_user_subscription
  type: MongoDBFindOne
  connectionId: subscriptions
  properties:
    query:
      user_id:
        _user: id
- :switch:
    - :case:
        _not:
          _step: get_user_subscription
      :then:
        :return:
          plan: "free"
          features: ["basic_access"]
          limit: 10
    - :case:
        _eq:
          - _step: get_user_subscription.type
          - "premium"
      :then:
        :return:
          plan: "premium"
          features: ["full_access", "priority_support", "api_access"]
          limit: -1
  :default:
    :return:
      plan: "standard"
      features: ["standard_access", "email_support"]
      limit: 100
```

--------------------------------

### Lowdefy Configuration File Example

Source: https://docs.lowdefy.com/tutorial-start

This is a sample `lowdefy.yaml` file that defines a basic Lowdefy application, including a page with a header, content, and a button linking to external resources.

```yaml
lowdefy: 5.1.0
name: Lowdefy starter

pages:
  - id: welcome
    type: PageHeaderMenu
    properties:
      title: Welcome
    slots:
      content:
        justify: center
        blocks:
          - id: content_card
            type: Card
            style:
              maxWidth: 800
            blocks:
              - id: content
                type: Result
                properties:
                  title: Welcome to your Lowdefy app
                  subTitle: We are excited to see what you are going to build
                  icon:
                    name: AiOutlineHeart
                    color: '#f00'
                slots:
                  extra:
                    blocks:
                      - id: docs_button
                        type: Button
                        properties:
                          size: large
                          title: Let's build something
                        events:
                          onClick:
                            - id: link_to_docs
                              type: Link
                              params:
                                url: https://docs.lowdefy.com
                                newWindow: true
      footer:
        blocks:
          - id: footer
            type: Paragraph
            properties:
              type: secondary
              content: |
                Made by a Lowdefy 🤖

```

--------------------------------

### Code Block Example

Source: https://docs.lowdefy.com/Html

Example of a JavaScript code block that can be rendered within the Html block. Use the `Html` block for safe HTML rendering.

```javascript
function greet(name) {
  return "Hello, " + name + "!";
}
```

--------------------------------

### Get UTC Minutes

Source: https://docs.lowdefy.com/_date

Use _date.getUTCMinutes to get the minutes (0-59) from a date object, calculated in UTC. This method is important for global time synchronization.

```yaml
_date.getUTCMinutes: date
```

--------------------------------

### Initialize Lowdefy Application

Source: https://docs.lowdefy.com/cli

Initialize a new Lowdefy application by creating essential configuration files like `lowdefy.yaml` and `.gitignore` in the current working directory. Options include disabling telemetry and setting the log level.

```bash
lowdefy init --disable-telemetry --log-level <level>
```

--------------------------------

### Get Month

Source: https://docs.lowdefy.com/_date

Use _date.getMonth to get the month of a date object, where 0 represents January and 11 represents December. Remember that the month is zero-indexed.

```yaml
_date.getMonth: date
```

--------------------------------

### Basic RadioSelector Configuration

Source: https://docs.lowdefy.com/RadioSelector

Demonstrates the basic setup of a RadioSelector with default options. Use this for simple single-choice selections.

```yaml
basic_label_value: null
basic_string_options: null
basic_number_options: null
basic_boolean_options: null
```

--------------------------------

### Basic Layout Example

Source: https://docs.lowdefy.com/Layout

Demonstrates a basic page structure using the Layout block with Header, Content, and Footer.

```APIDOC
## Basic Layout

### Description
This is the main content area. The Layout block wraps Header, Content, and Footer to create a standard page structure.

### Configuration Example
```yaml
- type: layout
  content:
    - type: header
      content: This is the header.
    - type: content
      content: This is the main content area.
    - type: footer
      content: This is the footer.
```
```

--------------------------------

### Get Full Year

Source: https://docs.lowdefy.com/_date

The _date.getFullYear method returns the full four-digit year from a date object. Ensure the input is a valid date object to get the correct year.

```yaml
_date.getFullYear: date
```

--------------------------------

### Get Current Date and Time

Source: https://docs.lowdefy.com/_date

Use the _date.now method to get a date object representing the current moment. This is a convenient way to capture the time of an event or operation.

```yaml
_date.now: null
```

```yaml
_date: now
```

--------------------------------

### Initialize Lowdefy Application

Source: https://docs.lowdefy.com/Paragraph

Use this command to initialize a new Lowdefy application with the latest version.

```bash
npx lowdefy@latest dev
```

--------------------------------

### Request Signup Page from Provider

Source: https://docs.lowdefy.com/Login

Triggers a login action that requests the signup page from the authentication provider by setting the 'screen_hint' URL query parameter to 'signup'.

```yaml
- id: Signup
  type: Button
  events:
    onClick:
      - id: login
        type: Login
        params:
          authUrl:
            urlQuery:
              screen_hint: signup
```

--------------------------------

### AxiosHttp Request Function Example

Source: https://docs.lowdefy.com/plugins-connections

A simplified example of an AxiosHttp request function, demonstrating how to merge connection and request configurations and handle the response. It includes schema validation for request input.

```javascript
import axios from 'axios';
import { mergeObjects } from '@lowdefy/helpers';

import schema from '../schema.js';

async function AxiosHttp({ request, connection }) {
  const config = mergeObjects([connection, request]);
  const res = await axios(config);
  const { status, statusText, headers, method, path, data } = res;
  return { status, statusText, headers, method, path, data };
}

AxiosHttp.schema = schema; // Attached json-schema used to validate request input before the request function is called.
AxiosHttp.meta = {
  checkRead: false,
  checkWrite: false,
};

export default AxiosHttp;

```

--------------------------------

### Required Field Validation Example

Source: https://docs.lowdefy.com/blocks

This example shows how to set a custom required message for a text input field. The field will be marked with a red asterisk and the provided message will be displayed if the field is left empty.

```yaml
- id: name
  type: TextInput
  required: Please provide your name.
  properties:
    title: Name
```

--------------------------------

### Basic Login Action

Source: https://docs.lowdefy.com/Login

Use this snippet to initiate the login flow and return the user to the same page after authentication.

```yaml
- id: login
  type: Login
```

--------------------------------

### Configure OpenID Connect Provider

Source: https://docs.lowdefy.com/OpenIDConnectProvider

This is a simple configuration example for the OpenIDConnectProvider. Typically, only `wellKnown`, `clientId`, and `clientSecret` need to be set. Ensure your secrets are correctly defined in your environment variables.

```yaml
lowdefy: 5.1.0
providers:
  - id: my_provider
    type: OpenIDConnectProvider
    properties:
      wellKnown:
        _secret: OPENID_CONNECT_WELLKNOWN
      clientId:
        _secret: OPENID_CONNECT_CLIENT_ID
      clientSecret:
        _secret: OPENID_CONNECT_CLIENT_SECRET

```

--------------------------------

### Checkbox with No Label (Hidden)

Source: https://docs.lowdefy.com/CheckboxSwitch

Examples of CheckboxSwitch where the label is hidden.

```APIDOC
## Checkbox with No Label (Hidden)

### Description

Checkbox component with its label hidden, useful for cases where only a description is needed.

### Endpoint

N/A (Component Usage)

### Parameters

N/A (Component Properties)

### Request Example

```json
{
  "no_label_desc": false,
  "no_label_plain": false,
  "no_label_html": false
}
```

### Response

N/A (Component State)
```

--------------------------------

### Initialize a New Lowdefy Project

Source: https://docs.lowdefy.com/tutorial-start

Use the Lowdefy CLI to create a new project. This command generates the initial configuration files, including `lowdefy.yaml` and `.gitignore`.

```bash
pnpx lowdefy@4 init
```

--------------------------------

### Disabled Checkbox States

Source: https://docs.lowdefy.com/CheckboxSwitch

Examples of CheckboxSwitch in disabled states.

```APIDOC
## Disabled Checkbox States

### Description

Checkbox component in various disabled states.

### Endpoint

N/A (Component Usage)

### Parameters

N/A (Component Properties)

### Request Example

```json
{
  "disabled_unchecked": false,
  "disabled_with_label": false
}
```

### Response

N/A (Component State)
```

--------------------------------

### Initialize state with request result

Source: https://docs.lowdefy.com/SetState

This example shows how to initialize state directly with the result of a request named 'getUser'. This is efficient for setting initial data fetched from an API.

```yaml
- id: initialize
  type: SetState
  params:
    _request: getUser
```

--------------------------------

### Basic Paragraph Initialization

Source: https://docs.lowdefy.com/Paragraph

Initialize a Lowdefy application with a configuration object.

```javascript
const app = lowdefy.init({ config })
```

--------------------------------

### Checkbox with Feedback

Source: https://docs.lowdefy.com/CheckboxSwitch

Examples of CheckboxSwitch demonstrating feedback states.

```APIDOC
## Checkbox with Feedback

### Description

Checkbox component showing validation feedback.

### Endpoint

N/A (Component Usage)

### Parameters

N/A (Component Properties)

### Request Example

```json
{
  "feedback_on": false,
  "feedback_off": false
}
```

### Response

N/A (Component State)
```

--------------------------------

### Try Database Operation with Fallback and Logging

Source: https://docs.lowdefy.com/%3Atry

This snippet demonstrates attempting a database update and falling back to creating a new record if the update fails. It also includes logging for both the fallback action and the completion of the process. Requires a 'database' connection.

```yaml
- :try:
    - id: update_user
      type: MongoDBUpdateOne
      connectionId: database
      properties:
        filter:
          _id:
            _payload: user._id
        update:
          $set:
            last_login:
              _date: now
  :catch:
    - :log:
        message: 'Database update failed, creating new user record'
        user_id:
          _payload: user._id
      :level: warn
    - id: create_user
      type: MongoDBInsertOne
      connectionId: database
      properties:
        doc:
          _id:
            _payload: user._id
          last_login:
            _date: now
          created_at:
            _date: now
  :finally:
    - :log:
        message: 'User login process completed'
      :level: info
- :return:
    success: true
    user_id:
      _payload: user._id
```

--------------------------------

### Checkbox with Inline Label

Source: https://docs.lowdefy.com/CheckboxSwitch

Examples of CheckboxSwitch with inline labels.

```APIDOC
## Checkbox with Inline Label

### Description

Checkbox component configured with inline labels.

### Endpoint

N/A (Component Usage)

### Parameters

N/A (Component Properties)

### Request Example

```json
{
  "inline_basic": false,
  "inline_right": false,
  "inline_wide_span": false
}
```

### Response

N/A (Component State)
```

--------------------------------

### Checkbox with Description Text

Source: https://docs.lowdefy.com/CheckboxSwitch

Examples of CheckboxSwitch with descriptive text.

```APIDOC
## Checkbox with Description Text

### Description

Checkbox component configured with descriptive text.

### Endpoint

N/A (Component Usage)

### Parameters

N/A (Component Properties)

### Request Example

```json
{
  "desc_terms": false,
  "desc_marketing": false,
  "desc_html": false
}
```

### Response

N/A (Component State)
```

--------------------------------

### _dayjs Chain Mode Examples

Source: https://docs.lowdefy.com/_dayjs

Demonstrates how to use the chain mode of the _dayjs operator by passing an array of operations.

```APIDOC
### Chain mode
Pass an array where the first element is the input date (or `"now"`), followed by method calls:

#### Example: Relative Time
```yaml
_dayjs:
  - "now"
  - subtract:
      - 3
      - days
  - fromNow
```

Returns: `"3 days ago"`

#### Example: Format Specific Date
```yaml
_dayjs:
  - "2024-03-15"
  - format: "YYYY-MM-DD"
```

Returns: `"2024-03-15"`

#### Example: Add Month and Format
```yaml
_dayjs:
  - "2024-01-01"
  - add:
      - 1
      - month
  - format: "D MMM YYYY"
```

Returns: `"1 Feb 2024"`

#### Example: Get Start of Month
```yaml
_dayjs:
  - "2024-03-15"
  - startOf: month
  - format: "YYYY-MM-DD"
```

Returns: `"2024-03-01"`

#### Example: Calculate Difference in Days
```yaml
_dayjs:
  - "2024-03-15"
  - diff:
      - "2024-03-10"
      - days
```

Returns: `5`
```

--------------------------------

### Link to Home Page

Source: https://docs.lowdefy.com/Link

Navigate to the configured home page by setting the 'home' parameter to true.

```yaml
- id: link_home
  type: Link
  params:
    home: true
```

--------------------------------

### MonthSelector Auto Focus

Source: https://docs.lowdefy.com/MonthSelector

Illustrates the auto-focus behavior of the MonthSelector, with examples for when it is on or off.

```yaml
month_autofocus_off: null
month_autofocus_on: null
```

--------------------------------

### CheckboxSwitch in Registration Form

Source: https://docs.lowdefy.com/CheckboxSwitch

Example of CheckboxSwitch integrated into a registration form.

```APIDOC
## CheckboxSwitch in Registration Form

### Description

Demonstrates the CheckboxSwitch component within a typical registration form structure.

### Endpoint

N/A (Component Usage)

### Parameters

N/A (Component Properties)

### Request Example

```json
{
  "applied_reg_card": null
}
```

### Response

N/A (Component State)
```

--------------------------------

### Initialize Lowdefy Dockerfile

Source: https://docs.lowdefy.com/cli

Generate a Dockerfile in the specified config directory to build a Docker image for your Lowdefy application. Options allow specifying the config directory, disabling telemetry, and setting the log level.

```bash
lowdefy init-docker --config-directory <config-directory> --disable-telemetry --log-level <level>
```

--------------------------------

### Implement Copy Text Button

Source: https://docs.lowdefy.com/CopyToClipboard

Example of how to implement a button that copies predefined text to the clipboard when clicked. Ensure the 'copy' parameter is provided with the desired text.

```yaml
- id: copy_button
  type: Button
  properties:
    title: Copy Text
  events:
    onClick:
      - id: copy
        type: CopyToClipboard
        params:
          copy: Lorem ipsum dolor sit amet
        messages:
          success: Copied!
```

--------------------------------

### Checkbox Style Overrides

Source: https://docs.lowdefy.com/CheckboxSwitch

Examples of CheckboxSwitch with custom style overrides.

```APIDOC
## Checkbox Style Overrides

### Description

Checkbox component with custom styles applied to its appearance.

### Endpoint

N/A (Component Usage)

### Parameters

N/A (Component Properties)

### Request Example

```json
{
  "style_background": false,
  "style_warning_bg": false,
  "style_bold_label": false
}
```

### Response

N/A (Component State)
```

--------------------------------

### Checkbox Color Overrides

Source: https://docs.lowdefy.com/CheckboxSwitch

Examples of CheckboxSwitch with custom color overrides.

```APIDOC
## Checkbox Color Overrides

### Description

Checkbox component with overridden colors for different states.

### Endpoint

N/A (Component Usage)

### Parameters

N/A (Component Properties)

### Request Example

```json
{
  "color_green": false,
  "color_orange": false,
  "color_purple": false,
  "color_red": false,
  "color_cyan": false
}
```

### Response

N/A (Component State)
```

--------------------------------

### Force Dark Mode

Source: https://docs.lowdefy.com/SetDarkMode

This example demonstrates how to force the application into dark mode by setting the `darkMode` parameter to 'dark'. This overrides any system or user preferences for light mode.

```yaml
events:
  onClick:
    - id: enable_dark
      type: SetDarkMode
      params:
        darkMode: dark

```

--------------------------------

### Checkbox with Label and Title

Source: https://docs.lowdefy.com/CheckboxSwitch

Examples showcasing CheckboxSwitch with labels and titles.

```APIDOC
## Checkbox with Label and Title

### Description

Checkbox component featuring labels and titles for better context.

### Endpoint

N/A (Component Usage)

### Parameters

N/A (Component Properties)

### Request Example

```json
{
  "label_default": false,
  "label_colon": false,
  "label_no_colon": false
}
```

### Response

N/A (Component State)
```
Tokens:
Raw