### 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 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 --dev-directory --disable-telemetry --log-level --no-open --port --ref-resolver --watch --watch-ignore --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 --disable-telemetry --log-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 `` with the desired CLI command. ```bash lowdefy ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 --disable-telemetry --log-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) ```