From d968080f1cf6dfc914b95f90b0c10286c2b5ce27 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 17 May 2024 03:58:25 +0000 Subject: [PATCH] deploy: a5ea206a249445583470752434621db0b6d97ce5 --- 3-3/index.html | 10 +++++----- 3-4/index.html | 10 +++++----- 3-5/index.html | 10 +++++----- 4-0/index.html | 10 +++++----- 4-1/index.html | 10 +++++----- 4-2/index.html | 10 +++++----- 4-3-6/index.html | 10 +++++----- 4-3/index.html | 10 +++++----- 4-4/index.html | 10 +++++----- 4-5/index.html | 10 +++++----- 4-8/index.html | 10 +++++----- 4-9/index.html | 12 ++++++------ 404.html | 8 ++++---- ai-agent/index.html | 10 +++++----- airtable/index.html | 10 +++++----- amazons3/index.html | 10 +++++----- appwrite/index.html | 10 +++++----- .../{2ef1edda.4e244ef4.js => 2ef1edda.2885b0d5.js} | 2 +- assets/js/42b3cfdb.116619c4.js | 1 + assets/js/935f2afb.2d008476.js | 1 + assets/js/935f2afb.bf52a474.js | 1 - .../{e260ee44.2e36c685.js => e260ee44.b5c68e76.js} | 2 +- assets/js/main.3c962278.js | 2 ++ ...1.js.LICENSE.txt => main.3c962278.js.LICENSE.txt} | 0 assets/js/main.6950e121.js | 2 -- ...ime~main.aa5caa3d.js => runtime~main.2407267b.js} | 2 +- bar-progress/index.html | 10 +++++----- button/index.html | 10 +++++----- cascader/index.html | 10 +++++----- circle-progress/index.html | 10 +++++----- clickhouse/index.html | 10 +++++----- container/index.html | 10 +++++----- custom-domain/index.html | 10 +++++----- data-grid/index.html | 10 +++++----- date-range/index.html | 10 +++++----- date-time/index.html | 10 +++++----- date/index.html | 10 +++++----- divider/index.html | 10 +++++----- editable-text/index.html | 10 +++++----- elastic-search/index.html | 10 +++++----- event-calendar/index.html | 10 +++++----- event-handler/index.html | 10 +++++----- firebase/index.html | 10 +++++----- form/index.html | 10 +++++----- grid-list/index.html | 10 +++++----- hugging-face-api/index.html | 10 +++++----- hugging-face-endpoint/index.html | 10 +++++----- hydra/index.html | 10 +++++----- icon/index.html | 10 +++++----- illa-flow-introduction/index.html | 10 +++++----- illa-flow-response/index.html | 10 +++++----- illa-flow-webhook/index.html | 10 +++++----- image/index.html | 10 +++++----- index.html | 10 +++++----- input/index.html | 10 +++++----- list/index.html | 10 +++++----- mariadb/index.html | 10 +++++----- menu/index.html | 10 +++++----- microsoft-sql/index.html | 10 +++++----- modal/index.html | 10 +++++----- mongodb/index.html | 10 +++++----- multi-select/index.html | 10 +++++----- mysql/index.html | 10 +++++----- neon/index.html | 10 +++++----- number-input/index.html | 10 +++++----- oracledb/index.html | 10 +++++----- page/index.html | 10 +++++----- pdf/index.html | 10 +++++----- postgresql/index.html | 10 +++++----- privacy-policy/index.html | 10 +++++----- radio-button/index.html | 10 +++++----- radio-group/index.html | 10 +++++----- rate/index.html | 10 +++++----- redis/index.html | 10 +++++----- restapi/index.html | 10 +++++----- run-script/index.html | 10 +++++----- search/index.html | 8 ++++---- select/index.html | 10 +++++----- self-hosted-deployment/index.html | 10 +++++----- server-side-pagination/index.html | 10 +++++----- snowflake/index.html | 10 +++++----- statistics/index.html | 10 +++++----- supabase/index.html | 10 +++++----- switch/index.html | 10 +++++----- table/index.html | 10 +++++----- tabs/index.html | 10 +++++----- terms-of-service/index.html | 10 +++++----- text-area-input/index.html | 10 +++++----- text/index.html | 10 +++++----- tidb/index.html | 10 +++++----- time-picker/index.html | 10 +++++----- time-range/index.html | 10 +++++----- timeline/index.html | 10 +++++----- transformer/index.html | 10 +++++----- upload/index.html | 10 +++++----- upstash/index.html | 10 +++++----- video/index.html | 10 +++++----- zh/3-3/index.html | 10 +++++----- zh/3-4/index.html | 10 +++++----- zh/3-5/index.html | 10 +++++----- zh/4-0/index.html | 10 +++++----- zh/4-1/index.html | 10 +++++----- zh/4-2/index.html | 10 +++++----- zh/4-3-6/index.html | 10 +++++----- zh/4-3/index.html | 10 +++++----- zh/4-4/index.html | 10 +++++----- zh/4-5/index.html | 10 +++++----- zh/4-8/index.html | 10 +++++----- zh/4-9/index.html | 12 ++++++------ zh/404.html | 8 ++++---- zh/ai-agent/index.html | 10 +++++----- zh/airtable/index.html | 10 +++++----- zh/amazons3/index.html | 10 +++++----- zh/appwrite/index.html | 10 +++++----- .../{2ef1edda.2037dee4.js => 2ef1edda.ead3a46b.js} | 2 +- zh/assets/js/42b3cfdb.3909a672.js | 1 - .../assets/js/42b3cfdb.afd5bced.js | 2 +- zh/assets/js/935f2afb.a5d9cb33.js | 1 + zh/assets/js/935f2afb.c677d60f.js | 1 - .../{e260ee44.d64dedc8.js => e260ee44.574efcd3.js} | 2 +- zh/assets/js/main.31d4166c.js | 2 ++ ...d.js.LICENSE.txt => main.31d4166c.js.LICENSE.txt} | 0 zh/assets/js/main.85121f3d.js | 2 -- ...ime~main.cfb503a8.js => runtime~main.a5c2ed07.js} | 2 +- zh/bar-progress/index.html | 10 +++++----- zh/button/index.html | 10 +++++----- zh/cascader/index.html | 10 +++++----- zh/circle-progress/index.html | 10 +++++----- zh/clickhouse/index.html | 10 +++++----- zh/container/index.html | 10 +++++----- zh/custom-domain/index.html | 10 +++++----- zh/data-grid/index.html | 10 +++++----- zh/date-range/index.html | 10 +++++----- zh/date-time/index.html | 10 +++++----- zh/date/index.html | 10 +++++----- zh/divider/index.html | 10 +++++----- zh/editable-text/index.html | 10 +++++----- zh/elastic-search/index.html | 10 +++++----- zh/event-calendar/index.html | 10 +++++----- zh/event-handler/index.html | 10 +++++----- zh/firebase/index.html | 10 +++++----- zh/form/index.html | 10 +++++----- zh/grid-list/index.html | 10 +++++----- zh/hugging-face-api/index.html | 10 +++++----- zh/hugging-face-endpoint/index.html | 10 +++++----- zh/hydra/index.html | 10 +++++----- zh/icon/index.html | 10 +++++----- zh/illa-flow-introduction/index.html | 10 +++++----- zh/illa-flow-response/index.html | 10 +++++----- zh/illa-flow-webhook/index.html | 10 +++++----- zh/image/index.html | 10 +++++----- zh/index.html | 10 +++++----- zh/input/index.html | 10 +++++----- zh/list/index.html | 10 +++++----- zh/mariadb/index.html | 10 +++++----- zh/menu/index.html | 10 +++++----- zh/microsoft-sql/index.html | 10 +++++----- zh/modal/index.html | 10 +++++----- zh/mongodb/index.html | 10 +++++----- zh/multi-select/index.html | 10 +++++----- zh/mysql/index.html | 10 +++++----- zh/neon/index.html | 10 +++++----- zh/number-input/index.html | 10 +++++----- zh/oracledb/index.html | 10 +++++----- zh/page/index.html | 10 +++++----- zh/pdf/index.html | 10 +++++----- zh/postgresql/index.html | 10 +++++----- zh/privacy-policy/index.html | 10 +++++----- zh/radio-button/index.html | 10 +++++----- zh/radio-group/index.html | 10 +++++----- zh/rate/index.html | 10 +++++----- zh/redis/index.html | 10 +++++----- zh/restapi/index.html | 10 +++++----- zh/run-script/index.html | 10 +++++----- zh/search/index.html | 8 ++++---- zh/select/index.html | 10 +++++----- zh/self-hosted-deployment/index.html | 10 +++++----- zh/server-side-pagination/index.html | 10 +++++----- zh/snowflake/index.html | 10 +++++----- zh/statistics/index.html | 10 +++++----- zh/supabase/index.html | 10 +++++----- zh/switch/index.html | 10 +++++----- zh/table/index.html | 10 +++++----- zh/tabs/index.html | 10 +++++----- zh/terms-of-service/index.html | 10 +++++----- zh/text-area-input/index.html | 10 +++++----- zh/text/index.html | 10 +++++----- zh/tidb/index.html | 10 +++++----- zh/time-picker/index.html | 10 +++++----- zh/time-range/index.html | 10 +++++----- zh/timeline/index.html | 10 +++++----- zh/transformer/index.html | 10 +++++----- zh/upload/index.html | 10 +++++----- zh/upstash/index.html | 10 +++++----- zh/video/index.html | 10 +++++----- 195 files changed, 892 insertions(+), 892 deletions(-) rename assets/js/{2ef1edda.4e244ef4.js => 2ef1edda.2885b0d5.js} (98%) create mode 100644 assets/js/42b3cfdb.116619c4.js create mode 100644 assets/js/935f2afb.2d008476.js delete mode 100644 assets/js/935f2afb.bf52a474.js rename assets/js/{e260ee44.2e36c685.js => e260ee44.b5c68e76.js} (77%) create mode 100644 assets/js/main.3c962278.js rename assets/js/{main.6950e121.js.LICENSE.txt => main.3c962278.js.LICENSE.txt} (100%) delete mode 100644 assets/js/main.6950e121.js rename assets/js/{runtime~main.aa5caa3d.js => runtime~main.2407267b.js} (97%) rename zh/assets/js/{2ef1edda.2037dee4.js => 2ef1edda.ead3a46b.js} (97%) delete mode 100644 zh/assets/js/42b3cfdb.3909a672.js rename assets/js/42b3cfdb.3bc755f7.js => zh/assets/js/42b3cfdb.afd5bced.js (65%) create mode 100644 zh/assets/js/935f2afb.a5d9cb33.js delete mode 100644 zh/assets/js/935f2afb.c677d60f.js rename zh/assets/js/{e260ee44.d64dedc8.js => e260ee44.574efcd3.js} (78%) create mode 100644 zh/assets/js/main.31d4166c.js rename zh/assets/js/{main.85121f3d.js.LICENSE.txt => main.31d4166c.js.LICENSE.txt} (100%) delete mode 100644 zh/assets/js/main.85121f3d.js rename zh/assets/js/{runtime~main.cfb503a8.js => runtime~main.a5c2ed07.js} (97%) diff --git a/3-3/index.html b/3-3/index.html index 102656fcdf..f0ec9ef814 100644 --- a/3-3/index.html +++ b/3-3/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 3.3

2023.10.26

🚀 New features​

  • Data grid component
    • Supports displaying 100,000 records.
    • Supports server-side pagination.
    • Supports multiple data types, such as images, tags, buttons, etc.
    • Supports column-based filtering or global quick filtering.
    • Supports data grouping based on specified columns.
    • Supports freezing specified columns to the left or rightmost side.
    • Supports drag-and-drop column width adjustment while browsing.
  • Oracle 9i
    • Building upon our existing support for Oracle versions 9i above, we have now added support for Oracle databases running versions 9i and below. If you are using one of these versions, rest assured that you can confidently use ILLA Cloud.

🐛 Bug fix​

  • Fixed the issue in the Onboarding app where running an Action would result in an error.
  • Fixed the issue in the Event Handler where Boolean value handling was incorrect when the "Only run when" field was left empty.

💅 Polish​

  • Improved component copy-paste functionality
    • Support copying components to different pages or different Container views.
  • Added WebSocket proxy functionality and optimized the issue of disconnection during collaborative editing in Builder for certain regions.
- - +
Skip to main content

V 3.3

2023.10.26

🚀 New features​

  • Data grid component
    • Supports displaying 100,000 records.
    • Supports server-side pagination.
    • Supports multiple data types, such as images, tags, buttons, etc.
    • Supports column-based filtering or global quick filtering.
    • Supports data grouping based on specified columns.
    • Supports freezing specified columns to the left or rightmost side.
    • Supports drag-and-drop column width adjustment while browsing.
  • Oracle 9i
    • Building upon our existing support for Oracle versions 9i above, we have now added support for Oracle databases running versions 9i and below. If you are using one of these versions, rest assured that you can confidently use ILLA Cloud.

🐛 Bug fix​

  • Fixed the issue in the Onboarding app where running an Action would result in an error.
  • Fixed the issue in the Event Handler where Boolean value handling was incorrect when the "Only run when" field was left empty.

💅 Polish​

  • Improved component copy-paste functionality
    • Support copying components to different pages or different Container views.
  • Added WebSocket proxy functionality and optimized the issue of disconnection during collaborative editing in Builder for certain regions.
+ + \ No newline at end of file diff --git a/3-4/index.html b/3-4/index.html index a5aa8ea2ba..694de7d55e 100644 --- a/3-4/index.html +++ b/3-4/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 3.4

2023.11.09

💅 Polish​

  • Dashboard updated: display all apps, resources, AI Agents, Files on homepage dashboard.
  • Updated AI Agent editing page
  • Updates to the data panel on the application editing page:
    • Components are now displayed hierarchically, meaning that components nested within a container will be grouped and displayed within that container.
    • Data properties of each component, action, variable, etc., can now be directly copied.
- - +
Skip to main content

V 3.4

2023.11.09

💅 Polish​

  • Dashboard updated: display all apps, resources, AI Agents, Files on homepage dashboard.
  • Updated AI Agent editing page
  • Updates to the data panel on the application editing page:
    • Components are now displayed hierarchically, meaning that components nested within a container will be grouped and displayed within that container.
    • Data properties of each component, action, variable, etc., can now be directly copied.
+ + \ No newline at end of file diff --git a/3-5/index.html b/3-5/index.html index 398edb6326..a712d93cda 100644 --- a/3-5/index.html +++ b/3-5/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 3.5

2023.11.23

🚀 New features​

  • ILLA Drive Action
    • You can perform the following operations on files in ILLA Drive using actions: list, upload, download, and delete.
  • Directly upload files or pick files via component inspect panel
    • For the following components: Image, Carousel, Video, and Audio.
    • you can now directly select existing files from ILLA Drive or upload new files through the Inspect panel of these components. The selected or uploaded files will be displayed on the respective components.

🐛 Bug fix​

  • Fixed the issue where the "Set router" method was unable to select a child page.

💅 Polish​

  • Optimizations for the image component
    • Supports setting automatic height or fixed height.
    • When set to automatic height, you can specify the image aspect ratio, and the height will be calculated automatically based on the fixed ratio.
    • You can change the shape of the component by setting a radius. For example, setting the radius to 50% when the image ratio is {{1}} will display the image in a circular shape.
- - +
Skip to main content

V 3.5

2023.11.23

🚀 New features​

  • ILLA Drive Action
    • You can perform the following operations on files in ILLA Drive using actions: list, upload, download, and delete.
  • Directly upload files or pick files via component inspect panel
    • For the following components: Image, Carousel, Video, and Audio.
    • you can now directly select existing files from ILLA Drive or upload new files through the Inspect panel of these components. The selected or uploaded files will be displayed on the respective components.

🐛 Bug fix​

  • Fixed the issue where the "Set router" method was unable to select a child page.

💅 Polish​

  • Optimizations for the image component
    • Supports setting automatic height or fixed height.
    • When set to automatic height, you can specify the image aspect ratio, and the height will be calculated automatically based on the fixed ratio.
    • You can change the shape of the component by setting a radius. For example, setting the radius to 50% when the image ratio is {{1}} will display the image in a circular shape.
+ + \ No newline at end of file diff --git a/4-0/index.html b/4-0/index.html index 3bd4fd72e9..3690dc88a4 100644 --- a/4-0/index.html +++ b/4-0/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 4.0

2023.12.07

🚀 New features​

  • Mock data for your actions
    • When the API is not ready yet, you can use Mock data for simulation
  • Create app from an AI Agent
    • By clicking Create app from AI Agent, we will automatically set up the interface and data connections between components and the AI Agent. You can then configure the necessary functionalities for your business on top of this foundation.
  • Actions for SQL databases types such as MySQL, PostgreSQL, MSSQL, etc., now support the ability to set either Safe mode or Unsafe mode.
    • Safe mode: Your SQL can only reference variables in the place of variables, for example, where name = '{{input1.value}}'. This prevents users from compromising your database by inputting statements like '; drop table;' in input1
    • Unsafe mode: When using the unsafe mode, SQL syntax words can also be replaced with variables, such as where {{input1.value}} {{input2.value}} '{{input3.value}}'. However, in this case, the database can be compromised by the content entered by the user. It is not recommended for you to use this mode.

🐛 Bug fix​

  • Fixed an issue where the Data Grid component would throw an error in certain cases when switching the primary key.
- - +
Skip to main content

V 4.0

2023.12.07

🚀 New features​

  • Mock data for your actions
    • When the API is not ready yet, you can use Mock data for simulation
  • Create app from an AI Agent
    • By clicking Create app from AI Agent, we will automatically set up the interface and data connections between components and the AI Agent. You can then configure the necessary functionalities for your business on top of this foundation.
  • Actions for SQL databases types such as MySQL, PostgreSQL, MSSQL, etc., now support the ability to set either Safe mode or Unsafe mode.
    • Safe mode: Your SQL can only reference variables in the place of variables, for example, where name = '{{input1.value}}'. This prevents users from compromising your database by inputting statements like '; drop table;' in input1
    • Unsafe mode: When using the unsafe mode, SQL syntax words can also be replaced with variables, such as where {{input1.value}} {{input2.value}} '{{input3.value}}'. However, in this case, the database can be compromised by the content entered by the user. It is not recommended for you to use this mode.

🐛 Bug fix​

  • Fixed an issue where the Data Grid component would throw an error in certain cases when switching the primary key.
+ + \ No newline at end of file diff --git a/4-1/index.html b/4-1/index.html index 9a5bc3e639..6f3f37aa87 100644 --- a/4-1/index.html +++ b/4-1/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 4.1

2023.12.21

🚀 New features​

  • Tags component
    • A pill list to display color-coded values. It supports custom colors and deterministic assignment, so each unique tag uses a different color.
  • Avatar component
    • A content area to display user information and profile image. It supports a range of image sizes, fallback icon if no image is provided, text if no image or icon is provided, and includes a label and caption.
  • New column type for data grid
    • Added support for Avatar type in the Data Grid component.

🐛 Bug fix​

  • Optimized server-side pagination for the Data Grid component.
  • Fixed the issue with selected data in the List component and Grid List component after switching pages.
- - +
Skip to main content

V 4.1

2023.12.21

🚀 New features​

  • Tags component
    • A pill list to display color-coded values. It supports custom colors and deterministic assignment, so each unique tag uses a different color.
  • Avatar component
    • A content area to display user information and profile image. It supports a range of image sizes, fallback icon if no image is provided, text if no image or icon is provided, and includes a label and caption.
  • New column type for data grid
    • Added support for Avatar type in the Data Grid component.

🐛 Bug fix​

  • Optimized server-side pagination for the Data Grid component.
  • Fixed the issue with selected data in the List component and Grid List component after switching pages.
+ + \ No newline at end of file diff --git a/4-2/index.html b/4-2/index.html index 7867308eaf..58bc1d7309 100644 --- a/4-2/index.html +++ b/4-2/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 4.2

2024.01.04

🚀 New features​

Introducing ILLA Flow, a powerful automated workflow tool that allows you to build automated workflows quickly and integrate with your business tools. Automate tedious tasks and focus on business.

Unlike other similar tools, ILLA Flow is specifically tailored to integrate seamlessly with applications built using ILLA Builder, enabling developers to trigger flows directly within their applications. ILLA Flow beta supports the following features:

  • Workflow Automation: ILLA Flow empowers developers to automate their workflows, eliminating manual tasks and increasing productivity. By defining triggers and actions, developers can create custom workflows that execute seamlessly.
  • Extensive Trigger Options: ILLA Flow provides flexible trigger options, including scheduled triggers and webhook triggers. With scheduled triggers, developers can set specific times for flows to execute, offering precise control over workflow automation. Webhook triggers enable developers to initiate flows based on incoming HTTP requests, enabling seamless integration with external systems and services.
  • Broad Action Support: ILLA Flow offers support for various actions commonly used in development scenarios. This includes integration with PostgreSQL and MySQL databases, allowing developers to perform database operations as part of their workflows. Additionally, ILLA Flow supports REST API integration, enabling developers to interact with external services and perform actions such as data transformation.
  • Seamless Integration with ILLA Builder: ILLA Flow is designed to seamlessly integrate with applications built using ILLA Builder. This integration enables developers to trigger flows directly within their applications, enhancing the overall functionality and automation capabilities of their applications.
  • Customizability and Versatility: ILLA Flow is highly customizable, allowing developers to tailor workflows to their specific requirements. With its versatile capabilities, ILLA Flow can cover a wide range of application scenarios, making it suitable for various development projects.

🐛 Bug fix​

  • Fixed the issue where the selection of events in the audit log was not working properly.
  • Resolved the problem causing the default view of containers to become ineffective.

💅 Polish​

  • Users now have the ability to change the application name within the app itself.
  • Improved data synchronization between the app and the dashboard when making edits to the application name.
- - +
Skip to main content

V 4.2

2024.01.04

🚀 New features​

Introducing ILLA Flow, a powerful automated workflow tool that allows you to build automated workflows quickly and integrate with your business tools. Automate tedious tasks and focus on business.

Unlike other similar tools, ILLA Flow is specifically tailored to integrate seamlessly with applications built using ILLA Builder, enabling developers to trigger flows directly within their applications. ILLA Flow beta supports the following features:

  • Workflow Automation: ILLA Flow empowers developers to automate their workflows, eliminating manual tasks and increasing productivity. By defining triggers and actions, developers can create custom workflows that execute seamlessly.
  • Extensive Trigger Options: ILLA Flow provides flexible trigger options, including scheduled triggers and webhook triggers. With scheduled triggers, developers can set specific times for flows to execute, offering precise control over workflow automation. Webhook triggers enable developers to initiate flows based on incoming HTTP requests, enabling seamless integration with external systems and services.
  • Broad Action Support: ILLA Flow offers support for various actions commonly used in development scenarios. This includes integration with PostgreSQL and MySQL databases, allowing developers to perform database operations as part of their workflows. Additionally, ILLA Flow supports REST API integration, enabling developers to interact with external services and perform actions such as data transformation.
  • Seamless Integration with ILLA Builder: ILLA Flow is designed to seamlessly integrate with applications built using ILLA Builder. This integration enables developers to trigger flows directly within their applications, enhancing the overall functionality and automation capabilities of their applications.
  • Customizability and Versatility: ILLA Flow is highly customizable, allowing developers to tailor workflows to their specific requirements. With its versatile capabilities, ILLA Flow can cover a wide range of application scenarios, making it suitable for various development projects.

🐛 Bug fix​

  • Fixed the issue where the selection of events in the audit log was not working properly.
  • Resolved the problem causing the default view of containers to become ineffective.

💅 Polish​

  • Users now have the ability to change the application name within the app itself.
  • Improved data synchronization between the app and the dashboard when making edits to the application name.
+ + \ No newline at end of file diff --git a/4-3-6/index.html b/4-3-6/index.html index 8954aee377..0a82da58f0 100644 --- a/4-3-6/index.html +++ b/4-3-6/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 4.3.6

2024.01.25

🚀 New features​

  • Added support for AI Agent, allowing the usage of ILLA Flow to run AI Agents.
  • Introduced support for Condition nodes, enabling the input of conditional statements in IF/Else blocks to handle different events based on the results.

💅 Polish​

  • Menu component now supports the "On logo clicked" method, which allows for handling events such as logo clicks for redirection or executing queries.

🐛 Bug fix​

  • Fixed an issue with the pagination of the Data grid component's paginator on the server-side.
- - +
Skip to main content

V 4.3.6

2024.01.25

🚀 New features​

  • Added support for AI Agent, allowing the usage of ILLA Flow to run AI Agents.
  • Introduced support for Condition nodes, enabling the input of conditional statements in IF/Else blocks to handle different events based on the results.

💅 Polish​

  • Menu component now supports the "On logo clicked" method, which allows for handling events such as logo clicks for redirection or executing queries.

🐛 Bug fix​

  • Fixed an issue with the pagination of the Data grid component's paginator on the server-side.
+ + \ No newline at end of file diff --git a/4-3/index.html b/4-3/index.html index f423dc0a38..c27911d7c3 100644 --- a/4-3/index.html +++ b/4-3/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 4.3

2024.01.22

🚀 New features​

  • Introducing the ability to create CRUD apps directly from your database. Now, you can create a fully functional app in just 10 seconds!
  • We've also added the option to create apps from templates, allowing you to seamlessly replace data with just a single click.
- - +
Skip to main content

V 4.3

2024.01.22

🚀 New features​

  • Introducing the ability to create CRUD apps directly from your database. Now, you can create a fully functional app in just 10 seconds!
  • We've also added the option to create apps from templates, allowing you to seamlessly replace data with just a single click.
+ + \ No newline at end of file diff --git a/4-4/index.html b/4-4/index.html index 4d18076d1e..582c79a259 100644 --- a/4-4/index.html +++ b/4-4/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 4.4

2024.02.04

🚀 New features​

  • QR Code component: You can use the QR Code component to convert any URL, code, or string into a QR code.
  • Scanner: You can invoke the camera on mobile devices to scan barcodes or QR codes.
- - +
Skip to main content

V 4.4

2024.02.04

🚀 New features​

  • QR Code component: You can use the QR Code component to convert any URL, code, or string into a QR code.
  • Scanner: You can invoke the camera on mobile devices to scan barcodes or QR codes.
+ + \ No newline at end of file diff --git a/4-5/index.html b/4-5/index.html index 427ba53ac2..4c1dcda787 100644 --- a/4-5/index.html +++ b/4-5/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 4.5

2024.02.07

🚀 New features​

  • Custom domain: You can customize the domain name for your ILLA Cloud team, allowing you to access ILLA Cloud using your own domain name.
- - +
Skip to main content

V 4.5

2024.02.07

🚀 New features​

  • Custom domain: You can customize the domain name for your ILLA Cloud team, allowing you to access ILLA Cloud using your own domain name.
+ + \ No newline at end of file diff --git a/4-8/index.html b/4-8/index.html index e5d5b4ae32..79c2c38111 100644 --- a/4-8/index.html +++ b/4-8/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

V 4.8

2024.05.09

💅 Polish​

Optimized the AI Agent dialogue process for stronger performance during long conversations.

🐛 Bug fix​

Fixed the occasional issue of successful login not redirecting.

- - +
Skip to main content

V 4.8

2024.05.09

💅 Polish​

Optimized the AI Agent dialogue process for stronger performance during long conversations.

🐛 Bug fix​

Fixed the occasional issue of successful login not redirecting.

+ + \ No newline at end of file diff --git a/4-9/index.html b/4-9/index.html index 4cc07e5714..29a5e7081d 100644 --- a/4-9/index.html +++ b/4-9/index.html @@ -10,18 +10,18 @@ - - + +
-
Skip to main content

V 4.9

2024.05.17

💅 Polish​

IP address updated. If your Resource does not allow external network access, you need to add the following IP to the allowlist: +

V 4.9

2024.05.17

💅 Polish​

IP address updated. If your Resource does not allow external network access, you need to add the following IP to the allowlist: 143.198.75.2 146.190.51.14 146.190.35.24 64.23.134.60 -146.190.59.192

- - +146.190.59.192

+ + \ No newline at end of file diff --git a/404.html b/404.html index 0eee211da8..1b059b3792 100644 --- a/404.html +++ b/404.html @@ -10,13 +10,13 @@ - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- - + + \ No newline at end of file diff --git a/ai-agent/index.html b/ai-agent/index.html index 05d9d6eb39..557dd89c2c 100644 --- a/ai-agent/index.html +++ b/ai-agent/index.html @@ -10,19 +10,19 @@ - - + +
-
Skip to main content

AI Agent

Customize the AI Agent according to your needs, limiting the behavior of the GPT model to generate content as per your requirements. Integrate the AI Agent into the ILLA App to make your app more intelligent.

What is AI Agent​

AI Agent is a feature developed based on powerful language models such as OpenAI's GPT-3.5 and GPT-4. It empowers you to edit prompts, allowing you to tailor the capabilities of the large language models according to your specific needs. You can save these modifications as your own AI Agent, enabling quick and convenient access. Additionally, you can also directly utilize AI Agents contributed by other outstanding creators.

Use case​

Explore all AI Agents on illa.ai

Marketing​

Blog generator​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7es/detail +

AI Agent

Customize the AI Agent according to your needs, limiting the behavior of the GPT model to generate content as per your requirements. Integrate the AI Agent into the ILLA App to make your app more intelligent.

What is AI Agent​

AI Agent is a feature developed based on powerful language models such as OpenAI's GPT-3.5 and GPT-4. It empowers you to edit prompts, allowing you to tailor the capabilities of the large language models according to your specific needs. You can save these modifications as your own AI Agent, enabling quick and convenient access. Additionally, you can also directly utilize AI Agents contributed by other outstanding creators.

Use case​

Explore all AI Agents on illa.ai

Marketing​

Blog generator​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7es/detail 1

Email generator​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7eg/detail 2

SEO​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7ep/detail 3

Customer support​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7eh/detail 4

Language​

Language learning​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7eD/detail 5

Translator​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7ek/detail 6

Create AI Agent​

FieldRequired or notDescription
IconRequiredYou can upload images within 500KB, or use AI to generate an icon after filling in the Name. The icon will be displayed in your AI Agent dashboard and, if you contribute the AI Agent to the ILLA Community, it will also be shown in the Community.
NameRequiredName of the AI Agent
DescriptionRequiredA brief description of 160 characters of the AI Agent. You can also generate it after filling in the prompt.
ModeRequiredChat mode : The conversation will be requested along with the current message, previous conversation history, and prompt, resulting in increased token consumption. However, the output will be more accurate as it takes the context of the conversation into account for fine-tuning.Text generation mode:only the current message and prompt are included in the request, resulting in lower token consumption, but it doesn't take the conversation context into consideration for tuning.It's important to note that the conversation history refers to the visible conversation on the screen, and we do not store this information. Once you refresh or close the webpage, the conversation history will not be retained.
PromptRequiredA prompt is a command or instruction that you provide to the language model like GPT. It defines the role or desired output of the model. You can use prompts to instruct the model to perform specific tasks or generate specific types of content. For example, you can use prompts like "Act as an English teacher" or "Please output the results in Markdown format" to guide the model's behavior and generate the desired response.
VariableOptionalVariables allow you to dynamically fill in content within the prompt. A variable consists of a key and a value.The keyrepresents the variable name and cannot contain spaces. It can be freely changed in edit mode but cannot be changed in run mode.The valuerepresents the variable value. Once you enter the variable name, the variable value becomes a required field. After creating a variable, you also need to reference it in the prompt using double curly braces{{variable_name}}. For example, if you create a variable with the key "translate" and the value "English", the prompt can be:Translate the content to {{translate}}. During runtime, the model will actually receive the prompt asTranslate the content to English.
ModelRequiredWe support GPT-3.5-turbo, GPT-3.5-turbo-16k, GPT-4, GPT-4-32k, LLAMA, and others.
Max TokenRequiredThis is used to set the maximum number of tokens allowed per API call. It helps prevent excessive token consumption in a single call, but setting a lower token limit may result in less accurate responses. Different models have different maximum token limits, and you can refer to the official documentation of each model to find out the specific limits.
TemperatureRequiredThe allowed range is 0.1 to 2, but it is typically set between 0.1 and 1. This is used to control the trade-off between response accuracy and randomness in the model's output. When the value is set to a lower level, the output becomes more deterministic and conservative, which may result in increased accuracy. On the other hand, when the value is set to a higher level, the output becomes more creative and random, introducing more variability but potentially reducing accuracy.

Share AI Agent​

Share with team members​

Contribute to community​

Use AI Agent in ILLA App​

How-to​

Demo​

Fork and use​

https://illa.ai/app/ILAfx4p1C71f/detail

- - + + \ No newline at end of file diff --git a/airtable/index.html b/airtable/index.html index 7ec66a1c17..6820bebee4 100644 --- a/airtable/index.html +++ b/airtable/index.html @@ -10,13 +10,13 @@ - - + +
-

Airtable

Airtable is a popular cloud-based relational database and spreadsheet platform that combines the simplicity of a spreadsheet with the complexity of a traditional database. It allows users to create and organize structured data in a user-friendly interface, making it useful for various tasks such as project management, content planning, and data collection.

Set up your Back end on Airtable​

Create an account on Airtable and create your base according to your need.

In order to connect your base to ILLA Cloud, navigate to the developer hub.

air_developer_hub

In Personal Access Token page, click Create new Token.

air_create_new

This will open configuration options for the PAT that you are creating.

First name the PAT, then choose the scopes you'd like this PAT to have access to. Finally, choose what level of access this PAT will have.

air_new_token

Click the create token button, we now have a PAT ready to connect.

Create Airtable in ILLA Cloud​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** at the top of the page, and click **Create New** button.

external_resource

Select Airtable from the database list.

action_list_3

Connect to the database with the required parameters described in Connection Settings below. In this case, fill in the Personal Access Token we copied from Airtable and paste it into Access Token in the configuration.

Click Save Resources to ****create a resource.

The ready Airtable will display as shown.

air_ex_ready

  • Create in Builder

Sign in to your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Airtable from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to the Airtable API.

air_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Access tokenrequireda piece of information that grants a third-party application or service permission to access your Airtable account's data and perform actions on your behalf

Create Actions​

We have created an Airtable resource, we can add the action by selecting Airtable from the action list and choosing the Create action button.

air_resource_list

Now we have added the Airtable API as an action to our building page.

air

Configure Airtable​

PropertiesDescription
Base IDa unique identifier for your Airtable database. You can get the base ID from your base URL. It is usually a string starting with "app".
Table namespecifies the specific table within the chosen base that you want to interact with
Action Typewhat type of operation your integration will perform on the specified table
Transformertransforming data into the style you like using JavaScript

List Records​

retrieves a list of records from a specified table in Airtable

Input

PropertiesRequiredDescription
Viewoptionalorganize and display records based on specific criteria
FieldsoptionalFields refer to the columns within your Airtable table
Filter by formulaoptionaldefine a formula that filters the records you want to retrieve or interact with
Sortoptionalthe order in which records are presented or retrieved
Max recordsoptionallimits the number of records your integration fetches or interacts with in a single request
Page sizeoptionaloften used in scenarios where data needs to be retrieved in multiple batches (pages)
Offsetoptionalspecifies the starting point for retrieving records in a specific page
Cell formatoptionalhow data is displayed within a specific field
Time zoneoptionalensures that date and time calculations and presentations are accurate and consistent
User locationoptionaltailor the integration output based on the user's geographical location or preferences

Get Record​

fetches a specific record from a table by providing the unique record ID

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record

Create Records​

add new records to a table in Airtable

Input

PropertiesRequiredDescription
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Update Record​

modify the values of fields within a single record

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Update Multiple Records​

modify fields in multiple records at once

Input

PropertiesRequiredDescription
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Delete Record​

delete a specific record from a table by providing its record ID

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record

Delete Multiple Records​

delete a specific record from a table by providing its record ID

Input

- - +

Airtable

Airtable is a popular cloud-based relational database and spreadsheet platform that combines the simplicity of a spreadsheet with the complexity of a traditional database. It allows users to create and organize structured data in a user-friendly interface, making it useful for various tasks such as project management, content planning, and data collection.

Set up your Back end on Airtable​

Create an account on Airtable and create your base according to your need.

In order to connect your base to ILLA Cloud, navigate to the developer hub.

air_developer_hub

In Personal Access Token page, click Create new Token.

air_create_new

This will open configuration options for the PAT that you are creating.

First name the PAT, then choose the scopes you'd like this PAT to have access to. Finally, choose what level of access this PAT will have.

air_new_token

Click the create token button, we now have a PAT ready to connect.

Create Airtable in ILLA Cloud​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** at the top of the page, and click **Create New** button.

external_resource

Select Airtable from the database list.

action_list_3

Connect to the database with the required parameters described in Connection Settings below. In this case, fill in the Personal Access Token we copied from Airtable and paste it into Access Token in the configuration.

Click Save Resources to ****create a resource.

The ready Airtable will display as shown.

air_ex_ready

  • Create in Builder

Sign in to your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Airtable from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to the Airtable API.

air_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Access tokenrequireda piece of information that grants a third-party application or service permission to access your Airtable account's data and perform actions on your behalf

Create Actions​

We have created an Airtable resource, we can add the action by selecting Airtable from the action list and choosing the Create action button.

air_resource_list

Now we have added the Airtable API as an action to our building page.

air

Configure Airtable​

PropertiesDescription
Base IDa unique identifier for your Airtable database. You can get the base ID from your base URL. It is usually a string starting with "app".
Table namespecifies the specific table within the chosen base that you want to interact with
Action Typewhat type of operation your integration will perform on the specified table
Transformertransforming data into the style you like using JavaScript

List Records​

retrieves a list of records from a specified table in Airtable

Input

PropertiesRequiredDescription
Viewoptionalorganize and display records based on specific criteria
FieldsoptionalFields refer to the columns within your Airtable table
Filter by formulaoptionaldefine a formula that filters the records you want to retrieve or interact with
Sortoptionalthe order in which records are presented or retrieved
Max recordsoptionallimits the number of records your integration fetches or interacts with in a single request
Page sizeoptionaloften used in scenarios where data needs to be retrieved in multiple batches (pages)
Offsetoptionalspecifies the starting point for retrieving records in a specific page
Cell formatoptionalhow data is displayed within a specific field
Time zoneoptionalensures that date and time calculations and presentations are accurate and consistent
User locationoptionaltailor the integration output based on the user's geographical location or preferences

Get Record​

fetches a specific record from a table by providing the unique record ID

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record

Create Records​

add new records to a table in Airtable

Input

PropertiesRequiredDescription
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Update Record​

modify the values of fields within a single record

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Update Multiple Records​

modify fields in multiple records at once

Input

PropertiesRequiredDescription
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Delete Record​

delete a specific record from a table by providing its record ID

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record

Delete Multiple Records​

delete a specific record from a table by providing its record ID

Input

+ + \ No newline at end of file diff --git a/amazons3/index.html b/amazons3/index.html index 68c51bc969..9eb8b431f1 100644 --- a/amazons3/index.html +++ b/amazons3/index.html @@ -10,13 +10,13 @@ - - + +
-

Amazon S3

Amazon S3 is a highly scalable and secure cloud storage service offered by Amazon Web Services (AWS). When combined with ILLA Cloud, developers can seamlessly integrate Amazon S3 into their applications, leveraging its robust storage capabilities to store and retrieve data efficiently. ILLA Cloud simplifies the integration process, allowing developers to seamlessly connect to Amazon S3 and utilize its powerful features, such as data encryption, versioning, access controls, and seamless scalability. With the integration of Amazon S3 on ILLA Cloud, developers can enhance their applications with reliable and scalable storage solutions, enabling them to focus on building innovative and data-driven experiences.

Create Amazon S3 API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Amazon S3 from the API list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Amazon S3 will display as shown.

amazon_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Amazon S3 from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Amazon S3 API.

amazon_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Bucket nameoptionala unique identifier that represents a storage container in Amazon S3. It provides a logical separation for organizing and accessing your files
S3 ACL for uploaded filesoptionalallows you to define fine-grained access permissions for files within your bucket. It specifies who can perform specific operations, such as reading, writing, or deleting files.
Regionrequiredgeographical location where your Amazon S3 bucket is stored. It determines the physical location of your data and can impact factors like latency and data transfer costs.
Custom S3 endpointoptionalenables you to configure a specific endpoint URL for accessing your Amazon S3 resources. It can be useful for scenarios where you want to use a custom domain or integrate with a CDN (Content Delivery Network).
Access keyrequiredcredentials that authenticate your requests to access Amazon S3
Secret access keyrequiredgenerated when you create an IAM (Identity and Access Management) user or an AWS (Amazon Web Services) access key pair.

Create Actions​

We have created an Amazon S3 resource, we can add the action by selecting Amazon S3 from the action list and choosing the Create action button.

amazon_resource_list

Now we have added the Amazon server as an action to our building page.

amazon

Configure Amazon S3​

Overview​

Method NameDescription
Action Typelist all objects in a bucket, read an object, download an object, delete an object, delete multiple objects, upload data, upload multiple data
Bucket namea unique identifier that represents a storage container in Amazon S3.
Transformertransforming data into the style you like using JavaScript

List all objects in a bucket​

retrieve a list of all objects stored within a specific bucket.

Input

PropertiesRequiredDescription
Prefix to filter resultsoptionalfilter the results to include only objects whose key (name) begins with a specific prefix
Delimiteroptionalspecify a character that separates object key hierarchies
Generate Signed URLoptionalwhether to generate a time-limited URL that provides temporary access to a specific object
Max Keysoptionallimit the maximum number of objects returned in the response

For example, to get all objects in the database.

Output

return an array of objects, each including at least one objectKey property.

amazon_list_all_data

Use {{s31.data}} to get all returned data.

amazon_list_all_code

Read an object​

retrieve the contents of a specific object stored within a bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to get the content of document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of a document

amazon_read_data1

amazon_read_data2

Use {{s31.data}} to get the returned data.

amazon_read_code

Download an object​

retrieve the contents of a specific object stored within a bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to download the document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of a document and download the document to local

amazon_read_data1

Delete an object​

deletes a single object from an S3 bucket.

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to delete the document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of the deleted document

amazon_delete_data

amazon_delete_data1

Delete multiple objects​

deletes multiple objects simultaneously from an S3 bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to delete multiple documents, put {{["images.jpeg", "images-1.png"]}} for Object key.

Output

return the content and metadata of the deleted documents

amazon_delete2_data1

amazon_delete2_data2

Upload data​

uploading an object into a bucket

Input

PropertiesRequiredDescription
Content TyperequiredMIME type of object you are uploading.
Upload object namerequiredthe name of the object you are uploading.
Upload datarequiredthe data you want to upload to Amazon S3.
Timeout for uploading a file (Minute)optionalthe uploading time in minutes before the uploading process is stopped by a timeout error

For example, to delete multiple documents, put text for content type, text.txt for upload object name, and text for upload data.

Output

return the message of whether the document is uploaded successfully

amazon_upload_data1

amazon_upload_data2

Upload multiple data​

upload a list of objects into a bucket

Input

PropertiesRequiredDescription
Content TyperequiredMIME type of object you are uploading.
Upload object name listrequireda list of names of the objects you are uploading.
Upload data listrequireda list of the data you want to upload to Amazon S3.
Timeout for uploading a file (Minute)optionalthe uploading time in minutes before the uploading process is stopped by a timeout error

For example, to delete multiple documents, put text for content type, {{['text.txt', 'text2.txt']}} for upload object name list, and {{['text', 'text2']}} for upload data list.

Output

return the message of whether the documents are uploaded successfully

amazon_upload_data1

amazon_upload_data2

- - +

Amazon S3

Amazon S3 is a highly scalable and secure cloud storage service offered by Amazon Web Services (AWS). When combined with ILLA Cloud, developers can seamlessly integrate Amazon S3 into their applications, leveraging its robust storage capabilities to store and retrieve data efficiently. ILLA Cloud simplifies the integration process, allowing developers to seamlessly connect to Amazon S3 and utilize its powerful features, such as data encryption, versioning, access controls, and seamless scalability. With the integration of Amazon S3 on ILLA Cloud, developers can enhance their applications with reliable and scalable storage solutions, enabling them to focus on building innovative and data-driven experiences.

Create Amazon S3 API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Amazon S3 from the API list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Amazon S3 will display as shown.

amazon_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Amazon S3 from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Amazon S3 API.

amazon_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Bucket nameoptionala unique identifier that represents a storage container in Amazon S3. It provides a logical separation for organizing and accessing your files
S3 ACL for uploaded filesoptionalallows you to define fine-grained access permissions for files within your bucket. It specifies who can perform specific operations, such as reading, writing, or deleting files.
Regionrequiredgeographical location where your Amazon S3 bucket is stored. It determines the physical location of your data and can impact factors like latency and data transfer costs.
Custom S3 endpointoptionalenables you to configure a specific endpoint URL for accessing your Amazon S3 resources. It can be useful for scenarios where you want to use a custom domain or integrate with a CDN (Content Delivery Network).
Access keyrequiredcredentials that authenticate your requests to access Amazon S3
Secret access keyrequiredgenerated when you create an IAM (Identity and Access Management) user or an AWS (Amazon Web Services) access key pair.

Create Actions​

We have created an Amazon S3 resource, we can add the action by selecting Amazon S3 from the action list and choosing the Create action button.

amazon_resource_list

Now we have added the Amazon server as an action to our building page.

amazon

Configure Amazon S3​

Overview​

Method NameDescription
Action Typelist all objects in a bucket, read an object, download an object, delete an object, delete multiple objects, upload data, upload multiple data
Bucket namea unique identifier that represents a storage container in Amazon S3.
Transformertransforming data into the style you like using JavaScript

List all objects in a bucket​

retrieve a list of all objects stored within a specific bucket.

Input

PropertiesRequiredDescription
Prefix to filter resultsoptionalfilter the results to include only objects whose key (name) begins with a specific prefix
Delimiteroptionalspecify a character that separates object key hierarchies
Generate Signed URLoptionalwhether to generate a time-limited URL that provides temporary access to a specific object
Max Keysoptionallimit the maximum number of objects returned in the response

For example, to get all objects in the database.

Output

return an array of objects, each including at least one objectKey property.

amazon_list_all_data

Use {{s31.data}} to get all returned data.

amazon_list_all_code

Read an object​

retrieve the contents of a specific object stored within a bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to get the content of document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of a document

amazon_read_data1

amazon_read_data2

Use {{s31.data}} to get the returned data.

amazon_read_code

Download an object​

retrieve the contents of a specific object stored within a bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to download the document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of a document and download the document to local

amazon_read_data1

Delete an object​

deletes a single object from an S3 bucket.

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to delete the document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of the deleted document

amazon_delete_data

amazon_delete_data1

Delete multiple objects​

deletes multiple objects simultaneously from an S3 bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to delete multiple documents, put {{["images.jpeg", "images-1.png"]}} for Object key.

Output

return the content and metadata of the deleted documents

amazon_delete2_data1

amazon_delete2_data2

Upload data​

uploading an object into a bucket

Input

PropertiesRequiredDescription
Content TyperequiredMIME type of object you are uploading.
Upload object namerequiredthe name of the object you are uploading.
Upload datarequiredthe data you want to upload to Amazon S3.
Timeout for uploading a file (Minute)optionalthe uploading time in minutes before the uploading process is stopped by a timeout error

For example, to delete multiple documents, put text for content type, text.txt for upload object name, and text for upload data.

Output

return the message of whether the document is uploaded successfully

amazon_upload_data1

amazon_upload_data2

Upload multiple data​

upload a list of objects into a bucket

Input

PropertiesRequiredDescription
Content TyperequiredMIME type of object you are uploading.
Upload object name listrequireda list of names of the objects you are uploading.
Upload data listrequireda list of the data you want to upload to Amazon S3.
Timeout for uploading a file (Minute)optionalthe uploading time in minutes before the uploading process is stopped by a timeout error

For example, to delete multiple documents, put text for content type, {{['text.txt', 'text2.txt']}} for upload object name list, and {{['text', 'text2']}} for upload data list.

Output

return the message of whether the documents are uploaded successfully

amazon_upload_data1

amazon_upload_data2

+ + \ No newline at end of file diff --git a/appwrite/index.html b/appwrite/index.html index 547666d02e..33ac5eaef2 100644 --- a/appwrite/index.html +++ b/appwrite/index.html @@ -10,14 +10,14 @@ - - + +
-

Appwrite

Appwrite in Illa is a database integration that allows you to connect and interact with a Appwrite database. Appwrite is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Appwrite integration in Illa, you can query, insert, update, and delete data from a Appwrite database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Appwrite database.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Appwrite in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Appwrite, visit their website at https://Appwrite.io/ Let’s begin!

Set up your Back end on Appwrite​

After signing into your Appwrite account, on the Appwrite dashboard, click Create project and set the name to First Project.

app_create_project

Then we can navigate to the project page. Appwrite provides multiple platforms for building your app as well as integrations.

app_platforms

Here we choose Web App as an example.

After creating our Web app project, we may go to the database page since we only use Appwrite as a database integration so far.

app_dashboard

Then we may create database and create collections within the database

app_create_database +

Appwrite

Appwrite in Illa is a database integration that allows you to connect and interact with a Appwrite database. Appwrite is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Appwrite integration in Illa, you can query, insert, update, and delete data from a Appwrite database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Appwrite database.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Appwrite in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Appwrite, visit their website at https://Appwrite.io/ Let’s begin!

Set up your Back end on Appwrite​

After signing into your Appwrite account, on the Appwrite dashboard, click Create project and set the name to First Project.

app_create_project

Then we can navigate to the project page. Appwrite provides multiple platforms for building your app as well as integrations.

app_platforms

Here we choose Web App as an example.

After creating our Web app project, we may go to the database page since we only use Appwrite as a database integration so far.

app_dashboard

Then we may create database and create collections within the database

app_create_database From here we may create attributes and data in the collection.

app_create_data

In order to retrieve documents by attributes, we need to make corresponding indexes for each attributes.

app_create_index

This database is now ready for you to integrate with Illa.

Create Appwrite​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select Resources on the top of the page, and click Create New button.

external_resource

Select Appwrite from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click Test Connection to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Appwrite will display as shown.

app_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the App page, and navigate to the Action List at the bottom of the page. Click new, then select Appwrite from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click Test Connection to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Appwrite database.

app_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostrequiredThe URL or IP address for your database
Database IDrequiredunique identifier assigned to each database created within Appwrite
Project IDrequiredunique identifier that represents your entire Appwrite project
API keyrequireda secret token that serves as a form of authentication when making API requests to the Appwrite server

To find the required Host, Database ID, Project ID, and API key in Appwrite, we first go to the setting button at the bottom left corner of the project page.

Copying the project ID for project ID and API Endpoint for Host in the Appwrite configuration in Illa.

app_setting

Then we may click the View API Keys button on the same page. If you have not created an API for this project, click Create API Key button and select only Database folder since that’s what we will be using from Appwrite.

app_api_key

Copy the API Key Secret for API key in Illa configuration. It can be copied for these two spots.

app_key_secret

What we have left is the Database ID which we can find in the Database Page. Copying it and paste it at the Appwrite Configuration in Illa.

app_database

The final product should look something like this.

app_final_config

Create Actions​

We have created a Appwrite resource, we can add the action by selecting Appwrite from action list and choosing the Create action button.

app_resource_list

Now we have added the Appwrite server as an action to our building page.

app

Configure Appwrite​

Overview​

Method NameDescription
MethodCreate a document, Get a document, Update a document, Delete a document, List documents
Collection IDa unique identifier assigned to a database collection
Transformertransforming data into the style you like using JavaScript

Create a document​

create a new document in a collection

Input

PropertiesRequiredDescription
Document IDrequireda unique identifier assigned to a database collection document
Dataoptionalan object containing the fields and values of the new document.

For example, to create a new document in a collection with two fields - name and age, you can use 1 as document ID and {{ {"Name": "David", "Age": 18}}} for data.

Output

a response object that includes the ID of the newly created document, as well as additional metadata such as the date and time of creation.

app_create_code

Get a document​

retrieve a specific document from a collection in the database

Input

PropertiesRequiredDescription
Document IDrequireda unique identifier assigned to a database collection document

For example, we can get the document with id 1.

Output

a response object that includes the data of the requested document

app_get_data

Use {{Appwrite1.data}} to get all returned value.

app_get_code

Update a document​

update the data of an existing document in a collection.

Input

PropertiesRequiredDescription
Document IDrequireda unique identifier assigned to a database collection document
DataoptionalAn object containing the updated fields and values that you want to assign to the document.

For example, to update a document in a collection using the updateDocument method, you can put 1 for document id and {{{"Name":"Fred"}}} for data.

Output

a response object that includes the data of the requested document

app_update)data

Delete a document​

delete a specific document from a collection in the database

Input

PropertiesRequiredDescription
Document IDrequireda unique identifier assigned to a database collection document

For example, we can delete the document with id 1.

Output

a response object that confirms the successful deletion of the document.

app_delete_data

List document​

retrieve multiple documents from a collection in the database

Input

PropertiesRequiredDescription
Filteroptionaldefine conditions to filter the documents based on specific fields and values
Order byoptionalspecify the field by which the resulting documents should be sorted
Limitoptionalrestrict the number of documents returned in the result set

For example, to list all the documents with Name = James.

Output

An array of documents that satisfy the filter.

app_list_data

Use {{Appwrite1.data[0].documents}} to get returned value.

app_list_code

- - + + \ No newline at end of file diff --git a/assets/js/2ef1edda.4e244ef4.js b/assets/js/2ef1edda.2885b0d5.js similarity index 98% rename from assets/js/2ef1edda.4e244ef4.js rename to assets/js/2ef1edda.2885b0d5.js index 8485531ef1..1f6145e0e4 100644 --- a/assets/js/2ef1edda.4e244ef4.js +++ b/assets/js/2ef1edda.2885b0d5.js @@ -1 +1 @@ -"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[109],{9613:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(9496);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=c(r),m=a,f=u["".concat(s,".").concat(m)]||u[m]||d[m]||o;return r?n.createElement(f,l(l({ref:t},p),{},{components:r})):n.createElement(f,l({ref:t},p))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>d,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var n=r(8028),a=(r(9496),r(9613));const o={title:"Response",Description:"Use the Response node to send data back to a WebHook request"},l=void 0,i={unversionedId:"illa-flow-response",id:"illa-flow-response",title:"Response",description:"Introduction",source:"@site/docs/illa-flow-response.mdx",sourceDirName:".",slug:"/illa-flow-response",permalink:"/illa-flow-response",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/docs/illa-flow-response.mdx",tags:[],version:"current",frontMatter:{title:"Response",Description:"Use the Response node to send data back to a WebHook request"},sidebar:"tutorialSidebar",previous:{title:"WebHook",permalink:"/illa-flow-webhook"},next:{title:"V 4.8",permalink:"/4-8"}},s={},c=[{value:"Introduction",id:"introduction",level:2},{value:"Parameters",id:"parameters",level:3}],p={toc:c},u="wrapper";function d(e){let{components:t,...r}=e;return(0,a.kt)(u,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"introduction"},"Introduction"),(0,a.kt)("p",null,"When you expect to return data after a certain node has finished executing, you can use the Response node."),(0,a.kt)("p",null,"You can add different responses for different scenarios, which will be returned based on the actual execution result."),(0,a.kt)("p",null,"In the case of the same execution conditions (such as several parallel running links that all succeed), when adding Response nodes separately, we will only return the data from the first Response node that has finished running."),(0,a.kt)("div",{style:{position:"relative",paddingBottom:"calc(56.81216931216932% + 41px)",height:0}},(0,a.kt)("iframe",{src:"https://demo.arcade.software/jLmr2LN2T0cYwvYaeB3C?embed&show_copy_link=true",frameborder:"1",loading:"lazy",allowfullscreen:"true",style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",colorScheme:"light"}})),(0,a.kt)("h3",{id:"parameters"},"Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"th"},"Property name")),(0,a.kt)("th",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"th"},"Description")))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Status code"),(0,a.kt)("td",{parentName:"tr",align:null},"It will be returned as the status of the request.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Location"),(0,a.kt)("td",{parentName:"tr",align:null},"In the case of a 307 or 308 status code, you can set the redirect URL in the Location header. When the browser receives this status code, it will automatically redirect to the specified URL.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Response body"),(0,a.kt)("td",{parentName:"tr",align:null},"You can configure it to return JSON, Text, or not return any data. JSON, such as",(0,a.kt)("inlineCode",{parentName:"td"},'{"a":1, "b":2}'),"; Text, can be used to return String or numeric values. For string values, it can be a simple text like",(0,a.kt)("inlineCode",{parentName:"td"},"Hello world"),". For numeric values, they need to be enclosed in double curly braces, like",(0,a.kt)("inlineCode",{parentName:"td"},"{{5}}"),".")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Response headers"),(0,a.kt)("td",{parentName:"tr",align:null},"Used to set parameters in response headers.")))))}d.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[109],{9613:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(9496);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=c(r),m=a,f=u["".concat(s,".").concat(m)]||u[m]||d[m]||o;return r?n.createElement(f,l(l({ref:t},p),{},{components:r})):n.createElement(f,l({ref:t},p))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>d,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var n=r(8028),a=(r(9496),r(9613));const o={title:"Response",Description:"Use the Response node to send data back to a WebHook request"},l=void 0,i={unversionedId:"illa-flow-response",id:"illa-flow-response",title:"Response",description:"Introduction",source:"@site/docs/illa-flow-response.mdx",sourceDirName:".",slug:"/illa-flow-response",permalink:"/illa-flow-response",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/docs/illa-flow-response.mdx",tags:[],version:"current",frontMatter:{title:"Response",Description:"Use the Response node to send data back to a WebHook request"},sidebar:"tutorialSidebar",previous:{title:"WebHook",permalink:"/illa-flow-webhook"},next:{title:"V 4.9",permalink:"/4-9"}},s={},c=[{value:"Introduction",id:"introduction",level:2},{value:"Parameters",id:"parameters",level:3}],p={toc:c},u="wrapper";function d(e){let{components:t,...r}=e;return(0,a.kt)(u,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"introduction"},"Introduction"),(0,a.kt)("p",null,"When you expect to return data after a certain node has finished executing, you can use the Response node."),(0,a.kt)("p",null,"You can add different responses for different scenarios, which will be returned based on the actual execution result."),(0,a.kt)("p",null,"In the case of the same execution conditions (such as several parallel running links that all succeed), when adding Response nodes separately, we will only return the data from the first Response node that has finished running."),(0,a.kt)("div",{style:{position:"relative",paddingBottom:"calc(56.81216931216932% + 41px)",height:0}},(0,a.kt)("iframe",{src:"https://demo.arcade.software/jLmr2LN2T0cYwvYaeB3C?embed&show_copy_link=true",frameborder:"1",loading:"lazy",allowfullscreen:"true",style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",colorScheme:"light"}})),(0,a.kt)("h3",{id:"parameters"},"Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"th"},"Property name")),(0,a.kt)("th",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"th"},"Description")))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Status code"),(0,a.kt)("td",{parentName:"tr",align:null},"It will be returned as the status of the request.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Location"),(0,a.kt)("td",{parentName:"tr",align:null},"In the case of a 307 or 308 status code, you can set the redirect URL in the Location header. When the browser receives this status code, it will automatically redirect to the specified URL.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Response body"),(0,a.kt)("td",{parentName:"tr",align:null},"You can configure it to return JSON, Text, or not return any data. JSON, such as",(0,a.kt)("inlineCode",{parentName:"td"},'{"a":1, "b":2}'),"; Text, can be used to return String or numeric values. For string values, it can be a simple text like",(0,a.kt)("inlineCode",{parentName:"td"},"Hello world"),". For numeric values, they need to be enclosed in double curly braces, like",(0,a.kt)("inlineCode",{parentName:"td"},"{{5}}"),".")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Response headers"),(0,a.kt)("td",{parentName:"tr",align:null},"Used to set parameters in response headers.")))))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/42b3cfdb.116619c4.js b/assets/js/42b3cfdb.116619c4.js new file mode 100644 index 0000000000..807f4fbb97 --- /dev/null +++ b/assets/js/42b3cfdb.116619c4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[1808],{9613:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>m});var n=r(9496);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),p=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},u=function(e){var t=p(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,l=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),s=p(r),f=o,m=s["".concat(c,".").concat(f)]||s[f]||d[f]||l;return r?n.createElement(m,a(a({ref:t},u),{},{components:r})):n.createElement(m,a({ref:t},u))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var l=r.length,a=new Array(l);a[0]=f;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[s]="string"==typeof e?e:o,a[1]=i;for(var p=2;p{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>d,frontMatter:()=>l,metadata:()=>i,toc:()=>p});var n=r(8028),o=(r(9496),r(9613));const l={title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog"},a="V 4.9",i={unversionedId:"4-9",id:"4-9",title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog",source:"@site/docs/4-9.mdx",sourceDirName:".",slug:"/4-9",permalink:"/4-9",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/docs/4-9.mdx",tags:[],version:"current",frontMatter:{title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog"},sidebar:"tutorialSidebar",previous:{title:"Response",permalink:"/illa-flow-response"},next:{title:"V 4.8",permalink:"/4-8"}},c={},p=[{value:"\ud83d\udc85 Polish",id:"-polish",level:2}],u={toc:p},s="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"v-49"},"V 4.9"),(0,o.kt)("p",null,"2024.05.17"),(0,o.kt)("h2",{id:"-polish"},"\ud83d\udc85 Polish"),(0,o.kt)("p",null,"IP address updated. If your Resource does not allow external network access, you need to add the following IP to the allowlist:\n143.198.75.2\n146.190.51.14\n146.190.35.24\n64.23.134.60\n146.190.59.192"))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/935f2afb.2d008476.js b/assets/js/935f2afb.2d008476.js new file mode 100644 index 0000000000..afc4159787 --- /dev/null +++ b/assets/js/935f2afb.2d008476.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"category","label":"Build Apps","items":[{"type":"category","label":"Components","items":[{"type":"link","label":"Bar progress","href":"/bar-progress","docId":"bar-progress"},{"type":"link","label":"Button","href":"/button","docId":"button"},{"type":"link","label":"Cascader","href":"/cascader","docId":"cascader"},{"type":"link","label":"Circle progress","href":"/circle-progress","docId":"circle-progress"},{"type":"link","label":"Container","href":"/container","docId":"container"},{"type":"link","label":"Data Grid","href":"/data-grid","docId":"data-grid"},{"type":"link","label":"Date","href":"/date","docId":"date"},{"type":"link","label":"Date Range","href":"/date-range","docId":"date-range"},{"type":"link","label":"Date Time","href":"/date-time","docId":"date-time"},{"type":"link","label":"Divider","href":"/divider","docId":"divider"},{"type":"link","label":"Editable Text","href":"/editable-text","docId":"editable-text"},{"type":"link","label":"Event calendar","href":"/event-calendar","docId":"event-calendar"},{"type":"link","label":"Form","href":"/form","docId":"form"},{"type":"link","label":"Icon","href":"/icon","docId":"icon"},{"type":"link","label":"Image","href":"/image","docId":"image"},{"type":"link","label":"Input","href":"/input","docId":"input"},{"type":"link","label":"List","href":"/list","docId":"list"},{"type":"link","label":"Grid list","href":"/grid-list","docId":"grid-list"},{"type":"link","label":"Menu","href":"/menu","docId":"menu"},{"type":"link","label":"Modal","href":"/modal","docId":"modal"},{"type":"link","label":"Multi-select","href":"/multi-select","docId":"multi-select"},{"type":"link","label":"Number Input","href":"/number-input","docId":"number-input"},{"type":"link","label":"Page","href":"/page","docId":"page"},{"type":"link","label":"PDF","href":"/pdf","docId":"pdf"},{"type":"link","label":"Radio button","href":"/radio-button","docId":"radio-button"},{"type":"link","label":"Radio group","href":"/radio-group","docId":"radio-group"},{"type":"link","label":"Rate","href":"/rate","docId":"rate"},{"type":"link","label":"Select","href":"/select","docId":"select"},{"type":"link","label":"Statistics","href":"/statistics","docId":"statistics"},{"type":"link","label":"Switch","href":"/switch","docId":"switch"},{"type":"link","label":"Table","href":"/table","docId":"table"},{"type":"link","label":"Tabs","href":"/tabs","docId":"tabs"},{"type":"link","label":"Text","href":"/text","docId":"text"},{"type":"link","label":"Text area Input","href":"/text-area-input","docId":"text-area-input"},{"type":"link","label":"Time Picker","href":"/time-picker","docId":"time-picker"},{"type":"link","label":"Time Range","href":"/time-range","docId":"time-range"},{"type":"link","label":"Timeline","href":"/timeline","docId":"timeline"},{"type":"link","label":"Upload","href":"/upload","docId":"upload"},{"type":"link","label":"Video","href":"/video","docId":"video"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Resources","items":[{"type":"link","label":"Airtable","href":"/airtable","docId":"airtable"},{"type":"link","label":"Amazon S3","href":"/amazons3","docId":"amazons3"},{"type":"link","label":"Appwrite","href":"/appwrite","docId":"appwrite"},{"type":"link","label":"ClickHouse","href":"/clickhouse","docId":"clickhouse"},{"type":"link","label":"Elastic Search","href":"/elastic-search","docId":"elastic-search"},{"type":"link","label":"Firebase","href":"/firebase","docId":"firebase"},{"type":"link","label":"Hugging Face API","href":"/hugging-face-api","docId":"hugging-face-api"},{"type":"link","label":"Hugging Face Endpoint","href":"/hugging-face-endpoint","docId":"hugging-face-endpoint"},{"type":"link","label":"Hydra","href":"/hydra","docId":"hydra"},{"type":"link","label":"MariaDB","href":"/mariadb","docId":"mariadb"},{"type":"link","label":"Microsoft SQL","href":"/microsoft-sql","docId":"microsoft-sql"},{"type":"link","label":"MongoDB","href":"/mongodb","docId":"mongodb"},{"type":"link","label":"MySQL","href":"/mysql","docId":"mysql"},{"type":"link","label":"Neon","href":"/neon","docId":"neon"},{"type":"link","label":"Oracle DB","href":"/oracledb","docId":"oracledb"},{"type":"link","label":"PostgreSQL","href":"/postgresql","docId":"postgresql"},{"type":"link","label":"Redis","href":"/redis","docId":"redis"},{"type":"link","label":"REST API","href":"/restapi","docId":"restapi"},{"type":"link","label":"Snowflake","href":"/snowflake","docId":"snowflake"},{"type":"link","label":"Supabase DB","href":"/supabase","docId":"supabase"},{"type":"link","label":"TiDB","href":"/tidb","docId":"tidb"},{"type":"link","label":"Transformer","href":"/transformer","docId":"transformer"},{"type":"link","label":"Upstash","href":"/upstash","docId":"upstash"}],"collapsed":true,"collapsible":true},{"type":"category","label":"JavaScript and Event handler","items":[{"type":"link","label":"Run Script","href":"/run-script","docId":"run-script"},{"type":"link","label":"Event handler","href":"/event-handler","docId":"event-handler"}],"collapsed":true,"collapsible":true}],"collapsed":true,"collapsible":true,"href":"/"},{"type":"link","label":"Server-side pagination","href":"/server-side-pagination","docId":"server-side-pagination"},{"type":"link","label":"Self-hosted deployment","href":"/self-hosted-deployment","docId":"self-hosted-deployment"},{"type":"category","label":"Branding","items":[{"type":"link","label":"Custom domain","href":"/custom-domain","docId":"custom-domain"}],"collapsed":true,"collapsible":true},{"type":"category","label":"ILLA with AI","items":[{"type":"link","label":"AI Agent","href":"/ai-agent","docId":"ai-agent"}],"collapsed":true,"collapsible":true},{"type":"category","label":"ILLA Flow","items":[{"type":"link","label":"About ILLA Flow","href":"/illa-flow-introduction","docId":"illa-flow-introduction"},{"type":"link","label":"WebHook","href":"/illa-flow-webhook","docId":"illa-flow-webhook"},{"type":"link","label":"Response","href":"/illa-flow-response","docId":"illa-flow-response"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Changelogs","items":[{"type":"link","label":"V 4.9","href":"/4-9","docId":"4-9"},{"type":"link","label":"V 4.8","href":"/4-8","docId":"4-8"},{"type":"link","label":"V 4.5","href":"/4-5","docId":"4-5"},{"type":"link","label":"V 4.4","href":"/4-4","docId":"4-4"},{"type":"link","label":"V 4.3.6","href":"/4-3-6","docId":"4-3-6"},{"type":"link","label":"V 4.3","href":"/4-3","docId":"4-3"},{"type":"link","label":"V 4.2","href":"/4-2","docId":"4-2"},{"type":"link","label":"V 4.1","href":"/4-1","docId":"4-1"},{"type":"link","label":"V 4.0","href":"/4-0","docId":"4-0"},{"type":"link","label":"V 3.5","href":"/3-5","docId":"3-5"},{"type":"link","label":"V 3.4","href":"/3-4","docId":"3-4"},{"type":"link","label":"V 3.3","href":"/3-3","docId":"3-3"}],"collapsed":true,"collapsible":true},{"type":"category","label":"ILLA policy","items":[{"type":"link","label":"Privacy Policy","href":"/privacy-policy","docId":"privacy-policy"},{"type":"link","label":"Terms of Service","href":"/terms-of-service","docId":"terms-of-service"}],"collapsed":true,"collapsible":true}]},"docs":{"3-3":{"id":"3-3","title":"V 3.3","description":"ILLA Cloud V 3.3 Changelog","sidebar":"tutorialSidebar"},"3-4":{"id":"3-4","title":"V 3.4","description":"ILLA Cloud V 3.4 Changelog","sidebar":"tutorialSidebar"},"3-5":{"id":"3-5","title":"V 3.5","description":"ILLA Cloud V 3.5 Changelog","sidebar":"tutorialSidebar"},"4-0":{"id":"4-0","title":"V 4.0","description":"ILLA Cloud V 4.0 Changelog","sidebar":"tutorialSidebar"},"4-1":{"id":"4-1","title":"V 4.1","description":"ILLA Cloud V 4.1 Changelog","sidebar":"tutorialSidebar"},"4-2":{"id":"4-2","title":"V 4.2","description":"ILLA Cloud V 4.2 Changelog","sidebar":"tutorialSidebar"},"4-3":{"id":"4-3","title":"V 4.3","description":"ILLA Cloud V 4.3 Changelog","sidebar":"tutorialSidebar"},"4-3-6":{"id":"4-3-6","title":"V 4.3.6","description":"ILLA Cloud V 4.3.6 Changelog","sidebar":"tutorialSidebar"},"4-4":{"id":"4-4","title":"V 4.4","description":"ILLA Cloud V 4.4 Changelog","sidebar":"tutorialSidebar"},"4-5":{"id":"4-5","title":"V 4.5","description":"ILLA Cloud V 4.5 Changelog","sidebar":"tutorialSidebar"},"4-8":{"id":"4-8","title":"V 4.8","description":"ILLA Cloud V 4.8 Changelog","sidebar":"tutorialSidebar"},"4-9":{"id":"4-9","title":"V 4.9","description":"ILLA Cloud V 4.9 Changelog","sidebar":"tutorialSidebar"},"about-illa":{"id":"about-illa","title":"About ILLA","description":"ILLA is an open-source low-code platform for developers to build and deploy internal tools remarkably fast.","sidebar":"tutorialSidebar"},"ai-agent":{"id":"ai-agent","title":"AI Agent","description":"Customize the AI Agent according to your needs, limiting the behavior of the GPT model to generate content as per your requirements. Integrate the AI Agent into the ILLA App to make your app more intelligent.","sidebar":"tutorialSidebar"},"airtable":{"id":"airtable","title":"Airtable","description":"Learn how to connect your Airtable API to ILLA Cloud and create apps that can query, manipulate, and display data","sidebar":"tutorialSidebar"},"amazons3":{"id":"amazons3","title":"Amazon S3","description":"Learn how to connect and interact with your Amazon S3 API using ILLA Cloud\'s database integration feature.","sidebar":"tutorialSidebar"},"appwrite":{"id":"appwrite","title":"Appwrite","description":"Learn how to connect and interact with Appwrite database using ILLA Cloud.","sidebar":"tutorialSidebar"},"bar-progress":{"id":"bar-progress","title":"Bar progress","description":"Learn how to use the bar progress component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"button":{"id":"button","title":"Button","description":"Learn how to use the button component in ILLA Cloud.","sidebar":"tutorialSidebar"},"cascader":{"id":"cascader","title":"Cascader","description":"Learn how to customize and control the Cascader options in ILLA Cloud.","sidebar":"tutorialSidebar"},"circle-progress":{"id":"circle-progress","title":"Circle progress","description":"Learn how to use the circle progress component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"clickhouse":{"id":"clickhouse","title":"ClickHouse","description":"Learn how to use ILLA Cloud to access and work with ClickHouse data.","sidebar":"tutorialSidebar"},"container":{"id":"container","title":"Container","description":"Learn how to use ILLA Container to group reltated components together in a card","sidebar":"tutorialSidebar"},"custom-domain":{"id":"custom-domain","title":"Custom domain","description":"You can access your ILLA Cloud team through your own domain name by customizing it.","sidebar":"tutorialSidebar"},"data-grid":{"id":"data-grid","title":"Data Grid","description":"A fast and extendable react data table and react data grid with blazing fast performance.","sidebar":"tutorialSidebar"},"date":{"id":"date","title":"Date","description":"Learn how to use the date component to add a calendar picker to ILLA app.","sidebar":"tutorialSidebar"},"date-range":{"id":"date-range","title":"Date Range","description":"Learn how to use the Date Range component from ILLA Cloud to let users select a start and end date.","sidebar":"tutorialSidebar"},"date-time":{"id":"date-time","title":"Date Time","description":"Discover how to use the Date Time component from ILLA Cloud to enable users to pick a date and time.","sidebar":"tutorialSidebar"},"divider":{"id":"divider","title":"Divider","description":"Learn how to use the divider component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"editable-text":{"id":"editable-text","title":"Editable Text","description":"Learn how to use the Editable Text component to create and customize text fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"elastic-search":{"id":"elastic-search","title":"Elastic Search","description":"Use ILLA Cloud to connect and interact with your Elastic Search data.","sidebar":"tutorialSidebar"},"event-calendar":{"id":"event-calendar","title":"Event calendar","description":"Learn how to use the event calendar component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"event-handler":{"id":"event-handler","title":"Event handler","description":"Add an event handler to the component to trigger an event when the component\'s state changes.","sidebar":"tutorialSidebar"},"firebase":{"id":"firebase","title":"Firebase","description":"Discover how to connect and interact with Firebase API using ILLA Cloud\'s integration feature.","sidebar":"tutorialSidebar"},"form":{"id":"form","title":"Form","description":"Learn how to use the form component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"grid-list":{"id":"grid-list","title":"Grid list","description":"Display your items as a grid rather than a normal list of items that come one after the next","sidebar":"tutorialSidebar"},"hugging-face-api":{"id":"hugging-face-api","title":"Hugging Face API","description":"Learn how to use Hugging Face API in ILLA","sidebar":"tutorialSidebar"},"hugging-face-endpoint":{"id":"hugging-face-endpoint","title":"Hugging Face Endpoint","description":"Learn how to use Hugging Face Endpoint in ILLA","sidebar":"tutorialSidebar"},"hydra":{"id":"hydra","title":"Hydra","description":"Use ILLA Cloud to access and work with your Hydra data. Create apps that can query, manipulate, and display data.","sidebar":"tutorialSidebar"},"icon":{"id":"icon","title":"Icon","description":"Learn how to use the icon component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"illa-flow-introduction":{"id":"illa-flow-introduction","title":"About ILLA Flow","description":"What is ILLA Flow","sidebar":"tutorialSidebar"},"illa-flow-response":{"id":"illa-flow-response","title":"Response","description":"Introduction","sidebar":"tutorialSidebar"},"illa-flow-webhook":{"id":"illa-flow-webhook","title":"WebHook","description":"What is WebHook","sidebar":"tutorialSidebar"},"image":{"id":"image","title":"Image","description":"Learn how to use the Image component to upload and customize image for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"input":{"id":"input","title":"Input","description":"Learn how to use the input component to create and customize text fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"list":{"id":"list","title":"List","description":"The List component allows you to create repeatable rows of data whose look and feel are defined by you.","sidebar":"tutorialSidebar"},"mariadb":{"id":"mariadb","title":"MariaDB","description":"Connect your MariaDB database to ILLA Cloud and create apps that can query, manipulate, and display data. Read this guide to learn how.","sidebar":"tutorialSidebar"},"menu":{"id":"menu","title":"Menu","description":"Learn how to use the menu component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"microsoft-sql":{"id":"microsoft-sql","title":"Microsoft SQL","description":"Learn how to use ILLA Cloud to access and work with Microsoft SQL data. Build apps, visualize data, and automate workflows with ILLA Cloud.","sidebar":"tutorialSidebar"},"modal":{"id":"modal","title":"Modal","description":"Learn how to use the modal component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"mongodb":{"id":"mongodb","title":"MongoDB","description":"Learn how to use ILLA Cloud to build apps with MongoDB. Explore data querying, manipulation, and visualization features.","sidebar":"tutorialSidebar"},"multi-select":{"id":"multi-select","title":"Multi-select","description":"A drop-down component that displays all options, supports multiple selections","sidebar":"tutorialSidebar"},"mysql":{"id":"mysql","title":"MySQL","description":"Connect and interact with a MySQL database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"neon":{"id":"neon","title":"Neon","description":"Connect your Neon database to ILLA Cloud and create apps that can query, manipulate, and display data. This guide will show you how.","sidebar":"tutorialSidebar"},"number-input":{"id":"number-input","title":"Number Input","description":"Learn how to use the number input component to create and customize number input fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"oracledb":{"id":"oracledb","title":"Oracle DB","description":"Learn how to use ILLA Cloud\'s database integration feature to connect and interact with your OracleDB database in a few simple steps.","sidebar":"tutorialSidebar"},"page":{"id":"page","title":"Page","description":"---","sidebar":"tutorialSidebar"},"pdf":{"id":"pdf","title":"PDF","description":"Learn how to use the PDF component to upload and customize pdf files for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"postgresql":{"id":"postgresql","title":"PostgreSQL","description":"Connect and interact with a PostgreSQL database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"privacy-policy":{"id":"privacy-policy","title":"Privacy Policy","description":"Privacy Policy","sidebar":"tutorialSidebar"},"radio-button":{"id":"radio-button","title":"Radio button","description":"Display all options on radio buttons and support to select 1 option.","sidebar":"tutorialSidebar"},"radio-group":{"id":"radio-group","title":"Radio group","description":"Displays all options on radio group and supports to select 1 option.","sidebar":"tutorialSidebar"},"rate":{"id":"rate","title":"Rate","description":"Learn how to use the rate component to create and customize the rate value for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"redis":{"id":"redis","title":"Redis","description":"Discover how to connect and interact with your Redis database using ILLA Cloud\'s database integration feature. Check out this guide for more details.","sidebar":"tutorialSidebar"},"restapi":{"id":"restapi","title":"REST API","description":"Learn how to use ILLA Cloud to access and work with REST API data. Build apps, visualize data, and automate workflows with ILLA Cloud.","sidebar":"tutorialSidebar"},"run-script":{"id":"run-script","title":"Run Script","description":"By triggering the Run Script through an Event handler, you can achieve sequential execution of operations and perform different actions based on different condition.","sidebar":"tutorialSidebar"},"select":{"id":"select","title":"Select","description":"Displays all options in dropdown box and supports to select 1 option.","sidebar":"tutorialSidebar"},"self-hosted-deployment":{"id":"self-hosted-deployment","title":"Self-hosted deployment","description":"ILLA Builder provides a seamless deployment experience that allows you to deploy ILLA Builder at an astonishing speed within your own Virtual Private Cloud (VPC).","sidebar":"tutorialSidebar"},"server-side-pagination":{"id":"server-side-pagination","title":"Server-side pagination","description":"When dealing with large amounts of data, using server-side pagination in your queries can greatly improve efficiency. In this article, you will learn how to utilize server-side pagination in ILLA Cloud.","sidebar":"tutorialSidebar"},"snowflake":{"id":"snowflake","title":"Snowflake","description":"Connect and interact with a Snowflake database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"statistics":{"id":"statistics","title":"Statistics","description":"Learn how to use the statistics component to create and customize the statistic value for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"supabase":{"id":"supabase","title":"Supabase DB","description":"Connect to Supabase instance and show Supabase DB data on components","sidebar":"tutorialSidebar"},"switch":{"id":"switch","title":"Switch","description":"Learn how to use the Switch component in ILLA Cloud to create a user interface that lets users switch between two options. See examples and properties of Switch.","sidebar":"tutorialSidebar"},"table":{"id":"table","title":"Table","description":"Learn how to use the table component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"tabs":{"id":"tabs","title":"Tabs","description":"Learn how to use the tabs component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"terms-of-service":{"id":"terms-of-service","title":"Terms of Service","description":"Terms of Service","sidebar":"tutorialSidebar"},"text":{"id":"text","title":"Text","description":"Display data with text component","sidebar":"tutorialSidebar"},"text-area-input":{"id":"text-area-input","title":"Text area Input","description":"Learn how to use the Text area input component to create and customize text area input fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"tidb":{"id":"tidb","title":"TiDB","description":"Use ILLA Cloud to access and work with your TiDB data. Create apps that can query, manipulate, and display data. Follow this guide to get started.","sidebar":"tutorialSidebar"},"time-picker":{"id":"time-picker","title":"Time Picker","description":"Find out how to use the Time Picker component from ILLA Cloud to let users choose a specific time from a 24 hour time UI in your projects.","sidebar":"tutorialSidebar"},"time-range":{"id":"time-range","title":"Time Range","description":"Learn how to use the Time Range component from ILLA Cloud to let users select a range of times from a 24-hour interface in your applications.","sidebar":"tutorialSidebar"},"timeline":{"id":"timeline","title":"Timeline","description":"Learn how to use the Timeline component from ILLA Cloud","sidebar":"tutorialSidebar"},"transformer":{"id":"transformer","title":"Transformer","description":"Transformer in ILLA allows user to write JavaScript to refine the application logic","sidebar":"tutorialSidebar"},"upload":{"id":"upload","title":"Upload","description":"Use the upload component to upload files from the local machines to any cloud storage","sidebar":"tutorialSidebar"},"upstash":{"id":"upstash","title":"Upstash","description":"Learn how to connect your Upstash Redis database to ILLA Cloud and create apps that can query, manipulate, and display data","sidebar":"tutorialSidebar"},"video":{"id":"video","title":"Video","description":"Learn how to use the Video component to upload and customize video for your app in ILLA Cloud.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/935f2afb.bf52a474.js b/assets/js/935f2afb.bf52a474.js deleted file mode 100644 index aa84ed1aab..0000000000 --- a/assets/js/935f2afb.bf52a474.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"category","label":"Build Apps","items":[{"type":"category","label":"Components","items":[{"type":"link","label":"Bar progress","href":"/bar-progress","docId":"bar-progress"},{"type":"link","label":"Button","href":"/button","docId":"button"},{"type":"link","label":"Cascader","href":"/cascader","docId":"cascader"},{"type":"link","label":"Circle progress","href":"/circle-progress","docId":"circle-progress"},{"type":"link","label":"Container","href":"/container","docId":"container"},{"type":"link","label":"Data Grid","href":"/data-grid","docId":"data-grid"},{"type":"link","label":"Date","href":"/date","docId":"date"},{"type":"link","label":"Date Range","href":"/date-range","docId":"date-range"},{"type":"link","label":"Date Time","href":"/date-time","docId":"date-time"},{"type":"link","label":"Divider","href":"/divider","docId":"divider"},{"type":"link","label":"Editable Text","href":"/editable-text","docId":"editable-text"},{"type":"link","label":"Event calendar","href":"/event-calendar","docId":"event-calendar"},{"type":"link","label":"Form","href":"/form","docId":"form"},{"type":"link","label":"Icon","href":"/icon","docId":"icon"},{"type":"link","label":"Image","href":"/image","docId":"image"},{"type":"link","label":"Input","href":"/input","docId":"input"},{"type":"link","label":"List","href":"/list","docId":"list"},{"type":"link","label":"Grid list","href":"/grid-list","docId":"grid-list"},{"type":"link","label":"Menu","href":"/menu","docId":"menu"},{"type":"link","label":"Modal","href":"/modal","docId":"modal"},{"type":"link","label":"Multi-select","href":"/multi-select","docId":"multi-select"},{"type":"link","label":"Number Input","href":"/number-input","docId":"number-input"},{"type":"link","label":"Page","href":"/page","docId":"page"},{"type":"link","label":"PDF","href":"/pdf","docId":"pdf"},{"type":"link","label":"Radio button","href":"/radio-button","docId":"radio-button"},{"type":"link","label":"Radio group","href":"/radio-group","docId":"radio-group"},{"type":"link","label":"Rate","href":"/rate","docId":"rate"},{"type":"link","label":"Select","href":"/select","docId":"select"},{"type":"link","label":"Statistics","href":"/statistics","docId":"statistics"},{"type":"link","label":"Switch","href":"/switch","docId":"switch"},{"type":"link","label":"Table","href":"/table","docId":"table"},{"type":"link","label":"Tabs","href":"/tabs","docId":"tabs"},{"type":"link","label":"Text","href":"/text","docId":"text"},{"type":"link","label":"Text area Input","href":"/text-area-input","docId":"text-area-input"},{"type":"link","label":"Time Picker","href":"/time-picker","docId":"time-picker"},{"type":"link","label":"Time Range","href":"/time-range","docId":"time-range"},{"type":"link","label":"Timeline","href":"/timeline","docId":"timeline"},{"type":"link","label":"Upload","href":"/upload","docId":"upload"},{"type":"link","label":"Video","href":"/video","docId":"video"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Resources","items":[{"type":"link","label":"Airtable","href":"/airtable","docId":"airtable"},{"type":"link","label":"Amazon S3","href":"/amazons3","docId":"amazons3"},{"type":"link","label":"Appwrite","href":"/appwrite","docId":"appwrite"},{"type":"link","label":"ClickHouse","href":"/clickhouse","docId":"clickhouse"},{"type":"link","label":"Elastic Search","href":"/elastic-search","docId":"elastic-search"},{"type":"link","label":"Firebase","href":"/firebase","docId":"firebase"},{"type":"link","label":"Hugging Face API","href":"/hugging-face-api","docId":"hugging-face-api"},{"type":"link","label":"Hugging Face Endpoint","href":"/hugging-face-endpoint","docId":"hugging-face-endpoint"},{"type":"link","label":"Hydra","href":"/hydra","docId":"hydra"},{"type":"link","label":"MariaDB","href":"/mariadb","docId":"mariadb"},{"type":"link","label":"Microsoft SQL","href":"/microsoft-sql","docId":"microsoft-sql"},{"type":"link","label":"MongoDB","href":"/mongodb","docId":"mongodb"},{"type":"link","label":"MySQL","href":"/mysql","docId":"mysql"},{"type":"link","label":"Neon","href":"/neon","docId":"neon"},{"type":"link","label":"Oracle DB","href":"/oracledb","docId":"oracledb"},{"type":"link","label":"PostgreSQL","href":"/postgresql","docId":"postgresql"},{"type":"link","label":"Redis","href":"/redis","docId":"redis"},{"type":"link","label":"REST API","href":"/restapi","docId":"restapi"},{"type":"link","label":"Snowflake","href":"/snowflake","docId":"snowflake"},{"type":"link","label":"Supabase DB","href":"/supabase","docId":"supabase"},{"type":"link","label":"TiDB","href":"/tidb","docId":"tidb"},{"type":"link","label":"Transformer","href":"/transformer","docId":"transformer"},{"type":"link","label":"Upstash","href":"/upstash","docId":"upstash"}],"collapsed":true,"collapsible":true},{"type":"category","label":"JavaScript and Event handler","items":[{"type":"link","label":"Run Script","href":"/run-script","docId":"run-script"},{"type":"link","label":"Event handler","href":"/event-handler","docId":"event-handler"}],"collapsed":true,"collapsible":true}],"collapsed":true,"collapsible":true,"href":"/"},{"type":"link","label":"Server-side pagination","href":"/server-side-pagination","docId":"server-side-pagination"},{"type":"link","label":"Self-hosted deployment","href":"/self-hosted-deployment","docId":"self-hosted-deployment"},{"type":"category","label":"Branding","items":[{"type":"link","label":"Custom domain","href":"/custom-domain","docId":"custom-domain"}],"collapsed":true,"collapsible":true},{"type":"category","label":"ILLA with AI","items":[{"type":"link","label":"AI Agent","href":"/ai-agent","docId":"ai-agent"}],"collapsed":true,"collapsible":true},{"type":"category","label":"ILLA Flow","items":[{"type":"link","label":"About ILLA Flow","href":"/illa-flow-introduction","docId":"illa-flow-introduction"},{"type":"link","label":"WebHook","href":"/illa-flow-webhook","docId":"illa-flow-webhook"},{"type":"link","label":"Response","href":"/illa-flow-response","docId":"illa-flow-response"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Changelogs","items":[{"type":"link","label":"V 4.8","href":"/4-8","docId":"4-8"},{"type":"link","label":"V 4.5","href":"/4-5","docId":"4-5"},{"type":"link","label":"V 4.4","href":"/4-4","docId":"4-4"},{"type":"link","label":"V 4.3.6","href":"/4-3-6","docId":"4-3-6"},{"type":"link","label":"V 4.3","href":"/4-3","docId":"4-3"},{"type":"link","label":"V 4.2","href":"/4-2","docId":"4-2"},{"type":"link","label":"V 4.1","href":"/4-1","docId":"4-1"},{"type":"link","label":"V 4.0","href":"/4-0","docId":"4-0"},{"type":"link","label":"V 3.5","href":"/3-5","docId":"3-5"},{"type":"link","label":"V 3.4","href":"/3-4","docId":"3-4"},{"type":"link","label":"V 3.3","href":"/3-3","docId":"3-3"}],"collapsed":true,"collapsible":true},{"type":"category","label":"ILLA policy","items":[{"type":"link","label":"Privacy Policy","href":"/privacy-policy","docId":"privacy-policy"},{"type":"link","label":"Terms of Service","href":"/terms-of-service","docId":"terms-of-service"}],"collapsed":true,"collapsible":true}]},"docs":{"3-3":{"id":"3-3","title":"V 3.3","description":"ILLA Cloud V 3.3 Changelog","sidebar":"tutorialSidebar"},"3-4":{"id":"3-4","title":"V 3.4","description":"ILLA Cloud V 3.4 Changelog","sidebar":"tutorialSidebar"},"3-5":{"id":"3-5","title":"V 3.5","description":"ILLA Cloud V 3.5 Changelog","sidebar":"tutorialSidebar"},"4-0":{"id":"4-0","title":"V 4.0","description":"ILLA Cloud V 4.0 Changelog","sidebar":"tutorialSidebar"},"4-1":{"id":"4-1","title":"V 4.1","description":"ILLA Cloud V 4.1 Changelog","sidebar":"tutorialSidebar"},"4-2":{"id":"4-2","title":"V 4.2","description":"ILLA Cloud V 4.2 Changelog","sidebar":"tutorialSidebar"},"4-3":{"id":"4-3","title":"V 4.3","description":"ILLA Cloud V 4.3 Changelog","sidebar":"tutorialSidebar"},"4-3-6":{"id":"4-3-6","title":"V 4.3.6","description":"ILLA Cloud V 4.3.6 Changelog","sidebar":"tutorialSidebar"},"4-4":{"id":"4-4","title":"V 4.4","description":"ILLA Cloud V 4.4 Changelog","sidebar":"tutorialSidebar"},"4-5":{"id":"4-5","title":"V 4.5","description":"ILLA Cloud V 4.5 Changelog","sidebar":"tutorialSidebar"},"4-8":{"id":"4-8","title":"V 4.8","description":"ILLA Cloud V 4.8 Changelog","sidebar":"tutorialSidebar"},"4-9":{"id":"4-9","title":"V 4.9","description":"ILLA Cloud V 4.9 Changelog"},"about-illa":{"id":"about-illa","title":"About ILLA","description":"ILLA is an open-source low-code platform for developers to build and deploy internal tools remarkably fast.","sidebar":"tutorialSidebar"},"ai-agent":{"id":"ai-agent","title":"AI Agent","description":"Customize the AI Agent according to your needs, limiting the behavior of the GPT model to generate content as per your requirements. Integrate the AI Agent into the ILLA App to make your app more intelligent.","sidebar":"tutorialSidebar"},"airtable":{"id":"airtable","title":"Airtable","description":"Learn how to connect your Airtable API to ILLA Cloud and create apps that can query, manipulate, and display data","sidebar":"tutorialSidebar"},"amazons3":{"id":"amazons3","title":"Amazon S3","description":"Learn how to connect and interact with your Amazon S3 API using ILLA Cloud\'s database integration feature.","sidebar":"tutorialSidebar"},"appwrite":{"id":"appwrite","title":"Appwrite","description":"Learn how to connect and interact with Appwrite database using ILLA Cloud.","sidebar":"tutorialSidebar"},"bar-progress":{"id":"bar-progress","title":"Bar progress","description":"Learn how to use the bar progress component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"button":{"id":"button","title":"Button","description":"Learn how to use the button component in ILLA Cloud.","sidebar":"tutorialSidebar"},"cascader":{"id":"cascader","title":"Cascader","description":"Learn how to customize and control the Cascader options in ILLA Cloud.","sidebar":"tutorialSidebar"},"circle-progress":{"id":"circle-progress","title":"Circle progress","description":"Learn how to use the circle progress component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"clickhouse":{"id":"clickhouse","title":"ClickHouse","description":"Learn how to use ILLA Cloud to access and work with ClickHouse data.","sidebar":"tutorialSidebar"},"container":{"id":"container","title":"Container","description":"Learn how to use ILLA Container to group reltated components together in a card","sidebar":"tutorialSidebar"},"custom-domain":{"id":"custom-domain","title":"Custom domain","description":"You can access your ILLA Cloud team through your own domain name by customizing it.","sidebar":"tutorialSidebar"},"data-grid":{"id":"data-grid","title":"Data Grid","description":"A fast and extendable react data table and react data grid with blazing fast performance.","sidebar":"tutorialSidebar"},"date":{"id":"date","title":"Date","description":"Learn how to use the date component to add a calendar picker to ILLA app.","sidebar":"tutorialSidebar"},"date-range":{"id":"date-range","title":"Date Range","description":"Learn how to use the Date Range component from ILLA Cloud to let users select a start and end date.","sidebar":"tutorialSidebar"},"date-time":{"id":"date-time","title":"Date Time","description":"Discover how to use the Date Time component from ILLA Cloud to enable users to pick a date and time.","sidebar":"tutorialSidebar"},"divider":{"id":"divider","title":"Divider","description":"Learn how to use the divider component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"editable-text":{"id":"editable-text","title":"Editable Text","description":"Learn how to use the Editable Text component to create and customize text fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"elastic-search":{"id":"elastic-search","title":"Elastic Search","description":"Use ILLA Cloud to connect and interact with your Elastic Search data.","sidebar":"tutorialSidebar"},"event-calendar":{"id":"event-calendar","title":"Event calendar","description":"Learn how to use the event calendar component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"event-handler":{"id":"event-handler","title":"Event handler","description":"Add an event handler to the component to trigger an event when the component\'s state changes.","sidebar":"tutorialSidebar"},"firebase":{"id":"firebase","title":"Firebase","description":"Discover how to connect and interact with Firebase API using ILLA Cloud\'s integration feature.","sidebar":"tutorialSidebar"},"form":{"id":"form","title":"Form","description":"Learn how to use the form component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"grid-list":{"id":"grid-list","title":"Grid list","description":"Display your items as a grid rather than a normal list of items that come one after the next","sidebar":"tutorialSidebar"},"hugging-face-api":{"id":"hugging-face-api","title":"Hugging Face API","description":"Learn how to use Hugging Face API in ILLA","sidebar":"tutorialSidebar"},"hugging-face-endpoint":{"id":"hugging-face-endpoint","title":"Hugging Face Endpoint","description":"Learn how to use Hugging Face Endpoint in ILLA","sidebar":"tutorialSidebar"},"hydra":{"id":"hydra","title":"Hydra","description":"Use ILLA Cloud to access and work with your Hydra data. Create apps that can query, manipulate, and display data.","sidebar":"tutorialSidebar"},"icon":{"id":"icon","title":"Icon","description":"Learn how to use the icon component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"illa-flow-introduction":{"id":"illa-flow-introduction","title":"About ILLA Flow","description":"What is ILLA Flow","sidebar":"tutorialSidebar"},"illa-flow-response":{"id":"illa-flow-response","title":"Response","description":"Introduction","sidebar":"tutorialSidebar"},"illa-flow-webhook":{"id":"illa-flow-webhook","title":"WebHook","description":"What is WebHook","sidebar":"tutorialSidebar"},"image":{"id":"image","title":"Image","description":"Learn how to use the Image component to upload and customize image for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"input":{"id":"input","title":"Input","description":"Learn how to use the input component to create and customize text fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"list":{"id":"list","title":"List","description":"The List component allows you to create repeatable rows of data whose look and feel are defined by you.","sidebar":"tutorialSidebar"},"mariadb":{"id":"mariadb","title":"MariaDB","description":"Connect your MariaDB database to ILLA Cloud and create apps that can query, manipulate, and display data. Read this guide to learn how.","sidebar":"tutorialSidebar"},"menu":{"id":"menu","title":"Menu","description":"Learn how to use the menu component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"microsoft-sql":{"id":"microsoft-sql","title":"Microsoft SQL","description":"Learn how to use ILLA Cloud to access and work with Microsoft SQL data. Build apps, visualize data, and automate workflows with ILLA Cloud.","sidebar":"tutorialSidebar"},"modal":{"id":"modal","title":"Modal","description":"Learn how to use the modal component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"mongodb":{"id":"mongodb","title":"MongoDB","description":"Learn how to use ILLA Cloud to build apps with MongoDB. Explore data querying, manipulation, and visualization features.","sidebar":"tutorialSidebar"},"multi-select":{"id":"multi-select","title":"Multi-select","description":"A drop-down component that displays all options, supports multiple selections","sidebar":"tutorialSidebar"},"mysql":{"id":"mysql","title":"MySQL","description":"Connect and interact with a MySQL database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"neon":{"id":"neon","title":"Neon","description":"Connect your Neon database to ILLA Cloud and create apps that can query, manipulate, and display data. This guide will show you how.","sidebar":"tutorialSidebar"},"number-input":{"id":"number-input","title":"Number Input","description":"Learn how to use the number input component to create and customize number input fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"oracledb":{"id":"oracledb","title":"Oracle DB","description":"Learn how to use ILLA Cloud\'s database integration feature to connect and interact with your OracleDB database in a few simple steps.","sidebar":"tutorialSidebar"},"page":{"id":"page","title":"Page","description":"---","sidebar":"tutorialSidebar"},"pdf":{"id":"pdf","title":"PDF","description":"Learn how to use the PDF component to upload and customize pdf files for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"postgresql":{"id":"postgresql","title":"PostgreSQL","description":"Connect and interact with a PostgreSQL database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"privacy-policy":{"id":"privacy-policy","title":"Privacy Policy","description":"Privacy Policy","sidebar":"tutorialSidebar"},"radio-button":{"id":"radio-button","title":"Radio button","description":"Display all options on radio buttons and support to select 1 option.","sidebar":"tutorialSidebar"},"radio-group":{"id":"radio-group","title":"Radio group","description":"Displays all options on radio group and supports to select 1 option.","sidebar":"tutorialSidebar"},"rate":{"id":"rate","title":"Rate","description":"Learn how to use the rate component to create and customize the rate value for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"redis":{"id":"redis","title":"Redis","description":"Discover how to connect and interact with your Redis database using ILLA Cloud\'s database integration feature. Check out this guide for more details.","sidebar":"tutorialSidebar"},"restapi":{"id":"restapi","title":"REST API","description":"Learn how to use ILLA Cloud to access and work with REST API data. Build apps, visualize data, and automate workflows with ILLA Cloud.","sidebar":"tutorialSidebar"},"run-script":{"id":"run-script","title":"Run Script","description":"By triggering the Run Script through an Event handler, you can achieve sequential execution of operations and perform different actions based on different condition.","sidebar":"tutorialSidebar"},"select":{"id":"select","title":"Select","description":"Displays all options in dropdown box and supports to select 1 option.","sidebar":"tutorialSidebar"},"self-hosted-deployment":{"id":"self-hosted-deployment","title":"Self-hosted deployment","description":"ILLA Builder provides a seamless deployment experience that allows you to deploy ILLA Builder at an astonishing speed within your own Virtual Private Cloud (VPC).","sidebar":"tutorialSidebar"},"server-side-pagination":{"id":"server-side-pagination","title":"Server-side pagination","description":"When dealing with large amounts of data, using server-side pagination in your queries can greatly improve efficiency. In this article, you will learn how to utilize server-side pagination in ILLA Cloud.","sidebar":"tutorialSidebar"},"snowflake":{"id":"snowflake","title":"Snowflake","description":"Connect and interact with a Snowflake database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"statistics":{"id":"statistics","title":"Statistics","description":"Learn how to use the statistics component to create and customize the statistic value for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"supabase":{"id":"supabase","title":"Supabase DB","description":"Connect to Supabase instance and show Supabase DB data on components","sidebar":"tutorialSidebar"},"switch":{"id":"switch","title":"Switch","description":"Learn how to use the Switch component in ILLA Cloud to create a user interface that lets users switch between two options. See examples and properties of Switch.","sidebar":"tutorialSidebar"},"table":{"id":"table","title":"Table","description":"Learn how to use the table component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"tabs":{"id":"tabs","title":"Tabs","description":"Learn how to use the tabs component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"terms-of-service":{"id":"terms-of-service","title":"Terms of Service","description":"Terms of Service","sidebar":"tutorialSidebar"},"text":{"id":"text","title":"Text","description":"Display data with text component","sidebar":"tutorialSidebar"},"text-area-input":{"id":"text-area-input","title":"Text area Input","description":"Learn how to use the Text area input component to create and customize text area input fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"tidb":{"id":"tidb","title":"TiDB","description":"Use ILLA Cloud to access and work with your TiDB data. Create apps that can query, manipulate, and display data. Follow this guide to get started.","sidebar":"tutorialSidebar"},"time-picker":{"id":"time-picker","title":"Time Picker","description":"Find out how to use the Time Picker component from ILLA Cloud to let users choose a specific time from a 24 hour time UI in your projects.","sidebar":"tutorialSidebar"},"time-range":{"id":"time-range","title":"Time Range","description":"Learn how to use the Time Range component from ILLA Cloud to let users select a range of times from a 24-hour interface in your applications.","sidebar":"tutorialSidebar"},"timeline":{"id":"timeline","title":"Timeline","description":"Learn how to use the Timeline component from ILLA Cloud","sidebar":"tutorialSidebar"},"transformer":{"id":"transformer","title":"Transformer","description":"Transformer in ILLA allows user to write JavaScript to refine the application logic","sidebar":"tutorialSidebar"},"upload":{"id":"upload","title":"Upload","description":"Use the upload component to upload files from the local machines to any cloud storage","sidebar":"tutorialSidebar"},"upstash":{"id":"upstash","title":"Upstash","description":"Learn how to connect your Upstash Redis database to ILLA Cloud and create apps that can query, manipulate, and display data","sidebar":"tutorialSidebar"},"video":{"id":"video","title":"Video","description":"Learn how to use the Video component to upload and customize video for your app in ILLA Cloud.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/e260ee44.2e36c685.js b/assets/js/e260ee44.b5c68e76.js similarity index 77% rename from assets/js/e260ee44.2e36c685.js rename to assets/js/e260ee44.b5c68e76.js index f85df34fc5..8570ce1c47 100644 --- a/assets/js/e260ee44.2e36c685.js +++ b/assets/js/e260ee44.b5c68e76.js @@ -1 +1 @@ -"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[7288],{9613:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>m});var n=r(9496);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,c=e.parentName,p=a(e,["components","mdxType","originalType","parentName"]),s=u(r),d=o,m=s["".concat(c,".").concat(d)]||s[d]||f[d]||i;return r?n.createElement(m,l(l({ref:t},p),{},{components:r})):n.createElement(m,l({ref:t},p))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,l=new Array(i);l[0]=d;var a={};for(var c in t)hasOwnProperty.call(t,c)&&(a[c]=t[c]);a.originalType=e,a[s]="string"==typeof e?e:o,l[1]=a;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>f,frontMatter:()=>i,metadata:()=>a,toc:()=>u});var n=r(8028),o=(r(9496),r(9613));const i={title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog"},l="V 4.8",a={unversionedId:"4-8",id:"4-8",title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog",source:"@site/docs/4-8.mdx",sourceDirName:".",slug:"/4-8",permalink:"/4-8",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/docs/4-8.mdx",tags:[],version:"current",frontMatter:{title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog"},sidebar:"tutorialSidebar",previous:{title:"Response",permalink:"/illa-flow-response"},next:{title:"V 4.5",permalink:"/4-5"}},c={},u=[{value:"\ud83d\udc85 Polish",id:"-polish",level:2},{value:"\ud83d\udc1b Bug fix",id:"-bug-fix",level:2}],p={toc:u},s="wrapper";function f(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"v-48"},"V 4.8"),(0,o.kt)("p",null,"2024.05.09"),(0,o.kt)("h2",{id:"-polish"},"\ud83d\udc85 Polish"),(0,o.kt)("p",null,"Optimized the AI Agent dialogue process for stronger performance during long conversations."),(0,o.kt)("h2",{id:"-bug-fix"},"\ud83d\udc1b Bug fix"),(0,o.kt)("p",null,"Fixed the occasional issue of successful login not redirecting."))}f.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[7288],{9613:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>m});var n=r(9496);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,c=e.parentName,p=a(e,["components","mdxType","originalType","parentName"]),s=u(r),d=o,m=s["".concat(c,".").concat(d)]||s[d]||f[d]||i;return r?n.createElement(m,l(l({ref:t},p),{},{components:r})):n.createElement(m,l({ref:t},p))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,l=new Array(i);l[0]=d;var a={};for(var c in t)hasOwnProperty.call(t,c)&&(a[c]=t[c]);a.originalType=e,a[s]="string"==typeof e?e:o,l[1]=a;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>f,frontMatter:()=>i,metadata:()=>a,toc:()=>u});var n=r(8028),o=(r(9496),r(9613));const i={title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog"},l="V 4.8",a={unversionedId:"4-8",id:"4-8",title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog",source:"@site/docs/4-8.mdx",sourceDirName:".",slug:"/4-8",permalink:"/4-8",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/docs/4-8.mdx",tags:[],version:"current",frontMatter:{title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog"},sidebar:"tutorialSidebar",previous:{title:"V 4.9",permalink:"/4-9"},next:{title:"V 4.5",permalink:"/4-5"}},c={},u=[{value:"\ud83d\udc85 Polish",id:"-polish",level:2},{value:"\ud83d\udc1b Bug fix",id:"-bug-fix",level:2}],p={toc:u},s="wrapper";function f(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"v-48"},"V 4.8"),(0,o.kt)("p",null,"2024.05.09"),(0,o.kt)("h2",{id:"-polish"},"\ud83d\udc85 Polish"),(0,o.kt)("p",null,"Optimized the AI Agent dialogue process for stronger performance during long conversations."),(0,o.kt)("h2",{id:"-bug-fix"},"\ud83d\udc1b Bug fix"),(0,o.kt)("p",null,"Fixed the occasional issue of successful login not redirecting."))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/main.3c962278.js b/assets/js/main.3c962278.js new file mode 100644 index 0000000000..d5b6aa0347 --- /dev/null +++ b/assets/js/main.3c962278.js @@ -0,0 +1,2 @@ +/*! For license information please see main.3c962278.js.LICENSE.txt */ +(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[179],{2040:(e,t,n)=>{"use strict";n.d(t,{W:()=>a});var r=n(9496);function a(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},8862:(e,t,n)=>{var r={"./":1884};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=8862},1968:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(9496),a=n(8028),o=n(1889),i=n.n(o),l=n(6887);const s={"077b3b1c":[()=>n.e(5644).then(n.bind(n,2206)),"@site/docs/illa-flow-webhook.mdx",2206],"07a11951":[()=>n.e(5545).then(n.bind(n,807)),"@site/docs/icon.mdx",807],"0901c930":[()=>n.e(6224).then(n.bind(n,9733)),"@site/docs/data-grid.mdx",9733],"0e8c43f2":[()=>n.e(4512).then(n.bind(n,6935)),"@site/docs/4-2.mdx",6935],"0e97019d":[()=>n.e(8989).then(n.bind(n,5893)),"@site/docs/4-4.mdx",5893],"0ff6b9bf":[()=>n.e(2961).then(n.bind(n,1433)),"@site/docs/supabase.mdx",1433],"1718a827":[()=>n.e(5583).then(n.bind(n,6285)),"@site/docs/4-3-6.mdx",6285],17896441:[()=>Promise.all([n.e(532),n.e(7918)]).then(n.bind(n,4367)),"@theme/DocItem",4367],"1a4e3797":[()=>Promise.all([n.e(532),n.e(7920)]).then(n.bind(n,1323)),"@theme/SearchPage",1323],"1be78505":[()=>Promise.all([n.e(532),n.e(9514)]).then(n.bind(n,4171)),"@theme/DocPage",4171],"25b17a77":[()=>n.e(1593).then(n.bind(n,2729)),"@site/docs/3-4.mdx",2729],"2b1e3bf1":[()=>n.e(3311).then(n.bind(n,7610)),"@site/docs/terms-of-service.mdx",7610],"2d6cd81a":[()=>n.e(2735).then(n.bind(n,3865)),"@site/docs/video.mdx",3865],"2ef1edda":[()=>n.e(109).then(n.bind(n,1927)),"@site/docs/illa-flow-response.mdx",1927],"2f8c493c":[()=>n.e(4118).then(n.bind(n,1531)),"@site/docs/custom-domain.mdx",1531],"31f89694":[()=>n.e(9743).then(n.bind(n,137)),"@site/docs/microsoft-sql.mdx",137],"349796c1":[()=>n.e(6129).then(n.bind(n,1192)),"@site/docs/radio-button.mdx",1192],"39aea04c":[()=>n.e(528).then(n.bind(n,9625)),"@site/docs/editable-text.mdx",9625],"3c4f96f5":[()=>n.e(7861).then(n.bind(n,4978)),"@site/docs/number-input.mdx",4978],"3c84a325":[()=>n.e(9855).then(n.bind(n,548)),"@site/docs/transformer.mdx",548],"3e7292c1":[()=>n.e(2727).then(n.bind(n,2186)),"@site/docs/grid-list.mdx",2186],"42b3cfdb":[()=>n.e(1808).then(n.bind(n,196)),"@site/docs/4-9.mdx",196],"43e78748":[()=>n.e(1545).then(n.bind(n,19)),"@site/docs/airtable.mdx",19],"44b770e6":[()=>n.e(2010).then(n.bind(n,9745)),"@site/docs/mariadb.mdx",9745],"453085ce":[()=>n.e(1058).then(n.bind(n,4189)),"@site/docs/restapi.mdx",4189],"49b133c2":[()=>n.e(7871).then(n.bind(n,1803)),"@site/docs/select.mdx",1803],"4acb748e":[()=>n.e(8597).then(n.bind(n,4528)),"@site/docs/modal.mdx",4528],"4b739a0a":[()=>n.e(7297).then(n.bind(n,9868)),"@site/docs/mysql.mdx",9868],"4ccbb098":[()=>n.e(3627).then(n.bind(n,4205)),"@site/docs/postgresql.mdx",4205],"4f035fbb":[()=>n.e(8037).then(n.bind(n,5666)),"@site/docs/text.mdx",5666],"50f53614":[()=>n.e(5037).then(n.bind(n,8553)),"@site/docs/self-hosted-deployment.mdx",8553],"57167b75":[()=>n.e(8881).then(n.bind(n,8272)),"@site/docs/time-range.mdx",8272],"5866f607":[()=>n.e(2603).then(n.bind(n,2160)),"@site/docs/cascader.mdx",2160],"599b5c12":[()=>n.e(6142).then(n.bind(n,5571)),"@site/docs/upload.mdx",5571],"5ca15aa1":[()=>n.e(6057).then(n.bind(n,9567)),"@site/docs/timeline.mdx",9567],60148170:[()=>n.e(7459).then(n.bind(n,3335)),"@site/docs/menu.mdx",3335],"60d5e7f8":[()=>n.e(6448).then(n.bind(n,5806)),"@site/docs/date.mdx",5806],"66bbaf8a":[()=>n.e(4756).then(n.bind(n,6780)),"@site/docs/hugging-face-endpoint.mdx",6780],"6c54ef2c":[()=>n.e(1804).then(n.bind(n,1011)),"@site/docs/server-side-pagination.mdx",1011],"7079a09c":[()=>n.e(8760).then(n.bind(n,2228)),"@site/docs/upstash.mdx",2228],"741c2d66":[()=>n.e(6207).then(n.bind(n,2289)),"@site/docs/appwrite.mdx",2289],"764a66b2":[()=>n.e(3149).then(n.bind(n,1365)),"@site/docs/date-time.mdx",1365],"81e69fca":[()=>n.e(2811).then(n.bind(n,7554)),"@site/docs/4-1.mdx",7554],"84588a77":[()=>n.e(9988).then(n.bind(n,2080)),"@site/docs/container.mdx",2080],84889184:[()=>n.e(4725).then(n.t.bind(n,3769,19)),"/home/runner/work/illa-doc/illa-doc/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",3769],"84cc7777":[()=>n.e(1944).then(n.bind(n,2023)),"@site/docs/snowflake.mdx",2023],"8579747e":[()=>n.e(466).then(n.bind(n,2312)),"@site/docs/tidb.mdx",2312],"9198aee5":[()=>n.e(2203).then(n.bind(n,6629)),"@site/docs/about-illa.mdx",6629],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],"93e09d8e":[()=>n.e(7595).then(n.bind(n,1477)),"@site/docs/page.mdx",1477],"9904486a":[()=>n.e(6059).then(n.bind(n,5592)),"@site/docs/rate.mdx",5592],a08b6d73:[()=>n.e(9302).then(n.bind(n,524)),"@site/docs/hugging-face-api.mdx",524],a0ad4ccd:[()=>n.e(5013).then(n.bind(n,7846)),"@site/docs/date-range.mdx",7846],a0aebde3:[()=>n.e(8450).then(n.bind(n,5193)),"@site/docs/hydra.mdx",5193],a2de0b6e:[()=>n.e(2896).then(n.bind(n,905)),"@site/docs/neon.mdx",905],a45c26b0:[()=>n.e(9245).then(n.t.bind(n,7085,19)),"/home/runner/work/illa-doc/illa-doc/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",7085],a5f31b96:[()=>n.e(9281).then(n.bind(n,1250)),"@site/docs/run-script.mdx",1250],b226ad96:[()=>n.e(7689).then(n.bind(n,1205)),"@site/docs/oracledb.mdx",1205],b411dd92:[()=>n.e(5846).then(n.bind(n,2051)),"@site/docs/multi-select.mdx",2051],b49e274c:[()=>n.e(8796).then(n.bind(n,6681)),"@site/docs/input.mdx",6681],b865123d:[()=>n.e(3008).then(n.bind(n,3223)),"@site/docs/switch.mdx",3223],b96904c0:[()=>n.e(1813).then(n.bind(n,8453)),"@site/docs/3-3.mdx",8453],bdca9dbc:[()=>n.e(5386).then(n.bind(n,9405)),"@site/docs/form.mdx",9405],be6f4d27:[()=>n.e(319).then(n.bind(n,3986)),"@site/docs/statistics.mdx",3986],bff842e8:[()=>n.e(3322).then(n.bind(n,4125)),"@site/docs/firebase.mdx",4125],c40e2bff:[()=>n.e(2119).then(n.bind(n,4507)),"@site/docs/time-picker.mdx",4507],c4a38b13:[()=>n.e(5380).then(n.bind(n,3207)),"@site/docs/ai-agent.mdx",3207],c63784c6:[()=>n.e(8123).then(n.bind(n,5956)),"@site/docs/table.mdx",5956],c850e1f1:[()=>n.e(4032).then(n.bind(n,3196)),"@site/docs/3-5.mdx",3196],c8cd40c8:[()=>n.e(2764).then(n.bind(n,6632)),"@site/docs/bar-progress.mdx",6632],cb37f082:[()=>n.e(753).then(n.bind(n,8454)),"@site/docs/text-area-input.mdx",8454],cd0bf7ba:[()=>n.e(2963).then(n.bind(n,8518)),"@site/docs/image.mdx",8518],d11e46c9:[()=>n.e(6953).then(n.bind(n,365)),"@site/docs/clickhouse.mdx",365],d1becb09:[()=>n.e(2518).then(n.bind(n,8935)),"@site/docs/privacy-policy.mdx",8935],d41ee301:[()=>n.e(8401).then(n.bind(n,1780)),"@site/docs/event-calendar.mdx",1780],d4a070d3:[()=>n.e(1642).then(n.bind(n,1745)),"@site/docs/button.mdx",1745],d4af05d3:[()=>n.e(1902).then(n.bind(n,150)),"@site/docs/4-0.mdx",150],d6062b68:[()=>n.e(2649).then(n.bind(n,4354)),"@site/docs/illa-flow-introduction.mdx",4354],d8865cb1:[()=>n.e(6594).then(n.bind(n,2543)),"@site/docs/mongodb.mdx",2543],d96d4ae2:[()=>n.e(2471).then(n.bind(n,2753)),"@site/docs/elastic-search.mdx",2753],dbe0b471:[()=>n.e(3168).then(n.bind(n,7978)),"@site/docs/redis.mdx",7978],e00d0095:[()=>n.e(4477).then(n.bind(n,5342)),"@site/docs/4-3.mdx",5342],e260ee44:[()=>n.e(7288).then(n.bind(n,6483)),"@site/docs/4-8.mdx",6483],e2b599e3:[()=>n.e(2598).then(n.bind(n,1809)),"@site/docs/tabs.mdx",1809],e2f77504:[()=>n.e(5760).then(n.bind(n,8004)),"@site/docs/list.mdx",8004],e43e1aec:[()=>n.e(7013).then(n.bind(n,4563)),"@site/docs/circle-progress.mdx",4563],e86dda31:[()=>n.e(8067).then(n.bind(n,3048)),"@site/docs/4-5.mdx",3048],ed27b80a:[()=>n.e(349).then(n.bind(n,2563)),"@site/docs/divider.mdx",2563],f1a77168:[()=>n.e(1532).then(n.bind(n,49)),"@site/docs/pdf.mdx",49],f467ca34:[()=>n.e(401).then(n.bind(n,3786)),"@site/docs/radio-group.mdx",3786],f468ee73:[()=>n.e(9757).then(n.bind(n,6762)),"@site/docs/event-handler.mdx",6762],fd2f35b4:[()=>n.e(8023).then(n.bind(n,720)),"@site/docs/amazons3.mdx",720]};function u(e){let{error:t,retry:n,pastDelay:a}=e;return t?r.createElement("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"}},r.createElement("p",null,String(t)),r.createElement("div",null,r.createElement("button",{type:"button",onClick:n},"Retry"))):a?r.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},r.createElement("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb"},r.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"22",r:"8"},r.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))):null}var c=n(8842),d=n(554);function p(e,t){if("*"===e)return i()({loading:u,loader:()=>n.e(7947).then(n.bind(n,7947)),modules:["@theme/NotFound"],webpack:()=>[7947],render(e,t){const n=e.default;return r.createElement(d.z,{value:{plugin:{name:"native",id:"default"}}},r.createElement(n,t))}});const o=l[`${e}-${t}`],p={},f=[],m=[],h=(0,c.Z)(o);return Object.entries(h).forEach((e=>{let[t,n]=e;const r=s[n];r&&(p[t]=r[0],f.push(r[1]),m.push(r[2]))})),i().Map({loading:u,loader:p,modules:f,webpack:()=>m,render(t,n){const i=JSON.parse(JSON.stringify(o));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let o=i;const l=n.split(".");l.slice(0,-1).forEach((e=>{o=o[e]})),o[l[l.length-1]]=a}));const l=i.__comp;delete i.__comp;const s=i.__context;return delete i.__context,r.createElement(d.z,{value:s},r.createElement(l,(0,a.Z)({},i,n)))}})}const f=[{path:"/search",component:p("/search","bec"),exact:!0},{path:"/",component:p("/","005"),routes:[{path:"/",component:p("/","c95"),exact:!0,sidebar:"tutorialSidebar"},{path:"/3-3",component:p("/3-3","4b4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/3-4",component:p("/3-4","0eb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/3-5",component:p("/3-5","c8e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/4-0",component:p("/4-0","fb7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/4-1",component:p("/4-1","66d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/4-2",component:p("/4-2","079"),exact:!0,sidebar:"tutorialSidebar"},{path:"/4-3",component:p("/4-3","e14"),exact:!0,sidebar:"tutorialSidebar"},{path:"/4-3-6",component:p("/4-3-6","dce"),exact:!0,sidebar:"tutorialSidebar"},{path:"/4-4",component:p("/4-4","3a0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/4-5",component:p("/4-5","fb3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/4-8",component:p("/4-8","ca3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/4-9",component:p("/4-9","4e1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/ai-agent",component:p("/ai-agent","cea"),exact:!0,sidebar:"tutorialSidebar"},{path:"/airtable",component:p("/airtable","174"),exact:!0,sidebar:"tutorialSidebar"},{path:"/amazons3",component:p("/amazons3","def"),exact:!0,sidebar:"tutorialSidebar"},{path:"/appwrite",component:p("/appwrite","d88"),exact:!0,sidebar:"tutorialSidebar"},{path:"/bar-progress",component:p("/bar-progress","8bf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/button",component:p("/button","3b7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/cascader",component:p("/cascader","f81"),exact:!0,sidebar:"tutorialSidebar"},{path:"/circle-progress",component:p("/circle-progress","f5e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/clickhouse",component:p("/clickhouse","912"),exact:!0,sidebar:"tutorialSidebar"},{path:"/container",component:p("/container","3ec"),exact:!0,sidebar:"tutorialSidebar"},{path:"/custom-domain",component:p("/custom-domain","8df"),exact:!0,sidebar:"tutorialSidebar"},{path:"/data-grid",component:p("/data-grid","1b8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/date",component:p("/date","51b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/date-range",component:p("/date-range","893"),exact:!0,sidebar:"tutorialSidebar"},{path:"/date-time",component:p("/date-time","367"),exact:!0,sidebar:"tutorialSidebar"},{path:"/divider",component:p("/divider","0ff"),exact:!0,sidebar:"tutorialSidebar"},{path:"/editable-text",component:p("/editable-text","4ea"),exact:!0,sidebar:"tutorialSidebar"},{path:"/elastic-search",component:p("/elastic-search","976"),exact:!0,sidebar:"tutorialSidebar"},{path:"/event-calendar",component:p("/event-calendar","328"),exact:!0,sidebar:"tutorialSidebar"},{path:"/event-handler",component:p("/event-handler","22d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/firebase",component:p("/firebase","034"),exact:!0,sidebar:"tutorialSidebar"},{path:"/form",component:p("/form","38a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/grid-list",component:p("/grid-list","93e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/hugging-face-api",component:p("/hugging-face-api","4c4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/hugging-face-endpoint",component:p("/hugging-face-endpoint","b93"),exact:!0,sidebar:"tutorialSidebar"},{path:"/hydra",component:p("/hydra","fd3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/icon",component:p("/icon","67f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/illa-flow-introduction",component:p("/illa-flow-introduction","cee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/illa-flow-response",component:p("/illa-flow-response","0fd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/illa-flow-webhook",component:p("/illa-flow-webhook","663"),exact:!0,sidebar:"tutorialSidebar"},{path:"/image",component:p("/image","424"),exact:!0,sidebar:"tutorialSidebar"},{path:"/input",component:p("/input","4e3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/list",component:p("/list","598"),exact:!0,sidebar:"tutorialSidebar"},{path:"/mariadb",component:p("/mariadb","cf3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/menu",component:p("/menu","001"),exact:!0,sidebar:"tutorialSidebar"},{path:"/microsoft-sql",component:p("/microsoft-sql","97a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modal",component:p("/modal","9f4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/mongodb",component:p("/mongodb","a40"),exact:!0,sidebar:"tutorialSidebar"},{path:"/multi-select",component:p("/multi-select","f2e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/mysql",component:p("/mysql","4a0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/neon",component:p("/neon","00f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/number-input",component:p("/number-input","14e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/oracledb",component:p("/oracledb","a51"),exact:!0,sidebar:"tutorialSidebar"},{path:"/page",component:p("/page","4ed"),exact:!0,sidebar:"tutorialSidebar"},{path:"/pdf",component:p("/pdf","a09"),exact:!0,sidebar:"tutorialSidebar"},{path:"/postgresql",component:p("/postgresql","0c8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/privacy-policy",component:p("/privacy-policy","2df"),exact:!0,sidebar:"tutorialSidebar"},{path:"/radio-button",component:p("/radio-button","304"),exact:!0,sidebar:"tutorialSidebar"},{path:"/radio-group",component:p("/radio-group","08a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/rate",component:p("/rate","5f6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/redis",component:p("/redis","a5f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/restapi",component:p("/restapi","dcd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/run-script",component:p("/run-script","1bb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/select",component:p("/select","32d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/self-hosted-deployment",component:p("/self-hosted-deployment","08d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/server-side-pagination",component:p("/server-side-pagination","c65"),exact:!0,sidebar:"tutorialSidebar"},{path:"/snowflake",component:p("/snowflake","972"),exact:!0,sidebar:"tutorialSidebar"},{path:"/statistics",component:p("/statistics","403"),exact:!0,sidebar:"tutorialSidebar"},{path:"/supabase",component:p("/supabase","920"),exact:!0,sidebar:"tutorialSidebar"},{path:"/switch",component:p("/switch","82b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/table",component:p("/table","f45"),exact:!0,sidebar:"tutorialSidebar"},{path:"/tabs",component:p("/tabs","849"),exact:!0,sidebar:"tutorialSidebar"},{path:"/terms-of-service",component:p("/terms-of-service","e60"),exact:!0,sidebar:"tutorialSidebar"},{path:"/text",component:p("/text","9e7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/text-area-input",component:p("/text-area-input","d5f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/tidb",component:p("/tidb","8fd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/time-picker",component:p("/time-picker","db9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/time-range",component:p("/time-range","40a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/timeline",component:p("/timeline","42d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/transformer",component:p("/transformer","ff4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/upload",component:p("/upload","671"),exact:!0,sidebar:"tutorialSidebar"},{path:"/upstash",component:p("/upstash","33b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/video",component:p("/video","ac0"),exact:!0,sidebar:"tutorialSidebar"}]},{path:"*",component:p("*")}]},4907:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,t:()=>o});var r=n(9496);const a=r.createContext(!1);function o(e){let{children:t}=e;const[n,o]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{o(!0)}),[]),r.createElement(a.Provider,{value:n},t)}},5105:(e,t,n)=>{"use strict";var r=n(9496),a=n(7995),o=n(8736),i=n(8663),l=n(6682);const s=[n(356),n(5869),n(2844),n(7787),n(2777)];var u=n(1968),c=n(3442),d=n(1789);function p(e){let{children:t}=e;return r.createElement(r.Fragment,null,t)}var f=n(8028),m=n(8801),h=n(7198),g=n(9962),b=n(640),v=n(9958),y=n(1014),w=n(2200),k=n(772),S=n(7286),E=n(911);function x(){const{i18n:{defaultLocale:e,localeConfigs:t}}=(0,h.Z)(),n=(0,y.l)();return r.createElement(m.Z,null,Object.entries(t).map((e=>{let[t,{htmlLang:a}]=e;return r.createElement("link",{key:t,rel:"alternate",href:n.createUrl({locale:t,fullyQualified:!0}),hrefLang:a})})),r.createElement("link",{rel:"alternate",href:n.createUrl({locale:e,fullyQualified:!0}),hrefLang:"x-default"}))}function _(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,h.Z)(),a=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,h.Z)(),{pathname:r}=(0,c.TH)();return e+(0,S.applyTrailingSlash)((0,g.Z)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:a;return r.createElement(m.Z,null,r.createElement("meta",{property:"og:url",content:o}),r.createElement("link",{rel:"canonical",href:o}))}function C(){const{i18n:{currentLocale:e}}=(0,h.Z)(),{metadata:t,image:n}=(0,b.L)();return r.createElement(r.Fragment,null,r.createElement(m.Z,null,r.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),r.createElement("body",{className:w.h})),n&&r.createElement(v.d,{image:n}),r.createElement(_,null),r.createElement(x,null),r.createElement(E.Z,{tag:k.HX,locale:e}),r.createElement(m.Z,null,t.map(((e,t)=>r.createElement("meta",(0,f.Z)({key:t},e))))))}const T=new Map;function A(e){if(T.has(e.pathname))return{...e,pathname:T.get(e.pathname)};if((0,d.f)(u.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return T.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return T.set(e.pathname,t),{...e,pathname:t}}var L=n(4907),R=n(6776);function N(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>a.forEach((e=>e?.()))}const O=function(e){let{children:t,location:n,previousLocation:a}=e;return(0,r.useLayoutEffect)((()=>{a!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,a=t.hash===n.hash,o=t.search===n.search;if(r&&a&&!o)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:a}),N("onRouteDidUpdate",{previousLocation:a,location:n}))}),[a,n]),t};function P(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.f)(u.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class I extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?N("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=N("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),P(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return r.createElement(O,{previousLocation:this.previousLocation,location:t},r.createElement(c.AW,{location:t,render:()=>e}))}}const D=I,M="__docusaurus-base-url-issue-banner-container",F="__docusaurus-base-url-issue-banner",B="__docusaurus-base-url-issue-banner-suggestion-container",j="__DOCUSAURUS_INSERT_BASEURL_BANNER";function z(e){return`\nwindow['${j}'] = true;\n\ndocument.addEventListener('DOMContentLoaded', maybeInsertBanner);\n\nfunction maybeInsertBanner() {\n var shouldInsert = window['${j}'];\n shouldInsert && insertBanner();\n}\n\nfunction insertBanner() {\n var bannerContainer = document.getElementById('${M}');\n if (!bannerContainer) {\n return;\n }\n var bannerHtml = ${JSON.stringify(function(e){return`\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

\n

We suggest trying baseUrl =

\n
\n`}(e)).replace(/{window[j]=!1}),[]),r.createElement(r.Fragment,null,!l.Z.canUseDOM&&r.createElement(m.Z,null,r.createElement("script",null,z(e))),r.createElement("div",{id:M}))}function $(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:t}}=(0,h.Z)(),{pathname:n}=(0,c.TH)();return t&&n===e?r.createElement(U,null):null}function q(){const{siteConfig:{favicon:e,title:t,noIndex:n},i18n:{currentLocale:a,localeConfigs:o}}=(0,h.Z)(),i=(0,g.Z)(e),{htmlLang:l,direction:s}=o[a];return r.createElement(m.Z,null,r.createElement("html",{lang:l,dir:s}),r.createElement("title",null,t),r.createElement("meta",{property:"og:title",content:t}),r.createElement("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),n&&r.createElement("meta",{name:"robots",content:"noindex, nofollow"}),e&&r.createElement("link",{rel:"icon",href:i}))}var H=n(3712),G=n(4996);function Z(){const e=(0,G.Z)();return r.createElement(m.Z,null,r.createElement("html",{"data-has-hydrated":e}))}function V(){const e=(0,d.H)(u.Z),t=(0,c.TH)();return r.createElement(H.Z,null,r.createElement(R.M,null,r.createElement(L.t,null,r.createElement(p,null,r.createElement(q,null),r.createElement(C,null),r.createElement($,null),r.createElement(D,{location:A(t)},e)),r.createElement(Z,null))))}var W=n(6887);const K=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const a=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;a?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var Y=n(8842);const Q=new Set,X=new Set,J=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ee={prefetch(e){if(!(e=>!J()&&!X.has(e)&&!Q.has(e))(e))return!1;Q.add(e);const t=(0,d.f)(u.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(W).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,Y.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?K(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!J()&&!X.has(e))(e)&&(X.add(e),P(e))},te=Object.freeze(ee);if(l.Z.canUseDOM){window.docusaurus=te;const e=a.hydrate;P(window.location.pathname).then((()=>{e(r.createElement(i.B6,null,r.createElement(o.VK,null,r.createElement(V,null))),document.getElementById("__docusaurus"))}))}},6776:(e,t,n)=>{"use strict";n.d(t,{_:()=>c,M:()=>d});var r=n(9496),a=n(6809);const o=JSON.parse('{"docusaurus-plugin-google-gtag":{"default":{"trackingID":["G-QW745VE33W"],"anonymizeIP":false,"id":"default"}},"docusaurus-plugin-content-docs":{"default":{"path":"/","versions":[{"name":"current","label":"Next","isLast":true,"path":"/","mainDocId":"about-illa","docs":[{"id":"3-3","path":"/3-3","sidebar":"tutorialSidebar"},{"id":"3-4","path":"/3-4","sidebar":"tutorialSidebar"},{"id":"3-5","path":"/3-5","sidebar":"tutorialSidebar"},{"id":"4-0","path":"/4-0","sidebar":"tutorialSidebar"},{"id":"4-1","path":"/4-1","sidebar":"tutorialSidebar"},{"id":"4-2","path":"/4-2","sidebar":"tutorialSidebar"},{"id":"4-3","path":"/4-3","sidebar":"tutorialSidebar"},{"id":"4-3-6","path":"/4-3-6","sidebar":"tutorialSidebar"},{"id":"4-4","path":"/4-4","sidebar":"tutorialSidebar"},{"id":"4-5","path":"/4-5","sidebar":"tutorialSidebar"},{"id":"4-8","path":"/4-8","sidebar":"tutorialSidebar"},{"id":"4-9","path":"/4-9","sidebar":"tutorialSidebar"},{"id":"about-illa","path":"/","sidebar":"tutorialSidebar"},{"id":"ai-agent","path":"/ai-agent","sidebar":"tutorialSidebar"},{"id":"airtable","path":"/airtable","sidebar":"tutorialSidebar"},{"id":"amazons3","path":"/amazons3","sidebar":"tutorialSidebar"},{"id":"appwrite","path":"/appwrite","sidebar":"tutorialSidebar"},{"id":"bar-progress","path":"/bar-progress","sidebar":"tutorialSidebar"},{"id":"button","path":"/button","sidebar":"tutorialSidebar"},{"id":"cascader","path":"/cascader","sidebar":"tutorialSidebar"},{"id":"circle-progress","path":"/circle-progress","sidebar":"tutorialSidebar"},{"id":"clickhouse","path":"/clickhouse","sidebar":"tutorialSidebar"},{"id":"container","path":"/container","sidebar":"tutorialSidebar"},{"id":"custom-domain","path":"/custom-domain","sidebar":"tutorialSidebar"},{"id":"data-grid","path":"/data-grid","sidebar":"tutorialSidebar"},{"id":"date","path":"/date","sidebar":"tutorialSidebar"},{"id":"date-range","path":"/date-range","sidebar":"tutorialSidebar"},{"id":"date-time","path":"/date-time","sidebar":"tutorialSidebar"},{"id":"divider","path":"/divider","sidebar":"tutorialSidebar"},{"id":"editable-text","path":"/editable-text","sidebar":"tutorialSidebar"},{"id":"elastic-search","path":"/elastic-search","sidebar":"tutorialSidebar"},{"id":"event-calendar","path":"/event-calendar","sidebar":"tutorialSidebar"},{"id":"event-handler","path":"/event-handler","sidebar":"tutorialSidebar"},{"id":"firebase","path":"/firebase","sidebar":"tutorialSidebar"},{"id":"form","path":"/form","sidebar":"tutorialSidebar"},{"id":"grid-list","path":"/grid-list","sidebar":"tutorialSidebar"},{"id":"hugging-face-api","path":"/hugging-face-api","sidebar":"tutorialSidebar"},{"id":"hugging-face-endpoint","path":"/hugging-face-endpoint","sidebar":"tutorialSidebar"},{"id":"hydra","path":"/hydra","sidebar":"tutorialSidebar"},{"id":"icon","path":"/icon","sidebar":"tutorialSidebar"},{"id":"illa-flow-introduction","path":"/illa-flow-introduction","sidebar":"tutorialSidebar"},{"id":"illa-flow-response","path":"/illa-flow-response","sidebar":"tutorialSidebar"},{"id":"illa-flow-webhook","path":"/illa-flow-webhook","sidebar":"tutorialSidebar"},{"id":"image","path":"/image","sidebar":"tutorialSidebar"},{"id":"input","path":"/input","sidebar":"tutorialSidebar"},{"id":"list","path":"/list","sidebar":"tutorialSidebar"},{"id":"mariadb","path":"/mariadb","sidebar":"tutorialSidebar"},{"id":"menu","path":"/menu","sidebar":"tutorialSidebar"},{"id":"microsoft-sql","path":"/microsoft-sql","sidebar":"tutorialSidebar"},{"id":"modal","path":"/modal","sidebar":"tutorialSidebar"},{"id":"mongodb","path":"/mongodb","sidebar":"tutorialSidebar"},{"id":"multi-select","path":"/multi-select","sidebar":"tutorialSidebar"},{"id":"mysql","path":"/mysql","sidebar":"tutorialSidebar"},{"id":"neon","path":"/neon","sidebar":"tutorialSidebar"},{"id":"number-input","path":"/number-input","sidebar":"tutorialSidebar"},{"id":"oracledb","path":"/oracledb","sidebar":"tutorialSidebar"},{"id":"page","path":"/page","sidebar":"tutorialSidebar"},{"id":"pdf","path":"/pdf","sidebar":"tutorialSidebar"},{"id":"postgresql","path":"/postgresql","sidebar":"tutorialSidebar"},{"id":"privacy-policy","path":"/privacy-policy","sidebar":"tutorialSidebar"},{"id":"radio-button","path":"/radio-button","sidebar":"tutorialSidebar"},{"id":"radio-group","path":"/radio-group","sidebar":"tutorialSidebar"},{"id":"rate","path":"/rate","sidebar":"tutorialSidebar"},{"id":"redis","path":"/redis","sidebar":"tutorialSidebar"},{"id":"restapi","path":"/restapi","sidebar":"tutorialSidebar"},{"id":"run-script","path":"/run-script","sidebar":"tutorialSidebar"},{"id":"select","path":"/select","sidebar":"tutorialSidebar"},{"id":"self-hosted-deployment","path":"/self-hosted-deployment","sidebar":"tutorialSidebar"},{"id":"server-side-pagination","path":"/server-side-pagination","sidebar":"tutorialSidebar"},{"id":"snowflake","path":"/snowflake","sidebar":"tutorialSidebar"},{"id":"statistics","path":"/statistics","sidebar":"tutorialSidebar"},{"id":"supabase","path":"/supabase","sidebar":"tutorialSidebar"},{"id":"switch","path":"/switch","sidebar":"tutorialSidebar"},{"id":"table","path":"/table","sidebar":"tutorialSidebar"},{"id":"tabs","path":"/tabs","sidebar":"tutorialSidebar"},{"id":"terms-of-service","path":"/terms-of-service","sidebar":"tutorialSidebar"},{"id":"text","path":"/text","sidebar":"tutorialSidebar"},{"id":"text-area-input","path":"/text-area-input","sidebar":"tutorialSidebar"},{"id":"tidb","path":"/tidb","sidebar":"tutorialSidebar"},{"id":"time-picker","path":"/time-picker","sidebar":"tutorialSidebar"},{"id":"time-range","path":"/time-range","sidebar":"tutorialSidebar"},{"id":"timeline","path":"/timeline","sidebar":"tutorialSidebar"},{"id":"transformer","path":"/transformer","sidebar":"tutorialSidebar"},{"id":"upload","path":"/upload","sidebar":"tutorialSidebar"},{"id":"upstash","path":"/upstash","sidebar":"tutorialSidebar"},{"id":"video","path":"/video","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/","label":"Build Apps"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en","zh"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"},"zh":{"label":"\u4e2d\u6587","direction":"ltr","htmlLang":"zh","calendar":"gregory","path":"zh"}}}');var l=n(7529);const s=JSON.parse('{"docusaurusVersion":"2.4.3","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"2.4.3"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"2.4.3"},"docusaurus-plugin-google-gtag":{"type":"package","name":"@docusaurus/plugin-google-gtag","version":"2.4.3"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"2.4.3"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"2.4.3"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"2.4.3"}}}'),u={siteConfig:a.default,siteMetadata:s,globalData:o,i18n:i,codeTranslations:l},c=r.createContext(u);function d(e){let{children:t}=e;return r.createElement(c.Provider,{value:u},t)}},3712:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});var r=n(9496),a=n(6682),o=n(8801),i=n(7286),l=n(7743);function s(e){let{error:t,tryAgain:n}=e;return r.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"}},r.createElement("h1",{style:{fontSize:"3rem"}},"This page crashed"),r.createElement("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"}},"Try again"),r.createElement(u,{error:t}))}function u(e){let{error:t}=e;const n=(0,i.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return r.createElement("p",{style:{whiteSpace:"pre-wrap"}},n)}function c(e){let{error:t,tryAgain:n}=e;return r.createElement(p,{fallback:()=>r.createElement(s,{error:t,tryAgain:n})},r.createElement(o.Z,null,r.createElement("title",null,"Page Error")),r.createElement(l.Z,null,r.createElement(s,{error:t,tryAgain:n})))}const d=e=>r.createElement(c,e);class p extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){a.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??d)(e)}return e??null}}},6682:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,a={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},8801:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(9496),a=n(8663);function o(e){return r.createElement(a.ql,e)}},327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(8028),a=n(9496),o=n(8736),i=n(7286),l=n(7198),s=n(8166),u=n(6682);const c=a.createContext({collectLink:()=>{}});var d=n(9962);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:m,isActive:h,"data-noBrokenLinkCheck":g,autoAddBaseUrl:b=!0,...v}=e;const{siteConfig:{trailingSlash:y,baseUrl:w}}=(0,l.Z)(),{withBaseUrl:k}=(0,d.C)(),S=(0,a.useContext)(c),E=(0,a.useRef)(null);(0,a.useImperativeHandle)(t,(()=>E.current));const x=p||f;const _=(0,s.Z)(x),C=x?.replace("pathname://","");let T=void 0!==C?(A=C,b&&(e=>e.startsWith("/"))(A)?k(A):A):void 0;var A;T&&_&&(T=(0,i.applyTrailingSlash)(T,{trailingSlash:y,baseUrl:w}));const L=(0,a.useRef)(!1),R=n?o.OL:o.rU,N=u.Z.canUseIntersectionObserver,O=(0,a.useRef)(),P=()=>{L.current||null==T||(window.docusaurus.preload(T),L.current=!0)};(0,a.useEffect)((()=>(!N&&_&&null!=T&&window.docusaurus.prefetch(T),()=>{N&&O.current&&O.current.disconnect()})),[O,T,N,_]);const I=T?.startsWith("#")??!1,D=!T||!_||I;return D||g||S.collectLink(T),D?a.createElement("a",(0,r.Z)({ref:E,href:T},x&&!_&&{target:"_blank",rel:"noopener noreferrer"},v)):a.createElement(R,(0,r.Z)({},v,{onMouseEnter:P,onTouchStart:P,innerRef:e=>{E.current=e,N&&e&&_&&(O.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(O.current.unobserve(e),O.current.disconnect(),null!=T&&window.docusaurus.prefetch(T))}))})),O.current.observe(e))},to:T},n&&{isActive:h,activeClassName:m}))}const f=a.forwardRef(p)},4423:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s,I:()=>l});var r=n(9496);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var o=n(7529);function i(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return o[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return a(i({message:n,id:r}),t)}function s(e){let{children:t,id:n,values:o}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const l=i({message:t,id:n});return r.createElement(r.Fragment,null,a(l,o))}},1026:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});const r="default"},8166:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>a,b:()=>r})},9962:(e,t,n)=>{"use strict";n.d(t,{C:()=>i,Z:()=>l});var r=n(9496),a=n(7198),o=n(8166);function i(){const{siteConfig:{baseUrl:e,url:t}}=(0,a.Z)(),n=(0,r.useCallback)(((n,r)=>function(e,t,n,r){let{forcePrependBaseUrl:a=!1,absolute:i=!1}=void 0===r?{}:r;if(!n||n.startsWith("#")||(0,o.b)(n))return n;if(a)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const l=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+l:l}(t,e,n,r)),[t,e]);return{withBaseUrl:n}}function l(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},7198:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(9496),a=n(6776);function o(){return(0,r.useContext)(a._)}},4996:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(9496),a=n(4907);function o(){return(0,r.useContext)(a._)}},8842:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function a(e){const t={};return function e(n,a){Object.entries(n).forEach((n=>{let[o,i]=n;const l=a?`${a}.${o}`:o;r(i)?e(i,l):t[l]=i}))}(e),t}},554:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,z:()=>o});var r=n(9496);const a=r.createContext(null);function o(e){let{children:t,value:n}=e;const o=r.useContext(a),i=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:o,value:n})),[o,n]);return r.createElement(a.Provider,{value:i},t)}},3727:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>b,gA:()=>f,WS:()=>m,_r:()=>d,Jo:()=>v,zh:()=>p,yW:()=>g,gB:()=>h});var r=n(3442),a=n(7198),o=n(1026);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,a.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const l=e=>e.versions.find((e=>e.isLast));function s(e,t){const n=l(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})))}function u(e,t){const n=s(e,t),a=n?.docs.find((e=>!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(a.id):{}}}const c={},d=()=>i("docusaurus-plugin-content-docs")??c,p=e=>function(e,t,n){void 0===t&&(t=o.m),void 0===n&&(n={});const r=i(e),a=r?.[t];if(!a&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return a}("docusaurus-plugin-content-docs",e,{failfast:!0});function f(e){void 0===e&&(e={});const t=d(),{pathname:n}=(0,r.TH)();return function(e,t,n){void 0===n&&(n={});const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return o}(t,n,e)}function m(e){void 0===e&&(e={});const t=f(e),{pathname:n}=(0,r.TH)();if(!t)return;return{activePlugin:t,activeVersion:s(t.pluginData,n)}}function h(e){return p(e).versions}function g(e){const t=p(e);return l(t)}function b(e){const t=p(e),{pathname:n}=(0,r.TH)();return u(t,n)}function v(e){const t=p(e),{pathname:n}=(0,r.TH)();return function(e,t){const n=l(e);return{latestDocSuggestion:u(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},356:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>r});const r={onRouteDidUpdate(e){let{location:t,previousLocation:n}=e;!n||t.pathname===n.pathname&&t.search===n.search&&t.hash===n.hash||setTimeout((()=>{window.gtag("event","page_view",{page_title:document.title,page_location:window.location.href,page_path:t.pathname+t.search+t.hash})}))}}},1889:(e,t,n)=>{"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign||function(e){for(var t=1;t{"use strict";n.r(t),n.d(t,{default:()=>o});var r=n(9981),a=n.n(r);a().configure({showSpinner:!1});const o={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},2844:(e,t,n)=>{"use strict";n.r(t);var r=n(999),a=n(6809);!function(e){const{themeConfig:{prism:t}}=a.default,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{n(8862)(`./prism-${e}`)})),delete globalThis.Prism}(r.Z)},3326:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(9496);const a={iconExternalLink:"iconExternalLink_MYOZ"};function o(e){let{width:t=13.5,height:n=13.5}=e;return r.createElement("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:a.iconExternalLink},r.createElement("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"}))}},7743:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Rt});var r=n(9496),a=n(5924),o=n(3712),i=n(9958),l=n(8028),s=n(3442),u=n(4423),c=n(7065);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,s.k6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.S)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const m=(0,u.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function h(e){const t=e.children??m,{containerRef:n,onClick:a}=f();return r.createElement("div",{ref:n,role:"region","aria-label":m},r.createElement("a",(0,l.Z)({},e,{href:`#${d}`,onClick:a}),t))}var g=n(2333),b=n(2200);const v={skipToContent:"skipToContent_dol0"};function y(){return r.createElement(h,{className:v.skipToContent})}var w=n(640),k=n(7849);function S(e){let{width:t=21,height:n=21,color:a="currentColor",strokeWidth:o=1.2,className:i,...s}=e;return r.createElement("svg",(0,l.Z)({viewBox:"0 0 15 15",width:t,height:n},s),r.createElement("g",{stroke:a,strokeWidth:o},r.createElement("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})))}const E={closeButton:"closeButton_R_Vi"};function x(e){return r.createElement("button",(0,l.Z)({type:"button","aria-label":(0,u.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"})},e,{className:(0,a.Z)("clean-btn close",E.closeButton,e.className)}),r.createElement(S,{width:14,height:14,strokeWidth:3.1}))}const _={content:"content_QNzC"};function C(e){const{announcementBar:t}=(0,w.L)(),{content:n}=t;return r.createElement("div",(0,l.Z)({},e,{className:(0,a.Z)(_.content,e.className),dangerouslySetInnerHTML:{__html:n}}))}const T={announcementBar:"announcementBar_Rdqy",announcementBarPlaceholder:"announcementBarPlaceholder_WEXQ",announcementBarClose:"announcementBarClose_iPSd",announcementBarContent:"announcementBarContent_VlLc"};function A(){const{announcementBar:e}=(0,w.L)(),{isActive:t,close:n}=(0,k.nT)();if(!t)return null;const{backgroundColor:a,textColor:o,isCloseable:i}=e;return r.createElement("div",{className:T.announcementBar,style:{backgroundColor:a,color:o},role:"banner"},i&&r.createElement("div",{className:T.announcementBarPlaceholder}),r.createElement(C,{className:T.announcementBarContent}),i&&r.createElement(x,{onClick:n,className:T.announcementBarClose}))}var L=n(6065),R=n(9436);var N=n(1526),O=n(7265);const P=r.createContext(null);function I(e){let{children:t}=e;const n=function(){const e=(0,L.e)(),t=(0,O.HY)(),[n,a]=(0,r.useState)(!1),o=null!==t.component,i=(0,N.D9)(o);return(0,r.useEffect)((()=>{o&&!i&&a(!0)}),[o,i]),(0,r.useEffect)((()=>{o?e.shown||a(!0):a(!1)}),[e.shown,o]),(0,r.useMemo)((()=>[n,a]),[n])}();return r.createElement(P.Provider,{value:n},t)}function D(e){if(e.component){const t=e.component;return r.createElement(t,e.props)}}function M(){const e=(0,r.useContext)(P);if(!e)throw new N.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,r.useCallback)((()=>n(!1)),[n]),o=(0,O.HY)();return(0,r.useMemo)((()=>({shown:t,hide:a,content:D(o)})),[a,o,t])}function F(e){let{header:t,primaryMenu:n,secondaryMenu:o}=e;const{shown:i}=M();return r.createElement("div",{className:"navbar-sidebar"},t,r.createElement("div",{className:(0,a.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":i})},r.createElement("div",{className:"navbar-sidebar__item menu"},n),r.createElement("div",{className:"navbar-sidebar__item menu"},o)))}var B=n(6418),j=n(4996);function z(e){return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:24,height:24},e),r.createElement("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"}))}function U(e){return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:24,height:24},e),r.createElement("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"}))}const $={toggle:"toggle_IwNi",toggleButton:"toggleButton_vE9d",darkToggleIcon:"darkToggleIcon_CoXj",lightToggleIcon:"lightToggleIcon_wXEp",toggleButtonDisabled:"toggleButtonDisabled_os9c"};function q(e){let{className:t,buttonClassName:n,value:o,onChange:i}=e;const l=(0,j.Z)(),s=(0,u.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===o?(0,u.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,u.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return r.createElement("div",{className:(0,a.Z)($.toggle,t)},r.createElement("button",{className:(0,a.Z)("clean-btn",$.toggleButton,!l&&$.toggleButtonDisabled,n),type:"button",onClick:()=>i("dark"===o?"light":"dark"),disabled:!l,title:s,"aria-label":s,"aria-live":"polite"},r.createElement(z,{className:(0,a.Z)($.toggleIcon,$.lightToggleIcon)}),r.createElement(U,{className:(0,a.Z)($.toggleIcon,$.darkToggleIcon)})))}const H=r.memo(q),G={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_kpkR"};function Z(e){let{className:t}=e;const n=(0,w.L)().navbar.style,a=(0,w.L)().colorMode.disableSwitch,{colorMode:o,setColorMode:i}=(0,B.I)();return a?null:r.createElement(H,{className:t,buttonClassName:"dark"===n?G.darkNavbarColorModeToggle:void 0,value:o,onChange:i})}var V=n(4340);function W(){return r.createElement(V.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,L.e)();return r.createElement("button",{type:"button","aria-label":(0,u.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle()},r.createElement(S,{color:"var(--ifm-color-emphasis-600)"}))}function Y(){return r.createElement("div",{className:"navbar-sidebar__brand"},r.createElement(W,null),r.createElement(Z,{className:"margin-right--md"}),r.createElement(K,null))}var Q=n(327),X=n(9962),J=n(8166),ee=n(9390),te=n(3326);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:a,href:o,label:i,html:s,isDropdownLink:u,prependBaseUrlToHref:c,...d}=e;const p=(0,X.Z)(a),f=(0,X.Z)(t),m=(0,X.Z)(o,{forcePrependBaseUrl:!0}),h=i&&o&&!(0,J.Z)(o),g=s?{dangerouslySetInnerHTML:{__html:s}}:{children:r.createElement(r.Fragment,null,i,h&&r.createElement(te.Z,u&&{width:12,height:12}))};return o?r.createElement(Q.Z,(0,l.Z)({href:c?m:o},d,g)):r.createElement(Q.Z,(0,l.Z)({to:p,isNavLink:!0},(t||n)&&{isActive:(e,t)=>n?(0,ee.F)(n,t.pathname):t.pathname.startsWith(f)},d,g))}function re(e){let{className:t,isDropdownItem:n=!1,...o}=e;const i=r.createElement(ne,(0,l.Z)({className:(0,a.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n},o));return n?r.createElement("li",null,i):i}function ae(e){let{className:t,isDropdownItem:n,...o}=e;return r.createElement("li",{className:"menu__list-item"},r.createElement(ne,(0,l.Z)({className:(0,a.Z)("menu__link",t)},o)))}function oe(e){let{mobile:t=!1,position:n,...a}=e;const o=t?ae:re;return r.createElement(o,(0,l.Z)({},a,{activeClassName:a.activeClassName??(t?"menu__link--active":"navbar__link--active")}))}var ie=n(8473),le=n(884),se=n(7198);function ue(e,t){return e.some((e=>function(e,t){return!!(0,le.Mg)(e.to,t)||!!(0,ee.F)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function ce(e){let{items:t,position:n,className:o,onClick:i,...s}=e;const u=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{u.current&&!u.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[u]),r.createElement("div",{ref:u,className:(0,a.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c})},r.createElement(ne,(0,l.Z)({"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,a.Z)("navbar__link",o)},s,{onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))}}),s.children??s.label),r.createElement("ul",{className:"dropdown__menu"},t.map(((e,t)=>r.createElement(qe,(0,l.Z)({isDropdownItem:!0,activeClassName:"dropdown__link--active"},e,{key:t}))))))}function de(e){let{items:t,className:n,position:o,onClick:i,...u}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,se.Z)(),{pathname:t}=(0,s.TH)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:m}=(0,ie.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&m(!d)}),[c,d,m]),r.createElement("li",{className:(0,a.Z)("menu__list-item",{"menu__list-item--collapsed":p})},r.createElement(ne,(0,l.Z)({role:"button",className:(0,a.Z)("menu__link menu__link--sublist menu__link--sublist-caret",n)},u,{onClick:e=>{e.preventDefault(),f()}}),u.children??u.label),r.createElement(ie.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:p},t.map(((e,t)=>r.createElement(qe,(0,l.Z)({mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active"},e,{key:t}))))))}function pe(e){let{mobile:t=!1,...n}=e;const a=t?de:ce;return r.createElement(a,n)}var fe=n(1014);function me(e){let{width:t=20,height:n=20,...a}=e;return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0},a),r.createElement("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"}))}const he="iconLanguage_rl2T";function ge(){return r.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var be=n(2040),ve=["translations"];function ye(){return ye=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var Ee="Ctrl";var xe=r.forwardRef((function(e,t){var n=e.translations,a=void 0===n?{}:n,o=Se(e,ve),i=a.buttonText,l=void 0===i?"Search":i,s=a.buttonAriaLabel,u=void 0===s?"Search":s,c=we((0,r.useState)(null),2),d=c[0],p=c[1];return(0,r.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(Ee))}),[]),r.createElement("button",ye({type:"button",className:"DocSearch DocSearch-Button","aria-label":u},o,{ref:t}),r.createElement("span",{className:"DocSearch-Button-Container"},r.createElement(be.W,null),r.createElement("span",{className:"DocSearch-Button-Placeholder"},l)),r.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&r.createElement(r.Fragment,null,r.createElement("kbd",{className:"DocSearch-Button-Key"},d===Ee?r.createElement(ge,null):d),r.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),_e=n(8801),Ce=n(8460),Te=n(9100),Ae=n(772);var Le=n(7995);const Re={button:{buttonText:(0,u.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,u.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,u.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,u.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,u.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,u.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,u.I)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,u.I)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,u.I)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,u.I)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,u.I)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,u.I)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,u.I)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,u.I)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,u.I)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,u.I)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,u.I)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,u.I)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,u.I)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,u.I)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,u.I)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,u.I)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,u.I)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,u.I)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,u.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,u.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,u.I)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Ne=null;function Oe(e){let{hit:t,children:n}=e;return r.createElement(Q.Z,{to:t.url},n)}function Pe(e){let{state:t,onClose:n}=e;const a=(0,Ce.M)();return r.createElement(Q.Z,{to:a(t.query),onClick:n},r.createElement(u.Z,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits}},"See all {count} results"))}function Ie(e){let{contextualSearch:t,externalUrlRegex:a,...o}=e;const{siteMetadata:i}=(0,se.Z)(),u=(0,Te.l)(),c=function(){const{locale:e,tags:t}=(0,Ae._q)();return[`language:${e}`,t.map((e=>`docusaurus_tag:${e}`))]}(),d=o.searchParameters?.facetFilters??[],p=t?function(e,t){const n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(c,d):d,f={...o.searchParameters,facetFilters:p},m=(0,s.k6)(),h=(0,r.useRef)(null),g=(0,r.useRef)(null),[b,v]=(0,r.useState)(!1),[y,w]=(0,r.useState)(void 0),k=(0,r.useCallback)((()=>Ne?Promise.resolve():Promise.all([n.e(6794).then(n.bind(n,6794)),Promise.all([n.e(532),n.e(7068)]).then(n.bind(n,7068)),Promise.all([n.e(532),n.e(5166)]).then(n.bind(n,5166))]).then((e=>{let[{DocSearchModal:t}]=e;Ne=t}))),[]),S=(0,r.useCallback)((()=>{k().then((()=>{h.current=document.createElement("div"),document.body.insertBefore(h.current,document.body.firstChild),v(!0)}))}),[k,v]),E=(0,r.useCallback)((()=>{v(!1),h.current?.remove()}),[v]),x=(0,r.useCallback)((e=>{k().then((()=>{v(!0),w(e.key)}))}),[k,v,w]),_=(0,r.useRef)({navigate(e){let{itemUrl:t}=e;(0,ee.F)(a,t)?window.location.href=t:m.push(t)}}).current,C=(0,r.useRef)((e=>o.transformItems?o.transformItems(e):e.map((e=>({...e,url:u(e.url)}))))).current,T=(0,r.useMemo)((()=>e=>r.createElement(Pe,(0,l.Z)({},e,{onClose:E}))),[E]),A=(0,r.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",i.docusaurusVersion),e)),[i.docusaurusVersion]);return function(e){var t=e.isOpen,n=e.onOpen,a=e.onClose,o=e.onInput,i=e.searchButtonRef;r.useEffect((function(){function e(e){var r;(27===e.keyCode&&t||"k"===(null===(r=e.key)||void 0===r?void 0:r.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?a():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),i&&i.current===document.activeElement&&o&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&o(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,a,o,i])}({isOpen:b,onOpen:S,onClose:E,onInput:x,searchButtonRef:g}),r.createElement(r.Fragment,null,r.createElement(_e.Z,null,r.createElement("link",{rel:"preconnect",href:`https://${o.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})),r.createElement(xe,{onTouchStart:k,onFocus:k,onMouseOver:k,onClick:S,ref:g,translations:Re.button}),b&&Ne&&h.current&&(0,Le.createPortal)(r.createElement(Ne,(0,l.Z)({onClose:E,initialScrollY:window.scrollY,initialQuery:y,navigator:_,transformItems:C,hitComponent:Oe,transformSearchClient:A},o.searchPagePath&&{resultsFooterComponent:T},o,{searchParameters:f,placeholder:Re.placeholder,translations:Re.modal})),h.current))}function De(){const{siteConfig:e}=(0,se.Z)();return r.createElement(Ie,e.themeConfig.algolia)}const Me={searchBox:"searchBox_udWG"};function Fe(e){let{children:t,className:n}=e;return r.createElement("div",{className:(0,a.Z)(n,Me.searchBox)},t)}var Be=n(3727),je=n(3976);var ze=n(553);const Ue=e=>e.docs.find((t=>t.id===e.mainDocId));const $e={default:oe,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:a,...o}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,se.Z)(),p=(0,fe.l)(),{search:f,hash:m}=(0,s.TH)(),h=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${m}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...a],g=t?(0,u.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return r.createElement(pe,(0,l.Z)({},o,{mobile:t,label:r.createElement(r.Fragment,null,r.createElement(me,{className:he}),g),items:h}))},search:function(e){let{mobile:t,className:n}=e;return t?null:r.createElement(Fe,{className:n},r.createElement(De,null))},dropdown:pe,html:function(e){let{value:t,className:n,mobile:o=!1,isDropdownItem:i=!1}=e;const l=i?"li":"div";return r.createElement(l,{className:(0,a.Z)({navbar__item:!o&&!i,"menu__list-item":o},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:i}=(0,Be.Iw)(a),s=(0,je.vY)(t,a);return null===s?null:r.createElement(oe,(0,l.Z)({exact:!0},o,{isActive:()=>i?.path===s.path||!!i?.sidebar&&i.sidebar===s.sidebar,label:n??s.id,to:s.path}))},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:i}=(0,Be.Iw)(a),s=(0,je.oz)(t,a).link;if(!s)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return r.createElement(oe,(0,l.Z)({exact:!0},o,{isActive:()=>i?.sidebar===t,label:n??s.label,to:s.path}))},docsVersion:function(e){let{label:t,to:n,docsPluginId:a,...o}=e;const i=(0,je.lO)(a)[0],s=t??i.label,u=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(i).path;return r.createElement(oe,(0,l.Z)({},o,{label:s,to:u}))},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:a,dropdownItemsBefore:o,dropdownItemsAfter:i,...c}=e;const{search:d,hash:p}=(0,s.TH)(),f=(0,Be.Iw)(n),m=(0,Be.gB)(n),{savePreferredVersionName:h}=(0,ze.J)(n),g=[...o,...m.map((e=>{const t=f.alternateDocVersions[e.name]??Ue(e);return{label:e.label,to:`${t.path}${d}${p}`,isActive:()=>e===f.activeVersion,onClick:()=>h(e.name)}})),...i],b=(0,je.lO)(n)[0],v=t&&g.length>1?(0,u.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):b.label,y=t&&g.length>1?void 0:Ue(b).path;return g.length<=1?r.createElement(oe,(0,l.Z)({},c,{mobile:t,label:v,to:y,isActive:a?()=>!1:void 0})):r.createElement(pe,(0,l.Z)({},c,{mobile:t,label:v,to:y,items:g,isActive:a?()=>!1:void 0}))}};function qe(e){let{type:t,...n}=e;const a=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=$e[a];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return r.createElement(o,n)}function He(){const e=(0,L.e)(),t=(0,w.L)().navbar.items;return r.createElement("ul",{className:"menu__list"},t.map(((t,n)=>r.createElement(qe,(0,l.Z)({mobile:!0},t,{onClick:()=>e.toggle(),key:n})))))}function Ge(e){return r.createElement("button",(0,l.Z)({},e,{type:"button",className:"clean-btn navbar-sidebar__back"}),r.createElement(u.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"},"\u2190 Back to main menu"))}function Ze(){const e=0===(0,w.L)().navbar.items.length,t=M();return r.createElement(r.Fragment,null,!e&&r.createElement(Ge,{onClick:()=>t.hide()}),t.content)}function Ve(){const e=(0,L.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?r.createElement(F,{header:r.createElement(Y,null),primaryMenu:r.createElement(He,null),secondaryMenu:r.createElement(Ze,null)}):null}const We={navbarHideable:"navbarHideable_chLr",navbarHidden:"navbarHidden_Adyq"};function Ke(e){return r.createElement("div",(0,l.Z)({role:"presentation"},e,{className:(0,a.Z)("navbar-sidebar__backdrop",e.className)}))}function Ye(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:o}}=(0,w.L)(),i=(0,L.e)(),{navbarRef:l,isNavbarVisible:s}=function(e){const[t,n]=(0,r.useState)(e),a=(0,r.useRef)(!1),o=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(o.current=e.getBoundingClientRect().height)}),[]);return(0,R.RF)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i=l?n(!1):i+u{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return a.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return r.createElement("nav",{ref:l,"aria-label":(0,u.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,a.Z)("navbar","navbar--fixed-top",n&&[We.navbarHideable,!s&&We.navbarHidden],{"navbar--dark":"dark"===o,"navbar--primary":"primary"===o,"navbar-sidebar--show":i.shown})},t,r.createElement(Ke,{onClick:i.toggle}),r.createElement(Ve,null))}var Qe=n(7286);const Xe={errorBoundaryError:"errorBoundaryError_WlLF"};function Je(e){return r.createElement("button",(0,l.Z)({type:"button"},e),r.createElement(u.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error"},"Try again"))}function et(e){let{error:t}=e;const n=(0,Qe.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return r.createElement("p",{className:Xe.errorBoundaryError},n)}class tt extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const nt="right";function rt(e){let{width:t=30,height:n=30,className:a,...o}=e;return r.createElement("svg",(0,l.Z)({className:a,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true"},o),r.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))}function at(){const{toggle:e,shown:t}=(0,L.e)();return r.createElement("button",{onClick:e,"aria-label":(0,u.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button"},r.createElement(rt,null))}const ot={colorModeToggle:"colorModeToggle_HELi"};function it(e){let{items:t}=e;return r.createElement(r.Fragment,null,t.map(((e,t)=>r.createElement(tt,{key:t,onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t})},r.createElement(qe,e)))))}function lt(e){let{left:t,right:n}=e;return r.createElement("div",{className:"navbar__inner"},r.createElement("div",{className:"navbar__items"},t),r.createElement("div",{className:"navbar__items navbar__items--right"},n))}function st(){const e=(0,L.e)(),t=(0,w.L)().navbar.items,[n,a]=function(e){function t(e){return"left"===(e.position??nt)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return r.createElement(lt,{left:r.createElement(r.Fragment,null,!e.disabled&&r.createElement(at,null),r.createElement(W,null),r.createElement(it,{items:n})),right:r.createElement(r.Fragment,null,r.createElement(it,{items:a}),r.createElement(Z,{className:ot.colorModeToggle}),!o&&r.createElement(Fe,null,r.createElement(De,null)))})}function ut(){return r.createElement(Ye,null,r.createElement(st,null))}function ct(e){let{item:t}=e;const{to:n,href:a,label:o,prependBaseUrlToHref:i,...s}=t,u=(0,X.Z)(n),c=(0,X.Z)(a,{forcePrependBaseUrl:!0});return r.createElement(Q.Z,(0,l.Z)({className:"footer__link-item"},a?{href:i?c:a}:{to:u},s),o,a&&!(0,J.Z)(a)&&r.createElement(te.Z,null))}function dt(e){let{item:t}=e;return t.html?r.createElement("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):r.createElement("li",{key:t.href??t.to,className:"footer__item"},r.createElement(ct,{item:t}))}function pt(e){let{column:t}=e;return r.createElement("div",{className:"col footer__col"},r.createElement("div",{className:"footer__title"},t.title),r.createElement("ul",{className:"footer__items clean-list"},t.items.map(((e,t)=>r.createElement(dt,{key:t,item:e})))))}function ft(e){let{columns:t}=e;return r.createElement("div",{className:"row footer__links"},t.map(((e,t)=>r.createElement(pt,{key:t,column:e}))))}function mt(){return r.createElement("span",{className:"footer__link-separator"},"\xb7")}function ht(e){let{item:t}=e;return t.html?r.createElement("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):r.createElement(ct,{item:t})}function gt(e){let{links:t}=e;return r.createElement("div",{className:"footer__links text--center"},r.createElement("div",{className:"footer__links"},t.map(((e,n)=>r.createElement(r.Fragment,{key:n},r.createElement(ht,{item:e}),t.length!==n+1&&r.createElement(mt,null))))))}function bt(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?r.createElement(ft,{columns:t}):r.createElement(gt,{links:t})}var vt=n(6492);const yt={footerLogoLink:"footerLogoLink_NTrQ"};function wt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.C)(),o={light:n(t.src),dark:n(t.srcDark??t.src)};return r.createElement(vt.Z,{className:(0,a.Z)("footer__logo",t.className),alt:t.alt,sources:o,width:t.width,height:t.height,style:t.style})}function kt(e){let{logo:t}=e;return t.href?r.createElement(Q.Z,{href:t.href,className:yt.footerLogoLink,target:t.target},r.createElement(wt,{logo:t})):r.createElement(wt,{logo:t})}function St(e){let{copyright:t}=e;return r.createElement("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function Et(e){let{style:t,links:n,logo:o,copyright:i}=e;return r.createElement("footer",{className:(0,a.Z)("footer",{"footer--dark":"dark"===t})},r.createElement("div",{className:"container container-fluid"},n,(o||i)&&r.createElement("div",{className:"footer__bottom text--center"},o&&r.createElement("div",{className:"margin-bottom--sm"},o),i)))}function xt(){const{footer:e}=(0,w.L)();if(!e)return null;const{copyright:t,links:n,logo:a,style:o}=e;return r.createElement(Et,{style:o,links:n&&n.length>0&&r.createElement(bt,{links:n}),logo:a&&r.createElement(kt,{logo:a}),copyright:t&&r.createElement(St,{copyright:t})})}const _t=r.memo(xt),Ct=(0,N.Qc)([B.S,k.pl,R.OC,ze.L5,i.VC,function(e){let{children:t}=e;return r.createElement(O.n2,null,r.createElement(L.M,null,r.createElement(I,null,t)))}]);function Tt(e){let{children:t}=e;return r.createElement(Ct,null,t)}function At(e){let{error:t,tryAgain:n}=e;return r.createElement("main",{className:"container margin-vert--xl"},r.createElement("div",{className:"row"},r.createElement("div",{className:"col col--6 col--offset-3"},r.createElement("h1",{className:"hero__title"},r.createElement(u.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed"},"This page crashed.")),r.createElement("div",{className:"margin-vert--lg"},r.createElement(Je,{onClick:n,className:"button button--primary shadow--lw"})),r.createElement("hr",null),r.createElement("div",{className:"margin-vert--md"},r.createElement(et,{error:t})))))}const Lt={mainWrapper:"mainWrapper_ZkMv"};function Rt(e){const{children:t,noFooter:n,wrapperClassName:l,title:s,description:u}=e;return(0,b.t)(),r.createElement(Tt,null,r.createElement(i.d,{title:s,description:u}),r.createElement(y,null),r.createElement(A,null),r.createElement(ut,null),r.createElement("div",{id:d,className:(0,a.Z)(g.k.wrapper.main,Lt.mainWrapper,l)},r.createElement(o.Z,{fallback:e=>r.createElement(At,e)},t)),!n&&r.createElement(_t,null))}},4340:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d});var r=n(8028),a=n(9496),o=n(327),i=n(9962),l=n(7198),s=n(640),u=n(6492);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const o={light:(0,i.Z)(t.src),dark:(0,i.Z)(t.srcDark||t.src)},l=a.createElement(u.Z,{className:t.className,sources:o,height:t.height,width:t.width,alt:n,style:t.style});return r?a.createElement("div",{className:r},l):l}function d(e){const{siteConfig:{title:t}}=(0,l.Z)(),{navbar:{title:n,logo:u}}=(0,s.L)(),{imageClassName:d,titleClassName:p,...f}=e,m=(0,i.Z)(u?.href||"/"),h=n?"":t,g=u?.alt??h;return a.createElement(o.Z,(0,r.Z)({to:m},f,u?.target&&{target:u.target}),u&&a.createElement(c,{logo:u,alt:g,imageClassName:d}),null!=n&&a.createElement("b",{className:p},n))}},911:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(9496),a=n(8801);function o(e){let{locale:t,version:n,tag:o}=e;const i=t;return r.createElement(a.Z,null,t&&r.createElement("meta",{name:"docusaurus_locale",content:t}),n&&r.createElement("meta",{name:"docusaurus_version",content:n}),o&&r.createElement("meta",{name:"docusaurus_tag",content:o}),i&&r.createElement("meta",{name:"docsearch:language",content:i}),n&&r.createElement("meta",{name:"docsearch:version",content:n}),o&&r.createElement("meta",{name:"docsearch:docusaurus_tag",content:o}))}},6492:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});var r=n(8028),a=n(9496),o=n(5924),i=n(4996),l=n(6418);const s={themedImage:"themedImage_OEKu","themedImage--light":"themedImage--light_NWMK","themedImage--dark":"themedImage--dark_kaTq"};function u(e){const t=(0,i.Z)(),{colorMode:n}=(0,l.I)(),{sources:u,className:c,alt:d,...p}=e,f=t?"dark"===n?["dark"]:["light"]:["light","dark"];return a.createElement(a.Fragment,null,f.map((e=>a.createElement("img",(0,r.Z)({key:e,src:u[e],alt:d,className:(0,o.Z)(s.themedImage,s[`themedImage--${e}`],c)},p)))))}},8473:(e,t,n)=>{"use strict";n.d(t,{u:()=>s,z:()=>g});var r=n(8028),a=n(9496),o=n(6682),i=n(9010);const l="ease-in-out";function s(e){let{initialState:t}=e;const[n,r]=(0,a.useState)(t??!1),o=(0,a.useCallback)((()=>{r((e=>!e))}),[]);return{collapsed:n,setCollapsed:r,toggleCollapsed:o}}const u={display:"none",overflow:"hidden",height:"0px"},c={display:"block",overflow:"visible",height:"auto"};function d(e,t){const n=t?u:c;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function p(e){let{collapsibleRef:t,collapsed:n,animation:r}=e;const o=(0,a.useRef)(!1);(0,a.useEffect)((()=>{const e=t.current;function a(){const t=e.scrollHeight,n=r?.duration??function(e){if((0,i.n)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${r?.easing??l}`,height:`${t}px`}}function s(){const t=a();e.style.transition=t.transition,e.style.height=t.height}if(!o.current)return d(e,n),void(o.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(s(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,r])}function f(e){if(!o.Z.canUseDOM)return e?u:c}function m(e){let{as:t="div",collapsed:n,children:r,animation:o,onCollapseTransitionEnd:i,className:l,disableSSRStyle:s}=e;const u=(0,a.useRef)(null);return p({collapsibleRef:u,collapsed:n,animation:o}),a.createElement(t,{ref:u,style:s?void 0:f(n),onTransitionEnd:e=>{"height"===e.propertyName&&(d(u.current,n),i?.(n))},className:l},r)}function h(e){let{collapsed:t,...n}=e;const[o,i]=(0,a.useState)(!t),[l,s]=(0,a.useState)(t);return(0,a.useLayoutEffect)((()=>{t||i(!0)}),[t]),(0,a.useLayoutEffect)((()=>{o&&s(t)}),[o,t]),o?a.createElement(m,(0,r.Z)({},n,{collapsed:l})):null}function g(e){let{lazy:t,...n}=e;const r=t?h:m;return a.createElement(r,n)}},7849:(e,t,n)=>{"use strict";n.d(t,{nT:()=>m,pl:()=>f});var r=n(9496),a=n(4996),o=n(5005),i=n(1526),l=n(640);const s=(0,o.WA)("docusaurus.announcement.dismiss"),u=(0,o.WA)("docusaurus.announcement.id"),c=()=>"true"===s.get(),d=e=>s.set(String(e)),p=r.createContext(null);function f(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,l.L)(),t=(0,a.Z)(),[n,o]=(0,r.useState)((()=>!!t&&c()));(0,r.useEffect)((()=>{o(c())}),[]);const i=(0,r.useCallback)((()=>{d(!0),o(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&d(!1),!r&&c()||o(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return r.createElement(p.Provider,{value:n},t)}function m(){const e=(0,r.useContext)(p);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},6418:(e,t,n)=>{"use strict";n.d(t,{I:()=>g,S:()=>h});var r=n(9496),a=n(6682),o=n(1526),i=n(5005),l=n(640);const s=r.createContext(void 0),u="theme",c=(0,i.WA)(u),d={light:"light",dark:"dark"},p=e=>e===d.dark?d.dark:d.light,f=e=>a.Z.canUseDOM?p(document.documentElement.getAttribute("data-theme")):p(e),m=e=>{c.set(p(e))};function h(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,l.L)(),[a,o]=(0,r.useState)(f(e));(0,r.useEffect)((()=>{t&&c.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:a=!0}=r;t?(o(t),a&&m(t)):(o(n?window.matchMedia("(prefers-color-scheme: dark)").matches?d.dark:d.light:e),c.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",p(a))}),[a]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=c.get();null!==t&&i(p(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const s=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||s.current?s.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:a,setColorMode:i,get isDarkTheme(){return a===d.dark},setLightTheme(){i(d.light)},setDarkTheme(){i(d.dark)}})),[a,i])}();return r.createElement(s.Provider,{value:n},t)}function g(){const e=(0,r.useContext)(s);if(null==e)throw new o.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},553:(e,t,n)=>{"use strict";n.d(t,{J:()=>v,L5:()=>g,Oh:()=>y});var r=n(9496),a=n(3727),o=n(1026),i=n(640),l=n(3976),s=n(1526),u=n(5005);const c=e=>`docs-preferred-version-${e}`,d={save:(e,t,n)=>{(0,u.WA)(c(e),{persistence:t}).set(n)},read:(e,t)=>(0,u.WA)(c(e),{persistence:t}).get(),clear:(e,t)=>{(0,u.WA)(c(e),{persistence:t}).del()}},p=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=r.createContext(null);function m(){const e=(0,a._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[o,l]=(0,r.useState)((()=>p(n)));(0,r.useEffect)((()=>{l(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function a(e){const t=d.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(d.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,a(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[o,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),l((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function h(e){let{children:t}=e;const n=m();return r.createElement(f.Provider,{value:n},t)}function g(e){let{children:t}=e;return l.cE?r.createElement(h,null,t):r.createElement(r.Fragment,null,t)}function b(){const e=(0,r.useContext)(f);if(!e)throw new s.i6("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=o.m);const t=(0,a.zh)(e),[n,i]=b(),{preferredVersionName:l}=n[e];return{preferredVersion:t.versions.find((e=>e.name===l))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}function y(){const e=(0,a._r)(),[t]=b();function n(n){const r=e[n],{preferredVersionName:a}=t[n];return r.versions.find((e=>e.name===a))??null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,n(e)])))}},6002:(e,t,n)=>{"use strict";n.d(t,{V:()=>s,b:()=>l});var r=n(9496),a=n(1526);const o=Symbol("EmptyContext"),i=r.createContext(o);function l(e){let{children:t,name:n,items:a}=e;const o=(0,r.useMemo)((()=>n&&a?{name:n,items:a}:null),[n,a]);return r.createElement(i.Provider,{value:o},t)}function s(){const e=(0,r.useContext)(i);if(e===o)throw new a.i6("DocsSidebarProvider");return e}},6065:(e,t,n)=>{"use strict";n.d(t,{M:()=>d,e:()=>p});var r=n(9496),a=n(7265),o=n(3237),i=n(9656),l=n(640),s=n(1526);const u=r.createContext(void 0);function c(){const e=function(){const e=(0,a.HY)(),{items:t}=(0,l.L)().navbar;return 0===t.length&&!e.component}(),t=(0,o.i)(),n=!e&&"mobile"===t,[s,u]=(0,r.useState)(!1);(0,i.Rb)((()=>{if(s)return u(!1),!1}));const c=(0,r.useCallback)((()=>{u((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&u(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:c,shown:s})),[e,n,c,s])}function d(e){let{children:t}=e;const n=c();return r.createElement(u.Provider,{value:n},t)}function p(){const e=r.useContext(u);if(void 0===e)throw new s.i6("NavbarMobileSidebarProvider");return e}},7265:(e,t,n)=>{"use strict";n.d(t,{HY:()=>l,Zo:()=>s,n2:()=>i});var r=n(9496),a=n(1526);const o=r.createContext(null);function i(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return r.createElement(o.Provider,{value:n},t)}function l(){const e=(0,r.useContext)(o);if(!e)throw new a.i6("NavbarSecondaryMenuContentProvider");return e[0]}function s(e){let{component:t,props:n}=e;const i=(0,r.useContext)(o);if(!i)throw new a.i6("NavbarSecondaryMenuContentProvider");const[,l]=i,s=(0,a.Ql)(n);return(0,r.useEffect)((()=>{l({component:t,props:s})}),[l,t,s]),(0,r.useEffect)((()=>()=>l({component:null,props:null})),[l]),null}},2200:(e,t,n)=>{"use strict";n.d(t,{h:()=>a,t:()=>o});var r=n(9496);const a="navigation-with-keyboard";function o(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},8460:(e,t,n)=>{"use strict";n.d(t,{K:()=>l,M:()=>s});var r=n(9496),a=n(7198),o=n(9656);const i="q";function l(){return(0,o.Nc)(i)}function s(){const{siteConfig:{baseUrl:e,themeConfig:t}}=(0,a.Z)(),{algolia:{searchPagePath:n}}=t;return(0,r.useCallback)((t=>`${e}${n}?${i}=${encodeURIComponent(t)}`),[e,n])}},3237:(e,t,n)=>{"use strict";n.d(t,{i:()=>u});var r=n(9496),a=n(6682);const o={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function l(){return a.Z.canUseDOM?window.innerWidth>i?o.desktop:o.mobile:o.ssr}const s=!1;function u(){const[e,t]=(0,r.useState)((()=>s?"ssr":l()));return(0,r.useEffect)((()=>{function e(){t(l())}const n=s?window.setTimeout(e,1e3):void 0;return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),clearTimeout(n)}}),[]),e}},2333:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{}}},9010:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>r})},3976:(e,t,n)=>{"use strict";n.d(t,{Wl:()=>p,_F:()=>h,cE:()=>d,hI:()=>k,lO:()=>v,vY:()=>w,oz:()=>y,s1:()=>b});var r=n(9496),a=n(3442),o=n(1789),i=n(3727),l=n(553),s=n(6002);function u(e){return Array.from(new Set(e))}var c=n(884);const d=!!i._r;function p(e){if(e.href)return e.href;for(const t of e.items){if("link"===t.type)return t.href;if("category"===t.type){const e=p(t);if(e)return e}}}const f=(e,t)=>void 0!==e&&(0,c.Mg)(e,t),m=(e,t)=>e.some((e=>h(e,t)));function h(e,t){return"link"===e.type?f(e.href,t):"category"===e.type&&(f(e.href,t)||m(e.items,t))}function g(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const a=[];return function e(t){for(const o of t)if("category"===o.type&&((0,c.Mg)(o.href,n)||e(o.items))||"link"===o.type&&(0,c.Mg)(o.href,n)){return r&&"category"!==o.type||a.unshift(o),!0}return!1}(t),a}function b(){const e=(0,s.V)(),{pathname:t}=(0,a.TH)(),n=(0,i.gA)()?.pluginData.breadcrumbs;return!1!==n&&e?g({sidebarItems:e.items,pathname:t}):null}function v(e){const{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,l.J)(e),a=(0,i.yW)(e);return(0,r.useMemo)((()=>u([t,n,a].filter(Boolean))),[t,n,a])}function y(e,t){const n=v(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function w(e,t){const n=v(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${u(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function k(e){let{route:t,versionMetadata:n}=e;const r=(0,a.TH)(),i=t.routes,l=i.find((e=>(0,a.LX)(r.pathname,e)));if(!l)return null;const s=l.sidebar,u=s?n.docsSidebars[s]:void 0;return{docElement:(0,o.H)(i),sidebarName:s,sidebarItems:u}}},9709:(e,t,n)=>{"use strict";n.d(t,{p:()=>a});var r=n(7198);function a(e){const{siteConfig:t}=(0,r.Z)(),{title:n,titleDelimiter:a}=t;return e?.trim().length?`${e.trim()} ${a} ${n}`:n}},9656:(e,t,n)=>{"use strict";n.d(t,{Nc:()=>u,Rb:()=>l});var r=n(9496),a=n(3442),o=n(4241),i=n(1526);function l(e){!function(e){const t=(0,a.k6)(),n=(0,i.zX)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function s(e){return function(e){const t=(0,a.k6)();return(0,o.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}function u(e){const t=s(e)??"",n=function(){const e=(0,a.k6)();return(0,r.useCallback)(((t,n,r)=>{const a=new URLSearchParams(e.location.search);n?a.set(t,n):a.delete(t),(r?.push?e.push:e.replace)({search:a.toString()})}),[e])}();return[t,(0,r.useCallback)(((t,r)=>{n(e,t,r)}),[n,e])]}},9958:(e,t,n)=>{"use strict";n.d(t,{FG:()=>p,d:()=>c,VC:()=>f});var r=n(9496),a=n(5924),o=n(8801),i=n(554);function l(){const e=r.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var s=n(9962),u=n(9709);function c(e){let{title:t,description:n,keywords:a,image:i,children:l}=e;const c=(0,u.p)(t),{withBaseUrl:d}=(0,s.C)(),p=i?d(i,{absolute:!0}):void 0;return r.createElement(o.Z,null,t&&r.createElement("title",null,c),t&&r.createElement("meta",{property:"og:title",content:c}),n&&r.createElement("meta",{name:"description",content:n}),n&&r.createElement("meta",{property:"og:description",content:n}),a&&r.createElement("meta",{name:"keywords",content:Array.isArray(a)?a.join(","):a}),p&&r.createElement("meta",{property:"og:image",content:p}),p&&r.createElement("meta",{name:"twitter:image",content:p}),l)}const d=r.createContext(void 0);function p(e){let{className:t,children:n}=e;const i=r.useContext(d),l=(0,a.Z)(i,t);return r.createElement(d.Provider,{value:l},r.createElement(o.Z,null,r.createElement("html",{className:l})),n)}function f(e){let{children:t}=e;const n=l(),o=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const i=`plugin-id-${n.plugin.id}`;return r.createElement(p,{className:(0,a.Z)(o,i)},t)}},1526:(e,t,n)=>{"use strict";n.d(t,{D9:()=>i,Qc:()=>u,Ql:()=>s,i6:()=>l,zX:()=>o});var r=n(9496);const a=n(6682).Z.canUseDOM?r.useLayoutEffect:r.useEffect;function o(e){const t=(0,r.useRef)(e);return a((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function i(e){const t=(0,r.useRef)();return a((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function s(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return r.createElement(r.Fragment,null,e.reduceRight(((e,t)=>r.createElement(t,null,e)),n))}}},9390:(e,t,n)=>{"use strict";function r(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{F:()=>r})},884:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>l});var r=n(9496),a=n(1968),o=n(7198);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function l(){const{baseUrl:e}=(0,o.Z)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(a).flatMap((e=>e.routes??[])))}(n)}({routes:a.Z,baseUrl:e})),[e])}},9436:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>p,OC:()=>s,RF:()=>d});var r=n(9496),a=n(6682),o=n(4996),i=n(1526);const l=r.createContext(void 0);function s(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return r.createElement(l.Provider,{value:n},t)}function u(){const e=(0,r.useContext)(l);if(null==e)throw new i.i6("ScrollControllerProvider");return e}const c=()=>a.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function d(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),a=(0,r.useRef)(c()),o=(0,i.zX)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=c();o(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[o,n,...t])}function p(){const e=(0,r.useRef)(null),t=(0,o.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},772:(e,t,n)=>{"use strict";n.d(t,{HX:()=>i,_q:()=>s,os:()=>l});var r=n(3727),a=n(7198),o=n(553);const i="default";function l(e,t){return`docs-${e}-${t}`}function s(){const{i18n:e}=(0,a.Z)(),t=(0,r._r)(),n=(0,r.WS)(),s=(0,o.Oh)();const u=[i,...Object.keys(t).map((function(e){const r=n?.activePlugin.pluginId===e?n.activeVersion:void 0,a=s[e],o=t[e].versions.find((e=>e.isLast));return l(e,(r??a??o).name)}))];return{locale:e.currentLocale,tags:u}}},5005:(e,t,n)=>{"use strict";n.d(t,{WA:()=>s});n(9496),n(4241);const r="localStorage";function a(e){let{key:t,oldValue:n,newValue:r,storage:a}=e;if(n===r)return;const o=document.createEvent("StorageEvent");o.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,a),window.dispatchEvent(o)}function o(e){if(void 0===e&&(e=r),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,i||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),i=!0),null}var t}let i=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function s(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(e);const n=o(t?.persistence);return null===n?l:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{const r=n.getItem(e);n.setItem(e,t),a({key:e,oldValue:r,newValue:t,storage:n})}catch(r){console.error(`Docusaurus storage error, can't set ${e}=${t}`,r)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),a({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}},listen:t=>{try{const r=r=>{r.storageArea===n&&r.key===e&&t(r)};return window.addEventListener("storage",r),()=>window.removeEventListener("storage",r)}catch(r){return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`,r),()=>{}}}}}},1014:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var r=n(7198),a=n(3442),o=n(7286);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:l}}=(0,r.Z)(),{pathname:s}=(0,a.TH)(),u=(0,o.applyTrailingSlash)(s,{trailingSlash:n,baseUrl:e}),c=l===i?e:e.replace(`/${l}/`,"/"),d=u.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===i?`${c}`:`${c}${e}/`}(n)}${d}`}}}},7065:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var r=n(9496),a=n(3442),o=n(1526);function i(e){const t=(0,a.TH)(),n=(0,o.D9)(t),i=(0,o.zX)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},640:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(7198);function a(){return(0,r.Z)().siteConfig.themeConfig}},7389:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(7198);function a(){const{siteConfig:{themeConfig:e}}=(0,r.Z)();return e}},9100:(e,t,n)=>{"use strict";n.d(t,{l:()=>l});var r=n(9496),a=n(9390),o=n(9962),i=n(7389);function l(){const{withBaseUrl:e}=(0,o.C)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,i.L)();return(0,r.useCallback)((r=>{const o=new URL(r);if((0,a.F)(t,o.href))return r;const i=`${o.pathname+o.hash}`;return e(function(e,t){return t?e.replaceAll(new RegExp(t.from,"g"),t.to):e}(i,n))}),[e,t,n])}},7763:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[a]=e.split(/[#?]/),o="/"===a||a===r?a:(i=a,n?function(e){return e.endsWith("/")?e:`${e}/`}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(a,o)}},9525:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},7286:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var a=n(7763);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(a).default}});var o=n(9525);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return o.getErrorCausalChain}})},5924:(e,t,n)=>{"use strict";function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;ta});const a=function(){for(var e,t,n=0,a="";n{"use strict";n.d(t,{lX:()=>w,q_:()=>C,ob:()=>f,PP:()=>A,Ep:()=>p});var r=n(8028);function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r=0;p--){var f=i[p];"."===f?o(i,p):".."===f?(o(i,p),d++):d&&(o(i,p),d--)}if(!u)for(;d--;d)i.unshift("..");!u||""===i[0]||i[0]&&a(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};var l=n(8624);function s(e){return"/"===e.charAt(0)?e:"/"+e}function u(e){return"/"===e.charAt(0)?e.substr(1):e}function c(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function f(e,t,n,a){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),o.state=t):(void 0===(o=(0,r.Z)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=i(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function m(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;rt?n.splice(t,n.length-t,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=f(e,t,h(),w.location);c.confirmTransitionTo(a,r,n,(function(e){e&&(w.entries[w.index]=a,d({action:r,location:a}))}))},go:y,goBack:function(){y(-1)},goForward:function(){y(1)},canGo:function(e){var t=w.index+e;return t>=0&&t{"use strict";var r=n(6237),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return r.isMemo(e)?i:l[e.$$typeof]||a}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var u=Object.defineProperty,c=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var a=f(n);a&&a!==m&&e(t,a,r)}var i=c(n);d&&(i=i.concat(d(n)));for(var l=s(t),h=s(n),g=0;g{"use strict";e.exports=function(e,t,n,r,a,o,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[n,r,a,o,i,l],c=0;(s=new Error(t.replace(/%s/g,(function(){return u[c++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},901:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},5869:(e,t,n)=>{"use strict";n.r(t)},2777:(e,t,n)=>{"use strict";n.r(t)},9981:function(e,t,n){var r,a;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function a(e,t,n){return en?n:e}function o(e){return 100*(-1+e)}function i(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,r.minimum,1),n.status=1===e?null:e;var o=n.render(!t),u=o.querySelector(r.barSelector),c=r.speed,d=r.easing;return o.offsetWidth,l((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(u,i(e,c,d)),1===e?(s(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){s(o,{transition:"all "+c+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),c)}),c)):setTimeout(t,c)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");c(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var a,i=t.querySelector(r.barSelector),l=e?"-100":o(n.status||0),u=document.querySelector(r.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&f(a),u!=document.body&&c(u,"nprogress-custom-parent"),u.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function o(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&o(e,n,r);else o(e,a[1],a[2])}}();function u(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function c(e,t){var n=p(e),r=n+t;u(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);u(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},2767:e=>{"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(a){return!1}}()?Object.assign:function(e,a){for(var o,i,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),s=1;s{var r=n(901);e.exports=f,e.exports.parse=o,e.exports.compile=function(e,t){return l(o(e,t),t)},e.exports.tokensToFunction=l,e.exports.tokensToRegExp=p;var a=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function o(e,t){for(var n,r=[],o=0,i=0,l="",c=t&&t.delimiter||"/";null!=(n=a.exec(e));){var d=n[0],p=n[1],f=n.index;if(l+=e.slice(i,f),i=f+d.length,p)l+=p[1];else{var m=e[i],h=n[2],g=n[3],b=n[4],v=n[5],y=n[6],w=n[7];l&&(r.push(l),l="");var k=null!=h&&null!=m&&m!==h,S="+"===y||"*"===y,E="?"===y||"*"===y,x=n[2]||c,_=b||v;r.push({name:g||o++,prefix:h||"",delimiter:x,optional:E,repeat:S,partial:k,asterisk:!!w,pattern:_?u(_):w?".*":"[^"+s(x)+"]+?"})}}return i{"use strict";n.d(t,{Z:()=>o});var r=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);E+=S.value.length,S=S.next){var x=S.value;if(t.length>e.length)return;if(!(x instanceof a)){var _,C=1;if(v){if(!(_=o(k,E,e,b))||_.index>=e.length)break;var T=_.index,A=_.index+_[0].length,L=E;for(L+=S.value.length;T>=L;)L+=(S=S.next).value.length;if(E=L-=S.value.length,S.value instanceof a)continue;for(var R=S;R!==t.tail&&(Ld.reach&&(d.reach=I);var D=S.prev;if(O&&(D=s(t,D,O),E+=O.length),u(t,D,C),S=s(t,D,new a(p,g?r.tokenize(N,g):N,y,N)),P&&s(t,S,P),C>1){var M={cause:p+","+m,reach:I};i(e,t,n,S.prev,E,M),d&&M.reach>d.reach&&(d.reach=M.reach)}}}}}}function l(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var r=t.next,a={value:n,prev:t,next:r};return t.next=a,r.prev=a,e.length++,a}function u(e,t,n){for(var r=t.next,a=0;a"+o.content+""},r}(),a=r;r.default=r,a.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.languages.markup.doctype.inside["internal-subset"].inside=a.languages.markup,a.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(a.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:a.languages[t]},n.cdata=/^$/i;var r={"included-cdata":{pattern://i,inside:n}};r["language-"+t]={pattern:/[\s\S]+/,inside:a.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:r},a.languages.insertBefore("markup","cdata",o)}}),Object.defineProperty(a.languages.markup.tag,"addAttribute",{value:function(e,t){a.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:a.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.xml=a.languages.extend("markup",{}),a.languages.ssml=a.languages.xml,a.languages.atom=a.languages.xml,a.languages.rss=a.languages.xml,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},r={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:r},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:r},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:r.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:r.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var a=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=r.variable[1].inside,i=0;i]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},a.languages.c=a.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),a.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),a.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},a.languages.c.string],char:a.languages.c.char,comment:a.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:a.languages.c}}}}),a.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete a.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(a),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(a),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var r={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},a={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:r,number:a,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:r,number:a})}(a),a.languages.javascript=a.languages.extend("clike",{"class-name":[a.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),a.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,a.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:a.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:a.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:a.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:a.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:a.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),a.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),a.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),a.languages.markup&&(a.languages.markup.tag.addInlined("script","javascript"),a.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),a.languages.js=a.languages.javascript,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(a),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",a=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),o=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return"(?:"+a+"|"+o+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(o),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(a),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+a+o+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+o+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},s=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(a),a.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:a.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},a.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n0)){var l=p(/^\{$/,/^\}$/);if(-1===l)continue;for(var s=n;s=0&&f(u,"variable-input")}}}}function c(e){return t[n+e]}function d(e,t){t=t||0;for(var n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,a=r.inside["interpolation-punctuation"],o=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function s(t,n,r){var a={code:t,grammar:n,language:r};return e.hooks.run("before-tokenize",a),a.tokens=e.tokenize(a.code,a.grammar),e.hooks.run("after-tokenize",a),a.tokens}function u(t){var n={};n["interpolation-punctuation"]=a;var o=e.tokenize(t,n);if(3===o.length){var i=[1,1];i.push.apply(i,s(o[1],e.languages.javascript,"javascript")),o.splice.apply(o,i)}return new e.Token("interpolation",o,r.alias,t)}function c(t,n,r){var a=e.tokenize(t,{interpolation:{pattern:RegExp(o),lookbehind:!0}}),i=0,c={},d=s(a.map((function(e){if("string"==typeof e)return e;for(var n,a=e.content;-1!==t.indexOf(n=l(i++,r)););return c[n]=a,n})).join(""),n,r),p=Object.keys(c);return i=0,function e(t){for(var n=0;n=p.length)return;var r=t[n];if("string"==typeof r||"string"==typeof r.content){var a=p[i],o="string"==typeof r?r:r.content,l=o.indexOf(a);if(-1!==l){++i;var s=o.substring(0,l),d=u(c[a]),f=o.substring(l+a.length),m=[];if(s&&m.push(s),m.push(d),f){var h=[f];e(h),m.push.apply(m,h)}"string"==typeof r?(t.splice.apply(t,[n,1].concat(m)),n+=m.length-1):r.content=m}}else{var g=r.content;Array.isArray(g)?e(g):e([g])}}}(d),new e.Token(r,d,"language-"+r,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var d={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function p(e){return"string"==typeof e?e:Array.isArray(e)?e.map(p).join(""):p(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in d&&function t(n){for(var r=0,a=n.length;r]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(a),function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function o(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return r})).replace(//g,(function(){return a})),RegExp(e,t)}a=o(a).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=o(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:o(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:o(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var i=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(i).join(""):""},l=function(t){for(var n=[],r=0;r0&&n[n.length-1].tagName===i(a.content[0].content[1])&&n.pop():"/>"===a.content[a.content.length-1].content||n.push({tagName:i(a.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===a.type&&"{"===a.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===a.type&&"}"===a.content?n[n.length-1].openedBraces--:o=!0),(o||"string"==typeof a)&&n.length>0&&0===n[n.length-1].openedBraces){var s=i(a);r0&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(s=i(t[r-1])+s,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",s,null,s)}a.content&&"string"!=typeof a.content&&l(a.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||l(e.tokens)}))}(a),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var r=t[n],a=[];/^\w+$/.test(n)||a.push(/\w+/.exec(n)[0]),"diff"===n&&a.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+r+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:a,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(a),a.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},a.languages.go=a.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),a.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete a.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof o&&!o(e))return e;for(var a,l=i.length;-1!==n.code.indexOf(a=t(r,l));)++l;return i[l]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function i(l){for(var s=0;s=o.length);s++){var u=l[s];if("string"==typeof u||u.content&&"string"==typeof u.content){var c=o[a],d=n.tokenStack[c],p="string"==typeof u?u:u.content,f=t(r,c),m=p.indexOf(f);if(m>-1){++a;var h=p.substring(0,m),g=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),b=p.substring(m+f.length),v=[];h&&v.push.apply(v,i([h])),v.push(g),b&&v.push.apply(v,i([b])),"string"==typeof u?l.splice.apply(l,[s,1].concat(v)):u.content=v}}else u.content&&i(u.content)}return l}(n.tokens)}}}})}(a),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(a),a.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},a.languages.webmanifest=a.languages.json,a.languages.less=a.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),a.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),a.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},a.languages.objectivec=a.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete a.languages.objectivec["class-name"],a.languages.objc=a.languages.objectivec,a.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},a.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},a.languages.python["string-interpolation"].inside.interpolation.inside.rest=a.languages.python,a.languages.py=a.languages.python,a.languages.reason=a.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),a.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete a.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(a),a.languages.scss=a.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),a.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),a.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),a.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),a.languages.scss.atrule.inside.rest=a.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},r={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};r.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:r}},r.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:r}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:r}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:r}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:r}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:r.interpolation}},rest:r}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:r.interpolation,comment:r.comment,punctuation:/[{},]/}},func:r.func,string:r.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:r.interpolation,punctuation:/[{}()\[\];:.]/}}(a),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(a),a.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/};const o=a},1064:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},1884:(e,t,n)=>{const r=n(1064),a=n(6474),o=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...o,...Object.keys(Prism.languages)];a(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(2928).resolve(t)],delete Prism.languages[e],n(2928)(t),o.add(e)}))}i.silent=!1,e.exports=i},2928:(e,t,n)=>{var r={"./":1884};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=2928},6474:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n "));var l={},s=e[r];if(s){function u(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in l))for(var i in a(t,o),l[t]=!0,n[t])l[i]=!0}t(s.require,u),t(s.optional,u),t(s.modify,u)}n[r]=l,o.pop()}}return function(e){var t=n[e];return t||(a(e,r),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(o,i,l){var s=function(e){var t={};for(var n in e){var r=e[n];for(var a in r)if("meta"!=a){var o=r[a];t[a]="string"==typeof o?{title:o}:o}}return t}(o),u=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var a in n={},e){var o=e[a];t(o&&o.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}return n[r]||r}}(s);i=i.map(u),l=(l||[]).map(u);var c=n(i),d=n(l);i.forEach((function e(n){var r=s[n];t(r&&r.require,(function(t){t in d||(c[t]=!0,e(t))}))}));for(var p,f=r(s),m=c;a(m);){for(var h in p={},m){var g=s[h];t(g&&g.modify,(function(e){e in d&&(p[e]=!0)}))}for(var b in d)if(!(b in c))for(var v in f(b))if(v in c){p[b]=!0;break}for(var y in m=p)c[y]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,a){var o=a?a.series:void 0,i=a?a.parallel:e,l={},s={};function u(e){if(e in l)return l[e];s[e]=!0;var a,c=[];for(var d in t(e))d in n&&c.push(d);if(0===c.length)a=r(e);else{var p=i(c.map((function(e){var t=u(e);return delete s[e],t})));o?a=o(p,(function(){return r(e)})):r(e)}return l[e]=a}for(var c in n)u(c);var d=[];for(var p in s)d.push(l[p]);return i(d)}(f,c,t,n)}};return w}}();e.exports=t},4049:(e,t,n)=>{"use strict";var r=n(6257);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},507:(e,t,n)=>{e.exports=n(4049)()},6257:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},7439:(e,t,n)=>{"use strict";var r=n(9496),a=n(2767),o=n(8051);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n
+ + \ No newline at end of file diff --git a/button/index.html b/button/index.html index 66b3765a34..6a603a6073 100644 --- a/button/index.html +++ b/button/index.html @@ -10,13 +10,13 @@ - - + +
-

Button

What is Button?​

The Button component allows users to trigger an action or perform a function by clicking on the button.

Properties​

PropertiesDescription
TextThe text displayed for the button
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
LoadingWhether the component should show a loading indicator.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
VariantAllow users to choose between two different styles for the button: fill or outline.
Theme ColorAllows users to specify the button's background color and opacity

Event handler​

EventDescription
ClickWhen a user click this button, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
hiddena Boolean value indicate the hidden status of button
hiddenDynamica Boolean value indicate the hidden dynamic status of button
loadingloading value
texttext value displayed on the button
tooltipTextvalue of tooltip text
variantvariant style of the button (fill or outlined)

Use case​

Next, we will demonstrate how to use button to control the form component dynamically.

Step 1 Add an action​

We have created a table named countries, including 5 columns:  num_code,  alpha_2_code, alpha_3_code, en_short_name, nationality. The countries’ names are what we want to use as options value, which are stored the en_short_name column.

Then we can create a new action for Supabase from the action list, listing all data in countries and named supabasedb1 

select distinct en_short_name as value from "Countries" order by value;

This is what we have as output:

Click Save and Run to activate this action.

Step 2 Add a Component​

First we add the Form component and label it as 'Survey'. Then we drag a Input component, a select component and a number input component into the form, labeling them as Name, Nationality, and Age.

We then map the countries values to select component by

  1. in mapped mode, set data sources to be {{supabasedb1.data}}
  2. in mapped option, set value to be {{item.value}}

Then we can configure the Submit button to control the Send method of Form component.

  1. In the Edit event handler, select Control component in action, select the form component that you want to update as the target of the event.
  2. Choose the Submit action.
- - +

Button

What is Button?​

The Button component allows users to trigger an action or perform a function by clicking on the button.

Properties​

PropertiesDescription
TextThe text displayed for the button
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
LoadingWhether the component should show a loading indicator.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
VariantAllow users to choose between two different styles for the button: fill or outline.
Theme ColorAllows users to specify the button's background color and opacity

Event handler​

EventDescription
ClickWhen a user click this button, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
hiddena Boolean value indicate the hidden status of button
hiddenDynamica Boolean value indicate the hidden dynamic status of button
loadingloading value
texttext value displayed on the button
tooltipTextvalue of tooltip text
variantvariant style of the button (fill or outlined)

Use case​

Next, we will demonstrate how to use button to control the form component dynamically.

Step 1 Add an action​

We have created a table named countries, including 5 columns:  num_code,  alpha_2_code, alpha_3_code, en_short_name, nationality. The countries’ names are what we want to use as options value, which are stored the en_short_name column.

Then we can create a new action for Supabase from the action list, listing all data in countries and named supabasedb1 

select distinct en_short_name as value from "Countries" order by value;

This is what we have as output:

Click Save and Run to activate this action.

Step 2 Add a Component​

First we add the Form component and label it as 'Survey'. Then we drag a Input component, a select component and a number input component into the form, labeling them as Name, Nationality, and Age.

We then map the countries values to select component by

  1. in mapped mode, set data sources to be {{supabasedb1.data}}
  2. in mapped option, set value to be {{item.value}}

Then we can configure the Submit button to control the Send method of Form component.

  1. In the Edit event handler, select Control component in action, select the form component that you want to update as the target of the event.
  2. Choose the Submit action.
+ + \ No newline at end of file diff --git a/cascader/index.html b/cascader/index.html index 284e4d5cbc..aa37637e8e 100644 --- a/cascader/index.html +++ b/cascader/index.html @@ -10,13 +10,13 @@ - - + +
-

Cascader

What is Cascader?​

A cascader is a type of input component that allows users to select hierarchical data, such as a category or subcategory from a dropdown menu. When a user selects an option from the dropdown menu, the cascader will automatically update to show the relevant subcategories or options in a nested dropdown menu.

For example, if you have a cascader input component for selecting a product category, the first dropdown menu may show all the available categories, such as "Electronics," "Clothing," and "Books." When a user selects "Electronics," the cascader will update to show the subcategories of electronics, such as "Phones," "Laptops," and "Tablets." This allows users to quickly and easily navigate through hierarchical data and select the option they need.

Properties​

Cascader's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Data SourceEach option must be JSON format and contain two keys, value and label. By using arrays, you can create options at the same level. And child options can be created by using "children" attribute.
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Expansion methodSet how cascader expands (by clicking or hovering)
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.

Methods​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Example Usage:

Cascader component support listening to the onChange event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onChange event of a Radio Group component, you would add an event trigger to that Radio Group component.
  2. In the Edit event handler, select Control component in action, select the Cascader component that you want to update as the target of the event.
  3. Choose the SetValue action and select the appropriate value for the Cascader component. This will be the value that the Cascader component have and will update when the event is triggered.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the Cascader input component will automatically update whenever the onChange event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected option value
FocusWhen a user moves the mouse cursor on the cascader component
BlurWhen a user is done selecting options and quit from focusing on the cascader component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
dataSourceModethe mode of the data source in cascader (default dynamic)
displayNamethe name of this component (ie cascader1)
expandTriggertrigger events (click)
valueSelected value
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
placeholderplaceholder value

Example: {{cascader1.value[0]}

Use case​

Next, we will demonstrate how to map the data from the data source to options in cascader dynamically.

Step 1 Add an action​

Let us create a table in Supabase called project, as well as a subtable called therapist which are aligned by project_id.

Then we can create a new action for Supabase from the action list, listing all data in project and named supabasedb1 

SELECT [project.id](http://project.id/) as project_id, [therapist.name](http://therapist.name/) as therapist_name from therapist join project on therapist.project_id = [project.id](http://project.id/)

Step 2 Transform the data​

Next, we can enable the transformer section under the Select Section. Within the text area, we can capture only the values and labels we need from the data and transform them into cascader-friendly options using JavaScript.

const transformedArray = data.reduce((acc, current) => {
  const existing = acc.find((item) => item.value === current.project_id);
  if (existing) {
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    existing.children.push(therapist);
  } else {
    const project = { value: current.project_id, label: current.project_name, children: [] };
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    project.children.push(therapist);
    acc.push(project);
  }
  return acc;
}, []);

return transformedArray;

The final action should be displayed the same as

cascader 1

Click Save and Run to activate this action.

Step 3 Configure the component​

After dragging a cascader component to the canvas, we can single click to configure its data source to {{supabasedb1.data}}

Optional: Here we set a default value of {{['a', '1']}} for corresponding {{['Psychotherapy'], ['James']}} labels.

cascader 2

- - +

Cascader

What is Cascader?​

A cascader is a type of input component that allows users to select hierarchical data, such as a category or subcategory from a dropdown menu. When a user selects an option from the dropdown menu, the cascader will automatically update to show the relevant subcategories or options in a nested dropdown menu.

For example, if you have a cascader input component for selecting a product category, the first dropdown menu may show all the available categories, such as "Electronics," "Clothing," and "Books." When a user selects "Electronics," the cascader will update to show the subcategories of electronics, such as "Phones," "Laptops," and "Tablets." This allows users to quickly and easily navigate through hierarchical data and select the option they need.

Properties​

Cascader's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Data SourceEach option must be JSON format and contain two keys, value and label. By using arrays, you can create options at the same level. And child options can be created by using "children" attribute.
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Expansion methodSet how cascader expands (by clicking or hovering)
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.

Methods​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Example Usage:

Cascader component support listening to the onChange event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onChange event of a Radio Group component, you would add an event trigger to that Radio Group component.
  2. In the Edit event handler, select Control component in action, select the Cascader component that you want to update as the target of the event.
  3. Choose the SetValue action and select the appropriate value for the Cascader component. This will be the value that the Cascader component have and will update when the event is triggered.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the Cascader input component will automatically update whenever the onChange event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected option value
FocusWhen a user moves the mouse cursor on the cascader component
BlurWhen a user is done selecting options and quit from focusing on the cascader component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
dataSourceModethe mode of the data source in cascader (default dynamic)
displayNamethe name of this component (ie cascader1)
expandTriggertrigger events (click)
valueSelected value
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
placeholderplaceholder value

Example: {{cascader1.value[0]}

Use case​

Next, we will demonstrate how to map the data from the data source to options in cascader dynamically.

Step 1 Add an action​

Let us create a table in Supabase called project, as well as a subtable called therapist which are aligned by project_id.

Then we can create a new action for Supabase from the action list, listing all data in project and named supabasedb1 

SELECT [project.id](http://project.id/) as project_id, [therapist.name](http://therapist.name/) as therapist_name from therapist join project on therapist.project_id = [project.id](http://project.id/)

Step 2 Transform the data​

Next, we can enable the transformer section under the Select Section. Within the text area, we can capture only the values and labels we need from the data and transform them into cascader-friendly options using JavaScript.

const transformedArray = data.reduce((acc, current) => {
  const existing = acc.find((item) => item.value === current.project_id);
  if (existing) {
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    existing.children.push(therapist);
  } else {
    const project = { value: current.project_id, label: current.project_name, children: [] };
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    project.children.push(therapist);
    acc.push(project);
  }
  return acc;
}, []);

return transformedArray;

The final action should be displayed the same as

cascader 1

Click Save and Run to activate this action.

Step 3 Configure the component​

After dragging a cascader component to the canvas, we can single click to configure its data source to {{supabasedb1.data}}

Optional: Here we set a default value of {{['a', '1']}} for corresponding {{['Psychotherapy'], ['James']}} labels.

cascader 2

+ + \ No newline at end of file diff --git a/circle-progress/index.html b/circle-progress/index.html index 993d571788..64cb085be0 100644 --- a/circle-progress/index.html +++ b/circle-progress/index.html @@ -10,13 +10,13 @@ - - + +
-

Circle progress

What is Circle progress?​

Circle Progress component is a visual element used to display progress or completion status in a circular format. It is often used to represent the progress of tasks, projects, or any other measurable value.

Properties​

PropertiesDescription
Valuethe percentage value represents the progress
Hide value labelwhether the value label is hidden
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.
AlignmentSet the alignment (align to left or right) of the label
Theme ColorAllows users to specify the button's background color and opacity
Stylesthe stroke width of the circle represents the progress

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
alignmentcontrol the position of the progress circle
colorcolor of the circle
displayNamethe name of this component (ie button1)
hiddenhidden status (true or false)
strokeWidthwidth of the circle stroke
tooltipTextvalue of tooltip text
trailColorcolor of the trail or the unfilled portion of the circle progress
valuepercentage value of the progress

Example: {{circleProgress1.value}}

Use case​

We will demonstrate how to make a form with a circle progress component showing the completion progress of the form.

Step 1 Add Components​

Add a form component with the default text "Form" and a "Submit" button to Canvas.

Add an input component, a number input component, and a circle progress component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the bar progress component to be "Progress".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

cir_layout

Step 2 Configure the component​

For the input and number input components, we can configure them to set the value in circle progress component to reflect the progress of completion.

  1. Click the input and number input component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the circle progress component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as
{
  {
    input1.value && numberInput1.value
      ? "100"
      : input1.value || numberInput1.value
      ? "50"
      : "0";
  }
}

cir_event_config

Note: need to set the event handler as described above to BOTH input and number input components.

For the "Submit" button component, we can configure it to submit the form if the form is completed (ie circle progress 100%)

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method and put {{circleProgress1.value == 100}} in Only run when

cir_sub_config

Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Error!" and description "Please fill out the form before submitting". Choose Error for type, put {{2000}} for the duration (2 seconds), and put {{circleProgress1.value<100}} for Only run when.

cir_err_config

We can also configure the **Form** component to show a success message when submit.

  1. Click the form component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Submitted Successfully". Choose Success for type, put {{2000}} for the duration (2 seconds).

cir_form_submit

Step 4 Test​

cir_test

- - +

Circle progress

What is Circle progress?​

Circle Progress component is a visual element used to display progress or completion status in a circular format. It is often used to represent the progress of tasks, projects, or any other measurable value.

Properties​

PropertiesDescription
Valuethe percentage value represents the progress
Hide value labelwhether the value label is hidden
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.
AlignmentSet the alignment (align to left or right) of the label
Theme ColorAllows users to specify the button's background color and opacity
Stylesthe stroke width of the circle represents the progress

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
alignmentcontrol the position of the progress circle
colorcolor of the circle
displayNamethe name of this component (ie button1)
hiddenhidden status (true or false)
strokeWidthwidth of the circle stroke
tooltipTextvalue of tooltip text
trailColorcolor of the trail or the unfilled portion of the circle progress
valuepercentage value of the progress

Example: {{circleProgress1.value}}

Use case​

We will demonstrate how to make a form with a circle progress component showing the completion progress of the form.

Step 1 Add Components​

Add a form component with the default text "Form" and a "Submit" button to Canvas.

Add an input component, a number input component, and a circle progress component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the bar progress component to be "Progress".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

cir_layout

Step 2 Configure the component​

For the input and number input components, we can configure them to set the value in circle progress component to reflect the progress of completion.

  1. Click the input and number input component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the circle progress component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as
{
  {
    input1.value && numberInput1.value
      ? "100"
      : input1.value || numberInput1.value
      ? "50"
      : "0";
  }
}

cir_event_config

Note: need to set the event handler as described above to BOTH input and number input components.

For the "Submit" button component, we can configure it to submit the form if the form is completed (ie circle progress 100%)

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method and put {{circleProgress1.value == 100}} in Only run when

cir_sub_config

Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Error!" and description "Please fill out the form before submitting". Choose Error for type, put {{2000}} for the duration (2 seconds), and put {{circleProgress1.value<100}} for Only run when.

cir_err_config

We can also configure the **Form** component to show a success message when submit.

  1. Click the form component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Submitted Successfully". Choose Success for type, put {{2000}} for the duration (2 seconds).

cir_form_submit

Step 4 Test​

cir_test

+ + \ No newline at end of file diff --git a/clickhouse/index.html b/clickhouse/index.html index 8a1ebdde1e..ae0910fc70 100644 --- a/clickhouse/index.html +++ b/clickhouse/index.html @@ -10,13 +10,13 @@ - - + +
-

ClickHouse

ClickHouse is a fast, column-oriented database management system that is designed for online analytical processing (OLAP) workloads. It is an open-source project that was created by Yandex, the Russian search engine company. ClickHouse is known for its ability to process large amounts of data quickly and efficiently, making it an ideal solution for big data analytics.

With Illa Cloud, you can deploy and manage ClickHouse clusters on the cloud, without having to worry about the underlying infrastructure and maintenance.

Illa Cloud provides a web-based interface for managing ClickHouse clusters, allowing you to monitor cluster performance, scale resources up or down, and configure backups and security settings. You can also use Illa Cloud to run queries on your ClickHouse data using a web-based query editor.

Create ClickHouse​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select ClickHouse from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready ClickHouse will display as shown.

click_config

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select ClickHouse from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to ClickHouse database.

click_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '9440'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the ClickHouse server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a ClickHouse resource, we can add the action by selecting ClickHouse from action list and choosing the Create action button.

click_resource_list

Now we have added the ClickHouse server as an action to our building page.

click

Configure ClickHouse​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

ClickHouse

ClickHouse is a fast, column-oriented database management system that is designed for online analytical processing (OLAP) workloads. It is an open-source project that was created by Yandex, the Russian search engine company. ClickHouse is known for its ability to process large amounts of data quickly and efficiently, making it an ideal solution for big data analytics.

With Illa Cloud, you can deploy and manage ClickHouse clusters on the cloud, without having to worry about the underlying infrastructure and maintenance.

Illa Cloud provides a web-based interface for managing ClickHouse clusters, allowing you to monitor cluster performance, scale resources up or down, and configure backups and security settings. You can also use Illa Cloud to run queries on your ClickHouse data using a web-based query editor.

Create ClickHouse​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select ClickHouse from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready ClickHouse will display as shown.

click_config

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select ClickHouse from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to ClickHouse database.

click_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '9440'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the ClickHouse server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a ClickHouse resource, we can add the action by selecting ClickHouse from action list and choosing the Create action button.

click_resource_list

Now we have added the ClickHouse server as an action to our building page.

click

Configure ClickHouse​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/container/index.html b/container/index.html index 4bc0f01327..193c4a68e9 100644 --- a/container/index.html +++ b/container/index.html @@ -10,13 +10,13 @@ - - + +
-

Container

You can group related components together in a card using the Container component. Containers also support multiple views that allow you to separate content into distinct views that users can switch between.

Containers function like any other component. Once added, you can group components within it by pressing D or K and dragging them onto the Container.

Multiple views​

Containers support multiple views for grouping content. You can set views in Views section of the Inspect tab. Only one view is visible at a time and users switch between them by changing the current view of the Container component.

Use other components to change views​

You can use other components to control containers by add an event handlers to other components. The following methods are supported:

  1. Set current view by key
  2. Set current view by index
  3. Show the next (visible) view
  4. Show the previous (visible) view

Connect a tab to a container​

You can use a tab component to control a container by switching on Link to a container of the Inspect tab.

After linking to a container, labels of tabs will change to the labels of views. You can change views by clicking tabs without event handlers.

- - +

Container

You can group related components together in a card using the Container component. Containers also support multiple views that allow you to separate content into distinct views that users can switch between.

Containers function like any other component. Once added, you can group components within it by pressing D or K and dragging them onto the Container.

Multiple views​

Containers support multiple views for grouping content. You can set views in Views section of the Inspect tab. Only one view is visible at a time and users switch between them by changing the current view of the Container component.

Use other components to change views​

You can use other components to control containers by add an event handlers to other components. The following methods are supported:

  1. Set current view by key
  2. Set current view by index
  3. Show the next (visible) view
  4. Show the previous (visible) view

Connect a tab to a container​

You can use a tab component to control a container by switching on Link to a container of the Inspect tab.

After linking to a container, labels of tabs will change to the labels of views. You can change views by clicking tabs without event handlers.

+ + \ No newline at end of file diff --git a/custom-domain/index.html b/custom-domain/index.html index d21d30aec7..9fe458b828 100644 --- a/custom-domain/index.html +++ b/custom-domain/index.html @@ -10,13 +10,13 @@ - - + +
-

Custom domain

Please access this feature through ILLA Cloud > Settings > Branding

Configure Cloudflare proxy​

cloudflare

The image above is a page from Cloudflare. The configuration instructions are as follows.

FieldDescription
TypeChoose CNAME.
NameThe prefix of your domain name. For example, if the domain you configured in ILLA Cloud is illa.example.com, the name field is illa
TargetThe CNAME displayed on the domain configuration page of ILLA Cloud may be "cname-https.illa.sh"
Proxy statusTurn it on

Please note that if your domain name was not purchased through Cloudflare, you can migrate the NS (Name Server) records to Cloudflare and then proceed with the above configuration.

Customize domain in ILLA Cloud​

In addition to setting up the domain name, you can also customize the Favicon and Title. However, please note that if you haven't set up a domain name or are not accessing the website through your own domain, the Favicon and Title customization may not take effect.

FieldDescription
FaviconAppears next to the title in your browser tab. Recommended size is 3232, 5757, 7272, 114114, 144*144
TitleLimited to 60 characters or less.
Custom domainA fully qualified domain name, such as illacloud.example.com
- - +

Custom domain

Please access this feature through ILLA Cloud > Settings > Branding

Configure Cloudflare proxy​

cloudflare

The image above is a page from Cloudflare. The configuration instructions are as follows.

FieldDescription
TypeChoose CNAME.
NameThe prefix of your domain name. For example, if the domain you configured in ILLA Cloud is illa.example.com, the name field is illa
TargetThe CNAME displayed on the domain configuration page of ILLA Cloud may be "cname-https.illa.sh"
Proxy statusTurn it on

Please note that if your domain name was not purchased through Cloudflare, you can migrate the NS (Name Server) records to Cloudflare and then proceed with the above configuration.

Customize domain in ILLA Cloud​

In addition to setting up the domain name, you can also customize the Favicon and Title. However, please note that if you haven't set up a domain name or are not accessing the website through your own domain, the Favicon and Title customization may not take effect.

FieldDescription
FaviconAppears next to the title in your browser tab. Recommended size is 3232, 5757, 7272, 114114, 144*144
TitleLimited to 60 characters or less.
Custom domainA fully qualified domain name, such as illacloud.example.com
+ + \ No newline at end of file diff --git a/data-grid/index.html b/data-grid/index.html index 39b01a55ec..e1b06aabd6 100644 --- a/data-grid/index.html +++ b/data-grid/index.html @@ -10,13 +10,13 @@ - - + +
-

Data Grid

Data​

Property nameTypeDescription
selectedRowsArrayData of the selected rows. For example, when you select 1 row, and want to obtain theidof this row, use{{dataGrid1.selectedRows[0].id}}. You can useselectedRowsproperty both within the current DataGrid component and in other components or actions as well.
currentRowObjectData of the currentRow. For example, to set the "available" column to false when the value in the "service_years" column is greater than or equal to 4, or when the value in the "in_stock" column is false, and true for all other cases, you can use the following code:{{!(currentRow.service_years>=4\|\|currentRow.in_stock===false)}}. UnlikeselectedRows, you can only use thecurrentRowproperty within the current datagrid component . Therefore, if you expect a button click to trigger an action that operates on the data of the current row where the button is located, you can only use theselectedRowsproperty within the action to retrieve the data.
pageNumberThe index of the current page, a number starts from 0. For example, when the current page is 1, the index is 0.
pageSizeNumberThe number of data items loaded per page. You can set this value through the right-hand panel.

Configurable properties​

Data​

Property nameTypeDescription
Data sourceArray of objectsUsed to select the source of the data. For example,{{mysql1.data}}
LoadingBooleanUsed to set whether to display the loading status. For example,{{mysql1.isRunning}}
Primary keyStringUsed to set the primary key of your data.

Columns​

Property nameTypeDescription
Column titleArray of objectsUsed to configure the column names displayed in the user interface. By default, it uses column names from the data source.
Column typeStringUsed to configure the data type of the column through a dropdown selection. Different data types have different supported configuration options.
DescriptionStringUsed to configure a description of this column. When the user hovers their mouse over the column title, this description will be displayed.
Mapped valueArrayUsed to configure the values displayed in this column. By default, the data retrieved from the data source will be displayed directly. You can also use{{currentRow.columnName}}to configure the actual displayed value. The principle is to perform calculations on the data of the specified column in the same row, resulting in the entire column value. For example, if the data in thenamecolumn is the full name, and you want to display only the first letter with the remaining content replaced by two asterisks, you can configure it using{{currentRow.name.charAt(0)+"**"}}.
AggregationDropdown selectionUsed to set whether to display aggregate values. Supports aggregation based on Sum, Avg, Min, Max, and Size. If the column is not of numeric type, it only supports aggregation based on Size.
Enable users to sortBooleanUsed to set whether users are allowed to change the sorting based on this column.
Enable users to pinBooleanUsed to set whether users are allowed to pin the column to left or right.
Enable users to filterBooleanUsed to set whether users are allowed to set filters based on this column.
Enable users to hideBooleanUsed to set whether users are allowed to hide this column.
Enable users to aggregateBooleanUsed to set whether users are allowed to hide this column.
Enable users to set group byBooleanUsed to set whether users are allowed to group the data based on this column.
Enable users to resizeBooleanUsed to set whether users are allowed to change the width of this column.
Disable users to reorder columnsBooleanUsed to set whether users are prohibited from adjusting the order of columns.
AlignmentBooleanUsed to set the alignment of the column.

Supported column types and configuration​

Auto​

We will sample the data from each column to determine the data type of each column. If the data is of type Number, the Auto mode corresponds to the Number type. If the data is of type String, the Auto mode corresponds to the Text type. If the data is of type Array, the Auto mode corresponds to the Tag type. If the data is of type Boolean, the Auto mode corresponds to the Boolean type. If the data is of type Date, Time, or Date time, the Auto mode corresponds to the Date type.

Configuration​

No additional configuration

Text​

Displaying data through plain text.

Configuration​

No additional configuration

Date​

Displaying a timestamp in a more readable date format.

Configuration​
Property nameTypeDescription
FormatStringUse the date format specified by the ISO 8601 standard to set the format, such as yyyy-mm-dd.

Date time​

Displaying a timestamp in a more readable date or date time or time format.

Configuration​
Property nameTypeDescription
FormatStringUse the date format specified by the ISO 8601 standard to set the format, such as yyyy-mm-dd HH:mm:ss.

Tag​

Display data using tag types, and when the values of the tags are the same, the colors will also remain consistent. When the data in a column is an array, we separate each item in the array into individual tags.

Configuration​
Property nameTypeDescriptionExample
Tag colorObjectSpecify the colors for different tag values using an object.{{{"product manager":"green","UX/UI":"#FFFFFF"}}}

Number​

Display data using numerical types.

Configuration​
Property nameTypeDescriptionExample
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Percent​

Convert a numerical value into a percentage

Property nameTypeDescriptionExample
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Currency​

Add a currency symbol to a numerical value.

Property nameTypeDescriptionExample
Currency codeStringUsed to set the currency code. List of currency codeEUR
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Display the link directly and support clickable redirection.

Configuration​

No additional configuration, but please note that the link must be a complete URL starting with 'https://' or 'http://'. Otherwise, the redirection may fail.

Button​

Used to trigger actions when clicked.

Property nameTypeDescriptionExample
Event handler--Used to set what action is triggered upon clicking the button. If you want to perform operations on the current row's data upon clicking a button, please enable the row selection switch and use the single selection mode. And use{{dataGrid1.selectedRows[0].columnName}}to specify the data for the SQL or API request.If you want to set a button to delete the current row, the SQL statement for deletion would be as follows:DELETE FROM table_name WHERE id = {{dataGrid1.selectedRows[0].id}}
DisabledBooleanWhether or not to disable the button. For example,{{currentRow.link === "" ? true : false}}. When the link in this row is an empty string, disable the event handler.{{currentRow.link === "" ? true : false}}
Theme color--Used to set the color of the button.blue

Button group​

Place multiple buttons in a column to trigger different events individually.

Configuration​

Same as button.

Boolean​

Used to visually display the status of a certain attribute or whether a condition is met.

Configuration​

No additional configuration.

Image​

Used to display images

Configuration​
Property nameTypeDescriptionExample
Scale type--Used to set the image's fit mode. 1. Scale-down : Preserve the original aspect ratio of the image, scale down the image to fit within the designated area while maintaining its integrity. 2. Cover : Preserve the original aspect ratio of the image, fill the designated area, and crop any excess parts of the image. 3. Fill : Adjust the aspect ratio of the image to compress or stretch it to fill the designated area. 4. None : Do not resize the image, display it in its original aspect ratio and size, and crop any parts that exceed the designated area.If you want to set a button to delete the current row, the SQL statement for deletion would be as follows:DELETE FROM table_name WHERE id = {{dataGrid1.selectedRows[0].id}}

Avatar​

Configuration​
Property nameTypeDescriptionExample
Avatar typeStringUsed to set the avatar type, you can choose from Image, Icon, or Text (using the first letter of the text as the avatar). You can also use JavaScript code to set different avatar types based on different conditions:image,icon,textIf the avatar field is empty in the current row, use the text type. Otherwise, use the specified image type:{{currentRow.avatar===null?"text":"image"}}
Image sourceStringUsed to set the image source, it can be a URL or a base64 string with a prefix.{{currentRow.avatar}}
TextStringWe will extract the first letter of the string to use as the avatar.{{currentRow.name}}
Icon--Select an icon to use as the avatar.--
LabelStringUsed to set the label.{{currentRow.name}}
CaptionStringUsed to set the caption.{{currentRow.email}}
Hidden label--Used to set whether or not hide the label, and consequently hide the caption as well, please set the option for hiding the label.--
Theme color--Used to set the avatar color, this option only takes effect in text and icon mode. You can choose between "Auto" or "Custom". In "Auto" mode, we will randomly assign a color. In "Custom" mode, you can specify a color of your choice.--

Rating​

Configuration​
Property nameTypeDescriptionExample
Max countNumberUsed to set the maximum number of stars to be displayed.{{5}}

Markdown​

Used to show the data in markdown format. Only supports single-line Markdown here.

Configuration​
Property nameTypeDescriptionExample
Mapped valueStringWrite Markdown here, for example,## {{currentRow.name}}.## {{currentRow.name}}

Html​

Used to render the data as HTML.

Configuration​
Property nameTypeDescription
Mapped valueStringWrite HTML here.

Sort​

Property nameTypeDescription
Column--Used to set whether to sort based on a specific column by default.
Direction--Used to set the default sorting direction.

User selection​

Property nameTypeDescription
Allow row selection--Used to set whether or not to allow users to select the rows.
Selection mode--Used to set the selection mode, single selection or multiple selection.

Pagination​

Property nameTypeDescription
Pagination--Used to set whether or not to allow users to select the rows.
Enable server side pagination--Used to set the selection mode, single selection or multiple selection. In the data grid, we support the "limit offset" pagination method. You can refer to this document to learn about the configuration options: https://docs.illacloud.com/server-side-pagination
Total row countNumberUsed to set the total number of rows, you can create an action to query the total row count, such asSELECT COUNT(*) FROM users. And the total row count could be{{mysql1.data[0].count}}
Page sizeNumberUsed to set the number of data records returned per page during server-side pagination.

Toolbar​

Property nameDescription
DensityUsed to toggle the display of the Density function on the toolbar. Users can utilize this function to set the line height.
ColumnsUsed to set whether the column setting entry is displayed on the toolbar. The column setting entry allows for quick adjustment of which columns are displayed.
RefreshUsed to set whether the refresh button is displayed on the toolbar. When using this feature, be sure to add an event handler to listen to refresh events.
ExportUsed to set whether the export button is displayed. Users can utilize this function to export the filtered data.
Export allUsed to set whether the 'Export All' button is displayed. Users can utilize this function to export the data before filtering.
FilterUsed to set whether the filtering function is displayed. Users can utilize this function to filter data that meets certain criteria.
Quick filterUsed to set whether the quick filtering function is displayed. Users can utilize this function to query the entire table data through fuzzy matching.

Event​

You can listen to the following events.

EventDescription
Sort changeTrigger events when sorting changes.
Page changeTrigger events when current page changes.
RefreshTrigger events when click refresh button.
Filter changeTrigger events when change the filter.
Row selection changeTrigger events when change the selected rows.
Column visibility changeTrigger events when change the visibility of columns.

Method​

You can use other components to control a data grid and achieve the desired behavior.

Set filter​

Filter

{{
    {
        items: [
                    { id: 1, field: "size", operator: "=", value: 0 }, 
                    { id: 2, field: "owner", operator: "equals", value: "Mikiko" }
                ], 
        logicOperator: "or", 
        quickFilterValues: ['Mi'],
        quickFilterLogicOperator: "or"
     }
}}
Property nameTypeDescription
itemsArrayAn array used to set multiple filters. Each object in the array is a filtering condition.
idinitemsAnySet a unique ID for this filtering condition.
fieldinitemsStringSpecify which column the filter is working on.
operatorinitemsStringSpecify the operator. For number type, we support >, >=, =, <, <=. For string types, we support contains, equals, startsWith, endsWith, isEmpty, isNot, empty, isAnyOf.
valueinitemsStringUsed to set the value.
logicOperatorStringSpecify the relationship between multiple conditions, "and" or "or".
quickFilterValuesArraySpecify one or more strings for fuzzy searching.
quickFilterLogicOperatorStringSpecify the relationship between multiple fuzzy search strings, "and" or "or".

Set column visibility​

value

{{
    {
        "columnName": false
     }
}}

Set page​

Page: the index of the page starts with 0. For example, {{2}} means the page 3.

Set page size​

Value: number used to set the page size. For example, {{5}}.

Set row selection​

Value: An array used to set the selected rows. Before using this method, please turn on the allow user selection switch of the data grid. The number in the array means the index of the row which starts from 0. For example, {{[1,2]}} means selecting row 2 and row 3.

- - +

Data Grid

Data​

Property nameTypeDescription
selectedRowsArrayData of the selected rows. For example, when you select 1 row, and want to obtain theidof this row, use{{dataGrid1.selectedRows[0].id}}. You can useselectedRowsproperty both within the current DataGrid component and in other components or actions as well.
currentRowObjectData of the currentRow. For example, to set the "available" column to false when the value in the "service_years" column is greater than or equal to 4, or when the value in the "in_stock" column is false, and true for all other cases, you can use the following code:{{!(currentRow.service_years>=4\|\|currentRow.in_stock===false)}}. UnlikeselectedRows, you can only use thecurrentRowproperty within the current datagrid component . Therefore, if you expect a button click to trigger an action that operates on the data of the current row where the button is located, you can only use theselectedRowsproperty within the action to retrieve the data.
pageNumberThe index of the current page, a number starts from 0. For example, when the current page is 1, the index is 0.
pageSizeNumberThe number of data items loaded per page. You can set this value through the right-hand panel.

Configurable properties​

Data​

Property nameTypeDescription
Data sourceArray of objectsUsed to select the source of the data. For example,{{mysql1.data}}
LoadingBooleanUsed to set whether to display the loading status. For example,{{mysql1.isRunning}}
Primary keyStringUsed to set the primary key of your data.

Columns​

Property nameTypeDescription
Column titleArray of objectsUsed to configure the column names displayed in the user interface. By default, it uses column names from the data source.
Column typeStringUsed to configure the data type of the column through a dropdown selection. Different data types have different supported configuration options.
DescriptionStringUsed to configure a description of this column. When the user hovers their mouse over the column title, this description will be displayed.
Mapped valueArrayUsed to configure the values displayed in this column. By default, the data retrieved from the data source will be displayed directly. You can also use{{currentRow.columnName}}to configure the actual displayed value. The principle is to perform calculations on the data of the specified column in the same row, resulting in the entire column value. For example, if the data in thenamecolumn is the full name, and you want to display only the first letter with the remaining content replaced by two asterisks, you can configure it using{{currentRow.name.charAt(0)+"**"}}.
AggregationDropdown selectionUsed to set whether to display aggregate values. Supports aggregation based on Sum, Avg, Min, Max, and Size. If the column is not of numeric type, it only supports aggregation based on Size.
Enable users to sortBooleanUsed to set whether users are allowed to change the sorting based on this column.
Enable users to pinBooleanUsed to set whether users are allowed to pin the column to left or right.
Enable users to filterBooleanUsed to set whether users are allowed to set filters based on this column.
Enable users to hideBooleanUsed to set whether users are allowed to hide this column.
Enable users to aggregateBooleanUsed to set whether users are allowed to hide this column.
Enable users to set group byBooleanUsed to set whether users are allowed to group the data based on this column.
Enable users to resizeBooleanUsed to set whether users are allowed to change the width of this column.
Disable users to reorder columnsBooleanUsed to set whether users are prohibited from adjusting the order of columns.
AlignmentBooleanUsed to set the alignment of the column.

Supported column types and configuration​

Auto​

We will sample the data from each column to determine the data type of each column. If the data is of type Number, the Auto mode corresponds to the Number type. If the data is of type String, the Auto mode corresponds to the Text type. If the data is of type Array, the Auto mode corresponds to the Tag type. If the data is of type Boolean, the Auto mode corresponds to the Boolean type. If the data is of type Date, Time, or Date time, the Auto mode corresponds to the Date type.

Configuration​

No additional configuration

Text​

Displaying data through plain text.

Configuration​

No additional configuration

Date​

Displaying a timestamp in a more readable date format.

Configuration​
Property nameTypeDescription
FormatStringUse the date format specified by the ISO 8601 standard to set the format, such as yyyy-mm-dd.

Date time​

Displaying a timestamp in a more readable date or date time or time format.

Configuration​
Property nameTypeDescription
FormatStringUse the date format specified by the ISO 8601 standard to set the format, such as yyyy-mm-dd HH:mm:ss.

Tag​

Display data using tag types, and when the values of the tags are the same, the colors will also remain consistent. When the data in a column is an array, we separate each item in the array into individual tags.

Configuration​
Property nameTypeDescriptionExample
Tag colorObjectSpecify the colors for different tag values using an object.{{{"product manager":"green","UX/UI":"#FFFFFF"}}}

Number​

Display data using numerical types.

Configuration​
Property nameTypeDescriptionExample
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Percent​

Convert a numerical value into a percentage

Property nameTypeDescriptionExample
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Currency​

Add a currency symbol to a numerical value.

Property nameTypeDescriptionExample
Currency codeStringUsed to set the currency code. List of currency codeEUR
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Display the link directly and support clickable redirection.

Configuration​

No additional configuration, but please note that the link must be a complete URL starting with 'https://' or 'http://'. Otherwise, the redirection may fail.

Button​

Used to trigger actions when clicked.

Property nameTypeDescriptionExample
Event handler--Used to set what action is triggered upon clicking the button. If you want to perform operations on the current row's data upon clicking a button, please enable the row selection switch and use the single selection mode. And use{{dataGrid1.selectedRows[0].columnName}}to specify the data for the SQL or API request.If you want to set a button to delete the current row, the SQL statement for deletion would be as follows:DELETE FROM table_name WHERE id = {{dataGrid1.selectedRows[0].id}}
DisabledBooleanWhether or not to disable the button. For example,{{currentRow.link === "" ? true : false}}. When the link in this row is an empty string, disable the event handler.{{currentRow.link === "" ? true : false}}
Theme color--Used to set the color of the button.blue

Button group​

Place multiple buttons in a column to trigger different events individually.

Configuration​

Same as button.

Boolean​

Used to visually display the status of a certain attribute or whether a condition is met.

Configuration​

No additional configuration.

Image​

Used to display images

Configuration​
Property nameTypeDescriptionExample
Scale type--Used to set the image's fit mode. 1. Scale-down : Preserve the original aspect ratio of the image, scale down the image to fit within the designated area while maintaining its integrity. 2. Cover : Preserve the original aspect ratio of the image, fill the designated area, and crop any excess parts of the image. 3. Fill : Adjust the aspect ratio of the image to compress or stretch it to fill the designated area. 4. None : Do not resize the image, display it in its original aspect ratio and size, and crop any parts that exceed the designated area.If you want to set a button to delete the current row, the SQL statement for deletion would be as follows:DELETE FROM table_name WHERE id = {{dataGrid1.selectedRows[0].id}}

Avatar​

Configuration​
Property nameTypeDescriptionExample
Avatar typeStringUsed to set the avatar type, you can choose from Image, Icon, or Text (using the first letter of the text as the avatar). You can also use JavaScript code to set different avatar types based on different conditions:image,icon,textIf the avatar field is empty in the current row, use the text type. Otherwise, use the specified image type:{{currentRow.avatar===null?"text":"image"}}
Image sourceStringUsed to set the image source, it can be a URL or a base64 string with a prefix.{{currentRow.avatar}}
TextStringWe will extract the first letter of the string to use as the avatar.{{currentRow.name}}
Icon--Select an icon to use as the avatar.--
LabelStringUsed to set the label.{{currentRow.name}}
CaptionStringUsed to set the caption.{{currentRow.email}}
Hidden label--Used to set whether or not hide the label, and consequently hide the caption as well, please set the option for hiding the label.--
Theme color--Used to set the avatar color, this option only takes effect in text and icon mode. You can choose between "Auto" or "Custom". In "Auto" mode, we will randomly assign a color. In "Custom" mode, you can specify a color of your choice.--

Rating​

Configuration​
Property nameTypeDescriptionExample
Max countNumberUsed to set the maximum number of stars to be displayed.{{5}}

Markdown​

Used to show the data in markdown format. Only supports single-line Markdown here.

Configuration​
Property nameTypeDescriptionExample
Mapped valueStringWrite Markdown here, for example,## {{currentRow.name}}.## {{currentRow.name}}

Html​

Used to render the data as HTML.

Configuration​
Property nameTypeDescription
Mapped valueStringWrite HTML here.

Sort​

Property nameTypeDescription
Column--Used to set whether to sort based on a specific column by default.
Direction--Used to set the default sorting direction.

User selection​

Property nameTypeDescription
Allow row selection--Used to set whether or not to allow users to select the rows.
Selection mode--Used to set the selection mode, single selection or multiple selection.

Pagination​

Property nameTypeDescription
Pagination--Used to set whether or not to allow users to select the rows.
Enable server side pagination--Used to set the selection mode, single selection or multiple selection. In the data grid, we support the "limit offset" pagination method. You can refer to this document to learn about the configuration options: https://docs.illacloud.com/server-side-pagination
Total row countNumberUsed to set the total number of rows, you can create an action to query the total row count, such asSELECT COUNT(*) FROM users. And the total row count could be{{mysql1.data[0].count}}
Page sizeNumberUsed to set the number of data records returned per page during server-side pagination.

Toolbar​

Property nameDescription
DensityUsed to toggle the display of the Density function on the toolbar. Users can utilize this function to set the line height.
ColumnsUsed to set whether the column setting entry is displayed on the toolbar. The column setting entry allows for quick adjustment of which columns are displayed.
RefreshUsed to set whether the refresh button is displayed on the toolbar. When using this feature, be sure to add an event handler to listen to refresh events.
ExportUsed to set whether the export button is displayed. Users can utilize this function to export the filtered data.
Export allUsed to set whether the 'Export All' button is displayed. Users can utilize this function to export the data before filtering.
FilterUsed to set whether the filtering function is displayed. Users can utilize this function to filter data that meets certain criteria.
Quick filterUsed to set whether the quick filtering function is displayed. Users can utilize this function to query the entire table data through fuzzy matching.

Event​

You can listen to the following events.

EventDescription
Sort changeTrigger events when sorting changes.
Page changeTrigger events when current page changes.
RefreshTrigger events when click refresh button.
Filter changeTrigger events when change the filter.
Row selection changeTrigger events when change the selected rows.
Column visibility changeTrigger events when change the visibility of columns.

Method​

You can use other components to control a data grid and achieve the desired behavior.

Set filter​

Filter

{{
    {
        items: [
                    { id: 1, field: "size", operator: "=", value: 0 }, 
                    { id: 2, field: "owner", operator: "equals", value: "Mikiko" }
                ], 
        logicOperator: "or", 
        quickFilterValues: ['Mi'],
        quickFilterLogicOperator: "or"
     }
}}
Property nameTypeDescription
itemsArrayAn array used to set multiple filters. Each object in the array is a filtering condition.
idinitemsAnySet a unique ID for this filtering condition.
fieldinitemsStringSpecify which column the filter is working on.
operatorinitemsStringSpecify the operator. For number type, we support >, >=, =, <, <=. For string types, we support contains, equals, startsWith, endsWith, isEmpty, isNot, empty, isAnyOf.
valueinitemsStringUsed to set the value.
logicOperatorStringSpecify the relationship between multiple conditions, "and" or "or".
quickFilterValuesArraySpecify one or more strings for fuzzy searching.
quickFilterLogicOperatorStringSpecify the relationship between multiple fuzzy search strings, "and" or "or".

Set column visibility​

value

{{
    {
        "columnName": false
     }
}}

Set page​

Page: the index of the page starts with 0. For example, {{2}} means the page 3.

Set page size​

Value: number used to set the page size. For example, {{5}}.

Set row selection​

Value: An array used to set the selected rows. Before using this method, please turn on the allow user selection switch of the data grid. The number in the array means the index of the row which starts from 0. For example, {{[1,2]}} means selecting row 2 and row 3.

+ + \ No newline at end of file diff --git a/date-range/index.html b/date-range/index.html index 18f7823a95..611cb6f4d2 100644 --- a/date-range/index.html +++ b/date-range/index.html @@ -10,13 +10,13 @@ - - + +
-

Date range

What is Date range?​

Date Range component is a UI component that allows users to select a range of dates from a calendar interface, typically used in forms or data entry interfaces where the user needs to specify a start and end date range.

When a Date Range component is added to canvas, it displays two calendar interfaces side by side. One calendar interface is used to select the start date, while the other is used to select the end date. The user can navigate through the calendars by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The selected dates will be displayed in the input fields.

Properties​

Date Range's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Start dateThe default start date value of the component
End dateThe default end date value of the component
FormatA valid date format string. See https://day.js.org/docs/en/parse/string-format.
Start PlaceholderThe value will be shown when the start date input field is empty.
End PlaceholderThe value will be shown when the end date input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following two methods:

  • setStartValue

To set the start date value, for example, {{"value1"}}

PropertiesDescription
ValueInput start value
  • setEndValue

To set the end date value, for example, {{"value2"}}

PropertiesDescription
ValueInput end value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
dateFormatthe formate of date
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie cascader1)
startPlaceholderplaceholder value for start date
endPlaceholderplaceholder value for end date
eventsan Array value for sequence of events
formDataKeythe Form Data Key of Date
hiddena Boolean value indicate the hidden status of button
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
valueSelected value

Example: {{dateRange1.value[0]}}

Use case​

Next, we will demonstrate how to map the data from the data source to date range and set end value to today's date with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the startedAt and expiredAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date range component and a button component to the canvas. For default start date value of the date range component, we use the startedAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].startedAt}}

Similarly, for default end date value, we use expiredAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].expiredAt}}

We also labeled the button as 'Update' as shown below.

date_range_0

Step 3 Configure the component​

For the button component, we can configure it to set the end date value in date range component to today's date.

  1. In the Edit event handler, select Control component in action, select the date range component that you want to update as the target of the event.
  2. Choose the setEndValue action and set the End date as {{currentUserInfo.updatedAt}}

date_range_config

Step 4 Test​

Now that when you click the 'Update' button, the end date should change to today's date. As for here, we have 2023-5-6 but it may be different when you are testing it.

date_range_1

- - +

Date range

What is Date range?​

Date Range component is a UI component that allows users to select a range of dates from a calendar interface, typically used in forms or data entry interfaces where the user needs to specify a start and end date range.

When a Date Range component is added to canvas, it displays two calendar interfaces side by side. One calendar interface is used to select the start date, while the other is used to select the end date. The user can navigate through the calendars by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The selected dates will be displayed in the input fields.

Properties​

Date Range's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Start dateThe default start date value of the component
End dateThe default end date value of the component
FormatA valid date format string. See https://day.js.org/docs/en/parse/string-format.
Start PlaceholderThe value will be shown when the start date input field is empty.
End PlaceholderThe value will be shown when the end date input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following two methods:

  • setStartValue

To set the start date value, for example, {{"value1"}}

PropertiesDescription
ValueInput start value
  • setEndValue

To set the end date value, for example, {{"value2"}}

PropertiesDescription
ValueInput end value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
dateFormatthe formate of date
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie cascader1)
startPlaceholderplaceholder value for start date
endPlaceholderplaceholder value for end date
eventsan Array value for sequence of events
formDataKeythe Form Data Key of Date
hiddena Boolean value indicate the hidden status of button
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
valueSelected value

Example: {{dateRange1.value[0]}}

Use case​

Next, we will demonstrate how to map the data from the data source to date range and set end value to today's date with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the startedAt and expiredAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date range component and a button component to the canvas. For default start date value of the date range component, we use the startedAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].startedAt}}

Similarly, for default end date value, we use expiredAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].expiredAt}}

We also labeled the button as 'Update' as shown below.

date_range_0

Step 3 Configure the component​

For the button component, we can configure it to set the end date value in date range component to today's date.

  1. In the Edit event handler, select Control component in action, select the date range component that you want to update as the target of the event.
  2. Choose the setEndValue action and set the End date as {{currentUserInfo.updatedAt}}

date_range_config

Step 4 Test​

Now that when you click the 'Update' button, the end date should change to today's date. As for here, we have 2023-5-6 but it may be different when you are testing it.

date_range_1

+ + \ No newline at end of file diff --git a/date-time/index.html b/date-time/index.html index 291de8fbee..3147cbb6f2 100644 --- a/date-time/index.html +++ b/date-time/index.html @@ -10,13 +10,13 @@ - - + +
-

Date time

What is Date Time?​

Date Time component is a component that allows users to select a date and time from a calendar and 24 hours interface, typically used in forms or data entry interfaces where the user needs to specify a specific date and time.

When a Date Time component is added to canvas, it displays a calendar and clock interface. The user can navigate through the calendar by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The clock interface displays hours, minutes, and seconds that the user can adjust by moving mouse cursor or using the up and down arrows.

Properties​

Date Time's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input date time value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
maxDatethe value of maximum date
minDatethe value of minimum date
minuteStepminute step size value
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput date and time value
validateMessagestring value for validate message

Example: {{dateTime1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to date time and set to current date and time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date time component and a button component to the canvas. For default value of the date component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Now" as shown below

date_time_0

Step 3 Configure the component​

For the button component, we can configure it to set the date in date time component to current date and time.

  1. In the Edit event handler, select Control component in action, select the date time component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

date_time_config

Step 4 Test​

Now that when you click the "Now" button, the time should change to today's date. As for here, we have 2023-5-6 11:19:47 but it may be different when you are testing it.

date_time_1

- - +

Date time

What is Date Time?​

Date Time component is a component that allows users to select a date and time from a calendar and 24 hours interface, typically used in forms or data entry interfaces where the user needs to specify a specific date and time.

When a Date Time component is added to canvas, it displays a calendar and clock interface. The user can navigate through the calendar by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The clock interface displays hours, minutes, and seconds that the user can adjust by moving mouse cursor or using the up and down arrows.

Properties​

Date Time's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input date time value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
maxDatethe value of maximum date
minDatethe value of minimum date
minuteStepminute step size value
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput date and time value
validateMessagestring value for validate message

Example: {{dateTime1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to date time and set to current date and time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date time component and a button component to the canvas. For default value of the date component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Now" as shown below

date_time_0

Step 3 Configure the component​

For the button component, we can configure it to set the date in date time component to current date and time.

  1. In the Edit event handler, select Control component in action, select the date time component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

date_time_config

Step 4 Test​

Now that when you click the "Now" button, the time should change to today's date. As for here, we have 2023-5-6 11:19:47 but it may be different when you are testing it.

date_time_1

+ + \ No newline at end of file diff --git a/date/index.html b/date/index.html index 55969f1150..515708ae6e 100644 --- a/date/index.html +++ b/date/index.html @@ -10,13 +10,13 @@ - - + +
-

Date

What is Date?​

The Date component is a component that allows users to select a date from a calendar interface. The Date component is typically used in forms or data entry interfaces where the user needs to select a specific date.

When a Date component is added to the canvas, it displays a calendar interface by default. The user can navigate through the calendar by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The selected date will be displayed in the input field.

Properties​

Date's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input date value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
dateFormatthe formate of date
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
maxDatethe value of maximum date
minDatethe value of minimum date
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput value

Example: {{date1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to date and set to current date with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date component and a button component to the canvas. For default value of the date component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Today" as shown below

date_time0

Step 3 Configure the component​

For the button component, we can configure it to set the date in date component to today's date.

  1. In the Edit event handler, select Control component in action, select the date component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

date_confg

Step 4 Test​

Now that when you click the "today" button, the time should change to today's date. As for here, we have 2023-5-6 but it may be different when you are testing it.

date_time1

- - +

Date

What is Date?​

The Date component is a component that allows users to select a date from a calendar interface. The Date component is typically used in forms or data entry interfaces where the user needs to select a specific date.

When a Date component is added to the canvas, it displays a calendar interface by default. The user can navigate through the calendar by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The selected date will be displayed in the input field.

Properties​

Date's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input date value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
dateFormatthe formate of date
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
maxDatethe value of maximum date
minDatethe value of minimum date
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput value

Example: {{date1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to date and set to current date with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date component and a button component to the canvas. For default value of the date component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Today" as shown below

date_time0

Step 3 Configure the component​

For the button component, we can configure it to set the date in date component to today's date.

  1. In the Edit event handler, select Control component in action, select the date component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

date_confg

Step 4 Test​

Now that when you click the "today" button, the time should change to today's date. As for here, we have 2023-5-6 but it may be different when you are testing it.

date_time1

+ + \ No newline at end of file diff --git a/divider/index.html b/divider/index.html index d187baf647..a0a1d67802 100644 --- a/divider/index.html +++ b/divider/index.html @@ -10,13 +10,13 @@ - - + +
-

Divider

What is Divider?​

In ILLA Cloud, the divider component is a visual element that helps to separate or divide sections of content within a web application. It is a simple horizontal line or vertical line that can be inserted between different sections or components to improve the visual organization and clarity of the user interface.

Properties​

PropertiesDescription
Textadd additional information to the divider component
Text aligndetermines the horizontal alignment of the text within the divider component
Hiddenhide the divider component from the user interface
Text sizeadjust the font size of the text within the divider component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemedefines the color of the text in the component
displayNamerepresents the name or label assigned to the component
fsfile system (fs) associated with the divider
hiddenboolean value that determines whether the component is visible or hidden
textthe text value

Example: {{divider1.text}}

Use case​

You can place it anywhere you want to divide the page into two sections. Here we will show the divider with three different text alignments.

divider_test

- - +
Skip to main content

Divider

What is Divider?​

In ILLA Cloud, the divider component is a visual element that helps to separate or divide sections of content within a web application. It is a simple horizontal line or vertical line that can be inserted between different sections or components to improve the visual organization and clarity of the user interface.

Properties​

PropertiesDescription
Textadd additional information to the divider component
Text aligndetermines the horizontal alignment of the text within the divider component
Hiddenhide the divider component from the user interface
Text sizeadjust the font size of the text within the divider component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemedefines the color of the text in the component
displayNamerepresents the name or label assigned to the component
fsfile system (fs) associated with the divider
hiddenboolean value that determines whether the component is visible or hidden
textthe text value

Example: {{divider1.text}}

Use case​

You can place it anywhere you want to divide the page into two sections. Here we will show the divider with three different text alignments.

divider_test

+ + \ No newline at end of file diff --git a/editable-text/index.html b/editable-text/index.html index 1fdf10f326..988580fe57 100644 --- a/editable-text/index.html +++ b/editable-text/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Editable text

What is Editable Text?​

Editable text allows users to create and manipulate text within their applications. With this component, users can easily input and edit text directly on the interface, making it ideal for creating dynamic and interactive content.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Patternspecify a pattern that the input value must match
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following five methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the text area input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit focusing on component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
prefixTextvalue of the text prefix
suffixTextvalue of the text suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
regexapply pattern-based validation to the input text in the text area
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{editable_text1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to the editable text with a button.

Step 1 Add an action​

Let us create a table in REST API with columns id, name, and age. The id 1 document is what we want to show in the form component.

rest_get_all

Then we can create a new action for REST API from the action list in the app we want to build, listing all the data in the bucket and named restapi1.

Select GET for **Action Type**. In URL Parameters, put id for key and 1 for value.

Click Save and Run to activate this action.

rest_get_1

Step 2 Add Components​

Next, we can add an editable text component and a button component to the canvas.

We label editable text to be 'Name' and labeled the button as "Set value" as shown below

edit_layout

Step 3 Configure the component​

For the button component, we can configure it to set the value in editable text component to the data of the document we read from restapi.

  1. In the Edit event handler, select Control component in action, and select the editable text component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{restapi1.data[0]["name"]}}

edit_event_config

Step 4 Test​

Now that when you click the "Set value" button, the value should change to the text.

edit_test

- - +
Skip to main content

Editable text

What is Editable Text?​

Editable text allows users to create and manipulate text within their applications. With this component, users can easily input and edit text directly on the interface, making it ideal for creating dynamic and interactive content.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Patternspecify a pattern that the input value must match
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following five methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the text area input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit focusing on component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
prefixTextvalue of the text prefix
suffixTextvalue of the text suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
regexapply pattern-based validation to the input text in the text area
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{editable_text1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to the editable text with a button.

Step 1 Add an action​

Let us create a table in REST API with columns id, name, and age. The id 1 document is what we want to show in the form component.

rest_get_all

Then we can create a new action for REST API from the action list in the app we want to build, listing all the data in the bucket and named restapi1.

Select GET for **Action Type**. In URL Parameters, put id for key and 1 for value.

Click Save and Run to activate this action.

rest_get_1

Step 2 Add Components​

Next, we can add an editable text component and a button component to the canvas.

We label editable text to be 'Name' and labeled the button as "Set value" as shown below

edit_layout

Step 3 Configure the component​

For the button component, we can configure it to set the value in editable text component to the data of the document we read from restapi.

  1. In the Edit event handler, select Control component in action, and select the editable text component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{restapi1.data[0]["name"]}}

edit_event_config

Step 4 Test​

Now that when you click the "Set value" button, the value should change to the text.

edit_test

+ + \ No newline at end of file diff --git a/elastic-search/index.html b/elastic-search/index.html index 1042d33a79..40ac4b84f6 100644 --- a/elastic-search/index.html +++ b/elastic-search/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Elastic Search

Elastic search is a distributed, RESTful search and analytics engine that is commonly used to index and search large volumes of data. In Illa, you can use the Elasticsearch data source to connect to Elasticsearch instances and perform queries and aggregations on your data.

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Elastic Search from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Elastic Search will display as shown.

ela_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Elastic Search from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Elastic Search database.

ela_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Elastic Search server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created an Elastic Search resource, we can add the action by selecting Elastic Search from action list and choosing the Create action button.

ela_resource_list

Now we have added the Elastic Search server as an action to our building page.

ela

Overview​

Method NameDescription
Action Typesearch, get a document, insert a document, update a document, delete a document
Transformertransforming data into the style you like using JavaScript

insert a document​

sending an HTTP PUT request to the Elasticsearch cluster with a JSON document that contains the data to be inserted.

Input

PropertiesRequiredDescription
Bodyoptionala JSON document that contains the data to be inserted
Indexoptionalname of the index where the document should be inserted

For example, to insert value1, value2, and value3 into field1, field2, and field3 into our Elastic search database, put the code snippet below into the **Body and insert2 for Index**.

{
    "field1": "value1",
    "field2": "value2",
    "field3": "value3"
}

Output

Success message of whether the document is inserted successfully and information of the inserted document.

ela_insert_data

Use {{insert.data}} to get the message.

ela_insert_code

update a document​

sending an HTTP POST or PUT request to the Elasticsearch cluster with the ID of the document that should be updated, and a JSON document that specifies the changes to be made.

Input

PropertiesRequiredDescription
BodyoptionalThe new value to be assigned to the field.
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to update value1, value2, and value3 for field1, field2, and field3 into our Elastic search database, put the code snippet below into the Body, insert2 for Index , and copy-paste the document Id from the insert message.

{"doc":{
    "field1": "value11",
    "field2": "value2",
    "field3": "value3"
}}

Output

Success message of whether the document is updated successfully and information of the updated document.

ela_update_data

Use {{update.data}} to get the message.

ela_update_code

query and retrieve documents from an index

Input

PropertiesRequiredDescription
Queryoptionalspecify the search query that is used to match documents in an index
Indexoptionalspecify the name of the index or indices that should be searched

For example, to search the database to find documents with key-value pair "field1": "value1", put the code snippet below into the Query .

{
    "query": {
        "match": {
            "field1": "value1"
        }
    }
}

Output

Success message with the number of hits/documents it finds that matches the query and the info for every hit.

ela_search_data

Use {{search.data}} to get the message.

ela_search_code

get a document​

sending an HTTP GET request to the Elasticsearch cluster with the ID of the document that should be retrieved.

Input

PropertiesRequiredDescription
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to get the document info for the document we just updated, put insert2 for Index, and copy-paste the document Id from the updated message.

Output

returns the document with the specified ID, or a 404 Not Found error if the document does not exist.

ela_get_data

Use {{get.data}} to get the message.

ela_get_code

delete a document​

sending an HTTP DELETE request to the Elasticsearch cluster with the ID of the document that should be deleted.

Input

PropertiesRequiredDescription
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to delete document, put insert2 for Index, and copy-paste the document Id from the updated message.

Output

returns the document with the specified ID, or a 404 Not Found error if the document does not exist.

ela_delete_data

- - +
Skip to main content

Elastic Search

Elastic search is a distributed, RESTful search and analytics engine that is commonly used to index and search large volumes of data. In Illa, you can use the Elasticsearch data source to connect to Elasticsearch instances and perform queries and aggregations on your data.

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Elastic Search from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Elastic Search will display as shown.

ela_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Elastic Search from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Elastic Search database.

ela_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Elastic Search server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created an Elastic Search resource, we can add the action by selecting Elastic Search from action list and choosing the Create action button.

ela_resource_list

Now we have added the Elastic Search server as an action to our building page.

ela

Overview​

Method NameDescription
Action Typesearch, get a document, insert a document, update a document, delete a document
Transformertransforming data into the style you like using JavaScript

insert a document​

sending an HTTP PUT request to the Elasticsearch cluster with a JSON document that contains the data to be inserted.

Input

PropertiesRequiredDescription
Bodyoptionala JSON document that contains the data to be inserted
Indexoptionalname of the index where the document should be inserted

For example, to insert value1, value2, and value3 into field1, field2, and field3 into our Elastic search database, put the code snippet below into the **Body and insert2 for Index**.

{
    "field1": "value1",
    "field2": "value2",
    "field3": "value3"
}

Output

Success message of whether the document is inserted successfully and information of the inserted document.

ela_insert_data

Use {{insert.data}} to get the message.

ela_insert_code

update a document​

sending an HTTP POST or PUT request to the Elasticsearch cluster with the ID of the document that should be updated, and a JSON document that specifies the changes to be made.

Input

PropertiesRequiredDescription
BodyoptionalThe new value to be assigned to the field.
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to update value1, value2, and value3 for field1, field2, and field3 into our Elastic search database, put the code snippet below into the Body, insert2 for Index , and copy-paste the document Id from the insert message.

{"doc":{
    "field1": "value11",
    "field2": "value2",
    "field3": "value3"
}}

Output

Success message of whether the document is updated successfully and information of the updated document.

ela_update_data

Use {{update.data}} to get the message.

ela_update_code

query and retrieve documents from an index

Input

PropertiesRequiredDescription
Queryoptionalspecify the search query that is used to match documents in an index
Indexoptionalspecify the name of the index or indices that should be searched

For example, to search the database to find documents with key-value pair "field1": "value1", put the code snippet below into the Query .

{
    "query": {
        "match": {
            "field1": "value1"
        }
    }
}

Output

Success message with the number of hits/documents it finds that matches the query and the info for every hit.

ela_search_data

Use {{search.data}} to get the message.

ela_search_code

get a document​

sending an HTTP GET request to the Elasticsearch cluster with the ID of the document that should be retrieved.

Input

PropertiesRequiredDescription
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to get the document info for the document we just updated, put insert2 for Index, and copy-paste the document Id from the updated message.

Output

returns the document with the specified ID, or a 404 Not Found error if the document does not exist.

ela_get_data

Use {{get.data}} to get the message.

ela_get_code

delete a document​

sending an HTTP DELETE request to the Elasticsearch cluster with the ID of the document that should be deleted.

Input

PropertiesRequiredDescription
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to delete document, put insert2 for Index, and copy-paste the document Id from the updated message.

Output

returns the document with the specified ID, or a 404 Not Found error if the document does not exist.

ela_delete_data

+ + \ No newline at end of file diff --git a/event-calendar/index.html b/event-calendar/index.html index 9e6bd0ccd6..146076cb03 100644 --- a/event-calendar/index.html +++ b/event-calendar/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Event calendar

What is Event calendar?​

The Event Calendar component in ILLA Cloud is a powerful tool for organizing and displaying events in a visually appealing and user-friendly manner. It allows users to create, manage, and showcase events with ease, providing features such as date navigation, event categorization, and detailed event information. The Event Calendar component offers customizable layouts, intuitive event creation interfaces, and options for integrating with other systems, making it an essential tool for businesses and organizations to effectively manage and promote their events.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
Event iduniquely identifies each event in the calendar
Titletitle or name of the event
DescriptionThe description of the event
Startstart date and time of the event
Endend date and time of the event
Resource ididentifies the resource or entity associated with the event
Resource titletitle or name of the resource associated with the event
All daywhether the event is an all-day event or not
Draggablewhether the event can be dragged or moved within the calendar interface
ResizableWhether allow users to update the event time range and change the time span by dragging the border of an event to lengthen or shorten the time span

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
Event idA unique ID used to identify the event
TitleThe title of the event
DescriptionThe description of the event
StartStart time of the event
EndEnd time of the event
Resource idThe resource could be a person, a meeting room, etc. You can set a resource id and connect it to the event.
Resource titleThe resource name displayed in the resource view
All dayWhether it's an all-day event
DraggableWhether allow users to update the event time range by dragging to move the event
ResizableWhether allow users to update the event time range and change the time span by dragging the border of an event to lengthen or shorten the time span

Other properties​

PropertiesDescription
Default datethe default date value
Resource gridWhether to show a resource grid
Default viewThe default view when launch the app
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
Custome message when disabled draggingAfter dragging is disabled, the message will display when a user drags the event.
Custom message when disabled resizingAfter resizing is disabled, the message will display when a user resizes the event.
Show current timeSet whether to show the current time line
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Calendar Background ColorSet the background of the calendar
Calendar Text ColorSet color of the text
Event Background ColorSet the background of event card
Event Text ColorSet the text color of event card

Event handler​

EventDescription
ChangeWhen a user changes the event value
SelectWhen a user selects the component
Drag or click no event areaWhen a user drag or click an area with no event

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
borderColorspecifies the color of the border around the calendar component or the events displayed within it
dataSourcethe source of event data for the calendar component
defaultDatesets the initial date to be displayed when the calendar is loaded or rendered
defaultViewdetermines the default view or mode in which the calendar is displayed when initially loaded
displayNamethe name of this component (ie button1)
draggableenables or disables the ability to drag and move events within the calendar
eventsgenerated or triggered when certain actions or events occur within the number input component.
eventBackgroundspecifies the background color or styling for the event elements displayed in the calendar
eventConfigureModedetermines the configuration mode for events in the calendar
eventListthe list or collection of events to be displayed in a separate view or panel within the calendar component
eventTextColordetermines the color of the text or content within the event elements displayed in the calendar
hiddenwhether the event calendar component is hidden or not
manualOptionsmanual configuration or customization of various options or settings within the event calendar
mappedOptionsmapped or predefined options for the event calendar component
resizableenables or disables the ability to resize events in the calendar
resourceMapListdefines the mapping or association between events and resources within the calendar
selectEndTimedetermines the end time or date when selecting or creating a new event in the calendar
selectEventValuethe selected or currently active event value in the calendar
selectResourcedetermines the resource or entity associated with the selected or focused event in the calendar
selectStartTimedetermines the start time or date when selecting or creating a new event in the calendar
showCurrentTimedetermines whether the current time indicator or marker is displayed on the calendar
showResourcewhether the resource or entity associated with events is displayed or shown in the calendar
slotBackgroundspecifies the background color or styling for the time slots or cells in the calendar
titleColorthe color of the title or heading displayed for events in the calendar

Example: {{eventCalendar1.events}}

Use case​

Next, we will demonstrate how to add new events displayed on event calendar with a button.

Step 1 Add an action​

Let us create a table in Supabase called events. It has 9 columns: title, description, resource_id, resource_title, all_day, draggable, resizable, start_time, and end_time .

Then we can create a new action for Supabase from the action list, listing all the data with the code snippet below and called supabasedb1.

select * from events;

Change from Run action only when manually triggered to Run action automatically when inputs change in the upper right corner below Save button.

Click Save and Run to activate this action.

event_data

In order to add a new event, we also need another action. Choose the same Supabase resource from the action list called supabasedb2, and put the code snippet below.

INSERT INTO events (id, title, description, start_time, end_time, resource_id, resource_title, all_day, draggable, resizable)
VALUES ((SELECT MAX(id) + 1 FROM events), '{{input1.value}}', '{{input2.value}}', '{{dateTime1.value}}', '{{dateTime2.value}}', {{numberInput1.value}}, '{{input4.value}}', {{switch1.value}}, {{switch2.value}}, {{switch3.value}});

The input, numberInput, dateTime, and switch components are from the modal components. There are more detailed descriptions of those components below.

Step 2 Configure Actions​

For supabasedb2, we want to show a notification when the new event info is successfully added to the database.

In the Actions, click supabasedb2, in the General page, scroll down to Event handler.

  1. Click + New to add a new event handler.
  2. In the Edit event handler, select Show notification in action, title "Success" and description "Successfully add new event. Choose Success for type, put {{2000}} for the duration (2 seconds)

event_action_success

Step 2 Add Components​

Next, we can add an event calendar component, a button component, and a **modal** component to the canvas. Label the button component to Add new event.

event_layout

In the modal component, we change the text on the upper left corner to "New Event". We then add the Title and Description input components, Start time and End time date time components, Resource ID number input, and Resource Title input components, All day, Draggable, and Resizable switch components, and label them as needed.

event_modal_layout

Step 3 Configure the component​

For the **event calendar** component, we can map the data from supabasedb1 to display. We first choose mapped from options, then we put {{supabasedb1.data}} in the Data source and fill out the Mapped Option fields as shown below.

event_data_source

For the button component, we can configure it to open the modal when clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the openModal method

event_add_new_button

For the modal component, we can configure it to refresh the events display in the **event calendar** when the modal is closed.

  1. Click the modal component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Trigger action in action, and select the supabasedb component that you want to trigger for Action name. In our case, it's the supabasedb1.

event_modal

For the "Cancel" button component, we can configure it to close the modal if clicked

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

For the "Confirm" button, we want it to insert the new data filled out in the modal into the supabase events table and close modal.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Trigger action for action and choose supabasedb2 for action name

event_db2

  1. Click + New to add a new event handler.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

Step 4 Test​

Now that we can test it as shown below.

event_test

- - +
Skip to main content

Event calendar

What is Event calendar?​

The Event Calendar component in ILLA Cloud is a powerful tool for organizing and displaying events in a visually appealing and user-friendly manner. It allows users to create, manage, and showcase events with ease, providing features such as date navigation, event categorization, and detailed event information. The Event Calendar component offers customizable layouts, intuitive event creation interfaces, and options for integrating with other systems, making it an essential tool for businesses and organizations to effectively manage and promote their events.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
Event iduniquely identifies each event in the calendar
Titletitle or name of the event
DescriptionThe description of the event
Startstart date and time of the event
Endend date and time of the event
Resource ididentifies the resource or entity associated with the event
Resource titletitle or name of the resource associated with the event
All daywhether the event is an all-day event or not
Draggablewhether the event can be dragged or moved within the calendar interface
ResizableWhether allow users to update the event time range and change the time span by dragging the border of an event to lengthen or shorten the time span

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
Event idA unique ID used to identify the event
TitleThe title of the event
DescriptionThe description of the event
StartStart time of the event
EndEnd time of the event
Resource idThe resource could be a person, a meeting room, etc. You can set a resource id and connect it to the event.
Resource titleThe resource name displayed in the resource view
All dayWhether it's an all-day event
DraggableWhether allow users to update the event time range by dragging to move the event
ResizableWhether allow users to update the event time range and change the time span by dragging the border of an event to lengthen or shorten the time span

Other properties​

PropertiesDescription
Default datethe default date value
Resource gridWhether to show a resource grid
Default viewThe default view when launch the app
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
Custome message when disabled draggingAfter dragging is disabled, the message will display when a user drags the event.
Custom message when disabled resizingAfter resizing is disabled, the message will display when a user resizes the event.
Show current timeSet whether to show the current time line
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Calendar Background ColorSet the background of the calendar
Calendar Text ColorSet color of the text
Event Background ColorSet the background of event card
Event Text ColorSet the text color of event card

Event handler​

EventDescription
ChangeWhen a user changes the event value
SelectWhen a user selects the component
Drag or click no event areaWhen a user drag or click an area with no event

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
borderColorspecifies the color of the border around the calendar component or the events displayed within it
dataSourcethe source of event data for the calendar component
defaultDatesets the initial date to be displayed when the calendar is loaded or rendered
defaultViewdetermines the default view or mode in which the calendar is displayed when initially loaded
displayNamethe name of this component (ie button1)
draggableenables or disables the ability to drag and move events within the calendar
eventsgenerated or triggered when certain actions or events occur within the number input component.
eventBackgroundspecifies the background color or styling for the event elements displayed in the calendar
eventConfigureModedetermines the configuration mode for events in the calendar
eventListthe list or collection of events to be displayed in a separate view or panel within the calendar component
eventTextColordetermines the color of the text or content within the event elements displayed in the calendar
hiddenwhether the event calendar component is hidden or not
manualOptionsmanual configuration or customization of various options or settings within the event calendar
mappedOptionsmapped or predefined options for the event calendar component
resizableenables or disables the ability to resize events in the calendar
resourceMapListdefines the mapping or association between events and resources within the calendar
selectEndTimedetermines the end time or date when selecting or creating a new event in the calendar
selectEventValuethe selected or currently active event value in the calendar
selectResourcedetermines the resource or entity associated with the selected or focused event in the calendar
selectStartTimedetermines the start time or date when selecting or creating a new event in the calendar
showCurrentTimedetermines whether the current time indicator or marker is displayed on the calendar
showResourcewhether the resource or entity associated with events is displayed or shown in the calendar
slotBackgroundspecifies the background color or styling for the time slots or cells in the calendar
titleColorthe color of the title or heading displayed for events in the calendar

Example: {{eventCalendar1.events}}

Use case​

Next, we will demonstrate how to add new events displayed on event calendar with a button.

Step 1 Add an action​

Let us create a table in Supabase called events. It has 9 columns: title, description, resource_id, resource_title, all_day, draggable, resizable, start_time, and end_time .

Then we can create a new action for Supabase from the action list, listing all the data with the code snippet below and called supabasedb1.

select * from events;

Change from Run action only when manually triggered to Run action automatically when inputs change in the upper right corner below Save button.

Click Save and Run to activate this action.

event_data

In order to add a new event, we also need another action. Choose the same Supabase resource from the action list called supabasedb2, and put the code snippet below.

INSERT INTO events (id, title, description, start_time, end_time, resource_id, resource_title, all_day, draggable, resizable)
VALUES ((SELECT MAX(id) + 1 FROM events), '{{input1.value}}', '{{input2.value}}', '{{dateTime1.value}}', '{{dateTime2.value}}', {{numberInput1.value}}, '{{input4.value}}', {{switch1.value}}, {{switch2.value}}, {{switch3.value}});

The input, numberInput, dateTime, and switch components are from the modal components. There are more detailed descriptions of those components below.

Step 2 Configure Actions​

For supabasedb2, we want to show a notification when the new event info is successfully added to the database.

In the Actions, click supabasedb2, in the General page, scroll down to Event handler.

  1. Click + New to add a new event handler.
  2. In the Edit event handler, select Show notification in action, title "Success" and description "Successfully add new event. Choose Success for type, put {{2000}} for the duration (2 seconds)

event_action_success

Step 2 Add Components​

Next, we can add an event calendar component, a button component, and a **modal** component to the canvas. Label the button component to Add new event.

event_layout

In the modal component, we change the text on the upper left corner to "New Event". We then add the Title and Description input components, Start time and End time date time components, Resource ID number input, and Resource Title input components, All day, Draggable, and Resizable switch components, and label them as needed.

event_modal_layout

Step 3 Configure the component​

For the **event calendar** component, we can map the data from supabasedb1 to display. We first choose mapped from options, then we put {{supabasedb1.data}} in the Data source and fill out the Mapped Option fields as shown below.

event_data_source

For the button component, we can configure it to open the modal when clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the openModal method

event_add_new_button

For the modal component, we can configure it to refresh the events display in the **event calendar** when the modal is closed.

  1. Click the modal component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Trigger action in action, and select the supabasedb component that you want to trigger for Action name. In our case, it's the supabasedb1.

event_modal

For the "Cancel" button component, we can configure it to close the modal if clicked

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

For the "Confirm" button, we want it to insert the new data filled out in the modal into the supabase events table and close modal.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Trigger action for action and choose supabasedb2 for action name

event_db2

  1. Click + New to add a new event handler.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

Step 4 Test​

Now that we can test it as shown below.

event_test

+ + \ No newline at end of file diff --git a/event-handler/index.html b/event-handler/index.html index e6c65b962c..e1ceec16b8 100644 --- a/event-handler/index.html +++ b/event-handler/index.html @@ -10,12 +10,12 @@ - - + +
-
Skip to main content

Event handler

Add an event handler to the component to trigger an event when the component's state changes.

How-to​

Configuration options​

Event​

Used to set how to trigger the action. For example, if we want to trigger restapi1 when the data grid(table) component is refreshed, we can set the event to refresh. If we want to trigger restapi2 when the sort of data grid(table) component is changed, we can set the event to sort change. If we want to trigger restapi3 when the button is clicked, we can set the event to click.

Action​

Trigger action​

Used to trigger an action created in this app

parameterrequired or notdescription
Action namerequiredSelect an action created in this app

Control component​

parameterrequired or notdescription
ComponentrequiredSelect a component added to the current page
MethodrequiredUsed to set what the control component does. Different methods require different parameters to be configured. Detailed explanations are provided below.
setValue​

Used to set the value.

Parameter​

Value: The value could be a string or number or object or boolean or array which depends on the component type.

Supported components​
ComponentParameter typeExample
Input, Editable Text, Text Area, Divider, Select, Radio Group, Radio Button, Radio Buttonm, Date, Date Time, Steps, Text, Bar Progress, Circle Progressstring
Hello world

| JSON Editor +

Event handler

Add an event handler to the component to trigger an event when the component's state changes.

How-to​

Configuration options​

Event​

Used to set how to trigger the action. For example, if we want to trigger restapi1 when the data grid(table) component is refreshed, we can set the event to refresh. If we want to trigger restapi2 when the sort of data grid(table) component is changed, we can set the event to sort change. If we want to trigger restapi3 when the button is clicked, we can set the event to click.

Action​

Trigger action​

Used to trigger an action created in this app

parameterrequired or notdescription
Action namerequiredSelect an action created in this app

Control component​

parameterrequired or notdescription
ComponentrequiredSelect a component added to the current page
MethodrequiredUsed to set what the control component does. Different methods require different parameters to be configured. Detailed explanations are provided below.
setValue​

Used to set the value.

Parameter​

Value: The value could be a string or number or object or boolean or array which depends on the component type.

Supported components​
ComponentParameter typeExample
Input, Editable Text, Text Area, Divider, Select, Radio Group, Radio Button, Radio Buttonm, Date, Date Time, Steps, Text, Bar Progress, Circle Progressstring
Hello world

| JSON Editor | string | { "firstName": "Chuck", "lastName": "Norris", "age": 80, "bio": "Roundhouse kicking asses since 1940", "password": "noneed", "telephone": "1-800-KICKASS" } | | Timeline | string, Separate the values of different nodes via comma (,) | The first milestone,The second milestone | @@ -23,7 +23,7 @@ | Switch | boolean | {{false}} | | JSON Schema Form, Form | object | {{ { "firstName": "Chuck", "lastName": "Norris", "age": 80, "bio": "Roundhouse kicking asses since 1940", "password": "noneed", "telephone": "1-800-KICKASS" } }} | | Checkbox Group, Cascader | array | {{["media_source_2","campaign_2-1"]}} |

clearValue​

Used to clear the value.

Parameter​

No parameter

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, JSON Editor, JSON Schema Form, Switch, Select, Multiselect, Checkbox Group, Cascader, Radio Group, Radio Button, Date, Date Range, Data Time, Date Time, Text, Rate, Bar Progress, Circle Progress, Timeline, Divider

focus​

Used to focus on the component

Parameter​

No parameter

Supported components​

Input, Number Input, Editable Text, Text Area, JSON Editor, Rich text editor, Radio Group,

validate​

When you have set validation conditions for a component, such as email format, URL format, or required field, you can use the validate function to determine if it meets the requirements. If it does not meet the requirements, a validation message will be displayed.

Parameter​

No parameter

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, Select, Multiselect, Checkbox Group, Radio Group, Radio Button, Date, Date Range, Date Time, Form, Rate

clearValidation​

Used to clear the validation message.

Parameter​

No parameter

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, Select, Multiselect, Checkbox Group, Radio Button, Date, Date Range, Date Time, Rate

setSelectedValue​

Used to set the selected value of Multiselect. The parameter should be an array.

Parameter​

Value: an array of strings used to set the selected options.

Supported components​

Multiselect

Example​
{{["Option 1", "Option 3"]}}
submit​

Submit form data. When the submit method is triggered, we will first validate the form data. If there are validation errors, the form submission will be prevented, and the corresponding error messages will be displayed. Only after successful validation does the submission proceed.

Parameter​

No parameter

Supported components​

JSON Schema Form, Form

toggle​

Used to switch the value from true to false or from false to true.

Parameter​

No parameter

Supported components​

Switch

setStartOfRange​

Used to set the default start value of the range slider

Parameter​

Start value: a number used to set the start value.

Supported components​

Range Slider

Example​
{{10}}
setEndOfRange​

Used to set the default end value of the range slider

Parameter​

End value: a number used to set the end value.

Supported components​

Range Slider

Example​
{{10}}
setStartValue​

Used to set the default start value

Parameter​

Start date/time: a string used to set the start time/date.

Supported components​

Date Range, Time Range

Example​
2023-09-09
setEndValue​

Used to set the default end value

Parameter​

End date/time: a string used to set the end time/date.

Supported components​

Date Range, Time Range

Example​
2023-10-09
setValueInArray​

Used to set the switches whose value is true

Parameter​

Value: an array of strings used to set the options whose value is true .

Supported components​

Switch Group

Example​
{{["Option 1", "Option 3"]}}
setCurrentViewKey​

Use the key which is a string value of the view to set the shown view.

Parameter​

Key: a string used to set which view to display. The key is configured in a container

Supported components​

Container

Example​
View 1
setCurrentViewIndex​

Use the index which is a number value starting from 0 of the view to set the shown view.

Parameter​

Index: a number value. Use the index of the view to set which view to display. The index starts from 0.

Supported components​

Container

Example​
{{1}}
showNextView​

Used to show the next view. The parameter is a boolean value that determines whether to loop from the end back to the start.

Parameter​

Loop back to start: a boolean value ( use a switch to set ) used to set whether to loop back to start.

Supported components​

Container

showNextVisibleView​

Used to show the next visible view. Unlike the behavior of the showNextView(boolean) function, this function offers improved view switching functionality by skipping any hidden views during the transition. The parameter is a boolean value that determines whether to loop from the end back to the start.

Parameter​

Loop back to start: a boolean value ( use a switch to set ) used to set whether to loop back to start.

Supported components​

Container

showPreviousView​

Used to show the previous view. The parameter is a boolean value that determines whether to loop from the start back to the end.

Parameter​

Loop start to back: a boolean value ( use a switch to set ) used to set whether to loop start to back.

Supported components​

Container

showPreviousVisibleView​

Used to show the previous visible view. Unlike the behavior of the showPreviousView function, this function offers improved view switching functionality by skipping any hidden views during the transition. The parameter is a boolean value that determines whether to loop from the start back to the end.

Parameter​

Loop start to back: a boolean value ( use a switch to set ) used to set whether to loop start to back.

Supported components​

Container

reset​

Used to reset the value to default value.

Parameter​

No parameter

Supported components​

Form

resetValue​

Used to reset the value to default value.

Parameter​

No parameter

Supported components​

Steps

openModal​

Used to open a modal

Parameter​

No parameter

Supported components​

Modal

closeModal​

Used to close a modal

Parameter​

No parameter

Supported components​

Modal

setImageUrl​

Used to set the Image source URL. It can be a Base64 or a URL pointing to an image on the web.

Parameter​

Value: a string value used to set the image source. It could be URL or base64.

Supported components​

Image

Example​
https://cloud-api.illacloud.com/drive/f/83095b77-1180-487e-86db-ff117e6083e5
data:image/png;base64,iVBORw0KGgoAA...II
clearReplyMessage​

Used to clear the quoted reply message above the input box.

Parameter​

No parameter

Supported components​

Chat

setPrimaryValue​

Used to set the primary value of statistics.

Parameter​

Primary value: a number value used to set the primary value of statistics.

Supported components​

Statistics

Example​
{{10000}}
resetPrimaryValue​

Used to reset the primary value to the default primary value of statistics.

Parameter​

No parameter

Supported components​

Statistics

setFileUrl​

Used to set the file URL. It can be a Base64 or a URL pointing to a PDF on the web.

Parameter​

PDF source: a string value used to set the PDF source. It could be URL or base64.

Supported components​

PDF

Example​
https://upload.wikimedia.org/wikipedia/commons/e/ee/Guideline_No._GD-Ed-2214_Marman_Clamp_Systems_Design_Guidelines.pdf
play​

Used to play video or audio.

Parameter​

No parameter

Supported components​

Video, Audio

pause​

Used to pause video or audio.

Parameter​

No parameter

Supported components​

Video, Audio

showControls​

Used to set whether to show the controls.

Parameter​

Show controls: a boolean value used to set whether to show the controls.

Supported components​

Video

setVideoUrl​

Used to set the video's URL. It can be a Base64 or a video URL on media websites.

Parameter​

Video source: a string value used to set the video source. It could be URL or base64.

Supported components​

Video

Example​
video1.setVideoUrl("https://youtu.be/8sUovZlBh_M")
setVolume(number)​

Used to set the volume. The parameter is a number value between 0 to 1.

Supported components​

Video, Audio

Example​

video1.setVolume(0.5)

setSpeed​

Used to set the speed.

Parameter​

Speed: a number value between 0.25 to 2

Supported components​

Video, Audio

Example​
{{0.5}}
setLoop​

Used to set whether to loop the playback.

Parameter​

Loop: a boolean value used to set loop or not

Supported components​

Video, Audio

Example​
{{true}}
seekTo​

Used to seek to a specific time position.

Parameter​

Time(s): a number value, measured in seconds (s). For example, to seek to the time position 5:35, you would use the value 335.

Supported components​

Video, Audio

Example​
{{335}}
mute​

Used to set mute or not.

Parameter​

Mute: a boolean value

Supported components​

Video, Audio

setAudioUrl​

Used to set the audio's URL. It can be a Base64 or a video URL on media websites.

Parameter​

Audio source: a string value used to set the audio source. It could be URL or base64.

Supported components​

Audio

Example​
https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3
slickNext​

Used to switch to the next image.

Parameter​

No parameter

Supported components​

Carousel

slickPrevious​

Used to switch to the previous image.

Parameter​

No parameter

Supported components​

Carousel

setSrc​

Used to set the source URL of IFrame.

Parameter​

Value: a string value used to set the URL.

Supported components​

IFrame

Example​
https://www.nasa.gov/
setMarkers​

Used to set the markers on the map.

Paramater​

Markers: an array of objects. The latitude and longitude fields in each object should be same as the fields set in the right-hand panel.

Supported components​

Map

Example​
{{[
{
    "lat":57.14009563040699,
    "lng":-114.6018657894011
 },{
     "lat":55.40432513713809,
     "lng":-112.98252263795787
 },{
     "lat":57.841288754888545,
     "lng":-103.3518657894011
 }
 ]}}
resetMarkers​

Used to reset the markers to the default markers.

Parameter​

No parameter

Supported components​

Map

Run script​

By writing a script, you can trigger multiple events in sequence. Learn more

Go to URL​

Parameter​

URL: String value. The URL to be opened

New tab: Boolean value. Used to set whether to open the URL on a new tab.

Show notification​

Parameter​

Title: String value. The title of the notification

Description: String value. The description of the notification

Type: String value. Set the type via the dropdown options: Success, Error, Warning, Info

Duration(ms): Number value. The duration for displaying a notification.

Copy to clipboard​

Parameter​

Value: String value. The string to be copied.

Set router​

When there are multiple pages in the application, this function can be used to switch between pages.

Parameter​

Page: Use to set redirect to which page.

Sub-page: Use to set redirect to which sub-page of the page selected in page parameter.

Save to ILLA Drive​

Parameter​

File name with extension: String. Name with extension of the file after uploading to ILLA Drive.

File data: String. Base64 or raw file data, such as JSON, CSV, plain text, etc.

File Type: String. One of the following values: Auto, Plain text, JPEG, PNG, SVG, JSON, CSV, TSV, Excel(.xlsx). When using "Auto," we will attempt to determine the file type based on either the file extension or the file data.

Folder: String. Destination folder for file upload. Leave it blank to upload to the root folder.

Allow anonymous: Bolean. Used to set whether anonymous user access is allowed. If you plan to set your application as public, anonymous access must be enabled. For the security of your data, files or folders accessible anonymously must be placed in the anonymous folder.

Replace: Boolean. Used to set when there are files with the same name in the same directory, replace the existing file with a new file or automatically rename the new file.

Download from ILLA Drive​

Parameter​

Download info: an array of objects including tinyURL and fileID. You can use the component Drive file picker to pick files from ILLA Drive and get the Download info via drivePicker1.value

Save as Zip: Boolean. Used to set whether to download the files as a Zip.

Download​

Used to export data to your device.

Parameter​

File type: One of the following values: Auto, Plain text, JPEG, PNG, SVG, JSON, CSV, TSV, Excel(.xlsx). When using "Auto," we will attempt to determine the file type based on either the file extension or the file data.

File name: a name with extension.

Data: data of the file.

Set global data​

Set global data value​

Used to set the value of gobalData

Parameter​

key: the displayName of globalData.

value: the value to set

Set global data in​

When the global data is an array or object, use setGlobalDataIn to modify the value corresponding to a specific index in an array or to modify the value corresponding to a specific key in an object.

Parameter​

key: the displayName of globalData.

path: the index of the value you intend to update in the array or the key in the object. For example, to set the second value in array, the path is 1 (the index). To set the value of the attribute named key1, the path is key1.

value: the value to set

Set local storage​

clear​

Used to clear the local storage

Parameter​

No parameter

setValue​
Parameter​

key: the displayName of local storage.

value: the value of the key.

Only run when​

A boolean value used to set when the event handler could be triggered. For example, when the input1 is null, the event handler couldn't be triggered: {{input1.value!==""&&input1.value!==undefined}}

- - + + \ No newline at end of file diff --git a/firebase/index.html b/firebase/index.html index 8f75adab9f..598f8ebe4f 100644 --- a/firebase/index.html +++ b/firebase/index.html @@ -10,13 +10,13 @@ - - + +
-

Firebase

Firebase is a comprehensive platform provided by Google that offers a wide range of tools and services for developing and managing web and mobile applications. It provides developers with a scalable and secure backend infrastructure, along with a suite of pre-built features and functionalities to accelerate the development process. With the integration of Firebase on ILLA Cloud, developers can enhance their applications with reliable and scalable storage solutions, enabling them to focus on building innovative and data-driven experiences.

Create Firebase API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Firebase from the API list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Firebase will display as shown.

firebase_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Firebase from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Firebase API.

firebase_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Firebase Database URLoptionalthe endpoint or URL where the Firebase Realtime Database is hosted
Firestore Project IDoptionala unique identifier assigned to each Firebase project that uses the Firestore database service
Private Keyrequireda security credential used for authenticating and accessing Firebase services programmatically

Create Actions​

We have created a Firebase resource, we can add the action by selecting Firebase from the action list and choosing the Create action button.

firebase_resource_list

Now we have added the Firebase server as an action to our building page.

firebase

Configure Firebase​

Overview​

Service TypeFirebase AuthFirestoreRealtime Database
Action TypeGet user by UIDQuery Firebase,Query Database
Get user by emailInsert DocumentSet data
Get user by phone numberUpdate DocumentUpdate data
Create a userGet document by IDAppend data to a list
Update a userDelete a Document
Delete a userGet Collections
List userQuery Collection Group
Transformertransforming data into the style you like using JavaScript

Get user by UID​

retrieve user information by specifying the user's unique identifier (UID). It enables you to fetch user details such as display name, email, phone number, and custom attributes associated with the user.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.

Get user by email​

retrieve user information by specifying the user's email address. It allows you to fetch user details similar to the UID-based method, but using the email as the identifier.

Input

PropertiesRequiredDescription
emailrequiredthe registered email associated with the user you want to retrieve

Get user by phone number​

retrieve user information by specifying the user's phone number. It allows you to fetch user details similar to the UID-based method, but using the phone number as the identifier.

Input

PropertiesRequiredDescription
phone numberrequiredthe registered phone number associated with the user you want to retrieve

Create a user​

create a new user in the Firebase authentication system. You can provide the user's email, password, display name, and other relevant information during the user creation process.

Input

PropertiesRequiredDescription
User objectrequiredan object that contains user's information

Update a user​

update the attributes and properties of an existing user. You can modify the user's display name, email, phone number, password, and other custom attributes associated with the user.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.
User objectrequiredan object that contains user's information

Delete a user​

delete a user from the Firebase authentication system. This action permanently removes the user and their associated data from the system.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.

List users​

retrieve a list of all users registered in the Firebase authentication system. It provides paginated results, enabling you to iterate through the user list and retrieve specific user details.

Input

PropertiesRequiredDescription
Length of listoptionalnumber of users you want to retrieve in a single request
Next page tokenoptionalpagination when there are more users than can be returned in a single response

Query Firebase​

perform queries on the database using various conditions and filters

Input

PropertiesRequiredDescription
Collectionrequiredcan use dropdown to select or use a raw id
whererequiredadd conditions to your query
limitoptionallimit the number of documents returned by the query.
Order byoptionalspecify the field by which you want to order the query results
Ordering directionoptionalthe direction of the ordering in the query results

Insert Document​

create a new document in a collection or subcollection within Firestore. You provide the data to be stored in the document, and Firebase assigns a unique identifier (document ID) to it.

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to insert the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being inserted
valuerequiredthe actual data that you want to insert into the document

Update Document​

update an existing document in Firestore. You specify the document ID and provide the updated data, which will overwrite the existing document's fields.

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to update the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being updated
valuerequiredthe actual data that you want to update into the document

Get Document by ID​

retrieves a specific document from Firestore based on its unique document ID

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to retrieve the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being retrieved

Delete a Document​

remove a document from Firestore based on its document ID

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to retrieve the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being retrieved

Get Collections​

retrieve all the collections within a Firestore database. It returns a list of collection names available in the database.

Input

PropertiesRequiredDescription
Parent Document IDoptionalspecify a custom identifier for the document being retrieved

Query Collection Group​

query documents across multiple collections with the same name. You can perform complex queries and retrieve matching documents from different collections that share the same name.

Input

PropertiesRequiredDescription
Collectionrequiredcan use dropdown to select or use a raw id
whererequiredadd conditions to your query
limitoptionallimit the number of documents returned by the query.
Order byoptionalspecify the field by which you want to order the query results
Ordering directionoptionalthe direction of the ordering in the query results

Query database​

query the Realtime Database to retrieve data that meets specific criteria. You can define filters, sorting, and other conditions to retrieve a subset of data from a particular location in the database.

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.

Set data​

write or replace data at a specific location in the Realtime Database

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.
Object to setrequiredobject contains the data that we want to write to the database, including the name, age, and email fields.

Update data​

modify existing data at a specific location in the Realtime Database

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.
User objectrequiredobject contains the data that we want to update to the database, including the name, age, and email fields.

Append data to a list​

use the "Push" method. It generates a unique key and appends the data as a new element in the list.

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.
Object to setrequiredobject contains the data that we want to update to the database, including the name, age, and email fields.
- - +

Firebase

Firebase is a comprehensive platform provided by Google that offers a wide range of tools and services for developing and managing web and mobile applications. It provides developers with a scalable and secure backend infrastructure, along with a suite of pre-built features and functionalities to accelerate the development process. With the integration of Firebase on ILLA Cloud, developers can enhance their applications with reliable and scalable storage solutions, enabling them to focus on building innovative and data-driven experiences.

Create Firebase API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Firebase from the API list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Firebase will display as shown.

firebase_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Firebase from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Firebase API.

firebase_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Firebase Database URLoptionalthe endpoint or URL where the Firebase Realtime Database is hosted
Firestore Project IDoptionala unique identifier assigned to each Firebase project that uses the Firestore database service
Private Keyrequireda security credential used for authenticating and accessing Firebase services programmatically

Create Actions​

We have created a Firebase resource, we can add the action by selecting Firebase from the action list and choosing the Create action button.

firebase_resource_list

Now we have added the Firebase server as an action to our building page.

firebase

Configure Firebase​

Overview​

Service TypeFirebase AuthFirestoreRealtime Database
Action TypeGet user by UIDQuery Firebase,Query Database
Get user by emailInsert DocumentSet data
Get user by phone numberUpdate DocumentUpdate data
Create a userGet document by IDAppend data to a list
Update a userDelete a Document
Delete a userGet Collections
List userQuery Collection Group
Transformertransforming data into the style you like using JavaScript

Get user by UID​

retrieve user information by specifying the user's unique identifier (UID). It enables you to fetch user details such as display name, email, phone number, and custom attributes associated with the user.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.

Get user by email​

retrieve user information by specifying the user's email address. It allows you to fetch user details similar to the UID-based method, but using the email as the identifier.

Input

PropertiesRequiredDescription
emailrequiredthe registered email associated with the user you want to retrieve

Get user by phone number​

retrieve user information by specifying the user's phone number. It allows you to fetch user details similar to the UID-based method, but using the phone number as the identifier.

Input

PropertiesRequiredDescription
phone numberrequiredthe registered phone number associated with the user you want to retrieve

Create a user​

create a new user in the Firebase authentication system. You can provide the user's email, password, display name, and other relevant information during the user creation process.

Input

PropertiesRequiredDescription
User objectrequiredan object that contains user's information

Update a user​

update the attributes and properties of an existing user. You can modify the user's display name, email, phone number, password, and other custom attributes associated with the user.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.
User objectrequiredan object that contains user's information

Delete a user​

delete a user from the Firebase authentication system. This action permanently removes the user and their associated data from the system.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.

List users​

retrieve a list of all users registered in the Firebase authentication system. It provides paginated results, enabling you to iterate through the user list and retrieve specific user details.

Input

PropertiesRequiredDescription
Length of listoptionalnumber of users you want to retrieve in a single request
Next page tokenoptionalpagination when there are more users than can be returned in a single response

Query Firebase​

perform queries on the database using various conditions and filters

Input

PropertiesRequiredDescription
Collectionrequiredcan use dropdown to select or use a raw id
whererequiredadd conditions to your query
limitoptionallimit the number of documents returned by the query.
Order byoptionalspecify the field by which you want to order the query results
Ordering directionoptionalthe direction of the ordering in the query results

Insert Document​

create a new document in a collection or subcollection within Firestore. You provide the data to be stored in the document, and Firebase assigns a unique identifier (document ID) to it.

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to insert the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being inserted
valuerequiredthe actual data that you want to insert into the document

Update Document​

update an existing document in Firestore. You specify the document ID and provide the updated data, which will overwrite the existing document's fields.

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to update the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being updated
valuerequiredthe actual data that you want to update into the document

Get Document by ID​

retrieves a specific document from Firestore based on its unique document ID

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to retrieve the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being retrieved

Delete a Document​

remove a document from Firestore based on its document ID

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to retrieve the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being retrieved

Get Collections​

retrieve all the collections within a Firestore database. It returns a list of collection names available in the database.

Input

PropertiesRequiredDescription
Parent Document IDoptionalspecify a custom identifier for the document being retrieved

Query Collection Group​

query documents across multiple collections with the same name. You can perform complex queries and retrieve matching documents from different collections that share the same name.

Input

PropertiesRequiredDescription
Collectionrequiredcan use dropdown to select or use a raw id
whererequiredadd conditions to your query
limitoptionallimit the number of documents returned by the query.
Order byoptionalspecify the field by which you want to order the query results
Ordering directionoptionalthe direction of the ordering in the query results

Query database​

query the Realtime Database to retrieve data that meets specific criteria. You can define filters, sorting, and other conditions to retrieve a subset of data from a particular location in the database.

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.

Set data​

write or replace data at a specific location in the Realtime Database

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.
Object to setrequiredobject contains the data that we want to write to the database, including the name, age, and email fields.

Update data​

modify existing data at a specific location in the Realtime Database

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.
User objectrequiredobject contains the data that we want to update to the database, including the name, age, and email fields.

Append data to a list​

use the "Push" method. It generates a unique key and appends the data as a new element in the list.

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.
Object to setrequiredobject contains the data that we want to update to the database, including the name, age, and email fields.
+ + \ No newline at end of file diff --git a/form/index.html b/form/index.html index 2b76f2a4ed..01e856594e 100644 --- a/form/index.html +++ b/form/index.html @@ -10,13 +10,13 @@ - - + +
-

Form

What is Form?​

The form component is a visual element that represents the progress or completion of a task or process. It displays a horizontal bar that fills up or shrinks based on the specified progress value.

Properties​

PropertiesDescription
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions.
Disablednon-interactive and cannot be modified or triggered by the user.
Disable submitdisabling the form submission functionality.
Validate inputs on submitthe form inputs should be validated for correctness or completeness when the form is submitted.
Reset after successful submitautomatically resets its values and state to their initial or default values after a successful submission
Tooltipa small pop-up or informational message that appears when the user hovers over or interacts with a specific element, such as a form component.
Show headerwhether a form component should display a header or title section
Show footerwhether a form component should display a footer section
Hiddenhides the form component from the user's view
Border Colorcolor of the border that surrounds a form component
Border Radiuscurvature of the corners of a form component's border
Border Widththickness or width of the border surrounding a form component
Backgrounddefines the color or image that fills the content area of a form component
Shadowvisual effect of adding a subtle, offset "shadow" to a form component, making it appear slightly raised or floating above the background

Method​

You can use other components to control the component. We support the following two methods:

  • submit

To submit the information filled in the form field

  • reset

reset all input fields in the form component

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • validate

To verify that the input information is legal

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
backgroundColorspecifies the background color of a form component
borderColordefines the color of the border surrounding a form component
borderWidthdetermines the thickness or width of the border surrounding a form component
disabledwhether a form component is disabled or not
displayNamerepresents the name or label assigned to a form component
footerHeightspecifies the height or size of the footer section of a form component
formDataholds the data or values entered by the user in a form component
headerHeightdetermines the height or size of the header section of a form component
invalidwhether the input or value of a form component is considered invalid or not.
radiusdefines the border radius or curvature of the corners of a form component
resetAfterSuccessfulindicates that a form component should automatically reset its values and state to their initial or default values after a successful submission
shadowcontrols the presence and appearance of a shadow effect on a form component
showFooterdetermines whether the footer section of a form component should be displayed or not
showHeadervisibility of the header section of a form component
tooltipTextholds the text or content of a tooltip associated with a form component
validateInputOnSubmitspecifies that the input values of a form component should be validated for correctness or completeness when the form is submitted

Example: {{form1.disabled}}

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Add Components​

Add a form component with the default text "Form" and a "Submit" button to canvas.

Add an input component, a number input component, and a bar progress component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the bar progress component to be "Progress".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

bar_layout

Step 2 Configure the component​

For the input and number input components, we can configure them to set the value in bar progress component to reflect the progress of completion.

  1. Click the input and number input component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the bar progress component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as
{
  {
    input1.value && numberInput1.value
      ? "100"
      : input1.value || numberInput1.value
      ? "50"
      : "0";
  }
}

bar_input_num_config

Note: need to set the event handler as described above to BOTH input and number input components.

For the button component, we can configure it to submit the form if the form is completed (ie bar progress 100%)

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method and put {{barProgress1.value == 100}} in Only run when

bar_button_submit_config

Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Error!" and description "Please fill out the form before submitting". Choose Error for type, put {{2000}} for the duration (2 seconds), and put {{barProgress1.value<100}} for Only run when.

bar_button_show_config

Step 4 Test​

bar_test

- - +

Form

What is Form?​

The form component is a visual element that represents the progress or completion of a task or process. It displays a horizontal bar that fills up or shrinks based on the specified progress value.

Properties​

PropertiesDescription
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions.
Disablednon-interactive and cannot be modified or triggered by the user.
Disable submitdisabling the form submission functionality.
Validate inputs on submitthe form inputs should be validated for correctness or completeness when the form is submitted.
Reset after successful submitautomatically resets its values and state to their initial or default values after a successful submission
Tooltipa small pop-up or informational message that appears when the user hovers over or interacts with a specific element, such as a form component.
Show headerwhether a form component should display a header or title section
Show footerwhether a form component should display a footer section
Hiddenhides the form component from the user's view
Border Colorcolor of the border that surrounds a form component
Border Radiuscurvature of the corners of a form component's border
Border Widththickness or width of the border surrounding a form component
Backgrounddefines the color or image that fills the content area of a form component
Shadowvisual effect of adding a subtle, offset "shadow" to a form component, making it appear slightly raised or floating above the background

Method​

You can use other components to control the component. We support the following two methods:

  • submit

To submit the information filled in the form field

  • reset

reset all input fields in the form component

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • validate

To verify that the input information is legal

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
backgroundColorspecifies the background color of a form component
borderColordefines the color of the border surrounding a form component
borderWidthdetermines the thickness or width of the border surrounding a form component
disabledwhether a form component is disabled or not
displayNamerepresents the name or label assigned to a form component
footerHeightspecifies the height or size of the footer section of a form component
formDataholds the data or values entered by the user in a form component
headerHeightdetermines the height or size of the header section of a form component
invalidwhether the input or value of a form component is considered invalid or not.
radiusdefines the border radius or curvature of the corners of a form component
resetAfterSuccessfulindicates that a form component should automatically reset its values and state to their initial or default values after a successful submission
shadowcontrols the presence and appearance of a shadow effect on a form component
showFooterdetermines whether the footer section of a form component should be displayed or not
showHeadervisibility of the header section of a form component
tooltipTextholds the text or content of a tooltip associated with a form component
validateInputOnSubmitspecifies that the input values of a form component should be validated for correctness or completeness when the form is submitted

Example: {{form1.disabled}}

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Add Components​

Add a form component with the default text "Form" and a "Submit" button to canvas.

Add an input component, a number input component, and a bar progress component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the bar progress component to be "Progress".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

bar_layout

Step 2 Configure the component​

For the input and number input components, we can configure them to set the value in bar progress component to reflect the progress of completion.

  1. Click the input and number input component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the bar progress component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as
{
  {
    input1.value && numberInput1.value
      ? "100"
      : input1.value || numberInput1.value
      ? "50"
      : "0";
  }
}

bar_input_num_config

Note: need to set the event handler as described above to BOTH input and number input components.

For the button component, we can configure it to submit the form if the form is completed (ie bar progress 100%)

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method and put {{barProgress1.value == 100}} in Only run when

bar_button_submit_config

Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Error!" and description "Please fill out the form before submitting". Choose Error for type, put {{2000}} for the duration (2 seconds), and put {{barProgress1.value<100}} for Only run when.

bar_button_show_config

Step 4 Test​

bar_test

+ + \ No newline at end of file diff --git a/grid-list/index.html b/grid-list/index.html index 550eb1d9a3..d867dae448 100644 --- a/grid-list/index.html +++ b/grid-list/index.html @@ -10,13 +10,13 @@ - - + +
-

Data Grid

What is Data Grid​

In some cases, you might want to display your items as a grid rather than a normal list of items that come one after the next. For this task, use the Grid List component.

The editing method of the Grid List component is the same as that of the container. You can drag and drop components into the Grid List to customize the display format of the items.

How-to​

Configure the appearance of the Grid list​

Connect to data source​

Data​

Property nameTypeDescriptionUse example
selectedItemObjectYou can select an item in the Grid List and retrieve its data using theselectedItemproperty. When you select the nth item, the value of theselectedItemproperty will be the nth item in the data source array that you have set for the Grid List. For example, if your data source (referred to as dataSource) is as follows:[{"name":"Andrew"},{"name":"Mike"},{"name":"Emma"}], and you select the third item, theselectedItemproperty will actually bedataSource[2], which is{"name":"Emma"}. Therefore, you can further access the value corresponding to a specific key by usinggridList1.selectedItem.name.{{gridList1.selectedItem.name}}
currentItemObjectThis property canonly be used in the component of Grid List in the configurationand does not need to be called via displayName . When you add a Text component to the Grid List component, it is expected that this Text component will display the name of this segment in the Data source. To achieve this, you can set it as{{currentItem.name}}.{{currentItem.name}}

Configurable properties​

Data​

Property nameTypeDescriptionExample
Data sourceArray of objectsThis is used to set the data source for the Grid List component. The expected data format is [{ "key": "value", "key": "value" }, { "key": "value", "key": "value" },... { "key": "value", "key": "value" }]. You can query your data source using the Action, and the return value of the action will be used as the data source. Alternatively, you can directly input into the data source. When inputting, please make sure to use{{}}to enclose the array.{{mysql1.data}}

Interaction​

Property nameTypeDescriptionExample
LoadingBooleanYou can configure the Grid list component to display a Loading state under certain circumstances. For example, during the execution of an Action, you can show a loading state by using the{{mysql1.isRunning}}setting.{{mysql1.isRunning}}
DisabledBooleanYou can configure the Grid list component to be disabled under certain conditions. For example, if there is no input value in theinput1component, it should be disabled. You can achieve this by using the{{input1.value===null \|\| input1.value==="" \|\| input1.value===undefined}}condition.{{input1.value===null\|\|input1.value===""\|\|input1.value===undefined}}

Pagination​

Property nameTypeDescriptionExample
PaginationBooleanYou can configure whether to display data in a paginated manner. If pagination is not enabled, all the data will be displayed on a single page.--
Page sizeNumberTo display multiple data items per page, you need to enable pagination. When you enable pagination, you can configure the number of items to be displayed per page.{{30}}
Enable server side paginationBooleanPlease refer to this documentation for reference:Server-side pagination--

Layout​

Property nameTypeDescriptionExample
Column adaptionSelectionWe offer two modes: Fixed and Dynamic. InFixedmode, the list is fixed. Resizing the browser window will only change the width of each column. InDynamicmode, the list is not fixed, resizing the browser window will change both the width and the number of columns. Below this table, there are also illustrations of the two modes, which can provide a more visual understanding of the differences between the two modes.--
Number of columnsNumberIn Fixed mode, the configuration displays a fixed number of columns.{{3}}
Min width of columnsNumberIn the Dynamic mode, the configuration sets the minimum column width. We will use the component width/minimum column width to calculate the maximum number of columns that can be displayed currently. If it can not be evenly divided, the excess value will be distributed evenly to supplement each column width.{{300}}
Item spacingNumberSpacing between each column and row.--
HeightSelectionTo configure the height of a component, we provide two types of formatting options: Fixed and Auto. In the Fixed mode, you need to manually adjust the height of the component and item. In the Auto mode, the height of the component and the length of the list will be dynamically adjusted based on the height of the items.--
HiddenBooleanUsed to hide a component under certain conditions. For example, the component is not displayed when there are no results frommysql1: {{!mysql1.data}}.{{!mysql1.data}}
Dynamic number of columns​

dynamic

Fixed number of columns​

fixed

Event handler​

Event handler：https://docs.illacloud.com/event-handler

Event nameDescription
Click itemWhen clicking on an item, trigger the corresponding event. For example, if one of the data in your data source is a URL, you can expect that clicking on the item will navigate to the URL associated with that item. In the event handler, you can select "go to URL" and set the value of the URL to{{currentItem.url}}.
Page changeDuring page switching, events are triggered. This is commonly used in the server-side pagination scenario. When the page changes, the action is executed again, immediately fetching the next or previous page of data.
- - +

Data Grid

What is Data Grid​

In some cases, you might want to display your items as a grid rather than a normal list of items that come one after the next. For this task, use the Grid List component.

The editing method of the Grid List component is the same as that of the container. You can drag and drop components into the Grid List to customize the display format of the items.

How-to​

Configure the appearance of the Grid list​

Connect to data source​

Data​

Property nameTypeDescriptionUse example
selectedItemObjectYou can select an item in the Grid List and retrieve its data using theselectedItemproperty. When you select the nth item, the value of theselectedItemproperty will be the nth item in the data source array that you have set for the Grid List. For example, if your data source (referred to as dataSource) is as follows:[{"name":"Andrew"},{"name":"Mike"},{"name":"Emma"}], and you select the third item, theselectedItemproperty will actually bedataSource[2], which is{"name":"Emma"}. Therefore, you can further access the value corresponding to a specific key by usinggridList1.selectedItem.name.{{gridList1.selectedItem.name}}
currentItemObjectThis property canonly be used in the component of Grid List in the configurationand does not need to be called via displayName . When you add a Text component to the Grid List component, it is expected that this Text component will display the name of this segment in the Data source. To achieve this, you can set it as{{currentItem.name}}.{{currentItem.name}}

Configurable properties​

Data​

Property nameTypeDescriptionExample
Data sourceArray of objectsThis is used to set the data source for the Grid List component. The expected data format is [{ "key": "value", "key": "value" }, { "key": "value", "key": "value" },... { "key": "value", "key": "value" }]. You can query your data source using the Action, and the return value of the action will be used as the data source. Alternatively, you can directly input into the data source. When inputting, please make sure to use{{}}to enclose the array.{{mysql1.data}}

Interaction​

Property nameTypeDescriptionExample
LoadingBooleanYou can configure the Grid list component to display a Loading state under certain circumstances. For example, during the execution of an Action, you can show a loading state by using the{{mysql1.isRunning}}setting.{{mysql1.isRunning}}
DisabledBooleanYou can configure the Grid list component to be disabled under certain conditions. For example, if there is no input value in theinput1component, it should be disabled. You can achieve this by using the{{input1.value===null \|\| input1.value==="" \|\| input1.value===undefined}}condition.{{input1.value===null\|\|input1.value===""\|\|input1.value===undefined}}

Pagination​

Property nameTypeDescriptionExample
PaginationBooleanYou can configure whether to display data in a paginated manner. If pagination is not enabled, all the data will be displayed on a single page.--
Page sizeNumberTo display multiple data items per page, you need to enable pagination. When you enable pagination, you can configure the number of items to be displayed per page.{{30}}
Enable server side paginationBooleanPlease refer to this documentation for reference:Server-side pagination--

Layout​

Property nameTypeDescriptionExample
Column adaptionSelectionWe offer two modes: Fixed and Dynamic. InFixedmode, the list is fixed. Resizing the browser window will only change the width of each column. InDynamicmode, the list is not fixed, resizing the browser window will change both the width and the number of columns. Below this table, there are also illustrations of the two modes, which can provide a more visual understanding of the differences between the two modes.--
Number of columnsNumberIn Fixed mode, the configuration displays a fixed number of columns.{{3}}
Min width of columnsNumberIn the Dynamic mode, the configuration sets the minimum column width. We will use the component width/minimum column width to calculate the maximum number of columns that can be displayed currently. If it can not be evenly divided, the excess value will be distributed evenly to supplement each column width.{{300}}
Item spacingNumberSpacing between each column and row.--
HeightSelectionTo configure the height of a component, we provide two types of formatting options: Fixed and Auto. In the Fixed mode, you need to manually adjust the height of the component and item. In the Auto mode, the height of the component and the length of the list will be dynamically adjusted based on the height of the items.--
HiddenBooleanUsed to hide a component under certain conditions. For example, the component is not displayed when there are no results frommysql1: {{!mysql1.data}}.{{!mysql1.data}}
Dynamic number of columns​

dynamic

Fixed number of columns​

fixed

Event handler​

Event handler：https://docs.illacloud.com/event-handler

Event nameDescription
Click itemWhen clicking on an item, trigger the corresponding event. For example, if one of the data in your data source is a URL, you can expect that clicking on the item will navigate to the URL associated with that item. In the event handler, you can select "go to URL" and set the value of the URL to{{currentItem.url}}.
Page changeDuring page switching, events are triggered. This is commonly used in the server-side pagination scenario. When the page changes, the action is executed again, immediately fetching the next or previous page of data.
+ + \ No newline at end of file diff --git a/hugging-face-api/index.html b/hugging-face-api/index.html index 0c106534f4..1378309982 100644 --- a/hugging-face-api/index.html +++ b/hugging-face-api/index.html @@ -10,13 +10,13 @@ - - + +
-

Hugging Face API

Hugging Face is the Github of the machine learning community, with hundreds of thousands of pre-trained models and 10,000 datasets currently available. You can freely access models and datasets shared by other industry experts or host and deploy your models on Hugging Face.

Some examples of models available in the Hugging Face library include:

  1. BERT (Bidirectional Encoder Representations from Transformers): BERT is a transformer-based model developed by Google for various NLP tasks. It has achieved state-of-the-art results in language understanding and machine translation tasks.
  2. GPT (Generative Pre-training Transformer): GPT is another transformer-based model developed by OpenAI. It is primarily used for language generation tasks, such as translation and text summarization.
  3. RoBERTa (Robustly Optimized BERT): RoBERTa is an extension of the BERT model that was developed to improve BERT's performance on various NLP tasks.
  4. XLNet (eXtraordinary LanguageNet): XLNet is a transformer-based model developed by Google that is designed to improve the performance of transformer models on language understanding tasks.
  5. ALBERT (A Lite BERT): ALBERT is a version of the BERT model that was developed to be more efficient and faster to train while maintaining good performance on NLP tasks.

What you can do with Hugging Face in ILLA Builder​

In Hugging Face, over 130,000 machine-learning models are available through the public API, which you can use and test for free at https://huggingface.co/models. In addition, if you need a solution for production scenarios, you can use Hugging Face's Inference Endpoints, which can be deployed and accessed at https://huggingface.co/docs/inference-endpoints/index.

ILLA Builder provides dozens of commonly used front-end components, allowing you to build different front-end interfaces based on your specific needs quickly. At the same time, ILLA offers a connection to Hugging Face, allowing you to quickly connect to the API, send requests, and receive returned data. By connecting the API and front-end components, you can implement the requirement that users can enter content through the front end and submit it to the API. The API returns the generated content to be displayed on the front end.

Configure Hugging Face API resource​

PropertiesRequiredDescription
NamerequiredDefine a resource name that will be used for display in ILLA
TokenrequiredThe user access or API token. You can get it in https://huggingface.co/settings/tokens.

Configure Action​

PropertiesRequiredDescription
Model IDrequiredSearch for models: https://huggingface.co/models
Parameter typerequiredThe parameter type of your endpoint. For example, if your endpoint needs an text input, choose fill in “inputs” parameter with text. If your endpoint needs an JSON input, choose fill in “inputs” parameter with JSON or key-value.
ParameterrequiredEnter your parameter. Use {{ componentName.value }} to use data of components.

How to use Hugging Face in ILLA Builder

Usecase 1​

Step 1: Build UI with components on ILLA Builder​

Here we will demonstrate how to build a simple text that input text prompt and a text question to output a text answer.

You need two textarea components labeled as "Enter the original text" and "Enter the question here", and button component labeled as "Run", and a text area component labeled as "Anwer" for output text. The following image is an example as described above.

hfapi

Step 2: Create a Hugging Face Resource and config the Actions​

Click + New in the action list and select Hugging Face Inference API.

hfapi2

Fill in the form to connect to your Hugging Face:

Name: The name that will be displayed in ILLA

Token: Get in your Hugging Face profile settings

hfapi3

Confirm the model information in Hugging Face before configuring the actions:

Select a model in Hugging Face Model Page

Let’s use deepset/roberta-base-squad2 as an example. Enter the detail page > click Deploy > Click Inference API

hfapi4

The parameters after “inputs” is what you should fill in ILLA.

hfapi5

In ILLA Builder, we should fill in the Model ID and Parameter. Taking the above model as an example, the “inputs” is a key-value pair, so we can fill in it with key-value or JSON.

hfapi6

hfapi7

And we also support the text input and binary input which can meet all Hugging Face Inference API connections.

Step 3: Connect actions to components​

To pass the user's front-end input to the API, you can use {{ to retrieve data inputted in the component. For example, input2 is the component to input the question and input1 is the component to input context, we can fill question and context in key, and fill {{ input.value }} in value:

{
"question": {{input2.value}},
"context": {{input1.value}}
}

Before displaying the output data of the Action in the front-end component, we should confirm which field the output of different models is placed in. Still taking deepset/roberta-base-squad2 as an example, the results are as follows:

hfapi8

So we can get the answer with {{ textQuestion.data[0].answer }}(the textQuestion is the name of the action).

hfapi9

Demo​

hfapi10

hfapi11

Usecase 2​

Here we will demonstrate how to use the Stable diffusion model thorugh the Hugging Face API in Illa Cloud.

Step 1: Building a Front-end Interface

We construct a front-end interface by utilizing a drag-and-drop approach to place essential components such as input fields, buttons, images, and more. After adjusting the styles of the components, we obtain the following complete webpage.

hugging_layout

Step 2: Creating Resources and Actions

We establish resources and actions by utilizing the Hugging Face Inference API to connect to the Stable Diffusion model. Two models can be utilized: runwayml/stable-diffusion-v1-5 and stabilityai/stable-diffusion-2-1.

Choose the "Hugging Face Inference API" for this purpose.

action_list

Provide a name for this resource and enter your token from the Hugging Face platform.

hugging_config

In the Action configuration panel, please enter the Model ID and Parameter. We will retrieve the selected model from radioGroup1, so fill in the Model ID as  {{radioGroup1.value}} . For the input, since it is obtained from the input field, fill in the parameter as {{input1.value}}. The configuration should be as shown in the following image.

hugging_demo

We attempt to input "A mecha robot in a favela in expressionist style" in the input component and run the Action. The resulting execution is as follows. From the left panel, you can observe the available data that can be called, including base64binary and dataURI.

hugging_output

Step 3: Displaying Data on Components

To display the image obtained from Step 2, we modify the Image source of the image component to {{generateInput.fileData.dataURI}}. This will enable us to show the generated image.

hugging_display

Step 4: Running the Action with Components

To run the action created in Step 2 when the button component is clicked, add an event handler to the button component.

hugging_event_config

Step 5: Testing

Following the previous four steps, you can utilize additional components and data sources to complete other tasks and build a more comprehensive tool. For example, you can use other models to assist in generating prompts or store prompts in localStorage or a database. Let's take a look at the complete outcome when all the steps are implemented.

hugging_test

Now you may play around with it! Try other cutting-edge models that is provided by Hugging face through this API. There are more to explore, such as stable diffusion anime models download, training an artist style, sampling method for realistic images. You can do much more!

- - +

Hugging Face API

Hugging Face is the Github of the machine learning community, with hundreds of thousands of pre-trained models and 10,000 datasets currently available. You can freely access models and datasets shared by other industry experts or host and deploy your models on Hugging Face.

Some examples of models available in the Hugging Face library include:

  1. BERT (Bidirectional Encoder Representations from Transformers): BERT is a transformer-based model developed by Google for various NLP tasks. It has achieved state-of-the-art results in language understanding and machine translation tasks.
  2. GPT (Generative Pre-training Transformer): GPT is another transformer-based model developed by OpenAI. It is primarily used for language generation tasks, such as translation and text summarization.
  3. RoBERTa (Robustly Optimized BERT): RoBERTa is an extension of the BERT model that was developed to improve BERT's performance on various NLP tasks.
  4. XLNet (eXtraordinary LanguageNet): XLNet is a transformer-based model developed by Google that is designed to improve the performance of transformer models on language understanding tasks.
  5. ALBERT (A Lite BERT): ALBERT is a version of the BERT model that was developed to be more efficient and faster to train while maintaining good performance on NLP tasks.

What you can do with Hugging Face in ILLA Builder​

In Hugging Face, over 130,000 machine-learning models are available through the public API, which you can use and test for free at https://huggingface.co/models. In addition, if you need a solution for production scenarios, you can use Hugging Face's Inference Endpoints, which can be deployed and accessed at https://huggingface.co/docs/inference-endpoints/index.

ILLA Builder provides dozens of commonly used front-end components, allowing you to build different front-end interfaces based on your specific needs quickly. At the same time, ILLA offers a connection to Hugging Face, allowing you to quickly connect to the API, send requests, and receive returned data. By connecting the API and front-end components, you can implement the requirement that users can enter content through the front end and submit it to the API. The API returns the generated content to be displayed on the front end.

Configure Hugging Face API resource​

PropertiesRequiredDescription
NamerequiredDefine a resource name that will be used for display in ILLA
TokenrequiredThe user access or API token. You can get it in https://huggingface.co/settings/tokens.

Configure Action​

PropertiesRequiredDescription
Model IDrequiredSearch for models: https://huggingface.co/models
Parameter typerequiredThe parameter type of your endpoint. For example, if your endpoint needs an text input, choose fill in “inputs” parameter with text. If your endpoint needs an JSON input, choose fill in “inputs” parameter with JSON or key-value.
ParameterrequiredEnter your parameter. Use {{ componentName.value }} to use data of components.

How to use Hugging Face in ILLA Builder

Usecase 1​

Step 1: Build UI with components on ILLA Builder​

Here we will demonstrate how to build a simple text that input text prompt and a text question to output a text answer.

You need two textarea components labeled as "Enter the original text" and "Enter the question here", and button component labeled as "Run", and a text area component labeled as "Anwer" for output text. The following image is an example as described above.

hfapi

Step 2: Create a Hugging Face Resource and config the Actions​

Click + New in the action list and select Hugging Face Inference API.

hfapi2

Fill in the form to connect to your Hugging Face:

Name: The name that will be displayed in ILLA

Token: Get in your Hugging Face profile settings

hfapi3

Confirm the model information in Hugging Face before configuring the actions:

Select a model in Hugging Face Model Page

Let’s use deepset/roberta-base-squad2 as an example. Enter the detail page > click Deploy > Click Inference API

hfapi4

The parameters after “inputs” is what you should fill in ILLA.

hfapi5

In ILLA Builder, we should fill in the Model ID and Parameter. Taking the above model as an example, the “inputs” is a key-value pair, so we can fill in it with key-value or JSON.

hfapi6

hfapi7

And we also support the text input and binary input which can meet all Hugging Face Inference API connections.

Step 3: Connect actions to components​

To pass the user's front-end input to the API, you can use {{ to retrieve data inputted in the component. For example, input2 is the component to input the question and input1 is the component to input context, we can fill question and context in key, and fill {{ input.value }} in value:

{
"question": {{input2.value}},
"context": {{input1.value}}
}

Before displaying the output data of the Action in the front-end component, we should confirm which field the output of different models is placed in. Still taking deepset/roberta-base-squad2 as an example, the results are as follows:

hfapi8

So we can get the answer with {{ textQuestion.data[0].answer }}(the textQuestion is the name of the action).

hfapi9

Demo​

hfapi10

hfapi11

Usecase 2​

Here we will demonstrate how to use the Stable diffusion model thorugh the Hugging Face API in Illa Cloud.

Step 1: Building a Front-end Interface

We construct a front-end interface by utilizing a drag-and-drop approach to place essential components such as input fields, buttons, images, and more. After adjusting the styles of the components, we obtain the following complete webpage.

hugging_layout

Step 2: Creating Resources and Actions

We establish resources and actions by utilizing the Hugging Face Inference API to connect to the Stable Diffusion model. Two models can be utilized: runwayml/stable-diffusion-v1-5 and stabilityai/stable-diffusion-2-1.

Choose the "Hugging Face Inference API" for this purpose.

action_list

Provide a name for this resource and enter your token from the Hugging Face platform.

hugging_config

In the Action configuration panel, please enter the Model ID and Parameter. We will retrieve the selected model from radioGroup1, so fill in the Model ID as  {{radioGroup1.value}} . For the input, since it is obtained from the input field, fill in the parameter as {{input1.value}}. The configuration should be as shown in the following image.

hugging_demo

We attempt to input "A mecha robot in a favela in expressionist style" in the input component and run the Action. The resulting execution is as follows. From the left panel, you can observe the available data that can be called, including base64binary and dataURI.

hugging_output

Step 3: Displaying Data on Components

To display the image obtained from Step 2, we modify the Image source of the image component to {{generateInput.fileData.dataURI}}. This will enable us to show the generated image.

hugging_display

Step 4: Running the Action with Components

To run the action created in Step 2 when the button component is clicked, add an event handler to the button component.

hugging_event_config

Step 5: Testing

Following the previous four steps, you can utilize additional components and data sources to complete other tasks and build a more comprehensive tool. For example, you can use other models to assist in generating prompts or store prompts in localStorage or a database. Let's take a look at the complete outcome when all the steps are implemented.

hugging_test

Now you may play around with it! Try other cutting-edge models that is provided by Hugging face through this API. There are more to explore, such as stable diffusion anime models download, training an artist style, sampling method for realistic images. You can do much more!

+ + \ No newline at end of file diff --git a/hugging-face-endpoint/index.html b/hugging-face-endpoint/index.html index 6f417cac89..f42b0dd2c9 100644 --- a/hugging-face-endpoint/index.html +++ b/hugging-face-endpoint/index.html @@ -10,13 +10,13 @@ - - + +
-

Hugging Face Endpoint

With Hugging Face Inference Endpoints, you can easily deploy Transformers, Diffusers or any model on dedicated, fully managed infrastructure. Click here to create an endpoint.

Create Hugging Face endpoint resource​

There are two ways to add a Hugging Face Endpoint resource.

  1. Enter the ILLA Builder >> Click Resources tab >> Click Create New >> Choose Hugging Face Endpoint >> Configure the connection information and click Save Resource
  2. Enter the edit page >> click + New in the action list >> Choose Hugging Face Endpoint >> Configure the connection information or click + New Resource to add new connection information

Configure connection information​

PropertiesRequiredDescription
NamerequiredDefine a resource name that will be used for display in ILLA
Endpoint URLrequiredcreate Endpoint here: https://ui.endpoints.huggingface.co/new and get the URL.
TokenrequiredThe organization token. You can get it in https://huggingface.co/settings/tokens.

Create Actions​

Enter the edit page >> click + New in the action list >> Choose Hugging Face Endpoint >> Choose an existing resource or add a new resource

Configure actions​

PropertiesRequiredDescription
Parameter typerequiredThe parameter type of your Endpoint. For example, if your Endpoint needs an text input, choose fill in “inputs” parameter with text. If your Endpoint needs an JSON input, choose fill in “inputs” parameter with JSON or key-value.
ParameterrequiredEnter your parameter. Use {{ componentName.value }} to use data of components.

Use case​

We have deployed openai/whisper-base which gets an audio file input and converts into text. It is suitable for meeting minutes, podcasts to text, etc. Next we will introduce how to use this model to build an application in ILLA Cloud.

Step 1: Build the front-end interface with components​

We have built an interface using the components such as file upload and button, as follows.

Step 2: Add a Hugging Face resource​

Fill in the fields shown below to finish the resource configuration. Create an Endpoint and get the Endpoint URL. And get the organization API token in profile settings.

Step 3: Configure an Action​

Select a parameter type first. Take openai/whisper-base as an example, this model requires binary file input so we change the parameter to Binary.

Set the binary to be passed to the model as the file data uploaded from the file upload component. For example, {{upload1.value[0]}}

Step 4: Connect the components and actions​

Add an event handler to the button to trigger the action run when the button is clicked. And set the value of text component to {{whisper.data[0].text}} to display the convert result on text component.

After the above steps are configured, the application is created and the running results are as follows.

- - +

Hugging Face Endpoint

With Hugging Face Inference Endpoints, you can easily deploy Transformers, Diffusers or any model on dedicated, fully managed infrastructure. Click here to create an endpoint.

Create Hugging Face endpoint resource​

There are two ways to add a Hugging Face Endpoint resource.

  1. Enter the ILLA Builder >> Click Resources tab >> Click Create New >> Choose Hugging Face Endpoint >> Configure the connection information and click Save Resource
  2. Enter the edit page >> click + New in the action list >> Choose Hugging Face Endpoint >> Configure the connection information or click + New Resource to add new connection information

Configure connection information​

PropertiesRequiredDescription
NamerequiredDefine a resource name that will be used for display in ILLA
Endpoint URLrequiredcreate Endpoint here: https://ui.endpoints.huggingface.co/new and get the URL.
TokenrequiredThe organization token. You can get it in https://huggingface.co/settings/tokens.

Create Actions​

Enter the edit page >> click + New in the action list >> Choose Hugging Face Endpoint >> Choose an existing resource or add a new resource

Configure actions​

PropertiesRequiredDescription
Parameter typerequiredThe parameter type of your Endpoint. For example, if your Endpoint needs an text input, choose fill in “inputs” parameter with text. If your Endpoint needs an JSON input, choose fill in “inputs” parameter with JSON or key-value.
ParameterrequiredEnter your parameter. Use {{ componentName.value }} to use data of components.

Use case​

We have deployed openai/whisper-base which gets an audio file input and converts into text. It is suitable for meeting minutes, podcasts to text, etc. Next we will introduce how to use this model to build an application in ILLA Cloud.

Step 1: Build the front-end interface with components​

We have built an interface using the components such as file upload and button, as follows.

Step 2: Add a Hugging Face resource​

Fill in the fields shown below to finish the resource configuration. Create an Endpoint and get the Endpoint URL. And get the organization API token in profile settings.

Step 3: Configure an Action​

Select a parameter type first. Take openai/whisper-base as an example, this model requires binary file input so we change the parameter to Binary.

Set the binary to be passed to the model as the file data uploaded from the file upload component. For example, {{upload1.value[0]}}

Step 4: Connect the components and actions​

Add an event handler to the button to trigger the action run when the button is clicked. And set the value of text component to {{whisper.data[0].text}} to display the convert result on text component.

After the above steps are configured, the application is created and the running results are as follows.

+ + \ No newline at end of file diff --git a/hydra/index.html b/hydra/index.html index b2e0b4b13e..4b32b09e8c 100644 --- a/hydra/index.html +++ b/hydra/index.html @@ -10,13 +10,13 @@ - - + +
-

Hydra

Hydra​

Hydra is a powerful integration within the ILLA Cloud platform that seamlessly connects and consolidates various data sources and applications. Acting as a central hub, Hydra enables efficient data flow and communication between different systems, allowing for real-time data synchronization, automated workflows, and streamlined processes. With its robust capabilities, Hydra empowers businesses to optimize their operations, enhance collaboration, and make data-driven decisions with ease, all within the integrated ecosystem of ILLA Cloud.

Create Hydra​

There are two ways to create a resource in ILLA after signing into your account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Hydra from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Hydra will display as shown.

hydra_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Hydra from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Hydra database.

hydra_config

hydra_config_1

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Hydra server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.
CA Certificaterequireda digital certificate that is used to verify the identity of a server and establish a secure, encrypted connection between a client and a Hydra cluster. If you don't specify it, we have filled in a default certificate for you.
Client Keyoptionala parameter that is used to establish a secure connection between the Hydra client and the Hydra server.
Client Certificateoptionala security feature that allows a client to authenticate itself to a Hydra server

Create Actions​

We have created a Hydra resource, we can add the action by selecting Hyd from action list and choosing the Create action button.

hydra_resource_list

Now we have added the Hydra server as an action to our building page.

hydra

Configure Hydra​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

Hydra

Hydra​

Hydra is a powerful integration within the ILLA Cloud platform that seamlessly connects and consolidates various data sources and applications. Acting as a central hub, Hydra enables efficient data flow and communication between different systems, allowing for real-time data synchronization, automated workflows, and streamlined processes. With its robust capabilities, Hydra empowers businesses to optimize their operations, enhance collaboration, and make data-driven decisions with ease, all within the integrated ecosystem of ILLA Cloud.

Create Hydra​

There are two ways to create a resource in ILLA after signing into your account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Hydra from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Hydra will display as shown.

hydra_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Hydra from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Hydra database.

hydra_config

hydra_config_1

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Hydra server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.
CA Certificaterequireda digital certificate that is used to verify the identity of a server and establish a secure, encrypted connection between a client and a Hydra cluster. If you don't specify it, we have filled in a default certificate for you.
Client Keyoptionala parameter that is used to establish a secure connection between the Hydra client and the Hydra server.
Client Certificateoptionala security feature that allows a client to authenticate itself to a Hydra server

Create Actions​

We have created a Hydra resource, we can add the action by selecting Hyd from action list and choosing the Create action button.

hydra_resource_list

Now we have added the Hydra server as an action to our building page.

hydra

Configure Hydra​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/icon/index.html b/icon/index.html index d2f24dd860..e26b9997f2 100644 --- a/icon/index.html +++ b/icon/index.html @@ -10,13 +10,13 @@ - - + +
-

Icon

What is Icon?​

The Icon component in ILLA Cloud is a powerful feature that allows users to enhance the visual appeal and functionality of their applications. With the Icon component, users can easily add icons from popular icon libraries to their user interfaces, providing a more intuitive and engaging experience for their users.

Properties​

PropertiesDescription
Iconallows users to easily select an icon from a predefined set of options
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Event handler​

EventDescription
ClickWhen a user click this icon, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemestroke color of the icon
displayNamethe name of this component (ie icon1)
eventsgenerated or triggered when certain actions or events occur within the component.
hiddenhidden status (true or false)
iconNamethe label name for icon
tooltipTextvalue of tooltip text

Example: {{icon1.iconName}}

Use case​

Below are some examples of icons we offer:

  • Flat Color Icons:

icon_picker0

  • Simple Line:

icon_picker1

  • Tabler Icons:

icon_picker2

  • Bootstrap Icons:

icon_picker3

- - +
Skip to main content

Icon

What is Icon?​

The Icon component in ILLA Cloud is a powerful feature that allows users to enhance the visual appeal and functionality of their applications. With the Icon component, users can easily add icons from popular icon libraries to their user interfaces, providing a more intuitive and engaging experience for their users.

Properties​

PropertiesDescription
Iconallows users to easily select an icon from a predefined set of options
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Event handler​

EventDescription
ClickWhen a user click this icon, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemestroke color of the icon
displayNamethe name of this component (ie icon1)
eventsgenerated or triggered when certain actions or events occur within the component.
hiddenhidden status (true or false)
iconNamethe label name for icon
tooltipTextvalue of tooltip text

Example: {{icon1.iconName}}

Use case​

Below are some examples of icons we offer:

  • Flat Color Icons:

icon_picker0

  • Simple Line:

icon_picker1

  • Tabler Icons:

icon_picker2

  • Bootstrap Icons:

icon_picker3

+ + \ No newline at end of file diff --git a/illa-flow-introduction/index.html b/illa-flow-introduction/index.html index e8ef3170fc..d491e11d21 100644 --- a/illa-flow-introduction/index.html +++ b/illa-flow-introduction/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

About ILLA Flow

What is ILLA Flow​

ILLA Flow is an automation tool designed to help users connect and automate various databases, APIs, and services without writing code or with minimal code. ILLA Flow supports WebHook and scheduled task triggers to connect different APIs, databases, code, and triggers. When the trigger conditions are met, ILLA Flow automatically executes the corresponding actions, enabling automated data transfer and task execution between APIs and databases. The goal of ILLA Flow is to simplify the process of writing automation logic code, allowing users to easily achieve automation for different tasks.

Trigger type​

  • Schedule
  • Webhook

Event type​

  • PostgreSQL, MySQL, MariaDB, TiDB, Neon, MongoDB, Snowflake, Supabase, Clickhouse, Hydra
  • Rest API
  • GraphQL
  • AI Agent: You can customize the behavior of the AI and generate specific content.
  • Transformer: You can handle tasks by writing JavaScript.
  • Condition: Used for handling processing under different conditions.
  • Loop: Iterative execution of tasks.
  • Response: Response data in a WebHook request.
  • Error handler: Used for setting error handling.

How to use ILLA Flow​

- - +
Skip to main content

About ILLA Flow

What is ILLA Flow​

ILLA Flow is an automation tool designed to help users connect and automate various databases, APIs, and services without writing code or with minimal code. ILLA Flow supports WebHook and scheduled task triggers to connect different APIs, databases, code, and triggers. When the trigger conditions are met, ILLA Flow automatically executes the corresponding actions, enabling automated data transfer and task execution between APIs and databases. The goal of ILLA Flow is to simplify the process of writing automation logic code, allowing users to easily achieve automation for different tasks.

Trigger type​

  • Schedule
  • Webhook

Event type​

  • PostgreSQL, MySQL, MariaDB, TiDB, Neon, MongoDB, Snowflake, Supabase, Clickhouse, Hydra
  • Rest API
  • GraphQL
  • AI Agent: You can customize the behavior of the AI and generate specific content.
  • Transformer: You can handle tasks by writing JavaScript.
  • Condition: Used for handling processing under different conditions.
  • Loop: Iterative execution of tasks.
  • Response: Response data in a WebHook request.
  • Error handler: Used for setting error handling.

How to use ILLA Flow​

+ + \ No newline at end of file diff --git a/illa-flow-response/index.html b/illa-flow-response/index.html index dbf8c42495..fec0486f9d 100644 --- a/illa-flow-response/index.html +++ b/illa-flow-response/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Response

Introduction​

When you expect to return data after a certain node has finished executing, you can use the Response node.

You can add different responses for different scenarios, which will be returned based on the actual execution result.

In the case of the same execution conditions (such as several parallel running links that all succeed), when adding Response nodes separately, we will only return the data from the first Response node that has finished running.

Parameters​

Property nameDescription
Status codeIt will be returned as the status of the request.
LocationIn the case of a 307 or 308 status code, you can set the redirect URL in the Location header. When the browser receives this status code, it will automatically redirect to the specified URL.
Response bodyYou can configure it to return JSON, Text, or not return any data. JSON, such as{"a":1, "b":2}; Text, can be used to return String or numeric values. For string values, it can be a simple text likeHello world. For numeric values, they need to be enclosed in double curly braces, like{{5}}.
Response headersUsed to set parameters in response headers.
- - +
Skip to main content

Response

Introduction​

When you expect to return data after a certain node has finished executing, you can use the Response node.

You can add different responses for different scenarios, which will be returned based on the actual execution result.

In the case of the same execution conditions (such as several parallel running links that all succeed), when adding Response nodes separately, we will only return the data from the first Response node that has finished running.

Parameters​

Property nameDescription
Status codeIt will be returned as the status of the request.
LocationIn the case of a 307 or 308 status code, you can set the redirect URL in the Location header. When the browser receives this status code, it will automatically redirect to the specified URL.
Response bodyYou can configure it to return JSON, Text, or not return any data. JSON, such as{"a":1, "b":2}; Text, can be used to return String or numeric values. For string values, it can be a simple text likeHello world. For numeric values, they need to be enclosed in double curly braces, like{{5}}.
Response headersUsed to set parameters in response headers.
+ + \ No newline at end of file diff --git a/illa-flow-webhook/index.html b/illa-flow-webhook/index.html index ec35953300..c38940d737 100644 --- a/illa-flow-webhook/index.html +++ b/illa-flow-webhook/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

WebHook

What is WebHook​

WebHook is an event notification mechanism implemented through HTTP requests. ILLA Flow allows users to trigger workflows in ILLA Flow by making an HTTP request to its WebHook and retrieve the returned data.

How to use it​

Body params​

Used to set the parameters required in the request body when making a request to this WebHook.

Property nameDescription
KeyThe parameter names.
TypeUsed to set the data type.
RequiredUsed to set whether this parameter is required.
Test valueUsed to enter test values. If your parameter type is String, you can directly enter the String. If your parameter type is another type, you need to enclose the test value in{{}}. For example, for a numerical parameter, you need to enter{{5}}, and for an array parameter, you need to enter{{[1,2,3,4]}}.

How to request​

Copy cURL to get the content required when making a request to this WebHook.

Here is an example,

curl -X POST 
https://cloud-api.illacloud.com/flow/api/v1/webhook/workflows/ILAex4p1C7Wm/run?webhookToken=xxxxxx
-H "Content-Type: application/json" 
-d '{"param":{"a":1,"b":2},"param1":[1,2,3]}'

cURL includes the following content:

FieldDescriptionHow to use in the REST API Action of ILLA
Request methodPOSTAction type
URLThe part before the question mark is the requested URL. For example,https://cloud-api.illacloud.com/flow/api/v1/webhook/workflows/ILAex4p1C7Wm/runBase URL
Query parametersThe part after the question mark is the requested URL. For example,webhookToken=xxxxxxURL Parameters
HeaderContent-Type: application/jsonHeaders
Request bodyIf you have set a request body in the WebHook, the cURL command will include an example of the request body.Body, it could bex-www-form-urlencodedorRaw - JSON

How to get the response​

Learn more about response: https://docs.illacloud.com/illa-flow-response

- - +
Skip to main content

WebHook

What is WebHook​

WebHook is an event notification mechanism implemented through HTTP requests. ILLA Flow allows users to trigger workflows in ILLA Flow by making an HTTP request to its WebHook and retrieve the returned data.

How to use it​

Body params​

Used to set the parameters required in the request body when making a request to this WebHook.

Property nameDescription
KeyThe parameter names.
TypeUsed to set the data type.
RequiredUsed to set whether this parameter is required.
Test valueUsed to enter test values. If your parameter type is String, you can directly enter the String. If your parameter type is another type, you need to enclose the test value in{{}}. For example, for a numerical parameter, you need to enter{{5}}, and for an array parameter, you need to enter{{[1,2,3,4]}}.

How to request​

Copy cURL to get the content required when making a request to this WebHook.

Here is an example,

curl -X POST 
https://cloud-api.illacloud.com/flow/api/v1/webhook/workflows/ILAex4p1C7Wm/run?webhookToken=xxxxxx
-H "Content-Type: application/json" 
-d '{"param":{"a":1,"b":2},"param1":[1,2,3]}'

cURL includes the following content:

FieldDescriptionHow to use in the REST API Action of ILLA
Request methodPOSTAction type
URLThe part before the question mark is the requested URL. For example,https://cloud-api.illacloud.com/flow/api/v1/webhook/workflows/ILAex4p1C7Wm/runBase URL
Query parametersThe part after the question mark is the requested URL. For example,webhookToken=xxxxxxURL Parameters
HeaderContent-Type: application/jsonHeaders
Request bodyIf you have set a request body in the WebHook, the cURL command will include an example of the request body.Body, it could bex-www-form-urlencodedorRaw - JSON

How to get the response​

Learn more about response: https://docs.illacloud.com/illa-flow-response

+ + \ No newline at end of file diff --git a/image/index.html b/image/index.html index 16c51c4017..ba5f2129e8 100644 --- a/image/index.html +++ b/image/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Image

What is Image?​

The image component in ILLA Cloud is a versatile tool that allows users to add and display images within their applications. It provides various functionalities to enhance the visual experience for users.

Properties​

PropertiesDescription
Image sourcespecify the source of the image to be displayed
Alt textalternative text for the image. It is displayed when the image cannot be loaded or for users with visual impairments
Scale Typehow the image is scaled within the component's dimensions, including container, cover, fill, none, scale-down.
Event Handlerallowing users to define actions triggered by user interactions with the image
Tooltipadd a tooltip or a descriptive text that appears when the user hovers over the image
Hiddencontrol the visibility of the image component.
Stylesallowing users to customize its appearance. Users can apply styles such as radius

Method​

You can use other components to control the component. We support the following methods:

  • setImageUrl

dynamically change the source or URL of the image.

PropertiesDescription
Image URLimage source url

Event handler​

EventDescription
Clickperform specific actions or execute code when the image component is clicked

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
altTexta text-based alternative that describes the content or purpose of the image
displayNameA string value that represents the name or title of the image.
eventsAn array or object that defines the event handlers associated with the image component, such as click
hiddenA boolean value that determines whether the image component is hidden from the user interface.
imageSrcthe source or location of the image to be displayed in the component
objectFithow the image is fitted or scaled within the component's dimensions
radiusapply rounded corners to the image component.
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the image component.

Example: {{image1.displayName}}

Use case​

Next, we will demonstrate how to control the image display with a button.

Step 1 Add Components​

Add a Image component and a button component to the canvas.

You can set the image source of image component to any image address you want to display. Here we will use the default image as a start example and label the button as "Change" as shown below

image_layout

Step 2 Configure the component​

For the button component, we can configure it to set the image source of the image component to a new image address.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the image1 component that you want to change as the target of the event.
  3. Choose the setImageUrl action
  4. Put the new image address in the Value field

image_config

Step 3 Test​

Now that when you click the "Play" button, the image should switch

image_test

- - +
Skip to main content

Image

What is Image?​

The image component in ILLA Cloud is a versatile tool that allows users to add and display images within their applications. It provides various functionalities to enhance the visual experience for users.

Properties​

PropertiesDescription
Image sourcespecify the source of the image to be displayed
Alt textalternative text for the image. It is displayed when the image cannot be loaded or for users with visual impairments
Scale Typehow the image is scaled within the component's dimensions, including container, cover, fill, none, scale-down.
Event Handlerallowing users to define actions triggered by user interactions with the image
Tooltipadd a tooltip or a descriptive text that appears when the user hovers over the image
Hiddencontrol the visibility of the image component.
Stylesallowing users to customize its appearance. Users can apply styles such as radius

Method​

You can use other components to control the component. We support the following methods:

  • setImageUrl

dynamically change the source or URL of the image.

PropertiesDescription
Image URLimage source url

Event handler​

EventDescription
Clickperform specific actions or execute code when the image component is clicked

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
altTexta text-based alternative that describes the content or purpose of the image
displayNameA string value that represents the name or title of the image.
eventsAn array or object that defines the event handlers associated with the image component, such as click
hiddenA boolean value that determines whether the image component is hidden from the user interface.
imageSrcthe source or location of the image to be displayed in the component
objectFithow the image is fitted or scaled within the component's dimensions
radiusapply rounded corners to the image component.
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the image component.

Example: {{image1.displayName}}

Use case​

Next, we will demonstrate how to control the image display with a button.

Step 1 Add Components​

Add a Image component and a button component to the canvas.

You can set the image source of image component to any image address you want to display. Here we will use the default image as a start example and label the button as "Change" as shown below

image_layout

Step 2 Configure the component​

For the button component, we can configure it to set the image source of the image component to a new image address.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the image1 component that you want to change as the target of the event.
  3. Choose the setImageUrl action
  4. Put the new image address in the Value field

image_config

Step 3 Test​

Now that when you click the "Play" button, the image should switch

image_test

+ + \ No newline at end of file diff --git a/index.html b/index.html index e55100fa93..33f5b72556 100644 --- a/index.html +++ b/index.html @@ -10,14 +10,14 @@ - - + +
-
Skip to main content

About ILLA

ILLA enables you to build and deploy internal apps quickly. Connect to your databases and APIs, assemble UIs with drag-and-drop building blocks like tables and forms, and write queries to interact with data using SQL and JavaScript.

What is ILLA?​

ILLA is an open-source low-code platform for developers to build and deploy internal tools remarkably fast.

With ILLA, you can easily connect to various data sources such as databases, API/GraphQL endpoints, SaaS tools, and cloud storage services. These include popular options like PostgreSQL, MongoDB, MySQL, Stripe, Google Sheets, and AWS S3. Once connected, ILLA can run queries to fetch and update data from these sources. The user interface (UI) provides convenient components for visualizing and modifying the data, such as tables, charts, and forms.

With ILLA, you can quickly and easily build a user interface (UI) using pre-built widgets that you can drag and drop onto a grid-style canvas. This simplifies the integration of the front-end and back-end of your application and optimizes the building process. Additionally, ILLA supports JavaScript inside widgets, queries, and other components, allowing you to add logic, transform data, and define complex workflows. This makes it easy to customize your application to your specific needs.

Get Start​

To try ILLA, the most convenient way is to sign up and log in to ILLA Cloud. +

About ILLA

ILLA enables you to build and deploy internal apps quickly. Connect to your databases and APIs, assemble UIs with drag-and-drop building blocks like tables and forms, and write queries to interact with data using SQL and JavaScript.

What is ILLA?​

ILLA is an open-source low-code platform for developers to build and deploy internal tools remarkably fast.

With ILLA, you can easily connect to various data sources such as databases, API/GraphQL endpoints, SaaS tools, and cloud storage services. These include popular options like PostgreSQL, MongoDB, MySQL, Stripe, Google Sheets, and AWS S3. Once connected, ILLA can run queries to fetch and update data from these sources. The user interface (UI) provides convenient components for visualizing and modifying the data, such as tables, charts, and forms.

With ILLA, you can quickly and easily build a user interface (UI) using pre-built widgets that you can drag and drop onto a grid-style canvas. This simplifies the integration of the front-end and back-end of your application and optimizes the building process. Additionally, ILLA supports JavaScript inside widgets, queries, and other components, allowing you to add logic, transform data, and define complex workflows. This makes it easy to customize your application to your specific needs.

Get Start​

To try ILLA, the most convenient way is to sign up and log in to ILLA Cloud. To expedite the review process, we invite you to join our Discord Community, where you can obtain an invitation code faster.

Community​

To receive more timely support while using ILLA, consider joining our Discord Community. This will allow you to get support directly from the community, which can help you resolve any issues more quickly.

- - + + \ No newline at end of file diff --git a/input/index.html b/input/index.html index 171c67619d..6452663650 100644 --- a/input/index.html +++ b/input/index.html @@ -10,13 +10,13 @@ - - + +
-

Input

What is Input?​

Text Input component is a user interface element that allows users to enter and edit text in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Patternspecify a regular expression pattern that the user's input must match in order to be considered valid
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the input value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the input field will be highlighted and ready for the user to start typing without the need for the user to click on the input field

Example Usage:

Input component support listening to the onChange event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onChange event of a Radio Group component, you would add an event handler to that Radio Group component.
  2. In the Edit event handler, select Control component in action, select the Input component that you want to update as the target of the event.
  3. Choose the SetValue action and select the appropriate value for the input component. This will be the value that the input component has and will update when the event is triggered.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the input component will automatically update whenever the onChange event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit from focusing on the cascader component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
prefixTextvalue of the text prefix
suffixTextvalue of the text suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
regexregular expression of input
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{input1.value}}

Use case​

Below are some examples for customizing input component.

  • Prefix:

input_prefix

  • Suffix:

input_suffix

  • Tooltip:

input_tooltip

  • Pattern:

input_pattern

- - +

Input

What is Input?​

Text Input component is a user interface element that allows users to enter and edit text in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Patternspecify a regular expression pattern that the user's input must match in order to be considered valid
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the input value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the input field will be highlighted and ready for the user to start typing without the need for the user to click on the input field

Example Usage:

Input component support listening to the onChange event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onChange event of a Radio Group component, you would add an event handler to that Radio Group component.
  2. In the Edit event handler, select Control component in action, select the Input component that you want to update as the target of the event.
  3. Choose the SetValue action and select the appropriate value for the input component. This will be the value that the input component has and will update when the event is triggered.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the input component will automatically update whenever the onChange event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit from focusing on the cascader component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
prefixTextvalue of the text prefix
suffixTextvalue of the text suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
regexregular expression of input
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{input1.value}}

Use case​

Below are some examples for customizing input component.

  • Prefix:

input_prefix

  • Suffix:

input_suffix

  • Tooltip:

input_tooltip

  • Pattern:

input_pattern

+ + \ No newline at end of file diff --git a/list/index.html b/list/index.html index ad05f476f0..1a592e21cb 100644 --- a/list/index.html +++ b/list/index.html @@ -10,13 +10,13 @@ - - + +
-

List

List​

The List component is similar to a Container in that you can nest other components inside of it.

Drag components to list​

When you drag a List component to the Frame, it automatically includes some components. You can deleted or modify them and drag new components into list.

Only the first item can be edited, and others will automatically change based on the first item. You can also focus on the first item and drag the bar to change the height items.

Display query results in a list​

When you drag a List component to the Frame, it automatically displays the test data in JSON format. You can change the data source to an action by using {{ mysql_list_query.data }}.

After setting the data source, you can change the data of components:

  1. Select the component in the first item.
  2. If the component data is from the list, you can set the data by using {{ currentItem.columnName }} . For example, you can set the image source with the {{ currentItem.Avater }}. Avater is a column from the data source of the list.

You can use {{ currentItem.columnName }} only when the components are in the list.

Use the data of list​

You can use the data of selected items by using {{ list1.selectedItem.columnName }}. Or use any data of list by using {{ list1.dataSource[n].columnName }}

- - +

List

List​

The List component is similar to a Container in that you can nest other components inside of it.

Drag components to list​

When you drag a List component to the Frame, it automatically includes some components. You can deleted or modify them and drag new components into list.

Only the first item can be edited, and others will automatically change based on the first item. You can also focus on the first item and drag the bar to change the height items.

Display query results in a list​

When you drag a List component to the Frame, it automatically displays the test data in JSON format. You can change the data source to an action by using {{ mysql_list_query.data }}.

After setting the data source, you can change the data of components:

  1. Select the component in the first item.
  2. If the component data is from the list, you can set the data by using {{ currentItem.columnName }} . For example, you can set the image source with the {{ currentItem.Avater }}. Avater is a column from the data source of the list.

You can use {{ currentItem.columnName }} only when the components are in the list.

Use the data of list​

You can use the data of selected items by using {{ list1.selectedItem.columnName }}. Or use any data of list by using {{ list1.dataSource[n].columnName }}

+ + \ No newline at end of file diff --git a/mariadb/index.html b/mariadb/index.html index bc0150cb00..01d1560d99 100644 --- a/mariadb/index.html +++ b/mariadb/index.html @@ -10,13 +10,13 @@ - - + +
-

MariaDB

MariaDB in Illa is a database integration that allows you to connect and interact with a MariaDB database. MariaDB is a popular open-source relational database management system that is derived from MySQL.

With the MariaDB integration, you can query, insert, update, and delete data from a MariaDB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MariaDB database.

Create MariaDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

Select MariaDB from the database list.

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MariaDB will display as shown.

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MariaDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MariaDB database.

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MariaDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MariaDB resource, we can add the action by selecting MariaDB from action list and choosing the Create action button.

Now we have added the MariaDB server as an action to our building page.

Configure MariaDB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

MariaDB

MariaDB in Illa is a database integration that allows you to connect and interact with a MariaDB database. MariaDB is a popular open-source relational database management system that is derived from MySQL.

With the MariaDB integration, you can query, insert, update, and delete data from a MariaDB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MariaDB database.

Create MariaDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

Select MariaDB from the database list.

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MariaDB will display as shown.

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MariaDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MariaDB database.

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MariaDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MariaDB resource, we can add the action by selecting MariaDB from action list and choosing the Create action button.

Now we have added the MariaDB server as an action to our building page.

Configure MariaDB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/menu/index.html b/menu/index.html index fbbebf392d..65080db249 100644 --- a/menu/index.html +++ b/menu/index.html @@ -10,13 +10,13 @@ - - + +
-

Menu

What is Menu?​

Menu component is a user interface element that provides a navigational structure for accessing different features, options, or sections within the ILLA Cloud application. It typically consists of a list of menu items or links that users can interact with to navigate through various pages or perform specific actions.

Properties​

PropertiesDescription
Menuactual content and options displayed within the menu component
Hiddenhides the form component from the user's view
Directionthe orientation or layout of the menu component
Alignthe positioning or alignment of the menu component within its container or parent element

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
displayNamerepresents the name or label assigned to the component
hiddenwhether the menu component is visible or hidden
horizontalAligncontrols the horizontal positioning or alignment of the menu component within its container or parent element
itemscollection of menu items or options available within the menu component
modehow the menu operates or interacts with the user
selectedValuesholds the values of the menu items that have been selected or chosen by the user.

Example: {{menu1.displayName}}

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Set the layout of the pages​

Go to the page configuration as the following steps：

pages

You can use the Preset Layouts, or manually add and delete sections to set the layout.

Step 2 Add views to a page​

View path: a string spliced after the page URL to access the specified view. After the app is deployed, the complete access address is as follows: https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}/{{page_name}}/{{view_path}}

You can also enter the homepage and default view via the following path:

https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}

add_page

Step 3 Connect menu and pages​

Add a Menu component to the top of the page.

Add event handlers to Menu items → set the Action to Set router → select the page and view

For the menu components, we can configure it to switch between pages and views

  1. Click the menu component to open its inspect page.
  2. Click an item to open its configuration.
  3. Under Event handler, click **+ New**.
  4. In the Edit event handler, select Set Router in action, and select the page and the view that you want to route to as the target of the event.

menu_items

We can do the same for other pages and view you want to route to.

Step 4 Test​

menu_test

- - +

Menu

What is Menu?​

Menu component is a user interface element that provides a navigational structure for accessing different features, options, or sections within the ILLA Cloud application. It typically consists of a list of menu items or links that users can interact with to navigate through various pages or perform specific actions.

Properties​

PropertiesDescription
Menuactual content and options displayed within the menu component
Hiddenhides the form component from the user's view
Directionthe orientation or layout of the menu component
Alignthe positioning or alignment of the menu component within its container or parent element

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
displayNamerepresents the name or label assigned to the component
hiddenwhether the menu component is visible or hidden
horizontalAligncontrols the horizontal positioning or alignment of the menu component within its container or parent element
itemscollection of menu items or options available within the menu component
modehow the menu operates or interacts with the user
selectedValuesholds the values of the menu items that have been selected or chosen by the user.

Example: {{menu1.displayName}}

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Set the layout of the pages​

Go to the page configuration as the following steps：

pages

You can use the Preset Layouts, or manually add and delete sections to set the layout.

Step 2 Add views to a page​

View path: a string spliced after the page URL to access the specified view. After the app is deployed, the complete access address is as follows: https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}/{{page_name}}/{{view_path}}

You can also enter the homepage and default view via the following path:

https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}

add_page

Step 3 Connect menu and pages​

Add a Menu component to the top of the page.

Add event handlers to Menu items → set the Action to Set router → select the page and view

For the menu components, we can configure it to switch between pages and views

  1. Click the menu component to open its inspect page.
  2. Click an item to open its configuration.
  3. Under Event handler, click **+ New**.
  4. In the Edit event handler, select Set Router in action, and select the page and the view that you want to route to as the target of the event.

menu_items

We can do the same for other pages and view you want to route to.

Step 4 Test​

menu_test

+ + \ No newline at end of file diff --git a/microsoft-sql/index.html b/microsoft-sql/index.html index 2368edf36b..c0d5c0f143 100644 --- a/microsoft-sql/index.html +++ b/microsoft-sql/index.html @@ -10,13 +10,13 @@ - - + +
-

Microsoft SQL

Microsoft SQL in Illa is a database integration that allows users to connect and interact with a Microsoft SQL (MS SQL) database. MS SQL is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the MS SQL integration in Illa, you can query, insert, update, and delete data from a MS SQL database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MS SQL database.

Create MS SQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Microsoft SQL from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MS SQL will display as shown.

ms_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Microsoft SQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MS SQL database.

ms_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '1433'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MS SQL server.
PasswordrequiredUse this password for authentication.
Connection optionoptionalkey-value pair to specify the connection option
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MS SQL resource; we can add the action by selecting MS SQL from action list and choosing the Create action button.

ms_resource_list

Now we have added the MS SQL server as an action to our building page.

ms

Configure MS SQL​

PropertiesDescription
Config Typethe type of configuration that you use to connect to your MS SQL Server database: SQL and Bulk insert. For SQL mode, you can use SQL query. For Bulk insert mode, you can insert data into a selected table with the format {{ [{x:a, y:b}, … ] }}
SQL querysql commands to fetch (select), insert, update, delete data from database.
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

Microsoft SQL

Microsoft SQL in Illa is a database integration that allows users to connect and interact with a Microsoft SQL (MS SQL) database. MS SQL is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the MS SQL integration in Illa, you can query, insert, update, and delete data from a MS SQL database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MS SQL database.

Create MS SQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Microsoft SQL from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MS SQL will display as shown.

ms_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Microsoft SQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MS SQL database.

ms_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '1433'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MS SQL server.
PasswordrequiredUse this password for authentication.
Connection optionoptionalkey-value pair to specify the connection option
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MS SQL resource; we can add the action by selecting MS SQL from action list and choosing the Create action button.

ms_resource_list

Now we have added the MS SQL server as an action to our building page.

ms

Configure MS SQL​

PropertiesDescription
Config Typethe type of configuration that you use to connect to your MS SQL Server database: SQL and Bulk insert. For SQL mode, you can use SQL query. For Bulk insert mode, you can insert data into a selected table with the format {{ [{x:a, y:b}, … ] }}
SQL querysql commands to fetch (select), insert, update, delete data from database.
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/modal/index.html b/modal/index.html index 4e7a36e21f..dbe03ff183 100644 --- a/modal/index.html +++ b/modal/index.html @@ -10,13 +10,13 @@ - - + +
-

Modal

What is Modal?​

In ILLA Cloud, the modal component is a user interface element that is used to display content, information, or actions in a focused and overlayed window. The modal component typically appears on top of the main application screen, temporarily interrupting the user's workflow and drawing their attention to the modal content.

Properties​

PropertiesDescription
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, value changes
Click mask to close modalwhether clicking on the background overlay or mask of the modal will close the modal window
Show headerwhether the component should display a header or title section
Show footerwhether the component should display a footer section
Border Colorcolor of the border that surrounds a modal component
Border Radiuscurvature of the corners of a modal component's border
Border Widththickness or width of the border surrounding a modal component
Backgrounddefines the color or image that fills the content area of a modal component

Method​

You can use other components to control the component. We support the following two methods:

  • openModal

open the modal component

  • closeModal

close the modal component

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Add Components​

Add a button component labeled "Open Modal"

Add a modal component to the canvas.

Step 2 Configure the component​

For the "Open Modal" button components, we can configure it to open the modal component if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the openModal method

open_modal

Click this button to open the modal component and you may put whatever you want in the middle area of the modal.

For the "Cancel" button component, we can configure it to close the modal if clicked

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

Similarly, we can configure the "Confirm" button to congrats

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Congrat!" and description "Congratulations!". Choose Success for type, put {{2000}} for the duration (2 seconds)

modal_confirm

Step 4 Test​

modal_test

- - +

Modal

What is Modal?​

In ILLA Cloud, the modal component is a user interface element that is used to display content, information, or actions in a focused and overlayed window. The modal component typically appears on top of the main application screen, temporarily interrupting the user's workflow and drawing their attention to the modal content.

Properties​

PropertiesDescription
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, value changes
Click mask to close modalwhether clicking on the background overlay or mask of the modal will close the modal window
Show headerwhether the component should display a header or title section
Show footerwhether the component should display a footer section
Border Colorcolor of the border that surrounds a modal component
Border Radiuscurvature of the corners of a modal component's border
Border Widththickness or width of the border surrounding a modal component
Backgrounddefines the color or image that fills the content area of a modal component

Method​

You can use other components to control the component. We support the following two methods:

  • openModal

open the modal component

  • closeModal

close the modal component

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Add Components​

Add a button component labeled "Open Modal"

Add a modal component to the canvas.

Step 2 Configure the component​

For the "Open Modal" button components, we can configure it to open the modal component if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the openModal method

open_modal

Click this button to open the modal component and you may put whatever you want in the middle area of the modal.

For the "Cancel" button component, we can configure it to close the modal if clicked

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

Similarly, we can configure the "Confirm" button to congrats

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Congrat!" and description "Congratulations!". Choose Success for type, put {{2000}} for the duration (2 seconds)

modal_confirm

Step 4 Test​

modal_test

+ + \ No newline at end of file diff --git a/mongodb/index.html b/mongodb/index.html index 4618497c22..ee4dbdb19f 100644 --- a/mongodb/index.html +++ b/mongodb/index.html @@ -10,14 +10,14 @@ - - + +
-

MongoDB

MongoDB is a popular NoSQL document-oriented database that is widely used for web applications and other data-driven software. MongoDB is designed to be flexible, scalable, and fast, and is particularly well-suited for handling large amounts of unstructured or semi-structured data.

In Illa, you can connect to a MongoDB database using the MongoDB Query Resource. This resource allows you to execute MongoDB queries directly from Illa, without having to write any code. You can use the query editor to write queries in MongoDB's native query language, which is based on JavaScript and uses a JSON-like syntax for working with documents.

Create MongoDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select MongoDB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MongoDB will display as shown.

mongo_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MongoDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MongoDB database.

mongo_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Config Typeoptionala type of collection used to store configuration data for sharded clusters.
HostnamerequiredThe URL or IP address for your database
Connection formatrequiredthe syntax used to specify the connection string for connecting to a MongoDB database or cluster.
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MongoDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MongoDB resource, we can add the action by selecting MongoDB from action list and choosing the Create action button.

mongo_resource_list

Now we have added the MongoDB server as an action to our building page.

mongodb

Configure MongoDB​

Overview​

Method NameDescription
Action Typeaggregate, bulkwrite, count, deleteMany. deleteOne, distinct, find, findOne
Collectiongroup of related documents that are stored together in a database
Transformertransforming data into the style you like using JavaScript

Aggregate​

process multiple documents and return computed results.

Input

PropertiesRequiredDescription
Aggregationoptionaldefines the operations to be performed on the data

For example, to get all the results whose size is medium=>group the results by type=>Calculate the sum of prices in each type for Aggregation:

[
    {
        "$match": { "size": "medium" }
    },
    {
        "$group": { "_id": "$type", "totalQuantity": { "$sum": "$price" } }
    }
]

Output

An array of the computed results.

mongo_agg_data

Use {{mongodb1.data[0].result}} to get all.

mongo_agg_code

Bulkwrite​

perform multiple write operations (insert, update, and delete) in a single request to the server

Input

PropertiesRequiredDescription
Operationsoptionalan object that specifies the type of operation to perform and the data to be written

An example for Operations:

[
    { "insertOne": { "document": { "_id": 3, "type": "beef", "size": "medium", "price": 6 } } },
    { "insertOne": { "document": { "_id": 4, "type": "sausage", "size": "large", "price": 10 } } },
    { "updateOne": {
            "filter": { "type": "cheese" },
            "update": { "$set": { "price": 8 } }
        }
    }
]

Output

The updated message is showing below.

mongo_bulk_data

Since this method make changes but does not return anything. There is no output data to access.

Count​

count the number of documents that match a given query in a collection

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the count operation

For example, to count the number of item with type “beef”, we may put below code into Query:

{"type":"beef"}

Output

The number of matching documents.

mongo_count_data

Use {{mongodb1.data}} to get it.

mongo_count_code

deleteMany​

delete multiple documents that match a given filter in a collection.

Input

PropertiesRequiredDescription
Filteroptionalspecifies the selection criteria for the delete operation, If not specified, all documents in this collection will be deleted.

For example, to delete apples from items. We may put code below to Filter.

 {"type":"apple"}

Output

The number of matching documents.

mongo_delete2_data

Use {{mongodb1.data[0].result.DeletedCount}} to get it. If no files are matched, the returned value will be 0.

mongo_delete2_code

deleteOne​

delete one document that match a given filter in a collection.

Input

PropertiesRequiredDescription
Filteroptionalspecifies the selection criteria for the delete operation

For example, to delete an apple from items. We may put code below to Filter.

 {"type":"apple"}

Output

Delete result.

mongo_delete1_data

Use {{mongodb1.data[0].result.DeletedCount}} to get it. If no files are matched, the returned value will be 0 (Since we deleted all the apples in deleteMany, there is no apple left, thus return 0).

mongo_delete1_code

distinct​

retrieve an array of unique values for a specified field in a collection

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the distinct operation
Fieldrequiredspecifies the field to retrieve the distinct values from.

For example, we may have {"type":"orange"} for Query and _id for Field.

Output

an array of distinct values

mongo_dist_data

Use {{mongodb1.data[0].result.map(item =>({"result":item}))}} to get the array.

mongo_dist_code

find​

retrieve documents from a collection that match a specified set of criteria

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the find operation
Projectionoptionalspecifies which fields to include or exclude in the query results
Sort Byoptionalspecify the sorting order of the returned documents
Limitoptionallimit the number of documents that are returned, default no limit. A limit of 0 is equivalent to no limit.
Skipoptionalspecify the number of documents to skip, default to 0.

For example, to find the id, price, and type of all oranges sorted by their id.

For Query, {"type": "orange"}

For Projection, {"_id": 1, "type": 1, "price": 1} +

MongoDB

MongoDB is a popular NoSQL document-oriented database that is widely used for web applications and other data-driven software. MongoDB is designed to be flexible, scalable, and fast, and is particularly well-suited for handling large amounts of unstructured or semi-structured data.

In Illa, you can connect to a MongoDB database using the MongoDB Query Resource. This resource allows you to execute MongoDB queries directly from Illa, without having to write any code. You can use the query editor to write queries in MongoDB's native query language, which is based on JavaScript and uses a JSON-like syntax for working with documents.

Create MongoDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select MongoDB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MongoDB will display as shown.

mongo_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MongoDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MongoDB database.

mongo_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Config Typeoptionala type of collection used to store configuration data for sharded clusters.
HostnamerequiredThe URL or IP address for your database
Connection formatrequiredthe syntax used to specify the connection string for connecting to a MongoDB database or cluster.
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MongoDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MongoDB resource, we can add the action by selecting MongoDB from action list and choosing the Create action button.

mongo_resource_list

Now we have added the MongoDB server as an action to our building page.

mongodb

Configure MongoDB​

Overview​

Method NameDescription
Action Typeaggregate, bulkwrite, count, deleteMany. deleteOne, distinct, find, findOne
Collectiongroup of related documents that are stored together in a database
Transformertransforming data into the style you like using JavaScript

Aggregate​

process multiple documents and return computed results.

Input

PropertiesRequiredDescription
Aggregationoptionaldefines the operations to be performed on the data

For example, to get all the results whose size is medium=>group the results by type=>Calculate the sum of prices in each type for Aggregation:

[
    {
        "$match": { "size": "medium" }
    },
    {
        "$group": { "_id": "$type", "totalQuantity": { "$sum": "$price" } }
    }
]

Output

An array of the computed results.

mongo_agg_data

Use {{mongodb1.data[0].result}} to get all.

mongo_agg_code

Bulkwrite​

perform multiple write operations (insert, update, and delete) in a single request to the server

Input

PropertiesRequiredDescription
Operationsoptionalan object that specifies the type of operation to perform and the data to be written

An example for Operations:

[
    { "insertOne": { "document": { "_id": 3, "type": "beef", "size": "medium", "price": 6 } } },
    { "insertOne": { "document": { "_id": 4, "type": "sausage", "size": "large", "price": 10 } } },
    { "updateOne": {
            "filter": { "type": "cheese" },
            "update": { "$set": { "price": 8 } }
        }
    }
]

Output

The updated message is showing below.

mongo_bulk_data

Since this method make changes but does not return anything. There is no output data to access.

Count​

count the number of documents that match a given query in a collection

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the count operation

For example, to count the number of item with type “beef”, we may put below code into Query:

{"type":"beef"}

Output

The number of matching documents.

mongo_count_data

Use {{mongodb1.data}} to get it.

mongo_count_code

deleteMany​

delete multiple documents that match a given filter in a collection.

Input

PropertiesRequiredDescription
Filteroptionalspecifies the selection criteria for the delete operation, If not specified, all documents in this collection will be deleted.

For example, to delete apples from items. We may put code below to Filter.

 {"type":"apple"}

Output

The number of matching documents.

mongo_delete2_data

Use {{mongodb1.data[0].result.DeletedCount}} to get it. If no files are matched, the returned value will be 0.

mongo_delete2_code

deleteOne​

delete one document that match a given filter in a collection.

Input

PropertiesRequiredDescription
Filteroptionalspecifies the selection criteria for the delete operation

For example, to delete an apple from items. We may put code below to Filter.

 {"type":"apple"}

Output

Delete result.

mongo_delete1_data

Use {{mongodb1.data[0].result.DeletedCount}} to get it. If no files are matched, the returned value will be 0 (Since we deleted all the apples in deleteMany, there is no apple left, thus return 0).

mongo_delete1_code

distinct​

retrieve an array of unique values for a specified field in a collection

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the distinct operation
Fieldrequiredspecifies the field to retrieve the distinct values from.

For example, we may have {"type":"orange"} for Query and _id for Field.

Output

an array of distinct values

mongo_dist_data

Use {{mongodb1.data[0].result.map(item =>({"result":item}))}} to get the array.

mongo_dist_code

find​

retrieve documents from a collection that match a specified set of criteria

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the find operation
Projectionoptionalspecifies which fields to include or exclude in the query results
Sort Byoptionalspecify the sorting order of the returned documents
Limitoptionallimit the number of documents that are returned, default no limit. A limit of 0 is equivalent to no limit.
Skipoptionalspecify the number of documents to skip, default to 0.

For example, to find the id, price, and type of all oranges sorted by their id.

For Query, {"type": "orange"}

For Projection, {"_id": 1, "type": 1, "price": 1} For Sort By, {"_id":1}

Note: replace “1” with “true” still do it!

Output

An array of objects of documents

mongo_find_data

Use {{mongodb1.data[0].result}} to get the array.

mongo_find_code

findOne​

retrieve the first document from a collection that match a specified set of criteria

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the find operation
Projectionoptionalspecifies which fields to include or exclude in the query results
Skipoptionalspecify the number of documents to skip, default to 0.

For example, to find the id, price, and type of all oranges sorted by their id.

For Query, {"type": "orange"}

For Projection, {"_id": 1, "type": 1, "price": 1}

Note: replace “1” with “true” still do it!

Output

An array of objects of documents

mongo_find1_data

Use {{[mongodb1.data[0].result]}} to get the array.

mongo_find1_code

- - + + \ No newline at end of file diff --git a/multi-select/index.html b/multi-select/index.html index 9ae9115657..b5ad70a18c 100644 --- a/multi-select/index.html +++ b/multi-select/index.html @@ -10,13 +10,13 @@ - - + +
-

Multi-select

Multi-select​

The multi-select component can be useful in situations where multiple options need to be selected from a list. This can allow for more efficient data entry and filtering. The component can be configured with various properties to achieve different effects and also supports methods and event handlers for more customization.

You can add options manually or in bulk from your data source. In this article, we will introduce in detail how to use the multi-select component.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Choose at leastSet the minimum number of options to choose
Choose up toSet the maximum number of options to choose
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HeightHow to set the height to fit
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{[”value1”,”value3”…]}}

PropertiesDescription
ValueAn array of selected option values.

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the multi-select component.

Data​

The multi-select component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valuean array of selected option values

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the multi-select component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}

What’s more​

You can add or delete options by adding or deleting rows to the selection table.

- - +

Multi-select

Multi-select​

The multi-select component can be useful in situations where multiple options need to be selected from a list. This can allow for more efficient data entry and filtering. The component can be configured with various properties to achieve different effects and also supports methods and event handlers for more customization.

You can add options manually or in bulk from your data source. In this article, we will introduce in detail how to use the multi-select component.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Choose at leastSet the minimum number of options to choose
Choose up toSet the maximum number of options to choose
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HeightHow to set the height to fit
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{[”value1”,”value3”…]}}

PropertiesDescription
ValueAn array of selected option values.

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the multi-select component.

Data​

The multi-select component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valuean array of selected option values

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the multi-select component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}

What’s more​

You can add or delete options by adding or deleting rows to the selection table.

+ + \ No newline at end of file diff --git a/mysql/index.html b/mysql/index.html index 9a4a491f7d..ae2ebba7fb 100644 --- a/mysql/index.html +++ b/mysql/index.html @@ -10,13 +10,13 @@ - - + +
-

MySQL

MySQL in Illa is a database integration that allows you to connect and interact with a MySQL database. MySQL is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the MySQL integration in Illa, you can query, insert, update, and delete data from a MySQL database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MySQL database.

Create MySQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select MySQL from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MySQL will display as shown.

my_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MySQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MySQL database.

my_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MySQL server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MySQL resource, we can add the action by selecting MySQL from action list and choosing the Create action button.

my_resource_list

Now we have added the MySQL server as an action to our building page.

my

Configure MySQL​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

MySQL

MySQL in Illa is a database integration that allows you to connect and interact with a MySQL database. MySQL is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the MySQL integration in Illa, you can query, insert, update, and delete data from a MySQL database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MySQL database.

Create MySQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select MySQL from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MySQL will display as shown.

my_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MySQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MySQL database.

my_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MySQL server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MySQL resource, we can add the action by selecting MySQL from action list and choosing the Create action button.

my_resource_list

Now we have added the MySQL server as an action to our building page.

my

Configure MySQL​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/neon/index.html b/neon/index.html index bc60049a17..77d82f0bf1 100644 --- a/neon/index.html +++ b/neon/index.html @@ -10,13 +10,13 @@ - - + +
-

Neon

Neon in Illa is a database integration that allows you to connect and interact with a Neon database. Neon is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Neon integration in Illa, you can query, insert, update, and delete data from a Neon database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Neon database.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Neon in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Neon, visit their website at https://neon.tech/ Let's begin!

Set up your Back end on Neon​

On the Neon dashboard, click New project and set the name to adminPanel.

neon_create_project

Then we can navigate to the project page.

neon_create_project_1

Importing data through sample SQL queries.

neon_create_sql

We now have sample database set up.

neon_sample_data

Create Neon​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Neon from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Neon will display as shown.

neon_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Neon from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Neon database.

neon_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Connection stringoptionala configuration setting that is used to specify the details of a connection to an external data source, such as a database or API.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Neon server.
PasswordrequiredUse this password for authentication.

There are two ways to fill in the information for configuring Neon.

  • Parsing given connection string

In Neon project page, scrolling done, we have a given connection string in Direct Connection.

neon_connection

Note: Tapping the blur shows the hidden numbers, then we may copy it.

After pasting the string into the connection string text area in configuration, click Parse.

neon_parsing

We have all the information filled out automatically for us.

neon_parse_done

  • Manually Fill out the information.

We can also find required information from the project page and manually fill them in to the configuration in Illa.

Create Actions​

We have created a Neon resource, we can add the action by selecting Neon from action list and choosing the Create action button.

neon_resource_list

Now we have added the Neon server as an action to our building page.

neon

Configure Neon​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first }}'
  WHERE id = {{ form1.updatedProfile.uid }};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

Neon

Neon in Illa is a database integration that allows you to connect and interact with a Neon database. Neon is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Neon integration in Illa, you can query, insert, update, and delete data from a Neon database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Neon database.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Neon in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Neon, visit their website at https://neon.tech/ Let's begin!

Set up your Back end on Neon​

On the Neon dashboard, click New project and set the name to adminPanel.

neon_create_project

Then we can navigate to the project page.

neon_create_project_1

Importing data through sample SQL queries.

neon_create_sql

We now have sample database set up.

neon_sample_data

Create Neon​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Neon from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Neon will display as shown.

neon_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Neon from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Neon database.

neon_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Connection stringoptionala configuration setting that is used to specify the details of a connection to an external data source, such as a database or API.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Neon server.
PasswordrequiredUse this password for authentication.

There are two ways to fill in the information for configuring Neon.

  • Parsing given connection string

In Neon project page, scrolling done, we have a given connection string in Direct Connection.

neon_connection

Note: Tapping the blur shows the hidden numbers, then we may copy it.

After pasting the string into the connection string text area in configuration, click Parse.

neon_parsing

We have all the information filled out automatically for us.

neon_parse_done

  • Manually Fill out the information.

We can also find required information from the project page and manually fill them in to the configuration in Illa.

Create Actions​

We have created a Neon resource, we can add the action by selecting Neon from action list and choosing the Create action button.

neon_resource_list

Now we have added the Neon server as an action to our building page.

neon

Configure Neon​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first }}'
  WHERE id = {{ form1.updatedProfile.uid }};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/number-input/index.html b/number-input/index.html index 32a51f45cd..cd0e85dacb 100644 --- a/number-input/index.html +++ b/number-input/index.html @@ -10,13 +10,13 @@ - - + +
-

Number input

What is Number Input?​

The number Input component is a user interface element that allows users to enter and edit the number in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
Decimal placespecify the number of decimal places that can be entered in the number input.
Minimumminimum value that can be entered in the number input
Maximummaximum value that can be entered in the number input
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
Loadingmaximum value that can be entered in the number input
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • focus

When the focus method is called, the number input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

  • setValue

To set the number input value, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit from focusing on the component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the number input component.
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxthe value of maximum
minthe value of minimum
placeholderplaceholder value
prefixvalue of the prefix
suffixvalue of the suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{numberInput1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to number input with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

'111.txt' with the number '111' as its data. This is the value we want to show in number input.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 111.txt for **Object Key.**

Click Save and Run to activate this action.

s3output

Step 2 Add Components​

Next, we can add a number input component and a button component to the canvas.

We set the default value of numberInput to be 1 and labeled the button as 'Set value' as shown below

default1

Step 3 Configure the component​

For the button component, we can configure it to set the value in number input component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the numberInput1 component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

number_input_button_config

Step 4 Test​

Now that when you click the 'Set value' button, the value should change to 111.

number_input_test

- - +

Number input

What is Number Input?​

The number Input component is a user interface element that allows users to enter and edit the number in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
Decimal placespecify the number of decimal places that can be entered in the number input.
Minimumminimum value that can be entered in the number input
Maximummaximum value that can be entered in the number input
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
Loadingmaximum value that can be entered in the number input
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • focus

When the focus method is called, the number input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

  • setValue

To set the number input value, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit from focusing on the component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the number input component.
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxthe value of maximum
minthe value of minimum
placeholderplaceholder value
prefixvalue of the prefix
suffixvalue of the suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{numberInput1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to number input with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

'111.txt' with the number '111' as its data. This is the value we want to show in number input.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 111.txt for **Object Key.**

Click Save and Run to activate this action.

s3output

Step 2 Add Components​

Next, we can add a number input component and a button component to the canvas.

We set the default value of numberInput to be 1 and labeled the button as 'Set value' as shown below

default1

Step 3 Configure the component​

For the button component, we can configure it to set the value in number input component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the numberInput1 component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

number_input_button_config

Step 4 Test​

Now that when you click the 'Set value' button, the value should change to 111.

number_input_test

+ + \ No newline at end of file diff --git a/oracledb/index.html b/oracledb/index.html index bbcf4de8d7..8cabcf0679 100644 --- a/oracledb/index.html +++ b/oracledb/index.html @@ -10,13 +10,13 @@ - - + +
-

Oracle DB

Oracle DB in Illa is a database integration that allows you to connect and interact with a Oracle DB database. Oracle DB is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Oracle DB integration in Illa, you can query, insert, update, and delete data from a Oracle DB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Oracle DB database.

Create Oracle DB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Oracle DB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Oracle DB will display as shown.

oracle_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Oracle DB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Oracle DB database.

oracle_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Treat Database name asrequiredidentify a database instance with SID or Service Name.
Usernamerequiredthe username you wish to use when logging in to the Oracle DB server.
PasswordrequiredUse this password for authentication.
SSLrequireddecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created an Oracle DB resource, we can add the action by selecting Oracle DB from action list and choosing the Create action button.

oracle_resource_list

Now we have added the Oracle DB server as an action to our building page.

oracle

Configure Oracle DB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

Oracle DB

Oracle DB in Illa is a database integration that allows you to connect and interact with a Oracle DB database. Oracle DB is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Oracle DB integration in Illa, you can query, insert, update, and delete data from a Oracle DB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Oracle DB database.

Create Oracle DB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Oracle DB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Oracle DB will display as shown.

oracle_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Oracle DB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Oracle DB database.

oracle_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Treat Database name asrequiredidentify a database instance with SID or Service Name.
Usernamerequiredthe username you wish to use when logging in to the Oracle DB server.
PasswordrequiredUse this password for authentication.
SSLrequireddecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created an Oracle DB resource, we can add the action by selecting Oracle DB from action list and choosing the Create action button.

oracle_resource_list

Now we have added the Oracle DB server as an action to our building page.

oracle

Configure Oracle DB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/page/index.html b/page/index.html index 744f1b4875..c770caf0a6 100644 --- a/page/index.html +++ b/page/index.html @@ -10,13 +10,13 @@ - - + +
-

Page

​

A multi-page demo built on ILLA:

A single-page application is an app that can change pages without reloading all components on the page. Most resources(including HTML, CSS and Script) are only loaded once throughout the application's lifecycle, making a single-page application fast.

In a multi-page application, every change, such as displaying the data or submitting data back to the server requests rendering a new page from the server. The multi-page application has a few levels, which makes the application structure simple and straightforward for users.

In ILLA Builder, a single-page application can be built by setting the frame of the page and adding views to sections, and a multi-page application can be built by adding multiple pages, and developers can use both of these two design patterns in one application.

Set the layout of the pages​

Go to the page configuration as the following steps：

You can use the Preset Layouts, or manually add and delete sections to set the layout.

Add views to a page​

View path: a string spliced after the page URL to access the specified view. After the app is deployed, the complete access address is as follows: https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}/{{page_name}}/{{view_path}}

You can also enter the homepage and default view via the following path:

https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}.

Connect menu and pages​

Add event handlers to Menu items → set the Action to Set router → select the page and view

- - +

Page

​

A multi-page demo built on ILLA:

A single-page application is an app that can change pages without reloading all components on the page. Most resources(including HTML, CSS and Script) are only loaded once throughout the application's lifecycle, making a single-page application fast.

In a multi-page application, every change, such as displaying the data or submitting data back to the server requests rendering a new page from the server. The multi-page application has a few levels, which makes the application structure simple and straightforward for users.

In ILLA Builder, a single-page application can be built by setting the frame of the page and adding views to sections, and a multi-page application can be built by adding multiple pages, and developers can use both of these two design patterns in one application.

Set the layout of the pages​

Go to the page configuration as the following steps：

You can use the Preset Layouts, or manually add and delete sections to set the layout.

Add views to a page​

View path: a string spliced after the page URL to access the specified view. After the app is deployed, the complete access address is as follows: https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}/{{page_name}}/{{view_path}}

You can also enter the homepage and default view via the following path:

https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}.

Connect menu and pages​

Add event handlers to Menu items → set the Action to Set router → select the page and view

+ + \ No newline at end of file diff --git a/pdf/index.html b/pdf/index.html index 23d16b5aea..e77c4cfe1e 100644 --- a/pdf/index.html +++ b/pdf/index.html @@ -10,13 +10,13 @@ - - + +
-

PDF

What is PDF?​

The PDF component is a feature or element that allows users to view and interact with PDF documents within the application. It provides functionality for rendering, navigating, and manipulating PDF files, enabling users to access and work with PDF content seamlessly.

Properties​

PropertiesDescription
PDF sourcespecify the source of the pdf to be displayed
Show tool barcontrols the visibility of the toolbar within the PDF component
Tooltipadd a tooltip or a descriptive text that appears when the user hovers over the pdf
Scale page todetermines the scaling behavior of the PDF pages within the component
Hiddendetermines the visibility of the PDF component

Method​

You can use other components to control the component. We support the following methods:

  • setFileUrl

dynamically change the source or URL of the pdf file.

PropertiesDescription
PDF Sourcepdf source url

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
displayNameA string value that represents the name or title of the pdf.
heightthe vertical dimension or size of the PDF component
hiddenA boolean value that determines whether the pdf component is hidden from the user interface.
scaleModespecifies how the PDF document is scaled or fit within the available display area of the component
showToolBarwhether a toolbar or control panel is displayed along with the PDF component
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the pdf component.
urlsource of the PDF file to be displayed in the component
widththe horizontal dimension or size of the PDF component

Example: {{pdf1.displayName}}

Use case​

Next, we will demonstrate how to control the pdf display with a button.

Step 1 Add Components​

Add a PDF component and a button component to the canvas.

pdf_layout

Step 2 Configure the component​

For the button component, we can configure it to set the image source of the PDF component to a pdf address.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the PDF component that you want to change as the target of the event.
  3. Choose the setFileUrl action
  4. Put the new image address in the Value field

pdf_config

Step 3 Test​

Now that when you click the "Play" button, the image should switch

pdf_test

- - +

PDF

What is PDF?​

The PDF component is a feature or element that allows users to view and interact with PDF documents within the application. It provides functionality for rendering, navigating, and manipulating PDF files, enabling users to access and work with PDF content seamlessly.

Properties​

PropertiesDescription
PDF sourcespecify the source of the pdf to be displayed
Show tool barcontrols the visibility of the toolbar within the PDF component
Tooltipadd a tooltip or a descriptive text that appears when the user hovers over the pdf
Scale page todetermines the scaling behavior of the PDF pages within the component
Hiddendetermines the visibility of the PDF component

Method​

You can use other components to control the component. We support the following methods:

  • setFileUrl

dynamically change the source or URL of the pdf file.

PropertiesDescription
PDF Sourcepdf source url

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
displayNameA string value that represents the name or title of the pdf.
heightthe vertical dimension or size of the PDF component
hiddenA boolean value that determines whether the pdf component is hidden from the user interface.
scaleModespecifies how the PDF document is scaled or fit within the available display area of the component
showToolBarwhether a toolbar or control panel is displayed along with the PDF component
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the pdf component.
urlsource of the PDF file to be displayed in the component
widththe horizontal dimension or size of the PDF component

Example: {{pdf1.displayName}}

Use case​

Next, we will demonstrate how to control the pdf display with a button.

Step 1 Add Components​

Add a PDF component and a button component to the canvas.

pdf_layout

Step 2 Configure the component​

For the button component, we can configure it to set the image source of the PDF component to a pdf address.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the PDF component that you want to change as the target of the event.
  3. Choose the setFileUrl action
  4. Put the new image address in the Value field

pdf_config

Step 3 Test​

Now that when you click the "Play" button, the image should switch

pdf_test

+ + \ No newline at end of file diff --git a/postgresql/index.html b/postgresql/index.html index 810f69aa96..89f66a36c6 100644 --- a/postgresql/index.html +++ b/postgresql/index.html @@ -10,13 +10,13 @@ - - + +
-

PostgreSQL

PostgreSQL in Illa is a database integration that allows you to connect and interact with a PostgreSQL database. PostgreSQL is a popular open-source relational database management system that is known for its stability, reliability, and powerful features.

With the PostgreSQL integration in Illa, you can query, insert, update, and delete data from a PostgreSQL database using SQL commands. You can also create custom SQL queries and run them within Illa action. This makes it easy to build data-driven applications and dashboards that display real-time data from a PostgreSQL database.

Create PostgreSQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select PostgreSQL from the database list.

action_list

Connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready PostgreSQL will display as shown.

ex_post_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select PostgreSQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to PostgreSQL database.

post_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the PostgreSQL server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a PostgreSQL resource, we can add the action by selecting PostgreSQL from action list and choosing the Create action button.

post_resource_list

Now we have added the PostgreSQL server as an action to our building page.

post

Configure PostgreSQL​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +
Skip to main content

PostgreSQL

PostgreSQL in Illa is a database integration that allows you to connect and interact with a PostgreSQL database. PostgreSQL is a popular open-source relational database management system that is known for its stability, reliability, and powerful features.

With the PostgreSQL integration in Illa, you can query, insert, update, and delete data from a PostgreSQL database using SQL commands. You can also create custom SQL queries and run them within Illa action. This makes it easy to build data-driven applications and dashboards that display real-time data from a PostgreSQL database.

Create PostgreSQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select PostgreSQL from the database list.

action_list

Connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready PostgreSQL will display as shown.

ex_post_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select PostgreSQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to PostgreSQL database.

post_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the PostgreSQL server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a PostgreSQL resource, we can add the action by selecting PostgreSQL from action list and choosing the Create action button.

post_resource_list

Now we have added the PostgreSQL server as an action to our building page.

post

Configure PostgreSQL​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/privacy-policy/index.html b/privacy-policy/index.html index 41ee66b019..f703d7c645 100644 --- a/privacy-policy/index.html +++ b/privacy-policy/index.html @@ -10,14 +10,14 @@ - - + +
-
Skip to main content

Privacy Policy

Last updated: 2023-11-06

Your privacy is important to us. This Privacy Policy explains our practices regarding the collection, use and disclosure of information that we receive through our Services. This Privacy Policy does not apply to any third-party websites, services or applications, even if they are accessible through our Services.

In this Privacy Policy:

  1. We’ll refer to our website as the “Site”.

  2. We’ll refer to all the products and services we provide, individually and collectively, as the “Services”.

  3. We’ll refer to you, the person or entity accessing our Site or using our Services, as “you” or “your” or (if you are a purchaser of our Services), our “customer”.

Definitions​

Data Controller: For general data protection regulation purposes, the “Data Controller” means the organization who decides the purposes for which, and the way in which, any Personal Information is processed. Our customers are the Data Controllers.

Data Processor: A “Data Processor” is an organization which processes Personal Information for a Data Controller. We are the Data Processor for our customers. As a Data Processor, we are bound by the requirements of the General Data Protection Regulations (the “GDPR”).

Data Processing: Data processing is any operation or set of operations (whether automated or not) performed upon Personal Information. Examples of data processing explicitly listed in the text of the GDPR are: collection, recording, organizing, structuring, storing, adapting, altering, retrieving, consulting, using, disclosing by transmission, disseminating or making available, aligning or combining, restricting, erasure or destruction.

Personal Information: Personal information is any information which is about you, from which you can be identified. Personal Information includes information such as an individual's name, address, telephone number, or e-mail address. Personal Information also includes information about an individual's activities, such as information about his or her activity on Site or our Services, and demographic information, such as date of birth, gender, geographic area, and preferences, when any of this information is linked to personal information that identifies that individual. Personal Information does not include "aggregate" or other non-personally identifiable information. Aggregate information is information that we collect about a group or category of products, services, or users that is not personally identifiable or from which individual identities are removed.

How do we collect Personal Information?​

In our service as a Data Processor, we collect Personal Information from Data Controllers in several ways:

  1. Information you provide to us directly.

  2. Information we may receive from third parties.

  3. We may receive information about you, including Personal information, from other third parties, and may combine this information with other personal information we maintain about you. If we do so, this Privacy Policy governs any combined information that we maintain in personally identifiable format.

What information do we collect?​

We may collect the following types of personal information from you:

  1. Account information within ILLA: user ID, username, and email address.
  2. Team information within ILLA: Team Identifier, team name, etc.
  3. Information about your use of our website and services: IP address, device type, screen resolution, browser type, operating system name and version, and language. This information may also include usage data, including pages accessed and links clicked on our website, the amount of time spent on those pages, and the pages referred or recommended to you.
  4. Your usage data within ILLA, such as pages accessed and features clicked on ILLA. +

    Privacy Policy

    Last updated: 2023-11-06

    Your privacy is important to us. This Privacy Policy explains our practices regarding the collection, use and disclosure of information that we receive through our Services. This Privacy Policy does not apply to any third-party websites, services or applications, even if they are accessible through our Services.

    In this Privacy Policy:

    1. We’ll refer to our website as the “Site”.

    2. We’ll refer to all the products and services we provide, individually and collectively, as the “Services”.

    3. We’ll refer to you, the person or entity accessing our Site or using our Services, as “you” or “your” or (if you are a purchaser of our Services), our “customer”.

    Definitions​

    Data Controller: For general data protection regulation purposes, the “Data Controller” means the organization who decides the purposes for which, and the way in which, any Personal Information is processed. Our customers are the Data Controllers.

    Data Processor: A “Data Processor” is an organization which processes Personal Information for a Data Controller. We are the Data Processor for our customers. As a Data Processor, we are bound by the requirements of the General Data Protection Regulations (the “GDPR”).

    Data Processing: Data processing is any operation or set of operations (whether automated or not) performed upon Personal Information. Examples of data processing explicitly listed in the text of the GDPR are: collection, recording, organizing, structuring, storing, adapting, altering, retrieving, consulting, using, disclosing by transmission, disseminating or making available, aligning or combining, restricting, erasure or destruction.

    Personal Information: Personal information is any information which is about you, from which you can be identified. Personal Information includes information such as an individual's name, address, telephone number, or e-mail address. Personal Information also includes information about an individual's activities, such as information about his or her activity on Site or our Services, and demographic information, such as date of birth, gender, geographic area, and preferences, when any of this information is linked to personal information that identifies that individual. Personal Information does not include "aggregate" or other non-personally identifiable information. Aggregate information is information that we collect about a group or category of products, services, or users that is not personally identifiable or from which individual identities are removed.

    How do we collect Personal Information?​

    In our service as a Data Processor, we collect Personal Information from Data Controllers in several ways:

    1. Information you provide to us directly.

    2. Information we may receive from third parties.

    3. We may receive information about you, including Personal information, from other third parties, and may combine this information with other personal information we maintain about you. If we do so, this Privacy Policy governs any combined information that we maintain in personally identifiable format.

    What information do we collect?​

    We may collect the following types of personal information from you:

    1. Account information within ILLA: user ID, username, and email address.
    2. Team information within ILLA: Team Identifier, team name, etc.
    3. Information about your use of our website and services: IP address, device type, screen resolution, browser type, operating system name and version, and language. This information may also include usage data, including pages accessed and links clicked on our website, the amount of time spent on those pages, and the pages referred or recommended to you.
    4. Your usage data within ILLA, such as pages accessed and features clicked on ILLA. Information you publish to or collect from other users of the service, such as page size and
    5. App ID of the App you publish. We use this information to operate, maintain, and provide you with the features and functionality of our service.

    Detailed information on the processing of Personal Data​

    Personal Data is collected for the following purposes and using the following services:

    1. Analytics The services contained in this section enable the Owner to monitor and analyze web traffic and can be used to keep track of User behavior. Google Analytics (Google LLC) Google Analytics is a web analysis service provided by Google LLC (“Google”). Google utilizes the Data collected to track and examine the use of ILLA, to prepare reports on its activities and share them with other Google services. Google may use the Data collected to contextualize and personalize the ads of its own advertising network. Personal Data processed: Mixpanel. Place of processing: United States.
    2. Registration and authentication By registering or authenticating, users allow ILLA to identify them and give them access to dedicated services. Depending on what is described below, third parties may provide registration and authentication services. In this case, ILLA will be able to access some Data, stored by these third-party services, for registration or identification purposes. Some of the services listed below may also collect Personal Data for targeting and profiling purposes; to find out more, please refer to the description of each service. GitHub OAuth (GitHub Inc.) GitHub OAuth is a registration and authentication service provided by GitHub Inc. and is connected to the GitHub network.

    ILLA’s use and transfer to any other app of information received from Google APIs will adhere to the Google API Services User Data Policy, including the Limited Use requirements.

    What do we use Google data for?​

    When you want to connect ILLA Cloud to Google Sheets, we will request access to Google API to retrieve data from your Google Drive and Google Sheets. The specific requests and usage are as follows:

    1. To connect to Google Sheets using OAuth in read and write mode, we will request access to the following three APIs:
      • https://www.googleapis.com/auth/drive
      • https://www.googleapis.com/auth/spreadsheets
      • https://www.googleapis.com/auth/drive.file

    ILLA Cloud uses these three APIs for the following purposes:

    • We use https://www.googleapis.com/auth/drive to set your Drive access permission to read-only. This allows you and your users to read, create, modify, and delete files when accessing Google Sheets through ILLA Cloud.
    • We use https://www.googleapis.com/auth/spreadsheets to access your spreadsheets. This enables you and your users to perform read, add, delete, and modify operations on spreadsheet data through ILLA Cloud.
    • We use https://www.googleapis.com/auth/drive.file to list the accessible file names in your Drive. This helps you and your users quickly select the files they want to work with.
    1. To connect to Google Sheets using OAuth in read-only mode, we will request access to the following two APIs:
      • https://www.googleapis.com/auth/drive.readonly
      • https://www.googleapis.com/auth/spreadsheets.readonly

    ILLA Cloud uses these three APIs for the following purposes:

    • We use https://www.googleapis.com/auth/drive.readonly to set your Drive access permission to read-only. This allows you and your users to read files and no way to create, modify, and delete files when accessing Google Sheets through ILLA Cloud.
    • We use https://www.googleapis.com/auth/spreadsheets.readonly to access your spreadsheets. This enables you and your users to read data and no way to add, delete, and modify data in spreadsheet through ILLA Cloud.

    We do not store your data, and each time the data is displayed, it is directly fetched and shown to you through the API. Additionally, ILLA does not share your connection to Google data with any third parties through any means.

    What do we use your Personal Information for?​

    We will use your Personal Information, in compliance with this Privacy Policy, to help us deliver the Services to you. Any of the information we collect from you may be used in the following ways:

    1. To operate, maintain, and provide to you the features and functionality of the Services.

    2. To compile statistics and analysis about use of our Site and our Services.

    3. To personalize your experience.

    4. To improve our Site and our Services — we continually strive to improve our site offerings based on the information and feedback we receive from you.

    5. To improve customer service — your Personal Information helps us to more effectively respond to your customer service requests and support needs.

    6. To send periodic emails — The email address you provide may be used to send you information, notifications that you request about changes to our Services, to alert you of updates, and to send periodic emails containing information relevant to your account.

    7. If you purchase our Services, then to enable you to purchase, renew and appropriately use a commercial license to our Services.

    8. We may also use Personal Information you provide to send you email marketing about ILLA products and services, invite you to participate in events or surveys, or otherwise communicate with you for marketing purposes. We allow you to opt-out from receiving marketing communications from us as described in the "Your Choices" section below.

    9. We may need your Google OAuth to read your data in Google Sheets when you use the Google Sheets resource.

    We may also use your Personal Information where necessary for us to comply with a legal obligation, including to share information with government and regulatory authorities when required by law or in response to legal process, obligation, or request.

    We cooperate with government and law enforcement officials or private parties to enforce and comply with the law. We may disclose your Personal Information to government or law enforcement officials or private parties as we believe necessary or appropriate: (i) to respond to claims, legal process (including subpoenas); (ii) to protect our property, rights and safety and the property, rights and safety of a third party or the public in general; and (iii) to stop any activity that we consider illegal, unethical or legally actionable activity.

    We will request your consent before we use or disclose your Personal Information for a materially different purpose than those set forth in this Policy.

    Your Choices About Your Personal Information​

    We may use the information we collect or receive to communicate directly with you. We may send email marketing communications about ILLA. If you do not want to receive such email messages, you will be given the option to opt out. We will try to comply with your request(s) as soon as reasonably practical. Additionally, even after you opt out from receiving marketing messages from us, you will continue to receive administrative messages from us regarding our Services (e.g., account verification, purchase and billing confirmations and reminders, changes/updates to features of the Service, technical and security notices).

    Protection of Personal Information​

    At ILLA, we understand the importance of safeguarding your data. As part of our commitment to privacy, we integrate various services, including AI models, to enhance your experience. However, it is important to note that we will NEVER share your data in ILLA with any AI models. Your data remains strictly confidential and will only be used for the purposes of providing the integrated services you choose to connect and use within ILLA. We prioritize the security and privacy of your information, ensuring that it is handled with utmost care and in accordance with our updated privacy policy.

    ILLA cares about the security of your Personal Information, and we make reasonable efforts to ensure a level of security appropriate to the risk associated with the processing of your Personal Information. We maintain organizational, technical, and administrative procedures designed to protect your Personal Information against unauthorized access, deletion, loss, alteration, and misuse. Unfortunately, no data transmission or storage system can be guaranteed to be 100% secure. If you believe that your interaction with us is not secure, please contact us immediately.

    You are responsible for maintaining the secrecy of your unique password and account information, and for controlling access to your email communications from ILLA. Your privacy settings may also be affected by changes to the functionality of third-party sites and services that you add to the ILLA Service, such as single sign on. ILLA is not responsible for the functionality or security measures of any third party. Upon becoming aware of a breach of your Personal Information, we will notify you as quickly as we can and will provide timely information relating to the breach as it becomes known in accordance with any applicable laws and regulations or as is reasonably requested by you.

    Cookies​

    We didn't use cookies to remember information. At present, there is no industry standard for recognizing Do Not Track browser signals, so we do not currently respond to them.

    Who at ILLA may access your Personal Information?​

    Designated members of our staff may access Personal Information to help our customers with any questions they have, including help using our Services, investigating security issues, or following up on bug fixes with a customer. This activity is logged in our system for compliance, and we maintain different levels of access for its employees depending on their role in our company.

    Do we disclose any information to outside parties?​

    Except as set out below, we do not sell, trade, or otherwise transfer to outside parties your Personal Information.

    1. We may share your Personal Information with other companies owned by or under common ownership as ILLA, which also includes our subsidiaries (i.e., any organization we own or control).

    2. These companies will use your Personal Information in the same way as we can under this Privacy Policy, unless otherwise specified.

    3. We may disclose your Personal Information to third-party service providers (for example, drivePayment processing and data storage and processing facilities) that we use to provide the Services.

    4. We limit the Personal Information provided to these service providers to that which is reasonably necessary for them to perform their functions, and we require them to agree to maintain the confidentiality of such Personal Information.

    5. We may contract with third-party service providers to assist us in better understanding our Site visitors.

    6. These service providers are not permitted to use the information collected on our behalf except to help us conduct and improve our business.

    7. We may also release your Personal Information when we believe release is appropriate to comply with the law, enforce our site policies, or protect our or others’ rights, property, or safety.

    8. In particular, we may release your Personal Information to third parties as required to (i) satisfy any applicable law, regulation, subpoena/court order, legal process or other government request, (ii) enforce our Terms of Service, including the investigation of potential violations thereof, (iii) investigate and defend ourselves against any third party claims or allegations, (iv) protect against harm to the rights, property or safety of ILLA, its users or the public as required or permitted by law and (v) detect, prevent or otherwise address criminal (including fraud or stalking), security or technical issues.

    9. If you enable a public sharing of your ILLA applications, any information or content that you voluntarily disclose in your application becomes available to the public. If you remove information that you posted to the Services, copies may remain viewable in cached and archived pages of the Service, or if other users of the Services have copied or saved that information.

    10. In the event that we enter into, or intend to enter into, a transaction that alters the structure of our business, such as a merger, reorganization, joint venture, assignment, sale, or change of ownership, we may share Personal Information for the purpose of facilitating and completing the transaction.

    How do we handle global transfers and processing of your Personal Information?​

    Personal Information may be stored and processed in any country where we have operations, or where we engage service providers. This means that we may collect your Personal Information from, transfer it to, and store and process it in the United States and other countries outside of where you live. For example, some of our third-party providers may be located in different countries. Where this is the case, we will take steps to make sure the right security measures are taken so that your privacy rights continue to be protected as outlined in this Privacy Policy. By submitting your Personal Information, you’re agreeing to this transfer, storing or processing.

    If you are located in the European Union or other regions with laws governing data collection and use that may differ from U.S. law, please note that we may transfer information, including Personal Information, to a country and jurisdiction that does not have the same data protection laws as your jurisdiction. If we transfer your Personal Information from the E.U. and process it in the United States, we do so in accordance with applicable law. In certain situations, we may be required to disclose personal information in response to lawful requests by public authorities, including to meet national security or law enforcement requirements.

    Retention of your Personal Information​

    We retain your Personal Information for as long as we need to fulfill our Services. In addition, we retain Personal Information after we cease providing Services to you, to the extent necessary to comply with our legal obligations. Where we retain data, we do so in accordance with any limitation periods and records retention obligations that are imposed by applicable law.

    The Services may provide the ability to connect to other websites. These websites may operate independently from us and have their own privacy policies and notices, which we suggest you review. If the linked website is not owned or controlled by us, we are not responsible for its content, or the privacy practices

    By using our site, you consent to this Privacy Policy.

    Minors​

    These Services are not directed to individuals under the age of thirteen, and we kindly request they not provide any Personal Information through the Services.

    Your Rights​

    Other rights you have include the rights to:

    1. Ask for a copy of your Personal Information.

    2. Ask us to correct your Personal Information that is inaccurate, incomplete, or outdated.

    3. Ask us to transfer your Personal Information to other organizations.

    4. Ask us to erase certain categories or types of information.

    5. If you choose to remove your Personal Information, you acknowledge that we may retain archived copies of your Personal Information in order to satisfy our legal obligations, or where we reasonably believe that we have a legitimate reason to do so.

    6. Ask us to restrict certain processing.

    7. You have the right to object to processing of Personal Information. Where we have asked for your consent to process information, you have the right to withdraw this consent at any time.

    Changes to our Privacy Policy​

    If we decide to change our privacy policy, we will post those changes on this page. If we are going to use Personal Data collected through the Site in a manner materially different from that stated at the time of collection, then we will notify users via email and/or by posting a notice on our Site for 30 days prior to such use or by other means as required by law.

    Juridisiction-Specific Provisions​

    Residents of the European Economic Area and Switzerland: The Data Protection Officer can be contacted at business@illasoft.com

    Contacting Us​

    If you would like to submit a data rights request (also known as a data subject access request), please email business@illasoft.com。

    If you have any other questions, comments, or concerns about this privacy policy, please contact us via email: business@illasoft.com.

    Illa Soft, Inc

- - + + \ No newline at end of file diff --git a/radio-button/index.html b/radio-button/index.html index d662050f95..097dde5ea4 100644 --- a/radio-button/index.html +++ b/radio-button/index.html @@ -10,13 +10,13 @@ - - + +
-

Radio button

A radio button is select input component that allows users to select one option from a group of pre-defined options. It appears as a rounded square button, which can be selected or deselected by users. When a radio button is selected, all other radio buttons in the same group are automatically deselected, ensuring that only one option can be selected at a time. Radio buttons are commonly used in forms, questionnaires, and surveys to help users make a single choice from a list of options.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueA string of selected option value.

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the radio button component.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a group of radio buttons, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valuea string of value of the selected option

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
- - +

Radio button

A radio button is select input component that allows users to select one option from a group of pre-defined options. It appears as a rounded square button, which can be selected or deselected by users. When a radio button is selected, all other radio buttons in the same group are automatically deselected, ensuring that only one option can be selected at a time. Radio buttons are commonly used in forms, questionnaires, and surveys to help users make a single choice from a list of options.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueA string of selected option value.

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the radio button component.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a group of radio buttons, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valuea string of value of the selected option

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
+ + \ No newline at end of file diff --git a/radio-group/index.html b/radio-group/index.html index 3998513225..5b4cb97395 100644 --- a/radio-group/index.html +++ b/radio-group/index.html @@ -10,13 +10,13 @@ - - + +
-

Radio group

A radio group, also known as a single-choice group or simply a radio group, is a component that allows users to select only one option from a list of predefined options. Each option in the group is represented by a circular button that can be selected or deselected by users. When one option is selected, any previously selected option in the group is automatically deselected.

Radio groups are commonly used in web forms, dialog boxes, and other interactive applications where users need to make a single choice from a set of options. They are useful for preventing errors that can occur when users select multiple options by mistake or confusion. Additionally, radio button groups are easy to use and visually intuitive, making them a popular choice for designers and developers alike.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueSelected value

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the radio group.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a radio group, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueSelected value

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
- - +

Radio group

A radio group, also known as a single-choice group or simply a radio group, is a component that allows users to select only one option from a list of predefined options. Each option in the group is represented by a circular button that can be selected or deselected by users. When one option is selected, any previously selected option in the group is automatically deselected.

Radio groups are commonly used in web forms, dialog boxes, and other interactive applications where users need to make a single choice from a set of options. They are useful for preventing errors that can occur when users select multiple options by mistake or confusion. Additionally, radio button groups are easy to use and visually intuitive, making them a popular choice for designers and developers alike.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueSelected value

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the radio group.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a radio group, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueSelected value

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
+ + \ No newline at end of file diff --git a/rate/index.html b/rate/index.html index f75445acea..5ccf55b2cf 100644 --- a/rate/index.html +++ b/rate/index.html @@ -10,13 +10,13 @@ - - + +
-

Rate

What is Rate?​

The Rate component in ILLA Cloud is a powerful tool that allows users to add rating functionality to their applications. With the Rate component, users can display a set of stars or any other custom symbol and allow users to rate an item or provide feedback.

Properties​

PropertiesDescription
Default valuesets the initial value for the rating
Iconcustomize the icon or symbol used for rating
Max countthe maximum number of icons or stars that can be displayed in the rate component
Allow halfWhen the allow half property is enabled, it allows the user to select and display a rating with half-star increments
Allow Clearenables the option for the user to clear or reset the selected rating
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the rate value, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user change the value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
allowHalfa Boolean value indicted whether half rate is allowed
customRuleuser-defined rule or validation logic that can be applied to the component
disableda Boolean value indicates the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the component.
hiddenhidden status (true or false)
iconthe icon or symbol used for rating
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxCountthe value of maximum count
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
tooltipTextvalue of tooltip text
valueuser input value

Example: {{rate1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to rate component with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

‘1.txt’ with the number ‘3.5’ as its data. This is the value we want to show in rate value.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 1.txt for **Object Key.**

Click Save and Run to activate this action.

rate_data

Step 2 Add Components​

Next, we can add a rate component and a button component to the canvas.

We set the default value of the rate component to be 0, label it as “Rate”, and labeled the button as “Set value” as shown below

![rate_layout](https://cdn.illacloud.com/official-website/img/official-site/components/rate_layout.jpg）

Step 3 Configure the component​

For the button component, we can configure it to set the value in rate component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the rate component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

rate_config

Step 4 Test​

Now that when you click the “Set value” button, the value should change to 111.

rate_test

- - +

Rate

What is Rate?​

The Rate component in ILLA Cloud is a powerful tool that allows users to add rating functionality to their applications. With the Rate component, users can display a set of stars or any other custom symbol and allow users to rate an item or provide feedback.

Properties​

PropertiesDescription
Default valuesets the initial value for the rating
Iconcustomize the icon or symbol used for rating
Max countthe maximum number of icons or stars that can be displayed in the rate component
Allow halfWhen the allow half property is enabled, it allows the user to select and display a rating with half-star increments
Allow Clearenables the option for the user to clear or reset the selected rating
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the rate value, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user change the value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
allowHalfa Boolean value indicted whether half rate is allowed
customRuleuser-defined rule or validation logic that can be applied to the component
disableda Boolean value indicates the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the component.
hiddenhidden status (true or false)
iconthe icon or symbol used for rating
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxCountthe value of maximum count
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
tooltipTextvalue of tooltip text
valueuser input value

Example: {{rate1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to rate component with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

‘1.txt’ with the number ‘3.5’ as its data. This is the value we want to show in rate value.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 1.txt for **Object Key.**

Click Save and Run to activate this action.

rate_data

Step 2 Add Components​

Next, we can add a rate component and a button component to the canvas.

We set the default value of the rate component to be 0, label it as “Rate”, and labeled the button as “Set value” as shown below

![rate_layout](https://cdn.illacloud.com/official-website/img/official-site/components/rate_layout.jpg）

Step 3 Configure the component​

For the button component, we can configure it to set the value in rate component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the rate component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

rate_config

Step 4 Test​

Now that when you click the “Set value” button, the value should change to 111.

rate_test

+ + \ No newline at end of file diff --git a/redis/index.html b/redis/index.html index 43e3a1a37f..f660421c99 100644 --- a/redis/index.html +++ b/redis/index.html @@ -10,13 +10,13 @@ - - + +
-

Redis

Redis in Illa is a database integration that allows you to connect and interact with a Redis database. Redis is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Redis integration in Illa, you can query, insert, update, and delete data from a Redis database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Redis database.

Create Redis​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Redis from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Redis will display as shown.

redis_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Redis from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Redis database.

redis_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, the default port is '6379'.
Database Indexoptionala data structure that is used to optimize the performance of queries that retrieve data from a Redis database
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Redis server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a Redis resource, we can add the action by selecting Redis from action list and choosing the Create action button.

redis_resource_list

Now we have added the Redis server as an action to our building page.

redis

Configure Redis​

PropertiesDescription
querycommands to retrieve data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • KEYS

This command retrieves a list of all keys in the Redis database. You can use wildcards to filter the keys by pattern.

KEYS *
KEYS user:*
  • GET

This command retrieves the value associated with a given key.

GET user:12345
  • HGETALL

This command retrieves all fields and their values from a Redis hash data structure.

HGETALL user:12345
  • ZRANGE

This command retrieves a range of values from a Redis sorted set data structure, based on their scores.

ZRANGE high_scores 0 9 WITHSCORES
  • LRANGE

This command retrieves a range of values from a Redis list data structure.

LRANGE my_list 0 4
  • EXISTS

This command checks if a given key exists in the Redis database.

EXISTS user:12345
  • TTL

This command retrieves the time-to-live (TTL) value associated with a key, which specifies how long the key will remain in the database before it expires.

TTL user:12345
- - +

Redis

Redis in Illa is a database integration that allows you to connect and interact with a Redis database. Redis is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Redis integration in Illa, you can query, insert, update, and delete data from a Redis database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Redis database.

Create Redis​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Redis from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Redis will display as shown.

redis_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Redis from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Redis database.

redis_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, the default port is '6379'.
Database Indexoptionala data structure that is used to optimize the performance of queries that retrieve data from a Redis database
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Redis server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a Redis resource, we can add the action by selecting Redis from action list and choosing the Create action button.

redis_resource_list

Now we have added the Redis server as an action to our building page.

redis

Configure Redis​

PropertiesDescription
querycommands to retrieve data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • KEYS

This command retrieves a list of all keys in the Redis database. You can use wildcards to filter the keys by pattern.

KEYS *
KEYS user:*
  • GET

This command retrieves the value associated with a given key.

GET user:12345
  • HGETALL

This command retrieves all fields and their values from a Redis hash data structure.

HGETALL user:12345
  • ZRANGE

This command retrieves a range of values from a Redis sorted set data structure, based on their scores.

ZRANGE high_scores 0 9 WITHSCORES
  • LRANGE

This command retrieves a range of values from a Redis list data structure.

LRANGE my_list 0 4
  • EXISTS

This command checks if a given key exists in the Redis database.

EXISTS user:12345
  • TTL

This command retrieves the time-to-live (TTL) value associated with a key, which specifies how long the key will remain in the database before it expires.

TTL user:12345
+ + \ No newline at end of file diff --git a/restapi/index.html b/restapi/index.html index 053609afb3..24cdd61502 100644 --- a/restapi/index.html +++ b/restapi/index.html @@ -10,13 +10,13 @@ - - + +
-

REST API

In ILLA Cloud, the REST API functionality empowers developers to interact with external systems, services, and data sources by utilizing the Representational State Transfer (REST) architectural style. With the REST API in ILLA Cloud, developers can seamlessly integrate their low-code applications with other applications, databases, or services.

The REST API in ILLA Cloud allows for creating custom endpoints that can handle HTTP requests, such as GET, POST, PUT, and DELETE. This enables developers to perform various operations, including retrieving data, submitting data, updating records, and deleting information.

Create REST API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select REST API from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready REST API will display as shown.

rest_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select REST API from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to REST API database.

rest_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Base URLrequiredThe URL or IP address for your database
URL Parametersoptionalprovide additional information or modify the behavior of API requests
Headersoptionaladditional metadata about the API request or response
Cookiesoptionalsmall pieces of data that are stored on the client-side and sent with each API request
Authenticationoptionalverifying the identity of the user or application making the API request

Create Actions​

We have created a REST API resource; we can add the action by selecting REST API from the action list and choosing the Create action button.

rest_resource_list

Now we have added the REST API server as an action to our building page.

rest

Configure REST API​

PropertiesDescription
Action TypeGET, POST, PUT, HEAD, PATCH, DELETE, OPTIONS
URL Parameterprovide additional information or modify the behavior of API requests if not specified in connection setting
Headersadditional metadata about the API request or response if not specified in connection setting
Transformertransforming data into the style you like using JavaScript

GET​

retrieve or fetch data from a server. When making a GET request, the client specifies the URL of the resource it wants to access, and the server responds with the requested data.

POST​

create a new resource on the server. It allows clients to submit data to the server to be processed and stored. When sending a POST request, the client includes the data in the body of the request.

PUT​

updating or replacing an existing resource. It is typically used to modify the state or content of a resource identified by a specific URL.

similar to the GET method, but with one key difference: the HEAD method retrieves only the headers of the response, without the response body.

PATCH​

update a specific resource. It is typically used to make partial modifications to an existing resource without replacing the entire resource.

DELETE​

request the removal of a specific resource or data identified by a given URL

Use case​

We will demonstrate how to auto fill the form information from REST API data.

Step 1 Add an action​

Let us create a table in REST API with columns id, name, and age. The id 1 document is what we want to show in the form component.

rest_get_all

Then we can create a new action for REST API from the action list in the app we want to build, listing all the data in the bucket and named restapi1.

Select GET for **Action Type**. In URL Parameters, put id for key and 1 for value.

Click Save and Run to activate this action.

rest_get_1

Step 2 Add Components​

Add a form component with the default text "Form" and a "Submit" button to canvas.

Add an input component, a number input component, and a button component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the button component to be "Auto Fill".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

rest_layout

Step 3 Configure the component​

For the "Auto Fill" button components, we can configure it to set the value in input component.

  1. Click the "Auto Fill" button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the input component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as {{restapi1.data[0]["name"]}}

rest_get_input

Similarly, for "Auto Fill" button components to set value in number input component.

  1. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the number input component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as {{restapi1.data[0]["age"]}}

rest_get_num

For the "Submit" button component, we can configure it to submit the form if the form is completed

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method

rest_submit_config

Step 4 Test​

rest_test

- - +

REST API

In ILLA Cloud, the REST API functionality empowers developers to interact with external systems, services, and data sources by utilizing the Representational State Transfer (REST) architectural style. With the REST API in ILLA Cloud, developers can seamlessly integrate their low-code applications with other applications, databases, or services.

The REST API in ILLA Cloud allows for creating custom endpoints that can handle HTTP requests, such as GET, POST, PUT, and DELETE. This enables developers to perform various operations, including retrieving data, submitting data, updating records, and deleting information.

Create REST API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select REST API from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready REST API will display as shown.

rest_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select REST API from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to REST API database.

rest_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Base URLrequiredThe URL or IP address for your database
URL Parametersoptionalprovide additional information or modify the behavior of API requests
Headersoptionaladditional metadata about the API request or response
Cookiesoptionalsmall pieces of data that are stored on the client-side and sent with each API request
Authenticationoptionalverifying the identity of the user or application making the API request

Create Actions​

We have created a REST API resource; we can add the action by selecting REST API from the action list and choosing the Create action button.

rest_resource_list

Now we have added the REST API server as an action to our building page.

rest

Configure REST API​

PropertiesDescription
Action TypeGET, POST, PUT, HEAD, PATCH, DELETE, OPTIONS
URL Parameterprovide additional information or modify the behavior of API requests if not specified in connection setting
Headersadditional metadata about the API request or response if not specified in connection setting
Transformertransforming data into the style you like using JavaScript

GET​

retrieve or fetch data from a server. When making a GET request, the client specifies the URL of the resource it wants to access, and the server responds with the requested data.

POST​

create a new resource on the server. It allows clients to submit data to the server to be processed and stored. When sending a POST request, the client includes the data in the body of the request.

PUT​

updating or replacing an existing resource. It is typically used to modify the state or content of a resource identified by a specific URL.

similar to the GET method, but with one key difference: the HEAD method retrieves only the headers of the response, without the response body.

PATCH​

update a specific resource. It is typically used to make partial modifications to an existing resource without replacing the entire resource.

DELETE​

request the removal of a specific resource or data identified by a given URL

Use case​

We will demonstrate how to auto fill the form information from REST API data.

Step 1 Add an action​

Let us create a table in REST API with columns id, name, and age. The id 1 document is what we want to show in the form component.

rest_get_all

Then we can create a new action for REST API from the action list in the app we want to build, listing all the data in the bucket and named restapi1.

Select GET for **Action Type**. In URL Parameters, put id for key and 1 for value.

Click Save and Run to activate this action.

rest_get_1

Step 2 Add Components​

Add a form component with the default text "Form" and a "Submit" button to canvas.

Add an input component, a number input component, and a button component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the button component to be "Auto Fill".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

rest_layout

Step 3 Configure the component​

For the "Auto Fill" button components, we can configure it to set the value in input component.

  1. Click the "Auto Fill" button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the input component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as {{restapi1.data[0]["name"]}}

rest_get_input

Similarly, for "Auto Fill" button components to set value in number input component.

  1. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the number input component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as {{restapi1.data[0]["age"]}}

rest_get_num

For the "Submit" button component, we can configure it to submit the form if the form is completed

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method

rest_submit_config

Step 4 Test​

rest_test

+ + \ No newline at end of file diff --git a/run-script/index.html b/run-script/index.html index 5f745ef3a2..b0430fdbb5 100644 --- a/run-script/index.html +++ b/run-script/index.html @@ -10,13 +10,13 @@ - - + +
-

Run Script

By triggering the Run Script through an Event handler, you can achieve sequential execution of operations and perform different actions based on different condition.

How-to​

Demo​

Run and fork​

https://illa.ai/app/ILAfx4p1C7Ac/detail

Use case: Login and redirect to different pages​

Run and fork​

https://illa.ai/app/ILAex4p1C7Eh/detail

ILLA custom functions​

Trigger action​

Structure​

const exampleData = await actionName.trigger();

The actionName is the string shown in the screenshot, as follows.

1

Description​

In Run Script, the variable exampleData is the same as actionName.data.

Example​

For example, we use the action postgresql1 to query James' email.

2

Trigger the action via Run Script

3

postgresql1.data is

[
  {
    "email": "James@outlook.com",
    "id": "1",
    "img": "https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "name": "James"
  }
]

When we need to use JavaScript to retrieve an email in the component's Inspect or elsewhere, we can use the following: {{postgresql1.data[0].email}}

4

And when we need to use the email in the "Run Script" after executing the statement const exampleData = await postgresql1.trigger();, we can directly use exampleData[0].email.

Show a success notification when the query is successful and the result is unique. Show a failure notification when the query result is not unique or when it fails.

5

const exampleData = await postgresql1.trigger();
//show email via notification when the length of the resulting array is 1.
if(exampleData.length==1){
utils.showNotification(
  {
    type:"info",
    title:"Retrieved successfully",
    description:exampleData[0].email,
    duration: 4500}
);
  }else{
  //else, show a failed notification
utils.showNotification(
  {
    type:"info",
    title:"Failed to retrieve",
    duration: 4500
  }
);
  };

Show notification​

Structure​

utils.showNotification(
{
type: "info",
title: "Congratulations",
description: "Retrieved successfully",
duration: 4500
}
)

Description​

ParameterDescriptionData typeExample
typeUsed to set the icon type in the notification.String, one of the following values:"info"default"success""error""warning"type: "info"
titleUsed to set the title of the notificationStringtitle: "Congratulations"
descriptionUsed to set the descriptionStringdescription: "Retrieved successfully"
durationUsed to set the display duration of the notification.Number, In milliseconds (ms)duration: 4500

Example​

Show notification when clicking the button:

6

It is the same as the Show notification action, as the following screenshot shows:

7

Control component​

Structure​

componentDisplayName.function()

componentDisplayName is the string shown in the screenshot, as follows.

8

Description​

setValue(parameter)​

Used to set the value. The parameter could be a string or number or object or boolean or array which depends on the component type.

Supported components​
ComponentParameter typeExample
Input, Editable Text, Text Area, Divider, Select, Radio Group, Radio Button, Radio Buttonm, Date, Date Time, Steps, Text, Bar Progress, Circle Progressstringinput1.setValue("Hello world")
JSON EditorstringjsonEditor1.setValue({ "firstName": "Chuck", "lastName": "Norris", "age": 80, "bio": "Roundhouse kicking asses since 1940", "password": "noneed", "telephone": "1-800-KICKASS" })
Timelinestring, Separate the values of different nodes via comma (,)timeline1.setValue("The first milestone,The second milestone")
Number Input, Slider, RatenumbernumberInput1.setValue(1000)
Switchbooleanswitch1.setValue(false)
JSON Schema Form, FormobjectjsonSchemaForm1.setValue({ "firstName": "Chuck", "lastName": "Norris", "age": 80, "bio": "Roundhouse kicking asses since 1940", "password": "noneed", "telephone": "1-800-KICKASS" })
Checkbox Group, Cascaderarraycascader1.setValue(["media_source_2","campaign_2-1"])
clearValue()​

Used to clear the value

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, JSON Editor, JSON Schema Form, Switch, Select, Multiselect, Checkbox Group, Cascader, Radio Group, Radio Button, Date, Date Range, Data Time, Date Time, Text, Rate, Bar Progress, Circle Progress, Timeline, Divider

Example​
input1.clearValue()
focus()​

Used to focus on the component

Supported components​

Input, Number Input, Editable Text, Text Area, JSON Editor, Rich text editor, Radio Group,

Example​
input1.focus()
validate()​

When you have set validation conditions for a component, such as email format, URL format, or required field, you can use the validate() function to determine if it meets the requirements. If it does not meet the requirements, a validation message will be displayed.

Set the validation conditions:

9

Display the validation message:

10

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, Select, Multiselect, Checkbox Group, Radio Group, Radio Button, Date, Date Range, Date Time, Form, Rate

Example​
input1.validate()
clearValidation()​

Used to clear the validation message.

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, Select, Multiselect, Checkbox Group, Radio Button, Date, Date Range, Date Time, Rate

Example​
input1.clearValidation()
setSelectedValue(array)​

Used to set the selected value of Multiselect. The parameter should be an array.

Supported components​

Multiselect

Example​
multiselect1.setSelectedValue(["Option 1", "Option 3"])
submit()​

Submit form data. When the submit method is triggered, we will first validate the form data. If there are validation errors, the form submission will be prevented, and the corresponding error messages will be displayed. Only after successful validation does the submission proceed.

Supported components​

JSON Schema Form, Form

Example​
form1.submit()
toggle()​

Used to switch the value from true to false or from false to true.

Supported components​

Switch

Example​
switch1.toggle()
setStartOfRange(number)​

Used to set the default start value of the range slider

Supported components​

Range Slider

Example​
rangeSlider1.setStartOfRange(1)
setEndOfRange(number)​

Used to set the default end value of the range slider

Supported components​

Range Slider

Example​
rangeSlider1.setEndOfRange(9)
setStartValue(string)​

Used to set the default start value

Supported components​

Date Range, Time Range

Example​
dateRange1.setStartValue("2023-09-09")
setEndValue(string)​

Used to set the default end value

Supported components​

Date Range, Time Range

Example​
dateRange1.setEndValue("2023-10-09")
setValueInArray(array)​

Used to set the switches whose value is true

Supported components​

Switch Group

Example​
switchGroup1.setValueInArray(["Option 1", "Option 3"])
selectPage(number)​

Used to set the index of the page to display. The index is a number starting from ０.

Supported components​

Table

Example​
table1.selectPage(1)
selectRow(number)​

Used to set the index of selected row. The index is a number starting from ０.

Supported components​

Table

Example​
table1.selectRow(1)
clearSelection()​

Used to clear the selected row.

Supported components​

Table

Example​
table1.clearSelection()
setFilters(array of objects, string)​

Used to set filters.

The first parameter is an array of objects. Each object represents a filtering condition. It includes three attributes:

id : This refers to the id of this column. If this column is a result of a database query, then the id would be the column name you retrieved from the query. For example, if the query is SELECT email AS user_email FROM users and rename email as Email using the right-hand panel of the table, the id of the column would still be user_email If this column is manually added using the Add Column button in the right-hand panel, you can check its id in the displayedData section of the left-hand panel. Typically, it will be a randomly generated string starting with column such as column-320169e8-225a-482d-9853-ad34b3040220.

filterFn : the match type of the filter. We support the following types: equalTo which is the same as = in SQL, notEqualTo which is the same as <> in SQL, contains which is the same as LIKE '%value%' in SQL, does NotContain which is the same as NOT LIKE '%value%' in SQL, lessThan which is the same as < in SQL, notLessThan which is the same as >= in SQL, notMoreThan which is the same as <= in SQL, empty which is the same as IS NULL in SQL, notEmpty which is the same as IS NOT NULL in SQL, before is used to compare time or date, which is the same as > in SQL, after is used to compare time or date, which is the same as < in SQL.

value : used to set the value to compare.

The second parameter: when there are multiple filter condition objects, it determines whether they have an "AND" relationship or an "OR" relationship. Set it as a string and for an "AND" relationship, and or for an "OR" relationship.

Supported components​

Table

Example​
table1.setFilters([{"id":"month", "filterFn":"equalTo", "value":"May"}, {"id":"month", "filterFn":"equalTo", "value":"June"}], "or")
clearFilters()​

Used to clear all filters

Supported components​

Table

Example​
table1.clearFilters()
setSort(string, string)​

Used to set the sort. The first parameter is the id of the column to sort which is a string value. The id is the same as the id mentioned in setFilters(array of objects, string). The second parameter is the sorting order, either ascending or descending. It is set using a string value ascend or descend.

Supported components​

Table

Example​
table1.setSort("incomes", "descend")
setCurrentViewKey(string)​

Use the key which is a string value of the view to set the shown view.

Supported components​

Container

Example​
container1.setCurrentViewKey("View 2")
setCurrentViewIndex(number)​

Use the index which is a number value starting from 0 of the view to set the shown view.

Supported components​

Container

Example​
container1.setCurrentViewIndex(1)
showNextView(boolean)​

Used to show the next view. The parameter is a boolean value that determines whether to loop from the end back to the start.

Supported components​

Container

Example​
container1.showNextView(true)
showNextVisibleView(boolean)​

Used to show the next visible view. Unlike the behavior of the showNextView(boolean) function, this function offers improved view switching functionality by skipping any hidden views during the transition. The parameter is a boolean value that determines whether to loop from the end back to the start.

Supported components​

Container

Example​
container1.showNextVisibleView(false)
showPreviousView()​

Used to show the previous view. The parameter is a boolean value that determines whether to loop from the start back to the end.

Supported components​

Container

Example​
container1.showPreviousView(true)
showPreviousVisibleView()​

Used to show the previous visible view. Unlike the behavior of the showPreviousView(boolean) function, this function offers improved view switching functionality by skipping any hidden views during the transition. The parameter is a boolean value that determines whether to loop from the start back to the end.

Supported components​

Container

Example​
container1.showPreviousVisibleView(true)
reset()​

Used to reset the value to default value.

Supported components​

Form

Example​
form1.reset()
resetValue()​

Used to reset the value to default value.

Supported components​

Steps

Example​
steps1.resetValue()
openModal()​

Used to open a modal

Supported components​

Modal

Example​
modal1.openModal()
closeModal()​

Used to close a modal

Supported components​

Modal

Example​
modal1.closeModal()
setImageUrl(string)​

Used to set the Image source URL. It can be a Base64 or a URL pointing to an image on the web.

Supported components​

Image

Example​
image1.setImageUrl("https://cloud-api.illacloud.com/drive/f/83095b77-1180-487e-86db-ff117e6083e5")
image1.setImageUrl("data:image/png;base64,iVBORw0KGgoAA...II=")
clearReplyMessage()​

Used to clear the quoted reply message above the input box.

Supported components​

Chat

Example​
chat1.clearReplyMessage()
setPrimaryValue(number)​

Used to set the primary value of statistics.

Supported components​

Statistics

Example​
statistic1.setPrimaryValue(100)
resetPrimaryValue()​

Used to reset the primary value to the default primary value of statistics.

Supported components​

Statistics

Example​
statistic1.resetPrimaryValue()
setFileUrl(string)​

Used to set the file URL. It can be a Base64 or a URL pointing to a PDF on the web.

Supported components​

PDF

Example​
pdf1.setFileUrl("https://upload.wikimedia.org/wikipedia/commons/e/ee/Guideline_No._GD-Ed-2214_Marman_Clamp_Systems_Design_Guidelines.pdf")
play()​

Used to play video or audio.

Supported components​

Video, Audio

Example​
video1.play()
pause()​

Used to pause video or audio.

Supported components​

Video, Audio

Example​
video1.pause()
showControls(boolean)​

Used to set whether to show the controls.

Supported components​

Video

Example​
video1.showControls(true)
setVideoUrl(string)​

Used to set the video's URL. It can be a Base64 or a video URL on media websites.

Supported components​

Video

Example​
video1.setVideoUrl("https://youtu.be/8sUovZlBh_M")
setVolume(number)​

Used to set the volume. The parameter is a number value between 0 to 1.

Supported components​

Video, Audio

Example​

video1.setVolume(0.5)

setSpeed(number)​

Used to set the speed. The parameter is a number value between 0.25 to 2.

Supported components​

Video, Audio

Example​
video1.setSpeed(0.5)
setLoop(boolean)​

Used to set whether to loop the playback.

Supported components​

Video, Audio

Example​
video1.setLoop(false)
seekTo(number)​

Used to seek to a specific time position. The parameter is a number value, measured in seconds (s). For example, to seek to the time position 5:35, you would use the value 335.

Supported components​

Video, Audio

Example​
video1.seekTo(335)
mute(boolean)​

Used to set mute or not.

Supported components​

Video, Audio

Example​
video1.mute(true)
setAudioUrl(string)​

Used to set the audio's URL. It can be a Base64 or a video URL on media websites.

Supported components​

Audio

Example​
video1.setAudioUrl("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3")
slickNext()​

Used to switch to the next image.

Supported components​

Carousel

Example​
carousel1.slickNext()
slickPrevious()​

Used to switch to the previous image.

Supported components​

Carousel

Example​
carousel1.slickPrevious()
setSrc()​

Used to set the source URL of IFrame.

Supported components​

IFrame

Example​
iframe1.setSrc("https://www.nasa.gov/")
setMarkers(array)​

Used to set the markers on the map. The parameter should be an array of objects. The latitude and longitude fields in each object should be same as the fields set in the right-hand panel

Supported components​

Map

Example​
map1.setMarkers([
{
    "lat":57.14009563040699,
    "lng":-114.6018657894011
 },{
     "lat":55.40432513713809,
     "lng":-112.98252263795787
 },{
     "lat":57.841288754888545,
     "lng":-103.3518657894011
 }
 ])
resetMarkers()​

Used to reset the markers to the default markers.

Supported components​

Map

Example​
map1.resetMarkers()

Go to URL​

Structure​

utils.goToURL({
url:string,
newTab:boolean
})

Description​

Use an object to set it. There are 2 attributes in the object. The first attribute is url. Its value is a complete URL, including 'https://' or 'http://', and it is of type string. The second attribute is newTab. It is a boolean used to set whether to open the URL in a new tab.

Example​

utils.goToURL({
url:"https://www.illacloud.com",
newTab:true
})

Copy to clipboard​

Structure​

utils.copyToClipboard(string)

Description​

Used to copy a string

Example​

utils.copyToClipboard("The text to copy")

Set router​

Structure​

utils.setRouter({
pagePath:string;
viewPath:string
})

Description​

Used to change the page in ILLA Apps. There are 2 attributes in the object.

The first attribute is pagePath. The value of pagePath is shown on the following screenshot without /.

11

The second attribute is viewPath. The value of viewPath is shown on the following screenshot without /.

12

Example​

utils.setRouter({
pagePath:"page2", 
viewPath:"sub-page1"
})

Save to ILLA Drive​

Structure​

utils.saveToILLADrive({
fileName:string,
fileData:string,
fileType:string,
folder:string,
allowAnonymous:boolean,
replace:boolean
})

Description​

Used to save a file to ILLA Drive.

fileName: Name with extension of the file after uploading to ILLA Drive.

fileData: Base64 or raw file data, such as JSON, CSV, plain text, etc.

fileType: One of the following values: Auto, Plain text, JPEG, PNG, SVG, JSON, CSV, TSV, Excel(.xlsx). When using "Auto," we will attempt to determine the file type based on either the file extension or the file data.

folder: Destination folder for file upload. Leave it blank to upload to the root folder.

allowAnonymous: Used to set whether anonymous user access is allowed. If you plan to set your application as public, anonymous access must be enabled. For the security of your data, files or folders accessible anonymously must be placed in the anonymous folder.

13

replace: Used to set when there are files with the same name in the same directory, replace the existing file with new file or automatically rename the new file.

Example​

//use upload1 to pick files from device and upload to apps folder. 
utils.saveToILLADrive({
fileName:upload1.files[0].name,
fileData:upload1.files[0].dataURI,
fileType:"PNG",
folder:"apps",
allowAnonymous:false,
replace:true
})
//upload a text file.  
utils.saveToILLADrive({
fileName:"test.txt",
fileData:"abc",
fileType:"Plain text",
folder:"apps",
allowAnonymous:false,
replace:true
})

Download from ILLA Drive​

Structure​

utils.downloadFromILLADrive({
    downloadInfo:[{
        tinyURL:string,
        fileID:string
        }],
    asZip:boolean
})

Description​

Used to download files from ILLA Drive.

downloadInfo: an array of objects including tinyURL and fileID. You can use the component Drive file picker to pick files from ILLA Drive and get the downloadInfo via drivePicker1.value

asZip: used to set whether to download the files as a Zip.

Example​

utils.downloadFromILLADrive({
    downloadInfo:drivePicker1.value,
    asZip:true
})

Download​

Structure​

utils.downloadFile({
    fileType:string,
    fileName:string,
    data:anyType
})

Description​

Used to export data to your device.

fileType: One of the following values: Auto, Plain text, JPEG, PNG, SVG, JSON, CSV, TSV, Excel(.xlsx). When using "Auto," we will attempt to determine the file type based on either the file extension or the file data.

fileName: a name with extension.

data: data of the file.

Example​

//download the data of table as a CSV
utils.downloadFile({
    fileType:"CSV",
    fileName:"text.csv",
    data: table2.dataSourceJS
})
//download image
utils.downloadFile({
    fileType:"PNG",
    fileName:"text.png",
    data: image1.imageSrc
})

Set global data​

Set global data value​

Structure​
utils.setGlobalDataValue({
key:string, 
value:any
})
Description​

Used to set the value of gobalData

key: the displayName of globalData as the following screenshot shows.

14

value: the value to set

Example​
//use input5 to get the user input value and set as the value of stringState. 
utils.setGlobalDataValue({
key:"stringState", 
value:input5.value
})

Set global data in​

Structure​
utils.setGlobalDataIn({
key:string, 
path:string, 
value:any
})
Description​

When the global data is an array or object, use setGlobalDataIn to modify the value corresponding to a specific index in an array or to modify the value corresponding to a specific key in an object.

key: the displayName of globalData.

path: the index of the value you intend to update in the array or the key in the object. For example, to set the second value in array, the path is 1 (the index). To set the value of the attribute named key1, the path is key1.

value: the value to set

Example​
//objectState is an object: {"key1":"value1", "key2":"value2"}, to set the 
utils.setGlobalDataIn({
key:"objectState", 
path:"key2", 
value:input7.value
})

Built-in libraries​

LibraryDocHow to use it in ILLA BuilderExample
Lodashhttps://lodash.com/docs/4.17.15__.concat(array, 2, [3], [[4]]);
Day.jshttps://day.js.org/dayjsdayjs(new Date())
uuidhttps://www.npmjs.com/package/uuiduuiduuid.parse()
numbrohttps://numbrojs.com/numbronumbro(1000).format({thousandSeparated: true})
Papahttps://www.papaparse.com/docsPapaPapa.parse(url, {download: true, // rest of config ... })

Value of actions, components...​

Use displayName.xxx to use the value of actions, components, or other globalData. Please note that in the Run Script, these variables can be directly accessed without using {{ references.

utils.downloadFromILLADrive({
    downloadInfo:{{drivePicker1.value}},//❌ 
    asZip:true
})

utils.downloadFromILLADrive({
    downloadInfo:drivePicker1.value,//✅
    asZip:true
})
- - +

Run Script

By triggering the Run Script through an Event handler, you can achieve sequential execution of operations and perform different actions based on different condition.

How-to​

Demo​

Run and fork​

https://illa.ai/app/ILAfx4p1C7Ac/detail

Use case: Login and redirect to different pages​

Run and fork​

https://illa.ai/app/ILAex4p1C7Eh/detail

ILLA custom functions​

Trigger action​

Structure​

const exampleData = await actionName.trigger();

The actionName is the string shown in the screenshot, as follows.

1

Description​

In Run Script, the variable exampleData is the same as actionName.data.

Example​

For example, we use the action postgresql1 to query James' email.

2

Trigger the action via Run Script

3

postgresql1.data is

[
  {
    "email": "James@outlook.com",
    "id": "1",
    "img": "https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "name": "James"
  }
]

When we need to use JavaScript to retrieve an email in the component's Inspect or elsewhere, we can use the following: {{postgresql1.data[0].email}}

4

And when we need to use the email in the "Run Script" after executing the statement const exampleData = await postgresql1.trigger();, we can directly use exampleData[0].email.

Show a success notification when the query is successful and the result is unique. Show a failure notification when the query result is not unique or when it fails.

5

const exampleData = await postgresql1.trigger();
//show email via notification when the length of the resulting array is 1.
if(exampleData.length==1){
utils.showNotification(
  {
    type:"info",
    title:"Retrieved successfully",
    description:exampleData[0].email,
    duration: 4500}
);
  }else{
  //else, show a failed notification
utils.showNotification(
  {
    type:"info",
    title:"Failed to retrieve",
    duration: 4500
  }
);
  };

Show notification​

Structure​

utils.showNotification(
{
type: "info",
title: "Congratulations",
description: "Retrieved successfully",
duration: 4500
}
)

Description​

ParameterDescriptionData typeExample
typeUsed to set the icon type in the notification.String, one of the following values:"info"default"success""error""warning"type: "info"
titleUsed to set the title of the notificationStringtitle: "Congratulations"
descriptionUsed to set the descriptionStringdescription: "Retrieved successfully"
durationUsed to set the display duration of the notification.Number, In milliseconds (ms)duration: 4500

Example​

Show notification when clicking the button:

6

It is the same as the Show notification action, as the following screenshot shows:

7

Control component​

Structure​

componentDisplayName.function()

componentDisplayName is the string shown in the screenshot, as follows.

8

Description​

setValue(parameter)​

Used to set the value. The parameter could be a string or number or object or boolean or array which depends on the component type.

Supported components​
ComponentParameter typeExample
Input, Editable Text, Text Area, Divider, Select, Radio Group, Radio Button, Radio Buttonm, Date, Date Time, Steps, Text, Bar Progress, Circle Progressstringinput1.setValue("Hello world")
JSON EditorstringjsonEditor1.setValue({ "firstName": "Chuck", "lastName": "Norris", "age": 80, "bio": "Roundhouse kicking asses since 1940", "password": "noneed", "telephone": "1-800-KICKASS" })
Timelinestring, Separate the values of different nodes via comma (,)timeline1.setValue("The first milestone,The second milestone")
Number Input, Slider, RatenumbernumberInput1.setValue(1000)
Switchbooleanswitch1.setValue(false)
JSON Schema Form, FormobjectjsonSchemaForm1.setValue({ "firstName": "Chuck", "lastName": "Norris", "age": 80, "bio": "Roundhouse kicking asses since 1940", "password": "noneed", "telephone": "1-800-KICKASS" })
Checkbox Group, Cascaderarraycascader1.setValue(["media_source_2","campaign_2-1"])
clearValue()​

Used to clear the value

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, JSON Editor, JSON Schema Form, Switch, Select, Multiselect, Checkbox Group, Cascader, Radio Group, Radio Button, Date, Date Range, Data Time, Date Time, Text, Rate, Bar Progress, Circle Progress, Timeline, Divider

Example​
input1.clearValue()
focus()​

Used to focus on the component

Supported components​

Input, Number Input, Editable Text, Text Area, JSON Editor, Rich text editor, Radio Group,

Example​
input1.focus()
validate()​

When you have set validation conditions for a component, such as email format, URL format, or required field, you can use the validate() function to determine if it meets the requirements. If it does not meet the requirements, a validation message will be displayed.

Set the validation conditions:

9

Display the validation message:

10

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, Select, Multiselect, Checkbox Group, Radio Group, Radio Button, Date, Date Range, Date Time, Form, Rate

Example​
input1.validate()
clearValidation()​

Used to clear the validation message.

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, Select, Multiselect, Checkbox Group, Radio Button, Date, Date Range, Date Time, Rate

Example​
input1.clearValidation()
setSelectedValue(array)​

Used to set the selected value of Multiselect. The parameter should be an array.

Supported components​

Multiselect

Example​
multiselect1.setSelectedValue(["Option 1", "Option 3"])
submit()​

Submit form data. When the submit method is triggered, we will first validate the form data. If there are validation errors, the form submission will be prevented, and the corresponding error messages will be displayed. Only after successful validation does the submission proceed.

Supported components​

JSON Schema Form, Form

Example​
form1.submit()
toggle()​

Used to switch the value from true to false or from false to true.

Supported components​

Switch

Example​
switch1.toggle()
setStartOfRange(number)​

Used to set the default start value of the range slider

Supported components​

Range Slider

Example​
rangeSlider1.setStartOfRange(1)
setEndOfRange(number)​

Used to set the default end value of the range slider

Supported components​

Range Slider

Example​
rangeSlider1.setEndOfRange(9)
setStartValue(string)​

Used to set the default start value

Supported components​

Date Range, Time Range

Example​
dateRange1.setStartValue("2023-09-09")
setEndValue(string)​

Used to set the default end value

Supported components​

Date Range, Time Range

Example​
dateRange1.setEndValue("2023-10-09")
setValueInArray(array)​

Used to set the switches whose value is true

Supported components​

Switch Group

Example​
switchGroup1.setValueInArray(["Option 1", "Option 3"])
selectPage(number)​

Used to set the index of the page to display. The index is a number starting from ０.

Supported components​

Table

Example​
table1.selectPage(1)
selectRow(number)​

Used to set the index of selected row. The index is a number starting from ０.

Supported components​

Table

Example​
table1.selectRow(1)
clearSelection()​

Used to clear the selected row.

Supported components​

Table

Example​
table1.clearSelection()
setFilters(array of objects, string)​

Used to set filters.

The first parameter is an array of objects. Each object represents a filtering condition. It includes three attributes:

id : This refers to the id of this column. If this column is a result of a database query, then the id would be the column name you retrieved from the query. For example, if the query is SELECT email AS user_email FROM users and rename email as Email using the right-hand panel of the table, the id of the column would still be user_email If this column is manually added using the Add Column button in the right-hand panel, you can check its id in the displayedData section of the left-hand panel. Typically, it will be a randomly generated string starting with column such as column-320169e8-225a-482d-9853-ad34b3040220.

filterFn : the match type of the filter. We support the following types: equalTo which is the same as = in SQL, notEqualTo which is the same as <> in SQL, contains which is the same as LIKE '%value%' in SQL, does NotContain which is the same as NOT LIKE '%value%' in SQL, lessThan which is the same as < in SQL, notLessThan which is the same as >= in SQL, notMoreThan which is the same as <= in SQL, empty which is the same as IS NULL in SQL, notEmpty which is the same as IS NOT NULL in SQL, before is used to compare time or date, which is the same as > in SQL, after is used to compare time or date, which is the same as < in SQL.

value : used to set the value to compare.

The second parameter: when there are multiple filter condition objects, it determines whether they have an "AND" relationship or an "OR" relationship. Set it as a string and for an "AND" relationship, and or for an "OR" relationship.

Supported components​

Table

Example​
table1.setFilters([{"id":"month", "filterFn":"equalTo", "value":"May"}, {"id":"month", "filterFn":"equalTo", "value":"June"}], "or")
clearFilters()​

Used to clear all filters

Supported components​

Table

Example​
table1.clearFilters()
setSort(string, string)​

Used to set the sort. The first parameter is the id of the column to sort which is a string value. The id is the same as the id mentioned in setFilters(array of objects, string). The second parameter is the sorting order, either ascending or descending. It is set using a string value ascend or descend.

Supported components​

Table

Example​
table1.setSort("incomes", "descend")
setCurrentViewKey(string)​

Use the key which is a string value of the view to set the shown view.

Supported components​

Container

Example​
container1.setCurrentViewKey("View 2")
setCurrentViewIndex(number)​

Use the index which is a number value starting from 0 of the view to set the shown view.

Supported components​

Container

Example​
container1.setCurrentViewIndex(1)
showNextView(boolean)​

Used to show the next view. The parameter is a boolean value that determines whether to loop from the end back to the start.

Supported components​

Container

Example​
container1.showNextView(true)
showNextVisibleView(boolean)​

Used to show the next visible view. Unlike the behavior of the showNextView(boolean) function, this function offers improved view switching functionality by skipping any hidden views during the transition. The parameter is a boolean value that determines whether to loop from the end back to the start.

Supported components​

Container

Example​
container1.showNextVisibleView(false)
showPreviousView()​

Used to show the previous view. The parameter is a boolean value that determines whether to loop from the start back to the end.

Supported components​

Container

Example​
container1.showPreviousView(true)
showPreviousVisibleView()​

Used to show the previous visible view. Unlike the behavior of the showPreviousView(boolean) function, this function offers improved view switching functionality by skipping any hidden views during the transition. The parameter is a boolean value that determines whether to loop from the start back to the end.

Supported components​

Container

Example​
container1.showPreviousVisibleView(true)
reset()​

Used to reset the value to default value.

Supported components​

Form

Example​
form1.reset()
resetValue()​

Used to reset the value to default value.

Supported components​

Steps

Example​
steps1.resetValue()
openModal()​

Used to open a modal

Supported components​

Modal

Example​
modal1.openModal()
closeModal()​

Used to close a modal

Supported components​

Modal

Example​
modal1.closeModal()
setImageUrl(string)​

Used to set the Image source URL. It can be a Base64 or a URL pointing to an image on the web.

Supported components​

Image

Example​
image1.setImageUrl("https://cloud-api.illacloud.com/drive/f/83095b77-1180-487e-86db-ff117e6083e5")
image1.setImageUrl("data:image/png;base64,iVBORw0KGgoAA...II=")
clearReplyMessage()​

Used to clear the quoted reply message above the input box.

Supported components​

Chat

Example​
chat1.clearReplyMessage()
setPrimaryValue(number)​

Used to set the primary value of statistics.

Supported components​

Statistics

Example​
statistic1.setPrimaryValue(100)
resetPrimaryValue()​

Used to reset the primary value to the default primary value of statistics.

Supported components​

Statistics

Example​
statistic1.resetPrimaryValue()
setFileUrl(string)​

Used to set the file URL. It can be a Base64 or a URL pointing to a PDF on the web.

Supported components​

PDF

Example​
pdf1.setFileUrl("https://upload.wikimedia.org/wikipedia/commons/e/ee/Guideline_No._GD-Ed-2214_Marman_Clamp_Systems_Design_Guidelines.pdf")
play()​

Used to play video or audio.

Supported components​

Video, Audio

Example​
video1.play()
pause()​

Used to pause video or audio.

Supported components​

Video, Audio

Example​
video1.pause()
showControls(boolean)​

Used to set whether to show the controls.

Supported components​

Video

Example​
video1.showControls(true)
setVideoUrl(string)​

Used to set the video's URL. It can be a Base64 or a video URL on media websites.

Supported components​

Video

Example​
video1.setVideoUrl("https://youtu.be/8sUovZlBh_M")
setVolume(number)​

Used to set the volume. The parameter is a number value between 0 to 1.

Supported components​

Video, Audio

Example​

video1.setVolume(0.5)

setSpeed(number)​

Used to set the speed. The parameter is a number value between 0.25 to 2.

Supported components​

Video, Audio

Example​
video1.setSpeed(0.5)
setLoop(boolean)​

Used to set whether to loop the playback.

Supported components​

Video, Audio

Example​
video1.setLoop(false)
seekTo(number)​

Used to seek to a specific time position. The parameter is a number value, measured in seconds (s). For example, to seek to the time position 5:35, you would use the value 335.

Supported components​

Video, Audio

Example​
video1.seekTo(335)
mute(boolean)​

Used to set mute or not.

Supported components​

Video, Audio

Example​
video1.mute(true)
setAudioUrl(string)​

Used to set the audio's URL. It can be a Base64 or a video URL on media websites.

Supported components​

Audio

Example​
video1.setAudioUrl("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3")
slickNext()​

Used to switch to the next image.

Supported components​

Carousel

Example​
carousel1.slickNext()
slickPrevious()​

Used to switch to the previous image.

Supported components​

Carousel

Example​
carousel1.slickPrevious()
setSrc()​

Used to set the source URL of IFrame.

Supported components​

IFrame

Example​
iframe1.setSrc("https://www.nasa.gov/")
setMarkers(array)​

Used to set the markers on the map. The parameter should be an array of objects. The latitude and longitude fields in each object should be same as the fields set in the right-hand panel

Supported components​

Map

Example​
map1.setMarkers([
{
    "lat":57.14009563040699,
    "lng":-114.6018657894011
 },{
     "lat":55.40432513713809,
     "lng":-112.98252263795787
 },{
     "lat":57.841288754888545,
     "lng":-103.3518657894011
 }
 ])
resetMarkers()​

Used to reset the markers to the default markers.

Supported components​

Map

Example​
map1.resetMarkers()

Go to URL​

Structure​

utils.goToURL({
url:string,
newTab:boolean
})

Description​

Use an object to set it. There are 2 attributes in the object. The first attribute is url. Its value is a complete URL, including 'https://' or 'http://', and it is of type string. The second attribute is newTab. It is a boolean used to set whether to open the URL in a new tab.

Example​

utils.goToURL({
url:"https://www.illacloud.com",
newTab:true
})

Copy to clipboard​

Structure​

utils.copyToClipboard(string)

Description​

Used to copy a string

Example​

utils.copyToClipboard("The text to copy")

Set router​

Structure​

utils.setRouter({
pagePath:string;
viewPath:string
})

Description​

Used to change the page in ILLA Apps. There are 2 attributes in the object.

The first attribute is pagePath. The value of pagePath is shown on the following screenshot without /.

11

The second attribute is viewPath. The value of viewPath is shown on the following screenshot without /.

12

Example​

utils.setRouter({
pagePath:"page2", 
viewPath:"sub-page1"
})

Save to ILLA Drive​

Structure​

utils.saveToILLADrive({
fileName:string,
fileData:string,
fileType:string,
folder:string,
allowAnonymous:boolean,
replace:boolean
})

Description​

Used to save a file to ILLA Drive.

fileName: Name with extension of the file after uploading to ILLA Drive.

fileData: Base64 or raw file data, such as JSON, CSV, plain text, etc.

fileType: One of the following values: Auto, Plain text, JPEG, PNG, SVG, JSON, CSV, TSV, Excel(.xlsx). When using "Auto," we will attempt to determine the file type based on either the file extension or the file data.

folder: Destination folder for file upload. Leave it blank to upload to the root folder.

allowAnonymous: Used to set whether anonymous user access is allowed. If you plan to set your application as public, anonymous access must be enabled. For the security of your data, files or folders accessible anonymously must be placed in the anonymous folder.

13

replace: Used to set when there are files with the same name in the same directory, replace the existing file with new file or automatically rename the new file.

Example​

//use upload1 to pick files from device and upload to apps folder. 
utils.saveToILLADrive({
fileName:upload1.files[0].name,
fileData:upload1.files[0].dataURI,
fileType:"PNG",
folder:"apps",
allowAnonymous:false,
replace:true
})
//upload a text file.  
utils.saveToILLADrive({
fileName:"test.txt",
fileData:"abc",
fileType:"Plain text",
folder:"apps",
allowAnonymous:false,
replace:true
})

Download from ILLA Drive​

Structure​

utils.downloadFromILLADrive({
    downloadInfo:[{
        tinyURL:string,
        fileID:string
        }],
    asZip:boolean
})

Description​

Used to download files from ILLA Drive.

downloadInfo: an array of objects including tinyURL and fileID. You can use the component Drive file picker to pick files from ILLA Drive and get the downloadInfo via drivePicker1.value

asZip: used to set whether to download the files as a Zip.

Example​

utils.downloadFromILLADrive({
    downloadInfo:drivePicker1.value,
    asZip:true
})

Download​

Structure​

utils.downloadFile({
    fileType:string,
    fileName:string,
    data:anyType
})

Description​

Used to export data to your device.

fileType: One of the following values: Auto, Plain text, JPEG, PNG, SVG, JSON, CSV, TSV, Excel(.xlsx). When using "Auto," we will attempt to determine the file type based on either the file extension or the file data.

fileName: a name with extension.

data: data of the file.

Example​

//download the data of table as a CSV
utils.downloadFile({
    fileType:"CSV",
    fileName:"text.csv",
    data: table2.dataSourceJS
})
//download image
utils.downloadFile({
    fileType:"PNG",
    fileName:"text.png",
    data: image1.imageSrc
})

Set global data​

Set global data value​

Structure​
utils.setGlobalDataValue({
key:string, 
value:any
})
Description​

Used to set the value of gobalData

key: the displayName of globalData as the following screenshot shows.

14

value: the value to set

Example​
//use input5 to get the user input value and set as the value of stringState. 
utils.setGlobalDataValue({
key:"stringState", 
value:input5.value
})

Set global data in​

Structure​
utils.setGlobalDataIn({
key:string, 
path:string, 
value:any
})
Description​

When the global data is an array or object, use setGlobalDataIn to modify the value corresponding to a specific index in an array or to modify the value corresponding to a specific key in an object.

key: the displayName of globalData.

path: the index of the value you intend to update in the array or the key in the object. For example, to set the second value in array, the path is 1 (the index). To set the value of the attribute named key1, the path is key1.

value: the value to set

Example​
//objectState is an object: {"key1":"value1", "key2":"value2"}, to set the 
utils.setGlobalDataIn({
key:"objectState", 
path:"key2", 
value:input7.value
})

Built-in libraries​

LibraryDocHow to use it in ILLA BuilderExample
Lodashhttps://lodash.com/docs/4.17.15__.concat(array, 2, [3], [[4]]);
Day.jshttps://day.js.org/dayjsdayjs(new Date())
uuidhttps://www.npmjs.com/package/uuiduuiduuid.parse()
numbrohttps://numbrojs.com/numbronumbro(1000).format({thousandSeparated: true})
Papahttps://www.papaparse.com/docsPapaPapa.parse(url, {download: true, // rest of config ... })

Value of actions, components...​

Use displayName.xxx to use the value of actions, components, or other globalData. Please note that in the Run Script, these variables can be directly accessed without using {{ references.

utils.downloadFromILLADrive({
    downloadInfo:{{drivePicker1.value}},//❌ 
    asZip:true
})

utils.downloadFromILLADrive({
    downloadInfo:drivePicker1.value,//✅
    asZip:true
})
+ + \ No newline at end of file diff --git a/search/index.html b/search/index.html index ef29361470..a0aab8dfd7 100644 --- a/search/index.html +++ b/search/index.html @@ -10,13 +10,13 @@ - - + +

Search the documentation

- - + + \ No newline at end of file diff --git a/select/index.html b/select/index.html index fdfbbbac64..a45c09d1f3 100644 --- a/select/index.html +++ b/select/index.html @@ -10,13 +10,13 @@ - - + +
-

Select

A select component is commonly used to present users with a list of options in a dropdown menu format. The user can select only one option from the dropdown list at a time.

The dropdown single-select component typically consists of a text label and a dropdown arrow icon, which when clicked or tapped, opens a list of options for the user to choose from. Once the user selects an option, the dropdown menu closes, and the selected option is displayed in the component.

This component is often used in forms, surveys, and other data entry scenarios where a user needs to select one option from a predefined set of choices. It offers a compact and intuitive way to present a list of options without taking up too much screen real estate or overwhelming the user with too many options at once.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueSelected value

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the select component.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a select component, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueSelected value

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
- - +
Skip to main content

Select

A select component is commonly used to present users with a list of options in a dropdown menu format. The user can select only one option from the dropdown list at a time.

The dropdown single-select component typically consists of a text label and a dropdown arrow icon, which when clicked or tapped, opens a list of options for the user to choose from. Once the user selects an option, the dropdown menu closes, and the selected option is displayed in the component.

This component is often used in forms, surveys, and other data entry scenarios where a user needs to select one option from a predefined set of choices. It offers a compact and intuitive way to present a list of options without taking up too much screen real estate or overwhelming the user with too many options at once.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueSelected value

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the select component.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a select component, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueSelected value

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
+ + \ No newline at end of file diff --git a/self-hosted-deployment/index.html b/self-hosted-deployment/index.html index 90d369a4d2..9c0d3637f7 100644 --- a/self-hosted-deployment/index.html +++ b/self-hosted-deployment/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Self-hosted deployment

Docker​

  1. Start Docker
  2. Enter the following command in the terminal to install the official image:

docker pull illasoft/illa-builder:latest

docker run -p80:2022 illasoft/illa-builder:latest

80 is the port, you can change it if it is already in use. After the execution is complete, you can access it via https://[localhost]:[80].

CLI​

Download ILLA CLI and deploy​

If you have Rust installed, you can easily build+install the latest ILLA CLI release with cargo:

cargo install illa

illa deploy --self --port=10000

The cargo tool will complete downloading the ILLA CLI with its source dependencies, build and install it into the cargo bin path so that we can run it. Once installed, you can run the ILLA CLI with the illa command.

Alternatively, you can just download the ILLA CLI for your operating system here:

If you do download from the above links, the steps are slightly different compared to downloading the ILLA CLI from cargo . After downloading the CLI, you will have to make it executable. Let’s take the illa-linux for example:

# download illa cli binary file
> wget <https://github.com/illacloud/illa/releases/latest/download/illa-x86_64-linux.tar.gz>

# unpack the file
> tar -zxvf illa-x86_64-linux.tar.gz

> cd illa-x86_64-linux

> chmod +x illa

# run the illa cli
> ./illa

Checking the prerequisites of self-hosted installation​

These ports 5432, 9999 and 8000 should remain for the ILLA Builder

The following command will check the prerequisites of self-hosted installation on your operating system:

> illa doctor

Deploying ILLA Builder​

Once the ILLA CLI has been installed, you can run a self-hosted or cloud installation.

You can simply deploy a self-hosted ILA Builder by running the following command:

# the port which ILLA Builder can be accessed on can be changed
# the <SERVER_ADDRESS> should be your cloud server public ip, default localhost
> illa deploy --self --port=10000 --server-addr=<SERVER_ADDRESS>

Now, you can access the ILLA Builder: http://localhost:10000

Updating ILLA Builder​

To update the ILLA Builder with the latest docker images, use the following command:

> illa update --self

Other operations​

# list the ILLA Builder
> illa list --self

# stop the ILLA Builder
> illa stop --self

# remove the ILLA Builder
> illa remove --self

# forced removal of the running ILLA Builder and persistent data
> sudo illa remove --force --self --data

# restart the ILLA Builder
> illa restart --self

# help information
> illa help

Kubernetes​

Description​

Build illa all-in-one image and run it by k8s on your machine. You can check out the scripts file in the scripts folder for more details.

Note:

We highly recommended deploying with our auto-deploy tools illa-cli.

And for the moment we do not support Apple Silicon M1 (darwin-arm64 arch).

Run with an official slim image​

Install GNU make and type:

make deploy

or just execute:

/bin/bash scripts/deploy.sh

this command will pull illasoft official all-in-one image and deploy it on your Kubernetes cluster.

For Database Persistent Storage​

Edit illa-builder.yaml, and add your IAAS persistent storage config on it.

For HTTPS Config​

You can route the NodePort to your Kubernetes cluster ingress gateway and rewrite to 443 port, and add https cert in your ingress gateway.

Or, you can deploy an ingress gateway manually into your Kubernetes server, config like this:

static_resources:
  listeners:
  - name: https_listener
    address:
      socket_address:
        address: 0.0.0.0
        port_value: 443
    filter_chains:
    - filters:
      - name: envoy.filters.network.http_connection_manager
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
          stat_prefix: https_listener
          route_config:
            name: local_route
            virtual_hosts:
            - name: illa_builder
              domains:
              - "illa.yourdomian.com" # replace with your domain
              routes:
              - match:
                  prefix: "/"route:
                  cluster: illa_builder
          http_filters:
          - name: envoy.filters.http.router
            typed_config:
              "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router
      transport_socket:
        name: envoy.transport_sockets.tls
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.transport_sockets.tls.v3.DownstreamTlsContext
          common_tls_context:
            tls_certificates:
            # replace this with your cert file
            - certificate_chain:
                filename: /your-cert-folder/fullchain.pem
              private_key:
                filename: /your-cert-folder/privkey.pem

  clusters:
  - name: illa_builder
    type: STRICT_DNS
    lb_policy: ROUND_ROBIN
    connect_timeout: 10s
    load_assignment:
      cluster_name: illa_builder
      endpoints:
      - lb_endpoints:
        - endpoint:
            address:
              socket_address:
                address: illa-builder
                port_value: 80

Quickly deploy​

You can deploy ILLA in a remarkably fast way, please follow the instructions below:

First, please download this docker file to your computer, then run the following code.

cd docker;
/bin/bash ./scripts/run-official-image.sh;

And log in with the default username and password:

Username: root

Password: password (self-host mode only).

- - +
Skip to main content

Self-hosted deployment

Docker​

  1. Start Docker
  2. Enter the following command in the terminal to install the official image:

docker pull illasoft/illa-builder:latest

docker run -p80:2022 illasoft/illa-builder:latest

80 is the port, you can change it if it is already in use. After the execution is complete, you can access it via https://[localhost]:[80].

CLI​

Download ILLA CLI and deploy​

If you have Rust installed, you can easily build+install the latest ILLA CLI release with cargo:

cargo install illa

illa deploy --self --port=10000

The cargo tool will complete downloading the ILLA CLI with its source dependencies, build and install it into the cargo bin path so that we can run it. Once installed, you can run the ILLA CLI with the illa command.

Alternatively, you can just download the ILLA CLI for your operating system here:

If you do download from the above links, the steps are slightly different compared to downloading the ILLA CLI from cargo . After downloading the CLI, you will have to make it executable. Let’s take the illa-linux for example:

# download illa cli binary file
> wget <https://github.com/illacloud/illa/releases/latest/download/illa-x86_64-linux.tar.gz>

# unpack the file
> tar -zxvf illa-x86_64-linux.tar.gz

> cd illa-x86_64-linux

> chmod +x illa

# run the illa cli
> ./illa

Checking the prerequisites of self-hosted installation​

These ports 5432, 9999 and 8000 should remain for the ILLA Builder

The following command will check the prerequisites of self-hosted installation on your operating system:

> illa doctor

Deploying ILLA Builder​

Once the ILLA CLI has been installed, you can run a self-hosted or cloud installation.

You can simply deploy a self-hosted ILA Builder by running the following command:

# the port which ILLA Builder can be accessed on can be changed
# the <SERVER_ADDRESS> should be your cloud server public ip, default localhost
> illa deploy --self --port=10000 --server-addr=<SERVER_ADDRESS>

Now, you can access the ILLA Builder: http://localhost:10000

Updating ILLA Builder​

To update the ILLA Builder with the latest docker images, use the following command:

> illa update --self

Other operations​

# list the ILLA Builder
> illa list --self

# stop the ILLA Builder
> illa stop --self

# remove the ILLA Builder
> illa remove --self

# forced removal of the running ILLA Builder and persistent data
> sudo illa remove --force --self --data

# restart the ILLA Builder
> illa restart --self

# help information
> illa help

Kubernetes​

Description​

Build illa all-in-one image and run it by k8s on your machine. You can check out the scripts file in the scripts folder for more details.

Note:

We highly recommended deploying with our auto-deploy tools illa-cli.

And for the moment we do not support Apple Silicon M1 (darwin-arm64 arch).

Run with an official slim image​

Install GNU make and type:

make deploy

or just execute:

/bin/bash scripts/deploy.sh

this command will pull illasoft official all-in-one image and deploy it on your Kubernetes cluster.

For Database Persistent Storage​

Edit illa-builder.yaml, and add your IAAS persistent storage config on it.

For HTTPS Config​

You can route the NodePort to your Kubernetes cluster ingress gateway and rewrite to 443 port, and add https cert in your ingress gateway.

Or, you can deploy an ingress gateway manually into your Kubernetes server, config like this:

static_resources:
  listeners:
  - name: https_listener
    address:
      socket_address:
        address: 0.0.0.0
        port_value: 443
    filter_chains:
    - filters:
      - name: envoy.filters.network.http_connection_manager
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
          stat_prefix: https_listener
          route_config:
            name: local_route
            virtual_hosts:
            - name: illa_builder
              domains:
              - "illa.yourdomian.com" # replace with your domain
              routes:
              - match:
                  prefix: "/"route:
                  cluster: illa_builder
          http_filters:
          - name: envoy.filters.http.router
            typed_config:
              "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router
      transport_socket:
        name: envoy.transport_sockets.tls
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.transport_sockets.tls.v3.DownstreamTlsContext
          common_tls_context:
            tls_certificates:
            # replace this with your cert file
            - certificate_chain:
                filename: /your-cert-folder/fullchain.pem
              private_key:
                filename: /your-cert-folder/privkey.pem

  clusters:
  - name: illa_builder
    type: STRICT_DNS
    lb_policy: ROUND_ROBIN
    connect_timeout: 10s
    load_assignment:
      cluster_name: illa_builder
      endpoints:
      - lb_endpoints:
        - endpoint:
            address:
              socket_address:
                address: illa-builder
                port_value: 80

Quickly deploy​

You can deploy ILLA in a remarkably fast way, please follow the instructions below:

First, please download this docker file to your computer, then run the following code.

cd docker;
/bin/bash ./scripts/run-official-image.sh;

And log in with the default username and password:

Username: root

Password: password (self-host mode only).

+ + \ No newline at end of file diff --git a/server-side-pagination/index.html b/server-side-pagination/index.html index 8ad3351e82..cb94f98a52 100644 --- a/server-side-pagination/index.html +++ b/server-side-pagination/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Server-side pagination

When building an application using a large dataset, it is crucial to limit the amount of data returned in each query. Returning a large amount of data at once can impact the performance of the application, especially when dealing with complex queries involving multiple table joins.

The best practice to optimize queries is to implement server-side pagination. By only returning the results necessary to populate the given view, the amount of data transferred can be reduced. When additional data is needed to populate the view, another action can be triggered, and the server will retrieve the next set of results.

How to enable server-side pagination​

Components

  • Data Grid
  • Grid List

Limit offset based pagination​

Supported on Data Grid and Grid List

Properties to configure​

Property nameTypeDescriptionUse example
Total row countnumberUse {{n}} to set the value. The total number of rows is used to calculate the total number of pages. You can use an Action to query the database for the total number of records and fill in the query result here.Create an action named mysql1 with the query statement "select count(*) from users". This query is used to determine the total number of records in the users table. Simply fill in {{mysql1.data[0].count}} in the Total row count field.
Page sizenumberUse {{n}} to set the number of records displayed per page. This will also be used to limit the number of records returned by the database or API in each pagination query.{{20}}

State of components​

State nameDescription
pageCurrent page index of data grid or grid list.
pageSizePage size refers to the number of records displayed per page in a data grid or grid list.

Configure Actions​

Take SQL-like database and API as examples.

SQL-like database​

Step 1: Write SQL in Action

SELECT *
FROM users
LIMIT {{dataGrid1.pageSize}}
OFFSET {{dataGrid1.page*dataGrid1.pageSize}}

In this example, we use {{dataGrid1.pageSize}} to determine how many records need to be returned for this query, and we use {{dataGrid1.page*dataGrid1.pageSize}} to calculate the offset for this request, indicating from which record to start returning.

Step 2: Changing "Run action only when manually triggered" to "Run action automatically when inputs change"

After that, every time you change the page number of dataGrid1, the action will be triggered automatically and query data with the new page number.

API​

Step 1: Setting up paginated queries using a query

https://example.com?limit={{dataGrid1.pageSize}}&skip={{dataGrid1.page*dataGrid1.pageSize}}

Many common APIs use the parameters "limit" and "skip" for pagination. In this example, we use {{dataGrid1.pageSize}} to determine how many records need to be returned for this query, and we use {{dataGrid1.page*dataGrid1.pageSize}} to calculate the offset for this request, indicating from which record to start returning.

Step 2: Changing "Run action only when manually triggered" to "Run action automatically when inputs change"

After that, every time you change the page number of dataGrid1, the action will be triggered automatically and query data with the new page number.

Cursor based pagination​

Only supported on Grid List

Properties to configure​

Property nameTypeDescriptionUse example
Previous cursorstringWhen you paginate forward, we will update the 'afterCursor' value to indicate to the API from which record to start querying data.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.startCursor}}
Next cursorstringWhile you are paging backward, we will update the "beforeCursor" with this value, which will inform the API about the starting point for querying data in the backward direction.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.endCursor}}
Has next pagebooleanUsed to determine if there is still a next page.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.hasNextPage}}
PagenumberUse {{n}} to set the number of records displayed per page. This is only used to inform the gridlist component about how many items should be displayed per page.{{20}}

State of components​

State nameDescription
beforeCursorWhen paging, inform the API to start querying from a specific record number. When beforeCursor is empty, it indicates the need to page backward. Therefore, based on this value, the configuration for the subsequent action will specify whether to perform a backward or forward query. This will be further explained in the upcoming action configuration.
afterCursorWhen paging, inform the API about the starting point for querying data. When afterCursor is empty, it indicates the need to page forward.

Configure Actions​

Take GitHub's GraphQL interface as example.

Query​

query ($repoOwner: String!, $repoName: String!, $first: Int, $last: Int, $beforeCursor: String, $afterCursor: String) {
   repository(owner: $repoOwner, name: $repoName) {
      issues(first: $first, last: $last, before: $beforeCursor, after: $afterCursor, orderBy: {field: CREATED_AT, direction: DESC}) {
         pageInfo {
            hasNextPage
            hasPreviousPage
            endCursor
            startCursor
         }
         totalCount
         edges {
            cursor
            node {
               title
               number
               url
            }
         }
      }
   }
}

In this example, we first ensure that the API response includes the following four values: hasNextPage, hasPreviousPage, endCursor, and startCursor. These values are used to configure the properties of the component.

And furthermore, we define some variables such as beforeCursor, afterCursor, etc., which need to be further set in the variables section under GraphQL.

Variables​

keyvaluedescription
repoOwnerillacloudTo query the issues in illa-builder repository on illacloud.
repoNameilla-builderTo query the issues in illa-builder repository on illacloud.
beforeCursor{{gridList1.beforeCursor}}This is used to set the cursor from which to start the query when paging forward. If you are paging backward, the value of this field will be null and no further processing is required.
last{{gridList1.beforeCursor ? gridList1.pageSize : null}}The last parameter is used to set the number of records to query when paging forward. If the value of {{gridList1.beforeCursor}} is not null, indicating that you want to page forward, then this conditional statement will also use {{gridList1.pageSize}} as the number of records to query when paging forward. Similarly, if you are paging backward, this value will be empty.
afterCursor{{gridList1.afterCursor}}This is used to set the cursor from which to start the query when paging backward. If you are paging forward, the value of this field will be null.
first{{!gridList1.beforeCursor ? gridList1.pageSize:null}}The first parameter is used to set the number of records to query when paging forward. If the value of {{gridList1.afterCursor}} is not null, it confirms that you are paging backward. However, when you initially trigger the pagination, both beforeCursor and afterCursor are empty, resulting in an error in the query. Therefore, when both are empty, we assume that the user's first pagination is always paging backward, so we only need to check if gridList1.beforeCursor is not empty. Once it is confirmed to be paging backward, this conditional statement will also use {{gridList1.pageSize}} as the number of records to query when paging backward.

Demo​

https://illa.ai/app/ILAcx4p1C7gj/detail

You can fork this demo to your team to check the configuration. And you can change the resources to the following resources:

GraphQL

FieldData
Base URLhttps://api.github.com/graphql
Authenticationbearer
Bearer TokenGenerate your personal token on GitHub

Rest API

FieldData
Base URLhttps://dummyjson.com/

PostgreSQL

FieldData
Hostname146.190.2.7
Port30739
Databaseilla_demo
Usernameilla
Passwordilla2022
- - +
Skip to main content

Server-side pagination

When building an application using a large dataset, it is crucial to limit the amount of data returned in each query. Returning a large amount of data at once can impact the performance of the application, especially when dealing with complex queries involving multiple table joins.

The best practice to optimize queries is to implement server-side pagination. By only returning the results necessary to populate the given view, the amount of data transferred can be reduced. When additional data is needed to populate the view, another action can be triggered, and the server will retrieve the next set of results.

How to enable server-side pagination​

Components

  • Data Grid
  • Grid List

Limit offset based pagination​

Supported on Data Grid and Grid List

Properties to configure​

Property nameTypeDescriptionUse example
Total row countnumberUse {{n}} to set the value. The total number of rows is used to calculate the total number of pages. You can use an Action to query the database for the total number of records and fill in the query result here.Create an action named mysql1 with the query statement "select count(*) from users". This query is used to determine the total number of records in the users table. Simply fill in {{mysql1.data[0].count}} in the Total row count field.
Page sizenumberUse {{n}} to set the number of records displayed per page. This will also be used to limit the number of records returned by the database or API in each pagination query.{{20}}

State of components​

State nameDescription
pageCurrent page index of data grid or grid list.
pageSizePage size refers to the number of records displayed per page in a data grid or grid list.

Configure Actions​

Take SQL-like database and API as examples.

SQL-like database​

Step 1: Write SQL in Action

SELECT *
FROM users
LIMIT {{dataGrid1.pageSize}}
OFFSET {{dataGrid1.page*dataGrid1.pageSize}}

In this example, we use {{dataGrid1.pageSize}} to determine how many records need to be returned for this query, and we use {{dataGrid1.page*dataGrid1.pageSize}} to calculate the offset for this request, indicating from which record to start returning.

Step 2: Changing "Run action only when manually triggered" to "Run action automatically when inputs change"

After that, every time you change the page number of dataGrid1, the action will be triggered automatically and query data with the new page number.

API​

Step 1: Setting up paginated queries using a query

https://example.com?limit={{dataGrid1.pageSize}}&skip={{dataGrid1.page*dataGrid1.pageSize}}

Many common APIs use the parameters "limit" and "skip" for pagination. In this example, we use {{dataGrid1.pageSize}} to determine how many records need to be returned for this query, and we use {{dataGrid1.page*dataGrid1.pageSize}} to calculate the offset for this request, indicating from which record to start returning.

Step 2: Changing "Run action only when manually triggered" to "Run action automatically when inputs change"

After that, every time you change the page number of dataGrid1, the action will be triggered automatically and query data with the new page number.

Cursor based pagination​

Only supported on Grid List

Properties to configure​

Property nameTypeDescriptionUse example
Previous cursorstringWhen you paginate forward, we will update the 'afterCursor' value to indicate to the API from which record to start querying data.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.startCursor}}
Next cursorstringWhile you are paging backward, we will update the "beforeCursor" with this value, which will inform the API about the starting point for querying data in the backward direction.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.endCursor}}
Has next pagebooleanUsed to determine if there is still a next page.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.hasNextPage}}
PagenumberUse {{n}} to set the number of records displayed per page. This is only used to inform the gridlist component about how many items should be displayed per page.{{20}}

State of components​

State nameDescription
beforeCursorWhen paging, inform the API to start querying from a specific record number. When beforeCursor is empty, it indicates the need to page backward. Therefore, based on this value, the configuration for the subsequent action will specify whether to perform a backward or forward query. This will be further explained in the upcoming action configuration.
afterCursorWhen paging, inform the API about the starting point for querying data. When afterCursor is empty, it indicates the need to page forward.

Configure Actions​

Take GitHub's GraphQL interface as example.

Query​

query ($repoOwner: String!, $repoName: String!, $first: Int, $last: Int, $beforeCursor: String, $afterCursor: String) {
   repository(owner: $repoOwner, name: $repoName) {
      issues(first: $first, last: $last, before: $beforeCursor, after: $afterCursor, orderBy: {field: CREATED_AT, direction: DESC}) {
         pageInfo {
            hasNextPage
            hasPreviousPage
            endCursor
            startCursor
         }
         totalCount
         edges {
            cursor
            node {
               title
               number
               url
            }
         }
      }
   }
}

In this example, we first ensure that the API response includes the following four values: hasNextPage, hasPreviousPage, endCursor, and startCursor. These values are used to configure the properties of the component.

And furthermore, we define some variables such as beforeCursor, afterCursor, etc., which need to be further set in the variables section under GraphQL.

Variables​

keyvaluedescription
repoOwnerillacloudTo query the issues in illa-builder repository on illacloud.
repoNameilla-builderTo query the issues in illa-builder repository on illacloud.
beforeCursor{{gridList1.beforeCursor}}This is used to set the cursor from which to start the query when paging forward. If you are paging backward, the value of this field will be null and no further processing is required.
last{{gridList1.beforeCursor ? gridList1.pageSize : null}}The last parameter is used to set the number of records to query when paging forward. If the value of {{gridList1.beforeCursor}} is not null, indicating that you want to page forward, then this conditional statement will also use {{gridList1.pageSize}} as the number of records to query when paging forward. Similarly, if you are paging backward, this value will be empty.
afterCursor{{gridList1.afterCursor}}This is used to set the cursor from which to start the query when paging backward. If you are paging forward, the value of this field will be null.
first{{!gridList1.beforeCursor ? gridList1.pageSize:null}}The first parameter is used to set the number of records to query when paging forward. If the value of {{gridList1.afterCursor}} is not null, it confirms that you are paging backward. However, when you initially trigger the pagination, both beforeCursor and afterCursor are empty, resulting in an error in the query. Therefore, when both are empty, we assume that the user's first pagination is always paging backward, so we only need to check if gridList1.beforeCursor is not empty. Once it is confirmed to be paging backward, this conditional statement will also use {{gridList1.pageSize}} as the number of records to query when paging backward.

Demo​

https://illa.ai/app/ILAcx4p1C7gj/detail

You can fork this demo to your team to check the configuration. And you can change the resources to the following resources:

GraphQL

FieldData
Base URLhttps://api.github.com/graphql
Authenticationbearer
Bearer TokenGenerate your personal token on GitHub

Rest API

FieldData
Base URLhttps://dummyjson.com/

PostgreSQL

FieldData
Hostname146.190.2.7
Port30739
Databaseilla_demo
Usernameilla
Passwordilla2022
+ + \ No newline at end of file diff --git a/snowflake/index.html b/snowflake/index.html index ec836becb4..6556bff15e 100644 --- a/snowflake/index.html +++ b/snowflake/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Snowflake

In Illa, you can use the Snowflake query editor to execute SQL queries against your Snowflake data warehouse. You can connect to Snowflake by entering your Snowflake account credentials, including the account name, username, password, and warehouse name. Once you have connected to Snowflake, you can use the query editor to write and execute SQL queries to retrieve, manipulate, and analyze your data.

Create Snowflake​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Snowflake from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Snowflake will display as shown.

snow_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Snowflake from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Snowflake database.

snow_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Account namerequiredunique identifier that is assigned to each Snowflake account
Warehouserequireda cluster of compute resources that are used to process queries and run analytical workloads
DatabaserequiredThe name of the database
Schemaoptionala container that holds database objects such as tables, views, and procedures
Roleoptionala named set of privileges that can be assigned to one or more users
Authenticationrequiredsecure access to your data and resources in the Snowflake data warehouse (Basic Auth or Key Pair (only encrypted private keys are supported))
Usernamerequiredthe username you wish to use when logging in to the Snowflake server.
PasswordrequiredUse this password for authentication.

Create Actions​

We have created a Snowflake resource, we can add the action by selecting Snowflake from action list and choosing the Create action button.

snow_resource_list

Now we have added the Snowflake server as an action to our building page.

snow

Configure Snowflake​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +
Skip to main content

Snowflake

In Illa, you can use the Snowflake query editor to execute SQL queries against your Snowflake data warehouse. You can connect to Snowflake by entering your Snowflake account credentials, including the account name, username, password, and warehouse name. Once you have connected to Snowflake, you can use the query editor to write and execute SQL queries to retrieve, manipulate, and analyze your data.

Create Snowflake​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Snowflake from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Snowflake will display as shown.

snow_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Snowflake from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Snowflake database.

snow_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Account namerequiredunique identifier that is assigned to each Snowflake account
Warehouserequireda cluster of compute resources that are used to process queries and run analytical workloads
DatabaserequiredThe name of the database
Schemaoptionala container that holds database objects such as tables, views, and procedures
Roleoptionala named set of privileges that can be assigned to one or more users
Authenticationrequiredsecure access to your data and resources in the Snowflake data warehouse (Basic Auth or Key Pair (only encrypted private keys are supported))
Usernamerequiredthe username you wish to use when logging in to the Snowflake server.
PasswordrequiredUse this password for authentication.

Create Actions​

We have created a Snowflake resource, we can add the action by selecting Snowflake from action list and choosing the Create action button.

snow_resource_list

Now we have added the Snowflake server as an action to our building page.

snow

Configure Snowflake​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/statistics/index.html b/statistics/index.html index 61a81c19c9..9957e38454 100644 --- a/statistics/index.html +++ b/statistics/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Statistics

What is Statistics?​

The Statistics component in ILLA Cloud is a powerful tool for displaying and analyzing numerical data. It provides a visually appealing and customizable way to showcase key metrics and statistics.

Properties​

PropertiesDescription
LabelThe name of the field displayed to the user
Primary valuethe primary value or rating displayed by the component.
Secondary valuean additional rating or value associated with the primary value, providing additional information or context.
Primary
Decimal placespecify the number of decimal places that can be entered in the component
Show trend signEnabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separatorWhen enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend colorchange color based on the trend or change in the rating value.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Secondary
Decimal placespecify the number of decimal places that can be entered in the component
Show trend signEnabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separatorWhen enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend colorchange color based on the trend or change in the rating value.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Event handlerdefine custom actions or logic that trigger when the component is interacted with or the rating is changed.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Alignmentalignment of the component, such as left, center, or right.
Theme ColorAllows users to specify the button's background color and opacity
Positive colordetermines the color used for positive or high ratings
Negative colordefines the color used for negative or low ratings.

Method​

You can use other components to control the component. We support the following two methods:

  • setPrimaryValue

To set the primary value, for example, {{"value1"}}

PropertiesDescription
Primary ValueInput primary value
  • resetPrimaryValue

To reset the value to the default value of the selected component. If the default value is not specified, clear value.

Event handler​

EventDescription
ClickWhen a user clicks this button, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the number input component.
hiddenhidden status (true or false)
labellabel value
negativeColorSchemedetermines the color scheme used for displaying negative values
positiveColorSchemesets the color scheme for positive values
primaryValuethe primary numerical value to be displayed in the statistics component.
decimalPlacedefines the number of decimal places to be shown for both the primary and secondary values.
showTrendSigndisplays a positive or negative trend sign (+ or -) next to the values, indicating the direction of the trend.
textAlignthe alignment of the statistics component
positiveSignsets the symbol to be displayed for positive values
negativeSigndefines the symbol to be shown for negative values.
showSeparatorwhether displays a thousand separator (such as a comma) to improve readability of large numbers.
prefixTextvalue of the prefix
suffixTextvalue of the suffix
setPrimaryValueenables you to programmatically set or update the primary value of the statistics component.
secondaryValuea secondary numerical value that can be displayed alongside the primary value.
secondaryDecimalPlacespecifies the number of decimal places to be shown for the secondary value.
secondaryEnableTrendColorwhether applies a color scheme to the secondary value based on its trend
secondaryPositiveSignSets the symbol to be displayed for positive secondary values
secondaryNegativeSignDefines the symbol to be shown for negative secondary values
secondaryPrefixTextadd custom text or symbols to appear before the secondary values.
secondaryShowSeparatordisplays a thousand separator for the secondary value.
secondaryShowTrendSigndisplays a trend sign (+ or -) for the secondary value.
secondarySuffixTextadd custom text or symbols to appear after the secondary values.
tooltipTextvalue of tooltip text

Example: {{statistics1.secondaryValue}}

Use case​

Next, we will demonstrate how to map the data from the data source to statistics with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

'1.txt' with the decimal '1.1111' as its data. This is the value we want to show in number input.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 1.txt for **Object Key.**

Click Save and Run to activate this action.

stat_data

Step 2 Add Components​

Next, we can add a statistics component and a button component to the canvas.

We set the default primary value of statistics to 0 and labeled the button as "Set value" as shown below

stat_layout

Step 3 Configure the component​

For the button component, we can configure it to set the value in statistics component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the statistics component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

stat_button_config

Step 4 Test​

Now that when you click the "Set value" button, the value should change to 1.1111.

stat_test

- - +
Skip to main content

Statistics

What is Statistics?​

The Statistics component in ILLA Cloud is a powerful tool for displaying and analyzing numerical data. It provides a visually appealing and customizable way to showcase key metrics and statistics.

Properties​

PropertiesDescription
LabelThe name of the field displayed to the user
Primary valuethe primary value or rating displayed by the component.
Secondary valuean additional rating or value associated with the primary value, providing additional information or context.
Primary
Decimal placespecify the number of decimal places that can be entered in the component
Show trend signEnabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separatorWhen enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend colorchange color based on the trend or change in the rating value.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Secondary
Decimal placespecify the number of decimal places that can be entered in the component
Show trend signEnabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separatorWhen enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend colorchange color based on the trend or change in the rating value.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Event handlerdefine custom actions or logic that trigger when the component is interacted with or the rating is changed.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Alignmentalignment of the component, such as left, center, or right.
Theme ColorAllows users to specify the button's background color and opacity
Positive colordetermines the color used for positive or high ratings
Negative colordefines the color used for negative or low ratings.

Method​

You can use other components to control the component. We support the following two methods:

  • setPrimaryValue

To set the primary value, for example, {{"value1"}}

PropertiesDescription
Primary ValueInput primary value
  • resetPrimaryValue

To reset the value to the default value of the selected component. If the default value is not specified, clear value.

Event handler​

EventDescription
ClickWhen a user clicks this button, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the number input component.
hiddenhidden status (true or false)
labellabel value
negativeColorSchemedetermines the color scheme used for displaying negative values
positiveColorSchemesets the color scheme for positive values
primaryValuethe primary numerical value to be displayed in the statistics component.
decimalPlacedefines the number of decimal places to be shown for both the primary and secondary values.
showTrendSigndisplays a positive or negative trend sign (+ or -) next to the values, indicating the direction of the trend.
textAlignthe alignment of the statistics component
positiveSignsets the symbol to be displayed for positive values
negativeSigndefines the symbol to be shown for negative values.
showSeparatorwhether displays a thousand separator (such as a comma) to improve readability of large numbers.
prefixTextvalue of the prefix
suffixTextvalue of the suffix
setPrimaryValueenables you to programmatically set or update the primary value of the statistics component.
secondaryValuea secondary numerical value that can be displayed alongside the primary value.
secondaryDecimalPlacespecifies the number of decimal places to be shown for the secondary value.
secondaryEnableTrendColorwhether applies a color scheme to the secondary value based on its trend
secondaryPositiveSignSets the symbol to be displayed for positive secondary values
secondaryNegativeSignDefines the symbol to be shown for negative secondary values
secondaryPrefixTextadd custom text or symbols to appear before the secondary values.
secondaryShowSeparatordisplays a thousand separator for the secondary value.
secondaryShowTrendSigndisplays a trend sign (+ or -) for the secondary value.
secondarySuffixTextadd custom text or symbols to appear after the secondary values.
tooltipTextvalue of tooltip text

Example: {{statistics1.secondaryValue}}

Use case​

Next, we will demonstrate how to map the data from the data source to statistics with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

'1.txt' with the decimal '1.1111' as its data. This is the value we want to show in number input.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 1.txt for **Object Key.**

Click Save and Run to activate this action.

stat_data

Step 2 Add Components​

Next, we can add a statistics component and a button component to the canvas.

We set the default primary value of statistics to 0 and labeled the button as "Set value" as shown below

stat_layout

Step 3 Configure the component​

For the button component, we can configure it to set the value in statistics component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the statistics component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

stat_button_config

Step 4 Test​

Now that when you click the "Set value" button, the value should change to 1.1111.

stat_test

+ + \ No newline at end of file diff --git a/supabase/index.html b/supabase/index.html index e0a66727b5..1cd4266d5b 100644 --- a/supabase/index.html +++ b/supabase/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Supabase DB

Supabase is an open-source Firebase alternative that allows developers to build real-time web and mobile applications. It provides many of the same features as Firebase, such as real-time databases, user authentication, and hosting, but with the added benefits of being open-source and providing a SQL API. This allows developers to use their existing SQL knowledge and tools, making it easy to integrate with other systems. Additionally, Supabase provides a more flexible and customizable platform than Firebase, which can be more restrictive regarding data modeling and usage.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Supabase in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Supabase, visit their website at https://supabase.com/. Let's begin!

Step 1: Set up your Back end on Supabase​

On the Supabase dashboard, click New project and set the name to adminPanel.

Create a new table by clicking on the Create a new table .

Supabase offers a variety of options for populating tables with data, including writing queries, creating schemas through a user interface, and uploading CSV files.

Fill out the info in the table. The database is now set up.

Step 2: Build UI on ILLA Cloud​

On ILLA Cloud, click Create New to create a new application.

Drag components from the Insert panel to the canvas.

Select the components on the canvas and configure the property on the Inspect panel.

As seen in the below screenshot, we have built a simple admin panel.

Step 3: Connect to Supabase and config CRUD​

Note down the database connection information under Project Settings in Supabase.

In the Action List, click + New and select Supabase DB.

Fill out the form to connect to your Supabase instance. Test connection and save resource.

Click Create Action to create an action with the Supabase resource and config your CRUD.

Use {{ to get the front-end input data. The following is an example of the User Management page in the Admin Panel.

Search for a user by the name inputted in input1

SELECT *
FROM user
WHERE name = "{{input1.value}}"
;

Update user data. Update user information when id matches

UPDATE user
SET name = "{{input3.value}}"
, email = "{{input4.value}}"
WHERE id="{{input2.value}}"
;

Insert user data

INSERT INTO user VALUES("{{input5.value}}","{{input6.value}}","{{input7.value}}");

Delete a user by id

DELETE FROM user WHERE id = "{{input2.value}}";

Step 4: Show data on components​

Configure the properties of components with {{ . For example:

Resources​

- - +
Skip to main content

Supabase DB

Supabase is an open-source Firebase alternative that allows developers to build real-time web and mobile applications. It provides many of the same features as Firebase, such as real-time databases, user authentication, and hosting, but with the added benefits of being open-source and providing a SQL API. This allows developers to use their existing SQL knowledge and tools, making it easy to integrate with other systems. Additionally, Supabase provides a more flexible and customizable platform than Firebase, which can be more restrictive regarding data modeling and usage.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Supabase in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Supabase, visit their website at https://supabase.com/. Let's begin!

Step 1: Set up your Back end on Supabase​

On the Supabase dashboard, click New project and set the name to adminPanel.

Create a new table by clicking on the Create a new table .

Supabase offers a variety of options for populating tables with data, including writing queries, creating schemas through a user interface, and uploading CSV files.

Fill out the info in the table. The database is now set up.

Step 2: Build UI on ILLA Cloud​

On ILLA Cloud, click Create New to create a new application.

Drag components from the Insert panel to the canvas.

Select the components on the canvas and configure the property on the Inspect panel.

As seen in the below screenshot, we have built a simple admin panel.

Step 3: Connect to Supabase and config CRUD​

Note down the database connection information under Project Settings in Supabase.

In the Action List, click + New and select Supabase DB.

Fill out the form to connect to your Supabase instance. Test connection and save resource.

Click Create Action to create an action with the Supabase resource and config your CRUD.

Use {{ to get the front-end input data. The following is an example of the User Management page in the Admin Panel.

Search for a user by the name inputted in input1

SELECT *
FROM user
WHERE name = "{{input1.value}}"
;

Update user data. Update user information when id matches

UPDATE user
SET name = "{{input3.value}}"
, email = "{{input4.value}}"
WHERE id="{{input2.value}}"
;

Insert user data

INSERT INTO user VALUES("{{input5.value}}","{{input6.value}}","{{input7.value}}");

Delete a user by id

DELETE FROM user WHERE id = "{{input2.value}}";

Step 4: Show data on components​

Configure the properties of components with {{ . For example:

Resources​

+ + \ No newline at end of file diff --git a/switch/index.html b/switch/index.html index d7cf83d9b9..7c364c05de 100644 --- a/switch/index.html +++ b/switch/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Switch

What is Switch?​

The Switch component is a user interface element that allows users to toggle between two states: "on" and "off".

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
LoadingWhether the component should show a loading indicator.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following three methods:

  • setValue

To set the selected value, for example, {{'value1'}}

PropertiesDescription
ValueSelected value
  • clearValue

To clear the selected value

  • toggle

changing the switch from the "off" state to the "on" state, or vice versa

Example Usage:

Switch component support listening to the onClick event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onClick event of a Button component, you would add an event trigger to that Button component.
  2. In the Edit event handler, select Control component in action, select the Switch component that you want to update as the target of the event.
  3. Choose the toggle action. When the event is triggered (ie when the button is clicked), the switch component with be toggled and its status will be updated.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the switch component will automatically update whenever the onClick event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected option value, perform specific action customized by users.

Data​

The button component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
displayNamethe name of this component (ie button1)
hiddena boolean value indicate the hidden status of button
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
valueA user sets the value to be true or false

Use case​

Next, we will demonstrate how to switch the status of other components dynamically.

Step 1 Add a Component​

First we add the Switch component and label it as 'Hide'. Then we use the text component as an influenced component that changes from 'displayed' to 'hidden' state. We change its content to 'Hello World'

Step 2 Configure a Component​

In the Hidden property for Text. Click on the fx icon so we can control the component's hidden state by setting it the same as the value of our switch using JavaScript:

{{switch1.value}}

Now, whenever the switch is on, the value for switch is true, the text will be hide, and vice versa.

Switch On

switch0

Switch Off

switch_off

- - +
Skip to main content

Switch

What is Switch?​

The Switch component is a user interface element that allows users to toggle between two states: "on" and "off".

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
LoadingWhether the component should show a loading indicator.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following three methods:

  • setValue

To set the selected value, for example, {{'value1'}}

PropertiesDescription
ValueSelected value
  • clearValue

To clear the selected value

  • toggle

changing the switch from the "off" state to the "on" state, or vice versa

Example Usage:

Switch component support listening to the onClick event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onClick event of a Button component, you would add an event trigger to that Button component.
  2. In the Edit event handler, select Control component in action, select the Switch component that you want to update as the target of the event.
  3. Choose the toggle action. When the event is triggered (ie when the button is clicked), the switch component with be toggled and its status will be updated.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the switch component will automatically update whenever the onClick event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected option value, perform specific action customized by users.

Data​

The button component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
displayNamethe name of this component (ie button1)
hiddena boolean value indicate the hidden status of button
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
valueA user sets the value to be true or false

Use case​

Next, we will demonstrate how to switch the status of other components dynamically.

Step 1 Add a Component​

First we add the Switch component and label it as 'Hide'. Then we use the text component as an influenced component that changes from 'displayed' to 'hidden' state. We change its content to 'Hello World'

Step 2 Configure a Component​

In the Hidden property for Text. Click on the fx icon so we can control the component's hidden state by setting it the same as the value of our switch using JavaScript:

{{switch1.value}}

Now, whenever the switch is on, the value for switch is true, the text will be hide, and vice versa.

Switch On

switch0

Switch Off

switch_off

+ + \ No newline at end of file diff --git a/table/index.html b/table/index.html index a6986bb6b3..d8a26365be 100644 --- a/table/index.html +++ b/table/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Table

What is Table?​

The Table component in ILLA Cloud is a powerful feature that allows users to display, organize, and manipulate tabular data within the application. It provides a structured layout with rows and columns, enabling users to view and interact with data in a convenient and structured manner.

Properties​

PropertiesDescription
Data sourcesource of data that populates the table
Empty statethe content or message displayed when the table has no data to show
Loadingwhether the Table component is currently in a loading state
Columnsstructure and configuration of the columns in the table. (See the section about Columns below for more detail)
Columnthe number of columns
Multi-Row SelectionUse {{table.selectedRow[n].columnName}} to access data.
Cell SelectionWhether allow users to select a cell
Click outside to deselectSupported in the row single selection mode. After enabling it, click an area other than the table to unselect the row.
Overflowhow the table handles content that exceeds the available space within the table's container (pagination or scroll)
Enable server side paginationWhether to enable server pagination
PageSizethe number of rows to be displayed per page when server-side pagination is enabled
RefreshWhether to show the refresh icon.
DownloadShow download button in toolbar.
Download raw dataWhether to show the download raw data icon.
FilterShow filter button in toolbar
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions.
Disablednon-interactive and cannot be modified or triggered by the user.

Column Properties Overview​

For each column, we can configure its properties to customize the data displayed for each column.

PropertiesDescription
Column titlespecifies the name or label of the column, which serves as a header to identify the data it represents
Column typedefines the type of data that the column contains, including auto, text, date, tag, time, dateTime, number, percent, link, button, button group, boolean, image, iconGroup, Rating, Markdown, currency
Mapped ValueUse {{ currentRow }} to access the data of current row. For example, to calculate "cost per click" based on columns "cost" and "clickTimes":
{{ currentRow.cost / currentRow.clickTimes }}
Enable Sortingwhether the column allows users to sort the table data based on the values in that specific column
BackgroundSet the background of column. Use {{ write a conditional statement to set the color displayed by each cell under different conditions.
Alignmentcontrols the horizontal alignment of the content within the column cells

Column types:​

  • Auto

a dynamic type that automatically determines the data type based on the values within the column

  • Text

represents a column that contains textual data

  • Date

represents data values that correspond to specific dates

PropertiesDescription
Formataccepts various formatting codes or patterns, default is YYYY-MM-DD
  • Tag

a specialized format for displaying tags or labels associated with data entries

PropertiesDescription
Tag labelrepresents the text or label assigned to a tag in the "tag" column
Tag colordefines the color assigned to the tag in the "tag" column
  • Time

accurately represent and manipulate time values within the table

PropertiesDescription
Formatthe visual representation of the time data within the column, default is HH:mm:ss
  • DateTime

stores and represents date and time values

PropertiesDescription
Formatspecifies how the date and time values should be displayed in the column, default is YYYY-MM-DD HH:mm:ss
  • Number

handle numerical data

PropertiesDescription
Decimal placesspecify the number of decimal places to display for numeric values in the column
Show thousands separatorwhether the column should display a thousands separator to improve readability and ease of interpretation for large numbers
  • Percent

handle percentage values in a concise and visually appealing manner

PropertiesDescription
Decimal placesspecify the number of decimal places to display for percentage values in the column
Show thousands separatorwhether a thousands separator should be included in the displayed percentage values
  • Link

include clickable links within a specific column

  • Button

include interactive buttons within a specific column

PropertiesDescription
Event handlerdefines the action or event that occurs when the button within the column is clicked
Disabledwhether the button within the column is enabled or disabled
Theme colorchoose a theme color for the button
Variantvisual style or variant of the button (Fill or outline)
  • buttonGroup

allows users to create interactive button groups within a column

For each button in the columns, we can configure its properties.

PropertiesDescription
Mapped Valueassociate each button in the button group with a specific value or field from the data source
Variantvisual style or appearance of the buttons in the button group
Event handlerthe action or function triggered when a button in the group is clicked or interacted with
Disabledwhether the buttons in the button group are enabled or disabled
Theme colorcustomize the color or styling of the buttons in the group to align with the overall theme or branding of their application or website
  • Boolean

represents data that has two possible states: true or false

  • Image

populate a column in the table with image data

PropertiesDescription
Scale Typehow the image is scaled or resized within the table cell
  • IconGroup

a specialized column that allows users to display icons within a group or collection

For each button in the columns, we can configure its properties.

PropertiesDescription
Iconallows users to select or specify the icon to be displayed within the IconGroup column
Theme colordetermines the color scheme or theme applied to the icon within the IconGroup column
Event handlerenables users to define an event or action triggered when the icon in the IconGroup column is interacted with by users
Disabledstate of the IconGroup column, determining whether it is disabled or enabled for user interaction
  • Rating

represents ratings or feedback given to items or entities

  • Markdown

ability to render formatted text using Markdown syntax within the column cells

  • Currency

handle and format currency values.

PropertiesDescription
Decimal placesthe number of decimal places to display for the currency values within the column
Currency codespecifies the code or abbreviation representing the currency used in the column
Show thousands separatorwhether a thousands separator is displayed for large currency values

Method​

You can use other components to control the component. We support the following two methods:

  • selectPage

select all the rows on a specific page in a paginated table

PropertiesDescription
End Valuethe page number or index of the page to be selected
  • selectRow

select a specific row in the table

PropertiesDescription
Default selected rowdefault selected row value, can be the row index, a unique identifier, or any other property that uniquely identifies the row to be selected
  • clearSelection

clear the current selection in the table

  • setFilters

apply filters to the table data

PropertiesDescription
Filtersfiltering conditions or criteria
Filter modedetermines how the filters are applied
  • ClearFilters

clears any applied filters in the table

  • setSort

set the sorting for the table

PropertiesDescription
Columnthe column on which the sorting should be applied
Directiondirection of the sort, which can be "ascending" or "descending"

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
clickOutsideToResetSelectionwhether clicking outside the Table component should reset the current selection
columnMapperan object that maps the data fields or keys in the table's data source to the corresponding column names
columnNameIndicesan object that stores the indices of the column names
columnsan array that defines the configuration and properties of each column in the table
columnVisibilityan object that stores the visibility status of each column in the table
customColumnIndicesan object that stores the indices of the custom columns in the table
dataSourcethe data source for the table
dataSourceJSa JavaScript representation of the data source
dataSourceModethe mode or type of the data source.
defaultSortKeydefault column key to be used for sorting the table initially
defaultSortOrderthe default sorting order for the table
disabledwhether the Table component is disabled or not
displayedDatacurrently displayed data in the table
displayedDataIndicesthe indices of the displayed rows in the table
displayNamespecifies the name or label of the table component
downloadenables the ability to download the table data
downloadRawDatawhether to download the raw data or the displayed data of the table
emptyStatethe content or message to be displayed when the table is empty
enableServerSidePaginationWhen set to true, the enableServerSidePagination property enables server-side pagination for the table
enableSingleCellSelectionallows for single-cell selection in the table
filterthe currently applied filter or filtering conditions in the table
hasNextPagewhether there is a next page available in the paginated table
loadingwhether the Table component is in a loading state
multiRowSelectionenables multi-row selection in the table
nextAfterCursorthe cursor or identifier for fetching the next set of data in server-side pagination
nextBeforeCursorthe cursor for fetching the previous set of data in server-side pagination
overflowthe behavior of the table when the content exceeds the available space
pageIndexthe current page index in a paginated table
pageSizedetermines the number of rows to be displayed per page in a paginated table
paginationOffsetthe number of pages to be offset in the pagination
refreshtriggers a refresh of the table's data
renamedColumnNamesstores the renamed column names in the table
rowEventsallows for custom events or actions to be associated with specific rows in the table
totalRowCountthe total number of rows in the table

Example: {{table1.disabled}}

Use case​

Next, we will demonstrate how to map the data from **Upstash** to the **table** component.

Step 1 Add an action​

Let us create a table in Upstash called employee_profile, including 4 columns name, level, age, and married.

Then we can create a new action for Upstash from the action list in ILLA Cloud and named upstash2.

To list all data in employee_profile put the code snippet below in the Redis query section.

GET employee_profile

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const jsonString = data[0].result;

// Parse the JSON string into a JavaScript object
const jsonData = JSON.parse(jsonString);

// Access the "employees" property and map it to a new array
const mappedArray = jsonData.employees.map((employee) => ({
  name: employee.name,
  level: employee.level,
  age: employee.age,
  married: employee.married,
}));

return mappedArray;

up_code

Click Save and Run to activate this action.

up_data

Step 2 Add Components​

Next, we can add a table component to the canvas.

In the Data Source field in the Inspect page after clicking on the component, put {{upstash2.data}} to retrieve the data from Upstash.

Step 3 Test​

The final look should be as shown.

up_test

- - +
Skip to main content

Table

What is Table?​

The Table component in ILLA Cloud is a powerful feature that allows users to display, organize, and manipulate tabular data within the application. It provides a structured layout with rows and columns, enabling users to view and interact with data in a convenient and structured manner.

Properties​

PropertiesDescription
Data sourcesource of data that populates the table
Empty statethe content or message displayed when the table has no data to show
Loadingwhether the Table component is currently in a loading state
Columnsstructure and configuration of the columns in the table. (See the section about Columns below for more detail)
Columnthe number of columns
Multi-Row SelectionUse {{table.selectedRow[n].columnName}} to access data.
Cell SelectionWhether allow users to select a cell
Click outside to deselectSupported in the row single selection mode. After enabling it, click an area other than the table to unselect the row.
Overflowhow the table handles content that exceeds the available space within the table's container (pagination or scroll)
Enable server side paginationWhether to enable server pagination
PageSizethe number of rows to be displayed per page when server-side pagination is enabled
RefreshWhether to show the refresh icon.
DownloadShow download button in toolbar.
Download raw dataWhether to show the download raw data icon.
FilterShow filter button in toolbar
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions.
Disablednon-interactive and cannot be modified or triggered by the user.

Column Properties Overview​

For each column, we can configure its properties to customize the data displayed for each column.

PropertiesDescription
Column titlespecifies the name or label of the column, which serves as a header to identify the data it represents
Column typedefines the type of data that the column contains, including auto, text, date, tag, time, dateTime, number, percent, link, button, button group, boolean, image, iconGroup, Rating, Markdown, currency
Mapped ValueUse {{ currentRow }} to access the data of current row. For example, to calculate "cost per click" based on columns "cost" and "clickTimes":
{{ currentRow.cost / currentRow.clickTimes }}
Enable Sortingwhether the column allows users to sort the table data based on the values in that specific column
BackgroundSet the background of column. Use {{ write a conditional statement to set the color displayed by each cell under different conditions.
Alignmentcontrols the horizontal alignment of the content within the column cells

Column types:​

  • Auto

a dynamic type that automatically determines the data type based on the values within the column

  • Text

represents a column that contains textual data

  • Date

represents data values that correspond to specific dates

PropertiesDescription
Formataccepts various formatting codes or patterns, default is YYYY-MM-DD
  • Tag

a specialized format for displaying tags or labels associated with data entries

PropertiesDescription
Tag labelrepresents the text or label assigned to a tag in the "tag" column
Tag colordefines the color assigned to the tag in the "tag" column
  • Time

accurately represent and manipulate time values within the table

PropertiesDescription
Formatthe visual representation of the time data within the column, default is HH:mm:ss
  • DateTime

stores and represents date and time values

PropertiesDescription
Formatspecifies how the date and time values should be displayed in the column, default is YYYY-MM-DD HH:mm:ss
  • Number

handle numerical data

PropertiesDescription
Decimal placesspecify the number of decimal places to display for numeric values in the column
Show thousands separatorwhether the column should display a thousands separator to improve readability and ease of interpretation for large numbers
  • Percent

handle percentage values in a concise and visually appealing manner

PropertiesDescription
Decimal placesspecify the number of decimal places to display for percentage values in the column
Show thousands separatorwhether a thousands separator should be included in the displayed percentage values
  • Link

include clickable links within a specific column

  • Button

include interactive buttons within a specific column

PropertiesDescription
Event handlerdefines the action or event that occurs when the button within the column is clicked
Disabledwhether the button within the column is enabled or disabled
Theme colorchoose a theme color for the button
Variantvisual style or variant of the button (Fill or outline)
  • buttonGroup

allows users to create interactive button groups within a column

For each button in the columns, we can configure its properties.

PropertiesDescription
Mapped Valueassociate each button in the button group with a specific value or field from the data source
Variantvisual style or appearance of the buttons in the button group
Event handlerthe action or function triggered when a button in the group is clicked or interacted with
Disabledwhether the buttons in the button group are enabled or disabled
Theme colorcustomize the color or styling of the buttons in the group to align with the overall theme or branding of their application or website
  • Boolean

represents data that has two possible states: true or false

  • Image

populate a column in the table with image data

PropertiesDescription
Scale Typehow the image is scaled or resized within the table cell
  • IconGroup

a specialized column that allows users to display icons within a group or collection

For each button in the columns, we can configure its properties.

PropertiesDescription
Iconallows users to select or specify the icon to be displayed within the IconGroup column
Theme colordetermines the color scheme or theme applied to the icon within the IconGroup column
Event handlerenables users to define an event or action triggered when the icon in the IconGroup column is interacted with by users
Disabledstate of the IconGroup column, determining whether it is disabled or enabled for user interaction
  • Rating

represents ratings or feedback given to items or entities

  • Markdown

ability to render formatted text using Markdown syntax within the column cells

  • Currency

handle and format currency values.

PropertiesDescription
Decimal placesthe number of decimal places to display for the currency values within the column
Currency codespecifies the code or abbreviation representing the currency used in the column
Show thousands separatorwhether a thousands separator is displayed for large currency values

Method​

You can use other components to control the component. We support the following two methods:

  • selectPage

select all the rows on a specific page in a paginated table

PropertiesDescription
End Valuethe page number or index of the page to be selected
  • selectRow

select a specific row in the table

PropertiesDescription
Default selected rowdefault selected row value, can be the row index, a unique identifier, or any other property that uniquely identifies the row to be selected
  • clearSelection

clear the current selection in the table

  • setFilters

apply filters to the table data

PropertiesDescription
Filtersfiltering conditions or criteria
Filter modedetermines how the filters are applied
  • ClearFilters

clears any applied filters in the table

  • setSort

set the sorting for the table

PropertiesDescription
Columnthe column on which the sorting should be applied
Directiondirection of the sort, which can be "ascending" or "descending"

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
clickOutsideToResetSelectionwhether clicking outside the Table component should reset the current selection
columnMapperan object that maps the data fields or keys in the table's data source to the corresponding column names
columnNameIndicesan object that stores the indices of the column names
columnsan array that defines the configuration and properties of each column in the table
columnVisibilityan object that stores the visibility status of each column in the table
customColumnIndicesan object that stores the indices of the custom columns in the table
dataSourcethe data source for the table
dataSourceJSa JavaScript representation of the data source
dataSourceModethe mode or type of the data source.
defaultSortKeydefault column key to be used for sorting the table initially
defaultSortOrderthe default sorting order for the table
disabledwhether the Table component is disabled or not
displayedDatacurrently displayed data in the table
displayedDataIndicesthe indices of the displayed rows in the table
displayNamespecifies the name or label of the table component
downloadenables the ability to download the table data
downloadRawDatawhether to download the raw data or the displayed data of the table
emptyStatethe content or message to be displayed when the table is empty
enableServerSidePaginationWhen set to true, the enableServerSidePagination property enables server-side pagination for the table
enableSingleCellSelectionallows for single-cell selection in the table
filterthe currently applied filter or filtering conditions in the table
hasNextPagewhether there is a next page available in the paginated table
loadingwhether the Table component is in a loading state
multiRowSelectionenables multi-row selection in the table
nextAfterCursorthe cursor or identifier for fetching the next set of data in server-side pagination
nextBeforeCursorthe cursor for fetching the previous set of data in server-side pagination
overflowthe behavior of the table when the content exceeds the available space
pageIndexthe current page index in a paginated table
pageSizedetermines the number of rows to be displayed per page in a paginated table
paginationOffsetthe number of pages to be offset in the pagination
refreshtriggers a refresh of the table's data
renamedColumnNamesstores the renamed column names in the table
rowEventsallows for custom events or actions to be associated with specific rows in the table
totalRowCountthe total number of rows in the table

Example: {{table1.disabled}}

Use case​

Next, we will demonstrate how to map the data from **Upstash** to the **table** component.

Step 1 Add an action​

Let us create a table in Upstash called employee_profile, including 4 columns name, level, age, and married.

Then we can create a new action for Upstash from the action list in ILLA Cloud and named upstash2.

To list all data in employee_profile put the code snippet below in the Redis query section.

GET employee_profile

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const jsonString = data[0].result;

// Parse the JSON string into a JavaScript object
const jsonData = JSON.parse(jsonString);

// Access the "employees" property and map it to a new array
const mappedArray = jsonData.employees.map((employee) => ({
  name: employee.name,
  level: employee.level,
  age: employee.age,
  married: employee.married,
}));

return mappedArray;

up_code

Click Save and Run to activate this action.

up_data

Step 2 Add Components​

Next, we can add a table component to the canvas.

In the Data Source field in the Inspect page after clicking on the component, put {{upstash2.data}} to retrieve the data from Upstash.

Step 3 Test​

The final look should be as shown.

up_test

+ + \ No newline at end of file diff --git a/tabs/index.html b/tabs/index.html index 5a3e846702..42bd4d84c2 100644 --- a/tabs/index.html +++ b/tabs/index.html @@ -10,13 +10,13 @@ - - + +
-
Skip to main content

Tabs

What is Tabs?​

The Tabs component in ILLA Cloud is a versatile feature that allows users to organize and present content in a tabbed layout. It enables the creation of multiple tabs within a single container, allowing users to switch between different sections of content with ease. The Tabs component provides a user-friendly interface for navigating through related information, improving the overall user experience. With customizable styling options and the ability to add various types of content, such as text, images, or embedded components, the Tabs component in ILLA Cloud offers flexibility and enhances the organization and presentation of data.

Properties​

PropertiesDescription
Link to a containerlink the Tabs component to a specific container, enabling seamless navigation between tabs and the associated content.
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or value change.
Disableddisable specific tabs, preventing users from interacting with them
Tooltipadditional information or context about each tab
Layoutoffers different layout options, allowing you to arrange the tabs horizontally or vertically based on your design preferences or the available space.
Alignalign the Tabs component to different positions within its parent container, such as left, center, or right alignment
Hiddenhide specific tabs programmatically.
Text Colorscustomizable text colors, allowing you to style the tab labels with different colors to match your application's design or branding.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
alignalignment of the tabs within the component, such as left, center, or right alignment
colorSchemedefines the color of the text in the component
currentIndexrepresents the index of the currently selected tab within the tab list
currentKeyunique identifier or key of the currently selected tab
displayNamerepresents the name or label assigned to the component
hiddenboolean value that determines whether the tabs component is visible or hidden
linkWidgetDisplayNamedisplay name or label of the link widget associated with a particular tab
navigateContainercontainer or destination where the tab content should be displayed or navigated to
tabListlist of tabs, including their display names, keys, and other relevant information
tabPositionposition of the tab strip, such as top, bottom, left, or right position
tooltipTexttext displayed as a tooltip when the user hovers over a specific tab
viewListviews or content associated with each tab, enabling the rendering of different content based on the selected tab

Example: {{tabs1.displayName}}

Use case​

We will demonstrate how to use tabs component combined with a container component to show the three views.

Step 1 Add and configure Components​

Add a container component and a tabs component. In the inspect page of the tabs component, turn Link to a Container on and choose the container you want to link with for **Container**.

  • View 1:

This is the home page, thus we place a text component with "Home" on the upper left corner of the container.

Display a text component "Hi! Welcome to my personal website" in the middle and a button component labeled "Learn more about me" under it.

For the button component, we can configure it to go to the next view (view2) if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the container component that you want to update as the target of the event.
  3. Choose the showNextView method.

tab_view1

  • View 2:

This is the about page, thus we place a text component with "About me" on the upper left corner of the container.

Display the "name", "age", and "gender" information with text components and a profile picture of you or anyone you want to use with the **image** component.

Add a button component labeled "Make friends with me".

For the button component, we can configure it to go to the next view (view3) if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the container component that you want to update as the target of the event.
  3. Choose the showNextView method.

tab_view2

  • View 3

This is the form page, visitor can fill out the form with their information to send a friend request to the owner.

There is a form component in the middle of the container with input components labeled as "Your name", "Your age", and "Gender".

Change the text of the "submit" button in the bottom right corner to "Invite".

tab_view3

For the "Invite" button component, we can configure it to submit the information in the form if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method.

For the form component, we can configure it to show notification if submit.

  1. Click the form component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select submit in Event, select Show notification in action, Put "Submit successfully" for Title, "Friend request sent" for Description, and select Success for Type. We want the notification to show for 2s so put {{2000}} for the duration.

tab_form_event

Step 2 Test​

tab_test

- - +
Skip to main content

Tabs

What is Tabs?​

The Tabs component in ILLA Cloud is a versatile feature that allows users to organize and present content in a tabbed layout. It enables the creation of multiple tabs within a single container, allowing users to switch between different sections of content with ease. The Tabs component provides a user-friendly interface for navigating through related information, improving the overall user experience. With customizable styling options and the ability to add various types of content, such as text, images, or embedded components, the Tabs component in ILLA Cloud offers flexibility and enhances the organization and presentation of data.

Properties​

PropertiesDescription
Link to a containerlink the Tabs component to a specific container, enabling seamless navigation between tabs and the associated content.
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or value change.
Disableddisable specific tabs, preventing users from interacting with them
Tooltipadditional information or context about each tab
Layoutoffers different layout options, allowing you to arrange the tabs horizontally or vertically based on your design preferences or the available space.
Alignalign the Tabs component to different positions within its parent container, such as left, center, or right alignment
Hiddenhide specific tabs programmatically.
Text Colorscustomizable text colors, allowing you to style the tab labels with different colors to match your application's design or branding.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
alignalignment of the tabs within the component, such as left, center, or right alignment
colorSchemedefines the color of the text in the component
currentIndexrepresents the index of the currently selected tab within the tab list
currentKeyunique identifier or key of the currently selected tab
displayNamerepresents the name or label assigned to the component
hiddenboolean value that determines whether the tabs component is visible or hidden
linkWidgetDisplayNamedisplay name or label of the link widget associated with a particular tab
navigateContainercontainer or destination where the tab content should be displayed or navigated to
tabListlist of tabs, including their display names, keys, and other relevant information
tabPositionposition of the tab strip, such as top, bottom, left, or right position
tooltipTexttext displayed as a tooltip when the user hovers over a specific tab
viewListviews or content associated with each tab, enabling the rendering of different content based on the selected tab

Example: {{tabs1.displayName}}

Use case​

We will demonstrate how to use tabs component combined with a container component to show the three views.

Step 1 Add and configure Components​

Add a container component and a tabs component. In the inspect page of the tabs component, turn Link to a Container on and choose the container you want to link with for **Container**.

  • View 1:

This is the home page, thus we place a text component with "Home" on the upper left corner of the container.

Display a text component "Hi! Welcome to my personal website" in the middle and a button component labeled "Learn more about me" under it.

For the button component, we can configure it to go to the next view (view2) if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the container component that you want to update as the target of the event.
  3. Choose the showNextView method.

tab_view1

  • View 2:

This is the about page, thus we place a text component with "About me" on the upper left corner of the container.

Display the "name", "age", and "gender" information with text components and a profile picture of you or anyone you want to use with the **image** component.

Add a button component labeled "Make friends with me".

For the button component, we can configure it to go to the next view (view3) if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the container component that you want to update as the target of the event.
  3. Choose the showNextView method.

tab_view2

  • View 3

This is the form page, visitor can fill out the form with their information to send a friend request to the owner.

There is a form component in the middle of the container with input components labeled as "Your name", "Your age", and "Gender".

Change the text of the "submit" button in the bottom right corner to "Invite".

tab_view3

For the "Invite" button component, we can configure it to submit the information in the form if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method.

For the form component, we can configure it to show notification if submit.

  1. Click the form component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select submit in Event, select Show notification in action, Put "Submit successfully" for Title, "Friend request sent" for Description, and select Success for Type. We want the notification to show for 2s so put {{2000}} for the duration.

tab_form_event

Step 2 Test​

tab_test

+ + \ No newline at end of file diff --git a/terms-of-service/index.html b/terms-of-service/index.html index e10b75c7ea..e858726e0f 100644 --- a/terms-of-service/index.html +++ b/terms-of-service/index.html @@ -10,18 +10,18 @@ - - + +
-
Skip to main content

Terms of Service

Last updated: 2022-10-10

Thanks for using ILLA.

These Terms of Service govern your access to, and use of, our Site, and our provision of a variety of services.

  1. We’ll refer to these Terms of Service as the “Terms”, and to our website as the “Site”.

  2. We’ll refer to ILLA as “ILLA” or “we” or “us” or “our”.

  3. We’ll refer to all the services we provide, individually and collectively, and including our +

    Terms of Service

    Last updated: 2022-10-10

    Thanks for using ILLA.

    These Terms of Service govern your access to, and use of, our Site, and our provision of a variety of services.

    1. We’ll refer to these Terms of Service as the “Terms”, and to our website as the “Site”.

    2. We’ll refer to ILLA as “ILLA” or “we” or “us” or “our”.

    3. We’ll refer to all the services we provide, individually and collectively, and including our Product, as the “Services”.

    4. We’ll refer to you, the person or entity agreeing to these Terms, as “you” or “your”, and (if you are a purchaser of our Services), our “customer”.

    Agreement to Terms​

    By accessing or using the Site, and/or using a Service (including a Product), you agree to these Terms.

    Changes to Terms or Services​

    We may modify the Terms at any time. If we do so, we’ll let you know either by posting the modified Terms on the Site, or through other communications. If you continue to use the Site and the Services after we’ve let you know that the Terms have been modified, you are indicating to us that you agree to be bound by the modified Terms, and to license our Products as further detailed below.

    Your Right to Use the Site; Your Restrictions​

    1. Things you can do. Subject to your compliance with these Terms, ILLA grants you a personal, limited, non-exclusive, non-transferable, non-sublicenseable license to electronically access and use the Site solely as provided for in these Terms.

    2. Things you can’t do. You will not (and you will not allow any other person to) do any of the following:

    i. circumvent or manipulate the ILLA fee structure, billing process, or other fees owed to ILLA;

    ii. access or attempt to access any other ILLA systems, programs, data or accounts that are not made available for public or your use;

    iii. except as allowed with respect to backups of your data, copying, reproducing, republishing, uploading, posting, transmitting, reselling or distributing in any way any material from the Site;

    iv. work around any technical limitations in the Site, use any tool to enable features or functionalities that are otherwise disabled in the Site, or decompile, disassemble, or otherwise reverse engineer the Site except as otherwise permitted by applicable law;

    v. perform or attempt to perform any actions that would interfere with the proper working of the Site, prevent access to or the use of the Site by ILLA’s other licensees or customers, or impose an unreasonable or disproportionately large load on ILLA’s infrastructure;

    vi. frame or utilize framing techniques to enclose any trademark, logo, or other proprietary information (including images, text, page layout, or form) of ILLA or the Site or use any ILLA trademark or service marks, unless authorized to do so in writing by ILLA;

    vii. attempt to access or search the Site or download content from the Site through the use of any engine, software, tool, agent, device or mechanism (including spiders, robots, crawlers, data mining tools or the like) other than the software and/or search agents provided by ILLA or other generally available third-party web browsers;

    viii. impersonate or misrepresent your affiliation with any person or entity;

    ix. otherwise use the Site except as expressly allowed under the Terms.

    The license granted in these Terms does not include any right of resale of any ILLA Product or Service; or any collection and use of any service listings, descriptions, or prices; any derivative use of any ILLA Service or its contents. No ILLA Service may be reproduced, duplicated, copied, sold, resold, visited, or otherwise exploited for any commercial purpose without express written consent of ILLA. The licenses granted by ILLA terminate if you do not comply with these Terms of Use.

    Intellectual Property Rights​

    1. ILLA’s (and its licensors’) Ownership of IP. The content, organization, graphics, design, compilation, know-how, concepts, methodologies, procedures, magnetic translation, digital conversion and other matters related to the Site are protected under applicable copyrights, trademarks and other proprietary rights. Some of the content on the Site may be the copyrighted work of third parties. ILLA, the ILLA logo, and other ILLA trademarks, service marks, graphics, and logos used in connection with the Service are trademarks or registered trademarks of ILLA. Other trademarks, service marks, graphics, and logos used in connection with the Service may be the trademarks of their respective owners. In addition, the Product and Documentation contain proprietary and confidential information of ILLA and its licensors. ILLA and its licensors exclusively own all rights, title and interest in and to any software programs, tools, utilities, processes, inventions, devices, methodologies, specifications, documentation, techniques and materials of any kind used or developed by ILLA or its personnel in connection with the Products and performing the Services (collectively “ILLA Materials”), including all worldwide patent rights, copyright rights, trade secret rights, know-how and any other intellectual property rights (“Intellectual Property Rights”) therein. You will have no rights in any trademarks, the ILLA Materials or the Site except as expressly set forth in these Terms.

    2. Your Ownership of IP. For purposes of these Terms, “Customer Data” means all non-public data provided by you to the us to enable provision of the Services. You own all right, title and interest in and to your Customer Data.

    Use of the Services; Providing Us Information​

    1. You’ll Start by Creating an Account; Information You Must Provide. You will need to register with ILLA to become a Customer. You agree to provide accurate, complete registration information, and to will keep that information current. You agree that ILLA may store and use your registration information to maintain your account.

    2. Information You Must NOT Provide; DISCLAIMERS.

    i. Confidential Information of Third Parties. Despite anything to the contrary in these Terms, under no circumstances will you upload to the Site or otherwise provide to ILLA any data or information (including but not limited to third-party product or pricing information) which you are restricted from disclosing pursuant to any confidentiality (or similar) agreement with any third party. ILLA EXPRESSLY DISCLAIMS ALL LIABILITY WITH RESPECT TO ANY SUCH THIRD-PARTY CONFIDENTIAL INFORMATION.

    ii. Personal Data. Despite anything to the contrary in these Terms, under no circumstances will you upload to the Site or otherwise provide to ILLA any sensitive data or information including, without limitation, (1) protected health information regulated under the Health Insurance Portability and Accountability Act of 1996 and related regulations (“HIPAA”) or the Health Information Technology for Economic and Clinical Health Act (“HITECH Act”); (2) “cardholder data” as defined under the Payment Card Industry Data Security Standard (PCI DSS); or (3) “nonpublic personal information” as defined under the GrammLeach-Bliley Act of 1999, in each case as such Acts and standards have been or may be supplemented and amended from time to time. ILLA EXPRESSLY DISCLAIMS ALL LIABILITY WITH RESPECT TO ANY SUCH DATA. If you would like to use ILLA with such data, we recommend you use the self-hosted version of ILLA, which can be air-gapped.

    How We’ll Use Your Information; Our Privacy Policy​

    Your Privacy is Important to ILLA. Protecting your privacy is really important to us. With this in mind, we will protect your personal information in accordance with our Privacy Policy.

    Data Security; Disclaimer​

    1. The Security of Your Information is Important to ILLA. ILLA takes reasonable administrative, physical and electronic measures designed to protect from unauthorized access, use or disclosure of the information that we collect from you. ILLA servers are located in professional and secure hosting facilities designed to host servers with protection from unwanted attacks over the Internet and physical attacks to the building or server itself. In particular, illacloud.com's servers are in a private network with a dedicated firewall, and are protected by round-the-clock interior and exterior surveillance. For physical security, our data centers are all SSAE-16 and/or ISO 27001 compliant. Our software infrastructure is regularly updated with the latest security patches. Through Google authentication, we offer two-factor authentication, and all traffic between servers is encrypted as well.

    2. ILLA Backs Up Your Information. ILLA stores all data in secure locations, and performs multiple daily backups of all critical data (including the database). ILLA also tests its backups in duplicate environments on a regular basis to ensure their correctness, and to test disaster recovery scenarios. Database backups are audited daily.

    3. You Have Security Responsibilities. You agree to: (i)keep your password and online ID secure and strictly confidential, providing it only to Authorized Users of your account; (ii) instruct each person to whom you give your online ID and password that he or she is not to disclose it to any unauthorized person; (iii) notify us immediately and select a new online ID and password if you believe your password may have become known to an unauthorized person; and (iv) notify us immediately if you are contacted by anyone requesting your online ID and password. When you give someone your online ID and online password, you are authorizing that person to access and use your account, and you are responsible for any and all transactions that person performs while using your account, even those transactions that are fraudulent or that you did not intend or want performed. You agree to indemnify and hold harmless ILLA from and against any and all liability arising in any way from the access to the Site by persons to whom you have provided your online ID and/or online password. In addition, you are responsible for your information technology infrastructure, including computers, servers, software, databases, electronic systems (including database management systems) and networks, whether operated directly by you or through the use of third-party services. You agree to abide by all applicable local, state, national, and international laws and regulations in connection with using the Product, Documentation and Service, including, without limitation, all laws regarding the transmission of technical data exported from the United States through the Service and all privacy and data protection laws, rules and regulations.

    4. Some Third Parties May have Incidental Access to Your Information. ILLA works with other companies to provide information technology services to users of the Site. These companies may have access to ILLA’s databases, but only for the purposes of providing service to ILLA. For example, a third party (such as AWS) may obtain access to Your Information in an effort to update database software. These companies will operate under consumer confidentiality agreements with ILLA.

    5. The Internet is Not Guaranteed to be Safe. Please be aware that no method of transmitting information over the Internet or storing information is completely secure. Accordingly, we cannot guarantee the absolute security of any information. ILLA SHALL HAVE NO LIABILITY TO YOU FOR ANY UNAUTHORIZED ACCESS, USE, CORRUPTION OR LOSS OF ANY OF YOUR INFORMATION, EXCEPT TO THE EXTENT THAT SUCH UNAUTHORIZED ACCESS, USE, CORRUPTION, OR LOSS IS DUE SOLELY TO ILLA’S GROSS NEGLIGENCE OR MISCONDUCT.

    Ordering Products and Services from ILLA​

    1. Certain Definitions applicable to Buying Services on illacloud.com.

    i. "Member" means any individual (including your employees, agents, contractors, suppliers of services, and customers, in each case to the extent that you invite to your team such individual) who is authorized to access the apps, resources, files, or any other resources in your team or organization by you or other members in your team who have authorization capabilities like you. Each member must use a unique identity to access and use ILLA Cloud unless otherwise licensed and may access the services only to the extent licensed by you.

    ii. “Editor” means any individual (including your employees, agents, contractors, suppliers of services, and customers, in each case to the extent that your license includes, and you pay for, such individual) who is authorized to edit app(Defined as Owner, Administrator, Editor roles in ILLA Cloud) by you or other members in your team who have authorization capabilities like you. Each editor must use a unique identity to access and use ILLA Cloud unless otherwise licensed and may access the services only to the extent licensed by you.

    iii. “Delivery” means the availability of the Product and/or Documentation by us to the you via electronic or other means, without regard to when you actually install or use such Product.

    iv. “Documentation” means the instruction manuals, user guides, and other information to be made available from time to time by us to you in electronic form.

    v. “Order” is defined as the purchase of a Product (accepted by us) which you select and pay for with a valid online payment.

    vi. All references in this Agreement to “buying” or to the “sale” or “purchase” (or other similar terms) of any Subscription or Service or Product shall mean the sale or purchase of a license to such Subscription or Service or Product.

    vii. “Product” means, collectively, the product(s) set forth in any Order (to the extent such product(s) are subsequently made available to you by us), as well as any Update made available to you by us.

    viii. “Public Application” means an application that is available to the public without restriction (by password, payment, network infrastructure, or otherwise).

    ix. A “Server” means that computer device on which the Product is installed and operated. A Server may be located on your site or may be a “cloud” server located on our site or at a third party’s remote hosting site contracted for by either us or you. You agree that our third-party hosting provider meets or exceeds your standards for security and related certifications.

    x. “Specifications” means those technical specifications in respect of the Product(s) which are published by us and are in effect at the time of Delivery.

    xi. “Subscription” means licenses to the Product and Documentation. A Subscription includes access to currently supported versions of the Product for the term of the Subscription.

    xii. An “Update” means enhancements, modifications, or additions to the Product or Documentation as may be made available from time to time by us to you.

    xiii. “Use” shall mean the legal use by Customer of the Product and Documentation and/or Services in accordance with the terms and condition of these Terms and in a manner consistent with the Specifications, subject to any applicable Usage Limitation.

    2. How to Order Products. You can select Products for purchase by browsing our Product offerings on our pricing page, selecting the Product(s) you want to license, and successfully completing the payments process.

    i. An Order submitted by you to ILLA corresponding to Products for which you’ve successfully completed the payments process constitutes the agreement forILLA to provide the Products and for you to receive and pay for such Products.

    ii. ILLA shall have no responsibility to provide any Product with respect to Orders submitted where you have not successfully completed the online payments process or refunded.

    3. Your Order Cannot Contain Additional Terms or Conditions. These Terms set out the complete and exclusive statement of the contract between you and ILLA with respect to your purchase of Products. Any additional or conflicting provisions contained in an Order from you are expressly rejected.

    4. International Access. If you access and use this Site outside the United States you are responsible for complying with your local laws and regulations.

    5. Products Subscriptions; Renewals. ILLA Cloud Plus and ILLA Drive storage are licensed pursuant to Subscriptions. Subscriptions will be for the term agreed to in an applicable Order. Subscriptions will automatically renew for successive one-year or one-month terms based on the plan you subscribed to at ILLA’s then-current fees unless you provide written notice of non-renewal to us at least fourteen (14) days prior to the end of the then-current term of the applicable subscription.

    6. One-time purchase. ILLA Drive Traffic is a consumable product that cannot be restored once used. After use, you will need to continue purchasing in order to keep using it.

    7. Products are Delivered Electronically. All Products, Updates and Documentation licensed by you pursuant to these Terms will be delivered electronically (such as by electronic mail, file transfer or other means of electronic transmission, or in the case of ILLA Cloud subscriptions or purchases, by giving you access to such Products, Updates and Documentation). In the case of a renewal of a Subscription, you acknowledge and agree that there is no delivery requirement for such renewal. Such renewals shall be deemed Delivered on the first day of the then-current renewal term of the applicable Subscription.

    8. Usage Limitations. Your Subscription or purchase may be subject to Usage Limitations. Usage Limitations may include (among other things) a description of the specific product or service licensed from us, a maximum number of Authorized Users, the initial term of your Subscription, the fees you agree to pay us, a maximum amount of allotted storage, a maximum amount of traffic or other limitations. Usage Limitations applicable to your Subscription are set forth in our Product offerings on our pricing page or Product purchase page. If your use of our Services exceeds a Usage Limitation or otherwise requires the payment of additional fees, you shall be billed for such usage and you agree to pay the additional fees.

    Termination of Product Subscriptions or purchases​

    1. Termination by You or by Us. Either of us may terminate any Product Subscription under these Terms immediately if the other commits any material breach of any term of these Terms and which (in the case of a breach capable of being remedied) shall not have been remedied within thirty (30) days of a written request to remedy the breach.

    2. Termination by Us. We may terminate any Product Subscription under these Terms upon our reasonable determination that your Use of the Product or Documentation or Services (i) violates any applicable law or regulation or (ii) poses a threat to the secure or reliable provision of Services to other customers, or to the Cloud Infrastructure, or to the data contained therein.

    3. What Happens if a Product Subscription is Terminated? Any termination of any Product Subscription pursuant to these Terms shall be without prejudice to any other rights or remedies a party may be entitled to hereunder or at law and shall not affect any accrued rights or liabilities of either party nor the coming into or continuance in force of any provision hereof which is expressly or by implication intended to come into or continue in force on or after such termination. Upon termination of any Product Subscription pursuant to these Terms, you will immediately uninstall or destroy (or at our sole option) all copies of the Product and Documentation in its possession or control, and your duly authorized officer shall certify in writing to us that the you have complied with this obligation.

    Payment Terms​

    1. Invoicing and Payment. ILLA’s right to payment for any Product or Service purchased by you shall accrue on the date the Product or Service is Delivered to you. Except as otherwise expressly provided in these Terms, all payments accrued or made under these Terms are non-cancelable and nonrefundable. All stated prices are exclusive of any taxes, fees, and duties or other amounts, however designated, and including without limitation value added and withholding taxes that are levied or based upon such charges, or upon these Terms. Any taxes related to the Product, Documentation or Services purchased or licensed pursuant to these Terms including, but not limited to, withholding taxes, will be paid by you, or you will present an exemption certificate acceptable to the taxing authorities. You will not be liable for taxes based on our net income. All payments will be made in United States dollars.

    2. Your Failure to Pay or Failure to Pay on Time. If you have any outstanding balance due on your account, then we have the right to withhold Delivering any Product and Services to you until you have paid your account balance in full. If your payment is late, we may charge interest on your outstanding late balance at the rate of one and one-half percent (1.5%) per month or the maximum rate permitted by law, calculated from the date such amount was due until the date that payment is received by us. You agree to reimburse us for all reasonable costs and expenses incurred (including reasonable attorneys’ fees) in collecting any overdue amounts.

    Additional Terms Applicable to ILLA Cloud Subscriptions​

    1. Definitions Applicable to ILLA Cloud Subscriptions.

    “Cloud Infrastructure” means the Product including ILLA Builder, ILLA Drive, and the computing, storage, traffic, networking, and other hardware and software infrastructure used in providing the Services in ILLA Cloud.

    2. Hosting and Control of ILLA Cloud We may take such steps as may be necessary to prevent any person or entity, including you, from infringing on the ability of other customers to reasonably Use the Services. The method and means of providing the Services shall be under our exclusive control, management, and supervision. We will provide and operate the Services in a professional and commercially reasonable manner in accordance with applicable law.

    3. Your Obligations Related to Customer Data. You have sole responsibility for the accuracy, quality, integrity, legality, reliability, appropriateness, and intellectual property ownership or right to use the Customer Data. You will provide accurate, current and complete information required to enable your Authorized Users on the Cloud Infrastructure, and to maintain the accuracy of such information during the Use of the Product and Services. You will require Authorized Users to maintain proper password security, and for maintaining the confidentiality of your account. Without limiting any other responsibilities you have under these Terms, you are responsible for the actions of your Authorized Users, of anybody accessing the Cloud Infrastructure using the credentials of any Authorized User, and of any other individuals to whom you have given access to the Product or Services. You will not, and will not permit or enable others to, access or attempt to access any accounts or data on the Cloud Infrastructure, other than those explicitly belonging to you or provided by us for your Use.

    4. Restrictions on Your Use of the Cloud Infrastructure. You will not, and will not allow or enable any Authorized User or other person to: (1) access the Product or Services for or upload to the Cloud Infrastructure anything unlawful, misleading, malicious or discriminatory; (2) use any tool to enable features or functionality that are otherwise disabled in the Cloud Infrastructure, or decompile, disassemble or otherwise reverse engineer the Cloud Infrastructure; (3) perform or attempt to perform any actions that would interfere with the proper working of the Cloud Infrastructure, prevent access to or use of the Cloud Infrastructure by our other customers; or (4) upload or transmit to the Cloud Infrastructure any device, software or routine that contains any computer programming routine that may damage, interfere or attempt to interfere with, or intercept the normal operation of the Cloud Infrastructure.

    5. Your License Grant to Us Related to Customer Data. You grant to us a license store, record, transmit, maintain, and display the Customer Data only to the extent necessary to carry out its obligations under these Terms.

    6. Storage and Backups. We regularly back up the database used in conjunction with the Services. We will make a commercially reasonable effort to assist in restoring lost data; however, we do not guarantee that every backup will complete without error, that we will be able to restore any specific data, or that we will retain any backup for longer than thirty (30) days.

    Refund Terms​

    If you are not satisfied with our product, you can apply for a refund after payment has been made. If you require a refund, please contact business@illasoft.com.

    1. Regarding refunds for ILLA Cloud Plus subscriptions. You can apply for a refund in writing within 7 days of payment. Once we receive your application, we will process a full refund within 14 days.

    2. Regarding refunds for ILLA Drive Storage subscriptions. You can apply for a refund in writing within 7 days of payment. Once we receive your application, we will process a refund for the remaining balance within 14 days, calculated based on your actual usage.

    3. Regarding refunds for the purchase of ILLA Drive Traffic. You can apply for a refund in writing within 7 days of payment. Once we receive your application, we will process a refund for the remaining balance within 14 days, calculated based on your actual usage.

- - + + \ No newline at end of file diff --git a/text-area-input/index.html b/text-area-input/index.html index e4d44ee72d..7fa7aad211 100644 --- a/text-area-input/index.html +++ b/text-area-input/index.html @@ -10,13 +10,13 @@ - - + +
-

Text area input

What is Text Area Input?​

The Text area input component is a user interface element that allows users to enter and edit the the text area in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Regexspecify a regular expression pattern that the input value must match
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
Heightspecify the vertical size or height of the input field
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the text area input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit focusing on component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
dynamicHeightallows the height of the text area to adjust dynamically based on the content entered by the user.
eventsgenerated or triggered when certain actions or events occur
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
resizeDirectionallows you to control the resizing behavior of the text area
regexapply pattern-based validation to the input text in the text area
tooltipTextvalue of tooltip text

Example: {{textarea1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to the Text area input with a button.

Step 1 Add an action​

Let us create a table in Supabase called Project. There are two attributes in Project: id and name. The name is the value we want to map to our text area input.

Then we can create a new action for Supabase from the action list, listing all the data in project and names as supabasedb2.

Click Save and Run to activate this action.

text_area_data

Step 2 Add Components​

Next, we can add a text area input component and a button component to the canvas.

We set the default value of text area to be 'None' and labeled the button as 'Set value' as shown below

text_area_look

Step 3 Configure the component​

For the button component, we can configure it to set the value in text area input component to the data of the document we read from supabasedb2.

  1. In the Edit event handler, select Control component in action, and select the textarea1 component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

text_area_config

Step 4 Test​

Now that when you click the 'Set value' button, the value should change to the names.

text_area_test

- - +

Text area input

What is Text Area Input?​

The Text area input component is a user interface element that allows users to enter and edit the the text area in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Regexspecify a regular expression pattern that the input value must match
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
Heightspecify the vertical size or height of the input field
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the text area input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit focusing on component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
dynamicHeightallows the height of the text area to adjust dynamically based on the content entered by the user.
eventsgenerated or triggered when certain actions or events occur
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
resizeDirectionallows you to control the resizing behavior of the text area
regexapply pattern-based validation to the input text in the text area
tooltipTextvalue of tooltip text

Example: {{textarea1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to the Text area input with a button.

Step 1 Add an action​

Let us create a table in Supabase called Project. There are two attributes in Project: id and name. The name is the value we want to map to our text area input.

Then we can create a new action for Supabase from the action list, listing all the data in project and names as supabasedb2.

Click Save and Run to activate this action.

text_area_data

Step 2 Add Components​

Next, we can add a text area input component and a button component to the canvas.

We set the default value of text area to be 'None' and labeled the button as 'Set value' as shown below

text_area_look

Step 3 Configure the component​

For the button component, we can configure it to set the value in text area input component to the data of the document we read from supabasedb2.

  1. In the Edit event handler, select Control component in action, and select the textarea1 component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

text_area_config

Step 4 Test​

Now that when you click the 'Set value' button, the value should change to the names.

text_area_test

+ + \ No newline at end of file diff --git a/text/index.html b/text/index.html index ac41f18f25..da56431840 100644 --- a/text/index.html +++ b/text/index.html @@ -10,13 +10,13 @@ - - + +
-

Text

Properties​

PropertyDescription
ContentSet the text displayed on Text component. Markdown and plain text are supported.
TooltipA tooltip displayed on the component when users hover over the component.
Horizontal alignmentTo set the horizontal position of the text content in the component
Vertical alignmentTo set the vertial position of the text content in the component
HiddenTo set whether to display this component and under what conditions to display it. For example, if the current user is not User A, this component should be hidden: {{ currentUserInfo.nickname != 'User A' }}
ColorTo set the text color in paint text format
Text sizeTo set the text size in paint text format

Use Markdown​

Headline​

# Heading 1
## Heading 2
### Heading 3

Bold & Italics​

**Bold**
*Italics*

To-do list​

### To-do list

1. [ ] 🚀 Build a new app on ILLA Cloud
2. [ ] ☎️ Call with Monica
3. [x] 🍷 Have dinner with **Elsa**
4. [x] 💃 Play `Just dance` for half an hour

Bulleted list​

### Bulleted list
- Real-time Collaboration: We can create everything in real-time together.
- 🛠 Custom Plugin: Build any custom plugin to do what you want.
- 🤖 Automate Support: Connect everything and automate them in 5 seconds.
- 🖥 Self-hosted: supports Docker & k8s

Table​

### Table
| Name        | Link   |  Description  |
| :--------  | :-------  | :----  |
| ILLA Cloud | [https://cloud.illacloud.com/](https://cloud.illacloud.com/) |Build apps on ILLA Cloud|
| ILLA GitHub | [https://github.com/illacloud/illa-builder](https://github.com/illacloud/illa-builder) |Star us on GitHub|
| ILLA homepage | [https://www.illacloud.com/](https://www.illacloud.com/) |ILLA Cloud Offical website

Display dynamic data​

Use {{ to get data from other components or actions or global variables. For example, to display the nickname of current user:

## {{ '👋 Hello! '+ currentUserInfo.nickname }}
- - +

Text

Properties​

PropertyDescription
ContentSet the text displayed on Text component. Markdown and plain text are supported.
TooltipA tooltip displayed on the component when users hover over the component.
Horizontal alignmentTo set the horizontal position of the text content in the component
Vertical alignmentTo set the vertial position of the text content in the component
HiddenTo set whether to display this component and under what conditions to display it. For example, if the current user is not User A, this component should be hidden: {{ currentUserInfo.nickname != 'User A' }}
ColorTo set the text color in paint text format
Text sizeTo set the text size in paint text format

Use Markdown​

Headline​

# Heading 1
## Heading 2
### Heading 3

Bold & Italics​

**Bold**
*Italics*

To-do list​

### To-do list

1. [ ] 🚀 Build a new app on ILLA Cloud
2. [ ] ☎️ Call with Monica
3. [x] 🍷 Have dinner with **Elsa**
4. [x] 💃 Play `Just dance` for half an hour

Bulleted list​

### Bulleted list
- Real-time Collaboration: We can create everything in real-time together.
- 🛠 Custom Plugin: Build any custom plugin to do what you want.
- 🤖 Automate Support: Connect everything and automate them in 5 seconds.
- 🖥 Self-hosted: supports Docker & k8s

Table​

### Table
| Name        | Link   |  Description  |
| :--------  | :-------  | :----  |
| ILLA Cloud | [https://cloud.illacloud.com/](https://cloud.illacloud.com/) |Build apps on ILLA Cloud|
| ILLA GitHub | [https://github.com/illacloud/illa-builder](https://github.com/illacloud/illa-builder) |Star us on GitHub|
| ILLA homepage | [https://www.illacloud.com/](https://www.illacloud.com/) |ILLA Cloud Offical website

Display dynamic data​

Use {{ to get data from other components or actions or global variables. For example, to display the nickname of current user:

## {{ '👋 Hello! '+ currentUserInfo.nickname }}
+ + \ No newline at end of file diff --git a/tidb/index.html b/tidb/index.html index 1d89750fc1..24be4433bc 100644 --- a/tidb/index.html +++ b/tidb/index.html @@ -10,13 +10,13 @@ - - + +
-

TiDB

TiDB is a database integration that allows you to connect and interact with a TiDB database. It is a distributed, horizontally scalable relational database management system that is designed to handle high-volume, high-concurrency workloads.

With the TiDB integration in Illa, you can query, update, and delete data from a TiDB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a TiDB database.

Create TiDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select TiDB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready TiDB will display as shown.

ti_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select TiDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to TiDB database.

ti_config

ti_config_1

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '4000'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the TiDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.
CA Certificaterequireda digital certificate that is used to verify the identity of a server and establish a secure, encrypted connection between a client and a TiDB cluster. If you don't specify it, we have filled in a default certificate for you.
Client Keyoptionala parameter that is used to establish a secure connection between the TiDB client and the TiDB server.
Client Certificateoptionala security feature that allows a client to authenticate itself to a TiDB server

Create Actions​

We have created a TiDB resource, we can add the action by selecting TiDB from action list and choosing the Create action button.

ti_resource_list

Now we have added the TiDB server as an action to our building page.

ti

Configure TiDB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

TiDB

TiDB is a database integration that allows you to connect and interact with a TiDB database. It is a distributed, horizontally scalable relational database management system that is designed to handle high-volume, high-concurrency workloads.

With the TiDB integration in Illa, you can query, update, and delete data from a TiDB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a TiDB database.

Create TiDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select TiDB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready TiDB will display as shown.

ti_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select TiDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to TiDB database.

ti_config

ti_config_1

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '4000'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the TiDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.
CA Certificaterequireda digital certificate that is used to verify the identity of a server and establish a secure, encrypted connection between a client and a TiDB cluster. If you don't specify it, we have filled in a default certificate for you.
Client Keyoptionala parameter that is used to establish a secure connection between the TiDB client and the TiDB server.
Client Certificateoptionala security feature that allows a client to authenticate itself to a TiDB server

Create Actions​

We have created a TiDB resource, we can add the action by selecting TiDB from action list and choosing the Create action button.

ti_resource_list

Now we have added the TiDB server as an action to our building page.

ti

Configure TiDB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/time-picker/index.html b/time-picker/index.html index 84468c3194..3a71dfe2fc 100644 --- a/time-picker/index.html +++ b/time-picker/index.html @@ -10,13 +10,13 @@ - - + +
-

Time Picker

What is Time Picker?​

Time picker component is a UI component that allows users to select a specific time from a 24-hour interface, typically used in forms or data entry interfaces where the user needs to specify a specific time.

When a Time picker component is added to canvas, it displays a 24-hour interface that shows hours, minutes, and seconds. The user can adjust the time by moving the mouse cursor or using the up and down arrows.

Properties​

Time picker's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input time value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
minuteStepminute step size value
placeholderplaceholder value
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput date and time value

Example: {{timePicker1.format}}

Use case​

Next, we will demonstrate how to map the data from the data source to time picker and set to current time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a time picker component and a button component to the canvas. For default value of the time component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Now" as shown below

time_picker_0

Step 3 Configure the component​

For the button component, we can configure it to set the date in time picker component to current date and time.

  1. In the Edit event handler, select Control component in action, select the time picker component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

time_picker_config

Step 4 Test​

Now that when you click the "Now" button, the time should change to current time. As for here, we have 20:03:05 but it may be different when you are testing it.

time_picker_1

- - +

Time Picker

What is Time Picker?​

Time picker component is a UI component that allows users to select a specific time from a 24-hour interface, typically used in forms or data entry interfaces where the user needs to specify a specific time.

When a Time picker component is added to canvas, it displays a 24-hour interface that shows hours, minutes, and seconds. The user can adjust the time by moving the mouse cursor or using the up and down arrows.

Properties​

Time picker's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input time value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
minuteStepminute step size value
placeholderplaceholder value
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput date and time value

Example: {{timePicker1.format}}

Use case​

Next, we will demonstrate how to map the data from the data source to time picker and set to current time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a time picker component and a button component to the canvas. For default value of the time component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Now" as shown below

time_picker_0

Step 3 Configure the component​

For the button component, we can configure it to set the date in time picker component to current date and time.

  1. In the Edit event handler, select Control component in action, select the time picker component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

time_picker_config

Step 4 Test​

Now that when you click the "Now" button, the time should change to current time. As for here, we have 20:03:05 but it may be different when you are testing it.

time_picker_1

+ + \ No newline at end of file diff --git a/time-range/index.html b/time-range/index.html index 2a65a96704..c1aa5f5509 100644 --- a/time-range/index.html +++ b/time-range/index.html @@ -10,13 +10,13 @@ - - + +
-

Time range

Time Range component is a UI component that allows users to select a range of times from a 24-hour interface, typically used in forms or data entry interfaces where the user needs to specify a start and end time range.

When a Time Range component is added to canvas, it displays two 24-hour interfaces side by side. One interface is used to select the start time, while the other is used to select the end time. The user can adjust the time by moving the mouse cursor or using the up and down arrows.

Properties​

Time Range's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Start timeThe default start time value of the component
End timeThe default end time value of the component
FormatA valid date format string. See https://day.js.org/docs/en/parse/string-format.
Start PlaceholderThe value will be shown when the start time input field is empty.
End PlaceholderThe value will be shown when the end time input field is empty.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following two methods:

  • setStartTime

To set the start date value, for example, {{"value1"}}

PropertiesDescription
ValueInput start time value
  • setEndTime

To set the end date value, for example, {{"value2"}}

PropertiesDescription
ValueInput end time value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie cascader1)
startTimestart time value
endTimeend time value
startPlaceholderplaceholder value for start time
endPlaceholderplaceholder value for end time
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddena Boolean value indicate the hidden status of button
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
minuteStepminute step size value
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
valueSelected value

Example: {{rangeTime1.value[0]}}

Use case​

Next, we will demonstrate how to map the data from the data source to time range and set end value to current time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the startedAt and expiredAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a time range component and a button component to the canvas. For default start time value of the date range component, we use the startedAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].startedAt}}

Similarly, for default end time value, we use expiredAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].expiredAt}}

We also labeled the button as "Now" as shown below.

time_range_0

Step 3 Configure the component​

For the button component, we can configure it to set the end date value in time range component to today's date.

  1. In the Edit event handler, select Control component in action, select the time range component that you want to update as the target of the event.
  2. Choose the setEndTime action and set the End time as {{currentUserInfo.updatedAt}}

time_range_config

Step 4 Test​

Now that when you click the "Now" button, the end time should change to today's date. As for here, we have 20:03:05 but it may be different when you are testing it.

time_range_1

- - +

Time range

Time Range component is a UI component that allows users to select a range of times from a 24-hour interface, typically used in forms or data entry interfaces where the user needs to specify a start and end time range.

When a Time Range component is added to canvas, it displays two 24-hour interfaces side by side. One interface is used to select the start time, while the other is used to select the end time. The user can adjust the time by moving the mouse cursor or using the up and down arrows.

Properties​

Time Range's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Start timeThe default start time value of the component
End timeThe default end time value of the component
FormatA valid date format string. See https://day.js.org/docs/en/parse/string-format.
Start PlaceholderThe value will be shown when the start time input field is empty.
End PlaceholderThe value will be shown when the end time input field is empty.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following two methods:

  • setStartTime

To set the start date value, for example, {{"value1"}}

PropertiesDescription
ValueInput start time value
  • setEndTime

To set the end date value, for example, {{"value2"}}

PropertiesDescription
ValueInput end time value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie cascader1)
startTimestart time value
endTimeend time value
startPlaceholderplaceholder value for start time
endPlaceholderplaceholder value for end time
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddena Boolean value indicate the hidden status of button
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
minuteStepminute step size value
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
valueSelected value

Example: {{rangeTime1.value[0]}}

Use case​

Next, we will demonstrate how to map the data from the data source to time range and set end value to current time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the startedAt and expiredAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a time range component and a button component to the canvas. For default start time value of the date range component, we use the startedAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].startedAt}}

Similarly, for default end time value, we use expiredAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].expiredAt}}

We also labeled the button as "Now" as shown below.

time_range_0

Step 3 Configure the component​

For the button component, we can configure it to set the end date value in time range component to today's date.

  1. In the Edit event handler, select Control component in action, select the time range component that you want to update as the target of the event.
  2. Choose the setEndTime action and set the End time as {{currentUserInfo.updatedAt}}

time_range_config

Step 4 Test​

Now that when you click the "Now" button, the end time should change to today's date. As for here, we have 20:03:05 but it may be different when you are testing it.

time_range_1

+ + \ No newline at end of file diff --git a/timeline/index.html b/timeline/index.html index 07e15c9d98..faa74991ac 100644 --- a/timeline/index.html +++ b/timeline/index.html @@ -10,13 +10,13 @@ - - + +
-

Timeline

A timeline component is a graphical representation of events or data points arranged chronologically along a horizontal or vertical axis. It allows users to visualize and navigate through a series of events or milestones in a linear fashion.

Properties​

Timeline's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Itemsthe collection of individual events or data points that are displayed on the timeline
Directionthe orientation or layout of the timeline component (horizontal or vertical)
Pendingthe status of an item in the timeline
Heightvertical size or height of the timeline component
Hiddenwhether the timeline component is visible or hidden

Methods​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
directionorientation or layout of the timeline
dynamicHeightthe ability to adjust the height of the timeline dynamically based on its content or other factors.
displayNamethe name of this component (ie timeline1)
hiddenwhether the timeline component is visible or hidden
itemsthe collection of individual events or data points displayed on the timeline
pendingthe status of an item in the timeline
resizeDirectionthe direction in which the timeline component can be resized by the user

Example: {{timeline1.items}}

Use case​

Next, we will demonstrate how to map the data from the data source to the timeline component.

Step 1 Add an action​

Let us create a table in Supabase called timeline, including only 1 columns:  milestones. There are 4 milestones we want to map to the timeline component.

Then we can create a new action for Supabase from the action list and named supabasedb1.

To list all data in milestone, put the code snippet below in the SQL query section.

select * from timeline;

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const transformedData = data.map((obj) => Object.values(obj)[0]);
return transformedData;

Click Save and Run to activate this action.

timeline_data

Step 2 Add Components​

Next, we can add a timeline component to the canvas.

In the **Items** field in the Inspect page after clicking on the component, put {{supabasedb1.data}} to retrieve the data from supabase.

Step 3 Test​

The final look should be as shown.

timeline_test

- - +

Timeline

A timeline component is a graphical representation of events or data points arranged chronologically along a horizontal or vertical axis. It allows users to visualize and navigate through a series of events or milestones in a linear fashion.

Properties​

Timeline's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Itemsthe collection of individual events or data points that are displayed on the timeline
Directionthe orientation or layout of the timeline component (horizontal or vertical)
Pendingthe status of an item in the timeline
Heightvertical size or height of the timeline component
Hiddenwhether the timeline component is visible or hidden

Methods​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
directionorientation or layout of the timeline
dynamicHeightthe ability to adjust the height of the timeline dynamically based on its content or other factors.
displayNamethe name of this component (ie timeline1)
hiddenwhether the timeline component is visible or hidden
itemsthe collection of individual events or data points displayed on the timeline
pendingthe status of an item in the timeline
resizeDirectionthe direction in which the timeline component can be resized by the user

Example: {{timeline1.items}}

Use case​

Next, we will demonstrate how to map the data from the data source to the timeline component.

Step 1 Add an action​

Let us create a table in Supabase called timeline, including only 1 columns:  milestones. There are 4 milestones we want to map to the timeline component.

Then we can create a new action for Supabase from the action list and named supabasedb1.

To list all data in milestone, put the code snippet below in the SQL query section.

select * from timeline;

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const transformedData = data.map((obj) => Object.values(obj)[0]);
return transformedData;

Click Save and Run to activate this action.

timeline_data

Step 2 Add Components​

Next, we can add a timeline component to the canvas.

In the **Items** field in the Inspect page after clicking on the component, put {{supabasedb1.data}} to retrieve the data from supabase.

Step 3 Test​

The final look should be as shown.

timeline_test

+ + \ No newline at end of file diff --git a/transformer/index.html b/transformer/index.html index e6c3752630..7d619ca9dd 100644 --- a/transformer/index.html +++ b/transformer/index.html @@ -10,13 +10,13 @@ - - + +
-

Transformer

We have put a Transformer in ILLA to meet your requirements for writing JavaScript to refine your application logic. In the Transformer, you don't need to code in JavaScript using {{template syntax}} as you do in the character input box, so that you can write long and complex blocks of JS code more fluently. In addition, the Transformer helps developers responsible for page design and logic building to complete their development work more efficiently without being constrained by each other's progress.

You can use the Transformer not only for established data operations but also for creating transformer operations when transforming data. It would be better to choose an independent transformer when you have multiple operations involved in transforming data, or need to use complex JavaScript logic to transform data.

Creative Transformers​

Click on the Transformers tab in the Action list, and click on "+ New" to create a transformer. It will be displayed in the action list after creation. You can change the name, write JS code, save and run it in the configuration panel after selection.

You can use the 'preview' button to see the results of a transformer. Note that you have to save the transformer for the rest of the app to get the new value.

The insert calls the transformer with a value equal to the data returned within the transformer, this data will change as the data entered into the transformer changes with the code of the transformer. As with the character input box, you can still use the template syntax to call the global variable No. When you are writing JS code to call data, you can find the specific data variable name in the data workspace in the left hand panel to help you write code faster.

You can call the transformer variable in the data entry box by using {{transformerName. tagName}} to call the transformer variable in the data entry box.

Query Transformer​

We have put a Transformer in the query operation to allow you to transform the fetched data into the desired format directly after completing the action You can then simply pass {{actionName.data}} to retrieve the data once you have completed the conversion in the transformer within the action.

- - +
Skip to main content

Transformer

We have put a Transformer in ILLA to meet your requirements for writing JavaScript to refine your application logic. In the Transformer, you don't need to code in JavaScript using {{template syntax}} as you do in the character input box, so that you can write long and complex blocks of JS code more fluently. In addition, the Transformer helps developers responsible for page design and logic building to complete their development work more efficiently without being constrained by each other's progress.

You can use the Transformer not only for established data operations but also for creating transformer operations when transforming data. It would be better to choose an independent transformer when you have multiple operations involved in transforming data, or need to use complex JavaScript logic to transform data.

Creative Transformers​

Click on the Transformers tab in the Action list, and click on "+ New" to create a transformer. It will be displayed in the action list after creation. You can change the name, write JS code, save and run it in the configuration panel after selection.

You can use the 'preview' button to see the results of a transformer. Note that you have to save the transformer for the rest of the app to get the new value.

The insert calls the transformer with a value equal to the data returned within the transformer, this data will change as the data entered into the transformer changes with the code of the transformer. As with the character input box, you can still use the template syntax to call the global variable No. When you are writing JS code to call data, you can find the specific data variable name in the data workspace in the left hand panel to help you write code faster.

You can call the transformer variable in the data entry box by using {{transformerName. tagName}} to call the transformer variable in the data entry box.

Query Transformer​

We have put a Transformer in the query operation to allow you to transform the fetched data into the desired format directly after completing the action You can then simply pass {{actionName.data}} to retrieve the data once you have completed the conversion in the transformer within the action.

+ + \ No newline at end of file diff --git a/upload/index.html b/upload/index.html index 5a3e611a57..9aece7716a 100644 --- a/upload/index.html +++ b/upload/index.html @@ -10,14 +10,14 @@ - - + +
-
Skip to main content

Upload

The upload component is used to allow users to upload files from their local machines to any cloud storage via API. Next, we will introduce how to configure an upload component, how to associate the upload component with a cloud storage service, how to use the upload component to select an image, and display it with an image, etc.

Properties​

PropertyDescription
TypeSet the type of upload component, including Button and Dropzone.
TextThe text shown on the upload component.
Selection typesSet the selection type to multiple files, single file, or directory.
File typesA list of file extensions allowed to upload. No value will permit all file types.
Append newly selected filesTo set the selected new file to append to the selected file or replace the selected file in the selection type of multiple files or directory.
File listTo set whether to show a list of selected files below the upload component. The height of uploader will change dynamically based on the length of the file list.
Parse ValueAttempt to parse the selected files, with support for JSON, CSV, TSV, Excel, and TXT files. Parsed data can be accessed via {{upload1.parsedValue}}. Files that can not be parsed will be null in the array. All files are available as base64 encoded strings on the value array, regardless of this option.
LoadingWhether the component should show a loading indicator.
DisabledTo set whether to disable this component and under what conditions to disable it. For example, if the input1 component is null, this component should be disabled: {{ input1.value == ‘ ’}}
TooltipA tooltip displayed on the component when users hover over the component.
Required fieldTo set whether it is required.
Min sizeTo set the minimum file size allowed to be added.
Max sizeTo set the maximum file size allowed to be added.
Custom ruleTo set the text displayed when verification fails.
Hide validation messageTo set whether to display the validation message when verification fails.
Form Data KeyTo set a key for the component. After adding this component to a form, this key will be used to identify the data of this component when submitting the form.
HiddenTo set whether to display this component and under what conditions to display it. For example, if the current user is not User A, this component should be hidden: {{ currentUserInfo.nickname != 'User A' }}
VariantTo set the Button Upload component to Outline or Filled.
Theme colorTo set the color of the Button Upload component.

Method​

You can use other components to control the Upload component. We support the following three methods:

clearValidationUsed to clear the validation message
clearValueUsed to clear the selected
setDisabledUsed to set the upload component to disabled or enabled

Event handler​

To trigger actions when the selected files change

Data of Uploader​

The upload component has some commonly used data, which can be called in the app.

value an array consisting of the base64 data of files.

files an array of objects. The keys of the objects include lastModified, name, size, type. You can use {{upload1.files.map(file =>file.name)}} to get an array of file names and you can also get lastModified array, size array, type array in the same way.

Upload files to a cloud storage service​

Upload a single file through an S3 resource​

The configuration of action is as follows.

Upload object name

{{upload1.files.map(file =>file.name)[0]}}

Upload data

{{upload1.value[0]}}

Upload multiple files through an S3 resource​

Upload object name list

{{upload1.files.map(file =>file.name)}}

Upload data list

{{upload1.value}}

Upload an image and display it on the image component +

Upload

The upload component is used to allow users to upload files from their local machines to any cloud storage via API. Next, we will introduce how to configure an upload component, how to associate the upload component with a cloud storage service, how to use the upload component to select an image, and display it with an image, etc.

Properties​

PropertyDescription
TypeSet the type of upload component, including Button and Dropzone.
TextThe text shown on the upload component.
Selection typesSet the selection type to multiple files, single file, or directory.
File typesA list of file extensions allowed to upload. No value will permit all file types.
Append newly selected filesTo set the selected new file to append to the selected file or replace the selected file in the selection type of multiple files or directory.
File listTo set whether to show a list of selected files below the upload component. The height of uploader will change dynamically based on the length of the file list.
Parse ValueAttempt to parse the selected files, with support for JSON, CSV, TSV, Excel, and TXT files. Parsed data can be accessed via {{upload1.parsedValue}}. Files that can not be parsed will be null in the array. All files are available as base64 encoded strings on the value array, regardless of this option.
LoadingWhether the component should show a loading indicator.
DisabledTo set whether to disable this component and under what conditions to disable it. For example, if the input1 component is null, this component should be disabled: {{ input1.value == ‘ ’}}
TooltipA tooltip displayed on the component when users hover over the component.
Required fieldTo set whether it is required.
Min sizeTo set the minimum file size allowed to be added.
Max sizeTo set the maximum file size allowed to be added.
Custom ruleTo set the text displayed when verification fails.
Hide validation messageTo set whether to display the validation message when verification fails.
Form Data KeyTo set a key for the component. After adding this component to a form, this key will be used to identify the data of this component when submitting the form.
HiddenTo set whether to display this component and under what conditions to display it. For example, if the current user is not User A, this component should be hidden: {{ currentUserInfo.nickname != 'User A' }}
VariantTo set the Button Upload component to Outline or Filled.
Theme colorTo set the color of the Button Upload component.

Method​

You can use other components to control the Upload component. We support the following three methods:

clearValidationUsed to clear the validation message
clearValueUsed to clear the selected
setDisabledUsed to set the upload component to disabled or enabled

Event handler​

To trigger actions when the selected files change

Data of Uploader​

The upload component has some commonly used data, which can be called in the app.

value an array consisting of the base64 data of files.

files an array of objects. The keys of the objects include lastModified, name, size, type. You can use {{upload1.files.map(file =>file.name)}} to get an array of file names and you can also get lastModified array, size array, type array in the same way.

Upload files to a cloud storage service​

Upload a single file through an S3 resource​

The configuration of action is as follows.

Upload object name

{{upload1.files.map(file =>file.name)[0]}}

Upload data

{{upload1.value[0]}}

Upload multiple files through an S3 resource​

Upload object name list

{{upload1.files.map(file =>file.name)}}

Upload data list

{{upload1.value}}

Upload an image and display it on the image component Change the image source to the file base64 data of upload component. The base64 data is stored in the value attribute in array. And we should splice the file prefix with the file data. The code is as follows. 

{{'data:image/jpeg;base64,'+upload1.value[0]}}
- - + + \ No newline at end of file diff --git a/upstash/index.html b/upstash/index.html index 6241c20738..1ee57522d7 100644 --- a/upstash/index.html +++ b/upstash/index.html @@ -10,13 +10,13 @@ - - + +
-

Upstash

Upstash is a cloud-native serverless service with Redis compatible that provides an easy way to integrate Redis functionality into applications. In the context of ILLA Cloud, the Upstash integration allows users to leverage the features and capabilities of Upstash within the ILLA Cloud application.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Upstash in a few simple steps. ILLA Cloud is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Upstash, visit their website at https://upstash.com/(https://upstash.com/) Let's begin!

Set up your Back end on Upstash​

Create an account on Upstash. You may sign in using your Amazon, Github or Google accounts alternatively.

After signing into your account on Upstash, click on the Create database button in Redis.

up_home

On the Upstash dashboard, click Create database.

up_create_db

Note: you can only have ONE database in the free tier.

For the database configuration, You can name your database the way you want. Here we name it db1. Choose the primary region and read region based on your write and read user locations. Enable TSL/SSL. It's optional to enable Eviction.

up_db_config

Click the create button, we now have a database ready to use.

Create Upstash in ILLA Cloud​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Upstash from the database list.

action_list_0

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Upstash will display as shown.

up_ex_ready

  • Create in Builder

Sign in to your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Upstash from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to the Upstash database.

up_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '6379'.
PasswordrequiredUse this password for authentication.
SSL optionrequiredwhether to enable the SSL (recommend to enable)

In order to fill in the required information, go to the database dashboard page and click on the database we have just created in your Upstash.

up_info

You may copy it by hovering the mouse over the endpoint, password, and port and clicking the copy text icon behind it.

In the Upstash integration configuration in ILLA Cloud, put the name you want for Name, Endpoint for hostname, given Port for Port, and copy the encrypted Password for Password.

up_config_done

Create Actions​

We have created an Upstash resource, we can add the action by selecting Upstash from the action list and choosing the Create action button.

up_resource_list

Now we have added the Upstash server as an action to our building page.

upstash

Configure Upstash​

PropertiesDescription
Redis queryuse query to retrieve and manipulate data stored in your Redis database
Transformertransforming data into the style you like using JavaScript

Example usage:

  1. Get Values:
    • Get a value: Use the GET command to retrieve the value associated with a specific key. For example: GET key.
  2. Set Values:
    • Set a value: Use the SET command to set the value of a key. For example SET key value.
  3. Hash Operations:
    • Set field-value pairs in a hash: Use the HSET command to set a field-value pair in a hash. For example: HSET hashKey field value.
    • Get a value from a hash: Use the HGET command to retrieve the value of a specific field in a hash. For example: HGET hashKey field.
  4. List Operations:
    • Add an element to a list: Use the LPUSH or RPUSH command to add an element to the beginning or end of a list, respectively. For example: LPUSH listKey value.
    • Retrieve elements from a list: Use the LRANGE command to fetch a range of elements from a list. For example: LRANGE listKey start end.
  5. Set Operations:
    • Add elements to a set: Use the SADD command to add one or more elements to a set. For example: SADD setKey value1 value2.
    • Retrieve elements from a set: Use the SMEMBERS command to get all the members of a set. For example: SMEMBERS setKey.
  6. Sorted Set Operations:
    • Add elements to a sorted set: Use the ZADD command to add elements to a sorted set along with their scores. For example: ZADD sortedSetKey score1 member1 score2 member2.
    • Retrieve elements from a sorted set: Use the ZRANGE command to fetch a range of elements from a sorted set based on their scores. For example: ZRANGE sortedSetKey start end.

Note: You can refer to the Redis documentation for a fully comprehensive list of commands and their usage.

Use case​

Next, we will demonstrate how to map the data from **Upstash** to the table component.

Step 1 Add an action​

Let us create a table in Upstash called employee_profile, including 4 columns name, level, age, and married.

Then we can create a new action for Upstash from the action list in ILLA Cloud and name upstash2.

To list all data in employee_profile put the code snippet below in the Redis query section.

GET employee_profile

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const jsonString = data[0].result;

// Parse the JSON string into a JavaScript object
const jsonData = JSON.parse(jsonString);

// Access the "employees" property and map it to a new array
const mappedArray = jsonData.employees.map((employee) => ({
  name: employee.name,
  level: employee.level,
  age: employee.age,
  married: employee.married,
}));

return mappedArray;

up_code

Click Save and Run to activate this action.

up_data

Step 2 Add Components​

Next, we can add a table component to the canvas.

In the Data Source field in the Inspect page after clicking on the component, put {{upstash2.data}} to retrieve the data from upstash.

Step 3 Test​

The final look should be as shown.

up_test

- - +

Upstash

Upstash is a cloud-native serverless service with Redis compatible that provides an easy way to integrate Redis functionality into applications. In the context of ILLA Cloud, the Upstash integration allows users to leverage the features and capabilities of Upstash within the ILLA Cloud application.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Upstash in a few simple steps. ILLA Cloud is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Upstash, visit their website at https://upstash.com/(https://upstash.com/) Let's begin!

Set up your Back end on Upstash​

Create an account on Upstash. You may sign in using your Amazon, Github or Google accounts alternatively.

After signing into your account on Upstash, click on the Create database button in Redis.

up_home

On the Upstash dashboard, click Create database.

up_create_db

Note: you can only have ONE database in the free tier.

For the database configuration, You can name your database the way you want. Here we name it db1. Choose the primary region and read region based on your write and read user locations. Enable TSL/SSL. It's optional to enable Eviction.

up_db_config

Click the create button, we now have a database ready to use.

Create Upstash in ILLA Cloud​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Upstash from the database list.

action_list_0

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Upstash will display as shown.

up_ex_ready

  • Create in Builder

Sign in to your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Upstash from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to the Upstash database.

up_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '6379'.
PasswordrequiredUse this password for authentication.
SSL optionrequiredwhether to enable the SSL (recommend to enable)

In order to fill in the required information, go to the database dashboard page and click on the database we have just created in your Upstash.

up_info

You may copy it by hovering the mouse over the endpoint, password, and port and clicking the copy text icon behind it.

In the Upstash integration configuration in ILLA Cloud, put the name you want for Name, Endpoint for hostname, given Port for Port, and copy the encrypted Password for Password.

up_config_done

Create Actions​

We have created an Upstash resource, we can add the action by selecting Upstash from the action list and choosing the Create action button.

up_resource_list

Now we have added the Upstash server as an action to our building page.

upstash

Configure Upstash​

PropertiesDescription
Redis queryuse query to retrieve and manipulate data stored in your Redis database
Transformertransforming data into the style you like using JavaScript

Example usage:

  1. Get Values:
    • Get a value: Use the GET command to retrieve the value associated with a specific key. For example: GET key.
  2. Set Values:
    • Set a value: Use the SET command to set the value of a key. For example SET key value.
  3. Hash Operations:
    • Set field-value pairs in a hash: Use the HSET command to set a field-value pair in a hash. For example: HSET hashKey field value.
    • Get a value from a hash: Use the HGET command to retrieve the value of a specific field in a hash. For example: HGET hashKey field.
  4. List Operations:
    • Add an element to a list: Use the LPUSH or RPUSH command to add an element to the beginning or end of a list, respectively. For example: LPUSH listKey value.
    • Retrieve elements from a list: Use the LRANGE command to fetch a range of elements from a list. For example: LRANGE listKey start end.
  5. Set Operations:
    • Add elements to a set: Use the SADD command to add one or more elements to a set. For example: SADD setKey value1 value2.
    • Retrieve elements from a set: Use the SMEMBERS command to get all the members of a set. For example: SMEMBERS setKey.
  6. Sorted Set Operations:
    • Add elements to a sorted set: Use the ZADD command to add elements to a sorted set along with their scores. For example: ZADD sortedSetKey score1 member1 score2 member2.
    • Retrieve elements from a sorted set: Use the ZRANGE command to fetch a range of elements from a sorted set based on their scores. For example: ZRANGE sortedSetKey start end.

Note: You can refer to the Redis documentation for a fully comprehensive list of commands and their usage.

Use case​

Next, we will demonstrate how to map the data from **Upstash** to the table component.

Step 1 Add an action​

Let us create a table in Upstash called employee_profile, including 4 columns name, level, age, and married.

Then we can create a new action for Upstash from the action list in ILLA Cloud and name upstash2.

To list all data in employee_profile put the code snippet below in the Redis query section.

GET employee_profile

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const jsonString = data[0].result;

// Parse the JSON string into a JavaScript object
const jsonData = JSON.parse(jsonString);

// Access the "employees" property and map it to a new array
const mappedArray = jsonData.employees.map((employee) => ({
  name: employee.name,
  level: employee.level,
  age: employee.age,
  married: employee.married,
}));

return mappedArray;

up_code

Click Save and Run to activate this action.

up_data

Step 2 Add Components​

Next, we can add a table component to the canvas.

In the Data Source field in the Inspect page after clicking on the component, put {{upstash2.data}} to retrieve the data from upstash.

Step 3 Test​

The final look should be as shown.

up_test

+ + \ No newline at end of file diff --git a/video/index.html b/video/index.html index 43b868dc3c..64269a4c6c 100644 --- a/video/index.html +++ b/video/index.html @@ -10,13 +10,13 @@ - - + +
-

Video

The video component in ILLA Cloud is a powerful tool that allows users to incorporate multimedia content into their applications or projects. With this feature, users can seamlessly integrate videos into their user interfaces and create engaging and interactive experiences for their end-users.

The video component supports various video formats, including popular formats such as MP4, AVI, and MOV. Users can upload videos directly from their devices or provide URLs to external video sources. This flexibility enables users to leverage existing video content or create new videos specifically for their applications.

Properties​

PropertiesDescription
Video sourcespecify the location of the video file or provide a URL to an external video source
Autoplayenables the video to start playing automatically when the webpage loads
Loopallows the video to play continuously in a loop
Show controlswhether the video player controls are visible or hidden
Muteallows the video to play without any sound
Volumecontrols the audio level of the video
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.

Method​

You can use other components to control the component. We support the following eight methods:

  • play

start playing the video. When invoked, it initiates the playback of the video from the current position.

  • pause

pause the video playback. When called, it temporarily stops the video at its current position.

  • showControls

toggle the visibility of the video player controls. By invoking this method, the controls can be displayed or hidden, allowing users to interact with the video playback.

  • setVideoUrl

dynamically change the source or URL of the video.

PropertiesDescription
Video URLvideo source url
  • setVolume

adjusting the audio volume of the video. It takes a numeric value as the parameter volume

PropertiesDescription
Volumenumeric value, ranging from 0 to 1, where 0 represents muted or no sound, and 1 represents maximum volume.
  • setSpeed

changing the playback speed of the video. It accepts a numeric value as the parameter Speed

PropertiesDescription
Speednumeric value. 1 represents the normal playback speed. Values less than 1 slow down the video, while values greater than 1 speed it up.
  • setLoop

enable or disable the looping functionality of the video. By passing a boolean value as a parameter, the video can be set to loop continuously or play only once.

  • seekTo

seeking a specific time or position in the video. It takes numerical values as the parameter time(s)

PropertiesDescription
Time(s)a numeric value representing the desired time in seconds as a parameter and adjusts the playback position accordingly.

Event handler​

EventDescription
Playperform specific actions or execute code when the video playback begins
Pausehandle the pause event and execute actions accordingly
Loadedperforming tasks that need to be executed after the video has been fully loaded, such as updating the UI to display the video duration or initializing additional features related to the video playback
Endedhandle the end of the video and perform actions such as displaying a replay button, showing related content, or executing any other desired logic when the video has finished playing

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
autoplayA boolean value that determines whether the video should automatically start playing when it is loaded.
controlsA boolean value that determines whether the video player controls, such as play, pause, and volume, are displayed to the user.
displayNameA string value that represents the name or title of the video.
eventsAn array or object that defines the event handlers associated with the video component, such as play, pause, loaded, ended, etc.
hiddenA boolean value that determines whether the video component is hidden from the user interface.
loopA boolean value that determines whether the video should automatically restart playing from the beginning once it reaches the end.
mutedA boolean value that determines whether the video should be muted, i.e., played without sound.
playingA boolean value that indicates whether the video is currently playing.
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the video component.
urlA string value that specifies the URL or source of the video file to be played.
volumeA number value between 0 and 1 represents the volume level of the video, where 0 is muted and 1 is the maximum volume.

Example: {{video1.volume}}

Use case​

Next, we will demonstrate how to control the video playing with a button.

Step 1 Add Components​

Add a Video component and a button component to the canvas.

We set the video source of video component to the youtube link of any video you want to play. Here we will use the default video as example and labeled the button as “Play” as shown below

video_layout

Step 2 Configure the component​

For the button component, we can configure it to set the video component playing if the video is not playing.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the video1 component that you want to change as the target of the event.
  3. Choose the play action
  4. In the Only run when field, put {{!video1.playing}}.

video_config

Similarly, to stop the video playing, we create a new Event handler and follow the first two steps the same as above.

  1. Choose the pause action
  2. In the Only run when field, put {{video1.playing}}.

video_config_1

Step 3 Test​

Now that when you click the “Play” button, the video should play if not playing and pause if playing.

video_test

- - +

Video

The video component in ILLA Cloud is a powerful tool that allows users to incorporate multimedia content into their applications or projects. With this feature, users can seamlessly integrate videos into their user interfaces and create engaging and interactive experiences for their end-users.

The video component supports various video formats, including popular formats such as MP4, AVI, and MOV. Users can upload videos directly from their devices or provide URLs to external video sources. This flexibility enables users to leverage existing video content or create new videos specifically for their applications.

Properties​

PropertiesDescription
Video sourcespecify the location of the video file or provide a URL to an external video source
Autoplayenables the video to start playing automatically when the webpage loads
Loopallows the video to play continuously in a loop
Show controlswhether the video player controls are visible or hidden
Muteallows the video to play without any sound
Volumecontrols the audio level of the video
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.

Method​

You can use other components to control the component. We support the following eight methods:

  • play

start playing the video. When invoked, it initiates the playback of the video from the current position.

  • pause

pause the video playback. When called, it temporarily stops the video at its current position.

  • showControls

toggle the visibility of the video player controls. By invoking this method, the controls can be displayed or hidden, allowing users to interact with the video playback.

  • setVideoUrl

dynamically change the source or URL of the video.

PropertiesDescription
Video URLvideo source url
  • setVolume

adjusting the audio volume of the video. It takes a numeric value as the parameter volume

PropertiesDescription
Volumenumeric value, ranging from 0 to 1, where 0 represents muted or no sound, and 1 represents maximum volume.
  • setSpeed

changing the playback speed of the video. It accepts a numeric value as the parameter Speed

PropertiesDescription
Speednumeric value. 1 represents the normal playback speed. Values less than 1 slow down the video, while values greater than 1 speed it up.
  • setLoop

enable or disable the looping functionality of the video. By passing a boolean value as a parameter, the video can be set to loop continuously or play only once.

  • seekTo

seeking a specific time or position in the video. It takes numerical values as the parameter time(s)

PropertiesDescription
Time(s)a numeric value representing the desired time in seconds as a parameter and adjusts the playback position accordingly.

Event handler​

EventDescription
Playperform specific actions or execute code when the video playback begins
Pausehandle the pause event and execute actions accordingly
Loadedperforming tasks that need to be executed after the video has been fully loaded, such as updating the UI to display the video duration or initializing additional features related to the video playback
Endedhandle the end of the video and perform actions such as displaying a replay button, showing related content, or executing any other desired logic when the video has finished playing

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
autoplayA boolean value that determines whether the video should automatically start playing when it is loaded.
controlsA boolean value that determines whether the video player controls, such as play, pause, and volume, are displayed to the user.
displayNameA string value that represents the name or title of the video.
eventsAn array or object that defines the event handlers associated with the video component, such as play, pause, loaded, ended, etc.
hiddenA boolean value that determines whether the video component is hidden from the user interface.
loopA boolean value that determines whether the video should automatically restart playing from the beginning once it reaches the end.
mutedA boolean value that determines whether the video should be muted, i.e., played without sound.
playingA boolean value that indicates whether the video is currently playing.
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the video component.
urlA string value that specifies the URL or source of the video file to be played.
volumeA number value between 0 and 1 represents the volume level of the video, where 0 is muted and 1 is the maximum volume.

Example: {{video1.volume}}

Use case​

Next, we will demonstrate how to control the video playing with a button.

Step 1 Add Components​

Add a Video component and a button component to the canvas.

We set the video source of video component to the youtube link of any video you want to play. Here we will use the default video as example and labeled the button as “Play” as shown below

video_layout

Step 2 Configure the component​

For the button component, we can configure it to set the video component playing if the video is not playing.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the video1 component that you want to change as the target of the event.
  3. Choose the play action
  4. In the Only run when field, put {{!video1.playing}}.

video_config

Similarly, to stop the video playing, we create a new Event handler and follow the first two steps the same as above.

  1. Choose the pause action
  2. In the Only run when field, put {{video1.playing}}.

video_config_1

Step 3 Test​

Now that when you click the “Play” button, the video should play if not playing and pause if playing.

video_test

+ + \ No newline at end of file diff --git a/zh/3-3/index.html b/zh/3-3/index.html index 27e91f451c..a1d8be6916 100644 --- a/zh/3-3/index.html +++ b/zh/3-3/index.html @@ -10,13 +10,13 @@ - - + +
-

V 3.3

2023.10.26

🚀 New features​

  • Data grid component
    • Supports displaying 100,000 records.
    • Supports server-side pagination.
    • Supports multiple data types, such as images, tags, buttons, etc.
    • Supports column-based filtering or global quick filtering.
    • Supports data grouping based on specified columns.
    • Supports freezing specified columns to the left or rightmost side.
    • Supports drag-and-drop column width adjustment while browsing.
  • Oracle 9i
    • Building upon our existing support for Oracle versions 9i above, we have now added support for Oracle databases running versions 9i and below. If you are using one of these versions, rest assured that you can confidently use ILLA Cloud.

🐛 Bug fix​

  • Fixed the issue in the Onboarding app where running an Action would result in an error.
  • Fixed the issue in the Event Handler where Boolean value handling was incorrect when the "Only run when" field was left empty.

💅 Polish​

  • Improved component copy-paste functionality
    • Support copying components to different pages or different Container views.
  • Added WebSocket proxy functionality and optimized the issue of disconnection during collaborative editing in Builder for certain regions.
- - +

V 3.3

2023.10.26

🚀 New features​

  • Data grid component
    • Supports displaying 100,000 records.
    • Supports server-side pagination.
    • Supports multiple data types, such as images, tags, buttons, etc.
    • Supports column-based filtering or global quick filtering.
    • Supports data grouping based on specified columns.
    • Supports freezing specified columns to the left or rightmost side.
    • Supports drag-and-drop column width adjustment while browsing.
  • Oracle 9i
    • Building upon our existing support for Oracle versions 9i above, we have now added support for Oracle databases running versions 9i and below. If you are using one of these versions, rest assured that you can confidently use ILLA Cloud.

🐛 Bug fix​

  • Fixed the issue in the Onboarding app where running an Action would result in an error.
  • Fixed the issue in the Event Handler where Boolean value handling was incorrect when the "Only run when" field was left empty.

💅 Polish​

  • Improved component copy-paste functionality
    • Support copying components to different pages or different Container views.
  • Added WebSocket proxy functionality and optimized the issue of disconnection during collaborative editing in Builder for certain regions.
+ + \ No newline at end of file diff --git a/zh/3-4/index.html b/zh/3-4/index.html index b1d47d67b2..0dab3054b9 100644 --- a/zh/3-4/index.html +++ b/zh/3-4/index.html @@ -10,13 +10,13 @@ - - + +
-

V 3.4

2023.11.09

💅 Polish​

  • Dashboard updated: display all apps, resources, AI Agents, Files on homepage dashboard.
  • Updated AI Agent editing page
  • Updates to the data panel on the application editing page:
    • Components are now displayed hierarchically, meaning that components nested within a container will be grouped and displayed within that container.
    • Data properties of each component, action, variable, etc., can now be directly copied.
- - +

V 3.4

2023.11.09

💅 Polish​

  • Dashboard updated: display all apps, resources, AI Agents, Files on homepage dashboard.
  • Updated AI Agent editing page
  • Updates to the data panel on the application editing page:
    • Components are now displayed hierarchically, meaning that components nested within a container will be grouped and displayed within that container.
    • Data properties of each component, action, variable, etc., can now be directly copied.
+ + \ No newline at end of file diff --git a/zh/3-5/index.html b/zh/3-5/index.html index 20b12d59e2..f81b320274 100644 --- a/zh/3-5/index.html +++ b/zh/3-5/index.html @@ -10,13 +10,13 @@ - - + +
-

V 3.5

2023.11.23

🚀 New features​

  • ILLA Drive Action
    • You can perform the following operations on files in ILLA Drive using actions: list, upload, download, and delete.
  • Directly upload files or pick files via component inspect panel
    • For the following components: Image, Carousel, Video, and Audio.
    • you can now directly select existing files from ILLA Drive or upload new files through the Inspect panel of these components. The selected or uploaded files will be displayed on the respective components.

🐛 Bug fix​

  • Fixed the issue where the "Set router" method was unable to select a child page.

💅 Polish​

  • Optimizations for the image component
    • Supports setting automatic height or fixed height.
    • When set to automatic height, you can specify the image aspect ratio, and the height will be calculated automatically based on the fixed ratio.
    • You can change the shape of the component by setting a radius. For example, setting the radius to 50% when the image ratio is {{1}} will display the image in a circular shape.
- - +

V 3.5

2023.11.23

🚀 New features​

  • ILLA Drive Action
    • You can perform the following operations on files in ILLA Drive using actions: list, upload, download, and delete.
  • Directly upload files or pick files via component inspect panel
    • For the following components: Image, Carousel, Video, and Audio.
    • you can now directly select existing files from ILLA Drive or upload new files through the Inspect panel of these components. The selected or uploaded files will be displayed on the respective components.

🐛 Bug fix​

  • Fixed the issue where the "Set router" method was unable to select a child page.

💅 Polish​

  • Optimizations for the image component
    • Supports setting automatic height or fixed height.
    • When set to automatic height, you can specify the image aspect ratio, and the height will be calculated automatically based on the fixed ratio.
    • You can change the shape of the component by setting a radius. For example, setting the radius to 50% when the image ratio is {{1}} will display the image in a circular shape.
+ + \ No newline at end of file diff --git a/zh/4-0/index.html b/zh/4-0/index.html index 692ad16c39..798937a35e 100644 --- a/zh/4-0/index.html +++ b/zh/4-0/index.html @@ -10,13 +10,13 @@ - - + +
-

V 4.0

2023.12.07

🚀 New features​

  • Mock data for your actions
    • When the API is not ready yet, you can use Mock data for simulation
  • Create app from an AI Agent
    • By clicking Create app from AI Agent, we will automatically set up the interface and data connections between components and the AI Agent. You can then configure the necessary functionalities for your business on top of this foundation.
  • Actions for SQL databases types such as MySQL, PostgreSQL, MSSQL, etc., now support the ability to set either Safe mode or Unsafe mode.
    • Safe mode: Your SQL can only reference variables in the place of variables, for example, where name = '{{input1.value}}'. This prevents users from compromising your database by inputting statements like '; drop table;' in input1
    • Unsafe mode: When using the unsafe mode, SQL syntax words can also be replaced with variables, such as where {{input1.value}} {{input2.value}} '{{input3.value}}'. However, in this case, the database can be compromised by the content entered by the user. It is not recommended for you to use this mode.

🐛 Bug fix​

  • Fixed an issue where the Data Grid component would throw an error in certain cases when switching the primary key.
- - +

V 4.0

2023.12.07

🚀 New features​

  • Mock data for your actions
    • When the API is not ready yet, you can use Mock data for simulation
  • Create app from an AI Agent
    • By clicking Create app from AI Agent, we will automatically set up the interface and data connections between components and the AI Agent. You can then configure the necessary functionalities for your business on top of this foundation.
  • Actions for SQL databases types such as MySQL, PostgreSQL, MSSQL, etc., now support the ability to set either Safe mode or Unsafe mode.
    • Safe mode: Your SQL can only reference variables in the place of variables, for example, where name = '{{input1.value}}'. This prevents users from compromising your database by inputting statements like '; drop table;' in input1
    • Unsafe mode: When using the unsafe mode, SQL syntax words can also be replaced with variables, such as where {{input1.value}} {{input2.value}} '{{input3.value}}'. However, in this case, the database can be compromised by the content entered by the user. It is not recommended for you to use this mode.

🐛 Bug fix​

  • Fixed an issue where the Data Grid component would throw an error in certain cases when switching the primary key.
+ + \ No newline at end of file diff --git a/zh/4-1/index.html b/zh/4-1/index.html index 60e66c7310..fece553c72 100644 --- a/zh/4-1/index.html +++ b/zh/4-1/index.html @@ -10,13 +10,13 @@ - - + +
-

V 4.1

2023.12.21

🚀 New features​

  • Tags component
    • A pill list to display color-coded values. It supports custom colors and deterministic assignment, so each unique tag uses a different color.
  • Avatar component
    • A content area to display user information and profile image. It supports a range of image sizes, fallback icon if no image is provided, text if no image or icon is provided, and includes a label and caption.
  • New column type for data grid
    • Added support for Avatar type in the Data Grid component.

🐛 Bug fix​

  • Optimized server-side pagination for the Data Grid component.
  • Fixed the issue with selected data in the List component and Grid List component after switching pages.
- - +
跳到主要内容

V 4.1

2023.12.21

🚀 New features​

  • Tags component
    • A pill list to display color-coded values. It supports custom colors and deterministic assignment, so each unique tag uses a different color.
  • Avatar component
    • A content area to display user information and profile image. It supports a range of image sizes, fallback icon if no image is provided, text if no image or icon is provided, and includes a label and caption.
  • New column type for data grid
    • Added support for Avatar type in the Data Grid component.

🐛 Bug fix​

  • Optimized server-side pagination for the Data Grid component.
  • Fixed the issue with selected data in the List component and Grid List component after switching pages.
+ + \ No newline at end of file diff --git a/zh/4-2/index.html b/zh/4-2/index.html index 4d33b60f43..6985a33c2f 100644 --- a/zh/4-2/index.html +++ b/zh/4-2/index.html @@ -10,13 +10,13 @@ - - + +
-
跳到主要内容

V 4.2

2024.01.04

🚀 New features​

Introducing ILLA Flow, a powerful automated workflow tool that allows you to build automated workflows quickly and integrate with your business tools. Automate tedious tasks and focus on business.

Unlike other similar tools, ILLA Flow is specifically tailored to integrate seamlessly with applications built using ILLA Builder, enabling developers to trigger flows directly within their applications. ILLA Flow beta supports the following features:

  • Workflow Automation: ILLA Flow empowers developers to automate their workflows, eliminating manual tasks and increasing productivity. By defining triggers and actions, developers can create custom workflows that execute seamlessly.
  • Extensive Trigger Options: ILLA Flow provides flexible trigger options, including scheduled triggers and webhook triggers. With scheduled triggers, developers can set specific times for flows to execute, offering precise control over workflow automation. Webhook triggers enable developers to initiate flows based on incoming HTTP requests, enabling seamless integration with external systems and services.
  • Broad Action Support: ILLA Flow offers support for various actions commonly used in development scenarios. This includes integration with PostgreSQL and MySQL databases, allowing developers to perform database operations as part of their workflows. Additionally, ILLA Flow supports REST API integration, enabling developers to interact with external services and perform actions such as data transformation.
  • Seamless Integration with ILLA Builder: ILLA Flow is designed to seamlessly integrate with applications built using ILLA Builder. This integration enables developers to trigger flows directly within their applications, enhancing the overall functionality and automation capabilities of their applications.
  • Customizability and Versatility: ILLA Flow is highly customizable, allowing developers to tailor workflows to their specific requirements. With its versatile capabilities, ILLA Flow can cover a wide range of application scenarios, making it suitable for various development projects.

🐛 Bug fix​

  • Fixed the issue where the selection of events in the audit log was not working properly.
  • Resolved the problem causing the default view of containers to become ineffective.

💅 Polish​

  • Users now have the ability to change the application name within the app itself.
  • Improved data synchronization between the app and the dashboard when making edits to the application name.
- - +
跳到主要内容

V 4.2

2024.01.04

🚀 New features​

Introducing ILLA Flow, a powerful automated workflow tool that allows you to build automated workflows quickly and integrate with your business tools. Automate tedious tasks and focus on business.

Unlike other similar tools, ILLA Flow is specifically tailored to integrate seamlessly with applications built using ILLA Builder, enabling developers to trigger flows directly within their applications. ILLA Flow beta supports the following features:

  • Workflow Automation: ILLA Flow empowers developers to automate their workflows, eliminating manual tasks and increasing productivity. By defining triggers and actions, developers can create custom workflows that execute seamlessly.
  • Extensive Trigger Options: ILLA Flow provides flexible trigger options, including scheduled triggers and webhook triggers. With scheduled triggers, developers can set specific times for flows to execute, offering precise control over workflow automation. Webhook triggers enable developers to initiate flows based on incoming HTTP requests, enabling seamless integration with external systems and services.
  • Broad Action Support: ILLA Flow offers support for various actions commonly used in development scenarios. This includes integration with PostgreSQL and MySQL databases, allowing developers to perform database operations as part of their workflows. Additionally, ILLA Flow supports REST API integration, enabling developers to interact with external services and perform actions such as data transformation.
  • Seamless Integration with ILLA Builder: ILLA Flow is designed to seamlessly integrate with applications built using ILLA Builder. This integration enables developers to trigger flows directly within their applications, enhancing the overall functionality and automation capabilities of their applications.
  • Customizability and Versatility: ILLA Flow is highly customizable, allowing developers to tailor workflows to their specific requirements. With its versatile capabilities, ILLA Flow can cover a wide range of application scenarios, making it suitable for various development projects.

🐛 Bug fix​

  • Fixed the issue where the selection of events in the audit log was not working properly.
  • Resolved the problem causing the default view of containers to become ineffective.

💅 Polish​

  • Users now have the ability to change the application name within the app itself.
  • Improved data synchronization between the app and the dashboard when making edits to the application name.
+ + \ No newline at end of file diff --git a/zh/4-3-6/index.html b/zh/4-3-6/index.html index c8bb720e80..dd64954b1b 100644 --- a/zh/4-3-6/index.html +++ b/zh/4-3-6/index.html @@ -10,13 +10,13 @@ - - + +
-
跳到主要内容

V 4.3.6

2024.01.25

🚀 New features​

  • Added support for AI Agent, allowing the usage of ILLA Flow to run AI Agents.
  • Introduced support for Condition nodes, enabling the input of conditional statements in IF/Else blocks to handle different events based on the results.

💅 Polish​

  • Menu component now supports the "On logo clicked" method, which allows for handling events such as logo clicks for redirection or executing queries.

🐛 Bug fix​

  • Fixed an issue with the pagination of the Data grid component's paginator on the server-side.
- - +
跳到主要内容

V 4.3.6

2024.01.25

🚀 New features​

  • Added support for AI Agent, allowing the usage of ILLA Flow to run AI Agents.
  • Introduced support for Condition nodes, enabling the input of conditional statements in IF/Else blocks to handle different events based on the results.

💅 Polish​

  • Menu component now supports the "On logo clicked" method, which allows for handling events such as logo clicks for redirection or executing queries.

🐛 Bug fix​

  • Fixed an issue with the pagination of the Data grid component's paginator on the server-side.
+ + \ No newline at end of file diff --git a/zh/4-3/index.html b/zh/4-3/index.html index 4e8e3b566a..2bde9adbf3 100644 --- a/zh/4-3/index.html +++ b/zh/4-3/index.html @@ -10,13 +10,13 @@ - - + +
-
跳到主要内容

V 4.3

2024.01.22

🚀 New features​

  • Introducing the ability to create CRUD apps directly from your database. Now, you can create a fully functional app in just 10 seconds!
  • We've also added the option to create apps from templates, allowing you to seamlessly replace data with just a single click.
- - +
跳到主要内容

V 4.3

2024.01.22

🚀 New features​

  • Introducing the ability to create CRUD apps directly from your database. Now, you can create a fully functional app in just 10 seconds!
  • We've also added the option to create apps from templates, allowing you to seamlessly replace data with just a single click.
+ + \ No newline at end of file diff --git a/zh/4-4/index.html b/zh/4-4/index.html index a3aa8b4d4a..5b9a65fcec 100644 --- a/zh/4-4/index.html +++ b/zh/4-4/index.html @@ -10,13 +10,13 @@ - - + +
-
跳到主要内容

V 4.4

2024.02.04

🚀 New features​

  • QR Code component: You can use the QR Code component to convert any URL, code, or string into a QR code.
  • Scanner: You can invoke the camera on mobile devices to scan barcodes or QR codes.
- - +
跳到主要内容

V 4.4

2024.02.04

🚀 New features​

  • QR Code component: You can use the QR Code component to convert any URL, code, or string into a QR code.
  • Scanner: You can invoke the camera on mobile devices to scan barcodes or QR codes.
+ + \ No newline at end of file diff --git a/zh/4-5/index.html b/zh/4-5/index.html index fa1ce3533f..d903481b2b 100644 --- a/zh/4-5/index.html +++ b/zh/4-5/index.html @@ -10,13 +10,13 @@ - - + +
-
跳到主要内容

V 4.5

2024.02.07

🚀 New features​

  • Custom domain: You can customize the domain name for your ILLA Cloud team, allowing you to access ILLA Cloud using your own domain name.
- - +
跳到主要内容

V 4.5

2024.02.07

🚀 New features​

  • Custom domain: You can customize the domain name for your ILLA Cloud team, allowing you to access ILLA Cloud using your own domain name.
+ + \ No newline at end of file diff --git a/zh/4-8/index.html b/zh/4-8/index.html index 08ec5e87c7..4af0462679 100644 --- a/zh/4-8/index.html +++ b/zh/4-8/index.html @@ -10,13 +10,13 @@ - - + +
-
跳到主要内容

V 4.8

2024.05.09

💅 Polish​

Optimized the AI Agent dialogue process for stronger performance during long conversations.

🐛 Bug fix​

Fixed the occasional issue of successful login not redirecting.

- - +
跳到主要内容

V 4.8

2024.05.09

💅 Polish​

Optimized the AI Agent dialogue process for stronger performance during long conversations.

🐛 Bug fix​

Fixed the occasional issue of successful login not redirecting.

+ + \ No newline at end of file diff --git a/zh/4-9/index.html b/zh/4-9/index.html index 199f294b73..829a0c2733 100644 --- a/zh/4-9/index.html +++ b/zh/4-9/index.html @@ -10,18 +10,18 @@ - - + +
-
跳到主要内容

V 4.9

2024.05.17

💅 Polish​

IP address updated. If your Resource does not allow external network access, you need to add the following IP to the allowlist: +

V 4.9

2024.05.17

💅 Polish​

IP address updated. If your Resource does not allow external network access, you need to add the following IP to the allowlist: 143.198.75.2 146.190.51.14 146.190.35.24 64.23.134.60 -146.190.59.192

- - +146.190.59.192

+ + \ No newline at end of file diff --git a/zh/404.html b/zh/404.html index 36a2fe6dfd..e0874121f9 100644 --- a/zh/404.html +++ b/zh/404.html @@ -10,13 +10,13 @@ - - + +
跳到主要内容

找不到页面

我们找不到您要找的页面。

请联系原始链接来源网站的所有者，并告知他们链接已损坏。

- - + + \ No newline at end of file diff --git a/zh/ai-agent/index.html b/zh/ai-agent/index.html index 2a780c3d11..84b841b727 100644 --- a/zh/ai-agent/index.html +++ b/zh/ai-agent/index.html @@ -10,19 +10,19 @@ - - + +
-
跳到主要内容

AI Agent

Customize the AI Agent according to your needs, limiting the behavior of the GPT model to generate content as per your requirements. Integrate the AI Agent into the ILLA App to make your app more intelligent.

What is AI Agent​

AI Agent is a feature developed based on powerful language models such as OpenAI's GPT-3.5 and GPT-4. It empowers you to edit prompts, allowing you to tailor the capabilities of the large language models according to your specific needs. You can save these modifications as your own AI Agent, enabling quick and convenient access. Additionally, you can also directly utilize AI Agents contributed by other outstanding creators.

Use case​

Explore all AI Agents on illa.ai

Marketing​

Blog generator​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7es/detail +

AI Agent

Customize the AI Agent according to your needs, limiting the behavior of the GPT model to generate content as per your requirements. Integrate the AI Agent into the ILLA App to make your app more intelligent.

What is AI Agent​

AI Agent is a feature developed based on powerful language models such as OpenAI's GPT-3.5 and GPT-4. It empowers you to edit prompts, allowing you to tailor the capabilities of the large language models according to your specific needs. You can save these modifications as your own AI Agent, enabling quick and convenient access. Additionally, you can also directly utilize AI Agents contributed by other outstanding creators.

Use case​

Explore all AI Agents on illa.ai

Marketing​

Blog generator​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7es/detail 1

Email generator​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7eg/detail 2

SEO​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7ep/detail 3

Customer support​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7eh/detail 4

Language​

Language learning​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7eD/detail 5

Translator​

Fast try: https://illa.ai/ai-agent/ILAfx4p1C7ek/detail 6

Create AI Agent​

FieldRequired or notDescription
IconRequiredYou can upload images within 500KB, or use AI to generate an icon after filling in the Name. The icon will be displayed in your AI Agent dashboard and, if you contribute the AI Agent to the ILLA Community, it will also be shown in the Community.
NameRequiredName of the AI Agent
DescriptionRequiredA brief description of 160 characters of the AI Agent. You can also generate it after filling in the prompt.
ModeRequiredChat mode : The conversation will be requested along with the current message, previous conversation history, and prompt, resulting in increased token consumption. However, the output will be more accurate as it takes the context of the conversation into account for fine-tuning.Text generation mode:only the current message and prompt are included in the request, resulting in lower token consumption, but it doesn't take the conversation context into consideration for tuning.It's important to note that the conversation history refers to the visible conversation on the screen, and we do not store this information. Once you refresh or close the webpage, the conversation history will not be retained.
PromptRequiredA prompt is a command or instruction that you provide to the language model like GPT. It defines the role or desired output of the model. You can use prompts to instruct the model to perform specific tasks or generate specific types of content. For example, you can use prompts like "Act as an English teacher" or "Please output the results in Markdown format" to guide the model's behavior and generate the desired response.
VariableOptionalVariables allow you to dynamically fill in content within the prompt. A variable consists of a key and a value.The keyrepresents the variable name and cannot contain spaces. It can be freely changed in edit mode but cannot be changed in run mode.The valuerepresents the variable value. Once you enter the variable name, the variable value becomes a required field. After creating a variable, you also need to reference it in the prompt using double curly braces{{variable_name}}. For example, if you create a variable with the key "translate" and the value "English", the prompt can be:Translate the content to {{translate}}. During runtime, the model will actually receive the prompt asTranslate the content to English.
ModelRequiredWe support GPT-3.5-turbo, GPT-3.5-turbo-16k, GPT-4, GPT-4-32k, LLAMA, and others.
Max TokenRequiredThis is used to set the maximum number of tokens allowed per API call. It helps prevent excessive token consumption in a single call, but setting a lower token limit may result in less accurate responses. Different models have different maximum token limits, and you can refer to the official documentation of each model to find out the specific limits.
TemperatureRequiredThe allowed range is 0.1 to 2, but it is typically set between 0.1 and 1. This is used to control the trade-off between response accuracy and randomness in the model's output. When the value is set to a lower level, the output becomes more deterministic and conservative, which may result in increased accuracy. On the other hand, when the value is set to a higher level, the output becomes more creative and random, introducing more variability but potentially reducing accuracy.

Share AI Agent​

Share with team members​

Contribute to community​

Use AI Agent in ILLA App​

How-to​

Demo​

Fork and use​

https://illa.ai/app/ILAfx4p1C71f/detail

- - + + \ No newline at end of file diff --git a/zh/airtable/index.html b/zh/airtable/index.html index d15834d228..6e7a3e8bdc 100644 --- a/zh/airtable/index.html +++ b/zh/airtable/index.html @@ -10,13 +10,13 @@ - - + +
-

Airtable

Airtable is a popular cloud-based relational database and spreadsheet platform that combines the simplicity of a spreadsheet with the complexity of a traditional database. It allows users to create and organize structured data in a user-friendly interface, making it useful for various tasks such as project management, content planning, and data collection.

Set up your Back end on Airtable​

Create an account on Airtable and create your base according to your need.

In order to connect your base to ILLA Cloud, navigate to the developer hub.

air_developer_hub

In Personal Access Token page, click Create new Token.

air_create_new

This will open configuration options for the PAT that you are creating.

First name the PAT, then choose the scopes you'd like this PAT to have access to. Finally, choose what level of access this PAT will have.

air_new_token

Click the create token button, we now have a PAT ready to connect.

Create Airtable in ILLA Cloud​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** at the top of the page, and click **Create New** button.

external_resource

Select Airtable from the database list.

action_list_3

Connect to the database with the required parameters described in Connection Settings below. In this case, fill in the Personal Access Token we copied from Airtable and paste it into Access Token in the configuration.

Click Save Resources to ****create a resource.

The ready Airtable will display as shown.

air_ex_ready

  • Create in Builder

Sign in to your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Airtable from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to the Airtable API.

air_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Access tokenrequireda piece of information that grants a third-party application or service permission to access your Airtable account's data and perform actions on your behalf

Create Actions​

We have created an Airtable resource, we can add the action by selecting Airtable from the action list and choosing the Create action button.

air_resource_list

Now we have added the Airtable API as an action to our building page.

air

Configure Airtable​

PropertiesDescription
Base IDa unique identifier for your Airtable database. You can get the base ID from your base URL. It is usually a string starting with "app".
Table namespecifies the specific table within the chosen base that you want to interact with
Action Typewhat type of operation your integration will perform on the specified table
Transformertransforming data into the style you like using JavaScript

List Records​

retrieves a list of records from a specified table in Airtable

Input

PropertiesRequiredDescription
Viewoptionalorganize and display records based on specific criteria
FieldsoptionalFields refer to the columns within your Airtable table
Filter by formulaoptionaldefine a formula that filters the records you want to retrieve or interact with
Sortoptionalthe order in which records are presented or retrieved
Max recordsoptionallimits the number of records your integration fetches or interacts with in a single request
Page sizeoptionaloften used in scenarios where data needs to be retrieved in multiple batches (pages)
Offsetoptionalspecifies the starting point for retrieving records in a specific page
Cell formatoptionalhow data is displayed within a specific field
Time zoneoptionalensures that date and time calculations and presentations are accurate and consistent
User locationoptionaltailor the integration output based on the user's geographical location or preferences

Get Record​

fetches a specific record from a table by providing the unique record ID

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record

Create Records​

add new records to a table in Airtable

Input

PropertiesRequiredDescription
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Update Record​

modify the values of fields within a single record

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Update Multiple Records​

modify fields in multiple records at once

Input

PropertiesRequiredDescription
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Delete Record​

delete a specific record from a table by providing its record ID

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record

Delete Multiple Records​

delete a specific record from a table by providing its record ID

Input

- - +

Airtable

Airtable is a popular cloud-based relational database and spreadsheet platform that combines the simplicity of a spreadsheet with the complexity of a traditional database. It allows users to create and organize structured data in a user-friendly interface, making it useful for various tasks such as project management, content planning, and data collection.

Set up your Back end on Airtable​

Create an account on Airtable and create your base according to your need.

In order to connect your base to ILLA Cloud, navigate to the developer hub.

air_developer_hub

In Personal Access Token page, click Create new Token.

air_create_new

This will open configuration options for the PAT that you are creating.

First name the PAT, then choose the scopes you'd like this PAT to have access to. Finally, choose what level of access this PAT will have.

air_new_token

Click the create token button, we now have a PAT ready to connect.

Create Airtable in ILLA Cloud​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** at the top of the page, and click **Create New** button.

external_resource

Select Airtable from the database list.

action_list_3

Connect to the database with the required parameters described in Connection Settings below. In this case, fill in the Personal Access Token we copied from Airtable and paste it into Access Token in the configuration.

Click Save Resources to ****create a resource.

The ready Airtable will display as shown.

air_ex_ready

  • Create in Builder

Sign in to your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Airtable from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to the Airtable API.

air_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Access tokenrequireda piece of information that grants a third-party application or service permission to access your Airtable account's data and perform actions on your behalf

Create Actions​

We have created an Airtable resource, we can add the action by selecting Airtable from the action list and choosing the Create action button.

air_resource_list

Now we have added the Airtable API as an action to our building page.

air

Configure Airtable​

PropertiesDescription
Base IDa unique identifier for your Airtable database. You can get the base ID from your base URL. It is usually a string starting with "app".
Table namespecifies the specific table within the chosen base that you want to interact with
Action Typewhat type of operation your integration will perform on the specified table
Transformertransforming data into the style you like using JavaScript

List Records​

retrieves a list of records from a specified table in Airtable

Input

PropertiesRequiredDescription
Viewoptionalorganize and display records based on specific criteria
FieldsoptionalFields refer to the columns within your Airtable table
Filter by formulaoptionaldefine a formula that filters the records you want to retrieve or interact with
Sortoptionalthe order in which records are presented or retrieved
Max recordsoptionallimits the number of records your integration fetches or interacts with in a single request
Page sizeoptionaloften used in scenarios where data needs to be retrieved in multiple batches (pages)
Offsetoptionalspecifies the starting point for retrieving records in a specific page
Cell formatoptionalhow data is displayed within a specific field
Time zoneoptionalensures that date and time calculations and presentations are accurate and consistent
User locationoptionaltailor the integration output based on the user's geographical location or preferences

Get Record​

fetches a specific record from a table by providing the unique record ID

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record

Create Records​

add new records to a table in Airtable

Input

PropertiesRequiredDescription
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Update Record​

modify the values of fields within a single record

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Update Multiple Records​

modify fields in multiple records at once

Input

PropertiesRequiredDescription
Recordsrequireda part of the API payload that you provide when you want to add new records to a specific table

Delete Record​

delete a specific record from a table by providing its record ID

Input

PropertiesRequiredDescription
Record IDrequireda unique identifier assigned to each individual record

Delete Multiple Records​

delete a specific record from a table by providing its record ID

Input

+ + \ No newline at end of file diff --git a/zh/amazons3/index.html b/zh/amazons3/index.html index c3e349393a..d4a165b895 100644 --- a/zh/amazons3/index.html +++ b/zh/amazons3/index.html @@ -10,13 +10,13 @@ - - + +
-

Amazon S3

Amazon S3 is a highly scalable and secure cloud storage service offered by Amazon Web Services (AWS). When combined with ILLA Cloud, developers can seamlessly integrate Amazon S3 into their applications, leveraging its robust storage capabilities to store and retrieve data efficiently. ILLA Cloud simplifies the integration process, allowing developers to seamlessly connect to Amazon S3 and utilize its powerful features, such as data encryption, versioning, access controls, and seamless scalability. With the integration of Amazon S3 on ILLA Cloud, developers can enhance their applications with reliable and scalable storage solutions, enabling them to focus on building innovative and data-driven experiences.

Create Amazon S3 API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Amazon S3 from the API list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Amazon S3 will display as shown.

amazon_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Amazon S3 from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Amazon S3 API.

amazon_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Bucket nameoptionala unique identifier that represents a storage container in Amazon S3. It provides a logical separation for organizing and accessing your files
S3 ACL for uploaded filesoptionalallows you to define fine-grained access permissions for files within your bucket. It specifies who can perform specific operations, such as reading, writing, or deleting files.
Regionrequiredgeographical location where your Amazon S3 bucket is stored. It determines the physical location of your data and can impact factors like latency and data transfer costs.
Custom S3 endpointoptionalenables you to configure a specific endpoint URL for accessing your Amazon S3 resources. It can be useful for scenarios where you want to use a custom domain or integrate with a CDN (Content Delivery Network).
Access keyrequiredcredentials that authenticate your requests to access Amazon S3
Secret access keyrequiredgenerated when you create an IAM (Identity and Access Management) user or an AWS (Amazon Web Services) access key pair.

Create Actions​

We have created an Amazon S3 resource, we can add the action by selecting Amazon S3 from the action list and choosing the Create action button.

amazon_resource_list

Now we have added the Amazon server as an action to our building page.

amazon

Configure Amazon S3​

Overview​

Method NameDescription
Action Typelist all objects in a bucket, read an object, download an object, delete an object, delete multiple objects, upload data, upload multiple data
Bucket namea unique identifier that represents a storage container in Amazon S3.
Transformertransforming data into the style you like using JavaScript

List all objects in a bucket​

retrieve a list of all objects stored within a specific bucket.

Input

PropertiesRequiredDescription
Prefix to filter resultsoptionalfilter the results to include only objects whose key (name) begins with a specific prefix
Delimiteroptionalspecify a character that separates object key hierarchies
Generate Signed URLoptionalwhether to generate a time-limited URL that provides temporary access to a specific object
Max Keysoptionallimit the maximum number of objects returned in the response

For example, to get all objects in the database.

Output

return an array of objects, each including at least one objectKey property.

amazon_list_all_data

Use {{s31.data}} to get all returned data.

amazon_list_all_code

Read an object​

retrieve the contents of a specific object stored within a bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to get the content of document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of a document

amazon_read_data1

amazon_read_data2

Use {{s31.data}} to get the returned data.

amazon_read_code

Download an object​

retrieve the contents of a specific object stored within a bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to download the document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of a document and download the document to local

amazon_read_data1

Delete an object​

deletes a single object from an S3 bucket.

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to delete the document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of the deleted document

amazon_delete_data

amazon_delete_data1

Delete multiple objects​

deletes multiple objects simultaneously from an S3 bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to delete multiple documents, put {{["images.jpeg", "images-1.png"]}} for Object key.

Output

return the content and metadata of the deleted documents

amazon_delete2_data1

amazon_delete2_data2

Upload data​

uploading an object into a bucket

Input

PropertiesRequiredDescription
Content TyperequiredMIME type of object you are uploading.
Upload object namerequiredthe name of the object you are uploading.
Upload datarequiredthe data you want to upload to Amazon S3.
Timeout for uploading a file (Minute)optionalthe uploading time in minutes before the uploading process is stopped by a timeout error

For example, to delete multiple documents, put text for content type, text.txt for upload object name, and text for upload data.

Output

return the message of whether the document is uploaded successfully

amazon_upload_data1

amazon_upload_data2

Upload multiple data​

upload a list of objects into a bucket

Input

PropertiesRequiredDescription
Content TyperequiredMIME type of object you are uploading.
Upload object name listrequireda list of names of the objects you are uploading.
Upload data listrequireda list of the data you want to upload to Amazon S3.
Timeout for uploading a file (Minute)optionalthe uploading time in minutes before the uploading process is stopped by a timeout error

For example, to delete multiple documents, put text for content type, {{['text.txt', 'text2.txt']}} for upload object name list, and {{['text', 'text2']}} for upload data list.

Output

return the message of whether the documents are uploaded successfully

amazon_upload_data1

amazon_upload_data2

- - +

Amazon S3

Amazon S3 is a highly scalable and secure cloud storage service offered by Amazon Web Services (AWS). When combined with ILLA Cloud, developers can seamlessly integrate Amazon S3 into their applications, leveraging its robust storage capabilities to store and retrieve data efficiently. ILLA Cloud simplifies the integration process, allowing developers to seamlessly connect to Amazon S3 and utilize its powerful features, such as data encryption, versioning, access controls, and seamless scalability. With the integration of Amazon S3 on ILLA Cloud, developers can enhance their applications with reliable and scalable storage solutions, enabling them to focus on building innovative and data-driven experiences.

Create Amazon S3 API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Amazon S3 from the API list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Amazon S3 will display as shown.

amazon_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Amazon S3 from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Amazon S3 API.

amazon_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Bucket nameoptionala unique identifier that represents a storage container in Amazon S3. It provides a logical separation for organizing and accessing your files
S3 ACL for uploaded filesoptionalallows you to define fine-grained access permissions for files within your bucket. It specifies who can perform specific operations, such as reading, writing, or deleting files.
Regionrequiredgeographical location where your Amazon S3 bucket is stored. It determines the physical location of your data and can impact factors like latency and data transfer costs.
Custom S3 endpointoptionalenables you to configure a specific endpoint URL for accessing your Amazon S3 resources. It can be useful for scenarios where you want to use a custom domain or integrate with a CDN (Content Delivery Network).
Access keyrequiredcredentials that authenticate your requests to access Amazon S3
Secret access keyrequiredgenerated when you create an IAM (Identity and Access Management) user or an AWS (Amazon Web Services) access key pair.

Create Actions​

We have created an Amazon S3 resource, we can add the action by selecting Amazon S3 from the action list and choosing the Create action button.

amazon_resource_list

Now we have added the Amazon server as an action to our building page.

amazon

Configure Amazon S3​

Overview​

Method NameDescription
Action Typelist all objects in a bucket, read an object, download an object, delete an object, delete multiple objects, upload data, upload multiple data
Bucket namea unique identifier that represents a storage container in Amazon S3.
Transformertransforming data into the style you like using JavaScript

List all objects in a bucket​

retrieve a list of all objects stored within a specific bucket.

Input

PropertiesRequiredDescription
Prefix to filter resultsoptionalfilter the results to include only objects whose key (name) begins with a specific prefix
Delimiteroptionalspecify a character that separates object key hierarchies
Generate Signed URLoptionalwhether to generate a time-limited URL that provides temporary access to a specific object
Max Keysoptionallimit the maximum number of objects returned in the response

For example, to get all objects in the database.

Output

return an array of objects, each including at least one objectKey property.

amazon_list_all_data

Use {{s31.data}} to get all returned data.

amazon_list_all_code

Read an object​

retrieve the contents of a specific object stored within a bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to get the content of document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of a document

amazon_read_data1

amazon_read_data2

Use {{s31.data}} to get the returned data.

amazon_read_code

Download an object​

retrieve the contents of a specific object stored within a bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to download the document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of a document and download the document to local

amazon_read_data1

Delete an object​

deletes a single object from an S3 bucket.

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to delete the document '1111.txt', put 1111.txt for Object key.

Output

return the content and metadata of the deleted document

amazon_delete_data

amazon_delete_data1

Delete multiple objects​

deletes multiple objects simultaneously from an S3 bucket

Input

PropertiesRequiredDescription
Object Keyrequiredthe name or path of the object within the bucket
Generate Signed URLoptionalgenerate a time-limited URL that provides temporary access to a specific object

For example, to delete multiple documents, put {{["images.jpeg", "images-1.png"]}} for Object key.

Output

return the content and metadata of the deleted documents

amazon_delete2_data1

amazon_delete2_data2

Upload data​

uploading an object into a bucket

Input

PropertiesRequiredDescription
Content TyperequiredMIME type of object you are uploading.
Upload object namerequiredthe name of the object you are uploading.
Upload datarequiredthe data you want to upload to Amazon S3.
Timeout for uploading a file (Minute)optionalthe uploading time in minutes before the uploading process is stopped by a timeout error

For example, to delete multiple documents, put text for content type, text.txt for upload object name, and text for upload data.

Output

return the message of whether the document is uploaded successfully

amazon_upload_data1

amazon_upload_data2

Upload multiple data​

upload a list of objects into a bucket

Input

PropertiesRequiredDescription
Content TyperequiredMIME type of object you are uploading.
Upload object name listrequireda list of names of the objects you are uploading.
Upload data listrequireda list of the data you want to upload to Amazon S3.
Timeout for uploading a file (Minute)optionalthe uploading time in minutes before the uploading process is stopped by a timeout error

For example, to delete multiple documents, put text for content type, {{['text.txt', 'text2.txt']}} for upload object name list, and {{['text', 'text2']}} for upload data list.

Output

return the message of whether the documents are uploaded successfully

amazon_upload_data1

amazon_upload_data2

+ + \ No newline at end of file diff --git a/zh/appwrite/index.html b/zh/appwrite/index.html index 1969b2f946..dd54edec0c 100644 --- a/zh/appwrite/index.html +++ b/zh/appwrite/index.html @@ -10,14 +10,14 @@ - - + +
-

Appwrite

Appwrite in Illa is a database integration that allows you to connect and interact with a Appwrite database. Appwrite is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Appwrite integration in Illa, you can query, insert, update, and delete data from a Appwrite database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Appwrite database.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Appwrite in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Appwrite, visit their website at https://Appwrite.io/ Let’s begin!

Set up your Back end on Appwrite​

After signing into your Appwrite account, on the Appwrite dashboard, click Create project and set the name to First Project.

app_create_project

Then we can navigate to the project page. Appwrite provides multiple platforms for building your app as well as integrations.

app_platforms

Here we choose Web App as an example.

After creating our Web app project, we may go to the database page since we only use Appwrite as a database integration so far.

app_dashboard

Then we may create database and create collections within the database

app_create_database +

Appwrite

Appwrite in Illa is a database integration that allows you to connect and interact with a Appwrite database. Appwrite is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Appwrite integration in Illa, you can query, insert, update, and delete data from a Appwrite database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Appwrite database.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Appwrite in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Appwrite, visit their website at https://Appwrite.io/ Let’s begin!

Set up your Back end on Appwrite​

After signing into your Appwrite account, on the Appwrite dashboard, click Create project and set the name to First Project.

app_create_project

Then we can navigate to the project page. Appwrite provides multiple platforms for building your app as well as integrations.

app_platforms

Here we choose Web App as an example.

After creating our Web app project, we may go to the database page since we only use Appwrite as a database integration so far.

app_dashboard

Then we may create database and create collections within the database

app_create_database From here we may create attributes and data in the collection.

app_create_data

In order to retrieve documents by attributes, we need to make corresponding indexes for each attributes.

app_create_index

This database is now ready for you to integrate with Illa.

Create Appwrite​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select Resources on the top of the page, and click Create New button.

external_resource

Select Appwrite from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click Test Connection to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Appwrite will display as shown.

app_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the App page, and navigate to the Action List at the bottom of the page. Click new, then select Appwrite from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click Test Connection to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Appwrite database.

app_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostrequiredThe URL or IP address for your database
Database IDrequiredunique identifier assigned to each database created within Appwrite
Project IDrequiredunique identifier that represents your entire Appwrite project
API keyrequireda secret token that serves as a form of authentication when making API requests to the Appwrite server

To find the required Host, Database ID, Project ID, and API key in Appwrite, we first go to the setting button at the bottom left corner of the project page.

Copying the project ID for project ID and API Endpoint for Host in the Appwrite configuration in Illa.

app_setting

Then we may click the View API Keys button on the same page. If you have not created an API for this project, click Create API Key button and select only Database folder since that’s what we will be using from Appwrite.

app_api_key

Copy the API Key Secret for API key in Illa configuration. It can be copied for these two spots.

app_key_secret

What we have left is the Database ID which we can find in the Database Page. Copying it and paste it at the Appwrite Configuration in Illa.

app_database

The final product should look something like this.

app_final_config

Create Actions​

We have created a Appwrite resource, we can add the action by selecting Appwrite from action list and choosing the Create action button.

app_resource_list

Now we have added the Appwrite server as an action to our building page.

app

Configure Appwrite​

Overview​

Method NameDescription
MethodCreate a document, Get a document, Update a document, Delete a document, List documents
Collection IDa unique identifier assigned to a database collection
Transformertransforming data into the style you like using JavaScript

Create a document​

create a new document in a collection

Input

PropertiesRequiredDescription
Document IDrequireda unique identifier assigned to a database collection document
Dataoptionalan object containing the fields and values of the new document.

For example, to create a new document in a collection with two fields - name and age, you can use 1 as document ID and {{ {"Name": "David", "Age": 18}}} for data.

Output

a response object that includes the ID of the newly created document, as well as additional metadata such as the date and time of creation.

app_create_code

Get a document​

retrieve a specific document from a collection in the database

Input

PropertiesRequiredDescription
Document IDrequireda unique identifier assigned to a database collection document

For example, we can get the document with id 1.

Output

a response object that includes the data of the requested document

app_get_data

Use {{Appwrite1.data}} to get all returned value.

app_get_code

Update a document​

update the data of an existing document in a collection.

Input

PropertiesRequiredDescription
Document IDrequireda unique identifier assigned to a database collection document
DataoptionalAn object containing the updated fields and values that you want to assign to the document.

For example, to update a document in a collection using the updateDocument method, you can put 1 for document id and {{{"Name":"Fred"}}} for data.

Output

a response object that includes the data of the requested document

app_update)data

Delete a document​

delete a specific document from a collection in the database

Input

PropertiesRequiredDescription
Document IDrequireda unique identifier assigned to a database collection document

For example, we can delete the document with id 1.

Output

a response object that confirms the successful deletion of the document.

app_delete_data

List document​

retrieve multiple documents from a collection in the database

Input

PropertiesRequiredDescription
Filteroptionaldefine conditions to filter the documents based on specific fields and values
Order byoptionalspecify the field by which the resulting documents should be sorted
Limitoptionalrestrict the number of documents returned in the result set

For example, to list all the documents with Name = James.

Output

An array of documents that satisfy the filter.

app_list_data

Use {{Appwrite1.data[0].documents}} to get returned value.

app_list_code

- - + + \ No newline at end of file diff --git a/zh/assets/js/2ef1edda.2037dee4.js b/zh/assets/js/2ef1edda.ead3a46b.js similarity index 97% rename from zh/assets/js/2ef1edda.2037dee4.js rename to zh/assets/js/2ef1edda.ead3a46b.js index 0eb0d57f57..9f8badf194 100644 --- a/zh/assets/js/2ef1edda.2037dee4.js +++ b/zh/assets/js/2ef1edda.ead3a46b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[109],{9613:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>f});var r=n(9496);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),p=c(n),m=a,f=p["".concat(s,".").concat(m)]||p[m]||d[m]||o;return n?r.createElement(f,l(l({ref:t},u),{},{components:n})):r.createElement(f,l({ref:t},u))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[p]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>d,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var r=n(8028),a=(n(9496),n(9613));const o={title:"Response",Description:"Use the Response node to send data back to a WebHook request"},l=void 0,i={unversionedId:"illa-flow-response",id:"illa-flow-response",title:"Response",description:"Introduction",source:"@site/docs/illa-flow-response.mdx",sourceDirName:".",slug:"/illa-flow-response",permalink:"/zh/illa-flow-response",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/i18n/zh/docusaurus-plugin-content-docs/current/illa-flow-response.mdx",tags:[],version:"current",frontMatter:{title:"Response",Description:"Use the Response node to send data back to a WebHook request"},sidebar:"tutorialSidebar",previous:{title:"WebHook",permalink:"/zh/illa-flow-webhook"},next:{title:"V 4.8",permalink:"/zh/4-8"}},s={},c=[{value:"Introduction",id:"introduction",level:2},{value:"Parameters",id:"parameters",level:3}],u={toc:c},p="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(p,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"introduction"},"Introduction"),(0,a.kt)("p",null,"When you expect to return data after a certain node has finished executing, you can use the Response node."),(0,a.kt)("p",null,"You can add different responses for different scenarios, which will be returned based on the actual execution result."),(0,a.kt)("p",null,"In the case of the same execution conditions (such as several parallel running links that all succeed), when adding Response nodes separately, we will only return the data from the first Response node that has finished running."),(0,a.kt)("div",{style:{position:"relative",paddingBottom:"calc(56.81216931216932% + 41px)",height:0}},(0,a.kt)("iframe",{src:"https://demo.arcade.software/jLmr2LN2T0cYwvYaeB3C?embed&show_copy_link=true",frameborder:"1",loading:"lazy",allowfullscreen:"true",style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",colorScheme:"light"}})),(0,a.kt)("h3",{id:"parameters"},"Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"th"},"Property name")),(0,a.kt)("th",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"th"},"Description")))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Status code"),(0,a.kt)("td",{parentName:"tr",align:null},"It will be returned as the status of the request.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Location"),(0,a.kt)("td",{parentName:"tr",align:null},"In the case of a 307 or 308 status code, you can set the redirect URL in the Location header. When the browser receives this status code, it will automatically redirect to the specified URL.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Response body"),(0,a.kt)("td",{parentName:"tr",align:null},"You can configure it to return JSON, Text, or not return any data. JSON, such as",(0,a.kt)("inlineCode",{parentName:"td"},'{"a":1, "b":2}'),"; Text, can be used to return String or numeric values. For string values, it can be a simple text like",(0,a.kt)("inlineCode",{parentName:"td"},"Hello world"),". For numeric values, they need to be enclosed in double curly braces, like",(0,a.kt)("inlineCode",{parentName:"td"},"{{5}}"),".")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Response headers"),(0,a.kt)("td",{parentName:"tr",align:null},"Used to set parameters in response headers.")))))}d.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[109],{9613:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>f});var r=n(9496);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),p=c(n),m=a,f=p["".concat(s,".").concat(m)]||p[m]||d[m]||o;return n?r.createElement(f,l(l({ref:t},u),{},{components:n})):r.createElement(f,l({ref:t},u))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[p]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>d,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var r=n(8028),a=(n(9496),n(9613));const o={title:"Response",Description:"Use the Response node to send data back to a WebHook request"},l=void 0,i={unversionedId:"illa-flow-response",id:"illa-flow-response",title:"Response",description:"Introduction",source:"@site/docs/illa-flow-response.mdx",sourceDirName:".",slug:"/illa-flow-response",permalink:"/zh/illa-flow-response",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/i18n/zh/docusaurus-plugin-content-docs/current/illa-flow-response.mdx",tags:[],version:"current",frontMatter:{title:"Response",Description:"Use the Response node to send data back to a WebHook request"},sidebar:"tutorialSidebar",previous:{title:"WebHook",permalink:"/zh/illa-flow-webhook"},next:{title:"V 4.9",permalink:"/zh/4-9"}},s={},c=[{value:"Introduction",id:"introduction",level:2},{value:"Parameters",id:"parameters",level:3}],u={toc:c},p="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(p,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"introduction"},"Introduction"),(0,a.kt)("p",null,"When you expect to return data after a certain node has finished executing, you can use the Response node."),(0,a.kt)("p",null,"You can add different responses for different scenarios, which will be returned based on the actual execution result."),(0,a.kt)("p",null,"In the case of the same execution conditions (such as several parallel running links that all succeed), when adding Response nodes separately, we will only return the data from the first Response node that has finished running."),(0,a.kt)("div",{style:{position:"relative",paddingBottom:"calc(56.81216931216932% + 41px)",height:0}},(0,a.kt)("iframe",{src:"https://demo.arcade.software/jLmr2LN2T0cYwvYaeB3C?embed&show_copy_link=true",frameborder:"1",loading:"lazy",allowfullscreen:"true",style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",colorScheme:"light"}})),(0,a.kt)("h3",{id:"parameters"},"Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"th"},"Property name")),(0,a.kt)("th",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"th"},"Description")))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Status code"),(0,a.kt)("td",{parentName:"tr",align:null},"It will be returned as the status of the request.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Location"),(0,a.kt)("td",{parentName:"tr",align:null},"In the case of a 307 or 308 status code, you can set the redirect URL in the Location header. When the browser receives this status code, it will automatically redirect to the specified URL.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Response body"),(0,a.kt)("td",{parentName:"tr",align:null},"You can configure it to return JSON, Text, or not return any data. JSON, such as",(0,a.kt)("inlineCode",{parentName:"td"},'{"a":1, "b":2}'),"; Text, can be used to return String or numeric values. For string values, it can be a simple text like",(0,a.kt)("inlineCode",{parentName:"td"},"Hello world"),". For numeric values, they need to be enclosed in double curly braces, like",(0,a.kt)("inlineCode",{parentName:"td"},"{{5}}"),".")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Response headers"),(0,a.kt)("td",{parentName:"tr",align:null},"Used to set parameters in response headers.")))))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/zh/assets/js/42b3cfdb.3909a672.js b/zh/assets/js/42b3cfdb.3909a672.js deleted file mode 100644 index 2d6fedd94a..0000000000 --- a/zh/assets/js/42b3cfdb.3909a672.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[1808],{9613:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>y});var n=r(9496);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var i=n.createContext({}),u=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(i.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,l=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(r),f=o,y=s["".concat(i,".").concat(f)]||s[f]||d[f]||l;return r?n.createElement(y,a(a({ref:t},p),{},{components:r})):n.createElement(y,a({ref:t},p))}));function y(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var l=r.length,a=new Array(l);a[0]=f;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[s]="string"==typeof e?e:o,a[1]=c;for(var u=2;u{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>a,default:()=>d,frontMatter:()=>l,metadata:()=>c,toc:()=>u});var n=r(8028),o=(r(9496),r(9613));const l={title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog"},a="V 4.9",c={unversionedId:"4-9",id:"4-9",title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog",source:"@site/docs/4-9.mdx",sourceDirName:".",slug:"/4-9",permalink:"/zh/4-9",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/i18n/zh/docusaurus-plugin-content-docs/current/4-9.mdx",tags:[],version:"current",frontMatter:{title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog"}},i={},u=[{value:"\ud83d\udc85 Polish",id:"-polish",level:2}],p={toc:u},s="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"v-49"},"V 4.9"),(0,o.kt)("p",null,"2024.05.17"),(0,o.kt)("h2",{id:"-polish"},"\ud83d\udc85 Polish"),(0,o.kt)("p",null,"IP address updated. If your Resource does not allow external network access, you need to add the following IP to the allowlist:\n143.198.75.2\n146.190.51.14\n146.190.35.24\n64.23.134.60\n146.190.59.192"))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/42b3cfdb.3bc755f7.js b/zh/assets/js/42b3cfdb.afd5bced.js similarity index 65% rename from assets/js/42b3cfdb.3bc755f7.js rename to zh/assets/js/42b3cfdb.afd5bced.js index 60affc67c4..4828a584cc 100644 --- a/assets/js/42b3cfdb.3bc755f7.js +++ b/zh/assets/js/42b3cfdb.afd5bced.js @@ -1 +1 @@ -"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[1808],{9613:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>y});var n=r(9496);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,l=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),s=u(r),f=o,y=s["".concat(c,".").concat(f)]||s[f]||d[f]||l;return r?n.createElement(y,a(a({ref:t},p),{},{components:r})):n.createElement(y,a({ref:t},p))}));function y(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var l=r.length,a=new Array(l);a[0]=f;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[s]="string"==typeof e?e:o,a[1]=i;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>d,frontMatter:()=>l,metadata:()=>i,toc:()=>u});var n=r(8028),o=(r(9496),r(9613));const l={title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog"},a="V 4.9",i={unversionedId:"4-9",id:"4-9",title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog",source:"@site/docs/4-9.mdx",sourceDirName:".",slug:"/4-9",permalink:"/4-9",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/docs/4-9.mdx",tags:[],version:"current",frontMatter:{title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog"}},c={},u=[{value:"\ud83d\udc85 Polish",id:"-polish",level:2}],p={toc:u},s="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"v-49"},"V 4.9"),(0,o.kt)("p",null,"2024.05.17"),(0,o.kt)("h2",{id:"-polish"},"\ud83d\udc85 Polish"),(0,o.kt)("p",null,"IP address updated. If your Resource does not allow external network access, you need to add the following IP to the allowlist:\n143.198.75.2\n146.190.51.14\n146.190.35.24\n64.23.134.60\n146.190.59.192"))}d.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[1808],{9613:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>m});var n=r(9496);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,l=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),s=u(r),f=o,m=s["".concat(c,".").concat(f)]||s[f]||d[f]||l;return r?n.createElement(m,a(a({ref:t},p),{},{components:r})):n.createElement(m,a({ref:t},p))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var l=r.length,a=new Array(l);a[0]=f;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[s]="string"==typeof e?e:o,a[1]=i;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>d,frontMatter:()=>l,metadata:()=>i,toc:()=>u});var n=r(8028),o=(r(9496),r(9613));const l={title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog"},a="V 4.9",i={unversionedId:"4-9",id:"4-9",title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog",source:"@site/docs/4-9.mdx",sourceDirName:".",slug:"/4-9",permalink:"/zh/4-9",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/i18n/zh/docusaurus-plugin-content-docs/current/4-9.mdx",tags:[],version:"current",frontMatter:{title:"V 4.9",description:"ILLA Cloud V 4.9 Changelog"},sidebar:"tutorialSidebar",previous:{title:"Response",permalink:"/zh/illa-flow-response"},next:{title:"V 4.8",permalink:"/zh/4-8"}},c={},u=[{value:"\ud83d\udc85 Polish",id:"-polish",level:2}],p={toc:u},s="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"v-49"},"V 4.9"),(0,o.kt)("p",null,"2024.05.17"),(0,o.kt)("h2",{id:"-polish"},"\ud83d\udc85 Polish"),(0,o.kt)("p",null,"IP address updated. If your Resource does not allow external network access, you need to add the following IP to the allowlist:\n143.198.75.2\n146.190.51.14\n146.190.35.24\n64.23.134.60\n146.190.59.192"))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/zh/assets/js/935f2afb.a5d9cb33.js b/zh/assets/js/935f2afb.a5d9cb33.js new file mode 100644 index 0000000000..0679b0eff3 --- /dev/null +++ b/zh/assets/js/935f2afb.a5d9cb33.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"\u4e0b\u4e00\u4e2a","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"category","label":"\u6784\u5efa\u5e94\u7528\u7a0b\u5e8f","items":[{"type":"category","label":"\u7ec4\u4ef6","items":[{"type":"link","label":"Bar progress","href":"/zh/bar-progress","docId":"bar-progress"},{"type":"link","label":"Button","href":"/zh/button","docId":"button"},{"type":"link","label":"Cascader","href":"/zh/cascader","docId":"cascader"},{"type":"link","label":"Circle progress","href":"/zh/circle-progress","docId":"circle-progress"},{"type":"link","label":"Container","href":"/zh/container","docId":"container"},{"type":"link","label":"Data Grid","href":"/zh/data-grid","docId":"data-grid"},{"type":"link","label":"Date","href":"/zh/date","docId":"date"},{"type":"link","label":"Date Range","href":"/zh/date-range","docId":"date-range"},{"type":"link","label":"Date Time","href":"/zh/date-time","docId":"date-time"},{"type":"link","label":"Divider","href":"/zh/divider","docId":"divider"},{"type":"link","label":"Editable Text","href":"/zh/editable-text","docId":"editable-text"},{"type":"link","label":"Event calendar","href":"/zh/event-calendar","docId":"event-calendar"},{"type":"link","label":"Form","href":"/zh/form","docId":"form"},{"type":"link","label":"Icon","href":"/zh/icon","docId":"icon"},{"type":"link","label":"Image","href":"/zh/image","docId":"image"},{"type":"link","label":"Input","href":"/zh/input","docId":"input"},{"type":"link","label":"List","href":"/zh/list","docId":"list"},{"type":"link","label":"Grid list","href":"/zh/grid-list","docId":"grid-list"},{"type":"link","label":"Menu","href":"/zh/menu","docId":"menu"},{"type":"link","label":"Modal","href":"/zh/modal","docId":"modal"},{"type":"link","label":"Multi-select","href":"/zh/multi-select","docId":"multi-select"},{"type":"link","label":"Number Input","href":"/zh/number-input","docId":"number-input"},{"type":"link","label":"Page","href":"/zh/page","docId":"page"},{"type":"link","label":"PDF","href":"/zh/pdf","docId":"pdf"},{"type":"link","label":"Radio button","href":"/zh/radio-button","docId":"radio-button"},{"type":"link","label":"Radio group","href":"/zh/radio-group","docId":"radio-group"},{"type":"link","label":"Rate","href":"/zh/rate","docId":"rate"},{"type":"link","label":"Select","href":"/zh/select","docId":"select"},{"type":"link","label":"Statistics","href":"/zh/statistics","docId":"statistics"},{"type":"link","label":"Switch","href":"/zh/switch","docId":"switch"},{"type":"link","label":"Table","href":"/zh/table","docId":"table"},{"type":"link","label":"Tabs","href":"/zh/tabs","docId":"tabs"},{"type":"link","label":"Text","href":"/zh/text","docId":"text"},{"type":"link","label":"Text area Input","href":"/zh/text-area-input","docId":"text-area-input"},{"type":"link","label":"Time Picker","href":"/zh/time-picker","docId":"time-picker"},{"type":"link","label":"Time Range","href":"/zh/time-range","docId":"time-range"},{"type":"link","label":"Timeline","href":"/zh/timeline","docId":"timeline"},{"type":"link","label":"Upload","href":"/zh/upload","docId":"upload"},{"type":"link","label":"Video","href":"/zh/video","docId":"video"}],"collapsed":true,"collapsible":true},{"type":"category","label":"\u8d44\u6e90","items":[{"type":"link","label":"Airtable","href":"/zh/airtable","docId":"airtable"},{"type":"link","label":"Amazon S3","href":"/zh/amazons3","docId":"amazons3"},{"type":"link","label":"Appwrite","href":"/zh/appwrite","docId":"appwrite"},{"type":"link","label":"ClickHouse","href":"/zh/clickhouse","docId":"clickhouse"},{"type":"link","label":"Elastic Search","href":"/zh/elastic-search","docId":"elastic-search"},{"type":"link","label":"Firebase","href":"/zh/firebase","docId":"firebase"},{"type":"link","label":"Hugging Face API","href":"/zh/hugging-face-api","docId":"hugging-face-api"},{"type":"link","label":"Hugging Face Endpoint","href":"/zh/hugging-face-endpoint","docId":"hugging-face-endpoint"},{"type":"link","label":"Hydra","href":"/zh/hydra","docId":"hydra"},{"type":"link","label":"MariaDB","href":"/zh/mariadb","docId":"mariadb"},{"type":"link","label":"Microsoft SQL","href":"/zh/microsoft-sql","docId":"microsoft-sql"},{"type":"link","label":"MongoDB","href":"/zh/mongodb","docId":"mongodb"},{"type":"link","label":"MySQL","href":"/zh/mysql","docId":"mysql"},{"type":"link","label":"Neon","href":"/zh/neon","docId":"neon"},{"type":"link","label":"Oracle DB","href":"/zh/oracledb","docId":"oracledb"},{"type":"link","label":"PostgreSQL","href":"/zh/postgresql","docId":"postgresql"},{"type":"link","label":"Redis","href":"/zh/redis","docId":"redis"},{"type":"link","label":"REST API","href":"/zh/restapi","docId":"restapi"},{"type":"link","label":"Snowflake","href":"/zh/snowflake","docId":"snowflake"},{"type":"link","label":"Supabase DB","href":"/zh/supabase","docId":"supabase"},{"type":"link","label":"TiDB","href":"/zh/tidb","docId":"tidb"},{"type":"link","label":"Transformer","href":"/zh/transformer","docId":"transformer"},{"type":"link","label":"Upstash","href":"/zh/upstash","docId":"upstash"}],"collapsed":true,"collapsible":true},{"type":"category","label":"JavaScript \u548c\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f","items":[{"type":"link","label":"Run Script","href":"/zh/run-script","docId":"run-script"},{"type":"link","label":"Event handler","href":"/zh/event-handler","docId":"event-handler"}],"collapsed":true,"collapsible":true}],"collapsed":true,"collapsible":true,"href":"/zh/"},{"type":"link","label":"Server-side pagination","href":"/zh/server-side-pagination","docId":"server-side-pagination"},{"type":"link","label":"Self-hosted deployment","href":"/zh/self-hosted-deployment","docId":"self-hosted-deployment"},{"type":"category","label":"branding","items":[{"type":"link","label":"Custom domain","href":"/zh/custom-domain","docId":"custom-domain"}],"collapsed":true,"collapsible":true},{"type":"category","label":"ILLA with AI","items":[{"type":"link","label":"AI Agent","href":"/zh/ai-agent","docId":"ai-agent"}],"collapsed":true,"collapsible":true},{"type":"category","label":"illa_flow","items":[{"type":"link","label":"About ILLA Flow","href":"/zh/illa-flow-introduction","docId":"illa-flow-introduction"},{"type":"link","label":"WebHook","href":"/zh/illa-flow-webhook","docId":"illa-flow-webhook"},{"type":"link","label":"Response","href":"/zh/illa-flow-response","docId":"illa-flow-response"}],"collapsed":true,"collapsible":true},{"type":"category","label":"\u66f4\u65b0\u65e5\u5fd7","items":[{"type":"link","label":"V 4.9","href":"/zh/4-9","docId":"4-9"},{"type":"link","label":"V 4.8","href":"/zh/4-8","docId":"4-8"},{"type":"link","label":"V 4.5","href":"/zh/4-5","docId":"4-5"},{"type":"link","label":"V 4.4","href":"/zh/4-4","docId":"4-4"},{"type":"link","label":"V 4.3.6","href":"/zh/4-3-6","docId":"4-3-6"},{"type":"link","label":"V 4.3","href":"/zh/4-3","docId":"4-3"},{"type":"link","label":"V 4.2","href":"/zh/4-2","docId":"4-2"},{"type":"link","label":"V 4.1","href":"/zh/4-1","docId":"4-1"},{"type":"link","label":"V 4.0","href":"/zh/4-0","docId":"4-0"},{"type":"link","label":"V 3.5","href":"/zh/3-5","docId":"3-5"},{"type":"link","label":"V 3.4","href":"/zh/3-4","docId":"3-4"},{"type":"link","label":"V 3.3","href":"/zh/3-3","docId":"3-3"}],"collapsed":true,"collapsible":true},{"type":"category","label":"illa_policy","items":[{"type":"link","label":"Privacy Policy","href":"/zh/privacy-policy","docId":"privacy-policy"},{"type":"link","label":"Terms of Service","href":"/zh/terms-of-service","docId":"terms-of-service"}],"collapsed":true,"collapsible":true}]},"docs":{"3-3":{"id":"3-3","title":"V 3.3","description":"ILLA Cloud V 3.3 Changelog","sidebar":"tutorialSidebar"},"3-4":{"id":"3-4","title":"V 3.4","description":"ILLA Cloud V 3.4 Changelog","sidebar":"tutorialSidebar"},"3-5":{"id":"3-5","title":"V 3.5","description":"ILLA Cloud V 3.5 Changelog","sidebar":"tutorialSidebar"},"4-0":{"id":"4-0","title":"V 4.0","description":"ILLA Cloud V 4.0 Changelog","sidebar":"tutorialSidebar"},"4-1":{"id":"4-1","title":"V 4.1","description":"ILLA Cloud V 4.1 Changelog","sidebar":"tutorialSidebar"},"4-2":{"id":"4-2","title":"V 4.2","description":"ILLA Cloud V 4.2 Changelog","sidebar":"tutorialSidebar"},"4-3":{"id":"4-3","title":"V 4.3","description":"ILLA Cloud V 4.3 Changelog","sidebar":"tutorialSidebar"},"4-3-6":{"id":"4-3-6","title":"V 4.3.6","description":"ILLA Cloud V 4.3.6 Changelog","sidebar":"tutorialSidebar"},"4-4":{"id":"4-4","title":"V 4.4","description":"ILLA Cloud V 4.4 Changelog","sidebar":"tutorialSidebar"},"4-5":{"id":"4-5","title":"V 4.5","description":"ILLA Cloud V 4.5 Changelog","sidebar":"tutorialSidebar"},"4-8":{"id":"4-8","title":"V 4.8","description":"ILLA Cloud V 4.8 Changelog","sidebar":"tutorialSidebar"},"4-9":{"id":"4-9","title":"V 4.9","description":"ILLA Cloud V 4.9 Changelog","sidebar":"tutorialSidebar"},"about-illa":{"id":"about-illa","title":"About ILLA","description":"ILLA is an open-source low-code platform for developers to build and deploy internal tools remarkably fast.","sidebar":"tutorialSidebar"},"ai-agent":{"id":"ai-agent","title":"AI Agent","description":"Customize the AI Agent according to your needs, limiting the behavior of the GPT model to generate content as per your requirements. Integrate the AI Agent into the ILLA App to make your app more intelligent.","sidebar":"tutorialSidebar"},"airtable":{"id":"airtable","title":"Airtable","description":"Learn how to connect your Airtable API to ILLA Cloud and create apps that can query, manipulate, and display data","sidebar":"tutorialSidebar"},"amazons3":{"id":"amazons3","title":"Amazon S3","description":"Learn how to connect and interact with your Amazon S3 API using ILLA Cloud\'s database integration feature.","sidebar":"tutorialSidebar"},"appwrite":{"id":"appwrite","title":"Appwrite","description":"Learn how to connect and interact with Appwrite database using ILLA Cloud.","sidebar":"tutorialSidebar"},"bar-progress":{"id":"bar-progress","title":"Bar progress","description":"Learn how to use the bar progress component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"button":{"id":"button","title":"Button","description":"Learn how to use the button component in ILLA Cloud.","sidebar":"tutorialSidebar"},"cascader":{"id":"cascader","title":"Cascader","description":"Learn how to customize and control the Cascader options in ILLA Cloud.","sidebar":"tutorialSidebar"},"circle-progress":{"id":"circle-progress","title":"Circle progress","description":"Learn how to use the circle progress component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"clickhouse":{"id":"clickhouse","title":"ClickHouse","description":"Learn how to use ILLA Cloud to access and work with ClickHouse data.","sidebar":"tutorialSidebar"},"container":{"id":"container","title":"Container","description":"Learn how to use ILLA Container to group reltated components together in a card","sidebar":"tutorialSidebar"},"custom-domain":{"id":"custom-domain","title":"Custom domain","description":"You can access your ILLA Cloud team through your own domain name by customizing it.","sidebar":"tutorialSidebar"},"data-grid":{"id":"data-grid","title":"Data Grid","description":"A fast and extendable react data table and react data grid with blazing fast performance.","sidebar":"tutorialSidebar"},"date":{"id":"date","title":"Date","description":"Learn how to use the date component to add a calendar picker to ILLA app.","sidebar":"tutorialSidebar"},"date-range":{"id":"date-range","title":"Date Range","description":"Learn how to use the Date Range component from ILLA Cloud to let users select a start and end date.","sidebar":"tutorialSidebar"},"date-time":{"id":"date-time","title":"Date Time","description":"Discover how to use the Date Time component from ILLA Cloud to enable users to pick a date and time.","sidebar":"tutorialSidebar"},"divider":{"id":"divider","title":"Divider","description":"Learn how to use the divider component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"editable-text":{"id":"editable-text","title":"Editable Text","description":"Learn how to use the Editable Text component to create and customize text fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"elastic-search":{"id":"elastic-search","title":"Elastic Search","description":"Use ILLA Cloud to connect and interact with your Elastic Search data.","sidebar":"tutorialSidebar"},"event-calendar":{"id":"event-calendar","title":"Event calendar","description":"Learn how to use the event calendar component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"event-handler":{"id":"event-handler","title":"Event handler","description":"Event handlers are an integral part of refining your internal tool usage logic","sidebar":"tutorialSidebar"},"firebase":{"id":"firebase","title":"Firebase","description":"Discover how to connect and interact with Firebase API using ILLA Cloud\'s integration feature.","sidebar":"tutorialSidebar"},"form":{"id":"form","title":"Form","description":"Learn how to use the form component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"grid-list":{"id":"grid-list","title":"Grid list","description":"Display your items as a grid rather than a normal list of items that come one after the next","sidebar":"tutorialSidebar"},"hugging-face-api":{"id":"hugging-face-api","title":"Hugging Face API","description":"Learn how to use Hugging Face API in ILLA","sidebar":"tutorialSidebar"},"hugging-face-endpoint":{"id":"hugging-face-endpoint","title":"Hugging Face Endpoint","description":"Learn how to use Hugging Face Endpoint in ILLA","sidebar":"tutorialSidebar"},"hydra":{"id":"hydra","title":"Hydra","description":"Use ILLA Cloud to access and work with your Hydra data. Create apps that can query, manipulate, and display data.","sidebar":"tutorialSidebar"},"icon":{"id":"icon","title":"Icon","description":"Learn how to use the icon component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"illa-flow-introduction":{"id":"illa-flow-introduction","title":"About ILLA Flow","description":"What is ILLA Flow","sidebar":"tutorialSidebar"},"illa-flow-response":{"id":"illa-flow-response","title":"Response","description":"Introduction","sidebar":"tutorialSidebar"},"illa-flow-webhook":{"id":"illa-flow-webhook","title":"WebHook","description":"What is WebHook","sidebar":"tutorialSidebar"},"image":{"id":"image","title":"Image","description":"Learn how to use the Image component to upload and customize image for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"input":{"id":"input","title":"Input","description":"Learn how to use the input component to create and customize text fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"list":{"id":"list","title":"List","description":"The List component allows you to create repeatable rows of data whose look and feel are defined by you.","sidebar":"tutorialSidebar"},"mariadb":{"id":"mariadb","title":"MariaDB","description":"Connect your MariaDB database to ILLA Cloud and create apps that can query, manipulate, and display data. Read this guide to learn how.","sidebar":"tutorialSidebar"},"menu":{"id":"menu","title":"Menu","description":"Learn how to use the menu component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"microsoft-sql":{"id":"microsoft-sql","title":"Microsoft SQL","description":"Learn how to use ILLA Cloud to access and work with Microsoft SQL data. Build apps, visualize data, and automate workflows with ILLA Cloud.","sidebar":"tutorialSidebar"},"modal":{"id":"modal","title":"Modal","description":"Learn how to use the modal component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"mongodb":{"id":"mongodb","title":"MongoDB","description":"Learn how to use ILLA Cloud to build apps with MongoDB. Explore data querying, manipulation, and visualization features.","sidebar":"tutorialSidebar"},"multi-select":{"id":"multi-select","title":"Multi-select","description":"A drop-down component that displays all options, supports multiple selections","sidebar":"tutorialSidebar"},"mysql":{"id":"mysql","title":"MySQL","description":"Connect and interact with a MySQL database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"neon":{"id":"neon","title":"Neon","description":"Connect your Neon database to ILLA Cloud and create apps that can query, manipulate, and display data. This guide will show you how.","sidebar":"tutorialSidebar"},"number-input":{"id":"number-input","title":"Number Input","description":"Learn how to use the number input component to create and customize number input fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"oracledb":{"id":"oracledb","title":"Oracle DB","description":"Learn how to use ILLA Cloud\'s database integration feature to connect and interact with your OracleDB database in a few simple steps.","sidebar":"tutorialSidebar"},"page":{"id":"page","title":"Page","description":"---","sidebar":"tutorialSidebar"},"pdf":{"id":"pdf","title":"PDF","description":"Learn how to use the PDF component to upload and customize pdf files for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"postgresql":{"id":"postgresql","title":"PostgreSQL","description":"Connect and interact with a PostgreSQL database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"privacy-policy":{"id":"privacy-policy","title":"Privacy Policy","description":"Privacy Policy","sidebar":"tutorialSidebar"},"radio-button":{"id":"radio-button","title":"Radio button","description":"Display all options on radio buttons and support to select 1 option.","sidebar":"tutorialSidebar"},"radio-group":{"id":"radio-group","title":"Radio group","description":"Displays all options on radio group and supports to select 1 option.","sidebar":"tutorialSidebar"},"rate":{"id":"rate","title":"Rate","description":"Learn how to use the rate component to create and customize the rate value for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"redis":{"id":"redis","title":"Redis","description":"Discover how to connect and interact with your Redis database using ILLA Cloud\'s database integration feature. Check out this guide for more details.","sidebar":"tutorialSidebar"},"restapi":{"id":"restapi","title":"REST API","description":"Learn how to use ILLA Cloud to access and work with REST API data. Build apps, visualize data, and automate workflows with ILLA Cloud.","sidebar":"tutorialSidebar"},"run-script":{"id":"run-script","title":"Run Script","description":"By triggering the Run Script through an Event handler, you can achieve sequential execution of operations and perform different actions based on different condition.","sidebar":"tutorialSidebar"},"select":{"id":"select","title":"Select","description":"Displays all options in dropdown box and supports to select 1 option.","sidebar":"tutorialSidebar"},"self-hosted-deployment":{"id":"self-hosted-deployment","title":"Self-hosted deployment","description":"ILLA Builder provides a seamless deployment experience that allows you to deploy ILLA Builder at an astonishing speed within your own Virtual Private Cloud (VPC).","sidebar":"tutorialSidebar"},"server-side-pagination":{"id":"server-side-pagination","title":"Server-side pagination","description":"When dealing with large amounts of data, using server-side pagination in your queries can greatly improve efficiency. In this article, you will learn how to utilize server-side pagination in ILLA Cloud.","sidebar":"tutorialSidebar"},"snowflake":{"id":"snowflake","title":"Snowflake","description":"Connect and interact with a Snowflake database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"statistics":{"id":"statistics","title":"Statistics","description":"Learn how to use the statistics component to create and customize the statistic value for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"supabase":{"id":"supabase","title":"Supabase DB","description":"Connect to Supabase instance and show Supabase DB data on components","sidebar":"tutorialSidebar"},"switch":{"id":"switch","title":"Switch","description":"Learn how to use the Switch component in ILLA Cloud to create a user interface that lets users switch between two options. See examples and properties of Switch.","sidebar":"tutorialSidebar"},"table":{"id":"table","title":"Table","description":"Learn how to use the table component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"tabs":{"id":"tabs","title":"Tabs","description":"Learn how to use the tabs component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"terms-of-service":{"id":"terms-of-service","title":"Terms of Service","description":"Terms of Service","sidebar":"tutorialSidebar"},"text":{"id":"text","title":"Text","description":"Display data with text component","sidebar":"tutorialSidebar"},"text-area-input":{"id":"text-area-input","title":"Text area Input","description":"Learn how to use the Text area input component to create and customize text area input fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"tidb":{"id":"tidb","title":"TiDB","description":"Use ILLA Cloud to access and work with your TiDB data. Create apps that can query, manipulate, and display data. Follow this guide to get started.","sidebar":"tutorialSidebar"},"time-picker":{"id":"time-picker","title":"Time Picker","description":"Find out how to use the Time Picker component from ILLA Cloud to let users choose a specific time from a 24 hour time UI in your projects.","sidebar":"tutorialSidebar"},"time-range":{"id":"time-range","title":"Time Range","description":"Learn how to use the Time Range component from ILLA Cloud to let users select a range of times from a 24-hour interface in your applications.","sidebar":"tutorialSidebar"},"timeline":{"id":"timeline","title":"Timeline","description":"Learn how to use the Timeline component from ILLA Cloud","sidebar":"tutorialSidebar"},"transformer":{"id":"transformer","title":"Transformer","description":"Transformer in ILLA allows user to write JavaScript to refine the application logic","sidebar":"tutorialSidebar"},"upload":{"id":"upload","title":"Upload","description":"Use the upload component to upload files from the local machines to any cloud storage","sidebar":"tutorialSidebar"},"upstash":{"id":"upstash","title":"Upstash","description":"Learn how to connect your Upstash Redis database to ILLA Cloud and create apps that can query, manipulate, and display data","sidebar":"tutorialSidebar"},"video":{"id":"video","title":"Video","description":"Learn how to use the Video component to upload and customize video for your app in ILLA Cloud.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/zh/assets/js/935f2afb.c677d60f.js b/zh/assets/js/935f2afb.c677d60f.js deleted file mode 100644 index e9554a3c80..0000000000 --- a/zh/assets/js/935f2afb.c677d60f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"\u4e0b\u4e00\u4e2a","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"category","label":"\u6784\u5efa\u5e94\u7528\u7a0b\u5e8f","items":[{"type":"category","label":"\u7ec4\u4ef6","items":[{"type":"link","label":"Bar progress","href":"/zh/bar-progress","docId":"bar-progress"},{"type":"link","label":"Button","href":"/zh/button","docId":"button"},{"type":"link","label":"Cascader","href":"/zh/cascader","docId":"cascader"},{"type":"link","label":"Circle progress","href":"/zh/circle-progress","docId":"circle-progress"},{"type":"link","label":"Container","href":"/zh/container","docId":"container"},{"type":"link","label":"Data Grid","href":"/zh/data-grid","docId":"data-grid"},{"type":"link","label":"Date","href":"/zh/date","docId":"date"},{"type":"link","label":"Date Range","href":"/zh/date-range","docId":"date-range"},{"type":"link","label":"Date Time","href":"/zh/date-time","docId":"date-time"},{"type":"link","label":"Divider","href":"/zh/divider","docId":"divider"},{"type":"link","label":"Editable Text","href":"/zh/editable-text","docId":"editable-text"},{"type":"link","label":"Event calendar","href":"/zh/event-calendar","docId":"event-calendar"},{"type":"link","label":"Form","href":"/zh/form","docId":"form"},{"type":"link","label":"Icon","href":"/zh/icon","docId":"icon"},{"type":"link","label":"Image","href":"/zh/image","docId":"image"},{"type":"link","label":"Input","href":"/zh/input","docId":"input"},{"type":"link","label":"List","href":"/zh/list","docId":"list"},{"type":"link","label":"Grid list","href":"/zh/grid-list","docId":"grid-list"},{"type":"link","label":"Menu","href":"/zh/menu","docId":"menu"},{"type":"link","label":"Modal","href":"/zh/modal","docId":"modal"},{"type":"link","label":"Multi-select","href":"/zh/multi-select","docId":"multi-select"},{"type":"link","label":"Number Input","href":"/zh/number-input","docId":"number-input"},{"type":"link","label":"Page","href":"/zh/page","docId":"page"},{"type":"link","label":"PDF","href":"/zh/pdf","docId":"pdf"},{"type":"link","label":"Radio button","href":"/zh/radio-button","docId":"radio-button"},{"type":"link","label":"Radio group","href":"/zh/radio-group","docId":"radio-group"},{"type":"link","label":"Rate","href":"/zh/rate","docId":"rate"},{"type":"link","label":"Select","href":"/zh/select","docId":"select"},{"type":"link","label":"Statistics","href":"/zh/statistics","docId":"statistics"},{"type":"link","label":"Switch","href":"/zh/switch","docId":"switch"},{"type":"link","label":"Table","href":"/zh/table","docId":"table"},{"type":"link","label":"Tabs","href":"/zh/tabs","docId":"tabs"},{"type":"link","label":"Text","href":"/zh/text","docId":"text"},{"type":"link","label":"Text area Input","href":"/zh/text-area-input","docId":"text-area-input"},{"type":"link","label":"Time Picker","href":"/zh/time-picker","docId":"time-picker"},{"type":"link","label":"Time Range","href":"/zh/time-range","docId":"time-range"},{"type":"link","label":"Timeline","href":"/zh/timeline","docId":"timeline"},{"type":"link","label":"Upload","href":"/zh/upload","docId":"upload"},{"type":"link","label":"Video","href":"/zh/video","docId":"video"}],"collapsed":true,"collapsible":true},{"type":"category","label":"\u8d44\u6e90","items":[{"type":"link","label":"Airtable","href":"/zh/airtable","docId":"airtable"},{"type":"link","label":"Amazon S3","href":"/zh/amazons3","docId":"amazons3"},{"type":"link","label":"Appwrite","href":"/zh/appwrite","docId":"appwrite"},{"type":"link","label":"ClickHouse","href":"/zh/clickhouse","docId":"clickhouse"},{"type":"link","label":"Elastic Search","href":"/zh/elastic-search","docId":"elastic-search"},{"type":"link","label":"Firebase","href":"/zh/firebase","docId":"firebase"},{"type":"link","label":"Hugging Face API","href":"/zh/hugging-face-api","docId":"hugging-face-api"},{"type":"link","label":"Hugging Face Endpoint","href":"/zh/hugging-face-endpoint","docId":"hugging-face-endpoint"},{"type":"link","label":"Hydra","href":"/zh/hydra","docId":"hydra"},{"type":"link","label":"MariaDB","href":"/zh/mariadb","docId":"mariadb"},{"type":"link","label":"Microsoft SQL","href":"/zh/microsoft-sql","docId":"microsoft-sql"},{"type":"link","label":"MongoDB","href":"/zh/mongodb","docId":"mongodb"},{"type":"link","label":"MySQL","href":"/zh/mysql","docId":"mysql"},{"type":"link","label":"Neon","href":"/zh/neon","docId":"neon"},{"type":"link","label":"Oracle DB","href":"/zh/oracledb","docId":"oracledb"},{"type":"link","label":"PostgreSQL","href":"/zh/postgresql","docId":"postgresql"},{"type":"link","label":"Redis","href":"/zh/redis","docId":"redis"},{"type":"link","label":"REST API","href":"/zh/restapi","docId":"restapi"},{"type":"link","label":"Snowflake","href":"/zh/snowflake","docId":"snowflake"},{"type":"link","label":"Supabase DB","href":"/zh/supabase","docId":"supabase"},{"type":"link","label":"TiDB","href":"/zh/tidb","docId":"tidb"},{"type":"link","label":"Transformer","href":"/zh/transformer","docId":"transformer"},{"type":"link","label":"Upstash","href":"/zh/upstash","docId":"upstash"}],"collapsed":true,"collapsible":true},{"type":"category","label":"JavaScript \u548c\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f","items":[{"type":"link","label":"Run Script","href":"/zh/run-script","docId":"run-script"},{"type":"link","label":"Event handler","href":"/zh/event-handler","docId":"event-handler"}],"collapsed":true,"collapsible":true}],"collapsed":true,"collapsible":true,"href":"/zh/"},{"type":"link","label":"Server-side pagination","href":"/zh/server-side-pagination","docId":"server-side-pagination"},{"type":"link","label":"Self-hosted deployment","href":"/zh/self-hosted-deployment","docId":"self-hosted-deployment"},{"type":"category","label":"branding","items":[{"type":"link","label":"Custom domain","href":"/zh/custom-domain","docId":"custom-domain"}],"collapsed":true,"collapsible":true},{"type":"category","label":"ILLA with AI","items":[{"type":"link","label":"AI Agent","href":"/zh/ai-agent","docId":"ai-agent"}],"collapsed":true,"collapsible":true},{"type":"category","label":"illa_flow","items":[{"type":"link","label":"About ILLA Flow","href":"/zh/illa-flow-introduction","docId":"illa-flow-introduction"},{"type":"link","label":"WebHook","href":"/zh/illa-flow-webhook","docId":"illa-flow-webhook"},{"type":"link","label":"Response","href":"/zh/illa-flow-response","docId":"illa-flow-response"}],"collapsed":true,"collapsible":true},{"type":"category","label":"\u66f4\u65b0\u65e5\u5fd7","items":[{"type":"link","label":"V 4.8","href":"/zh/4-8","docId":"4-8"},{"type":"link","label":"V 4.5","href":"/zh/4-5","docId":"4-5"},{"type":"link","label":"V 4.4","href":"/zh/4-4","docId":"4-4"},{"type":"link","label":"V 4.3.6","href":"/zh/4-3-6","docId":"4-3-6"},{"type":"link","label":"V 4.3","href":"/zh/4-3","docId":"4-3"},{"type":"link","label":"V 4.2","href":"/zh/4-2","docId":"4-2"},{"type":"link","label":"V 4.1","href":"/zh/4-1","docId":"4-1"},{"type":"link","label":"V 4.0","href":"/zh/4-0","docId":"4-0"},{"type":"link","label":"V 3.5","href":"/zh/3-5","docId":"3-5"},{"type":"link","label":"V 3.4","href":"/zh/3-4","docId":"3-4"},{"type":"link","label":"V 3.3","href":"/zh/3-3","docId":"3-3"}],"collapsed":true,"collapsible":true},{"type":"category","label":"illa_policy","items":[{"type":"link","label":"Privacy Policy","href":"/zh/privacy-policy","docId":"privacy-policy"},{"type":"link","label":"Terms of Service","href":"/zh/terms-of-service","docId":"terms-of-service"}],"collapsed":true,"collapsible":true}]},"docs":{"3-3":{"id":"3-3","title":"V 3.3","description":"ILLA Cloud V 3.3 Changelog","sidebar":"tutorialSidebar"},"3-4":{"id":"3-4","title":"V 3.4","description":"ILLA Cloud V 3.4 Changelog","sidebar":"tutorialSidebar"},"3-5":{"id":"3-5","title":"V 3.5","description":"ILLA Cloud V 3.5 Changelog","sidebar":"tutorialSidebar"},"4-0":{"id":"4-0","title":"V 4.0","description":"ILLA Cloud V 4.0 Changelog","sidebar":"tutorialSidebar"},"4-1":{"id":"4-1","title":"V 4.1","description":"ILLA Cloud V 4.1 Changelog","sidebar":"tutorialSidebar"},"4-2":{"id":"4-2","title":"V 4.2","description":"ILLA Cloud V 4.2 Changelog","sidebar":"tutorialSidebar"},"4-3":{"id":"4-3","title":"V 4.3","description":"ILLA Cloud V 4.3 Changelog","sidebar":"tutorialSidebar"},"4-3-6":{"id":"4-3-6","title":"V 4.3.6","description":"ILLA Cloud V 4.3.6 Changelog","sidebar":"tutorialSidebar"},"4-4":{"id":"4-4","title":"V 4.4","description":"ILLA Cloud V 4.4 Changelog","sidebar":"tutorialSidebar"},"4-5":{"id":"4-5","title":"V 4.5","description":"ILLA Cloud V 4.5 Changelog","sidebar":"tutorialSidebar"},"4-8":{"id":"4-8","title":"V 4.8","description":"ILLA Cloud V 4.8 Changelog","sidebar":"tutorialSidebar"},"4-9":{"id":"4-9","title":"V 4.9","description":"ILLA Cloud V 4.9 Changelog"},"about-illa":{"id":"about-illa","title":"About ILLA","description":"ILLA is an open-source low-code platform for developers to build and deploy internal tools remarkably fast.","sidebar":"tutorialSidebar"},"ai-agent":{"id":"ai-agent","title":"AI Agent","description":"Customize the AI Agent according to your needs, limiting the behavior of the GPT model to generate content as per your requirements. Integrate the AI Agent into the ILLA App to make your app more intelligent.","sidebar":"tutorialSidebar"},"airtable":{"id":"airtable","title":"Airtable","description":"Learn how to connect your Airtable API to ILLA Cloud and create apps that can query, manipulate, and display data","sidebar":"tutorialSidebar"},"amazons3":{"id":"amazons3","title":"Amazon S3","description":"Learn how to connect and interact with your Amazon S3 API using ILLA Cloud\'s database integration feature.","sidebar":"tutorialSidebar"},"appwrite":{"id":"appwrite","title":"Appwrite","description":"Learn how to connect and interact with Appwrite database using ILLA Cloud.","sidebar":"tutorialSidebar"},"bar-progress":{"id":"bar-progress","title":"Bar progress","description":"Learn how to use the bar progress component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"button":{"id":"button","title":"Button","description":"Learn how to use the button component in ILLA Cloud.","sidebar":"tutorialSidebar"},"cascader":{"id":"cascader","title":"Cascader","description":"Learn how to customize and control the Cascader options in ILLA Cloud.","sidebar":"tutorialSidebar"},"circle-progress":{"id":"circle-progress","title":"Circle progress","description":"Learn how to use the circle progress component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"clickhouse":{"id":"clickhouse","title":"ClickHouse","description":"Learn how to use ILLA Cloud to access and work with ClickHouse data.","sidebar":"tutorialSidebar"},"container":{"id":"container","title":"Container","description":"Learn how to use ILLA Container to group reltated components together in a card","sidebar":"tutorialSidebar"},"custom-domain":{"id":"custom-domain","title":"Custom domain","description":"You can access your ILLA Cloud team through your own domain name by customizing it.","sidebar":"tutorialSidebar"},"data-grid":{"id":"data-grid","title":"Data Grid","description":"A fast and extendable react data table and react data grid with blazing fast performance.","sidebar":"tutorialSidebar"},"date":{"id":"date","title":"Date","description":"Learn how to use the date component to add a calendar picker to ILLA app.","sidebar":"tutorialSidebar"},"date-range":{"id":"date-range","title":"Date Range","description":"Learn how to use the Date Range component from ILLA Cloud to let users select a start and end date.","sidebar":"tutorialSidebar"},"date-time":{"id":"date-time","title":"Date Time","description":"Discover how to use the Date Time component from ILLA Cloud to enable users to pick a date and time.","sidebar":"tutorialSidebar"},"divider":{"id":"divider","title":"Divider","description":"Learn how to use the divider component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"editable-text":{"id":"editable-text","title":"Editable Text","description":"Learn how to use the Editable Text component to create and customize text fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"elastic-search":{"id":"elastic-search","title":"Elastic Search","description":"Use ILLA Cloud to connect and interact with your Elastic Search data.","sidebar":"tutorialSidebar"},"event-calendar":{"id":"event-calendar","title":"Event calendar","description":"Learn how to use the event calendar component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"event-handler":{"id":"event-handler","title":"Event handler","description":"Event handlers are an integral part of refining your internal tool usage logic","sidebar":"tutorialSidebar"},"firebase":{"id":"firebase","title":"Firebase","description":"Discover how to connect and interact with Firebase API using ILLA Cloud\'s integration feature.","sidebar":"tutorialSidebar"},"form":{"id":"form","title":"Form","description":"Learn how to use the form component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"grid-list":{"id":"grid-list","title":"Grid list","description":"Display your items as a grid rather than a normal list of items that come one after the next","sidebar":"tutorialSidebar"},"hugging-face-api":{"id":"hugging-face-api","title":"Hugging Face API","description":"Learn how to use Hugging Face API in ILLA","sidebar":"tutorialSidebar"},"hugging-face-endpoint":{"id":"hugging-face-endpoint","title":"Hugging Face Endpoint","description":"Learn how to use Hugging Face Endpoint in ILLA","sidebar":"tutorialSidebar"},"hydra":{"id":"hydra","title":"Hydra","description":"Use ILLA Cloud to access and work with your Hydra data. Create apps that can query, manipulate, and display data.","sidebar":"tutorialSidebar"},"icon":{"id":"icon","title":"Icon","description":"Learn how to use the icon component to customize and decorate your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"illa-flow-introduction":{"id":"illa-flow-introduction","title":"About ILLA Flow","description":"What is ILLA Flow","sidebar":"tutorialSidebar"},"illa-flow-response":{"id":"illa-flow-response","title":"Response","description":"Introduction","sidebar":"tutorialSidebar"},"illa-flow-webhook":{"id":"illa-flow-webhook","title":"WebHook","description":"What is WebHook","sidebar":"tutorialSidebar"},"image":{"id":"image","title":"Image","description":"Learn how to use the Image component to upload and customize image for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"input":{"id":"input","title":"Input","description":"Learn how to use the input component to create and customize text fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"list":{"id":"list","title":"List","description":"The List component allows you to create repeatable rows of data whose look and feel are defined by you.","sidebar":"tutorialSidebar"},"mariadb":{"id":"mariadb","title":"MariaDB","description":"Connect your MariaDB database to ILLA Cloud and create apps that can query, manipulate, and display data. Read this guide to learn how.","sidebar":"tutorialSidebar"},"menu":{"id":"menu","title":"Menu","description":"Learn how to use the menu component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"microsoft-sql":{"id":"microsoft-sql","title":"Microsoft SQL","description":"Learn how to use ILLA Cloud to access and work with Microsoft SQL data. Build apps, visualize data, and automate workflows with ILLA Cloud.","sidebar":"tutorialSidebar"},"modal":{"id":"modal","title":"Modal","description":"Learn how to use the modal component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"mongodb":{"id":"mongodb","title":"MongoDB","description":"Learn how to use ILLA Cloud to build apps with MongoDB. Explore data querying, manipulation, and visualization features.","sidebar":"tutorialSidebar"},"multi-select":{"id":"multi-select","title":"Multi-select","description":"A drop-down component that displays all options, supports multiple selections","sidebar":"tutorialSidebar"},"mysql":{"id":"mysql","title":"MySQL","description":"Connect and interact with a MySQL database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"neon":{"id":"neon","title":"Neon","description":"Connect your Neon database to ILLA Cloud and create apps that can query, manipulate, and display data. This guide will show you how.","sidebar":"tutorialSidebar"},"number-input":{"id":"number-input","title":"Number Input","description":"Learn how to use the number input component to create and customize number input fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"oracledb":{"id":"oracledb","title":"Oracle DB","description":"Learn how to use ILLA Cloud\'s database integration feature to connect and interact with your OracleDB database in a few simple steps.","sidebar":"tutorialSidebar"},"page":{"id":"page","title":"Page","description":"---","sidebar":"tutorialSidebar"},"pdf":{"id":"pdf","title":"PDF","description":"Learn how to use the PDF component to upload and customize pdf files for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"postgresql":{"id":"postgresql","title":"PostgreSQL","description":"Connect and interact with a PostgreSQL database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"privacy-policy":{"id":"privacy-policy","title":"Privacy Policy","description":"Privacy Policy","sidebar":"tutorialSidebar"},"radio-button":{"id":"radio-button","title":"Radio button","description":"Display all options on radio buttons and support to select 1 option.","sidebar":"tutorialSidebar"},"radio-group":{"id":"radio-group","title":"Radio group","description":"Displays all options on radio group and supports to select 1 option.","sidebar":"tutorialSidebar"},"rate":{"id":"rate","title":"Rate","description":"Learn how to use the rate component to create and customize the rate value for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"redis":{"id":"redis","title":"Redis","description":"Discover how to connect and interact with your Redis database using ILLA Cloud\'s database integration feature. Check out this guide for more details.","sidebar":"tutorialSidebar"},"restapi":{"id":"restapi","title":"REST API","description":"Learn how to use ILLA Cloud to access and work with REST API data. Build apps, visualize data, and automate workflows with ILLA Cloud.","sidebar":"tutorialSidebar"},"run-script":{"id":"run-script","title":"Run Script","description":"By triggering the Run Script through an Event handler, you can achieve sequential execution of operations and perform different actions based on different condition.","sidebar":"tutorialSidebar"},"select":{"id":"select","title":"Select","description":"Displays all options in dropdown box and supports to select 1 option.","sidebar":"tutorialSidebar"},"self-hosted-deployment":{"id":"self-hosted-deployment","title":"Self-hosted deployment","description":"ILLA Builder provides a seamless deployment experience that allows you to deploy ILLA Builder at an astonishing speed within your own Virtual Private Cloud (VPC).","sidebar":"tutorialSidebar"},"server-side-pagination":{"id":"server-side-pagination","title":"Server-side pagination","description":"When dealing with large amounts of data, using server-side pagination in your queries can greatly improve efficiency. In this article, you will learn how to utilize server-side pagination in ILLA Cloud.","sidebar":"tutorialSidebar"},"snowflake":{"id":"snowflake","title":"Snowflake","description":"Connect and interact with a Snowflake database using ILLA Cloud. Create apps that can query, manipulate, and visualize data. Automate and optimize data workflows.","sidebar":"tutorialSidebar"},"statistics":{"id":"statistics","title":"Statistics","description":"Learn how to use the statistics component to create and customize the statistic value for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"supabase":{"id":"supabase","title":"Supabase DB","description":"Connect to Supabase instance and show Supabase DB data on components","sidebar":"tutorialSidebar"},"switch":{"id":"switch","title":"Switch","description":"Learn how to use the Switch component in ILLA Cloud to create a user interface that lets users switch between two options. See examples and properties of Switch.","sidebar":"tutorialSidebar"},"table":{"id":"table","title":"Table","description":"Learn how to use the table component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"tabs":{"id":"tabs","title":"Tabs","description":"Learn how to use the tabs component to customize your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"terms-of-service":{"id":"terms-of-service","title":"Terms of Service","description":"Terms of Service","sidebar":"tutorialSidebar"},"text":{"id":"text","title":"Text","description":"Display data with text component","sidebar":"tutorialSidebar"},"text-area-input":{"id":"text-area-input","title":"Text area Input","description":"Learn how to use the Text area input component to create and customize text area input fields for your app in ILLA Cloud.","sidebar":"tutorialSidebar"},"tidb":{"id":"tidb","title":"TiDB","description":"Use ILLA Cloud to access and work with your TiDB data. Create apps that can query, manipulate, and display data. Follow this guide to get started.","sidebar":"tutorialSidebar"},"time-picker":{"id":"time-picker","title":"Time Picker","description":"Find out how to use the Time Picker component from ILLA Cloud to let users choose a specific time from a 24 hour time UI in your projects.","sidebar":"tutorialSidebar"},"time-range":{"id":"time-range","title":"Time Range","description":"Learn how to use the Time Range component from ILLA Cloud to let users select a range of times from a 24-hour interface in your applications.","sidebar":"tutorialSidebar"},"timeline":{"id":"timeline","title":"Timeline","description":"Learn how to use the Timeline component from ILLA Cloud","sidebar":"tutorialSidebar"},"transformer":{"id":"transformer","title":"Transformer","description":"Transformer in ILLA allows user to write JavaScript to refine the application logic","sidebar":"tutorialSidebar"},"upload":{"id":"upload","title":"Upload","description":"Use the upload component to upload files from the local machines to any cloud storage","sidebar":"tutorialSidebar"},"upstash":{"id":"upstash","title":"Upstash","description":"Learn how to connect your Upstash Redis database to ILLA Cloud and create apps that can query, manipulate, and display data","sidebar":"tutorialSidebar"},"video":{"id":"video","title":"Video","description":"Learn how to use the Video component to upload and customize video for your app in ILLA Cloud.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/zh/assets/js/e260ee44.d64dedc8.js b/zh/assets/js/e260ee44.574efcd3.js similarity index 78% rename from zh/assets/js/e260ee44.d64dedc8.js rename to zh/assets/js/e260ee44.574efcd3.js index 480d3a7b94..7ddec56581 100644 --- a/zh/assets/js/e260ee44.d64dedc8.js +++ b/zh/assets/js/e260ee44.574efcd3.js @@ -1 +1 @@ -"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[7288],{9613:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>m});var n=r(9496);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,c=e.parentName,p=a(e,["components","mdxType","originalType","parentName"]),s=u(r),d=o,m=s["".concat(c,".").concat(d)]||s[d]||f[d]||i;return r?n.createElement(m,l(l({ref:t},p),{},{components:r})):n.createElement(m,l({ref:t},p))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,l=new Array(i);l[0]=d;var a={};for(var c in t)hasOwnProperty.call(t,c)&&(a[c]=t[c]);a.originalType=e,a[s]="string"==typeof e?e:o,l[1]=a;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>f,frontMatter:()=>i,metadata:()=>a,toc:()=>u});var n=r(8028),o=(r(9496),r(9613));const i={title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog"},l="V 4.8",a={unversionedId:"4-8",id:"4-8",title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog",source:"@site/docs/4-8.mdx",sourceDirName:".",slug:"/4-8",permalink:"/zh/4-8",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/i18n/zh/docusaurus-plugin-content-docs/current/4-8.mdx",tags:[],version:"current",frontMatter:{title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog"},sidebar:"tutorialSidebar",previous:{title:"Response",permalink:"/zh/illa-flow-response"},next:{title:"V 4.5",permalink:"/zh/4-5"}},c={},u=[{value:"\ud83d\udc85 Polish",id:"-polish",level:2},{value:"\ud83d\udc1b Bug fix",id:"-bug-fix",level:2}],p={toc:u},s="wrapper";function f(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"v-48"},"V 4.8"),(0,o.kt)("p",null,"2024.05.09"),(0,o.kt)("h2",{id:"-polish"},"\ud83d\udc85 Polish"),(0,o.kt)("p",null,"Optimized the AI Agent dialogue process for stronger performance during long conversations."),(0,o.kt)("h2",{id:"-bug-fix"},"\ud83d\udc1b Bug fix"),(0,o.kt)("p",null,"Fixed the occasional issue of successful login not redirecting."))}f.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[7288],{9613:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>m});var n=r(9496);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,c=e.parentName,p=a(e,["components","mdxType","originalType","parentName"]),s=u(r),d=o,m=s["".concat(c,".").concat(d)]||s[d]||f[d]||i;return r?n.createElement(m,l(l({ref:t},p),{},{components:r})):n.createElement(m,l({ref:t},p))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,l=new Array(i);l[0]=d;var a={};for(var c in t)hasOwnProperty.call(t,c)&&(a[c]=t[c]);a.originalType=e,a[s]="string"==typeof e?e:o,l[1]=a;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>f,frontMatter:()=>i,metadata:()=>a,toc:()=>u});var n=r(8028),o=(r(9496),r(9613));const i={title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog"},l="V 4.8",a={unversionedId:"4-8",id:"4-8",title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog",source:"@site/docs/4-8.mdx",sourceDirName:".",slug:"/4-8",permalink:"/zh/4-8",draft:!1,editUrl:"https://github.com/illacloud/illa-doc/edit/main/i18n/zh/docusaurus-plugin-content-docs/current/4-8.mdx",tags:[],version:"current",frontMatter:{title:"V 4.8",description:"ILLA Cloud V 4.8 Changelog"},sidebar:"tutorialSidebar",previous:{title:"V 4.9",permalink:"/zh/4-9"},next:{title:"V 4.5",permalink:"/zh/4-5"}},c={},u=[{value:"\ud83d\udc85 Polish",id:"-polish",level:2},{value:"\ud83d\udc1b Bug fix",id:"-bug-fix",level:2}],p={toc:u},s="wrapper";function f(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"v-48"},"V 4.8"),(0,o.kt)("p",null,"2024.05.09"),(0,o.kt)("h2",{id:"-polish"},"\ud83d\udc85 Polish"),(0,o.kt)("p",null,"Optimized the AI Agent dialogue process for stronger performance during long conversations."),(0,o.kt)("h2",{id:"-bug-fix"},"\ud83d\udc1b Bug fix"),(0,o.kt)("p",null,"Fixed the occasional issue of successful login not redirecting."))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/zh/assets/js/main.31d4166c.js b/zh/assets/js/main.31d4166c.js new file mode 100644 index 0000000000..898bdbce53 --- /dev/null +++ b/zh/assets/js/main.31d4166c.js @@ -0,0 +1,2 @@ +/*! For license information please see main.31d4166c.js.LICENSE.txt */ +(self.webpackChunkilla_doc=self.webpackChunkilla_doc||[]).push([[179],{2040:(e,t,n)=>{"use strict";n.d(t,{W:()=>a});var r=n(9496);function a(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},8862:(e,t,n)=>{var r={"./":1884};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=8862},1968:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(9496),a=n(8028),o=n(1889),i=n.n(o),l=n(6887);const s={"0112a6eb":[()=>n.e(4491).then(n.bind(n,4565)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/text-area-input.mdx",4565],"077b3b1c":[()=>n.e(5644).then(n.bind(n,2206)),"@site/docs/illa-flow-webhook.mdx",2206],"0901c930":[()=>n.e(6224).then(n.bind(n,9733)),"@site/docs/data-grid.mdx",9733],"0e8c43f2":[()=>n.e(4512).then(n.bind(n,6935)),"@site/docs/4-2.mdx",6935],"0e97019d":[()=>n.e(8989).then(n.bind(n,5893)),"@site/docs/4-4.mdx",5893],"0f04cc97":[()=>n.e(3319).then(n.bind(n,5866)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/divider.mdx",5866],"15a6da65":[()=>n.e(7688).then(n.bind(n,4247)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/container.mdx",4247],"16389b83":[()=>n.e(1676).then(n.bind(n,5201)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/postgresql.mdx",5201],"1718a827":[()=>n.e(5583).then(n.bind(n,6285)),"@site/docs/4-3-6.mdx",6285],17604318:[()=>n.e(5772).then(n.bind(n,5225)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/switch.mdx",5225],17896441:[()=>Promise.all([n.e(532),n.e(7918)]).then(n.bind(n,4367)),"@theme/DocItem",4367],"18157fb9":[()=>n.e(5054).then(n.bind(n,5037)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/mongodb.mdx",5037],"1a4e3797":[()=>Promise.all([n.e(532),n.e(7920)]).then(n.bind(n,1323)),"@theme/SearchPage",1323],"1be78505":[()=>Promise.all([n.e(532),n.e(9514)]).then(n.bind(n,4171)),"@theme/DocPage",4171],"250122bd":[()=>n.e(7858).then(n.bind(n,8065)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/time-picker.mdx",8065],"25b17a77":[()=>n.e(1593).then(n.bind(n,2729)),"@site/docs/3-4.mdx",2729],"2613380c":[()=>n.e(9180).then(n.bind(n,6888)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/timeline.mdx",6888],"2ad03491":[()=>n.e(8972).then(n.bind(n,7409)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/clickhouse.mdx",7409],"2b1e3bf1":[()=>n.e(3311).then(n.bind(n,7610)),"@site/docs/terms-of-service.mdx",7610],"2ef1edda":[()=>n.e(109).then(n.bind(n,1927)),"@site/docs/illa-flow-response.mdx",1927],"2f8c493c":[()=>n.e(4118).then(n.bind(n,1531)),"@site/docs/custom-domain.mdx",1531],"2fab65e1":[()=>n.e(5605).then(n.bind(n,273)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/neon.mdx",273],"3066359b":[()=>n.e(283).then(n.bind(n,7484)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/page.mdx",7484],"38a57432":[()=>n.e(610).then(n.bind(n,3108)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/radio-button.mdx",3108],"38bfd2d0":[()=>n.e(5454).then(n.bind(n,728)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/bar-progress.mdx",728],"3cf7e15c":[()=>n.e(7399).then(n.bind(n,9685)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/rate.mdx",9685],"3da94c16":[()=>n.e(6964).then(n.bind(n,5439)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/elastic-search.mdx",5439],"3e7292c1":[()=>n.e(2727).then(n.bind(n,2186)),"@site/docs/grid-list.mdx",2186],"3f17d2bb":[()=>n.e(7394).then(n.bind(n,9511)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/oracledb.mdx",9511],"42b3cfdb":[()=>n.e(1808).then(n.bind(n,196)),"@site/docs/4-9.mdx",196],"492553e0":[()=>n.e(163).then(n.bind(n,2536)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/run-script.mdx",2536],"4e9b8d76":[()=>n.e(3834).then(n.bind(n,966)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/modal.mdx",966],"4f4ee8a2":[()=>n.e(2261).then(n.bind(n,8321)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/event-calendar.mdx",8321],"4fdae9db":[()=>n.e(4679).then(n.bind(n,9473)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/button.mdx",9473],"50f53614":[()=>n.e(5037).then(n.bind(n,8553)),"@site/docs/self-hosted-deployment.mdx",8553],"5b4536b1":[()=>n.e(4213).then(n.bind(n,5220)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/editable-text.mdx",5220],"5c77aeef":[()=>n.e(1726).then(n.bind(n,2060)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/mysql.mdx",2060],"6122ac78":[()=>n.e(9358).then(n.bind(n,6549)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/number-input.mdx",6549],"64eabae9":[()=>n.e(5024).then(n.bind(n,2146)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/upload.mdx",2146],"66deb67f":[()=>n.e(897).then(n.bind(n,1166)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/icon.mdx",1166],"6c54ef2c":[()=>n.e(1804).then(n.bind(n,1011)),"@site/docs/server-side-pagination.mdx",1011],"6e556a14":[()=>n.e(9318).then(n.bind(n,661)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/image.mdx",661],"7be1ba0a":[()=>n.e(3078).then(n.bind(n,2696)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/list.mdx",2696],"7e66e352":[()=>n.e(5611).then(n.bind(n,8475)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/date.mdx",8475],"81e69fca":[()=>n.e(2811).then(n.bind(n,7554)),"@site/docs/4-1.mdx",7554],"83bf71c7":[()=>n.e(1817).then(n.bind(n,7190)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/cascader.mdx",7190],84889184:[()=>n.e(4725).then(n.t.bind(n,3769,19)),"/home/runner/work/illa-doc/illa-doc/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",3769],"89a96d51":[()=>n.e(2681).then(n.bind(n,7754)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/text.mdx",7754],"8e1b75c0":[()=>n.e(2057).then(n.bind(n,4398)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/supabase.mdx",4398],"8eb79e35":[()=>n.e(9045).then(n.bind(n,3521)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/hugging-face-api.mdx",3521],"916e47d7":[()=>n.e(4111).then(n.bind(n,5785)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/circle-progress.mdx",5785],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],"96fc8e8b":[()=>n.e(8718).then(n.bind(n,4435)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/restapi.mdx",4435],"9971f535":[()=>n.e(7464).then(n.bind(n,3463)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/multi-select.mdx",3463],"9af52659":[()=>n.e(1113).then(n.bind(n,9379)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/event-handler.mdx",9379],"9b9e8a57":[()=>n.e(8235).then(n.bind(n,9358)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/airtable.mdx",9358],a4418385:[()=>n.e(2365).then(n.bind(n,7820)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/radio-group.mdx",7820],a45c26b0:[()=>n.e(9245).then(n.t.bind(n,7085,19)),"/home/runner/work/illa-doc/illa-doc/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",7085],a7879445:[()=>n.e(7195).then(n.bind(n,5547)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/time-range.mdx",5547],a7d25e54:[()=>n.e(4816).then(n.bind(n,6405)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/pdf.mdx",6405],a8d9018e:[()=>n.e(3026).then(n.bind(n,4380)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/select.mdx",4380],ad0e5ceb:[()=>n.e(3488).then(n.bind(n,6619)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/tabs.mdx",6619],ad54be7d:[()=>n.e(935).then(n.bind(n,326)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/hugging-face-endpoint.mdx",326],b806f466:[()=>n.e(3757).then(n.bind(n,1251)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/ai-agent.mdx",1251],b923dfd3:[()=>n.e(3879).then(n.bind(n,4045)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/input.mdx",4045],b96904c0:[()=>n.e(1813).then(n.bind(n,8453)),"@site/docs/3-3.mdx",8453],bbd6f883:[()=>n.e(3358).then(n.bind(n,41)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/firebase.mdx",41],bceb4de9:[()=>n.e(9946).then(n.bind(n,1042)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/date-range.mdx",1042],c198e278:[()=>n.e(5833).then(n.bind(n,73)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/transformer.mdx",73],c25e64e1:[()=>n.e(3878).then(n.bind(n,4567)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/microsoft-sql.mdx",4567],c850e1f1:[()=>n.e(4032).then(n.bind(n,3196)),"@site/docs/3-5.mdx",3196],ca52f6bd:[()=>n.e(372).then(n.bind(n,1870)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/hydra.mdx",1870],cf0ea6b6:[()=>n.e(7851).then(n.bind(n,7745)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/statistics.mdx",7745],d1becb09:[()=>n.e(2518).then(n.bind(n,8935)),"@site/docs/privacy-policy.mdx",8935],d2055da9:[()=>n.e(9312).then(n.bind(n,615)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/form.mdx",615],d4af05d3:[()=>n.e(1902).then(n.bind(n,150)),"@site/docs/4-0.mdx",150],d555f993:[()=>n.e(4610).then(n.bind(n,5166)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/mariadb.mdx",5166],d6062b68:[()=>n.e(2649).then(n.bind(n,4354)),"@site/docs/illa-flow-introduction.mdx",4354],dc3d0e42:[()=>n.e(8656).then(n.bind(n,5997)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/upstash.mdx",5997],e00d0095:[()=>n.e(4477).then(n.bind(n,5342)),"@site/docs/4-3.mdx",5342],e260ee44:[()=>n.e(7288).then(n.bind(n,6483)),"@site/docs/4-8.mdx",6483],e2fd2317:[()=>n.e(6536).then(n.bind(n,124)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/menu.mdx",124],e398f612:[()=>n.e(8039).then(n.bind(n,3248)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/appwrite.mdx",3248],e49ab2b1:[()=>n.e(7034).then(n.bind(n,6073)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/tidb.mdx",6073],e80c4b38:[()=>n.e(9933).then(n.bind(n,324)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/about-illa.mdx",324],e86dda31:[()=>n.e(8067).then(n.bind(n,3048)),"@site/docs/4-5.mdx",3048],e939fa49:[()=>n.e(8621).then(n.bind(n,3423)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/table.mdx",3423],eb8f304c:[()=>n.e(8184).then(n.bind(n,4313)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/video.mdx",4313],eeac6ec0:[()=>n.e(9894).then(n.bind(n,798)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/amazons3.mdx",798],f2d39816:[()=>n.e(8900).then(n.bind(n,3384)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/snowflake.mdx",3384],f5a5f01b:[()=>n.e(6840).then(n.bind(n,9923)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/redis.mdx",9923],fb684e45:[()=>n.e(265).then(n.bind(n,9111)),"@site/i18n/zh/docusaurus-plugin-content-docs/current/date-time.mdx",9111]};function u(e){let{error:t,retry:n,pastDelay:a}=e;return t?r.createElement("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"}},r.createElement("p",null,String(t)),r.createElement("div",null,r.createElement("button",{type:"button",onClick:n},"Retry"))):a?r.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},r.createElement("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb"},r.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"22",r:"8"},r.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))):null}var c=n(8842),d=n(554);function p(e,t){if("*"===e)return i()({loading:u,loader:()=>n.e(7947).then(n.bind(n,7947)),modules:["@theme/NotFound"],webpack:()=>[7947],render(e,t){const n=e.default;return r.createElement(d.z,{value:{plugin:{name:"native",id:"default"}}},r.createElement(n,t))}});const o=l[`${e}-${t}`],p={},f=[],m=[],h=(0,c.Z)(o);return Object.entries(h).forEach((e=>{let[t,n]=e;const r=s[n];r&&(p[t]=r[0],f.push(r[1]),m.push(r[2]))})),i().Map({loading:u,loader:p,modules:f,webpack:()=>m,render(t,n){const i=JSON.parse(JSON.stringify(o));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let o=i;const l=n.split(".");l.slice(0,-1).forEach((e=>{o=o[e]})),o[l[l.length-1]]=a}));const l=i.__comp;delete i.__comp;const s=i.__context;return delete i.__context,r.createElement(d.z,{value:s},r.createElement(l,(0,a.Z)({},i,n)))}})}const f=[{path:"/zh/search",component:p("/zh/search","3ff"),exact:!0},{path:"/zh/",component:p("/zh/","83f"),routes:[{path:"/zh/",component:p("/zh/","3eb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/3-3",component:p("/zh/3-3","826"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/3-4",component:p("/zh/3-4","30d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/3-5",component:p("/zh/3-5","90e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/4-0",component:p("/zh/4-0","64a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/4-1",component:p("/zh/4-1","2cf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/4-2",component:p("/zh/4-2","98b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/4-3",component:p("/zh/4-3","c61"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/4-3-6",component:p("/zh/4-3-6","e99"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/4-4",component:p("/zh/4-4","c1a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/4-5",component:p("/zh/4-5","5f8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/4-8",component:p("/zh/4-8","4b3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/4-9",component:p("/zh/4-9","148"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/ai-agent",component:p("/zh/ai-agent","fce"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/airtable",component:p("/zh/airtable","c6e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/amazons3",component:p("/zh/amazons3","b41"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/appwrite",component:p("/zh/appwrite","7bd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/bar-progress",component:p("/zh/bar-progress","1f4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/button",component:p("/zh/button","fe3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/cascader",component:p("/zh/cascader","6ea"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/circle-progress",component:p("/zh/circle-progress","4c7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/clickhouse",component:p("/zh/clickhouse","d48"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/container",component:p("/zh/container","a04"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/custom-domain",component:p("/zh/custom-domain","899"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/data-grid",component:p("/zh/data-grid","49d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/date",component:p("/zh/date","b8c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/date-range",component:p("/zh/date-range","ec1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/date-time",component:p("/zh/date-time","831"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/divider",component:p("/zh/divider","9cf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/editable-text",component:p("/zh/editable-text","eec"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/elastic-search",component:p("/zh/elastic-search","716"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/event-calendar",component:p("/zh/event-calendar","2a1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/event-handler",component:p("/zh/event-handler","b68"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/firebase",component:p("/zh/firebase","ef6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/form",component:p("/zh/form","734"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/grid-list",component:p("/zh/grid-list","ca5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/hugging-face-api",component:p("/zh/hugging-face-api","5d9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/hugging-face-endpoint",component:p("/zh/hugging-face-endpoint","922"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/hydra",component:p("/zh/hydra","f5c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/icon",component:p("/zh/icon","626"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/illa-flow-introduction",component:p("/zh/illa-flow-introduction","d00"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/illa-flow-response",component:p("/zh/illa-flow-response","eaf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/illa-flow-webhook",component:p("/zh/illa-flow-webhook","a56"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/image",component:p("/zh/image","7e0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/input",component:p("/zh/input","2cc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/list",component:p("/zh/list","4f4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/mariadb",component:p("/zh/mariadb","e47"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/menu",component:p("/zh/menu","b9c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/microsoft-sql",component:p("/zh/microsoft-sql","b27"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/modal",component:p("/zh/modal","3eb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/mongodb",component:p("/zh/mongodb","f95"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/multi-select",component:p("/zh/multi-select","fb5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/mysql",component:p("/zh/mysql","af4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/neon",component:p("/zh/neon","de0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/number-input",component:p("/zh/number-input","8dc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/oracledb",component:p("/zh/oracledb","445"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/page",component:p("/zh/page","b45"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/pdf",component:p("/zh/pdf","f07"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/postgresql",component:p("/zh/postgresql","531"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/privacy-policy",component:p("/zh/privacy-policy","544"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/radio-button",component:p("/zh/radio-button","bc0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/radio-group",component:p("/zh/radio-group","54c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/rate",component:p("/zh/rate","9e3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/redis",component:p("/zh/redis","ba2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/restapi",component:p("/zh/restapi","39a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/run-script",component:p("/zh/run-script","b02"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/select",component:p("/zh/select","20f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/self-hosted-deployment",component:p("/zh/self-hosted-deployment","e63"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/server-side-pagination",component:p("/zh/server-side-pagination","911"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/snowflake",component:p("/zh/snowflake","294"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/statistics",component:p("/zh/statistics","ac6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/supabase",component:p("/zh/supabase","4a6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/switch",component:p("/zh/switch","de7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/table",component:p("/zh/table","cb8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/tabs",component:p("/zh/tabs","04f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/terms-of-service",component:p("/zh/terms-of-service","4f3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/text",component:p("/zh/text","c69"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/text-area-input",component:p("/zh/text-area-input","e19"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/tidb",component:p("/zh/tidb","3c3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/time-picker",component:p("/zh/time-picker","ecd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/time-range",component:p("/zh/time-range","796"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/timeline",component:p("/zh/timeline","06f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/transformer",component:p("/zh/transformer","62e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/upload",component:p("/zh/upload","2be"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/upstash",component:p("/zh/upstash","076"),exact:!0,sidebar:"tutorialSidebar"},{path:"/zh/video",component:p("/zh/video","1a4"),exact:!0,sidebar:"tutorialSidebar"}]},{path:"*",component:p("*")}]},4907:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,t:()=>o});var r=n(9496);const a=r.createContext(!1);function o(e){let{children:t}=e;const[n,o]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{o(!0)}),[]),r.createElement(a.Provider,{value:n},t)}},5105:(e,t,n)=>{"use strict";var r=n(9496),a=n(7995),o=n(8736),i=n(8663),l=n(6682);const s=[n(356),n(5869),n(2844),n(7787),n(2777)];var u=n(1968),c=n(3442),d=n(1789);function p(e){let{children:t}=e;return r.createElement(r.Fragment,null,t)}var f=n(8028),m=n(8801),h=n(7198),g=n(9962),b=n(640),v=n(9958),y=n(1014),w=n(2200),k=n(772),S=n(7286),E=n(911);function x(){const{i18n:{defaultLocale:e,localeConfigs:t}}=(0,h.Z)(),n=(0,y.l)();return r.createElement(m.Z,null,Object.entries(t).map((e=>{let[t,{htmlLang:a}]=e;return r.createElement("link",{key:t,rel:"alternate",href:n.createUrl({locale:t,fullyQualified:!0}),hrefLang:a})})),r.createElement("link",{rel:"alternate",href:n.createUrl({locale:e,fullyQualified:!0}),hrefLang:"x-default"}))}function _(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,h.Z)(),a=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,h.Z)(),{pathname:r}=(0,c.TH)();return e+(0,S.applyTrailingSlash)((0,g.Z)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:a;return r.createElement(m.Z,null,r.createElement("meta",{property:"og:url",content:o}),r.createElement("link",{rel:"canonical",href:o}))}function T(){const{i18n:{currentLocale:e}}=(0,h.Z)(),{metadata:t,image:n}=(0,b.L)();return r.createElement(r.Fragment,null,r.createElement(m.Z,null,r.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),r.createElement("body",{className:w.h})),n&&r.createElement(v.d,{image:n}),r.createElement(_,null),r.createElement(x,null),r.createElement(E.Z,{tag:k.HX,locale:e}),r.createElement(m.Z,null,t.map(((e,t)=>r.createElement("meta",(0,f.Z)({key:t},e))))))}const C=new Map;function A(e){if(C.has(e.pathname))return{...e,pathname:C.get(e.pathname)};if((0,d.f)(u.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return C.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return C.set(e.pathname,t),{...e,pathname:t}}var L=n(4907),z=n(6776);function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>a.forEach((e=>e?.()))}const P=function(e){let{children:t,location:n,previousLocation:a}=e;return(0,r.useLayoutEffect)((()=>{a!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,a=t.hash===n.hash,o=t.search===n.search;if(r&&a&&!o)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:a}),R("onRouteDidUpdate",{previousLocation:a,location:n}))}),[a,n]),t};function N(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.f)(u.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class O extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),N(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return r.createElement(P,{previousLocation:this.previousLocation,location:t},r.createElement(c.AW,{location:t,render:()=>e}))}}const I=O,D="__docusaurus-base-url-issue-banner-container",M="__docusaurus-base-url-issue-banner",B="__docusaurus-base-url-issue-banner-suggestion-container",F="__DOCUSAURUS_INSERT_BASEURL_BANNER";function j(e){return`\nwindow['${F}'] = true;\n\ndocument.addEventListener('DOMContentLoaded', maybeInsertBanner);\n\nfunction maybeInsertBanner() {\n var shouldInsert = window['${F}'];\n shouldInsert && insertBanner();\n}\n\nfunction insertBanner() {\n var bannerContainer = document.getElementById('${D}');\n if (!bannerContainer) {\n return;\n }\n var bannerHtml = ${JSON.stringify(function(e){return`\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

\n

We suggest trying baseUrl =

\n
\n`}(e)).replace(/{window[F]=!1}),[]),r.createElement(r.Fragment,null,!l.Z.canUseDOM&&r.createElement(m.Z,null,r.createElement("script",null,j(e))),r.createElement("div",{id:D}))}function $(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:t}}=(0,h.Z)(),{pathname:n}=(0,c.TH)();return t&&n===e?r.createElement(U,null):null}function q(){const{siteConfig:{favicon:e,title:t,noIndex:n},i18n:{currentLocale:a,localeConfigs:o}}=(0,h.Z)(),i=(0,g.Z)(e),{htmlLang:l,direction:s}=o[a];return r.createElement(m.Z,null,r.createElement("html",{lang:l,dir:s}),r.createElement("title",null,t),r.createElement("meta",{property:"og:title",content:t}),r.createElement("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),n&&r.createElement("meta",{name:"robots",content:"noindex, nofollow"}),e&&r.createElement("link",{rel:"icon",href:i}))}var H=n(3712),G=n(4996);function Z(){const e=(0,G.Z)();return r.createElement(m.Z,null,r.createElement("html",{"data-has-hydrated":e}))}function V(){const e=(0,d.H)(u.Z),t=(0,c.TH)();return r.createElement(H.Z,null,r.createElement(z.M,null,r.createElement(L.t,null,r.createElement(p,null,r.createElement(q,null),r.createElement(T,null),r.createElement($,null),r.createElement(I,{location:A(t)},e)),r.createElement(Z,null))))}var W=n(6887);const K=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const a=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;a?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var Y=n(8842);const Q=new Set,X=new Set,J=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ee={prefetch(e){if(!(e=>!J()&&!X.has(e)&&!Q.has(e))(e))return!1;Q.add(e);const t=(0,d.f)(u.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(W).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,Y.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?K(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!J()&&!X.has(e))(e)&&(X.add(e),N(e))},te=Object.freeze(ee);if(l.Z.canUseDOM){window.docusaurus=te;const e=a.hydrate;N(window.location.pathname).then((()=>{e(r.createElement(i.B6,null,r.createElement(o.VK,null,r.createElement(V,null))),document.getElementById("__docusaurus"))}))}},6776:(e,t,n)=>{"use strict";n.d(t,{_:()=>c,M:()=>d});var r=n(9496),a=n(6809);const o=JSON.parse('{"docusaurus-plugin-google-gtag":{"default":{"trackingID":["G-QW745VE33W"],"anonymizeIP":false,"id":"default"}},"docusaurus-plugin-content-docs":{"default":{"path":"/zh/","versions":[{"name":"current","label":"\u4e0b\u4e00\u4e2a","isLast":true,"path":"/zh/","mainDocId":"about-illa","docs":[{"id":"3-3","path":"/zh/3-3","sidebar":"tutorialSidebar"},{"id":"3-4","path":"/zh/3-4","sidebar":"tutorialSidebar"},{"id":"3-5","path":"/zh/3-5","sidebar":"tutorialSidebar"},{"id":"4-0","path":"/zh/4-0","sidebar":"tutorialSidebar"},{"id":"4-1","path":"/zh/4-1","sidebar":"tutorialSidebar"},{"id":"4-2","path":"/zh/4-2","sidebar":"tutorialSidebar"},{"id":"4-3","path":"/zh/4-3","sidebar":"tutorialSidebar"},{"id":"4-3-6","path":"/zh/4-3-6","sidebar":"tutorialSidebar"},{"id":"4-4","path":"/zh/4-4","sidebar":"tutorialSidebar"},{"id":"4-5","path":"/zh/4-5","sidebar":"tutorialSidebar"},{"id":"4-8","path":"/zh/4-8","sidebar":"tutorialSidebar"},{"id":"4-9","path":"/zh/4-9","sidebar":"tutorialSidebar"},{"id":"about-illa","path":"/zh/","sidebar":"tutorialSidebar"},{"id":"ai-agent","path":"/zh/ai-agent","sidebar":"tutorialSidebar"},{"id":"airtable","path":"/zh/airtable","sidebar":"tutorialSidebar"},{"id":"amazons3","path":"/zh/amazons3","sidebar":"tutorialSidebar"},{"id":"appwrite","path":"/zh/appwrite","sidebar":"tutorialSidebar"},{"id":"bar-progress","path":"/zh/bar-progress","sidebar":"tutorialSidebar"},{"id":"button","path":"/zh/button","sidebar":"tutorialSidebar"},{"id":"cascader","path":"/zh/cascader","sidebar":"tutorialSidebar"},{"id":"circle-progress","path":"/zh/circle-progress","sidebar":"tutorialSidebar"},{"id":"clickhouse","path":"/zh/clickhouse","sidebar":"tutorialSidebar"},{"id":"container","path":"/zh/container","sidebar":"tutorialSidebar"},{"id":"custom-domain","path":"/zh/custom-domain","sidebar":"tutorialSidebar"},{"id":"data-grid","path":"/zh/data-grid","sidebar":"tutorialSidebar"},{"id":"date","path":"/zh/date","sidebar":"tutorialSidebar"},{"id":"date-range","path":"/zh/date-range","sidebar":"tutorialSidebar"},{"id":"date-time","path":"/zh/date-time","sidebar":"tutorialSidebar"},{"id":"divider","path":"/zh/divider","sidebar":"tutorialSidebar"},{"id":"editable-text","path":"/zh/editable-text","sidebar":"tutorialSidebar"},{"id":"elastic-search","path":"/zh/elastic-search","sidebar":"tutorialSidebar"},{"id":"event-calendar","path":"/zh/event-calendar","sidebar":"tutorialSidebar"},{"id":"event-handler","path":"/zh/event-handler","sidebar":"tutorialSidebar"},{"id":"firebase","path":"/zh/firebase","sidebar":"tutorialSidebar"},{"id":"form","path":"/zh/form","sidebar":"tutorialSidebar"},{"id":"grid-list","path":"/zh/grid-list","sidebar":"tutorialSidebar"},{"id":"hugging-face-api","path":"/zh/hugging-face-api","sidebar":"tutorialSidebar"},{"id":"hugging-face-endpoint","path":"/zh/hugging-face-endpoint","sidebar":"tutorialSidebar"},{"id":"hydra","path":"/zh/hydra","sidebar":"tutorialSidebar"},{"id":"icon","path":"/zh/icon","sidebar":"tutorialSidebar"},{"id":"illa-flow-introduction","path":"/zh/illa-flow-introduction","sidebar":"tutorialSidebar"},{"id":"illa-flow-response","path":"/zh/illa-flow-response","sidebar":"tutorialSidebar"},{"id":"illa-flow-webhook","path":"/zh/illa-flow-webhook","sidebar":"tutorialSidebar"},{"id":"image","path":"/zh/image","sidebar":"tutorialSidebar"},{"id":"input","path":"/zh/input","sidebar":"tutorialSidebar"},{"id":"list","path":"/zh/list","sidebar":"tutorialSidebar"},{"id":"mariadb","path":"/zh/mariadb","sidebar":"tutorialSidebar"},{"id":"menu","path":"/zh/menu","sidebar":"tutorialSidebar"},{"id":"microsoft-sql","path":"/zh/microsoft-sql","sidebar":"tutorialSidebar"},{"id":"modal","path":"/zh/modal","sidebar":"tutorialSidebar"},{"id":"mongodb","path":"/zh/mongodb","sidebar":"tutorialSidebar"},{"id":"multi-select","path":"/zh/multi-select","sidebar":"tutorialSidebar"},{"id":"mysql","path":"/zh/mysql","sidebar":"tutorialSidebar"},{"id":"neon","path":"/zh/neon","sidebar":"tutorialSidebar"},{"id":"number-input","path":"/zh/number-input","sidebar":"tutorialSidebar"},{"id":"oracledb","path":"/zh/oracledb","sidebar":"tutorialSidebar"},{"id":"page","path":"/zh/page","sidebar":"tutorialSidebar"},{"id":"pdf","path":"/zh/pdf","sidebar":"tutorialSidebar"},{"id":"postgresql","path":"/zh/postgresql","sidebar":"tutorialSidebar"},{"id":"privacy-policy","path":"/zh/privacy-policy","sidebar":"tutorialSidebar"},{"id":"radio-button","path":"/zh/radio-button","sidebar":"tutorialSidebar"},{"id":"radio-group","path":"/zh/radio-group","sidebar":"tutorialSidebar"},{"id":"rate","path":"/zh/rate","sidebar":"tutorialSidebar"},{"id":"redis","path":"/zh/redis","sidebar":"tutorialSidebar"},{"id":"restapi","path":"/zh/restapi","sidebar":"tutorialSidebar"},{"id":"run-script","path":"/zh/run-script","sidebar":"tutorialSidebar"},{"id":"select","path":"/zh/select","sidebar":"tutorialSidebar"},{"id":"self-hosted-deployment","path":"/zh/self-hosted-deployment","sidebar":"tutorialSidebar"},{"id":"server-side-pagination","path":"/zh/server-side-pagination","sidebar":"tutorialSidebar"},{"id":"snowflake","path":"/zh/snowflake","sidebar":"tutorialSidebar"},{"id":"statistics","path":"/zh/statistics","sidebar":"tutorialSidebar"},{"id":"supabase","path":"/zh/supabase","sidebar":"tutorialSidebar"},{"id":"switch","path":"/zh/switch","sidebar":"tutorialSidebar"},{"id":"table","path":"/zh/table","sidebar":"tutorialSidebar"},{"id":"tabs","path":"/zh/tabs","sidebar":"tutorialSidebar"},{"id":"terms-of-service","path":"/zh/terms-of-service","sidebar":"tutorialSidebar"},{"id":"text","path":"/zh/text","sidebar":"tutorialSidebar"},{"id":"text-area-input","path":"/zh/text-area-input","sidebar":"tutorialSidebar"},{"id":"tidb","path":"/zh/tidb","sidebar":"tutorialSidebar"},{"id":"time-picker","path":"/zh/time-picker","sidebar":"tutorialSidebar"},{"id":"time-range","path":"/zh/time-range","sidebar":"tutorialSidebar"},{"id":"timeline","path":"/zh/timeline","sidebar":"tutorialSidebar"},{"id":"transformer","path":"/zh/transformer","sidebar":"tutorialSidebar"},{"id":"upload","path":"/zh/upload","sidebar":"tutorialSidebar"},{"id":"upstash","path":"/zh/upstash","sidebar":"tutorialSidebar"},{"id":"video","path":"/zh/video","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/zh/","label":"\u6784\u5efa\u5e94\u7528\u7a0b\u5e8f"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en","zh"],"path":"i18n","currentLocale":"zh","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"},"zh":{"label":"\u4e2d\u6587","direction":"ltr","htmlLang":"zh","calendar":"gregory","path":"zh"}}}');var l=n(7529);const s=JSON.parse('{"docusaurusVersion":"2.4.3","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"2.4.3"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"2.4.3"},"docusaurus-plugin-google-gtag":{"type":"package","name":"@docusaurus/plugin-google-gtag","version":"2.4.3"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"2.4.3"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"2.4.3"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"2.4.3"}}}'),u={siteConfig:a.default,siteMetadata:s,globalData:o,i18n:i,codeTranslations:l},c=r.createContext(u);function d(e){let{children:t}=e;return r.createElement(c.Provider,{value:u},t)}},3712:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});var r=n(9496),a=n(6682),o=n(8801),i=n(7286),l=n(7743);function s(e){let{error:t,tryAgain:n}=e;return r.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"}},r.createElement("h1",{style:{fontSize:"3rem"}},"This page crashed"),r.createElement("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"}},"Try again"),r.createElement(u,{error:t}))}function u(e){let{error:t}=e;const n=(0,i.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return r.createElement("p",{style:{whiteSpace:"pre-wrap"}},n)}function c(e){let{error:t,tryAgain:n}=e;return r.createElement(p,{fallback:()=>r.createElement(s,{error:t,tryAgain:n})},r.createElement(o.Z,null,r.createElement("title",null,"Page Error")),r.createElement(l.Z,null,r.createElement(s,{error:t,tryAgain:n})))}const d=e=>r.createElement(c,e);class p extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){a.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??d)(e)}return e??null}}},6682:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,a={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},8801:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(9496),a=n(8663);function o(e){return r.createElement(a.ql,e)}},327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(8028),a=n(9496),o=n(8736),i=n(7286),l=n(7198),s=n(8166),u=n(6682);const c=a.createContext({collectLink:()=>{}});var d=n(9962);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:m,isActive:h,"data-noBrokenLinkCheck":g,autoAddBaseUrl:b=!0,...v}=e;const{siteConfig:{trailingSlash:y,baseUrl:w}}=(0,l.Z)(),{withBaseUrl:k}=(0,d.C)(),S=(0,a.useContext)(c),E=(0,a.useRef)(null);(0,a.useImperativeHandle)(t,(()=>E.current));const x=p||f;const _=(0,s.Z)(x),T=x?.replace("pathname://","");let C=void 0!==T?(A=T,b&&(e=>e.startsWith("/"))(A)?k(A):A):void 0;var A;C&&_&&(C=(0,i.applyTrailingSlash)(C,{trailingSlash:y,baseUrl:w}));const L=(0,a.useRef)(!1),z=n?o.OL:o.rU,R=u.Z.canUseIntersectionObserver,P=(0,a.useRef)(),N=()=>{L.current||null==C||(window.docusaurus.preload(C),L.current=!0)};(0,a.useEffect)((()=>(!R&&_&&null!=C&&window.docusaurus.prefetch(C),()=>{R&&P.current&&P.current.disconnect()})),[P,C,R,_]);const O=C?.startsWith("#")??!1,I=!C||!_||O;return I||g||S.collectLink(C),I?a.createElement("a",(0,r.Z)({ref:E,href:C},x&&!_&&{target:"_blank",rel:"noopener noreferrer"},v)):a.createElement(z,(0,r.Z)({},v,{onMouseEnter:N,onTouchStart:N,innerRef:e=>{E.current=e,R&&e&&_&&(P.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(P.current.unobserve(e),P.current.disconnect(),null!=C&&window.docusaurus.prefetch(C))}))})),P.current.observe(e))},to:C},n&&{isActive:h,activeClassName:m}))}const f=a.forwardRef(p)},4423:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s,I:()=>l});var r=n(9496);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var o=n(7529);function i(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return o[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return a(i({message:n,id:r}),t)}function s(e){let{children:t,id:n,values:o}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const l=i({message:t,id:n});return r.createElement(r.Fragment,null,a(l,o))}},1026:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});const r="default"},8166:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>a,b:()=>r})},9962:(e,t,n)=>{"use strict";n.d(t,{C:()=>i,Z:()=>l});var r=n(9496),a=n(7198),o=n(8166);function i(){const{siteConfig:{baseUrl:e,url:t}}=(0,a.Z)(),n=(0,r.useCallback)(((n,r)=>function(e,t,n,r){let{forcePrependBaseUrl:a=!1,absolute:i=!1}=void 0===r?{}:r;if(!n||n.startsWith("#")||(0,o.b)(n))return n;if(a)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const l=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+l:l}(t,e,n,r)),[t,e]);return{withBaseUrl:n}}function l(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},7198:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(9496),a=n(6776);function o(){return(0,r.useContext)(a._)}},4996:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(9496),a=n(4907);function o(){return(0,r.useContext)(a._)}},8842:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function a(e){const t={};return function e(n,a){Object.entries(n).forEach((n=>{let[o,i]=n;const l=a?`${a}.${o}`:o;r(i)?e(i,l):t[l]=i}))}(e),t}},554:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,z:()=>o});var r=n(9496);const a=r.createContext(null);function o(e){let{children:t,value:n}=e;const o=r.useContext(a),i=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:o,value:n})),[o,n]);return r.createElement(a.Provider,{value:i},t)}},3727:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>b,gA:()=>f,WS:()=>m,_r:()=>d,Jo:()=>v,zh:()=>p,yW:()=>g,gB:()=>h});var r=n(3442),a=n(7198),o=n(1026);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,a.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const l=e=>e.versions.find((e=>e.isLast));function s(e,t){const n=l(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})))}function u(e,t){const n=s(e,t),a=n?.docs.find((e=>!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(a.id):{}}}const c={},d=()=>i("docusaurus-plugin-content-docs")??c,p=e=>function(e,t,n){void 0===t&&(t=o.m),void 0===n&&(n={});const r=i(e),a=r?.[t];if(!a&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return a}("docusaurus-plugin-content-docs",e,{failfast:!0});function f(e){void 0===e&&(e={});const t=d(),{pathname:n}=(0,r.TH)();return function(e,t,n){void 0===n&&(n={});const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return o}(t,n,e)}function m(e){void 0===e&&(e={});const t=f(e),{pathname:n}=(0,r.TH)();if(!t)return;return{activePlugin:t,activeVersion:s(t.pluginData,n)}}function h(e){return p(e).versions}function g(e){const t=p(e);return l(t)}function b(e){const t=p(e),{pathname:n}=(0,r.TH)();return u(t,n)}function v(e){const t=p(e),{pathname:n}=(0,r.TH)();return function(e,t){const n=l(e);return{latestDocSuggestion:u(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},356:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>r});const r={onRouteDidUpdate(e){let{location:t,previousLocation:n}=e;!n||t.pathname===n.pathname&&t.search===n.search&&t.hash===n.hash||setTimeout((()=>{window.gtag("event","page_view",{page_title:document.title,page_location:window.location.href,page_path:t.pathname+t.search+t.hash})}))}}},1889:(e,t,n)=>{"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign||function(e){for(var t=1;t{"use strict";n.r(t),n.d(t,{default:()=>o});var r=n(9981),a=n.n(r);a().configure({showSpinner:!1});const o={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},2844:(e,t,n)=>{"use strict";n.r(t);var r=n(999),a=n(6809);!function(e){const{themeConfig:{prism:t}}=a.default,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{n(8862)(`./prism-${e}`)})),delete globalThis.Prism}(r.Z)},3326:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(9496);const a={iconExternalLink:"iconExternalLink_MYOZ"};function o(e){let{width:t=13.5,height:n=13.5}=e;return r.createElement("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:a.iconExternalLink},r.createElement("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"}))}},7743:(e,t,n)=>{"use strict";n.d(t,{Z:()=>zt});var r=n(9496),a=n(5924),o=n(3712),i=n(9958),l=n(8028),s=n(3442),u=n(4423),c=n(7065);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,s.k6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.S)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const m=(0,u.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function h(e){const t=e.children??m,{containerRef:n,onClick:a}=f();return r.createElement("div",{ref:n,role:"region","aria-label":m},r.createElement("a",(0,l.Z)({},e,{href:`#${d}`,onClick:a}),t))}var g=n(2333),b=n(2200);const v={skipToContent:"skipToContent_dol0"};function y(){return r.createElement(h,{className:v.skipToContent})}var w=n(640),k=n(7849);function S(e){let{width:t=21,height:n=21,color:a="currentColor",strokeWidth:o=1.2,className:i,...s}=e;return r.createElement("svg",(0,l.Z)({viewBox:"0 0 15 15",width:t,height:n},s),r.createElement("g",{stroke:a,strokeWidth:o},r.createElement("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})))}const E={closeButton:"closeButton_R_Vi"};function x(e){return r.createElement("button",(0,l.Z)({type:"button","aria-label":(0,u.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"})},e,{className:(0,a.Z)("clean-btn close",E.closeButton,e.className)}),r.createElement(S,{width:14,height:14,strokeWidth:3.1}))}const _={content:"content_QNzC"};function T(e){const{announcementBar:t}=(0,w.L)(),{content:n}=t;return r.createElement("div",(0,l.Z)({},e,{className:(0,a.Z)(_.content,e.className),dangerouslySetInnerHTML:{__html:n}}))}const C={announcementBar:"announcementBar_Rdqy",announcementBarPlaceholder:"announcementBarPlaceholder_WEXQ",announcementBarClose:"announcementBarClose_iPSd",announcementBarContent:"announcementBarContent_VlLc"};function A(){const{announcementBar:e}=(0,w.L)(),{isActive:t,close:n}=(0,k.nT)();if(!t)return null;const{backgroundColor:a,textColor:o,isCloseable:i}=e;return r.createElement("div",{className:C.announcementBar,style:{backgroundColor:a,color:o},role:"banner"},i&&r.createElement("div",{className:C.announcementBarPlaceholder}),r.createElement(T,{className:C.announcementBarContent}),i&&r.createElement(x,{onClick:n,className:C.announcementBarClose}))}var L=n(6065),z=n(9436);var R=n(1526),P=n(7265);const N=r.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,L.e)(),t=(0,P.HY)(),[n,a]=(0,r.useState)(!1),o=null!==t.component,i=(0,R.D9)(o);return(0,r.useEffect)((()=>{o&&!i&&a(!0)}),[o,i]),(0,r.useEffect)((()=>{o?e.shown||a(!0):a(!1)}),[e.shown,o]),(0,r.useMemo)((()=>[n,a]),[n])}();return r.createElement(N.Provider,{value:n},t)}function I(e){if(e.component){const t=e.component;return r.createElement(t,e.props)}}function D(){const e=(0,r.useContext)(N);if(!e)throw new R.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,r.useCallback)((()=>n(!1)),[n]),o=(0,P.HY)();return(0,r.useMemo)((()=>({shown:t,hide:a,content:I(o)})),[a,o,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:o}=e;const{shown:i}=D();return r.createElement("div",{className:"navbar-sidebar"},t,r.createElement("div",{className:(0,a.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":i})},r.createElement("div",{className:"navbar-sidebar__item menu"},n),r.createElement("div",{className:"navbar-sidebar__item menu"},o)))}var B=n(6418),F=n(4996);function j(e){return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:24,height:24},e),r.createElement("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"}))}function U(e){return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:24,height:24},e),r.createElement("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"}))}const $={toggle:"toggle_IwNi",toggleButton:"toggleButton_vE9d",darkToggleIcon:"darkToggleIcon_CoXj",lightToggleIcon:"lightToggleIcon_wXEp",toggleButtonDisabled:"toggleButtonDisabled_os9c"};function q(e){let{className:t,buttonClassName:n,value:o,onChange:i}=e;const l=(0,F.Z)(),s=(0,u.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===o?(0,u.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,u.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return r.createElement("div",{className:(0,a.Z)($.toggle,t)},r.createElement("button",{className:(0,a.Z)("clean-btn",$.toggleButton,!l&&$.toggleButtonDisabled,n),type:"button",onClick:()=>i("dark"===o?"light":"dark"),disabled:!l,title:s,"aria-label":s,"aria-live":"polite"},r.createElement(j,{className:(0,a.Z)($.toggleIcon,$.lightToggleIcon)}),r.createElement(U,{className:(0,a.Z)($.toggleIcon,$.darkToggleIcon)})))}const H=r.memo(q),G={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_kpkR"};function Z(e){let{className:t}=e;const n=(0,w.L)().navbar.style,a=(0,w.L)().colorMode.disableSwitch,{colorMode:o,setColorMode:i}=(0,B.I)();return a?null:r.createElement(H,{className:t,buttonClassName:"dark"===n?G.darkNavbarColorModeToggle:void 0,value:o,onChange:i})}var V=n(4340);function W(){return r.createElement(V.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,L.e)();return r.createElement("button",{type:"button","aria-label":(0,u.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle()},r.createElement(S,{color:"var(--ifm-color-emphasis-600)"}))}function Y(){return r.createElement("div",{className:"navbar-sidebar__brand"},r.createElement(W,null),r.createElement(Z,{className:"margin-right--md"}),r.createElement(K,null))}var Q=n(327),X=n(9962),J=n(8166),ee=n(9390),te=n(3326);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:a,href:o,label:i,html:s,isDropdownLink:u,prependBaseUrlToHref:c,...d}=e;const p=(0,X.Z)(a),f=(0,X.Z)(t),m=(0,X.Z)(o,{forcePrependBaseUrl:!0}),h=i&&o&&!(0,J.Z)(o),g=s?{dangerouslySetInnerHTML:{__html:s}}:{children:r.createElement(r.Fragment,null,i,h&&r.createElement(te.Z,u&&{width:12,height:12}))};return o?r.createElement(Q.Z,(0,l.Z)({href:c?m:o},d,g)):r.createElement(Q.Z,(0,l.Z)({to:p,isNavLink:!0},(t||n)&&{isActive:(e,t)=>n?(0,ee.F)(n,t.pathname):t.pathname.startsWith(f)},d,g))}function re(e){let{className:t,isDropdownItem:n=!1,...o}=e;const i=r.createElement(ne,(0,l.Z)({className:(0,a.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n},o));return n?r.createElement("li",null,i):i}function ae(e){let{className:t,isDropdownItem:n,...o}=e;return r.createElement("li",{className:"menu__list-item"},r.createElement(ne,(0,l.Z)({className:(0,a.Z)("menu__link",t)},o)))}function oe(e){let{mobile:t=!1,position:n,...a}=e;const o=t?ae:re;return r.createElement(o,(0,l.Z)({},a,{activeClassName:a.activeClassName??(t?"menu__link--active":"navbar__link--active")}))}var ie=n(8473),le=n(884),se=n(7198);function ue(e,t){return e.some((e=>function(e,t){return!!(0,le.Mg)(e.to,t)||!!(0,ee.F)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function ce(e){let{items:t,position:n,className:o,onClick:i,...s}=e;const u=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{u.current&&!u.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[u]),r.createElement("div",{ref:u,className:(0,a.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c})},r.createElement(ne,(0,l.Z)({"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,a.Z)("navbar__link",o)},s,{onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))}}),s.children??s.label),r.createElement("ul",{className:"dropdown__menu"},t.map(((e,t)=>r.createElement(qe,(0,l.Z)({isDropdownItem:!0,activeClassName:"dropdown__link--active"},e,{key:t}))))))}function de(e){let{items:t,className:n,position:o,onClick:i,...u}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,se.Z)(),{pathname:t}=(0,s.TH)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:m}=(0,ie.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&m(!d)}),[c,d,m]),r.createElement("li",{className:(0,a.Z)("menu__list-item",{"menu__list-item--collapsed":p})},r.createElement(ne,(0,l.Z)({role:"button",className:(0,a.Z)("menu__link menu__link--sublist menu__link--sublist-caret",n)},u,{onClick:e=>{e.preventDefault(),f()}}),u.children??u.label),r.createElement(ie.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:p},t.map(((e,t)=>r.createElement(qe,(0,l.Z)({mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active"},e,{key:t}))))))}function pe(e){let{mobile:t=!1,...n}=e;const a=t?de:ce;return r.createElement(a,n)}var fe=n(1014);function me(e){let{width:t=20,height:n=20,...a}=e;return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0},a),r.createElement("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"}))}const he="iconLanguage_rl2T";function ge(){return r.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var be=n(2040),ve=["translations"];function ye(){return ye=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var Ee="Ctrl";var xe=r.forwardRef((function(e,t){var n=e.translations,a=void 0===n?{}:n,o=Se(e,ve),i=a.buttonText,l=void 0===i?"Search":i,s=a.buttonAriaLabel,u=void 0===s?"Search":s,c=we((0,r.useState)(null),2),d=c[0],p=c[1];return(0,r.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(Ee))}),[]),r.createElement("button",ye({type:"button",className:"DocSearch DocSearch-Button","aria-label":u},o,{ref:t}),r.createElement("span",{className:"DocSearch-Button-Container"},r.createElement(be.W,null),r.createElement("span",{className:"DocSearch-Button-Placeholder"},l)),r.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&r.createElement(r.Fragment,null,r.createElement("kbd",{className:"DocSearch-Button-Key"},d===Ee?r.createElement(ge,null):d),r.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),_e=n(8801),Te=n(8460),Ce=n(9100),Ae=n(772);var Le=n(7995);const ze={button:{buttonText:(0,u.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,u.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,u.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,u.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,u.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,u.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,u.I)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,u.I)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,u.I)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,u.I)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,u.I)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,u.I)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,u.I)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,u.I)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,u.I)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,u.I)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,u.I)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,u.I)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,u.I)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,u.I)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,u.I)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,u.I)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,u.I)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,u.I)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,u.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,u.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,u.I)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Re=null;function Pe(e){let{hit:t,children:n}=e;return r.createElement(Q.Z,{to:t.url},n)}function Ne(e){let{state:t,onClose:n}=e;const a=(0,Te.M)();return r.createElement(Q.Z,{to:a(t.query),onClick:n},r.createElement(u.Z,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits}},"See all {count} results"))}function Oe(e){let{contextualSearch:t,externalUrlRegex:a,...o}=e;const{siteMetadata:i}=(0,se.Z)(),u=(0,Ce.l)(),c=function(){const{locale:e,tags:t}=(0,Ae._q)();return[`language:${e}`,t.map((e=>`docusaurus_tag:${e}`))]}(),d=o.searchParameters?.facetFilters??[],p=t?function(e,t){const n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(c,d):d,f={...o.searchParameters,facetFilters:p},m=(0,s.k6)(),h=(0,r.useRef)(null),g=(0,r.useRef)(null),[b,v]=(0,r.useState)(!1),[y,w]=(0,r.useState)(void 0),k=(0,r.useCallback)((()=>Re?Promise.resolve():Promise.all([n.e(6794).then(n.bind(n,6794)),Promise.all([n.e(532),n.e(7068)]).then(n.bind(n,7068)),Promise.all([n.e(532),n.e(5166)]).then(n.bind(n,1551))]).then((e=>{let[{DocSearchModal:t}]=e;Re=t}))),[]),S=(0,r.useCallback)((()=>{k().then((()=>{h.current=document.createElement("div"),document.body.insertBefore(h.current,document.body.firstChild),v(!0)}))}),[k,v]),E=(0,r.useCallback)((()=>{v(!1),h.current?.remove()}),[v]),x=(0,r.useCallback)((e=>{k().then((()=>{v(!0),w(e.key)}))}),[k,v,w]),_=(0,r.useRef)({navigate(e){let{itemUrl:t}=e;(0,ee.F)(a,t)?window.location.href=t:m.push(t)}}).current,T=(0,r.useRef)((e=>o.transformItems?o.transformItems(e):e.map((e=>({...e,url:u(e.url)}))))).current,C=(0,r.useMemo)((()=>e=>r.createElement(Ne,(0,l.Z)({},e,{onClose:E}))),[E]),A=(0,r.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",i.docusaurusVersion),e)),[i.docusaurusVersion]);return function(e){var t=e.isOpen,n=e.onOpen,a=e.onClose,o=e.onInput,i=e.searchButtonRef;r.useEffect((function(){function e(e){var r;(27===e.keyCode&&t||"k"===(null===(r=e.key)||void 0===r?void 0:r.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?a():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),i&&i.current===document.activeElement&&o&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&o(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,a,o,i])}({isOpen:b,onOpen:S,onClose:E,onInput:x,searchButtonRef:g}),r.createElement(r.Fragment,null,r.createElement(_e.Z,null,r.createElement("link",{rel:"preconnect",href:`https://${o.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})),r.createElement(xe,{onTouchStart:k,onFocus:k,onMouseOver:k,onClick:S,ref:g,translations:ze.button}),b&&Re&&h.current&&(0,Le.createPortal)(r.createElement(Re,(0,l.Z)({onClose:E,initialScrollY:window.scrollY,initialQuery:y,navigator:_,transformItems:T,hitComponent:Pe,transformSearchClient:A},o.searchPagePath&&{resultsFooterComponent:C},o,{searchParameters:f,placeholder:ze.placeholder,translations:ze.modal})),h.current))}function Ie(){const{siteConfig:e}=(0,se.Z)();return r.createElement(Oe,e.themeConfig.algolia)}const De={searchBox:"searchBox_udWG"};function Me(e){let{children:t,className:n}=e;return r.createElement("div",{className:(0,a.Z)(n,De.searchBox)},t)}var Be=n(3727),Fe=n(3976);var je=n(553);const Ue=e=>e.docs.find((t=>t.id===e.mainDocId));const $e={default:oe,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:a,...o}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,se.Z)(),p=(0,fe.l)(),{search:f,hash:m}=(0,s.TH)(),h=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${m}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...a],g=t?(0,u.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return r.createElement(pe,(0,l.Z)({},o,{mobile:t,label:r.createElement(r.Fragment,null,r.createElement(me,{className:he}),g),items:h}))},search:function(e){let{mobile:t,className:n}=e;return t?null:r.createElement(Me,{className:n},r.createElement(Ie,null))},dropdown:pe,html:function(e){let{value:t,className:n,mobile:o=!1,isDropdownItem:i=!1}=e;const l=i?"li":"div";return r.createElement(l,{className:(0,a.Z)({navbar__item:!o&&!i,"menu__list-item":o},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:i}=(0,Be.Iw)(a),s=(0,Fe.vY)(t,a);return null===s?null:r.createElement(oe,(0,l.Z)({exact:!0},o,{isActive:()=>i?.path===s.path||!!i?.sidebar&&i.sidebar===s.sidebar,label:n??s.id,to:s.path}))},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:i}=(0,Be.Iw)(a),s=(0,Fe.oz)(t,a).link;if(!s)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return r.createElement(oe,(0,l.Z)({exact:!0},o,{isActive:()=>i?.sidebar===t,label:n??s.label,to:s.path}))},docsVersion:function(e){let{label:t,to:n,docsPluginId:a,...o}=e;const i=(0,Fe.lO)(a)[0],s=t??i.label,u=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(i).path;return r.createElement(oe,(0,l.Z)({},o,{label:s,to:u}))},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:a,dropdownItemsBefore:o,dropdownItemsAfter:i,...c}=e;const{search:d,hash:p}=(0,s.TH)(),f=(0,Be.Iw)(n),m=(0,Be.gB)(n),{savePreferredVersionName:h}=(0,je.J)(n),g=[...o,...m.map((e=>{const t=f.alternateDocVersions[e.name]??Ue(e);return{label:e.label,to:`${t.path}${d}${p}`,isActive:()=>e===f.activeVersion,onClick:()=>h(e.name)}})),...i],b=(0,Fe.lO)(n)[0],v=t&&g.length>1?(0,u.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):b.label,y=t&&g.length>1?void 0:Ue(b).path;return g.length<=1?r.createElement(oe,(0,l.Z)({},c,{mobile:t,label:v,to:y,isActive:a?()=>!1:void 0})):r.createElement(pe,(0,l.Z)({},c,{mobile:t,label:v,to:y,items:g,isActive:a?()=>!1:void 0}))}};function qe(e){let{type:t,...n}=e;const a=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=$e[a];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return r.createElement(o,n)}function He(){const e=(0,L.e)(),t=(0,w.L)().navbar.items;return r.createElement("ul",{className:"menu__list"},t.map(((t,n)=>r.createElement(qe,(0,l.Z)({mobile:!0},t,{onClick:()=>e.toggle(),key:n})))))}function Ge(e){return r.createElement("button",(0,l.Z)({},e,{type:"button",className:"clean-btn navbar-sidebar__back"}),r.createElement(u.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"},"\u2190 Back to main menu"))}function Ze(){const e=0===(0,w.L)().navbar.items.length,t=D();return r.createElement(r.Fragment,null,!e&&r.createElement(Ge,{onClick:()=>t.hide()}),t.content)}function Ve(){const e=(0,L.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?r.createElement(M,{header:r.createElement(Y,null),primaryMenu:r.createElement(He,null),secondaryMenu:r.createElement(Ze,null)}):null}const We={navbarHideable:"navbarHideable_chLr",navbarHidden:"navbarHidden_Adyq"};function Ke(e){return r.createElement("div",(0,l.Z)({role:"presentation"},e,{className:(0,a.Z)("navbar-sidebar__backdrop",e.className)}))}function Ye(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:o}}=(0,w.L)(),i=(0,L.e)(),{navbarRef:l,isNavbarVisible:s}=function(e){const[t,n]=(0,r.useState)(e),a=(0,r.useRef)(!1),o=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(o.current=e.getBoundingClientRect().height)}),[]);return(0,z.RF)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i=l?n(!1):i+u{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return a.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return r.createElement("nav",{ref:l,"aria-label":(0,u.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,a.Z)("navbar","navbar--fixed-top",n&&[We.navbarHideable,!s&&We.navbarHidden],{"navbar--dark":"dark"===o,"navbar--primary":"primary"===o,"navbar-sidebar--show":i.shown})},t,r.createElement(Ke,{onClick:i.toggle}),r.createElement(Ve,null))}var Qe=n(7286);const Xe={errorBoundaryError:"errorBoundaryError_WlLF"};function Je(e){return r.createElement("button",(0,l.Z)({type:"button"},e),r.createElement(u.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error"},"Try again"))}function et(e){let{error:t}=e;const n=(0,Qe.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return r.createElement("p",{className:Xe.errorBoundaryError},n)}class tt extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const nt="right";function rt(e){let{width:t=30,height:n=30,className:a,...o}=e;return r.createElement("svg",(0,l.Z)({className:a,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true"},o),r.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))}function at(){const{toggle:e,shown:t}=(0,L.e)();return r.createElement("button",{onClick:e,"aria-label":(0,u.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button"},r.createElement(rt,null))}const ot={colorModeToggle:"colorModeToggle_HELi"};function it(e){let{items:t}=e;return r.createElement(r.Fragment,null,t.map(((e,t)=>r.createElement(tt,{key:t,onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t})},r.createElement(qe,e)))))}function lt(e){let{left:t,right:n}=e;return r.createElement("div",{className:"navbar__inner"},r.createElement("div",{className:"navbar__items"},t),r.createElement("div",{className:"navbar__items navbar__items--right"},n))}function st(){const e=(0,L.e)(),t=(0,w.L)().navbar.items,[n,a]=function(e){function t(e){return"left"===(e.position??nt)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return r.createElement(lt,{left:r.createElement(r.Fragment,null,!e.disabled&&r.createElement(at,null),r.createElement(W,null),r.createElement(it,{items:n})),right:r.createElement(r.Fragment,null,r.createElement(it,{items:a}),r.createElement(Z,{className:ot.colorModeToggle}),!o&&r.createElement(Me,null,r.createElement(Ie,null)))})}function ut(){return r.createElement(Ye,null,r.createElement(st,null))}function ct(e){let{item:t}=e;const{to:n,href:a,label:o,prependBaseUrlToHref:i,...s}=t,u=(0,X.Z)(n),c=(0,X.Z)(a,{forcePrependBaseUrl:!0});return r.createElement(Q.Z,(0,l.Z)({className:"footer__link-item"},a?{href:i?c:a}:{to:u},s),o,a&&!(0,J.Z)(a)&&r.createElement(te.Z,null))}function dt(e){let{item:t}=e;return t.html?r.createElement("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):r.createElement("li",{key:t.href??t.to,className:"footer__item"},r.createElement(ct,{item:t}))}function pt(e){let{column:t}=e;return r.createElement("div",{className:"col footer__col"},r.createElement("div",{className:"footer__title"},t.title),r.createElement("ul",{className:"footer__items clean-list"},t.items.map(((e,t)=>r.createElement(dt,{key:t,item:e})))))}function ft(e){let{columns:t}=e;return r.createElement("div",{className:"row footer__links"},t.map(((e,t)=>r.createElement(pt,{key:t,column:e}))))}function mt(){return r.createElement("span",{className:"footer__link-separator"},"\xb7")}function ht(e){let{item:t}=e;return t.html?r.createElement("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):r.createElement(ct,{item:t})}function gt(e){let{links:t}=e;return r.createElement("div",{className:"footer__links text--center"},r.createElement("div",{className:"footer__links"},t.map(((e,n)=>r.createElement(r.Fragment,{key:n},r.createElement(ht,{item:e}),t.length!==n+1&&r.createElement(mt,null))))))}function bt(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?r.createElement(ft,{columns:t}):r.createElement(gt,{links:t})}var vt=n(6492);const yt={footerLogoLink:"footerLogoLink_NTrQ"};function wt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.C)(),o={light:n(t.src),dark:n(t.srcDark??t.src)};return r.createElement(vt.Z,{className:(0,a.Z)("footer__logo",t.className),alt:t.alt,sources:o,width:t.width,height:t.height,style:t.style})}function kt(e){let{logo:t}=e;return t.href?r.createElement(Q.Z,{href:t.href,className:yt.footerLogoLink,target:t.target},r.createElement(wt,{logo:t})):r.createElement(wt,{logo:t})}function St(e){let{copyright:t}=e;return r.createElement("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function Et(e){let{style:t,links:n,logo:o,copyright:i}=e;return r.createElement("footer",{className:(0,a.Z)("footer",{"footer--dark":"dark"===t})},r.createElement("div",{className:"container container-fluid"},n,(o||i)&&r.createElement("div",{className:"footer__bottom text--center"},o&&r.createElement("div",{className:"margin-bottom--sm"},o),i)))}function xt(){const{footer:e}=(0,w.L)();if(!e)return null;const{copyright:t,links:n,logo:a,style:o}=e;return r.createElement(Et,{style:o,links:n&&n.length>0&&r.createElement(bt,{links:n}),logo:a&&r.createElement(kt,{logo:a}),copyright:t&&r.createElement(St,{copyright:t})})}const _t=r.memo(xt),Tt=(0,R.Qc)([B.S,k.pl,z.OC,je.L5,i.VC,function(e){let{children:t}=e;return r.createElement(P.n2,null,r.createElement(L.M,null,r.createElement(O,null,t)))}]);function Ct(e){let{children:t}=e;return r.createElement(Tt,null,t)}function At(e){let{error:t,tryAgain:n}=e;return r.createElement("main",{className:"container margin-vert--xl"},r.createElement("div",{className:"row"},r.createElement("div",{className:"col col--6 col--offset-3"},r.createElement("h1",{className:"hero__title"},r.createElement(u.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed"},"This page crashed.")),r.createElement("div",{className:"margin-vert--lg"},r.createElement(Je,{onClick:n,className:"button button--primary shadow--lw"})),r.createElement("hr",null),r.createElement("div",{className:"margin-vert--md"},r.createElement(et,{error:t})))))}const Lt={mainWrapper:"mainWrapper_ZkMv"};function zt(e){const{children:t,noFooter:n,wrapperClassName:l,title:s,description:u}=e;return(0,b.t)(),r.createElement(Ct,null,r.createElement(i.d,{title:s,description:u}),r.createElement(y,null),r.createElement(A,null),r.createElement(ut,null),r.createElement("div",{id:d,className:(0,a.Z)(g.k.wrapper.main,Lt.mainWrapper,l)},r.createElement(o.Z,{fallback:e=>r.createElement(At,e)},t)),!n&&r.createElement(_t,null))}},4340:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d});var r=n(8028),a=n(9496),o=n(327),i=n(9962),l=n(7198),s=n(640),u=n(6492);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const o={light:(0,i.Z)(t.src),dark:(0,i.Z)(t.srcDark||t.src)},l=a.createElement(u.Z,{className:t.className,sources:o,height:t.height,width:t.width,alt:n,style:t.style});return r?a.createElement("div",{className:r},l):l}function d(e){const{siteConfig:{title:t}}=(0,l.Z)(),{navbar:{title:n,logo:u}}=(0,s.L)(),{imageClassName:d,titleClassName:p,...f}=e,m=(0,i.Z)(u?.href||"/"),h=n?"":t,g=u?.alt??h;return a.createElement(o.Z,(0,r.Z)({to:m},f,u?.target&&{target:u.target}),u&&a.createElement(c,{logo:u,alt:g,imageClassName:d}),null!=n&&a.createElement("b",{className:p},n))}},911:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(9496),a=n(8801);function o(e){let{locale:t,version:n,tag:o}=e;const i=t;return r.createElement(a.Z,null,t&&r.createElement("meta",{name:"docusaurus_locale",content:t}),n&&r.createElement("meta",{name:"docusaurus_version",content:n}),o&&r.createElement("meta",{name:"docusaurus_tag",content:o}),i&&r.createElement("meta",{name:"docsearch:language",content:i}),n&&r.createElement("meta",{name:"docsearch:version",content:n}),o&&r.createElement("meta",{name:"docsearch:docusaurus_tag",content:o}))}},6492:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});var r=n(8028),a=n(9496),o=n(5924),i=n(4996),l=n(6418);const s={themedImage:"themedImage_OEKu","themedImage--light":"themedImage--light_NWMK","themedImage--dark":"themedImage--dark_kaTq"};function u(e){const t=(0,i.Z)(),{colorMode:n}=(0,l.I)(),{sources:u,className:c,alt:d,...p}=e,f=t?"dark"===n?["dark"]:["light"]:["light","dark"];return a.createElement(a.Fragment,null,f.map((e=>a.createElement("img",(0,r.Z)({key:e,src:u[e],alt:d,className:(0,o.Z)(s.themedImage,s[`themedImage--${e}`],c)},p)))))}},8473:(e,t,n)=>{"use strict";n.d(t,{u:()=>s,z:()=>g});var r=n(8028),a=n(9496),o=n(6682),i=n(9010);const l="ease-in-out";function s(e){let{initialState:t}=e;const[n,r]=(0,a.useState)(t??!1),o=(0,a.useCallback)((()=>{r((e=>!e))}),[]);return{collapsed:n,setCollapsed:r,toggleCollapsed:o}}const u={display:"none",overflow:"hidden",height:"0px"},c={display:"block",overflow:"visible",height:"auto"};function d(e,t){const n=t?u:c;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function p(e){let{collapsibleRef:t,collapsed:n,animation:r}=e;const o=(0,a.useRef)(!1);(0,a.useEffect)((()=>{const e=t.current;function a(){const t=e.scrollHeight,n=r?.duration??function(e){if((0,i.n)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${r?.easing??l}`,height:`${t}px`}}function s(){const t=a();e.style.transition=t.transition,e.style.height=t.height}if(!o.current)return d(e,n),void(o.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(s(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,r])}function f(e){if(!o.Z.canUseDOM)return e?u:c}function m(e){let{as:t="div",collapsed:n,children:r,animation:o,onCollapseTransitionEnd:i,className:l,disableSSRStyle:s}=e;const u=(0,a.useRef)(null);return p({collapsibleRef:u,collapsed:n,animation:o}),a.createElement(t,{ref:u,style:s?void 0:f(n),onTransitionEnd:e=>{"height"===e.propertyName&&(d(u.current,n),i?.(n))},className:l},r)}function h(e){let{collapsed:t,...n}=e;const[o,i]=(0,a.useState)(!t),[l,s]=(0,a.useState)(t);return(0,a.useLayoutEffect)((()=>{t||i(!0)}),[t]),(0,a.useLayoutEffect)((()=>{o&&s(t)}),[o,t]),o?a.createElement(m,(0,r.Z)({},n,{collapsed:l})):null}function g(e){let{lazy:t,...n}=e;const r=t?h:m;return a.createElement(r,n)}},7849:(e,t,n)=>{"use strict";n.d(t,{nT:()=>m,pl:()=>f});var r=n(9496),a=n(4996),o=n(5005),i=n(1526),l=n(640);const s=(0,o.WA)("docusaurus.announcement.dismiss"),u=(0,o.WA)("docusaurus.announcement.id"),c=()=>"true"===s.get(),d=e=>s.set(String(e)),p=r.createContext(null);function f(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,l.L)(),t=(0,a.Z)(),[n,o]=(0,r.useState)((()=>!!t&&c()));(0,r.useEffect)((()=>{o(c())}),[]);const i=(0,r.useCallback)((()=>{d(!0),o(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&d(!1),!r&&c()||o(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return r.createElement(p.Provider,{value:n},t)}function m(){const e=(0,r.useContext)(p);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},6418:(e,t,n)=>{"use strict";n.d(t,{I:()=>g,S:()=>h});var r=n(9496),a=n(6682),o=n(1526),i=n(5005),l=n(640);const s=r.createContext(void 0),u="theme",c=(0,i.WA)(u),d={light:"light",dark:"dark"},p=e=>e===d.dark?d.dark:d.light,f=e=>a.Z.canUseDOM?p(document.documentElement.getAttribute("data-theme")):p(e),m=e=>{c.set(p(e))};function h(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,l.L)(),[a,o]=(0,r.useState)(f(e));(0,r.useEffect)((()=>{t&&c.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:a=!0}=r;t?(o(t),a&&m(t)):(o(n?window.matchMedia("(prefers-color-scheme: dark)").matches?d.dark:d.light:e),c.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",p(a))}),[a]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=c.get();null!==t&&i(p(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const s=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||s.current?s.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:a,setColorMode:i,get isDarkTheme(){return a===d.dark},setLightTheme(){i(d.light)},setDarkTheme(){i(d.dark)}})),[a,i])}();return r.createElement(s.Provider,{value:n},t)}function g(){const e=(0,r.useContext)(s);if(null==e)throw new o.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},553:(e,t,n)=>{"use strict";n.d(t,{J:()=>v,L5:()=>g,Oh:()=>y});var r=n(9496),a=n(3727),o=n(1026),i=n(640),l=n(3976),s=n(1526),u=n(5005);const c=e=>`docs-preferred-version-${e}`,d={save:(e,t,n)=>{(0,u.WA)(c(e),{persistence:t}).set(n)},read:(e,t)=>(0,u.WA)(c(e),{persistence:t}).get(),clear:(e,t)=>{(0,u.WA)(c(e),{persistence:t}).del()}},p=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=r.createContext(null);function m(){const e=(0,a._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[o,l]=(0,r.useState)((()=>p(n)));(0,r.useEffect)((()=>{l(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function a(e){const t=d.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(d.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,a(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[o,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),l((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function h(e){let{children:t}=e;const n=m();return r.createElement(f.Provider,{value:n},t)}function g(e){let{children:t}=e;return l.cE?r.createElement(h,null,t):r.createElement(r.Fragment,null,t)}function b(){const e=(0,r.useContext)(f);if(!e)throw new s.i6("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=o.m);const t=(0,a.zh)(e),[n,i]=b(),{preferredVersionName:l}=n[e];return{preferredVersion:t.versions.find((e=>e.name===l))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}function y(){const e=(0,a._r)(),[t]=b();function n(n){const r=e[n],{preferredVersionName:a}=t[n];return r.versions.find((e=>e.name===a))??null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,n(e)])))}},6002:(e,t,n)=>{"use strict";n.d(t,{V:()=>s,b:()=>l});var r=n(9496),a=n(1526);const o=Symbol("EmptyContext"),i=r.createContext(o);function l(e){let{children:t,name:n,items:a}=e;const o=(0,r.useMemo)((()=>n&&a?{name:n,items:a}:null),[n,a]);return r.createElement(i.Provider,{value:o},t)}function s(){const e=(0,r.useContext)(i);if(e===o)throw new a.i6("DocsSidebarProvider");return e}},6065:(e,t,n)=>{"use strict";n.d(t,{M:()=>d,e:()=>p});var r=n(9496),a=n(7265),o=n(3237),i=n(9656),l=n(640),s=n(1526);const u=r.createContext(void 0);function c(){const e=function(){const e=(0,a.HY)(),{items:t}=(0,l.L)().navbar;return 0===t.length&&!e.component}(),t=(0,o.i)(),n=!e&&"mobile"===t,[s,u]=(0,r.useState)(!1);(0,i.Rb)((()=>{if(s)return u(!1),!1}));const c=(0,r.useCallback)((()=>{u((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&u(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:c,shown:s})),[e,n,c,s])}function d(e){let{children:t}=e;const n=c();return r.createElement(u.Provider,{value:n},t)}function p(){const e=r.useContext(u);if(void 0===e)throw new s.i6("NavbarMobileSidebarProvider");return e}},7265:(e,t,n)=>{"use strict";n.d(t,{HY:()=>l,Zo:()=>s,n2:()=>i});var r=n(9496),a=n(1526);const o=r.createContext(null);function i(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return r.createElement(o.Provider,{value:n},t)}function l(){const e=(0,r.useContext)(o);if(!e)throw new a.i6("NavbarSecondaryMenuContentProvider");return e[0]}function s(e){let{component:t,props:n}=e;const i=(0,r.useContext)(o);if(!i)throw new a.i6("NavbarSecondaryMenuContentProvider");const[,l]=i,s=(0,a.Ql)(n);return(0,r.useEffect)((()=>{l({component:t,props:s})}),[l,t,s]),(0,r.useEffect)((()=>()=>l({component:null,props:null})),[l]),null}},2200:(e,t,n)=>{"use strict";n.d(t,{h:()=>a,t:()=>o});var r=n(9496);const a="navigation-with-keyboard";function o(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},8460:(e,t,n)=>{"use strict";n.d(t,{K:()=>l,M:()=>s});var r=n(9496),a=n(7198),o=n(9656);const i="q";function l(){return(0,o.Nc)(i)}function s(){const{siteConfig:{baseUrl:e,themeConfig:t}}=(0,a.Z)(),{algolia:{searchPagePath:n}}=t;return(0,r.useCallback)((t=>`${e}${n}?${i}=${encodeURIComponent(t)}`),[e,n])}},3237:(e,t,n)=>{"use strict";n.d(t,{i:()=>u});var r=n(9496),a=n(6682);const o={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function l(){return a.Z.canUseDOM?window.innerWidth>i?o.desktop:o.mobile:o.ssr}const s=!1;function u(){const[e,t]=(0,r.useState)((()=>s?"ssr":l()));return(0,r.useEffect)((()=>{function e(){t(l())}const n=s?window.setTimeout(e,1e3):void 0;return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),clearTimeout(n)}}),[]),e}},2333:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{}}},9010:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>r})},3976:(e,t,n)=>{"use strict";n.d(t,{Wl:()=>p,_F:()=>h,cE:()=>d,hI:()=>k,lO:()=>v,vY:()=>w,oz:()=>y,s1:()=>b});var r=n(9496),a=n(3442),o=n(1789),i=n(3727),l=n(553),s=n(6002);function u(e){return Array.from(new Set(e))}var c=n(884);const d=!!i._r;function p(e){if(e.href)return e.href;for(const t of e.items){if("link"===t.type)return t.href;if("category"===t.type){const e=p(t);if(e)return e}}}const f=(e,t)=>void 0!==e&&(0,c.Mg)(e,t),m=(e,t)=>e.some((e=>h(e,t)));function h(e,t){return"link"===e.type?f(e.href,t):"category"===e.type&&(f(e.href,t)||m(e.items,t))}function g(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const a=[];return function e(t){for(const o of t)if("category"===o.type&&((0,c.Mg)(o.href,n)||e(o.items))||"link"===o.type&&(0,c.Mg)(o.href,n)){return r&&"category"!==o.type||a.unshift(o),!0}return!1}(t),a}function b(){const e=(0,s.V)(),{pathname:t}=(0,a.TH)(),n=(0,i.gA)()?.pluginData.breadcrumbs;return!1!==n&&e?g({sidebarItems:e.items,pathname:t}):null}function v(e){const{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,l.J)(e),a=(0,i.yW)(e);return(0,r.useMemo)((()=>u([t,n,a].filter(Boolean))),[t,n,a])}function y(e,t){const n=v(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function w(e,t){const n=v(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${u(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function k(e){let{route:t,versionMetadata:n}=e;const r=(0,a.TH)(),i=t.routes,l=i.find((e=>(0,a.LX)(r.pathname,e)));if(!l)return null;const s=l.sidebar,u=s?n.docsSidebars[s]:void 0;return{docElement:(0,o.H)(i),sidebarName:s,sidebarItems:u}}},9709:(e,t,n)=>{"use strict";n.d(t,{p:()=>a});var r=n(7198);function a(e){const{siteConfig:t}=(0,r.Z)(),{title:n,titleDelimiter:a}=t;return e?.trim().length?`${e.trim()} ${a} ${n}`:n}},9656:(e,t,n)=>{"use strict";n.d(t,{Nc:()=>u,Rb:()=>l});var r=n(9496),a=n(3442),o=n(4241),i=n(1526);function l(e){!function(e){const t=(0,a.k6)(),n=(0,i.zX)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function s(e){return function(e){const t=(0,a.k6)();return(0,o.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}function u(e){const t=s(e)??"",n=function(){const e=(0,a.k6)();return(0,r.useCallback)(((t,n,r)=>{const a=new URLSearchParams(e.location.search);n?a.set(t,n):a.delete(t),(r?.push?e.push:e.replace)({search:a.toString()})}),[e])}();return[t,(0,r.useCallback)(((t,r)=>{n(e,t,r)}),[n,e])]}},9958:(e,t,n)=>{"use strict";n.d(t,{FG:()=>p,d:()=>c,VC:()=>f});var r=n(9496),a=n(5924),o=n(8801),i=n(554);function l(){const e=r.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var s=n(9962),u=n(9709);function c(e){let{title:t,description:n,keywords:a,image:i,children:l}=e;const c=(0,u.p)(t),{withBaseUrl:d}=(0,s.C)(),p=i?d(i,{absolute:!0}):void 0;return r.createElement(o.Z,null,t&&r.createElement("title",null,c),t&&r.createElement("meta",{property:"og:title",content:c}),n&&r.createElement("meta",{name:"description",content:n}),n&&r.createElement("meta",{property:"og:description",content:n}),a&&r.createElement("meta",{name:"keywords",content:Array.isArray(a)?a.join(","):a}),p&&r.createElement("meta",{property:"og:image",content:p}),p&&r.createElement("meta",{name:"twitter:image",content:p}),l)}const d=r.createContext(void 0);function p(e){let{className:t,children:n}=e;const i=r.useContext(d),l=(0,a.Z)(i,t);return r.createElement(d.Provider,{value:l},r.createElement(o.Z,null,r.createElement("html",{className:l})),n)}function f(e){let{children:t}=e;const n=l(),o=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const i=`plugin-id-${n.plugin.id}`;return r.createElement(p,{className:(0,a.Z)(o,i)},t)}},1526:(e,t,n)=>{"use strict";n.d(t,{D9:()=>i,Qc:()=>u,Ql:()=>s,i6:()=>l,zX:()=>o});var r=n(9496);const a=n(6682).Z.canUseDOM?r.useLayoutEffect:r.useEffect;function o(e){const t=(0,r.useRef)(e);return a((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function i(e){const t=(0,r.useRef)();return a((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function s(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return r.createElement(r.Fragment,null,e.reduceRight(((e,t)=>r.createElement(t,null,e)),n))}}},9390:(e,t,n)=>{"use strict";function r(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{F:()=>r})},884:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>l});var r=n(9496),a=n(1968),o=n(7198);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function l(){const{baseUrl:e}=(0,o.Z)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(a).flatMap((e=>e.routes??[])))}(n)}({routes:a.Z,baseUrl:e})),[e])}},9436:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>p,OC:()=>s,RF:()=>d});var r=n(9496),a=n(6682),o=n(4996),i=n(1526);const l=r.createContext(void 0);function s(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return r.createElement(l.Provider,{value:n},t)}function u(){const e=(0,r.useContext)(l);if(null==e)throw new i.i6("ScrollControllerProvider");return e}const c=()=>a.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function d(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),a=(0,r.useRef)(c()),o=(0,i.zX)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=c();o(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[o,n,...t])}function p(){const e=(0,r.useRef)(null),t=(0,o.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},772:(e,t,n)=>{"use strict";n.d(t,{HX:()=>i,_q:()=>s,os:()=>l});var r=n(3727),a=n(7198),o=n(553);const i="default";function l(e,t){return`docs-${e}-${t}`}function s(){const{i18n:e}=(0,a.Z)(),t=(0,r._r)(),n=(0,r.WS)(),s=(0,o.Oh)();const u=[i,...Object.keys(t).map((function(e){const r=n?.activePlugin.pluginId===e?n.activeVersion:void 0,a=s[e],o=t[e].versions.find((e=>e.isLast));return l(e,(r??a??o).name)}))];return{locale:e.currentLocale,tags:u}}},5005:(e,t,n)=>{"use strict";n.d(t,{WA:()=>s});n(9496),n(4241);const r="localStorage";function a(e){let{key:t,oldValue:n,newValue:r,storage:a}=e;if(n===r)return;const o=document.createEvent("StorageEvent");o.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,a),window.dispatchEvent(o)}function o(e){if(void 0===e&&(e=r),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,i||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),i=!0),null}var t}let i=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function s(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(e);const n=o(t?.persistence);return null===n?l:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{const r=n.getItem(e);n.setItem(e,t),a({key:e,oldValue:r,newValue:t,storage:n})}catch(r){console.error(`Docusaurus storage error, can't set ${e}=${t}`,r)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),a({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}},listen:t=>{try{const r=r=>{r.storageArea===n&&r.key===e&&t(r)};return window.addEventListener("storage",r),()=>window.removeEventListener("storage",r)}catch(r){return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`,r),()=>{}}}}}},1014:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var r=n(7198),a=n(3442),o=n(7286);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:l}}=(0,r.Z)(),{pathname:s}=(0,a.TH)(),u=(0,o.applyTrailingSlash)(s,{trailingSlash:n,baseUrl:e}),c=l===i?e:e.replace(`/${l}/`,"/"),d=u.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===i?`${c}`:`${c}${e}/`}(n)}${d}`}}}},7065:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var r=n(9496),a=n(3442),o=n(1526);function i(e){const t=(0,a.TH)(),n=(0,o.D9)(t),i=(0,o.zX)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},640:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(7198);function a(){return(0,r.Z)().siteConfig.themeConfig}},7389:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(7198);function a(){const{siteConfig:{themeConfig:e}}=(0,r.Z)();return e}},9100:(e,t,n)=>{"use strict";n.d(t,{l:()=>l});var r=n(9496),a=n(9390),o=n(9962),i=n(7389);function l(){const{withBaseUrl:e}=(0,o.C)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,i.L)();return(0,r.useCallback)((r=>{const o=new URL(r);if((0,a.F)(t,o.href))return r;const i=`${o.pathname+o.hash}`;return e(function(e,t){return t?e.replaceAll(new RegExp(t.from,"g"),t.to):e}(i,n))}),[e,t,n])}},7763:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[a]=e.split(/[#?]/),o="/"===a||a===r?a:(i=a,n?function(e){return e.endsWith("/")?e:`${e}/`}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(a,o)}},9525:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},7286:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var a=n(7763);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(a).default}});var o=n(9525);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return o.getErrorCausalChain}})},5924:(e,t,n)=>{"use strict";function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;ta});const a=function(){for(var e,t,n=0,a="";n{"use strict";n.d(t,{lX:()=>w,q_:()=>T,ob:()=>f,PP:()=>A,Ep:()=>p});var r=n(8028);function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r=0;p--){var f=i[p];"."===f?o(i,p):".."===f?(o(i,p),d++):d&&(o(i,p),d--)}if(!u)for(;d--;d)i.unshift("..");!u||""===i[0]||i[0]&&a(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};var l=n(8624);function s(e){return"/"===e.charAt(0)?e:"/"+e}function u(e){return"/"===e.charAt(0)?e.substr(1):e}function c(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function f(e,t,n,a){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),o.state=t):(void 0===(o=(0,r.Z)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=i(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function m(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;rt?n.splice(t,n.length-t,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=f(e,t,h(),w.location);c.confirmTransitionTo(a,r,n,(function(e){e&&(w.entries[w.index]=a,d({action:r,location:a}))}))},go:y,goBack:function(){y(-1)},goForward:function(){y(1)},canGo:function(e){var t=w.index+e;return t>=0&&t{"use strict";var r=n(6237),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return r.isMemo(e)?i:l[e.$$typeof]||a}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var u=Object.defineProperty,c=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var a=f(n);a&&a!==m&&e(t,a,r)}var i=c(n);d&&(i=i.concat(d(n)));for(var l=s(t),h=s(n),g=0;g{"use strict";e.exports=function(e,t,n,r,a,o,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[n,r,a,o,i,l],c=0;(s=new Error(t.replace(/%s/g,(function(){return u[c++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},901:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},5869:(e,t,n)=>{"use strict";n.r(t)},2777:(e,t,n)=>{"use strict";n.r(t)},9981:function(e,t,n){var r,a;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function a(e,t,n){return en?n:e}function o(e){return 100*(-1+e)}function i(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,r.minimum,1),n.status=1===e?null:e;var o=n.render(!t),u=o.querySelector(r.barSelector),c=r.speed,d=r.easing;return o.offsetWidth,l((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(u,i(e,c,d)),1===e?(s(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){s(o,{transition:"all "+c+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),c)}),c)):setTimeout(t,c)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");c(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var a,i=t.querySelector(r.barSelector),l=e?"-100":o(n.status||0),u=document.querySelector(r.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&f(a),u!=document.body&&c(u,"nprogress-custom-parent"),u.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function o(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&o(e,n,r);else o(e,a[1],a[2])}}();function u(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function c(e,t){var n=p(e),r=n+t;u(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);u(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},2767:e=>{"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(a){return!1}}()?Object.assign:function(e,a){for(var o,i,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),s=1;s{var r=n(901);e.exports=f,e.exports.parse=o,e.exports.compile=function(e,t){return l(o(e,t),t)},e.exports.tokensToFunction=l,e.exports.tokensToRegExp=p;var a=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function o(e,t){for(var n,r=[],o=0,i=0,l="",c=t&&t.delimiter||"/";null!=(n=a.exec(e));){var d=n[0],p=n[1],f=n.index;if(l+=e.slice(i,f),i=f+d.length,p)l+=p[1];else{var m=e[i],h=n[2],g=n[3],b=n[4],v=n[5],y=n[6],w=n[7];l&&(r.push(l),l="");var k=null!=h&&null!=m&&m!==h,S="+"===y||"*"===y,E="?"===y||"*"===y,x=n[2]||c,_=b||v;r.push({name:g||o++,prefix:h||"",delimiter:x,optional:E,repeat:S,partial:k,asterisk:!!w,pattern:_?u(_):w?".*":"[^"+s(x)+"]+?"})}}return i{"use strict";n.d(t,{Z:()=>o});var r=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);E+=S.value.length,S=S.next){var x=S.value;if(t.length>e.length)return;if(!(x instanceof a)){var _,T=1;if(v){if(!(_=o(k,E,e,b))||_.index>=e.length)break;var C=_.index,A=_.index+_[0].length,L=E;for(L+=S.value.length;C>=L;)L+=(S=S.next).value.length;if(E=L-=S.value.length,S.value instanceof a)continue;for(var z=S;z!==t.tail&&(Ld.reach&&(d.reach=O);var I=S.prev;if(P&&(I=s(t,I,P),E+=P.length),u(t,I,T),S=s(t,I,new a(p,g?r.tokenize(R,g):R,y,R)),N&&s(t,S,N),T>1){var D={cause:p+","+m,reach:O};i(e,t,n,S.prev,E,D),d&&D.reach>d.reach&&(d.reach=D.reach)}}}}}}function l(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var r=t.next,a={value:n,prev:t,next:r};return t.next=a,r.prev=a,e.length++,a}function u(e,t,n){for(var r=t.next,a=0;a"+o.content+""},r}(),a=r;r.default=r,a.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.languages.markup.doctype.inside["internal-subset"].inside=a.languages.markup,a.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(a.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:a.languages[t]},n.cdata=/^$/i;var r={"included-cdata":{pattern://i,inside:n}};r["language-"+t]={pattern:/[\s\S]+/,inside:a.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:r},a.languages.insertBefore("markup","cdata",o)}}),Object.defineProperty(a.languages.markup.tag,"addAttribute",{value:function(e,t){a.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:a.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.xml=a.languages.extend("markup",{}),a.languages.ssml=a.languages.xml,a.languages.atom=a.languages.xml,a.languages.rss=a.languages.xml,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},r={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:r},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:r},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:r.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:r.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var a=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=r.variable[1].inside,i=0;i]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},a.languages.c=a.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),a.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),a.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},a.languages.c.string],char:a.languages.c.char,comment:a.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:a.languages.c}}}}),a.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete a.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(a),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(a),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var r={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},a={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:r,number:a,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:r,number:a})}(a),a.languages.javascript=a.languages.extend("clike",{"class-name":[a.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),a.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,a.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:a.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:a.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:a.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:a.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:a.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),a.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),a.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),a.languages.markup&&(a.languages.markup.tag.addInlined("script","javascript"),a.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),a.languages.js=a.languages.javascript,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(a),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",a=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),o=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return"(?:"+a+"|"+o+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(o),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(a),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+a+o+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+o+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},s=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(a),a.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:a.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},a.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n0)){var l=p(/^\{$/,/^\}$/);if(-1===l)continue;for(var s=n;s=0&&f(u,"variable-input")}}}}function c(e){return t[n+e]}function d(e,t){t=t||0;for(var n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,a=r.inside["interpolation-punctuation"],o=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function s(t,n,r){var a={code:t,grammar:n,language:r};return e.hooks.run("before-tokenize",a),a.tokens=e.tokenize(a.code,a.grammar),e.hooks.run("after-tokenize",a),a.tokens}function u(t){var n={};n["interpolation-punctuation"]=a;var o=e.tokenize(t,n);if(3===o.length){var i=[1,1];i.push.apply(i,s(o[1],e.languages.javascript,"javascript")),o.splice.apply(o,i)}return new e.Token("interpolation",o,r.alias,t)}function c(t,n,r){var a=e.tokenize(t,{interpolation:{pattern:RegExp(o),lookbehind:!0}}),i=0,c={},d=s(a.map((function(e){if("string"==typeof e)return e;for(var n,a=e.content;-1!==t.indexOf(n=l(i++,r)););return c[n]=a,n})).join(""),n,r),p=Object.keys(c);return i=0,function e(t){for(var n=0;n=p.length)return;var r=t[n];if("string"==typeof r||"string"==typeof r.content){var a=p[i],o="string"==typeof r?r:r.content,l=o.indexOf(a);if(-1!==l){++i;var s=o.substring(0,l),d=u(c[a]),f=o.substring(l+a.length),m=[];if(s&&m.push(s),m.push(d),f){var h=[f];e(h),m.push.apply(m,h)}"string"==typeof r?(t.splice.apply(t,[n,1].concat(m)),n+=m.length-1):r.content=m}}else{var g=r.content;Array.isArray(g)?e(g):e([g])}}}(d),new e.Token(r,d,"language-"+r,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var d={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function p(e){return"string"==typeof e?e:Array.isArray(e)?e.map(p).join(""):p(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in d&&function t(n){for(var r=0,a=n.length;r]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(a),function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function o(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return r})).replace(//g,(function(){return a})),RegExp(e,t)}a=o(a).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=o(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:o(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:o(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var i=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(i).join(""):""},l=function(t){for(var n=[],r=0;r0&&n[n.length-1].tagName===i(a.content[0].content[1])&&n.pop():"/>"===a.content[a.content.length-1].content||n.push({tagName:i(a.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===a.type&&"{"===a.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===a.type&&"}"===a.content?n[n.length-1].openedBraces--:o=!0),(o||"string"==typeof a)&&n.length>0&&0===n[n.length-1].openedBraces){var s=i(a);r0&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(s=i(t[r-1])+s,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",s,null,s)}a.content&&"string"!=typeof a.content&&l(a.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||l(e.tokens)}))}(a),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var r=t[n],a=[];/^\w+$/.test(n)||a.push(/\w+/.exec(n)[0]),"diff"===n&&a.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+r+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:a,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(a),a.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},a.languages.go=a.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),a.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete a.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof o&&!o(e))return e;for(var a,l=i.length;-1!==n.code.indexOf(a=t(r,l));)++l;return i[l]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function i(l){for(var s=0;s=o.length);s++){var u=l[s];if("string"==typeof u||u.content&&"string"==typeof u.content){var c=o[a],d=n.tokenStack[c],p="string"==typeof u?u:u.content,f=t(r,c),m=p.indexOf(f);if(m>-1){++a;var h=p.substring(0,m),g=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),b=p.substring(m+f.length),v=[];h&&v.push.apply(v,i([h])),v.push(g),b&&v.push.apply(v,i([b])),"string"==typeof u?l.splice.apply(l,[s,1].concat(v)):u.content=v}}else u.content&&i(u.content)}return l}(n.tokens)}}}})}(a),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(a),a.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},a.languages.webmanifest=a.languages.json,a.languages.less=a.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),a.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),a.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},a.languages.objectivec=a.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete a.languages.objectivec["class-name"],a.languages.objc=a.languages.objectivec,a.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},a.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},a.languages.python["string-interpolation"].inside.interpolation.inside.rest=a.languages.python,a.languages.py=a.languages.python,a.languages.reason=a.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),a.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete a.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(a),a.languages.scss=a.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),a.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),a.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),a.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),a.languages.scss.atrule.inside.rest=a.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},r={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};r.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:r}},r.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:r}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:r}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:r}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:r}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:r.interpolation}},rest:r}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:r.interpolation,comment:r.comment,punctuation:/[{},]/}},func:r.func,string:r.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:r.interpolation,punctuation:/[{}()\[\];:.]/}}(a),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(a),a.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/};const o=a},1064:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},1884:(e,t,n)=>{const r=n(1064),a=n(6474),o=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...o,...Object.keys(Prism.languages)];a(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(2928).resolve(t)],delete Prism.languages[e],n(2928)(t),o.add(e)}))}i.silent=!1,e.exports=i},2928:(e,t,n)=>{var r={"./":1884};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=2928},6474:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n "));var l={},s=e[r];if(s){function u(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in l))for(var i in a(t,o),l[t]=!0,n[t])l[i]=!0}t(s.require,u),t(s.optional,u),t(s.modify,u)}n[r]=l,o.pop()}}return function(e){var t=n[e];return t||(a(e,r),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(o,i,l){var s=function(e){var t={};for(var n in e){var r=e[n];for(var a in r)if("meta"!=a){var o=r[a];t[a]="string"==typeof o?{title:o}:o}}return t}(o),u=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var a in n={},e){var o=e[a];t(o&&o.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}return n[r]||r}}(s);i=i.map(u),l=(l||[]).map(u);var c=n(i),d=n(l);i.forEach((function e(n){var r=s[n];t(r&&r.require,(function(t){t in d||(c[t]=!0,e(t))}))}));for(var p,f=r(s),m=c;a(m);){for(var h in p={},m){var g=s[h];t(g&&g.modify,(function(e){e in d&&(p[e]=!0)}))}for(var b in d)if(!(b in c))for(var v in f(b))if(v in c){p[b]=!0;break}for(var y in m=p)c[y]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,a){var o=a?a.series:void 0,i=a?a.parallel:e,l={},s={};function u(e){if(e in l)return l[e];s[e]=!0;var a,c=[];for(var d in t(e))d in n&&c.push(d);if(0===c.length)a=r(e);else{var p=i(c.map((function(e){var t=u(e);return delete s[e],t})));o?a=o(p,(function(){return r(e)})):r(e)}return l[e]=a}for(var c in n)u(c);var d=[];for(var p in s)d.push(l[p]);return i(d)}(f,c,t,n)}};return w}}();e.exports=t},4049:(e,t,n)=>{"use strict";var r=n(6257);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},507:(e,t,n)=>{e.exports=n(4049)()},6257:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},7439:(e,t,n)=>{"use strict";var r=n(9496),a=n(2767),o=n(8051);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n
+ + \ No newline at end of file diff --git a/zh/button/index.html b/zh/button/index.html index a6592b28a0..4ac654f99e 100644 --- a/zh/button/index.html +++ b/zh/button/index.html @@ -10,13 +10,13 @@ - - + +
-

Button

What is Button?​

The Button component allows users to trigger an action or perform a function by clicking on the button.

Properties​

PropertiesDescription
TextThe text displayed for the button
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
LoadingWhether the component should show a loading indicator.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
VariantAllow users to choose between two different styles for the button: fill or outline.
Theme ColorAllows users to specify the button's background color and opacity

Event handler​

EventDescription
ClickWhen a user click this button, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
hiddena Boolean value indicate the hidden status of button
hiddenDynamica Boolean value indicate the hidden dynamic status of button
loadingloading value
texttext value displayed on the button
tooltipTextvalue of tooltip text
variantvariant style of the button (fill or outlined)

Use case​

Next, we will demonstrate how to use button to control the form component dynamically.

Step 1 Add an action​

We have created a table named countries, including 5 columns:  num_code,  alpha_2_code, alpha_3_code, en_short_name, nationality. The countries’ names are what we want to use as options value, which are stored the en_short_name column.

Then we can create a new action for Supabase from the action list, listing all data in countries and named supabasedb1 

select distinct en_short_name as value from "Countries" order by value;

This is what we have as output:

Click Save and Run to activate this action.

Step 2 Add a Component​

First we add the Form component and label it as 'Survey'. Then we drag a Input component, a select component and a number input component into the form, labeling them as Name, Nationality, and Age.

We then map the countries values to select component by

  1. in mapped mode, set data sources to be {{supabasedb1.data}}
  2. in mapped option, set value to be {{item.value}}

Then we can configure the Submit button to control the Send method of Form component.

  1. In the Edit event handler, select Control component in action, select the form component that you want to update as the target of the event.
  2. Choose the Submit action.
- - +

Button

What is Button?​

The Button component allows users to trigger an action or perform a function by clicking on the button.

Properties​

PropertiesDescription
TextThe text displayed for the button
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
LoadingWhether the component should show a loading indicator.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
VariantAllow users to choose between two different styles for the button: fill or outline.
Theme ColorAllows users to specify the button's background color and opacity

Event handler​

EventDescription
ClickWhen a user click this button, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
hiddena Boolean value indicate the hidden status of button
hiddenDynamica Boolean value indicate the hidden dynamic status of button
loadingloading value
texttext value displayed on the button
tooltipTextvalue of tooltip text
variantvariant style of the button (fill or outlined)

Use case​

Next, we will demonstrate how to use button to control the form component dynamically.

Step 1 Add an action​

We have created a table named countries, including 5 columns:  num_code,  alpha_2_code, alpha_3_code, en_short_name, nationality. The countries’ names are what we want to use as options value, which are stored the en_short_name column.

Then we can create a new action for Supabase from the action list, listing all data in countries and named supabasedb1 

select distinct en_short_name as value from "Countries" order by value;

This is what we have as output:

Click Save and Run to activate this action.

Step 2 Add a Component​

First we add the Form component and label it as 'Survey'. Then we drag a Input component, a select component and a number input component into the form, labeling them as Name, Nationality, and Age.

We then map the countries values to select component by

  1. in mapped mode, set data sources to be {{supabasedb1.data}}
  2. in mapped option, set value to be {{item.value}}

Then we can configure the Submit button to control the Send method of Form component.

  1. In the Edit event handler, select Control component in action, select the form component that you want to update as the target of the event.
  2. Choose the Submit action.
+ + \ No newline at end of file diff --git a/zh/cascader/index.html b/zh/cascader/index.html index 4a438c6fac..b46d22e7a9 100644 --- a/zh/cascader/index.html +++ b/zh/cascader/index.html @@ -10,13 +10,13 @@ - - + +
-

Cascader

What is Cascader?​

A cascader is a type of input component that allows users to select hierarchical data, such as a category or subcategory from a dropdown menu. When a user selects an option from the dropdown menu, the cascader will automatically update to show the relevant subcategories or options in a nested dropdown menu.

For example, if you have a cascader input component for selecting a product category, the first dropdown menu may show all the available categories, such as "Electronics," "Clothing," and "Books." When a user selects "Electronics," the cascader will update to show the subcategories of electronics, such as "Phones," "Laptops," and "Tablets." This allows users to quickly and easily navigate through hierarchical data and select the option they need.

Properties​

Cascader's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Data SourceEach option must be JSON format and contain two keys, value and label. By using arrays, you can create options at the same level. And child options can be created by using "children" attribute.
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Expansion methodSet how cascader expands (by clicking or hovering)
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.

Methods​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Example Usage:

Cascader component support listening to the onChange event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onChange event of a Radio Group component, you would add an event trigger to that Radio Group component.
  2. In the Edit event handler, select Control component in action, select the Cascader component that you want to update as the target of the event.
  3. Choose the SetValue action and select the appropriate value for the Cascader component. This will be the value that the Cascader component have and will update when the event is triggered.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the Cascader input component will automatically update whenever the onChange event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected option value
FocusWhen a user moves the mouse cursor on the cascader component
BlurWhen a user is done selecting options and quit from focusing on the cascader component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
dataSourceModethe mode of the data source in cascader (default dynamic)
displayNamethe name of this component (ie cascader1)
expandTriggertrigger events (click)
valueSelected value
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
placeholderplaceholder value

Example: {{cascader1.value[0]}

Use case​

Next, we will demonstrate how to map the data from the data source to options in cascader dynamically.

Step 1 Add an action​

Let us create a table in Supabase called project, as well as a subtable called therapist which are aligned by project_id.

Then we can create a new action for Supabase from the action list, listing all data in project and named supabasedb1 

SELECT [project.id](http://project.id/) as project_id, [therapist.name](http://therapist.name/) as therapist_name from therapist join project on therapist.project_id = [project.id](http://project.id/)

Step 2 Transform the data​

Next, we can enable the transformer section under the Select Section. Within the text area, we can capture only the values and labels we need from the data and transform them into cascader-friendly options using JavaScript.

const transformedArray = data.reduce((acc, current) => {
  const existing = acc.find((item) => item.value === current.project_id);
  if (existing) {
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    existing.children.push(therapist);
  } else {
    const project = { value: current.project_id, label: current.project_name, children: [] };
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    project.children.push(therapist);
    acc.push(project);
  }
  return acc;
}, []);

return transformedArray;

The final action should be displayed the same as

cascader 1

Click Save and Run to activate this action.

Step 3 Configure the component​

After dragging a cascader component to the canvas, we can single click to configure its data source to {{supabasedb1.data}}

Optional: Here we set a default value of {{['a', '1']}} for corresponding {{['Psychotherapy'], ['James']}} labels.

cascader 2

- - +

Cascader

What is Cascader?​

A cascader is a type of input component that allows users to select hierarchical data, such as a category or subcategory from a dropdown menu. When a user selects an option from the dropdown menu, the cascader will automatically update to show the relevant subcategories or options in a nested dropdown menu.

For example, if you have a cascader input component for selecting a product category, the first dropdown menu may show all the available categories, such as "Electronics," "Clothing," and "Books." When a user selects "Electronics," the cascader will update to show the subcategories of electronics, such as "Phones," "Laptops," and "Tablets." This allows users to quickly and easily navigate through hierarchical data and select the option they need.

Properties​

Cascader's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Data SourceEach option must be JSON format and contain two keys, value and label. By using arrays, you can create options at the same level. And child options can be created by using "children" attribute.
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Expansion methodSet how cascader expands (by clicking or hovering)
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.

Methods​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Example Usage:

Cascader component support listening to the onChange event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onChange event of a Radio Group component, you would add an event trigger to that Radio Group component.
  2. In the Edit event handler, select Control component in action, select the Cascader component that you want to update as the target of the event.
  3. Choose the SetValue action and select the appropriate value for the Cascader component. This will be the value that the Cascader component have and will update when the event is triggered.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the Cascader input component will automatically update whenever the onChange event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected option value
FocusWhen a user moves the mouse cursor on the cascader component
BlurWhen a user is done selecting options and quit from focusing on the cascader component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
dataSourceModethe mode of the data source in cascader (default dynamic)
displayNamethe name of this component (ie cascader1)
expandTriggertrigger events (click)
valueSelected value
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
placeholderplaceholder value

Example: {{cascader1.value[0]}

Use case​

Next, we will demonstrate how to map the data from the data source to options in cascader dynamically.

Step 1 Add an action​

Let us create a table in Supabase called project, as well as a subtable called therapist which are aligned by project_id.

Then we can create a new action for Supabase from the action list, listing all data in project and named supabasedb1 

SELECT [project.id](http://project.id/) as project_id, [therapist.name](http://therapist.name/) as therapist_name from therapist join project on therapist.project_id = [project.id](http://project.id/)

Step 2 Transform the data​

Next, we can enable the transformer section under the Select Section. Within the text area, we can capture only the values and labels we need from the data and transform them into cascader-friendly options using JavaScript.

const transformedArray = data.reduce((acc, current) => {
  const existing = acc.find((item) => item.value === current.project_id);
  if (existing) {
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    existing.children.push(therapist);
  } else {
    const project = { value: current.project_id, label: current.project_name, children: [] };
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    project.children.push(therapist);
    acc.push(project);
  }
  return acc;
}, []);

return transformedArray;

The final action should be displayed the same as

cascader 1

Click Save and Run to activate this action.

Step 3 Configure the component​

After dragging a cascader component to the canvas, we can single click to configure its data source to {{supabasedb1.data}}

Optional: Here we set a default value of {{['a', '1']}} for corresponding {{['Psychotherapy'], ['James']}} labels.

cascader 2

+ + \ No newline at end of file diff --git a/zh/circle-progress/index.html b/zh/circle-progress/index.html index bbf82c5f97..26cc9c33be 100644 --- a/zh/circle-progress/index.html +++ b/zh/circle-progress/index.html @@ -10,13 +10,13 @@ - - + +
-

Circle progress

What is Circle progress?​

Circle Progress component is a visual element used to display progress or completion status in a circular format. It is often used to represent the progress of tasks, projects, or any other measurable value.

Properties​

PropertiesDescription
Valuethe percentage value represents the progress
Hide value labelwhether the value label is hidden
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.
AlignmentSet the alignment (align to left or right) of the label
Theme ColorAllows users to specify the button's background color and opacity
Stylesthe stroke width of the circle represents the progress

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
alignmentcontrol the position of the progress circle
colorcolor of the circle
displayNamethe name of this component (ie button1)
hiddenhidden status (true or false)
strokeWidthwidth of the circle stroke
tooltipTextvalue of tooltip text
trailColorcolor of the trail or the unfilled portion of the circle progress
valuepercentage value of the progress

Example: {{circleProgress1.value}}

Use case​

We will demonstrate how to make a form with a circle progress component showing the completion progress of the form.

Step 1 Add Components​

Add a form component with the default text "Form" and a "Submit" button to Canvas.

Add an input component, a number input component, and a circle progress component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the bar progress component to be "Progress".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

cir_layout

Step 2 Configure the component​

For the input and number input components, we can configure them to set the value in circle progress component to reflect the progress of completion.

  1. Click the input and number input component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the circle progress component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as
{
  {
    input1.value && numberInput1.value
      ? "100"
      : input1.value || numberInput1.value
      ? "50"
      : "0";
  }
}

cir_event_config

Note: need to set the event handler as described above to BOTH input and number input components.

For the "Submit" button component, we can configure it to submit the form if the form is completed (ie circle progress 100%)

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method and put {{circleProgress1.value == 100}} in Only run when

cir_sub_config

Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Error!" and description "Please fill out the form before submitting". Choose Error for type, put {{2000}} for the duration (2 seconds), and put {{circleProgress1.value<100}} for Only run when.

cir_err_config

We can also configure the **Form** component to show a success message when submit.

  1. Click the form component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Submitted Successfully". Choose Success for type, put {{2000}} for the duration (2 seconds).

cir_form_submit

Step 4 Test​

cir_test

- - +

Circle progress

What is Circle progress?​

Circle Progress component is a visual element used to display progress or completion status in a circular format. It is often used to represent the progress of tasks, projects, or any other measurable value.

Properties​

PropertiesDescription
Valuethe percentage value represents the progress
Hide value labelwhether the value label is hidden
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.
AlignmentSet the alignment (align to left or right) of the label
Theme ColorAllows users to specify the button's background color and opacity
Stylesthe stroke width of the circle represents the progress

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
alignmentcontrol the position of the progress circle
colorcolor of the circle
displayNamethe name of this component (ie button1)
hiddenhidden status (true or false)
strokeWidthwidth of the circle stroke
tooltipTextvalue of tooltip text
trailColorcolor of the trail or the unfilled portion of the circle progress
valuepercentage value of the progress

Example: {{circleProgress1.value}}

Use case​

We will demonstrate how to make a form with a circle progress component showing the completion progress of the form.

Step 1 Add Components​

Add a form component with the default text "Form" and a "Submit" button to Canvas.

Add an input component, a number input component, and a circle progress component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the bar progress component to be "Progress".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

cir_layout

Step 2 Configure the component​

For the input and number input components, we can configure them to set the value in circle progress component to reflect the progress of completion.

  1. Click the input and number input component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the circle progress component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as
{
  {
    input1.value && numberInput1.value
      ? "100"
      : input1.value || numberInput1.value
      ? "50"
      : "0";
  }
}

cir_event_config

Note: need to set the event handler as described above to BOTH input and number input components.

For the "Submit" button component, we can configure it to submit the form if the form is completed (ie circle progress 100%)

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method and put {{circleProgress1.value == 100}} in Only run when

cir_sub_config

Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Error!" and description "Please fill out the form before submitting". Choose Error for type, put {{2000}} for the duration (2 seconds), and put {{circleProgress1.value<100}} for Only run when.

cir_err_config

We can also configure the **Form** component to show a success message when submit.

  1. Click the form component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Submitted Successfully". Choose Success for type, put {{2000}} for the duration (2 seconds).

cir_form_submit

Step 4 Test​

cir_test

+ + \ No newline at end of file diff --git a/zh/clickhouse/index.html b/zh/clickhouse/index.html index 4cc8796da8..a765271b51 100644 --- a/zh/clickhouse/index.html +++ b/zh/clickhouse/index.html @@ -10,13 +10,13 @@ - - + +
-

ClickHouse

ClickHouse is a fast, column-oriented database management system that is designed for online analytical processing (OLAP) workloads. It is an open-source project that was created by Yandex, the Russian search engine company. ClickHouse is known for its ability to process large amounts of data quickly and efficiently, making it an ideal solution for big data analytics.

With Illa Cloud, you can deploy and manage ClickHouse clusters on the cloud, without having to worry about the underlying infrastructure and maintenance.

Illa Cloud provides a web-based interface for managing ClickHouse clusters, allowing you to monitor cluster performance, scale resources up or down, and configure backups and security settings. You can also use Illa Cloud to run queries on your ClickHouse data using a web-based query editor.

Create ClickHouse​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select ClickHouse from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready ClickHouse will display as shown.

click_config

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select ClickHouse from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to ClickHouse database.

click_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '9440'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the ClickHouse server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a ClickHouse resource, we can add the action by selecting ClickHouse from action list and choosing the Create action button.

click_resource_list

Now we have added the ClickHouse server as an action to our building page.

click

Configure ClickHouse​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

ClickHouse

ClickHouse is a fast, column-oriented database management system that is designed for online analytical processing (OLAP) workloads. It is an open-source project that was created by Yandex, the Russian search engine company. ClickHouse is known for its ability to process large amounts of data quickly and efficiently, making it an ideal solution for big data analytics.

With Illa Cloud, you can deploy and manage ClickHouse clusters on the cloud, without having to worry about the underlying infrastructure and maintenance.

Illa Cloud provides a web-based interface for managing ClickHouse clusters, allowing you to monitor cluster performance, scale resources up or down, and configure backups and security settings. You can also use Illa Cloud to run queries on your ClickHouse data using a web-based query editor.

Create ClickHouse​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select ClickHouse from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready ClickHouse will display as shown.

click_config

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select ClickHouse from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to ClickHouse database.

click_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '9440'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the ClickHouse server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a ClickHouse resource, we can add the action by selecting ClickHouse from action list and choosing the Create action button.

click_resource_list

Now we have added the ClickHouse server as an action to our building page.

click

Configure ClickHouse​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/zh/container/index.html b/zh/container/index.html index 178d0dbd30..2345498033 100644 --- a/zh/container/index.html +++ b/zh/container/index.html @@ -10,13 +10,13 @@ - - + +
-

Container

You can group related components together in a card using the Container component. Containers also support multiple views that allow you to separate content into distinct views that users can switch between.

Containers function like any other component. Once added, you can group components within it by pressing D or K and dragging them onto the Container.

Multiple views​

Containers support multiple views for grouping content. You can set views in Views section of the Inspect tab. Only one view is visible at a time and users switch between them by changing the current view of the Container component.

Use other components to change views​

You can use other components to control containers by add an event handlers to other components. The following methods are supported:

  1. Set current view by key
  2. Set current view by index
  3. Show the next (visible) view
  4. Show the previous (visible) view

Connect a tab to a container​

You can use a tab component to control a container by switching on Link to a container of the Inspect tab.

After linking to a container, labels of tabs will change to the labels of views. You can change views by clicking tabs without event handlers.

- - +

Container

You can group related components together in a card using the Container component. Containers also support multiple views that allow you to separate content into distinct views that users can switch between.

Containers function like any other component. Once added, you can group components within it by pressing D or K and dragging them onto the Container.

Multiple views​

Containers support multiple views for grouping content. You can set views in Views section of the Inspect tab. Only one view is visible at a time and users switch between them by changing the current view of the Container component.

Use other components to change views​

You can use other components to control containers by add an event handlers to other components. The following methods are supported:

  1. Set current view by key
  2. Set current view by index
  3. Show the next (visible) view
  4. Show the previous (visible) view

Connect a tab to a container​

You can use a tab component to control a container by switching on Link to a container of the Inspect tab.

After linking to a container, labels of tabs will change to the labels of views. You can change views by clicking tabs without event handlers.

+ + \ No newline at end of file diff --git a/zh/custom-domain/index.html b/zh/custom-domain/index.html index 04c23ec287..946df23a5c 100644 --- a/zh/custom-domain/index.html +++ b/zh/custom-domain/index.html @@ -10,13 +10,13 @@ - - + +
-

Custom domain

Please access this feature through ILLA Cloud > Settings > Branding

Configure Cloudflare proxy​

cloudflare

The image above is a page from Cloudflare. The configuration instructions are as follows.

FieldDescription
TypeChoose CNAME.
NameThe prefix of your domain name. For example, if the domain you configured in ILLA Cloud is illa.example.com, the name field is illa
TargetThe CNAME displayed on the domain configuration page of ILLA Cloud may be "cname-https.illa.sh"
Proxy statusTurn it on

Please note that if your domain name was not purchased through Cloudflare, you can migrate the NS (Name Server) records to Cloudflare and then proceed with the above configuration.

Customize domain in ILLA Cloud​

In addition to setting up the domain name, you can also customize the Favicon and Title. However, please note that if you haven't set up a domain name or are not accessing the website through your own domain, the Favicon and Title customization may not take effect.

FieldDescription
FaviconAppears next to the title in your browser tab. Recommended size is 3232, 5757, 7272, 114114, 144*144
TitleLimited to 60 characters or less.
Custom domainA fully qualified domain name, such as illacloud.example.com
- - +

Custom domain

Please access this feature through ILLA Cloud > Settings > Branding

Configure Cloudflare proxy​

cloudflare

The image above is a page from Cloudflare. The configuration instructions are as follows.

FieldDescription
TypeChoose CNAME.
NameThe prefix of your domain name. For example, if the domain you configured in ILLA Cloud is illa.example.com, the name field is illa
TargetThe CNAME displayed on the domain configuration page of ILLA Cloud may be "cname-https.illa.sh"
Proxy statusTurn it on

Please note that if your domain name was not purchased through Cloudflare, you can migrate the NS (Name Server) records to Cloudflare and then proceed with the above configuration.

Customize domain in ILLA Cloud​

In addition to setting up the domain name, you can also customize the Favicon and Title. However, please note that if you haven't set up a domain name or are not accessing the website through your own domain, the Favicon and Title customization may not take effect.

FieldDescription
FaviconAppears next to the title in your browser tab. Recommended size is 3232, 5757, 7272, 114114, 144*144
TitleLimited to 60 characters or less.
Custom domainA fully qualified domain name, such as illacloud.example.com
+ + \ No newline at end of file diff --git a/zh/data-grid/index.html b/zh/data-grid/index.html index b56641b339..60cf8414b5 100644 --- a/zh/data-grid/index.html +++ b/zh/data-grid/index.html @@ -10,13 +10,13 @@ - - + +
-

Data Grid

Data​

Property nameTypeDescription
selectedRowsArrayData of the selected rows. For example, when you select 1 row, and want to obtain theidof this row, use{{dataGrid1.selectedRows[0].id}}. You can useselectedRowsproperty both within the current DataGrid component and in other components or actions as well.
currentRowObjectData of the currentRow. For example, to set the "available" column to false when the value in the "service_years" column is greater than or equal to 4, or when the value in the "in_stock" column is false, and true for all other cases, you can use the following code:{{!(currentRow.service_years>=4\|\|currentRow.in_stock===false)}}. UnlikeselectedRows, you can only use thecurrentRowproperty within the current datagrid component . Therefore, if you expect a button click to trigger an action that operates on the data of the current row where the button is located, you can only use theselectedRowsproperty within the action to retrieve the data.
pageNumberThe index of the current page, a number starts from 0. For example, when the current page is 1, the index is 0.
pageSizeNumberThe number of data items loaded per page. You can set this value through the right-hand panel.

Configurable properties​

Data​

Property nameTypeDescription
Data sourceArray of objectsUsed to select the source of the data. For example,{{mysql1.data}}
LoadingBooleanUsed to set whether to display the loading status. For example,{{mysql1.isRunning}}
Primary keyStringUsed to set the primary key of your data.

Columns​

Property nameTypeDescription
Column titleArray of objectsUsed to configure the column names displayed in the user interface. By default, it uses column names from the data source.
Column typeStringUsed to configure the data type of the column through a dropdown selection. Different data types have different supported configuration options.
DescriptionStringUsed to configure a description of this column. When the user hovers their mouse over the column title, this description will be displayed.
Mapped valueArrayUsed to configure the values displayed in this column. By default, the data retrieved from the data source will be displayed directly. You can also use{{currentRow.columnName}}to configure the actual displayed value. The principle is to perform calculations on the data of the specified column in the same row, resulting in the entire column value. For example, if the data in thenamecolumn is the full name, and you want to display only the first letter with the remaining content replaced by two asterisks, you can configure it using{{currentRow.name.charAt(0)+"**"}}.
AggregationDropdown selectionUsed to set whether to display aggregate values. Supports aggregation based on Sum, Avg, Min, Max, and Size. If the column is not of numeric type, it only supports aggregation based on Size.
Enable users to sortBooleanUsed to set whether users are allowed to change the sorting based on this column.
Enable users to pinBooleanUsed to set whether users are allowed to pin the column to left or right.
Enable users to filterBooleanUsed to set whether users are allowed to set filters based on this column.
Enable users to hideBooleanUsed to set whether users are allowed to hide this column.
Enable users to aggregateBooleanUsed to set whether users are allowed to hide this column.
Enable users to set group byBooleanUsed to set whether users are allowed to group the data based on this column.
Enable users to resizeBooleanUsed to set whether users are allowed to change the width of this column.
Disable users to reorder columnsBooleanUsed to set whether users are prohibited from adjusting the order of columns.
AlignmentBooleanUsed to set the alignment of the column.

Supported column types and configuration​

Auto​

We will sample the data from each column to determine the data type of each column. If the data is of type Number, the Auto mode corresponds to the Number type. If the data is of type String, the Auto mode corresponds to the Text type. If the data is of type Array, the Auto mode corresponds to the Tag type. If the data is of type Boolean, the Auto mode corresponds to the Boolean type. If the data is of type Date, Time, or Date time, the Auto mode corresponds to the Date type.

Configuration​

No additional configuration

Text​

Displaying data through plain text.

Configuration​

No additional configuration

Date​

Displaying a timestamp in a more readable date format.

Configuration​
Property nameTypeDescription
FormatStringUse the date format specified by the ISO 8601 standard to set the format, such as yyyy-mm-dd.

Date time​

Displaying a timestamp in a more readable date or date time or time format.

Configuration​
Property nameTypeDescription
FormatStringUse the date format specified by the ISO 8601 standard to set the format, such as yyyy-mm-dd HH:mm:ss.

Tag​

Display data using tag types, and when the values of the tags are the same, the colors will also remain consistent. When the data in a column is an array, we separate each item in the array into individual tags.

Configuration​
Property nameTypeDescriptionExample
Tag colorObjectSpecify the colors for different tag values using an object.{{{"product manager":"green","UX/UI":"#FFFFFF"}}}

Number​

Display data using numerical types.

Configuration​
Property nameTypeDescriptionExample
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Percent​

Convert a numerical value into a percentage

Property nameTypeDescriptionExample
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Currency​

Add a currency symbol to a numerical value.

Property nameTypeDescriptionExample
Currency codeStringUsed to set the currency code. List of currency codeEUR
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Display the link directly and support clickable redirection.

Configuration​

No additional configuration, but please note that the link must be a complete URL starting with 'https://' or 'http://'. Otherwise, the redirection may fail.

Button​

Used to trigger actions when clicked.

Property nameTypeDescriptionExample
Event handler--Used to set what action is triggered upon clicking the button. If you want to perform operations on the current row's data upon clicking a button, please enable the row selection switch and use the single selection mode. And use{{dataGrid1.selectedRows[0].columnName}}to specify the data for the SQL or API request.If you want to set a button to delete the current row, the SQL statement for deletion would be as follows:DELETE FROM table_name WHERE id = {{dataGrid1.selectedRows[0].id}}
DisabledBooleanWhether or not to disable the button. For example,{{currentRow.link === "" ? true : false}}. When the link in this row is an empty string, disable the event handler.{{currentRow.link === "" ? true : false}}
Theme color--Used to set the color of the button.blue

Button group​

Place multiple buttons in a column to trigger different events individually.

Configuration​

Same as button.

Boolean​

Used to visually display the status of a certain attribute or whether a condition is met.

Configuration​

No additional configuration.

Image​

Used to display images

Configuration​
Property nameTypeDescriptionExample
Scale type--Used to set the image's fit mode. 1. Scale-down : Preserve the original aspect ratio of the image, scale down the image to fit within the designated area while maintaining its integrity. 2. Cover : Preserve the original aspect ratio of the image, fill the designated area, and crop any excess parts of the image. 3. Fill : Adjust the aspect ratio of the image to compress or stretch it to fill the designated area. 4. None : Do not resize the image, display it in its original aspect ratio and size, and crop any parts that exceed the designated area.If you want to set a button to delete the current row, the SQL statement for deletion would be as follows:DELETE FROM table_name WHERE id = {{dataGrid1.selectedRows[0].id}}

Avatar​

Configuration​
Property nameTypeDescriptionExample
Avatar typeStringUsed to set the avatar type, you can choose from Image, Icon, or Text (using the first letter of the text as the avatar). You can also use JavaScript code to set different avatar types based on different conditions:image,icon,textIf the avatar field is empty in the current row, use the text type. Otherwise, use the specified image type:{{currentRow.avatar===null?"text":"image"}}
Image sourceStringUsed to set the image source, it can be a URL or a base64 string with a prefix.{{currentRow.avatar}}
TextStringWe will extract the first letter of the string to use as the avatar.{{currentRow.name}}
Icon--Select an icon to use as the avatar.--
LabelStringUsed to set the label.{{currentRow.name}}
CaptionStringUsed to set the caption.{{currentRow.email}}
Hidden label--Used to set whether or not hide the label, and consequently hide the caption as well, please set the option for hiding the label.--
Theme color--Used to set the avatar color, this option only takes effect in text and icon mode. You can choose between "Auto" or "Custom". In "Auto" mode, we will randomly assign a color. In "Custom" mode, you can specify a color of your choice.--

Rating​

Configuration​
Property nameTypeDescriptionExample
Max countNumberUsed to set the maximum number of stars to be displayed.{{5}}

Markdown​

Used to show the data in markdown format. Only supports single-line Markdown here.

Configuration​
Property nameTypeDescriptionExample
Mapped valueStringWrite Markdown here, for example,## {{currentRow.name}}.## {{currentRow.name}}

Html​

Used to render the data as HTML.

Configuration​
Property nameTypeDescription
Mapped valueStringWrite HTML here.

Sort​

Property nameTypeDescription
Column--Used to set whether to sort based on a specific column by default.
Direction--Used to set the default sorting direction.

User selection​

Property nameTypeDescription
Allow row selection--Used to set whether or not to allow users to select the rows.
Selection mode--Used to set the selection mode, single selection or multiple selection.

Pagination​

Property nameTypeDescription
Pagination--Used to set whether or not to allow users to select the rows.
Enable server side pagination--Used to set the selection mode, single selection or multiple selection. In the data grid, we support the "limit offset" pagination method. You can refer to this document to learn about the configuration options: https://docs.illacloud.com/server-side-pagination
Total row countNumberUsed to set the total number of rows, you can create an action to query the total row count, such asSELECT COUNT(*) FROM users. And the total row count could be{{mysql1.data[0].count}}
Page sizeNumberUsed to set the number of data records returned per page during server-side pagination.

Toolbar​

Property nameDescription
DensityUsed to toggle the display of the Density function on the toolbar. Users can utilize this function to set the line height.
ColumnsUsed to set whether the column setting entry is displayed on the toolbar. The column setting entry allows for quick adjustment of which columns are displayed.
RefreshUsed to set whether the refresh button is displayed on the toolbar. When using this feature, be sure to add an event handler to listen to refresh events.
ExportUsed to set whether the export button is displayed. Users can utilize this function to export the filtered data.
Export allUsed to set whether the 'Export All' button is displayed. Users can utilize this function to export the data before filtering.
FilterUsed to set whether the filtering function is displayed. Users can utilize this function to filter data that meets certain criteria.
Quick filterUsed to set whether the quick filtering function is displayed. Users can utilize this function to query the entire table data through fuzzy matching.

Event​

You can listen to the following events.

EventDescription
Sort changeTrigger events when sorting changes.
Page changeTrigger events when current page changes.
RefreshTrigger events when click refresh button.
Filter changeTrigger events when change the filter.
Row selection changeTrigger events when change the selected rows.
Column visibility changeTrigger events when change the visibility of columns.

Method​

You can use other components to control a data grid and achieve the desired behavior.

Set filter​

Filter

{{
    {
        items: [
                    { id: 1, field: "size", operator: "=", value: 0 }, 
                    { id: 2, field: "owner", operator: "equals", value: "Mikiko" }
                ], 
        logicOperator: "or", 
        quickFilterValues: ['Mi'],
        quickFilterLogicOperator: "or"
     }
}}
Property nameTypeDescription
itemsArrayAn array used to set multiple filters. Each object in the array is a filtering condition.
idinitemsAnySet a unique ID for this filtering condition.
fieldinitemsStringSpecify which column the filter is working on.
operatorinitemsStringSpecify the operator. For number type, we support >, >=, =, <, <=. For string types, we support contains, equals, startsWith, endsWith, isEmpty, isNot, empty, isAnyOf.
valueinitemsStringUsed to set the value.
logicOperatorStringSpecify the relationship between multiple conditions, "and" or "or".
quickFilterValuesArraySpecify one or more strings for fuzzy searching.
quickFilterLogicOperatorStringSpecify the relationship between multiple fuzzy search strings, "and" or "or".

Set column visibility​

value

{{
    {
        "columnName": false
     }
}}

Set page​

Page: the index of the page starts with 0. For example, {{2}} means the page 3.

Set page size​

Value: number used to set the page size. For example, {{5}}.

Set row selection​

Value: An array used to set the selected rows. Before using this method, please turn on the allow user selection switch of the data grid. The number in the array means the index of the row which starts from 0. For example, {{[1,2]}} means selecting row 2 and row 3.

- - +

Data Grid

Data​

Property nameTypeDescription
selectedRowsArrayData of the selected rows. For example, when you select 1 row, and want to obtain theidof this row, use{{dataGrid1.selectedRows[0].id}}. You can useselectedRowsproperty both within the current DataGrid component and in other components or actions as well.
currentRowObjectData of the currentRow. For example, to set the "available" column to false when the value in the "service_years" column is greater than or equal to 4, or when the value in the "in_stock" column is false, and true for all other cases, you can use the following code:{{!(currentRow.service_years>=4\|\|currentRow.in_stock===false)}}. UnlikeselectedRows, you can only use thecurrentRowproperty within the current datagrid component . Therefore, if you expect a button click to trigger an action that operates on the data of the current row where the button is located, you can only use theselectedRowsproperty within the action to retrieve the data.
pageNumberThe index of the current page, a number starts from 0. For example, when the current page is 1, the index is 0.
pageSizeNumberThe number of data items loaded per page. You can set this value through the right-hand panel.

Configurable properties​

Data​

Property nameTypeDescription
Data sourceArray of objectsUsed to select the source of the data. For example,{{mysql1.data}}
LoadingBooleanUsed to set whether to display the loading status. For example,{{mysql1.isRunning}}
Primary keyStringUsed to set the primary key of your data.

Columns​

Property nameTypeDescription
Column titleArray of objectsUsed to configure the column names displayed in the user interface. By default, it uses column names from the data source.
Column typeStringUsed to configure the data type of the column through a dropdown selection. Different data types have different supported configuration options.
DescriptionStringUsed to configure a description of this column. When the user hovers their mouse over the column title, this description will be displayed.
Mapped valueArrayUsed to configure the values displayed in this column. By default, the data retrieved from the data source will be displayed directly. You can also use{{currentRow.columnName}}to configure the actual displayed value. The principle is to perform calculations on the data of the specified column in the same row, resulting in the entire column value. For example, if the data in thenamecolumn is the full name, and you want to display only the first letter with the remaining content replaced by two asterisks, you can configure it using{{currentRow.name.charAt(0)+"**"}}.
AggregationDropdown selectionUsed to set whether to display aggregate values. Supports aggregation based on Sum, Avg, Min, Max, and Size. If the column is not of numeric type, it only supports aggregation based on Size.
Enable users to sortBooleanUsed to set whether users are allowed to change the sorting based on this column.
Enable users to pinBooleanUsed to set whether users are allowed to pin the column to left or right.
Enable users to filterBooleanUsed to set whether users are allowed to set filters based on this column.
Enable users to hideBooleanUsed to set whether users are allowed to hide this column.
Enable users to aggregateBooleanUsed to set whether users are allowed to hide this column.
Enable users to set group byBooleanUsed to set whether users are allowed to group the data based on this column.
Enable users to resizeBooleanUsed to set whether users are allowed to change the width of this column.
Disable users to reorder columnsBooleanUsed to set whether users are prohibited from adjusting the order of columns.
AlignmentBooleanUsed to set the alignment of the column.

Supported column types and configuration​

Auto​

We will sample the data from each column to determine the data type of each column. If the data is of type Number, the Auto mode corresponds to the Number type. If the data is of type String, the Auto mode corresponds to the Text type. If the data is of type Array, the Auto mode corresponds to the Tag type. If the data is of type Boolean, the Auto mode corresponds to the Boolean type. If the data is of type Date, Time, or Date time, the Auto mode corresponds to the Date type.

Configuration​

No additional configuration

Text​

Displaying data through plain text.

Configuration​

No additional configuration

Date​

Displaying a timestamp in a more readable date format.

Configuration​
Property nameTypeDescription
FormatStringUse the date format specified by the ISO 8601 standard to set the format, such as yyyy-mm-dd.

Date time​

Displaying a timestamp in a more readable date or date time or time format.

Configuration​
Property nameTypeDescription
FormatStringUse the date format specified by the ISO 8601 standard to set the format, such as yyyy-mm-dd HH:mm:ss.

Tag​

Display data using tag types, and when the values of the tags are the same, the colors will also remain consistent. When the data in a column is an array, we separate each item in the array into individual tags.

Configuration​
Property nameTypeDescriptionExample
Tag colorObjectSpecify the colors for different tag values using an object.{{{"product manager":"green","UX/UI":"#FFFFFF"}}}

Number​

Display data using numerical types.

Configuration​
Property nameTypeDescriptionExample
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Percent​

Convert a numerical value into a percentage

Property nameTypeDescriptionExample
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Currency​

Add a currency symbol to a numerical value.

Property nameTypeDescriptionExample
Currency codeStringUsed to set the currency code. List of currency codeEUR
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocalesde-DE

Display the link directly and support clickable redirection.

Configuration​

No additional configuration, but please note that the link must be a complete URL starting with 'https://' or 'http://'. Otherwise, the redirection may fail.

Button​

Used to trigger actions when clicked.

Property nameTypeDescriptionExample
Event handler--Used to set what action is triggered upon clicking the button. If you want to perform operations on the current row's data upon clicking a button, please enable the row selection switch and use the single selection mode. And use{{dataGrid1.selectedRows[0].columnName}}to specify the data for the SQL or API request.If you want to set a button to delete the current row, the SQL statement for deletion would be as follows:DELETE FROM table_name WHERE id = {{dataGrid1.selectedRows[0].id}}
DisabledBooleanWhether or not to disable the button. For example,{{currentRow.link === "" ? true : false}}. When the link in this row is an empty string, disable the event handler.{{currentRow.link === "" ? true : false}}
Theme color--Used to set the color of the button.blue

Button group​

Place multiple buttons in a column to trigger different events individually.

Configuration​

Same as button.

Boolean​

Used to visually display the status of a certain attribute or whether a condition is met.

Configuration​

No additional configuration.

Image​

Used to display images

Configuration​
Property nameTypeDescriptionExample
Scale type--Used to set the image's fit mode. 1. Scale-down : Preserve the original aspect ratio of the image, scale down the image to fit within the designated area while maintaining its integrity. 2. Cover : Preserve the original aspect ratio of the image, fill the designated area, and crop any excess parts of the image. 3. Fill : Adjust the aspect ratio of the image to compress or stretch it to fill the designated area. 4. None : Do not resize the image, display it in its original aspect ratio and size, and crop any parts that exceed the designated area.If you want to set a button to delete the current row, the SQL statement for deletion would be as follows:DELETE FROM table_name WHERE id = {{dataGrid1.selectedRows[0].id}}

Avatar​

Configuration​
Property nameTypeDescriptionExample
Avatar typeStringUsed to set the avatar type, you can choose from Image, Icon, or Text (using the first letter of the text as the avatar). You can also use JavaScript code to set different avatar types based on different conditions:image,icon,textIf the avatar field is empty in the current row, use the text type. Otherwise, use the specified image type:{{currentRow.avatar===null?"text":"image"}}
Image sourceStringUsed to set the image source, it can be a URL or a base64 string with a prefix.{{currentRow.avatar}}
TextStringWe will extract the first letter of the string to use as the avatar.{{currentRow.name}}
Icon--Select an icon to use as the avatar.--
LabelStringUsed to set the label.{{currentRow.name}}
CaptionStringUsed to set the caption.{{currentRow.email}}
Hidden label--Used to set whether or not hide the label, and consequently hide the caption as well, please set the option for hiding the label.--
Theme color--Used to set the avatar color, this option only takes effect in text and icon mode. You can choose between "Auto" or "Custom". In "Auto" mode, we will randomly assign a color. In "Custom" mode, you can specify a color of your choice.--

Rating​

Configuration​
Property nameTypeDescriptionExample
Max countNumberUsed to set the maximum number of stars to be displayed.{{5}}

Markdown​

Used to show the data in markdown format. Only supports single-line Markdown here.

Configuration​
Property nameTypeDescriptionExample
Mapped valueStringWrite Markdown here, for example,## {{currentRow.name}}.## {{currentRow.name}}

Html​

Used to render the data as HTML.

Configuration​
Property nameTypeDescription
Mapped valueStringWrite HTML here.

Sort​

Property nameTypeDescription
Column--Used to set whether to sort based on a specific column by default.
Direction--Used to set the default sorting direction.

User selection​

Property nameTypeDescription
Allow row selection--Used to set whether or not to allow users to select the rows.
Selection mode--Used to set the selection mode, single selection or multiple selection.

Pagination​

Property nameTypeDescription
Pagination--Used to set whether or not to allow users to select the rows.
Enable server side pagination--Used to set the selection mode, single selection or multiple selection. In the data grid, we support the "limit offset" pagination method. You can refer to this document to learn about the configuration options: https://docs.illacloud.com/server-side-pagination
Total row countNumberUsed to set the total number of rows, you can create an action to query the total row count, such asSELECT COUNT(*) FROM users. And the total row count could be{{mysql1.data[0].count}}
Page sizeNumberUsed to set the number of data records returned per page during server-side pagination.

Toolbar​

Property nameDescription
DensityUsed to toggle the display of the Density function on the toolbar. Users can utilize this function to set the line height.
ColumnsUsed to set whether the column setting entry is displayed on the toolbar. The column setting entry allows for quick adjustment of which columns are displayed.
RefreshUsed to set whether the refresh button is displayed on the toolbar. When using this feature, be sure to add an event handler to listen to refresh events.
ExportUsed to set whether the export button is displayed. Users can utilize this function to export the filtered data.
Export allUsed to set whether the 'Export All' button is displayed. Users can utilize this function to export the data before filtering.
FilterUsed to set whether the filtering function is displayed. Users can utilize this function to filter data that meets certain criteria.
Quick filterUsed to set whether the quick filtering function is displayed. Users can utilize this function to query the entire table data through fuzzy matching.

Event​

You can listen to the following events.

EventDescription
Sort changeTrigger events when sorting changes.
Page changeTrigger events when current page changes.
RefreshTrigger events when click refresh button.
Filter changeTrigger events when change the filter.
Row selection changeTrigger events when change the selected rows.
Column visibility changeTrigger events when change the visibility of columns.

Method​

You can use other components to control a data grid and achieve the desired behavior.

Set filter​

Filter

{{
    {
        items: [
                    { id: 1, field: "size", operator: "=", value: 0 }, 
                    { id: 2, field: "owner", operator: "equals", value: "Mikiko" }
                ], 
        logicOperator: "or", 
        quickFilterValues: ['Mi'],
        quickFilterLogicOperator: "or"
     }
}}
Property nameTypeDescription
itemsArrayAn array used to set multiple filters. Each object in the array is a filtering condition.
idinitemsAnySet a unique ID for this filtering condition.
fieldinitemsStringSpecify which column the filter is working on.
operatorinitemsStringSpecify the operator. For number type, we support >, >=, =, <, <=. For string types, we support contains, equals, startsWith, endsWith, isEmpty, isNot, empty, isAnyOf.
valueinitemsStringUsed to set the value.
logicOperatorStringSpecify the relationship between multiple conditions, "and" or "or".
quickFilterValuesArraySpecify one or more strings for fuzzy searching.
quickFilterLogicOperatorStringSpecify the relationship between multiple fuzzy search strings, "and" or "or".

Set column visibility​

value

{{
    {
        "columnName": false
     }
}}

Set page​

Page: the index of the page starts with 0. For example, {{2}} means the page 3.

Set page size​

Value: number used to set the page size. For example, {{5}}.

Set row selection​

Value: An array used to set the selected rows. Before using this method, please turn on the allow user selection switch of the data grid. The number in the array means the index of the row which starts from 0. For example, {{[1,2]}} means selecting row 2 and row 3.

+ + \ No newline at end of file diff --git a/zh/date-range/index.html b/zh/date-range/index.html index e0101f56d8..fa3070455d 100644 --- a/zh/date-range/index.html +++ b/zh/date-range/index.html @@ -10,13 +10,13 @@ - - + +
-

Date range

What is Date range?​

Date Range component is a UI component that allows users to select a range of dates from a calendar interface, typically used in forms or data entry interfaces where the user needs to specify a start and end date range.

When a Date Range component is added to canvas, it displays two calendar interfaces side by side. One calendar interface is used to select the start date, while the other is used to select the end date. The user can navigate through the calendars by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The selected dates will be displayed in the input fields.

Properties​

Date Range's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Start dateThe default start date value of the component
End dateThe default end date value of the component
FormatA valid date format string. See https://day.js.org/docs/en/parse/string-format.
Start PlaceholderThe value will be shown when the start date input field is empty.
End PlaceholderThe value will be shown when the end date input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following two methods:

  • setStartValue

To set the start date value, for example, {{"value1"}}

PropertiesDescription
ValueInput start value
  • setEndValue

To set the end date value, for example, {{"value2"}}

PropertiesDescription
ValueInput end value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
dateFormatthe formate of date
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie cascader1)
startPlaceholderplaceholder value for start date
endPlaceholderplaceholder value for end date
eventsan Array value for sequence of events
formDataKeythe Form Data Key of Date
hiddena Boolean value indicate the hidden status of button
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
valueSelected value

Example: {{dateRange1.value[0]}}

Use case​

Next, we will demonstrate how to map the data from the data source to date range and set end value to today's date with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the startedAt and expiredAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date range component and a button component to the canvas. For default start date value of the date range component, we use the startedAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].startedAt}}

Similarly, for default end date value, we use expiredAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].expiredAt}}

We also labeled the button as 'Update' as shown below.

date_range_0

Step 3 Configure the component​

For the button component, we can configure it to set the end date value in date range component to today's date.

  1. In the Edit event handler, select Control component in action, select the date range component that you want to update as the target of the event.
  2. Choose the setEndValue action and set the End date as {{currentUserInfo.updatedAt}}

date_range_config

Step 4 Test​

Now that when you click the 'Update' button, the end date should change to today's date. As for here, we have 2023-5-6 but it may be different when you are testing it.

date_range_1

- - +

Date range

What is Date range?​

Date Range component is a UI component that allows users to select a range of dates from a calendar interface, typically used in forms or data entry interfaces where the user needs to specify a start and end date range.

When a Date Range component is added to canvas, it displays two calendar interfaces side by side. One calendar interface is used to select the start date, while the other is used to select the end date. The user can navigate through the calendars by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The selected dates will be displayed in the input fields.

Properties​

Date Range's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Start dateThe default start date value of the component
End dateThe default end date value of the component
FormatA valid date format string. See https://day.js.org/docs/en/parse/string-format.
Start PlaceholderThe value will be shown when the start date input field is empty.
End PlaceholderThe value will be shown when the end date input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following two methods:

  • setStartValue

To set the start date value, for example, {{"value1"}}

PropertiesDescription
ValueInput start value
  • setEndValue

To set the end date value, for example, {{"value2"}}

PropertiesDescription
ValueInput end value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
dateFormatthe formate of date
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie cascader1)
startPlaceholderplaceholder value for start date
endPlaceholderplaceholder value for end date
eventsan Array value for sequence of events
formDataKeythe Form Data Key of Date
hiddena Boolean value indicate the hidden status of button
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
valueSelected value

Example: {{dateRange1.value[0]}}

Use case​

Next, we will demonstrate how to map the data from the data source to date range and set end value to today's date with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the startedAt and expiredAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date range component and a button component to the canvas. For default start date value of the date range component, we use the startedAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].startedAt}}

Similarly, for default end date value, we use expiredAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].expiredAt}}

We also labeled the button as 'Update' as shown below.

date_range_0

Step 3 Configure the component​

For the button component, we can configure it to set the end date value in date range component to today's date.

  1. In the Edit event handler, select Control component in action, select the date range component that you want to update as the target of the event.
  2. Choose the setEndValue action and set the End date as {{currentUserInfo.updatedAt}}

date_range_config

Step 4 Test​

Now that when you click the 'Update' button, the end date should change to today's date. As for here, we have 2023-5-6 but it may be different when you are testing it.

date_range_1

+ + \ No newline at end of file diff --git a/zh/date-time/index.html b/zh/date-time/index.html index 44fba2d6ea..5ebd43521a 100644 --- a/zh/date-time/index.html +++ b/zh/date-time/index.html @@ -10,13 +10,13 @@ - - + +
-

Date time

What is Date Time?​

Date Time component is a component that allows users to select a date and time from a calendar and 24 hours interface, typically used in forms or data entry interfaces where the user needs to specify a specific date and time.

When a Date Time component is added to canvas, it displays a calendar and clock interface. The user can navigate through the calendar by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The clock interface displays hours, minutes, and seconds that the user can adjust by moving mouse cursor or using the up and down arrows.

Properties​

Date Time's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input date time value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
maxDatethe value of maximum date
minDatethe value of minimum date
minuteStepminute step size value
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput date and time value
validateMessagestring value for validate message

Example: {{dateTime1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to date time and set to current date and time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date time component and a button component to the canvas. For default value of the date component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Now" as shown below

date_time_0

Step 3 Configure the component​

For the button component, we can configure it to set the date in date time component to current date and time.

  1. In the Edit event handler, select Control component in action, select the date time component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

date_time_config

Step 4 Test​

Now that when you click the "Now" button, the time should change to today's date. As for here, we have 2023-5-6 11:19:47 but it may be different when you are testing it.

date_time_1

- - +

Date time

What is Date Time?​

Date Time component is a component that allows users to select a date and time from a calendar and 24 hours interface, typically used in forms or data entry interfaces where the user needs to specify a specific date and time.

When a Date Time component is added to canvas, it displays a calendar and clock interface. The user can navigate through the calendar by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The clock interface displays hours, minutes, and seconds that the user can adjust by moving mouse cursor or using the up and down arrows.

Properties​

Date Time's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input date time value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
maxDatethe value of maximum date
minDatethe value of minimum date
minuteStepminute step size value
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput date and time value
validateMessagestring value for validate message

Example: {{dateTime1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to date time and set to current date and time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date time component and a button component to the canvas. For default value of the date component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Now" as shown below

date_time_0

Step 3 Configure the component​

For the button component, we can configure it to set the date in date time component to current date and time.

  1. In the Edit event handler, select Control component in action, select the date time component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

date_time_config

Step 4 Test​

Now that when you click the "Now" button, the time should change to today's date. As for here, we have 2023-5-6 11:19:47 but it may be different when you are testing it.

date_time_1

+ + \ No newline at end of file diff --git a/zh/date/index.html b/zh/date/index.html index 3a38636add..ebfba6c94a 100644 --- a/zh/date/index.html +++ b/zh/date/index.html @@ -10,13 +10,13 @@ - - + +
-

Date

What is Date?​

The Date component is a component that allows users to select a date from a calendar interface. The Date component is typically used in forms or data entry interfaces where the user needs to select a specific date.

When a Date component is added to the canvas, it displays a calendar interface by default. The user can navigate through the calendar by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The selected date will be displayed in the input field.

Properties​

Date's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input date value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
dateFormatthe formate of date
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
maxDatethe value of maximum date
minDatethe value of minimum date
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput value

Example: {{date1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to date and set to current date with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date component and a button component to the canvas. For default value of the date component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Today" as shown below

date_time0

Step 3 Configure the component​

For the button component, we can configure it to set the date in date component to today's date.

  1. In the Edit event handler, select Control component in action, select the date component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

date_confg

Step 4 Test​

Now that when you click the "today" button, the time should change to today's date. As for here, we have 2023-5-6 but it may be different when you are testing it.

date_time1

- - +

Date

What is Date?​

The Date component is a component that allows users to select a date from a calendar interface. The Date component is typically used in forms or data entry interfaces where the user needs to select a specific date.

When a Date component is added to the canvas, it displays a calendar interface by default. The user can navigate through the calendar by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The selected date will be displayed in the input field.

Properties​

Date's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input date value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected date value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
dateFormatthe formate of date
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
maxDatethe value of maximum date
minDatethe value of minimum date
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput value

Example: {{date1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to date and set to current date with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a date component and a button component to the canvas. For default value of the date component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Today" as shown below

date_time0

Step 3 Configure the component​

For the button component, we can configure it to set the date in date component to today's date.

  1. In the Edit event handler, select Control component in action, select the date component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

date_confg

Step 4 Test​

Now that when you click the "today" button, the time should change to today's date. As for here, we have 2023-5-6 but it may be different when you are testing it.

date_time1

+ + \ No newline at end of file diff --git a/zh/divider/index.html b/zh/divider/index.html index b0ffb795b2..43a49916ce 100644 --- a/zh/divider/index.html +++ b/zh/divider/index.html @@ -10,13 +10,13 @@ - - + +
-

Divider

What is Divider?​

In ILLA Cloud, the divider component is a visual element that helps to separate or divide sections of content within a web application. It is a simple horizontal line or vertical line that can be inserted between different sections or components to improve the visual organization and clarity of the user interface.

Properties​

PropertiesDescription
Textadd additional information to the divider component
Text aligndetermines the horizontal alignment of the text within the divider component
Hiddenhide the divider component from the user interface
Text sizeadjust the font size of the text within the divider component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemedefines the color of the text in the component
displayNamerepresents the name or label assigned to the component
fsfile system (fs) associated with the divider
hiddenboolean value that determines whether the component is visible or hidden
textthe text value

Example: {{divider1.text}}

Use case​

You can place it anywhere you want to divide the page into two sections. Here we will show the divider with three different text alignments.

divider_test

- - +

Divider

What is Divider?​

In ILLA Cloud, the divider component is a visual element that helps to separate or divide sections of content within a web application. It is a simple horizontal line or vertical line that can be inserted between different sections or components to improve the visual organization and clarity of the user interface.

Properties​

PropertiesDescription
Textadd additional information to the divider component
Text aligndetermines the horizontal alignment of the text within the divider component
Hiddenhide the divider component from the user interface
Text sizeadjust the font size of the text within the divider component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemedefines the color of the text in the component
displayNamerepresents the name or label assigned to the component
fsfile system (fs) associated with the divider
hiddenboolean value that determines whether the component is visible or hidden
textthe text value

Example: {{divider1.text}}

Use case​

You can place it anywhere you want to divide the page into two sections. Here we will show the divider with three different text alignments.

divider_test

+ + \ No newline at end of file diff --git a/zh/editable-text/index.html b/zh/editable-text/index.html index 99f723b2ee..7c6a2947ce 100644 --- a/zh/editable-text/index.html +++ b/zh/editable-text/index.html @@ -10,13 +10,13 @@ - - + +
-

Editable text

What is Editable Text?​

Editable text allows users to create and manipulate text within their applications. With this component, users can easily input and edit text directly on the interface, making it ideal for creating dynamic and interactive content.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Patternspecify a pattern that the input value must match
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following five methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the text area input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit focusing on component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
prefixTextvalue of the text prefix
suffixTextvalue of the text suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
regexapply pattern-based validation to the input text in the text area
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{editable_text1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to the editable text with a button.

Step 1 Add an action​

Let us create a table in REST API with columns id, name, and age. The id 1 document is what we want to show in the form component.

rest_get_all

Then we can create a new action for REST API from the action list in the app we want to build, listing all the data in the bucket and named restapi1.

Select GET for **Action Type**. In URL Parameters, put id for key and 1 for value.

Click Save and Run to activate this action.

rest_get_1

Step 2 Add Components​

Next, we can add an editable text component and a button component to the canvas.

We label editable text to be 'Name' and labeled the button as "Set value" as shown below

edit_layout

Step 3 Configure the component​

For the button component, we can configure it to set the value in editable text component to the data of the document we read from restapi.

  1. In the Edit event handler, select Control component in action, and select the editable text component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{restapi1.data[0]["name"]}}

edit_event_config

Step 4 Test​

Now that when you click the "Set value" button, the value should change to the text.

edit_test

- - +

Editable text

What is Editable Text?​

Editable text allows users to create and manipulate text within their applications. With this component, users can easily input and edit text directly on the interface, making it ideal for creating dynamic and interactive content.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Patternspecify a pattern that the input value must match
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following five methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the text area input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit focusing on component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
prefixTextvalue of the text prefix
suffixTextvalue of the text suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
regexapply pattern-based validation to the input text in the text area
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{editable_text1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to the editable text with a button.

Step 1 Add an action​

Let us create a table in REST API with columns id, name, and age. The id 1 document is what we want to show in the form component.

rest_get_all

Then we can create a new action for REST API from the action list in the app we want to build, listing all the data in the bucket and named restapi1.

Select GET for **Action Type**. In URL Parameters, put id for key and 1 for value.

Click Save and Run to activate this action.

rest_get_1

Step 2 Add Components​

Next, we can add an editable text component and a button component to the canvas.

We label editable text to be 'Name' and labeled the button as "Set value" as shown below

edit_layout

Step 3 Configure the component​

For the button component, we can configure it to set the value in editable text component to the data of the document we read from restapi.

  1. In the Edit event handler, select Control component in action, and select the editable text component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{restapi1.data[0]["name"]}}

edit_event_config

Step 4 Test​

Now that when you click the "Set value" button, the value should change to the text.

edit_test

+ + \ No newline at end of file diff --git a/zh/elastic-search/index.html b/zh/elastic-search/index.html index 24de71b45b..118abfb339 100644 --- a/zh/elastic-search/index.html +++ b/zh/elastic-search/index.html @@ -10,13 +10,13 @@ - - + +
-

Elastic Search

Elastic search is a distributed, RESTful search and analytics engine that is commonly used to index and search large volumes of data. In Illa, you can use the Elasticsearch data source to connect to Elasticsearch instances and perform queries and aggregations on your data.

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Elastic Search from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Elastic Search will display as shown.

ela_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Elastic Search from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Elastic Search database.

ela_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Elastic Search server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created an Elastic Search resource, we can add the action by selecting Elastic Search from action list and choosing the Create action button.

ela_resource_list

Now we have added the Elastic Search server as an action to our building page.

ela

Overview​

Method NameDescription
Action Typesearch, get a document, insert a document, update a document, delete a document
Transformertransforming data into the style you like using JavaScript

insert a document​

sending an HTTP PUT request to the Elasticsearch cluster with a JSON document that contains the data to be inserted.

Input

PropertiesRequiredDescription
Bodyoptionala JSON document that contains the data to be inserted
Indexoptionalname of the index where the document should be inserted

For example, to insert value1, value2, and value3 into field1, field2, and field3 into our Elastic search database, put the code snippet below into the **Body and insert2 for Index**.

{
    "field1": "value1",
    "field2": "value2",
    "field3": "value3"
}

Output

Success message of whether the document is inserted successfully and information of the inserted document.

ela_insert_data

Use {{insert.data}} to get the message.

ela_insert_code

update a document​

sending an HTTP POST or PUT request to the Elasticsearch cluster with the ID of the document that should be updated, and a JSON document that specifies the changes to be made.

Input

PropertiesRequiredDescription
BodyoptionalThe new value to be assigned to the field.
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to update value1, value2, and value3 for field1, field2, and field3 into our Elastic search database, put the code snippet below into the Body, insert2 for Index , and copy-paste the document Id from the insert message.

{"doc":{
    "field1": "value11",
    "field2": "value2",
    "field3": "value3"
}}

Output

Success message of whether the document is updated successfully and information of the updated document.

ela_update_data

Use {{update.data}} to get the message.

ela_update_code

query and retrieve documents from an index

Input

PropertiesRequiredDescription
Queryoptionalspecify the search query that is used to match documents in an index
Indexoptionalspecify the name of the index or indices that should be searched

For example, to search the database to find documents with key-value pair "field1": "value1", put the code snippet below into the Query .

{
    "query": {
        "match": {
            "field1": "value1"
        }
    }
}

Output

Success message with the number of hits/documents it finds that matches the query and the info for every hit.

ela_search_data

Use {{search.data}} to get the message.

ela_search_code

get a document​

sending an HTTP GET request to the Elasticsearch cluster with the ID of the document that should be retrieved.

Input

PropertiesRequiredDescription
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to get the document info for the document we just updated, put insert2 for Index, and copy-paste the document Id from the updated message.

Output

returns the document with the specified ID, or a 404 Not Found error if the document does not exist.

ela_get_data

Use {{get.data}} to get the message.

ela_get_code

delete a document​

sending an HTTP DELETE request to the Elasticsearch cluster with the ID of the document that should be deleted.

Input

PropertiesRequiredDescription
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to delete document, put insert2 for Index, and copy-paste the document Id from the updated message.

Output

returns the document with the specified ID, or a 404 Not Found error if the document does not exist.

ela_delete_data

- - +

Elastic Search

Elastic search is a distributed, RESTful search and analytics engine that is commonly used to index and search large volumes of data. In Illa, you can use the Elasticsearch data source to connect to Elasticsearch instances and perform queries and aggregations on your data.

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Elastic Search from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Elastic Search will display as shown.

ela_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Elastic Search from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Elastic Search database.

ela_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Elastic Search server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created an Elastic Search resource, we can add the action by selecting Elastic Search from action list and choosing the Create action button.

ela_resource_list

Now we have added the Elastic Search server as an action to our building page.

ela

Overview​

Method NameDescription
Action Typesearch, get a document, insert a document, update a document, delete a document
Transformertransforming data into the style you like using JavaScript

insert a document​

sending an HTTP PUT request to the Elasticsearch cluster with a JSON document that contains the data to be inserted.

Input

PropertiesRequiredDescription
Bodyoptionala JSON document that contains the data to be inserted
Indexoptionalname of the index where the document should be inserted

For example, to insert value1, value2, and value3 into field1, field2, and field3 into our Elastic search database, put the code snippet below into the **Body and insert2 for Index**.

{
    "field1": "value1",
    "field2": "value2",
    "field3": "value3"
}

Output

Success message of whether the document is inserted successfully and information of the inserted document.

ela_insert_data

Use {{insert.data}} to get the message.

ela_insert_code

update a document​

sending an HTTP POST or PUT request to the Elasticsearch cluster with the ID of the document that should be updated, and a JSON document that specifies the changes to be made.

Input

PropertiesRequiredDescription
BodyoptionalThe new value to be assigned to the field.
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to update value1, value2, and value3 for field1, field2, and field3 into our Elastic search database, put the code snippet below into the Body, insert2 for Index , and copy-paste the document Id from the insert message.

{"doc":{
    "field1": "value11",
    "field2": "value2",
    "field3": "value3"
}}

Output

Success message of whether the document is updated successfully and information of the updated document.

ela_update_data

Use {{update.data}} to get the message.

ela_update_code

query and retrieve documents from an index

Input

PropertiesRequiredDescription
Queryoptionalspecify the search query that is used to match documents in an index
Indexoptionalspecify the name of the index or indices that should be searched

For example, to search the database to find documents with key-value pair "field1": "value1", put the code snippet below into the Query .

{
    "query": {
        "match": {
            "field1": "value1"
        }
    }
}

Output

Success message with the number of hits/documents it finds that matches the query and the info for every hit.

ela_search_data

Use {{search.data}} to get the message.

ela_search_code

get a document​

sending an HTTP GET request to the Elasticsearch cluster with the ID of the document that should be retrieved.

Input

PropertiesRequiredDescription
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to get the document info for the document we just updated, put insert2 for Index, and copy-paste the document Id from the updated message.

Output

returns the document with the specified ID, or a 404 Not Found error if the document does not exist.

ela_get_data

Use {{get.data}} to get the message.

ela_get_code

delete a document​

sending an HTTP DELETE request to the Elasticsearch cluster with the ID of the document that should be deleted.

Input

PropertiesRequiredDescription
IndexoptionalThe name of the index where the document is stored.
IdoptionalThe unique identifier for the document.

For example, to delete document, put insert2 for Index, and copy-paste the document Id from the updated message.

Output

returns the document with the specified ID, or a 404 Not Found error if the document does not exist.

ela_delete_data

+ + \ No newline at end of file diff --git a/zh/event-calendar/index.html b/zh/event-calendar/index.html index caf0b417c0..47db386702 100644 --- a/zh/event-calendar/index.html +++ b/zh/event-calendar/index.html @@ -10,13 +10,13 @@ - - + +
-

Event calendar

What is Event calendar?​

The Event Calendar component in ILLA Cloud is a powerful tool for organizing and displaying events in a visually appealing and user-friendly manner. It allows users to create, manage, and showcase events with ease, providing features such as date navigation, event categorization, and detailed event information. The Event Calendar component offers customizable layouts, intuitive event creation interfaces, and options for integrating with other systems, making it an essential tool for businesses and organizations to effectively manage and promote their events.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
Event iduniquely identifies each event in the calendar
Titletitle or name of the event
DescriptionThe description of the event
Startstart date and time of the event
Endend date and time of the event
Resource ididentifies the resource or entity associated with the event
Resource titletitle or name of the resource associated with the event
All daywhether the event is an all-day event or not
Draggablewhether the event can be dragged or moved within the calendar interface
ResizableWhether allow users to update the event time range and change the time span by dragging the border of an event to lengthen or shorten the time span

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
Event idA unique ID used to identify the event
TitleThe title of the event
DescriptionThe description of the event
StartStart time of the event
EndEnd time of the event
Resource idThe resource could be a person, a meeting room, etc. You can set a resource id and connect it to the event.
Resource titleThe resource name displayed in the resource view
All dayWhether it's an all-day event
DraggableWhether allow users to update the event time range by dragging to move the event
ResizableWhether allow users to update the event time range and change the time span by dragging the border of an event to lengthen or shorten the time span

Other properties​

PropertiesDescription
Default datethe default date value
Resource gridWhether to show a resource grid
Default viewThe default view when launch the app
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
Custome message when disabled draggingAfter dragging is disabled, the message will display when a user drags the event.
Custom message when disabled resizingAfter resizing is disabled, the message will display when a user resizes the event.
Show current timeSet whether to show the current time line
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Calendar Background ColorSet the background of the calendar
Calendar Text ColorSet color of the text
Event Background ColorSet the background of event card
Event Text ColorSet the text color of event card

Event handler​

EventDescription
ChangeWhen a user changes the event value
SelectWhen a user selects the component
Drag or click no event areaWhen a user drag or click an area with no event

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
borderColorspecifies the color of the border around the calendar component or the events displayed within it
dataSourcethe source of event data for the calendar component
defaultDatesets the initial date to be displayed when the calendar is loaded or rendered
defaultViewdetermines the default view or mode in which the calendar is displayed when initially loaded
displayNamethe name of this component (ie button1)
draggableenables or disables the ability to drag and move events within the calendar
eventsgenerated or triggered when certain actions or events occur within the number input component.
eventBackgroundspecifies the background color or styling for the event elements displayed in the calendar
eventConfigureModedetermines the configuration mode for events in the calendar
eventListthe list or collection of events to be displayed in a separate view or panel within the calendar component
eventTextColordetermines the color of the text or content within the event elements displayed in the calendar
hiddenwhether the event calendar component is hidden or not
manualOptionsmanual configuration or customization of various options or settings within the event calendar
mappedOptionsmapped or predefined options for the event calendar component
resizableenables or disables the ability to resize events in the calendar
resourceMapListdefines the mapping or association between events and resources within the calendar
selectEndTimedetermines the end time or date when selecting or creating a new event in the calendar
selectEventValuethe selected or currently active event value in the calendar
selectResourcedetermines the resource or entity associated with the selected or focused event in the calendar
selectStartTimedetermines the start time or date when selecting or creating a new event in the calendar
showCurrentTimedetermines whether the current time indicator or marker is displayed on the calendar
showResourcewhether the resource or entity associated with events is displayed or shown in the calendar
slotBackgroundspecifies the background color or styling for the time slots or cells in the calendar
titleColorthe color of the title or heading displayed for events in the calendar

Example: {{eventCalendar1.events}}

Use case​

Next, we will demonstrate how to add new events displayed on event calendar with a button.

Step 1 Add an action​

Let us create a table in Supabase called events. It has 9 columns: title, description, resource_id, resource_title, all_day, draggable, resizable, start_time, and end_time .

Then we can create a new action for Supabase from the action list, listing all the data with the code snippet below and called supabasedb1.

select * from events;

Change from Run action only when manually triggered to Run action automatically when inputs change in the upper right corner below Save button.

Click Save and Run to activate this action.

event_data

In order to add a new event, we also need another action. Choose the same Supabase resource from the action list called supabasedb2, and put the code snippet below.

INSERT INTO events (id, title, description, start_time, end_time, resource_id, resource_title, all_day, draggable, resizable)
VALUES ((SELECT MAX(id) + 1 FROM events), '{{input1.value}}', '{{input2.value}}', '{{dateTime1.value}}', '{{dateTime2.value}}', {{numberInput1.value}}, '{{input4.value}}', {{switch1.value}}, {{switch2.value}}, {{switch3.value}});

The input, numberInput, dateTime, and switch components are from the modal components. There are more detailed descriptions of those components below.

Step 2 Configure Actions​

For supabasedb2, we want to show a notification when the new event info is successfully added to the database.

In the Actions, click supabasedb2, in the General page, scroll down to Event handler.

  1. Click + New to add a new event handler.
  2. In the Edit event handler, select Show notification in action, title "Success" and description "Successfully add new event. Choose Success for type, put {{2000}} for the duration (2 seconds)

event_action_success

Step 2 Add Components​

Next, we can add an event calendar component, a button component, and a **modal** component to the canvas. Label the button component to Add new event.

event_layout

In the modal component, we change the text on the upper left corner to "New Event". We then add the Title and Description input components, Start time and End time date time components, Resource ID number input, and Resource Title input components, All day, Draggable, and Resizable switch components, and label them as needed.

event_modal_layout

Step 3 Configure the component​

For the **event calendar** component, we can map the data from supabasedb1 to display. We first choose mapped from options, then we put {{supabasedb1.data}} in the Data source and fill out the Mapped Option fields as shown below.

event_data_source

For the button component, we can configure it to open the modal when clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the openModal method

event_add_new_button

For the modal component, we can configure it to refresh the events display in the **event calendar** when the modal is closed.

  1. Click the modal component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Trigger action in action, and select the supabasedb component that you want to trigger for Action name. In our case, it's the supabasedb1.

event_modal

For the "Cancel" button component, we can configure it to close the modal if clicked

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

For the "Confirm" button, we want it to insert the new data filled out in the modal into the supabase events table and close modal.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Trigger action for action and choose supabasedb2 for action name

event_db2

  1. Click + New to add a new event handler.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

Step 4 Test​

Now that we can test it as shown below.

event_test

- - +

Event calendar

What is Event calendar?​

The Event Calendar component in ILLA Cloud is a powerful tool for organizing and displaying events in a visually appealing and user-friendly manner. It allows users to create, manage, and showcase events with ease, providing features such as date navigation, event categorization, and detailed event information. The Event Calendar component offers customizable layouts, intuitive event creation interfaces, and options for integrating with other systems, making it an essential tool for businesses and organizations to effectively manage and promote their events.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
Event iduniquely identifies each event in the calendar
Titletitle or name of the event
DescriptionThe description of the event
Startstart date and time of the event
Endend date and time of the event
Resource ididentifies the resource or entity associated with the event
Resource titletitle or name of the resource associated with the event
All daywhether the event is an all-day event or not
Draggablewhether the event can be dragged or moved within the calendar interface
ResizableWhether allow users to update the event time range and change the time span by dragging the border of an event to lengthen or shorten the time span

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
Event idA unique ID used to identify the event
TitleThe title of the event
DescriptionThe description of the event
StartStart time of the event
EndEnd time of the event
Resource idThe resource could be a person, a meeting room, etc. You can set a resource id and connect it to the event.
Resource titleThe resource name displayed in the resource view
All dayWhether it's an all-day event
DraggableWhether allow users to update the event time range by dragging to move the event
ResizableWhether allow users to update the event time range and change the time span by dragging the border of an event to lengthen or shorten the time span

Other properties​

PropertiesDescription
Default datethe default date value
Resource gridWhether to show a resource grid
Default viewThe default view when launch the app
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
Custome message when disabled draggingAfter dragging is disabled, the message will display when a user drags the event.
Custom message when disabled resizingAfter resizing is disabled, the message will display when a user resizes the event.
Show current timeSet whether to show the current time line
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Calendar Background ColorSet the background of the calendar
Calendar Text ColorSet color of the text
Event Background ColorSet the background of event card
Event Text ColorSet the text color of event card

Event handler​

EventDescription
ChangeWhen a user changes the event value
SelectWhen a user selects the component
Drag or click no event areaWhen a user drag or click an area with no event

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
borderColorspecifies the color of the border around the calendar component or the events displayed within it
dataSourcethe source of event data for the calendar component
defaultDatesets the initial date to be displayed when the calendar is loaded or rendered
defaultViewdetermines the default view or mode in which the calendar is displayed when initially loaded
displayNamethe name of this component (ie button1)
draggableenables or disables the ability to drag and move events within the calendar
eventsgenerated or triggered when certain actions or events occur within the number input component.
eventBackgroundspecifies the background color or styling for the event elements displayed in the calendar
eventConfigureModedetermines the configuration mode for events in the calendar
eventListthe list or collection of events to be displayed in a separate view or panel within the calendar component
eventTextColordetermines the color of the text or content within the event elements displayed in the calendar
hiddenwhether the event calendar component is hidden or not
manualOptionsmanual configuration or customization of various options or settings within the event calendar
mappedOptionsmapped or predefined options for the event calendar component
resizableenables or disables the ability to resize events in the calendar
resourceMapListdefines the mapping or association between events and resources within the calendar
selectEndTimedetermines the end time or date when selecting or creating a new event in the calendar
selectEventValuethe selected or currently active event value in the calendar
selectResourcedetermines the resource or entity associated with the selected or focused event in the calendar
selectStartTimedetermines the start time or date when selecting or creating a new event in the calendar
showCurrentTimedetermines whether the current time indicator or marker is displayed on the calendar
showResourcewhether the resource or entity associated with events is displayed or shown in the calendar
slotBackgroundspecifies the background color or styling for the time slots or cells in the calendar
titleColorthe color of the title or heading displayed for events in the calendar

Example: {{eventCalendar1.events}}

Use case​

Next, we will demonstrate how to add new events displayed on event calendar with a button.

Step 1 Add an action​

Let us create a table in Supabase called events. It has 9 columns: title, description, resource_id, resource_title, all_day, draggable, resizable, start_time, and end_time .

Then we can create a new action for Supabase from the action list, listing all the data with the code snippet below and called supabasedb1.

select * from events;

Change from Run action only when manually triggered to Run action automatically when inputs change in the upper right corner below Save button.

Click Save and Run to activate this action.

event_data

In order to add a new event, we also need another action. Choose the same Supabase resource from the action list called supabasedb2, and put the code snippet below.

INSERT INTO events (id, title, description, start_time, end_time, resource_id, resource_title, all_day, draggable, resizable)
VALUES ((SELECT MAX(id) + 1 FROM events), '{{input1.value}}', '{{input2.value}}', '{{dateTime1.value}}', '{{dateTime2.value}}', {{numberInput1.value}}, '{{input4.value}}', {{switch1.value}}, {{switch2.value}}, {{switch3.value}});

The input, numberInput, dateTime, and switch components are from the modal components. There are more detailed descriptions of those components below.

Step 2 Configure Actions​

For supabasedb2, we want to show a notification when the new event info is successfully added to the database.

In the Actions, click supabasedb2, in the General page, scroll down to Event handler.

  1. Click + New to add a new event handler.
  2. In the Edit event handler, select Show notification in action, title "Success" and description "Successfully add new event. Choose Success for type, put {{2000}} for the duration (2 seconds)

event_action_success

Step 2 Add Components​

Next, we can add an event calendar component, a button component, and a **modal** component to the canvas. Label the button component to Add new event.

event_layout

In the modal component, we change the text on the upper left corner to "New Event". We then add the Title and Description input components, Start time and End time date time components, Resource ID number input, and Resource Title input components, All day, Draggable, and Resizable switch components, and label them as needed.

event_modal_layout

Step 3 Configure the component​

For the **event calendar** component, we can map the data from supabasedb1 to display. We first choose mapped from options, then we put {{supabasedb1.data}} in the Data source and fill out the Mapped Option fields as shown below.

event_data_source

For the button component, we can configure it to open the modal when clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the openModal method

event_add_new_button

For the modal component, we can configure it to refresh the events display in the **event calendar** when the modal is closed.

  1. Click the modal component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Trigger action in action, and select the supabasedb component that you want to trigger for Action name. In our case, it's the supabasedb1.

event_modal

For the "Cancel" button component, we can configure it to close the modal if clicked

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

For the "Confirm" button, we want it to insert the new data filled out in the modal into the supabase events table and close modal.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Trigger action for action and choose supabasedb2 for action name

event_db2

  1. Click + New to add a new event handler.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

Step 4 Test​

Now that we can test it as shown below.

event_test

+ + \ No newline at end of file diff --git a/zh/event-handler/index.html b/zh/event-handler/index.html index 7bc57f3bd6..081b28c6c9 100644 --- a/zh/event-handler/index.html +++ b/zh/event-handler/index.html @@ -10,13 +10,13 @@ - - + +
-

Event handler

Event handlers are an integral part of refining your internal tool usage logic. Any insert or action that responds to a user action has its own events that may be triggered, such as a button insert with a 'click' event, a text input box with a 'submit' event, the success of an action, and so on. Event handlers help users to trigger pre-defined instructions when events occur: you can react to a single event occurrence, or you can set up multiple event handlers and set them up as workflows to do more complex work.

After the event you set has occurred, the event handler can help you perform a variety of actions: control action statements, control inserts, run scripts and more. You can also add more detailed JavaScript trigger conditions on top of the trigger conditions.

event-handler

Event handlers​

In event handlers, you can set the outcome of the event based on whether the query results fail or not. You can complete the trigger logic by setting the query failure condition in the Response tab.

event-handler

Edit submit handler​

We set a trigger condition for each interactive insert, and you can select an event in the handler's action list as the trigger condition. For example, you could set 'Submit' as the trigger condition in the event handler for the data entry box, which automatically inserts the input into the database when the user 'submits' the input, thus implementing a simple data insertion function.

event-handler

Temporary states​

When processing data, you may encounter situations where the processed data is not called up immediately. For this reason, we have set up temporary states to store intermediate states for data processing. You can choose to set a temporary state in the response event options of event handlers and click on Create new state to store the current data in the temporary state, which can be placed for any property.

Outside the project editor, you can also store data by {{tempState1.setValue(data)}} or call data by {{tempState1.value}}.

The values in the temporary state will be cleared when the project is restarted, and you will need to store the values locally or in the cloud to ensure the integrity of the data.

- - +

Event handler

Event handlers are an integral part of refining your internal tool usage logic. Any insert or action that responds to a user action has its own events that may be triggered, such as a button insert with a 'click' event, a text input box with a 'submit' event, the success of an action, and so on. Event handlers help users to trigger pre-defined instructions when events occur: you can react to a single event occurrence, or you can set up multiple event handlers and set them up as workflows to do more complex work.

After the event you set has occurred, the event handler can help you perform a variety of actions: control action statements, control inserts, run scripts and more. You can also add more detailed JavaScript trigger conditions on top of the trigger conditions.

event-handler

Event handlers​

In event handlers, you can set the outcome of the event based on whether the query results fail or not. You can complete the trigger logic by setting the query failure condition in the Response tab.

event-handler

Edit submit handler​

We set a trigger condition for each interactive insert, and you can select an event in the handler's action list as the trigger condition. For example, you could set 'Submit' as the trigger condition in the event handler for the data entry box, which automatically inserts the input into the database when the user 'submits' the input, thus implementing a simple data insertion function.

event-handler

Temporary states​

When processing data, you may encounter situations where the processed data is not called up immediately. For this reason, we have set up temporary states to store intermediate states for data processing. You can choose to set a temporary state in the response event options of event handlers and click on Create new state to store the current data in the temporary state, which can be placed for any property.

Outside the project editor, you can also store data by {{tempState1.setValue(data)}} or call data by {{tempState1.value}}.

The values in the temporary state will be cleared when the project is restarted, and you will need to store the values locally or in the cloud to ensure the integrity of the data.

+ + \ No newline at end of file diff --git a/zh/firebase/index.html b/zh/firebase/index.html index 7b8be14bec..e04dae2665 100644 --- a/zh/firebase/index.html +++ b/zh/firebase/index.html @@ -10,13 +10,13 @@ - - + +
-

Firebase

Firebase is a comprehensive platform provided by Google that offers a wide range of tools and services for developing and managing web and mobile applications. It provides developers with a scalable and secure backend infrastructure, along with a suite of pre-built features and functionalities to accelerate the development process. With the integration of Firebase on ILLA Cloud, developers can enhance their applications with reliable and scalable storage solutions, enabling them to focus on building innovative and data-driven experiences.

Create Firebase API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Firebase from the API list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Firebase will display as shown.

firebase_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Firebase from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Firebase API.

firebase_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Firebase Database URLoptionalthe endpoint or URL where the Firebase Realtime Database is hosted
Firestore Project IDoptionala unique identifier assigned to each Firebase project that uses the Firestore database service
Private Keyrequireda security credential used for authenticating and accessing Firebase services programmatically

Create Actions​

We have created a Firebase resource, we can add the action by selecting Firebase from the action list and choosing the Create action button.

firebase_resource_list

Now we have added the Firebase server as an action to our building page.

firebase

Configure Firebase​

Overview​

Service TypeFirebase AuthFirestoreRealtime Database
Action TypeGet user by UIDQuery Firebase,Query Database
Get user by emailInsert DocumentSet data
Get user by phone numberUpdate DocumentUpdate data
Create a userGet document by IDAppend data to a list
Update a userDelete a Document
Delete a userGet Collections
List userQuery Collection Group
Transformertransforming data into the style you like using JavaScript

Get user by UID​

retrieve user information by specifying the user's unique identifier (UID). It enables you to fetch user details such as display name, email, phone number, and custom attributes associated with the user.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.

Get user by email​

retrieve user information by specifying the user's email address. It allows you to fetch user details similar to the UID-based method, but using the email as the identifier.

Input

PropertiesRequiredDescription
emailrequiredthe registered email associated with the user you want to retrieve

Get user by phone number​

retrieve user information by specifying the user's phone number. It allows you to fetch user details similar to the UID-based method, but using the phone number as the identifier.

Input

PropertiesRequiredDescription
phone numberrequiredthe registered phone number associated with the user you want to retrieve

Create a user​

create a new user in the Firebase authentication system. You can provide the user's email, password, display name, and other relevant information during the user creation process.

Input

PropertiesRequiredDescription
User objectrequiredan object that contains user's information

Update a user​

update the attributes and properties of an existing user. You can modify the user's display name, email, phone number, password, and other custom attributes associated with the user.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.
User objectrequiredan object that contains user's information

Delete a user​

delete a user from the Firebase authentication system. This action permanently removes the user and their associated data from the system.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.

List users​

retrieve a list of all users registered in the Firebase authentication system. It provides paginated results, enabling you to iterate through the user list and retrieve specific user details.

Input

PropertiesRequiredDescription
Length of listoptionalnumber of users you want to retrieve in a single request
Next page tokenoptionalpagination when there are more users than can be returned in a single response

Query Firebase​

perform queries on the database using various conditions and filters

Input

PropertiesRequiredDescription
Collectionrequiredcan use dropdown to select or use a raw id
whererequiredadd conditions to your query
limitoptionallimit the number of documents returned by the query.
Order byoptionalspecify the field by which you want to order the query results
Ordering directionoptionalthe direction of the ordering in the query results

Insert Document​

create a new document in a collection or subcollection within Firestore. You provide the data to be stored in the document, and Firebase assigns a unique identifier (document ID) to it.

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to insert the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being inserted
valuerequiredthe actual data that you want to insert into the document

Update Document​

update an existing document in Firestore. You specify the document ID and provide the updated data, which will overwrite the existing document's fields.

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to update the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being updated
valuerequiredthe actual data that you want to update into the document

Get Document by ID​

retrieves a specific document from Firestore based on its unique document ID

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to retrieve the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being retrieved

Delete a Document​

remove a document from Firestore based on its document ID

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to retrieve the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being retrieved

Get Collections​

retrieve all the collections within a Firestore database. It returns a list of collection names available in the database.

Input

PropertiesRequiredDescription
Parent Document IDoptionalspecify a custom identifier for the document being retrieved

Query Collection Group​

query documents across multiple collections with the same name. You can perform complex queries and retrieve matching documents from different collections that share the same name.

Input

PropertiesRequiredDescription
Collectionrequiredcan use dropdown to select or use a raw id
whererequiredadd conditions to your query
limitoptionallimit the number of documents returned by the query.
Order byoptionalspecify the field by which you want to order the query results
Ordering directionoptionalthe direction of the ordering in the query results

Query database​

query the Realtime Database to retrieve data that meets specific criteria. You can define filters, sorting, and other conditions to retrieve a subset of data from a particular location in the database.

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.

Set data​

write or replace data at a specific location in the Realtime Database

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.
Object to setrequiredobject contains the data that we want to write to the database, including the name, age, and email fields.

Update data​

modify existing data at a specific location in the Realtime Database

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.
User objectrequiredobject contains the data that we want to update to the database, including the name, age, and email fields.

Append data to a list​

use the "Push" method. It generates a unique key and appends the data as a new element in the list.

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.
Object to setrequiredobject contains the data that we want to update to the database, including the name, age, and email fields.
- - +

Firebase

Firebase is a comprehensive platform provided by Google that offers a wide range of tools and services for developing and managing web and mobile applications. It provides developers with a scalable and secure backend infrastructure, along with a suite of pre-built features and functionalities to accelerate the development process. With the integration of Firebase on ILLA Cloud, developers can enhance their applications with reliable and scalable storage solutions, enabling them to focus on building innovative and data-driven experiences.

Create Firebase API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Firebase from the API list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Firebase will display as shown.

firebase_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Firebase from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Firebase API.

firebase_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Firebase Database URLoptionalthe endpoint or URL where the Firebase Realtime Database is hosted
Firestore Project IDoptionala unique identifier assigned to each Firebase project that uses the Firestore database service
Private Keyrequireda security credential used for authenticating and accessing Firebase services programmatically

Create Actions​

We have created a Firebase resource, we can add the action by selecting Firebase from the action list and choosing the Create action button.

firebase_resource_list

Now we have added the Firebase server as an action to our building page.

firebase

Configure Firebase​

Overview​

Service TypeFirebase AuthFirestoreRealtime Database
Action TypeGet user by UIDQuery Firebase,Query Database
Get user by emailInsert DocumentSet data
Get user by phone numberUpdate DocumentUpdate data
Create a userGet document by IDAppend data to a list
Update a userDelete a Document
Delete a userGet Collections
List userQuery Collection Group
Transformertransforming data into the style you like using JavaScript

Get user by UID​

retrieve user information by specifying the user's unique identifier (UID). It enables you to fetch user details such as display name, email, phone number, and custom attributes associated with the user.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.

Get user by email​

retrieve user information by specifying the user's email address. It allows you to fetch user details similar to the UID-based method, but using the email as the identifier.

Input

PropertiesRequiredDescription
emailrequiredthe registered email associated with the user you want to retrieve

Get user by phone number​

retrieve user information by specifying the user's phone number. It allows you to fetch user details similar to the UID-based method, but using the phone number as the identifier.

Input

PropertiesRequiredDescription
phone numberrequiredthe registered phone number associated with the user you want to retrieve

Create a user​

create a new user in the Firebase authentication system. You can provide the user's email, password, display name, and other relevant information during the user creation process.

Input

PropertiesRequiredDescription
User objectrequiredan object that contains user's information

Update a user​

update the attributes and properties of an existing user. You can modify the user's display name, email, phone number, password, and other custom attributes associated with the user.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.
User objectrequiredan object that contains user's information

Delete a user​

delete a user from the Firebase authentication system. This action permanently removes the user and their associated data from the system.

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.

List users​

retrieve a list of all users registered in the Firebase authentication system. It provides paginated results, enabling you to iterate through the user list and retrieve specific user details.

Input

PropertiesRequiredDescription
Length of listoptionalnumber of users you want to retrieve in a single request
Next page tokenoptionalpagination when there are more users than can be returned in a single response

Query Firebase​

perform queries on the database using various conditions and filters

Input

PropertiesRequiredDescription
Collectionrequiredcan use dropdown to select or use a raw id
whererequiredadd conditions to your query
limitoptionallimit the number of documents returned by the query.
Order byoptionalspecify the field by which you want to order the query results
Ordering directionoptionalthe direction of the ordering in the query results

Insert Document​

create a new document in a collection or subcollection within Firestore. You provide the data to be stored in the document, and Firebase assigns a unique identifier (document ID) to it.

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to insert the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being inserted
valuerequiredthe actual data that you want to insert into the document

Update Document​

update an existing document in Firestore. You specify the document ID and provide the updated data, which will overwrite the existing document's fields.

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to update the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being updated
valuerequiredthe actual data that you want to update into the document

Get Document by ID​

retrieves a specific document from Firestore based on its unique document ID

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to retrieve the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being retrieved

Delete a Document​

remove a document from Firestore based on its document ID

Input

PropertiesRequiredDescription
Collectionrequiredspecifies the name of the collection in which you want to retrieve the document. can use the dropdown to select or use a raw id
Document IDoptionalspecify a custom identifier for the document being retrieved

Get Collections​

retrieve all the collections within a Firestore database. It returns a list of collection names available in the database.

Input

PropertiesRequiredDescription
Parent Document IDoptionalspecify a custom identifier for the document being retrieved

Query Collection Group​

query documents across multiple collections with the same name. You can perform complex queries and retrieve matching documents from different collections that share the same name.

Input

PropertiesRequiredDescription
Collectionrequiredcan use dropdown to select or use a raw id
whererequiredadd conditions to your query
limitoptionallimit the number of documents returned by the query.
Order byoptionalspecify the field by which you want to order the query results
Ordering directionoptionalthe direction of the ordering in the query results

Query database​

query the Realtime Database to retrieve data that meets specific criteria. You can define filters, sorting, and other conditions to retrieve a subset of data from a particular location in the database.

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.

Set data​

write or replace data at a specific location in the Realtime Database

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.
Object to setrequiredobject contains the data that we want to write to the database, including the name, age, and email fields.

Update data​

modify existing data at a specific location in the Realtime Database

Input

PropertiesRequiredDescription
UIDrequired"User Identifier." It is a unique identifier assigned to each user in the Firebase authentication system.
User objectrequiredobject contains the data that we want to update to the database, including the name, age, and email fields.

Append data to a list​

use the "Push" method. It generates a unique key and appends the data as a new element in the list.

Input

PropertiesRequiredDescription
Database refrequireda reference to a specific location in the database.
Object to setrequiredobject contains the data that we want to update to the database, including the name, age, and email fields.
+ + \ No newline at end of file diff --git a/zh/form/index.html b/zh/form/index.html index b8b4554fbf..b64ab16987 100644 --- a/zh/form/index.html +++ b/zh/form/index.html @@ -10,13 +10,13 @@ - - + +
-

Form

What is Form?​

The form component is a visual element that represents the progress or completion of a task or process. It displays a horizontal bar that fills up or shrinks based on the specified progress value.

Properties​

PropertiesDescription
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions.
Disablednon-interactive and cannot be modified or triggered by the user.
Disable submitdisabling the form submission functionality.
Validate inputs on submitthe form inputs should be validated for correctness or completeness when the form is submitted.
Reset after successful submitautomatically resets its values and state to their initial or default values after a successful submission
Tooltipa small pop-up or informational message that appears when the user hovers over or interacts with a specific element, such as a form component.
Show headerwhether a form component should display a header or title section
Show footerwhether a form component should display a footer section
Hiddenhides the form component from the user's view
Border Colorcolor of the border that surrounds a form component
Border Radiuscurvature of the corners of a form component's border
Border Widththickness or width of the border surrounding a form component
Backgrounddefines the color or image that fills the content area of a form component
Shadowvisual effect of adding a subtle, offset "shadow" to a form component, making it appear slightly raised or floating above the background

Method​

You can use other components to control the component. We support the following two methods:

  • submit

To submit the information filled in the form field

  • reset

reset all input fields in the form component

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • validate

To verify that the input information is legal

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
backgroundColorspecifies the background color of a form component
borderColordefines the color of the border surrounding a form component
borderWidthdetermines the thickness or width of the border surrounding a form component
disabledwhether a form component is disabled or not
displayNamerepresents the name or label assigned to a form component
footerHeightspecifies the height or size of the footer section of a form component
formDataholds the data or values entered by the user in a form component
headerHeightdetermines the height or size of the header section of a form component
invalidwhether the input or value of a form component is considered invalid or not.
radiusdefines the border radius or curvature of the corners of a form component
resetAfterSuccessfulindicates that a form component should automatically reset its values and state to their initial or default values after a successful submission
shadowcontrols the presence and appearance of a shadow effect on a form component
showFooterdetermines whether the footer section of a form component should be displayed or not
showHeadervisibility of the header section of a form component
tooltipTextholds the text or content of a tooltip associated with a form component
validateInputOnSubmitspecifies that the input values of a form component should be validated for correctness or completeness when the form is submitted

Example: {{form1.disabled}}

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Add Components​

Add a form component with the default text "Form" and a "Submit" button to canvas.

Add an input component, a number input component, and a bar progress component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the bar progress component to be "Progress".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

bar_layout

Step 2 Configure the component​

For the input and number input components, we can configure them to set the value in bar progress component to reflect the progress of completion.

  1. Click the input and number input component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the bar progress component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as
{
  {
    input1.value && numberInput1.value
      ? "100"
      : input1.value || numberInput1.value
      ? "50"
      : "0";
  }
}

bar_input_num_config

Note: need to set the event handler as described above to BOTH input and number input components.

For the button component, we can configure it to submit the form if the form is completed (ie bar progress 100%)

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method and put {{barProgress1.value == 100}} in Only run when

bar_button_submit_config

Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Error!" and description "Please fill out the form before submitting". Choose Error for type, put {{2000}} for the duration (2 seconds), and put {{barProgress1.value<100}} for Only run when.

bar_button_show_config

Step 4 Test​

bar_test

- - +

Form

What is Form?​

The form component is a visual element that represents the progress or completion of a task or process. It displays a horizontal bar that fills up or shrinks based on the specified progress value.

Properties​

PropertiesDescription
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions.
Disablednon-interactive and cannot be modified or triggered by the user.
Disable submitdisabling the form submission functionality.
Validate inputs on submitthe form inputs should be validated for correctness or completeness when the form is submitted.
Reset after successful submitautomatically resets its values and state to their initial or default values after a successful submission
Tooltipa small pop-up or informational message that appears when the user hovers over or interacts with a specific element, such as a form component.
Show headerwhether a form component should display a header or title section
Show footerwhether a form component should display a footer section
Hiddenhides the form component from the user's view
Border Colorcolor of the border that surrounds a form component
Border Radiuscurvature of the corners of a form component's border
Border Widththickness or width of the border surrounding a form component
Backgrounddefines the color or image that fills the content area of a form component
Shadowvisual effect of adding a subtle, offset "shadow" to a form component, making it appear slightly raised or floating above the background

Method​

You can use other components to control the component. We support the following two methods:

  • submit

To submit the information filled in the form field

  • reset

reset all input fields in the form component

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • validate

To verify that the input information is legal

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
backgroundColorspecifies the background color of a form component
borderColordefines the color of the border surrounding a form component
borderWidthdetermines the thickness or width of the border surrounding a form component
disabledwhether a form component is disabled or not
displayNamerepresents the name or label assigned to a form component
footerHeightspecifies the height or size of the footer section of a form component
formDataholds the data or values entered by the user in a form component
headerHeightdetermines the height or size of the header section of a form component
invalidwhether the input or value of a form component is considered invalid or not.
radiusdefines the border radius or curvature of the corners of a form component
resetAfterSuccessfulindicates that a form component should automatically reset its values and state to their initial or default values after a successful submission
shadowcontrols the presence and appearance of a shadow effect on a form component
showFooterdetermines whether the footer section of a form component should be displayed or not
showHeadervisibility of the header section of a form component
tooltipTextholds the text or content of a tooltip associated with a form component
validateInputOnSubmitspecifies that the input values of a form component should be validated for correctness or completeness when the form is submitted

Example: {{form1.disabled}}

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Add Components​

Add a form component with the default text "Form" and a "Submit" button to canvas.

Add an input component, a number input component, and a bar progress component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the bar progress component to be "Progress".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

bar_layout

Step 2 Configure the component​

For the input and number input components, we can configure them to set the value in bar progress component to reflect the progress of completion.

  1. Click the input and number input component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the bar progress component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as
{
  {
    input1.value && numberInput1.value
      ? "100"
      : input1.value || numberInput1.value
      ? "50"
      : "0";
  }
}

bar_input_num_config

Note: need to set the event handler as described above to BOTH input and number input components.

For the button component, we can configure it to submit the form if the form is completed (ie bar progress 100%)

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method and put {{barProgress1.value == 100}} in Only run when

bar_button_submit_config

Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Error!" and description "Please fill out the form before submitting". Choose Error for type, put {{2000}} for the duration (2 seconds), and put {{barProgress1.value<100}} for Only run when.

bar_button_show_config

Step 4 Test​

bar_test

+ + \ No newline at end of file diff --git a/zh/grid-list/index.html b/zh/grid-list/index.html index 3c1643fe68..0fc3afc29c 100644 --- a/zh/grid-list/index.html +++ b/zh/grid-list/index.html @@ -10,13 +10,13 @@ - - + +
-

Data Grid

What is Data Grid​

In some cases, you might want to display your items as a grid rather than a normal list of items that come one after the next. For this task, use the Grid List component.

The editing method of the Grid List component is the same as that of the container. You can drag and drop components into the Grid List to customize the display format of the items.

How-to​

Configure the appearance of the Grid list​

Connect to data source​

Data​

Property nameTypeDescriptionUse example
selectedItemObjectYou can select an item in the Grid List and retrieve its data using theselectedItemproperty. When you select the nth item, the value of theselectedItemproperty will be the nth item in the data source array that you have set for the Grid List. For example, if your data source (referred to as dataSource) is as follows:[{"name":"Andrew"},{"name":"Mike"},{"name":"Emma"}], and you select the third item, theselectedItemproperty will actually bedataSource[2], which is{"name":"Emma"}. Therefore, you can further access the value corresponding to a specific key by usinggridList1.selectedItem.name.{{gridList1.selectedItem.name}}
currentItemObjectThis property canonly be used in the component of Grid List in the configurationand does not need to be called via displayName . When you add a Text component to the Grid List component, it is expected that this Text component will display the name of this segment in the Data source. To achieve this, you can set it as{{currentItem.name}}.{{currentItem.name}}

Configurable properties​

Data​

Property nameTypeDescriptionExample
Data sourceArray of objectsThis is used to set the data source for the Grid List component. The expected data format is [{ "key": "value", "key": "value" }, { "key": "value", "key": "value" },... { "key": "value", "key": "value" }]. You can query your data source using the Action, and the return value of the action will be used as the data source. Alternatively, you can directly input into the data source. When inputting, please make sure to use{{}}to enclose the array.{{mysql1.data}}

Interaction​

Property nameTypeDescriptionExample
LoadingBooleanYou can configure the Grid list component to display a Loading state under certain circumstances. For example, during the execution of an Action, you can show a loading state by using the{{mysql1.isRunning}}setting.{{mysql1.isRunning}}
DisabledBooleanYou can configure the Grid list component to be disabled under certain conditions. For example, if there is no input value in theinput1component, it should be disabled. You can achieve this by using the{{input1.value===null \|\| input1.value==="" \|\| input1.value===undefined}}condition.{{input1.value===null\|\|input1.value===""\|\|input1.value===undefined}}

Pagination​

Property nameTypeDescriptionExample
PaginationBooleanYou can configure whether to display data in a paginated manner. If pagination is not enabled, all the data will be displayed on a single page.--
Page sizeNumberTo display multiple data items per page, you need to enable pagination. When you enable pagination, you can configure the number of items to be displayed per page.{{30}}
Enable server side paginationBooleanPlease refer to this documentation for reference:Server-side pagination--

Layout​

Property nameTypeDescriptionExample
Column adaptionSelectionWe offer two modes: Fixed and Dynamic. InFixedmode, the list is fixed. Resizing the browser window will only change the width of each column. InDynamicmode, the list is not fixed, resizing the browser window will change both the width and the number of columns. Below this table, there are also illustrations of the two modes, which can provide a more visual understanding of the differences between the two modes.--
Number of columnsNumberIn Fixed mode, the configuration displays a fixed number of columns.{{3}}
Min width of columnsNumberIn the Dynamic mode, the configuration sets the minimum column width. We will use the component width/minimum column width to calculate the maximum number of columns that can be displayed currently. If it can not be evenly divided, the excess value will be distributed evenly to supplement each column width.{{300}}
Item spacingNumberSpacing between each column and row.--
HeightSelectionTo configure the height of a component, we provide two types of formatting options: Fixed and Auto. In the Fixed mode, you need to manually adjust the height of the component and item. In the Auto mode, the height of the component and the length of the list will be dynamically adjusted based on the height of the items.--
HiddenBooleanUsed to hide a component under certain conditions. For example, the component is not displayed when there are no results frommysql1: {{!mysql1.data}}.{{!mysql1.data}}
Dynamic number of columns​

dynamic

Fixed number of columns​

fixed

Event handler​

Event handler：https://docs.illacloud.com/event-handler

Event nameDescription
Click itemWhen clicking on an item, trigger the corresponding event. For example, if one of the data in your data source is a URL, you can expect that clicking on the item will navigate to the URL associated with that item. In the event handler, you can select "go to URL" and set the value of the URL to{{currentItem.url}}.
Page changeDuring page switching, events are triggered. This is commonly used in the server-side pagination scenario. When the page changes, the action is executed again, immediately fetching the next or previous page of data.
- - +

Data Grid

What is Data Grid​

In some cases, you might want to display your items as a grid rather than a normal list of items that come one after the next. For this task, use the Grid List component.

The editing method of the Grid List component is the same as that of the container. You can drag and drop components into the Grid List to customize the display format of the items.

How-to​

Configure the appearance of the Grid list​

Connect to data source​

Data​

Property nameTypeDescriptionUse example
selectedItemObjectYou can select an item in the Grid List and retrieve its data using theselectedItemproperty. When you select the nth item, the value of theselectedItemproperty will be the nth item in the data source array that you have set for the Grid List. For example, if your data source (referred to as dataSource) is as follows:[{"name":"Andrew"},{"name":"Mike"},{"name":"Emma"}], and you select the third item, theselectedItemproperty will actually bedataSource[2], which is{"name":"Emma"}. Therefore, you can further access the value corresponding to a specific key by usinggridList1.selectedItem.name.{{gridList1.selectedItem.name}}
currentItemObjectThis property canonly be used in the component of Grid List in the configurationand does not need to be called via displayName . When you add a Text component to the Grid List component, it is expected that this Text component will display the name of this segment in the Data source. To achieve this, you can set it as{{currentItem.name}}.{{currentItem.name}}

Configurable properties​

Data​

Property nameTypeDescriptionExample
Data sourceArray of objectsThis is used to set the data source for the Grid List component. The expected data format is [{ "key": "value", "key": "value" }, { "key": "value", "key": "value" },... { "key": "value", "key": "value" }]. You can query your data source using the Action, and the return value of the action will be used as the data source. Alternatively, you can directly input into the data source. When inputting, please make sure to use{{}}to enclose the array.{{mysql1.data}}

Interaction​

Property nameTypeDescriptionExample
LoadingBooleanYou can configure the Grid list component to display a Loading state under certain circumstances. For example, during the execution of an Action, you can show a loading state by using the{{mysql1.isRunning}}setting.{{mysql1.isRunning}}
DisabledBooleanYou can configure the Grid list component to be disabled under certain conditions. For example, if there is no input value in theinput1component, it should be disabled. You can achieve this by using the{{input1.value===null \|\| input1.value==="" \|\| input1.value===undefined}}condition.{{input1.value===null\|\|input1.value===""\|\|input1.value===undefined}}

Pagination​

Property nameTypeDescriptionExample
PaginationBooleanYou can configure whether to display data in a paginated manner. If pagination is not enabled, all the data will be displayed on a single page.--
Page sizeNumberTo display multiple data items per page, you need to enable pagination. When you enable pagination, you can configure the number of items to be displayed per page.{{30}}
Enable server side paginationBooleanPlease refer to this documentation for reference:Server-side pagination--

Layout​

Property nameTypeDescriptionExample
Column adaptionSelectionWe offer two modes: Fixed and Dynamic. InFixedmode, the list is fixed. Resizing the browser window will only change the width of each column. InDynamicmode, the list is not fixed, resizing the browser window will change both the width and the number of columns. Below this table, there are also illustrations of the two modes, which can provide a more visual understanding of the differences between the two modes.--
Number of columnsNumberIn Fixed mode, the configuration displays a fixed number of columns.{{3}}
Min width of columnsNumberIn the Dynamic mode, the configuration sets the minimum column width. We will use the component width/minimum column width to calculate the maximum number of columns that can be displayed currently. If it can not be evenly divided, the excess value will be distributed evenly to supplement each column width.{{300}}
Item spacingNumberSpacing between each column and row.--
HeightSelectionTo configure the height of a component, we provide two types of formatting options: Fixed and Auto. In the Fixed mode, you need to manually adjust the height of the component and item. In the Auto mode, the height of the component and the length of the list will be dynamically adjusted based on the height of the items.--
HiddenBooleanUsed to hide a component under certain conditions. For example, the component is not displayed when there are no results frommysql1: {{!mysql1.data}}.{{!mysql1.data}}
Dynamic number of columns​

dynamic

Fixed number of columns​

fixed

Event handler​

Event handler：https://docs.illacloud.com/event-handler

Event nameDescription
Click itemWhen clicking on an item, trigger the corresponding event. For example, if one of the data in your data source is a URL, you can expect that clicking on the item will navigate to the URL associated with that item. In the event handler, you can select "go to URL" and set the value of the URL to{{currentItem.url}}.
Page changeDuring page switching, events are triggered. This is commonly used in the server-side pagination scenario. When the page changes, the action is executed again, immediately fetching the next or previous page of data.
+ + \ No newline at end of file diff --git a/zh/hugging-face-api/index.html b/zh/hugging-face-api/index.html index d8e0cd9cc6..42a8dc2996 100644 --- a/zh/hugging-face-api/index.html +++ b/zh/hugging-face-api/index.html @@ -10,13 +10,13 @@ - - + +
-

Hugging Face API

Hugging Face is the Github of the machine learning community, with hundreds of thousands of pre-trained models and 10,000 datasets currently available. You can freely access models and datasets shared by other industry experts or host and deploy your models on Hugging Face.

Some examples of models available in the Hugging Face library include:

  1. BERT (Bidirectional Encoder Representations from Transformers): BERT is a transformer-based model developed by Google for various NLP tasks. It has achieved state-of-the-art results in language understanding and machine translation tasks.
  2. GPT (Generative Pre-training Transformer): GPT is another transformer-based model developed by OpenAI. It is primarily used for language generation tasks, such as translation and text summarization.
  3. RoBERTa (Robustly Optimized BERT): RoBERTa is an extension of the BERT model that was developed to improve BERT's performance on various NLP tasks.
  4. XLNet (eXtraordinary LanguageNet): XLNet is a transformer-based model developed by Google that is designed to improve the performance of transformer models on language understanding tasks.
  5. ALBERT (A Lite BERT): ALBERT is a version of the BERT model that was developed to be more efficient and faster to train while maintaining good performance on NLP tasks.

What you can do with Hugging Face in ILLA Builder​

In Hugging Face, over 130,000 machine-learning models are available through the public API, which you can use and test for free at https://huggingface.co/models. In addition, if you need a solution for production scenarios, you can use Hugging Face's Inference Endpoints, which can be deployed and accessed at https://huggingface.co/docs/inference-endpoints/index.

ILLA Builder provides dozens of commonly used front-end components, allowing you to build different front-end interfaces based on your specific needs quickly. At the same time, ILLA offers a connection to Hugging Face, allowing you to quickly connect to the API, send requests, and receive returned data. By connecting the API and front-end components, you can implement the requirement that users can enter content through the front end and submit it to the API. The API returns the generated content to be displayed on the front end.

Configure Hugging Face API resource​

PropertiesRequiredDescription
NamerequiredDefine a resource name that will be used for display in ILLA
TokenrequiredThe user access or API token. You can get it in https://huggingface.co/settings/tokens.

Configure Action​

PropertiesRequiredDescription
Model IDrequiredSearch for models: https://huggingface.co/models
Parameter typerequiredThe parameter type of your endpoint. For example, if your endpoint needs an text input, choose fill in “inputs” parameter with text. If your endpoint needs an JSON input, choose fill in “inputs” parameter with JSON or key-value.
ParameterrequiredEnter your parameter. Use {{ componentName.value }} to use data of components.

How to use Hugging Face in ILLA Builder

Usecase 1​

Step 1: Build UI with components on ILLA Builder​

Here we will demonstrate how to build a simple text that input text prompt and a text question to output a text answer.

You need two textarea components labeled as "Enter the original text" and "Enter the question here", and button component labeled as "Run", and a text area component labeled as "Anwer" for output text. The following image is an example as described above.

hfapi

Step 2: Create a Hugging Face Resource and config the Actions​

Click + New in the action list and select Hugging Face Inference API.

hfapi2

Fill in the form to connect to your Hugging Face:

Name: The name that will be displayed in ILLA

Token: Get in your Hugging Face profile settings

hfapi3

Confirm the model information in Hugging Face before configuring the actions:

Select a model in Hugging Face Model Page

Let’s use deepset/roberta-base-squad2 as an example. Enter the detail page > click Deploy > Click Inference API

hfapi4

The parameters after “inputs” is what you should fill in ILLA.

hfapi5

In ILLA Builder, we should fill in the Model ID and Parameter. Taking the above model as an example, the “inputs” is a key-value pair, so we can fill in it with key-value or JSON.

hfapi6

hfapi7

And we also support the text input and binary input which can meet all Hugging Face Inference API connections.

Step 3: Connect actions to components​

To pass the user's front-end input to the API, you can use {{ to retrieve data inputted in the component. For example, input2 is the component to input the question and input1 is the component to input context, we can fill question and context in key, and fill {{ input.value }} in value:

{
"question": {{input2.value}},
"context": {{input1.value}}
}

Before displaying the output data of the Action in the front-end component, we should confirm which field the output of different models is placed in. Still taking deepset/roberta-base-squad2 as an example, the results are as follows:

hfapi8

So we can get the answer with {{ textQuestion.data[0].answer }}(the textQuestion is the name of the action).

hfapi9

Demo​

hfapi10

hfapi11

Usecase 2​

Here we will demonstrate how to use the Stable diffusion model thorugh the Hugging Face API in Illa Cloud.

Step 1: Building a Front-end Interface

We construct a front-end interface by utilizing a drag-and-drop approach to place essential components such as input fields, buttons, images, and more. After adjusting the styles of the components, we obtain the following complete webpage.

hugging_layout

Step 2: Creating Resources and Actions

We establish resources and actions by utilizing the Hugging Face Inference API to connect to the Stable Diffusion model. Two models can be utilized: runwayml/stable-diffusion-v1-5 and stabilityai/stable-diffusion-2-1.

Choose the "Hugging Face Inference API" for this purpose.

action_list

Provide a name for this resource and enter your token from the Hugging Face platform.

hugging_config

In the Action configuration panel, please enter the Model ID and Parameter. We will retrieve the selected model from radioGroup1, so fill in the Model ID as  {{radioGroup1.value}} . For the input, since it is obtained from the input field, fill in the parameter as {{input1.value}}. The configuration should be as shown in the following image.

hugging_demo

We attempt to input "A mecha robot in a favela in expressionist style" in the input component and run the Action. The resulting execution is as follows. From the left panel, you can observe the available data that can be called, including base64binary and dataURI.

hugging_output

Step 3: Displaying Data on Components

To display the image obtained from Step 2, we modify the Image source of the image component to {{generateInput.fileData.dataURI}}. This will enable us to show the generated image.

hugging_display

Step 4: Running the Action with Components

To run the action created in Step 2 when the button component is clicked, add an event handler to the button component.

hugging_event_config

Step 5: Testing

Following the previous four steps, you can utilize additional components and data sources to complete other tasks and build a more comprehensive tool. For example, you can use other models to assist in generating prompts or store prompts in localStorage or a database. Let's take a look at the complete outcome when all the steps are implemented.

hugging_test

Now you may play around with it! Try other cutting-edge models that is provided by Hugging face through this API. There are more to explore, such as stable diffusion anime models download, training an artist style, sampling method for realistic images. You can do much more!

- - +

Hugging Face API

Hugging Face is the Github of the machine learning community, with hundreds of thousands of pre-trained models and 10,000 datasets currently available. You can freely access models and datasets shared by other industry experts or host and deploy your models on Hugging Face.

Some examples of models available in the Hugging Face library include:

  1. BERT (Bidirectional Encoder Representations from Transformers): BERT is a transformer-based model developed by Google for various NLP tasks. It has achieved state-of-the-art results in language understanding and machine translation tasks.
  2. GPT (Generative Pre-training Transformer): GPT is another transformer-based model developed by OpenAI. It is primarily used for language generation tasks, such as translation and text summarization.
  3. RoBERTa (Robustly Optimized BERT): RoBERTa is an extension of the BERT model that was developed to improve BERT's performance on various NLP tasks.
  4. XLNet (eXtraordinary LanguageNet): XLNet is a transformer-based model developed by Google that is designed to improve the performance of transformer models on language understanding tasks.
  5. ALBERT (A Lite BERT): ALBERT is a version of the BERT model that was developed to be more efficient and faster to train while maintaining good performance on NLP tasks.

What you can do with Hugging Face in ILLA Builder​

In Hugging Face, over 130,000 machine-learning models are available through the public API, which you can use and test for free at https://huggingface.co/models. In addition, if you need a solution for production scenarios, you can use Hugging Face's Inference Endpoints, which can be deployed and accessed at https://huggingface.co/docs/inference-endpoints/index.

ILLA Builder provides dozens of commonly used front-end components, allowing you to build different front-end interfaces based on your specific needs quickly. At the same time, ILLA offers a connection to Hugging Face, allowing you to quickly connect to the API, send requests, and receive returned data. By connecting the API and front-end components, you can implement the requirement that users can enter content through the front end and submit it to the API. The API returns the generated content to be displayed on the front end.

Configure Hugging Face API resource​

PropertiesRequiredDescription
NamerequiredDefine a resource name that will be used for display in ILLA
TokenrequiredThe user access or API token. You can get it in https://huggingface.co/settings/tokens.

Configure Action​

PropertiesRequiredDescription
Model IDrequiredSearch for models: https://huggingface.co/models
Parameter typerequiredThe parameter type of your endpoint. For example, if your endpoint needs an text input, choose fill in “inputs” parameter with text. If your endpoint needs an JSON input, choose fill in “inputs” parameter with JSON or key-value.
ParameterrequiredEnter your parameter. Use {{ componentName.value }} to use data of components.

How to use Hugging Face in ILLA Builder

Usecase 1​

Step 1: Build UI with components on ILLA Builder​

Here we will demonstrate how to build a simple text that input text prompt and a text question to output a text answer.

You need two textarea components labeled as "Enter the original text" and "Enter the question here", and button component labeled as "Run", and a text area component labeled as "Anwer" for output text. The following image is an example as described above.

hfapi

Step 2: Create a Hugging Face Resource and config the Actions​

Click + New in the action list and select Hugging Face Inference API.

hfapi2

Fill in the form to connect to your Hugging Face:

Name: The name that will be displayed in ILLA

Token: Get in your Hugging Face profile settings

hfapi3

Confirm the model information in Hugging Face before configuring the actions:

Select a model in Hugging Face Model Page

Let’s use deepset/roberta-base-squad2 as an example. Enter the detail page > click Deploy > Click Inference API

hfapi4

The parameters after “inputs” is what you should fill in ILLA.

hfapi5

In ILLA Builder, we should fill in the Model ID and Parameter. Taking the above model as an example, the “inputs” is a key-value pair, so we can fill in it with key-value or JSON.

hfapi6

hfapi7

And we also support the text input and binary input which can meet all Hugging Face Inference API connections.

Step 3: Connect actions to components​

To pass the user's front-end input to the API, you can use {{ to retrieve data inputted in the component. For example, input2 is the component to input the question and input1 is the component to input context, we can fill question and context in key, and fill {{ input.value }} in value:

{
"question": {{input2.value}},
"context": {{input1.value}}
}

Before displaying the output data of the Action in the front-end component, we should confirm which field the output of different models is placed in. Still taking deepset/roberta-base-squad2 as an example, the results are as follows:

hfapi8

So we can get the answer with {{ textQuestion.data[0].answer }}(the textQuestion is the name of the action).

hfapi9

Demo​

hfapi10

hfapi11

Usecase 2​

Here we will demonstrate how to use the Stable diffusion model thorugh the Hugging Face API in Illa Cloud.

Step 1: Building a Front-end Interface

We construct a front-end interface by utilizing a drag-and-drop approach to place essential components such as input fields, buttons, images, and more. After adjusting the styles of the components, we obtain the following complete webpage.

hugging_layout

Step 2: Creating Resources and Actions

We establish resources and actions by utilizing the Hugging Face Inference API to connect to the Stable Diffusion model. Two models can be utilized: runwayml/stable-diffusion-v1-5 and stabilityai/stable-diffusion-2-1.

Choose the "Hugging Face Inference API" for this purpose.

action_list

Provide a name for this resource and enter your token from the Hugging Face platform.

hugging_config

In the Action configuration panel, please enter the Model ID and Parameter. We will retrieve the selected model from radioGroup1, so fill in the Model ID as  {{radioGroup1.value}} . For the input, since it is obtained from the input field, fill in the parameter as {{input1.value}}. The configuration should be as shown in the following image.

hugging_demo

We attempt to input "A mecha robot in a favela in expressionist style" in the input component and run the Action. The resulting execution is as follows. From the left panel, you can observe the available data that can be called, including base64binary and dataURI.

hugging_output

Step 3: Displaying Data on Components

To display the image obtained from Step 2, we modify the Image source of the image component to {{generateInput.fileData.dataURI}}. This will enable us to show the generated image.

hugging_display

Step 4: Running the Action with Components

To run the action created in Step 2 when the button component is clicked, add an event handler to the button component.

hugging_event_config

Step 5: Testing

Following the previous four steps, you can utilize additional components and data sources to complete other tasks and build a more comprehensive tool. For example, you can use other models to assist in generating prompts or store prompts in localStorage or a database. Let's take a look at the complete outcome when all the steps are implemented.

hugging_test

Now you may play around with it! Try other cutting-edge models that is provided by Hugging face through this API. There are more to explore, such as stable diffusion anime models download, training an artist style, sampling method for realistic images. You can do much more!

+ + \ No newline at end of file diff --git a/zh/hugging-face-endpoint/index.html b/zh/hugging-face-endpoint/index.html index ba75f5dfd1..b50aebc81d 100644 --- a/zh/hugging-face-endpoint/index.html +++ b/zh/hugging-face-endpoint/index.html @@ -10,13 +10,13 @@ - - + +
-

Hugging Face Endpoint

With Hugging Face Inference Endpoints, you can easily deploy Transformers, Diffusers or any model on dedicated, fully managed infrastructure. Click here to create an endpoint.

Create Hugging Face endpoint resource​

There are two ways to add a Hugging Face Endpoint resource.

  1. Enter the ILLA Builder >> Click Resources tab >> Click Create New >> Choose Hugging Face Endpoint >> Configure the connection information and click Save Resource
  2. Enter the edit page >> click + New in the action list >> Choose Hugging Face Endpoint >> Configure the connection information or click + New Resource to add new connection information

Configure connection information​

PropertiesRequiredDescription
NamerequiredDefine a resource name that will be used for display in ILLA
Endpoint URLrequiredcreate Endpoint here: https://ui.endpoints.huggingface.co/new and get the URL.
TokenrequiredThe organization token. You can get it in https://huggingface.co/settings/tokens.

Create Actions​

Enter the edit page >> click + New in the action list >> Choose Hugging Face Endpoint >> Choose an existing resource or add a new resource

Configure actions​

PropertiesRequiredDescription
Parameter typerequiredThe parameter type of your Endpoint. For example, if your Endpoint needs an text input, choose fill in “inputs” parameter with text. If your Endpoint needs an JSON input, choose fill in “inputs” parameter with JSON or key-value.
ParameterrequiredEnter your parameter. Use {{ componentName.value }} to use data of components.

Use case​

We have deployed openai/whisper-base which gets an audio file input and converts into text. It is suitable for meeting minutes, podcasts to text, etc. Next we will introduce how to use this model to build an application in ILLA Cloud.

Step 1: Build the front-end interface with components​

We have built an interface using the components such as file upload and button, as follows.

Step 2: Add a Hugging Face resource​

Fill in the fields shown below to finish the resource configuration. Create an Endpoint and get the Endpoint URL. And get the organization API token in profile settings.

Step 3: Configure an Action​

Select a parameter type first. Take openai/whisper-base as an example, this model requires binary file input so we change the parameter to Binary.

Set the binary to be passed to the model as the file data uploaded from the file upload component. For example, {{upload1.value[0]}}

Step 4: Connect the components and actions​

Add an event handler to the button to trigger the action run when the button is clicked. And set the value of text component to {{whisper.data[0].text}} to display the convert result on text component.

After the above steps are configured, the application is created and the running results are as follows.

- - +

Hugging Face Endpoint

With Hugging Face Inference Endpoints, you can easily deploy Transformers, Diffusers or any model on dedicated, fully managed infrastructure. Click here to create an endpoint.

Create Hugging Face endpoint resource​

There are two ways to add a Hugging Face Endpoint resource.

  1. Enter the ILLA Builder >> Click Resources tab >> Click Create New >> Choose Hugging Face Endpoint >> Configure the connection information and click Save Resource
  2. Enter the edit page >> click + New in the action list >> Choose Hugging Face Endpoint >> Configure the connection information or click + New Resource to add new connection information

Configure connection information​

PropertiesRequiredDescription
NamerequiredDefine a resource name that will be used for display in ILLA
Endpoint URLrequiredcreate Endpoint here: https://ui.endpoints.huggingface.co/new and get the URL.
TokenrequiredThe organization token. You can get it in https://huggingface.co/settings/tokens.

Create Actions​

Enter the edit page >> click + New in the action list >> Choose Hugging Face Endpoint >> Choose an existing resource or add a new resource

Configure actions​

PropertiesRequiredDescription
Parameter typerequiredThe parameter type of your Endpoint. For example, if your Endpoint needs an text input, choose fill in “inputs” parameter with text. If your Endpoint needs an JSON input, choose fill in “inputs” parameter with JSON or key-value.
ParameterrequiredEnter your parameter. Use {{ componentName.value }} to use data of components.

Use case​

We have deployed openai/whisper-base which gets an audio file input and converts into text. It is suitable for meeting minutes, podcasts to text, etc. Next we will introduce how to use this model to build an application in ILLA Cloud.

Step 1: Build the front-end interface with components​

We have built an interface using the components such as file upload and button, as follows.

Step 2: Add a Hugging Face resource​

Fill in the fields shown below to finish the resource configuration. Create an Endpoint and get the Endpoint URL. And get the organization API token in profile settings.

Step 3: Configure an Action​

Select a parameter type first. Take openai/whisper-base as an example, this model requires binary file input so we change the parameter to Binary.

Set the binary to be passed to the model as the file data uploaded from the file upload component. For example, {{upload1.value[0]}}

Step 4: Connect the components and actions​

Add an event handler to the button to trigger the action run when the button is clicked. And set the value of text component to {{whisper.data[0].text}} to display the convert result on text component.

After the above steps are configured, the application is created and the running results are as follows.

+ + \ No newline at end of file diff --git a/zh/hydra/index.html b/zh/hydra/index.html index 0573ac5828..5215e4a6be 100644 --- a/zh/hydra/index.html +++ b/zh/hydra/index.html @@ -10,13 +10,13 @@ - - + +
-

Hydra

Hydra​

Hydra is a powerful integration within the ILLA Cloud platform that seamlessly connects and consolidates various data sources and applications. Acting as a central hub, Hydra enables efficient data flow and communication between different systems, allowing for real-time data synchronization, automated workflows, and streamlined processes. With its robust capabilities, Hydra empowers businesses to optimize their operations, enhance collaboration, and make data-driven decisions with ease, all within the integrated ecosystem of ILLA Cloud.

Create Hydra​

There are two ways to create a resource in ILLA after signing into your account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Hydra from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Hydra will display as shown.

hydra_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Hydra from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Hydra database.

hydra_config

hydra_config_1

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Hydra server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.
CA Certificaterequireda digital certificate that is used to verify the identity of a server and establish a secure, encrypted connection between a client and a Hydra cluster. If you don't specify it, we have filled in a default certificate for you.
Client Keyoptionala parameter that is used to establish a secure connection between the Hydra client and the Hydra server.
Client Certificateoptionala security feature that allows a client to authenticate itself to a Hydra server

Create Actions​

We have created a Hydra resource, we can add the action by selecting Hyd from action list and choosing the Create action button.

hydra_resource_list

Now we have added the Hydra server as an action to our building page.

hydra

Configure Hydra​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

Hydra

Hydra​

Hydra is a powerful integration within the ILLA Cloud platform that seamlessly connects and consolidates various data sources and applications. Acting as a central hub, Hydra enables efficient data flow and communication between different systems, allowing for real-time data synchronization, automated workflows, and streamlined processes. With its robust capabilities, Hydra empowers businesses to optimize their operations, enhance collaboration, and make data-driven decisions with ease, all within the integrated ecosystem of ILLA Cloud.

Create Hydra​

There are two ways to create a resource in ILLA after signing into your account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Hydra from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Hydra will display as shown.

hydra_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Hydra from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Hydra database.

hydra_config

hydra_config_1

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Hydra server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.
CA Certificaterequireda digital certificate that is used to verify the identity of a server and establish a secure, encrypted connection between a client and a Hydra cluster. If you don't specify it, we have filled in a default certificate for you.
Client Keyoptionala parameter that is used to establish a secure connection between the Hydra client and the Hydra server.
Client Certificateoptionala security feature that allows a client to authenticate itself to a Hydra server

Create Actions​

We have created a Hydra resource, we can add the action by selecting Hyd from action list and choosing the Create action button.

hydra_resource_list

Now we have added the Hydra server as an action to our building page.

hydra

Configure Hydra​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/zh/icon/index.html b/zh/icon/index.html index c859d85648..640c306780 100644 --- a/zh/icon/index.html +++ b/zh/icon/index.html @@ -10,13 +10,13 @@ - - + +
-

Icon

What is Icon?​

The Icon component in ILLA Cloud is a powerful feature that allows users to enhance the visual appeal and functionality of their applications. With the Icon component, users can easily add icons from popular icon libraries to their user interfaces, providing a more intuitive and engaging experience for their users.

Properties​

PropertiesDescription
Iconallows users to easily select an icon from a predefined set of options
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Event handler​

EventDescription
ClickWhen a user click this icon, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemestroke color of the icon
displayNamethe name of this component (ie icon1)
eventsgenerated or triggered when certain actions or events occur within the component.
hiddenhidden status (true or false)
iconNamethe label name for icon
tooltipTextvalue of tooltip text

Example: {{icon1.iconName}}

Use case​

Below are some examples of icons we offer:

  • Flat Color Icons:

icon_picker0

  • Simple Line:

icon_picker1

  • Tabler Icons:

icon_picker2

  • Bootstrap Icons:

icon_picker3

- - +

Icon

What is Icon?​

The Icon component in ILLA Cloud is a powerful feature that allows users to enhance the visual appeal and functionality of their applications. With the Icon component, users can easily add icons from popular icon libraries to their user interfaces, providing a more intuitive and engaging experience for their users.

Properties​

PropertiesDescription
Iconallows users to easily select an icon from a predefined set of options
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Event handler​

EventDescription
ClickWhen a user click this icon, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemestroke color of the icon
displayNamethe name of this component (ie icon1)
eventsgenerated or triggered when certain actions or events occur within the component.
hiddenhidden status (true or false)
iconNamethe label name for icon
tooltipTextvalue of tooltip text

Example: {{icon1.iconName}}

Use case​

Below are some examples of icons we offer:

  • Flat Color Icons:

icon_picker0

  • Simple Line:

icon_picker1

  • Tabler Icons:

icon_picker2

  • Bootstrap Icons:

icon_picker3

+ + \ No newline at end of file diff --git a/zh/illa-flow-introduction/index.html b/zh/illa-flow-introduction/index.html index f268c137ed..b6e45d5754 100644 --- a/zh/illa-flow-introduction/index.html +++ b/zh/illa-flow-introduction/index.html @@ -10,13 +10,13 @@ - - + +
-

About ILLA Flow

What is ILLA Flow​

ILLA Flow is an automation tool designed to help users connect and automate various databases, APIs, and services without writing code or with minimal code. ILLA Flow supports WebHook and scheduled task triggers to connect different APIs, databases, code, and triggers. When the trigger conditions are met, ILLA Flow automatically executes the corresponding actions, enabling automated data transfer and task execution between APIs and databases. The goal of ILLA Flow is to simplify the process of writing automation logic code, allowing users to easily achieve automation for different tasks.

Trigger type​

  • Schedule
  • Webhook

Event type​

  • PostgreSQL, MySQL, MariaDB, TiDB, Neon, MongoDB, Snowflake, Supabase, Clickhouse, Hydra
  • Rest API
  • GraphQL
  • AI Agent: You can customize the behavior of the AI and generate specific content.
  • Transformer: You can handle tasks by writing JavaScript.
  • Condition: Used for handling processing under different conditions.
  • Loop: Iterative execution of tasks.
  • Response: Response data in a WebHook request.
  • Error handler: Used for setting error handling.

How to use ILLA Flow​

- - +

About ILLA Flow

What is ILLA Flow​

ILLA Flow is an automation tool designed to help users connect and automate various databases, APIs, and services without writing code or with minimal code. ILLA Flow supports WebHook and scheduled task triggers to connect different APIs, databases, code, and triggers. When the trigger conditions are met, ILLA Flow automatically executes the corresponding actions, enabling automated data transfer and task execution between APIs and databases. The goal of ILLA Flow is to simplify the process of writing automation logic code, allowing users to easily achieve automation for different tasks.

Trigger type​

  • Schedule
  • Webhook

Event type​

  • PostgreSQL, MySQL, MariaDB, TiDB, Neon, MongoDB, Snowflake, Supabase, Clickhouse, Hydra
  • Rest API
  • GraphQL
  • AI Agent: You can customize the behavior of the AI and generate specific content.
  • Transformer: You can handle tasks by writing JavaScript.
  • Condition: Used for handling processing under different conditions.
  • Loop: Iterative execution of tasks.
  • Response: Response data in a WebHook request.
  • Error handler: Used for setting error handling.

How to use ILLA Flow​

+ + \ No newline at end of file diff --git a/zh/illa-flow-response/index.html b/zh/illa-flow-response/index.html index 26fe05b62a..99a3146a93 100644 --- a/zh/illa-flow-response/index.html +++ b/zh/illa-flow-response/index.html @@ -10,13 +10,13 @@ - - + +
-

Response

Introduction​

When you expect to return data after a certain node has finished executing, you can use the Response node.

You can add different responses for different scenarios, which will be returned based on the actual execution result.

In the case of the same execution conditions (such as several parallel running links that all succeed), when adding Response nodes separately, we will only return the data from the first Response node that has finished running.

Parameters​

Property nameDescription
Status codeIt will be returned as the status of the request.
LocationIn the case of a 307 or 308 status code, you can set the redirect URL in the Location header. When the browser receives this status code, it will automatically redirect to the specified URL.
Response bodyYou can configure it to return JSON, Text, or not return any data. JSON, such as{"a":1, "b":2}; Text, can be used to return String or numeric values. For string values, it can be a simple text likeHello world. For numeric values, they need to be enclosed in double curly braces, like{{5}}.
Response headersUsed to set parameters in response headers.
- - +

Response

Introduction​

When you expect to return data after a certain node has finished executing, you can use the Response node.

You can add different responses for different scenarios, which will be returned based on the actual execution result.

In the case of the same execution conditions (such as several parallel running links that all succeed), when adding Response nodes separately, we will only return the data from the first Response node that has finished running.

Parameters​

Property nameDescription
Status codeIt will be returned as the status of the request.
LocationIn the case of a 307 or 308 status code, you can set the redirect URL in the Location header. When the browser receives this status code, it will automatically redirect to the specified URL.
Response bodyYou can configure it to return JSON, Text, or not return any data. JSON, such as{"a":1, "b":2}; Text, can be used to return String or numeric values. For string values, it can be a simple text likeHello world. For numeric values, they need to be enclosed in double curly braces, like{{5}}.
Response headersUsed to set parameters in response headers.
+ + \ No newline at end of file diff --git a/zh/illa-flow-webhook/index.html b/zh/illa-flow-webhook/index.html index 33af2df671..79e482ab6b 100644 --- a/zh/illa-flow-webhook/index.html +++ b/zh/illa-flow-webhook/index.html @@ -10,13 +10,13 @@ - - + +
-

WebHook

What is WebHook​

WebHook is an event notification mechanism implemented through HTTP requests. ILLA Flow allows users to trigger workflows in ILLA Flow by making an HTTP request to its WebHook and retrieve the returned data.

How to use it​

Body params​

Used to set the parameters required in the request body when making a request to this WebHook.

Property nameDescription
KeyThe parameter names.
TypeUsed to set the data type.
RequiredUsed to set whether this parameter is required.
Test valueUsed to enter test values. If your parameter type is String, you can directly enter the String. If your parameter type is another type, you need to enclose the test value in{{}}. For example, for a numerical parameter, you need to enter{{5}}, and for an array parameter, you need to enter{{[1,2,3,4]}}.

How to request​

Copy cURL to get the content required when making a request to this WebHook.

Here is an example,

curl -X POST 
https://cloud-api.illacloud.com/flow/api/v1/webhook/workflows/ILAex4p1C7Wm/run?webhookToken=xxxxxx
-H "Content-Type: application/json" 
-d '{"param":{"a":1,"b":2},"param1":[1,2,3]}'

cURL includes the following content:

FieldDescriptionHow to use in the REST API Action of ILLA
Request methodPOSTAction type
URLThe part before the question mark is the requested URL. For example,https://cloud-api.illacloud.com/flow/api/v1/webhook/workflows/ILAex4p1C7Wm/runBase URL
Query parametersThe part after the question mark is the requested URL. For example,webhookToken=xxxxxxURL Parameters
HeaderContent-Type: application/jsonHeaders
Request bodyIf you have set a request body in the WebHook, the cURL command will include an example of the request body.Body, it could bex-www-form-urlencodedorRaw - JSON

How to get the response​

Learn more about response: https://docs.illacloud.com/illa-flow-response

- - +

WebHook

What is WebHook​

WebHook is an event notification mechanism implemented through HTTP requests. ILLA Flow allows users to trigger workflows in ILLA Flow by making an HTTP request to its WebHook and retrieve the returned data.

How to use it​

Body params​

Used to set the parameters required in the request body when making a request to this WebHook.

Property nameDescription
KeyThe parameter names.
TypeUsed to set the data type.
RequiredUsed to set whether this parameter is required.
Test valueUsed to enter test values. If your parameter type is String, you can directly enter the String. If your parameter type is another type, you need to enclose the test value in{{}}. For example, for a numerical parameter, you need to enter{{5}}, and for an array parameter, you need to enter{{[1,2,3,4]}}.

How to request​

Copy cURL to get the content required when making a request to this WebHook.

Here is an example,

curl -X POST 
https://cloud-api.illacloud.com/flow/api/v1/webhook/workflows/ILAex4p1C7Wm/run?webhookToken=xxxxxx
-H "Content-Type: application/json" 
-d '{"param":{"a":1,"b":2},"param1":[1,2,3]}'

cURL includes the following content:

FieldDescriptionHow to use in the REST API Action of ILLA
Request methodPOSTAction type
URLThe part before the question mark is the requested URL. For example,https://cloud-api.illacloud.com/flow/api/v1/webhook/workflows/ILAex4p1C7Wm/runBase URL
Query parametersThe part after the question mark is the requested URL. For example,webhookToken=xxxxxxURL Parameters
HeaderContent-Type: application/jsonHeaders
Request bodyIf you have set a request body in the WebHook, the cURL command will include an example of the request body.Body, it could bex-www-form-urlencodedorRaw - JSON

How to get the response​

Learn more about response: https://docs.illacloud.com/illa-flow-response

+ + \ No newline at end of file diff --git a/zh/image/index.html b/zh/image/index.html index 23f942ace7..b9f81128da 100644 --- a/zh/image/index.html +++ b/zh/image/index.html @@ -10,13 +10,13 @@ - - + +
-

Image

What is Image?​

The image component in ILLA Cloud is a versatile tool that allows users to add and display images within their applications. It provides various functionalities to enhance the visual experience for users.

Properties​

PropertiesDescription
Image sourcespecify the source of the image to be displayed
Alt textalternative text for the image. It is displayed when the image cannot be loaded or for users with visual impairments
Scale Typehow the image is scaled within the component's dimensions, including container, cover, fill, none, scale-down.
Event Handlerallowing users to define actions triggered by user interactions with the image
Tooltipadd a tooltip or a descriptive text that appears when the user hovers over the image
Hiddencontrol the visibility of the image component.
Stylesallowing users to customize its appearance. Users can apply styles such as radius

Method​

You can use other components to control the component. We support the following methods:

  • setImageUrl

dynamically change the source or URL of the image.

PropertiesDescription
Image URLimage source url

Event handler​

EventDescription
Clickperform specific actions or execute code when the image component is clicked

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
altTexta text-based alternative that describes the content or purpose of the image
displayNameA string value that represents the name or title of the image.
eventsAn array or object that defines the event handlers associated with the image component, such as click
hiddenA boolean value that determines whether the image component is hidden from the user interface.
imageSrcthe source or location of the image to be displayed in the component
objectFithow the image is fitted or scaled within the component's dimensions
radiusapply rounded corners to the image component.
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the image component.

Example: {{image1.displayName}}

Use case​

Next, we will demonstrate how to control the image display with a button.

Step 1 Add Components​

Add a Image component and a button component to the canvas.

You can set the image source of image component to any image address you want to display. Here we will use the default image as a start example and label the button as "Change" as shown below

image_layout

Step 2 Configure the component​

For the button component, we can configure it to set the image source of the image component to a new image address.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the image1 component that you want to change as the target of the event.
  3. Choose the setImageUrl action
  4. Put the new image address in the Value field

image_config

Step 3 Test​

Now that when you click the "Play" button, the image should switch

image_test

- - +

Image

What is Image?​

The image component in ILLA Cloud is a versatile tool that allows users to add and display images within their applications. It provides various functionalities to enhance the visual experience for users.

Properties​

PropertiesDescription
Image sourcespecify the source of the image to be displayed
Alt textalternative text for the image. It is displayed when the image cannot be loaded or for users with visual impairments
Scale Typehow the image is scaled within the component's dimensions, including container, cover, fill, none, scale-down.
Event Handlerallowing users to define actions triggered by user interactions with the image
Tooltipadd a tooltip or a descriptive text that appears when the user hovers over the image
Hiddencontrol the visibility of the image component.
Stylesallowing users to customize its appearance. Users can apply styles such as radius

Method​

You can use other components to control the component. We support the following methods:

  • setImageUrl

dynamically change the source or URL of the image.

PropertiesDescription
Image URLimage source url

Event handler​

EventDescription
Clickperform specific actions or execute code when the image component is clicked

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
altTexta text-based alternative that describes the content or purpose of the image
displayNameA string value that represents the name or title of the image.
eventsAn array or object that defines the event handlers associated with the image component, such as click
hiddenA boolean value that determines whether the image component is hidden from the user interface.
imageSrcthe source or location of the image to be displayed in the component
objectFithow the image is fitted or scaled within the component's dimensions
radiusapply rounded corners to the image component.
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the image component.

Example: {{image1.displayName}}

Use case​

Next, we will demonstrate how to control the image display with a button.

Step 1 Add Components​

Add a Image component and a button component to the canvas.

You can set the image source of image component to any image address you want to display. Here we will use the default image as a start example and label the button as "Change" as shown below

image_layout

Step 2 Configure the component​

For the button component, we can configure it to set the image source of the image component to a new image address.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the image1 component that you want to change as the target of the event.
  3. Choose the setImageUrl action
  4. Put the new image address in the Value field

image_config

Step 3 Test​

Now that when you click the "Play" button, the image should switch

image_test

+ + \ No newline at end of file diff --git a/zh/index.html b/zh/index.html index c19b5b833f..0ec7af6dfe 100644 --- a/zh/index.html +++ b/zh/index.html @@ -10,14 +10,14 @@ - - + +
-

About ILLA

ILLA enables you to build and deploy internal apps quickly. Connect to your databases and APIs, assemble UIs with drag-and-drop building blocks like tables and forms, and write queries to interact with data using SQL and JavaScript.

What is ILLA?​

ILLA is an open-source low-code platform for developers to build and deploy internal tools remarkably fast.

With ILLA, you can easily connect to various data sources such as databases, API/GraphQL endpoints, SaaS tools, and cloud storage services. These include popular options like PostgreSQL, MongoDB, MySQL, Stripe, Google Sheets, and AWS S3. Once connected, ILLA can run queries to fetch and update data from these sources. The user interface (UI) provides convenient components for visualizing and modifying the data, such as tables, charts, and forms.

With ILLA, you can quickly and easily build a user interface (UI) using pre-built widgets that you can drag and drop onto a grid-style canvas. This simplifies the integration of the front-end and back-end of your application and optimizes the building process. Additionally, ILLA supports JavaScript inside widgets, queries, and other components, allowing you to add logic, transform data, and define complex workflows. This makes it easy to customize your application to your specific needs.

Get Start​

To try ILLA, the most convenient way is to sign up and log in to ILLA Cloud. +

About ILLA

ILLA enables you to build and deploy internal apps quickly. Connect to your databases and APIs, assemble UIs with drag-and-drop building blocks like tables and forms, and write queries to interact with data using SQL and JavaScript.

What is ILLA?​

ILLA is an open-source low-code platform for developers to build and deploy internal tools remarkably fast.

With ILLA, you can easily connect to various data sources such as databases, API/GraphQL endpoints, SaaS tools, and cloud storage services. These include popular options like PostgreSQL, MongoDB, MySQL, Stripe, Google Sheets, and AWS S3. Once connected, ILLA can run queries to fetch and update data from these sources. The user interface (UI) provides convenient components for visualizing and modifying the data, such as tables, charts, and forms.

With ILLA, you can quickly and easily build a user interface (UI) using pre-built widgets that you can drag and drop onto a grid-style canvas. This simplifies the integration of the front-end and back-end of your application and optimizes the building process. Additionally, ILLA supports JavaScript inside widgets, queries, and other components, allowing you to add logic, transform data, and define complex workflows. This makes it easy to customize your application to your specific needs.

Get Start​

To try ILLA, the most convenient way is to sign up and log in to ILLA Cloud. To expedite the review process, we invite you to join our Discord Community, where you can obtain an invitation code faster.

Community​

To receive more timely support while using ILLA, consider joining our Discord Community. This will allow you to get support directly from the community, which can help you resolve any issues more quickly.

- - + + \ No newline at end of file diff --git a/zh/input/index.html b/zh/input/index.html index 7ca2bf947a..04de71741f 100644 --- a/zh/input/index.html +++ b/zh/input/index.html @@ -10,13 +10,13 @@ - - + +
-

Input

What is Input?​

Text Input component is a user interface element that allows users to enter and edit text in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Patternspecify a regular expression pattern that the user's input must match in order to be considered valid
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the input value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the input field will be highlighted and ready for the user to start typing without the need for the user to click on the input field

Example Usage:

Input component support listening to the onChange event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onChange event of a Radio Group component, you would add an event handler to that Radio Group component.
  2. In the Edit event handler, select Control component in action, select the Input component that you want to update as the target of the event.
  3. Choose the SetValue action and select the appropriate value for the input component. This will be the value that the input component has and will update when the event is triggered.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the input component will automatically update whenever the onChange event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit from focusing on the cascader component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
prefixTextvalue of the text prefix
suffixTextvalue of the text suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
regexregular expression of input
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{input1.value}}

Use case​

Below are some examples for customizing input component.

  • Prefix:

input_prefix

  • Suffix:

input_suffix

  • Tooltip:

input_tooltip

  • Pattern:

input_pattern

- - +

Input

What is Input?​

Text Input component is a user interface element that allows users to enter and edit text in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Patternspecify a regular expression pattern that the user's input must match in order to be considered valid
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the input value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the input field will be highlighted and ready for the user to start typing without the need for the user to click on the input field

Example Usage:

Input component support listening to the onChange event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onChange event of a Radio Group component, you would add an event handler to that Radio Group component.
  2. In the Edit event handler, select Control component in action, select the Input component that you want to update as the target of the event.
  3. Choose the SetValue action and select the appropriate value for the input component. This will be the value that the input component has and will update when the event is triggered.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the input component will automatically update whenever the onChange event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit from focusing on the cascader component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
prefixTextvalue of the text prefix
suffixTextvalue of the text suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
regexregular expression of input
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{input1.value}}

Use case​

Below are some examples for customizing input component.

  • Prefix:

input_prefix

  • Suffix:

input_suffix

  • Tooltip:

input_tooltip

  • Pattern:

input_pattern

+ + \ No newline at end of file diff --git a/zh/list/index.html b/zh/list/index.html index f4d9776a81..1c6df19476 100644 --- a/zh/list/index.html +++ b/zh/list/index.html @@ -10,13 +10,13 @@ - - + +
-

List

List​

The List component is similar to a Container in that you can nest other components inside of it.

Drag components to list​

When you drag a List component to the Frame, it automatically includes some components. You can deleted or modify them and drag new components into list.

Only the first item can be edited, and others will automatically change based on the first item. You can also focus on the first item and drag the bar to change the height items.

Display query results in a list​

When you drag a List component to the Frame, it automatically displays the test data in JSON format. You can change the data source to an action by using {{ mysql_list_query.data }}.

After setting the data source, you can change the data of components:

  1. Select the component in the first item.
  2. If the component data is from the list, you can set the data by using {{ currentItem.columnName }} . For example, you can set the image source with the {{ currentItem.Avater }}. Avater is a column from the data source of the list.

You can use {{ currentItem.columnName }} only when the components are in the list.

Use the data of list​

You can use the data of selected items by using {{ list1.selectedItem.columnName }}. Or use any data of list by using {{ list1.dataSource[n].columnName }}

- - +

List

List​

The List component is similar to a Container in that you can nest other components inside of it.

Drag components to list​

When you drag a List component to the Frame, it automatically includes some components. You can deleted or modify them and drag new components into list.

Only the first item can be edited, and others will automatically change based on the first item. You can also focus on the first item and drag the bar to change the height items.

Display query results in a list​

When you drag a List component to the Frame, it automatically displays the test data in JSON format. You can change the data source to an action by using {{ mysql_list_query.data }}.

After setting the data source, you can change the data of components:

  1. Select the component in the first item.
  2. If the component data is from the list, you can set the data by using {{ currentItem.columnName }} . For example, you can set the image source with the {{ currentItem.Avater }}. Avater is a column from the data source of the list.

You can use {{ currentItem.columnName }} only when the components are in the list.

Use the data of list​

You can use the data of selected items by using {{ list1.selectedItem.columnName }}. Or use any data of list by using {{ list1.dataSource[n].columnName }}

+ + \ No newline at end of file diff --git a/zh/mariadb/index.html b/zh/mariadb/index.html index 1935f98711..c42eeffbd6 100644 --- a/zh/mariadb/index.html +++ b/zh/mariadb/index.html @@ -10,13 +10,13 @@ - - + +
-

MariaDB

MariaDB in Illa is a database integration that allows you to connect and interact with a MariaDB database. MariaDB is a popular open-source relational database management system that is derived from MySQL.

With the MariaDB integration, you can query, insert, update, and delete data from a MariaDB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MariaDB database.

Create MariaDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

Select MariaDB from the database list.

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MariaDB will display as shown.

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MariaDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MariaDB database.

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MariaDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MariaDB resource, we can add the action by selecting MariaDB from action list and choosing the Create action button.

Now we have added the MariaDB server as an action to our building page.

Configure MariaDB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

MariaDB

MariaDB in Illa is a database integration that allows you to connect and interact with a MariaDB database. MariaDB is a popular open-source relational database management system that is derived from MySQL.

With the MariaDB integration, you can query, insert, update, and delete data from a MariaDB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MariaDB database.

Create MariaDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

Select MariaDB from the database list.

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MariaDB will display as shown.

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MariaDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MariaDB database.

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MariaDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MariaDB resource, we can add the action by selecting MariaDB from action list and choosing the Create action button.

Now we have added the MariaDB server as an action to our building page.

Configure MariaDB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/zh/menu/index.html b/zh/menu/index.html index 66d07c0ad6..b3b41be624 100644 --- a/zh/menu/index.html +++ b/zh/menu/index.html @@ -10,13 +10,13 @@ - - + +
-

Menu

What is Menu?​

Menu component is a user interface element that provides a navigational structure for accessing different features, options, or sections within the ILLA Cloud application. It typically consists of a list of menu items or links that users can interact with to navigate through various pages or perform specific actions.

Properties​

PropertiesDescription
Menuactual content and options displayed within the menu component
Hiddenhides the form component from the user's view
Directionthe orientation or layout of the menu component
Alignthe positioning or alignment of the menu component within its container or parent element

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
displayNamerepresents the name or label assigned to the component
hiddenwhether the menu component is visible or hidden
horizontalAligncontrols the horizontal positioning or alignment of the menu component within its container or parent element
itemscollection of menu items or options available within the menu component
modehow the menu operates or interacts with the user
selectedValuesholds the values of the menu items that have been selected or chosen by the user.

Example: {{menu1.displayName}}

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Set the layout of the pages​

Go to the page configuration as the following steps：

pages

You can use the Preset Layouts, or manually add and delete sections to set the layout.

Step 2 Add views to a page​

View path: a string spliced after the page URL to access the specified view. After the app is deployed, the complete access address is as follows: https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}/{{page_name}}/{{view_path}}

You can also enter the homepage and default view via the following path:

https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}

add_page

Step 3 Connect menu and pages​

Add a Menu component to the top of the page.

Add event handlers to Menu items → set the Action to Set router → select the page and view

For the menu components, we can configure it to switch between pages and views

  1. Click the menu component to open its inspect page.
  2. Click an item to open its configuration.
  3. Under Event handler, click **+ New**.
  4. In the Edit event handler, select Set Router in action, and select the page and the view that you want to route to as the target of the event.

menu_items

We can do the same for other pages and view you want to route to.

Step 4 Test​

menu_test

- - +

Menu

What is Menu?​

Menu component is a user interface element that provides a navigational structure for accessing different features, options, or sections within the ILLA Cloud application. It typically consists of a list of menu items or links that users can interact with to navigate through various pages or perform specific actions.

Properties​

PropertiesDescription
Menuactual content and options displayed within the menu component
Hiddenhides the form component from the user's view
Directionthe orientation or layout of the menu component
Alignthe positioning or alignment of the menu component within its container or parent element

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
displayNamerepresents the name or label assigned to the component
hiddenwhether the menu component is visible or hidden
horizontalAligncontrols the horizontal positioning or alignment of the menu component within its container or parent element
itemscollection of menu items or options available within the menu component
modehow the menu operates or interacts with the user
selectedValuesholds the values of the menu items that have been selected or chosen by the user.

Example: {{menu1.displayName}}

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Set the layout of the pages​

Go to the page configuration as the following steps：

pages

You can use the Preset Layouts, or manually add and delete sections to set the layout.

Step 2 Add views to a page​

View path: a string spliced after the page URL to access the specified view. After the app is deployed, the complete access address is as follows: https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}/{{page_name}}/{{view_path}}

You can also enter the homepage and default view via the following path:

https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}

add_page

Step 3 Connect menu and pages​

Add a Menu component to the top of the page.

Add event handlers to Menu items → set the Action to Set router → select the page and view

For the menu components, we can configure it to switch between pages and views

  1. Click the menu component to open its inspect page.
  2. Click an item to open its configuration.
  3. Under Event handler, click **+ New**.
  4. In the Edit event handler, select Set Router in action, and select the page and the view that you want to route to as the target of the event.

menu_items

We can do the same for other pages and view you want to route to.

Step 4 Test​

menu_test

+ + \ No newline at end of file diff --git a/zh/microsoft-sql/index.html b/zh/microsoft-sql/index.html index 8d32de888a..b8f05002d7 100644 --- a/zh/microsoft-sql/index.html +++ b/zh/microsoft-sql/index.html @@ -10,13 +10,13 @@ - - + +
-

Microsoft SQL

Microsoft SQL in Illa is a database integration that allows users to connect and interact with a Microsoft SQL (MS SQL) database. MS SQL is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the MS SQL integration in Illa, you can query, insert, update, and delete data from a MS SQL database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MS SQL database.

Create MS SQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Microsoft SQL from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MS SQL will display as shown.

ms_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Microsoft SQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MS SQL database.

ms_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '1433'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MS SQL server.
PasswordrequiredUse this password for authentication.
Connection optionoptionalkey-value pair to specify the connection option
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MS SQL resource; we can add the action by selecting MS SQL from action list and choosing the Create action button.

ms_resource_list

Now we have added the MS SQL server as an action to our building page.

ms

Configure MS SQL​

PropertiesDescription
Config Typethe type of configuration that you use to connect to your MS SQL Server database: SQL and Bulk insert. For SQL mode, you can use SQL query. For Bulk insert mode, you can insert data into a selected table with the format {{ [{x:a, y:b}, … ] }}
SQL querysql commands to fetch (select), insert, update, delete data from database.
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

Microsoft SQL

Microsoft SQL in Illa is a database integration that allows users to connect and interact with a Microsoft SQL (MS SQL) database. MS SQL is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the MS SQL integration in Illa, you can query, insert, update, and delete data from a MS SQL database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MS SQL database.

Create MS SQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Microsoft SQL from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MS SQL will display as shown.

ms_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Microsoft SQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MS SQL database.

ms_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '1433'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MS SQL server.
PasswordrequiredUse this password for authentication.
Connection optionoptionalkey-value pair to specify the connection option
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MS SQL resource; we can add the action by selecting MS SQL from action list and choosing the Create action button.

ms_resource_list

Now we have added the MS SQL server as an action to our building page.

ms

Configure MS SQL​

PropertiesDescription
Config Typethe type of configuration that you use to connect to your MS SQL Server database: SQL and Bulk insert. For SQL mode, you can use SQL query. For Bulk insert mode, you can insert data into a selected table with the format {{ [{x:a, y:b}, … ] }}
SQL querysql commands to fetch (select), insert, update, delete data from database.
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/zh/modal/index.html b/zh/modal/index.html index 5ff3f56cc0..3fc49a3944 100644 --- a/zh/modal/index.html +++ b/zh/modal/index.html @@ -10,13 +10,13 @@ - - + +
-

Modal

What is Modal?​

In ILLA Cloud, the modal component is a user interface element that is used to display content, information, or actions in a focused and overlayed window. The modal component typically appears on top of the main application screen, temporarily interrupting the user's workflow and drawing their attention to the modal content.

Properties​

PropertiesDescription
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, value changes
Click mask to close modalwhether clicking on the background overlay or mask of the modal will close the modal window
Show headerwhether the component should display a header or title section
Show footerwhether the component should display a footer section
Border Colorcolor of the border that surrounds a modal component
Border Radiuscurvature of the corners of a modal component's border
Border Widththickness or width of the border surrounding a modal component
Backgrounddefines the color or image that fills the content area of a modal component

Method​

You can use other components to control the component. We support the following two methods:

  • openModal

open the modal component

  • closeModal

close the modal component

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Add Components​

Add a button component labeled "Open Modal"

Add a modal component to the canvas.

Step 2 Configure the component​

For the "Open Modal" button components, we can configure it to open the modal component if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the openModal method

open_modal

Click this button to open the modal component and you may put whatever you want in the middle area of the modal.

For the "Cancel" button component, we can configure it to close the modal if clicked

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

Similarly, we can configure the "Confirm" button to congrats

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Congrat!" and description "Congratulations!". Choose Success for type, put {{2000}} for the duration (2 seconds)

modal_confirm

Step 4 Test​

modal_test

- - +

Modal

What is Modal?​

In ILLA Cloud, the modal component is a user interface element that is used to display content, information, or actions in a focused and overlayed window. The modal component typically appears on top of the main application screen, temporarily interrupting the user's workflow and drawing their attention to the modal content.

Properties​

PropertiesDescription
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, value changes
Click mask to close modalwhether clicking on the background overlay or mask of the modal will close the modal window
Show headerwhether the component should display a header or title section
Show footerwhether the component should display a footer section
Border Colorcolor of the border that surrounds a modal component
Border Radiuscurvature of the corners of a modal component's border
Border Widththickness or width of the border surrounding a modal component
Backgrounddefines the color or image that fills the content area of a modal component

Method​

You can use other components to control the component. We support the following two methods:

  • openModal

open the modal component

  • closeModal

close the modal component

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Add Components​

Add a button component labeled "Open Modal"

Add a modal component to the canvas.

Step 2 Configure the component​

For the "Open Modal" button components, we can configure it to open the modal component if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the openModal method

open_modal

Click this button to open the modal component and you may put whatever you want in the middle area of the modal.

For the "Cancel" button component, we can configure it to close the modal if clicked

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
  3. Choose the closeModal method

close_modal

Similarly, we can configure the "Confirm" button to congrats

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Congrat!" and description "Congratulations!". Choose Success for type, put {{2000}} for the duration (2 seconds)

modal_confirm

Step 4 Test​

modal_test

+ + \ No newline at end of file diff --git a/zh/mongodb/index.html b/zh/mongodb/index.html index 2d3cceee2b..eeb95b0702 100644 --- a/zh/mongodb/index.html +++ b/zh/mongodb/index.html @@ -10,14 +10,14 @@ - - + +
-

MongoDB

MongoDB is a popular NoSQL document-oriented database that is widely used for web applications and other data-driven software. MongoDB is designed to be flexible, scalable, and fast, and is particularly well-suited for handling large amounts of unstructured or semi-structured data.

In Illa, you can connect to a MongoDB database using the MongoDB Query Resource. This resource allows you to execute MongoDB queries directly from Illa, without having to write any code. You can use the query editor to write queries in MongoDB's native query language, which is based on JavaScript and uses a JSON-like syntax for working with documents.

Create MongoDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select MongoDB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MongoDB will display as shown.

mongo_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MongoDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MongoDB database.

mongo_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Config Typeoptionala type of collection used to store configuration data for sharded clusters.
HostnamerequiredThe URL or IP address for your database
Connection formatrequiredthe syntax used to specify the connection string for connecting to a MongoDB database or cluster.
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MongoDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MongoDB resource, we can add the action by selecting MongoDB from action list and choosing the Create action button.

mongo_resource_list

Now we have added the MongoDB server as an action to our building page.

mongodb

Configure MongoDB​

Overview​

Method NameDescription
Action Typeaggregate, bulkwrite, count, deleteMany. deleteOne, distinct, find, findOne
Collectiongroup of related documents that are stored together in a database
Transformertransforming data into the style you like using JavaScript

Aggregate​

process multiple documents and return computed results.

Input

PropertiesRequiredDescription
Aggregationoptionaldefines the operations to be performed on the data

For example, to get all the results whose size is medium=>group the results by type=>Calculate the sum of prices in each type for Aggregation:

[
    {
        "$match": { "size": "medium" }
    },
    {
        "$group": { "_id": "$type", "totalQuantity": { "$sum": "$price" } }
    }
]

Output

An array of the computed results.

mongo_agg_data

Use {{mongodb1.data[0].result}} to get all.

mongo_agg_code

Bulkwrite​

perform multiple write operations (insert, update, and delete) in a single request to the server

Input

PropertiesRequiredDescription
Operationsoptionalan object that specifies the type of operation to perform and the data to be written

An example for Operations:

[
    { "insertOne": { "document": { "_id": 3, "type": "beef", "size": "medium", "price": 6 } } },
    { "insertOne": { "document": { "_id": 4, "type": "sausage", "size": "large", "price": 10 } } },
    { "updateOne": {
            "filter": { "type": "cheese" },
            "update": { "$set": { "price": 8 } }
        }
    }
]

Output

The updated message is showing below.

mongo_bulk_data

Since this method make changes but does not return anything. There is no output data to access.

Count​

count the number of documents that match a given query in a collection

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the count operation

For example, to count the number of item with type “beef”, we may put below code into Query:

{"type":"beef"}

Output

The number of matching documents.

mongo_count_data

Use {{mongodb1.data}} to get it.

mongo_count_code

deleteMany​

delete multiple documents that match a given filter in a collection.

Input

PropertiesRequiredDescription
Filteroptionalspecifies the selection criteria for the delete operation, If not specified, all documents in this collection will be deleted.

For example, to delete apples from items. We may put code below to Filter.

 {"type":"apple"}

Output

The number of matching documents.

mongo_delete2_data

Use {{mongodb1.data[0].result.DeletedCount}} to get it. If no files are matched, the returned value will be 0.

mongo_delete2_code

deleteOne​

delete one document that match a given filter in a collection.

Input

PropertiesRequiredDescription
Filteroptionalspecifies the selection criteria for the delete operation

For example, to delete an apple from items. We may put code below to Filter.

 {"type":"apple"}

Output

Delete result.

mongo_delete1_data

Use {{mongodb1.data[0].result.DeletedCount}} to get it. If no files are matched, the returned value will be 0 (Since we deleted all the apples in deleteMany, there is no apple left, thus return 0).

mongo_delete1_code

distinct​

retrieve an array of unique values for a specified field in a collection

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the distinct operation
Fieldrequiredspecifies the field to retrieve the distinct values from.

For example, we may have {"type":"orange"} for Query and _id for Field.

Output

an array of distinct values

mongo_dist_data

Use {{mongodb1.data[0].result.map(item =>({"result":item}))}} to get the array.

mongo_dist_code

find​

retrieve documents from a collection that match a specified set of criteria

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the find operation
Projectionoptionalspecifies which fields to include or exclude in the query results
Sort Byoptionalspecify the sorting order of the returned documents
Limitoptionallimit the number of documents that are returned, default no limit. A limit of 0 is equivalent to no limit.
Skipoptionalspecify the number of documents to skip, default to 0.

For example, to find the id, price, and type of all oranges sorted by their id.

For Query, {"type": "orange"}

For Projection, {"_id": 1, "type": 1, "price": 1} +

MongoDB

MongoDB is a popular NoSQL document-oriented database that is widely used for web applications and other data-driven software. MongoDB is designed to be flexible, scalable, and fast, and is particularly well-suited for handling large amounts of unstructured or semi-structured data.

In Illa, you can connect to a MongoDB database using the MongoDB Query Resource. This resource allows you to execute MongoDB queries directly from Illa, without having to write any code. You can use the query editor to write queries in MongoDB's native query language, which is based on JavaScript and uses a JSON-like syntax for working with documents.

Create MongoDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select MongoDB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MongoDB will display as shown.

mongo_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MongoDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MongoDB database.

mongo_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Config Typeoptionala type of collection used to store configuration data for sharded clusters.
HostnamerequiredThe URL or IP address for your database
Connection formatrequiredthe syntax used to specify the connection string for connecting to a MongoDB database or cluster.
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MongoDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MongoDB resource, we can add the action by selecting MongoDB from action list and choosing the Create action button.

mongo_resource_list

Now we have added the MongoDB server as an action to our building page.

mongodb

Configure MongoDB​

Overview​

Method NameDescription
Action Typeaggregate, bulkwrite, count, deleteMany. deleteOne, distinct, find, findOne
Collectiongroup of related documents that are stored together in a database
Transformertransforming data into the style you like using JavaScript

Aggregate​

process multiple documents and return computed results.

Input

PropertiesRequiredDescription
Aggregationoptionaldefines the operations to be performed on the data

For example, to get all the results whose size is medium=>group the results by type=>Calculate the sum of prices in each type for Aggregation:

[
    {
        "$match": { "size": "medium" }
    },
    {
        "$group": { "_id": "$type", "totalQuantity": { "$sum": "$price" } }
    }
]

Output

An array of the computed results.

mongo_agg_data

Use {{mongodb1.data[0].result}} to get all.

mongo_agg_code

Bulkwrite​

perform multiple write operations (insert, update, and delete) in a single request to the server

Input

PropertiesRequiredDescription
Operationsoptionalan object that specifies the type of operation to perform and the data to be written

An example for Operations:

[
    { "insertOne": { "document": { "_id": 3, "type": "beef", "size": "medium", "price": 6 } } },
    { "insertOne": { "document": { "_id": 4, "type": "sausage", "size": "large", "price": 10 } } },
    { "updateOne": {
            "filter": { "type": "cheese" },
            "update": { "$set": { "price": 8 } }
        }
    }
]

Output

The updated message is showing below.

mongo_bulk_data

Since this method make changes but does not return anything. There is no output data to access.

Count​

count the number of documents that match a given query in a collection

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the count operation

For example, to count the number of item with type “beef”, we may put below code into Query:

{"type":"beef"}

Output

The number of matching documents.

mongo_count_data

Use {{mongodb1.data}} to get it.

mongo_count_code

deleteMany​

delete multiple documents that match a given filter in a collection.

Input

PropertiesRequiredDescription
Filteroptionalspecifies the selection criteria for the delete operation, If not specified, all documents in this collection will be deleted.

For example, to delete apples from items. We may put code below to Filter.

 {"type":"apple"}

Output

The number of matching documents.

mongo_delete2_data

Use {{mongodb1.data[0].result.DeletedCount}} to get it. If no files are matched, the returned value will be 0.

mongo_delete2_code

deleteOne​

delete one document that match a given filter in a collection.

Input

PropertiesRequiredDescription
Filteroptionalspecifies the selection criteria for the delete operation

For example, to delete an apple from items. We may put code below to Filter.

 {"type":"apple"}

Output

Delete result.

mongo_delete1_data

Use {{mongodb1.data[0].result.DeletedCount}} to get it. If no files are matched, the returned value will be 0 (Since we deleted all the apples in deleteMany, there is no apple left, thus return 0).

mongo_delete1_code

distinct​

retrieve an array of unique values for a specified field in a collection

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the distinct operation
Fieldrequiredspecifies the field to retrieve the distinct values from.

For example, we may have {"type":"orange"} for Query and _id for Field.

Output

an array of distinct values

mongo_dist_data

Use {{mongodb1.data[0].result.map(item =>({"result":item}))}} to get the array.

mongo_dist_code

find​

retrieve documents from a collection that match a specified set of criteria

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the find operation
Projectionoptionalspecifies which fields to include or exclude in the query results
Sort Byoptionalspecify the sorting order of the returned documents
Limitoptionallimit the number of documents that are returned, default no limit. A limit of 0 is equivalent to no limit.
Skipoptionalspecify the number of documents to skip, default to 0.

For example, to find the id, price, and type of all oranges sorted by their id.

For Query, {"type": "orange"}

For Projection, {"_id": 1, "type": 1, "price": 1} For Sort By, {"_id":1}

Note: replace “1” with “true” still do it!

Output

An array of objects of documents

mongo_find_data

Use {{mongodb1.data[0].result}} to get the array.

mongo_find_code

findOne​

retrieve the first document from a collection that match a specified set of criteria

Input

PropertiesRequiredDescription
Queryoptionalspecifies the selection criteria for the find operation
Projectionoptionalspecifies which fields to include or exclude in the query results
Skipoptionalspecify the number of documents to skip, default to 0.

For example, to find the id, price, and type of all oranges sorted by their id.

For Query, {"type": "orange"}

For Projection, {"_id": 1, "type": 1, "price": 1}

Note: replace “1” with “true” still do it!

Output

An array of objects of documents

mongo_find1_data

Use {{[mongodb1.data[0].result]}} to get the array.

mongo_find1_code

- - + + \ No newline at end of file diff --git a/zh/multi-select/index.html b/zh/multi-select/index.html index c16b420cae..cb925d69fd 100644 --- a/zh/multi-select/index.html +++ b/zh/multi-select/index.html @@ -10,13 +10,13 @@ - - + +
-

Multi-select

Multi-select​

The multi-select component can be useful in situations where multiple options need to be selected from a list. This can allow for more efficient data entry and filtering. The component can be configured with various properties to achieve different effects and also supports methods and event handlers for more customization.

You can add options manually or in bulk from your data source. In this article, we will introduce in detail how to use the multi-select component.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Choose at leastSet the minimum number of options to choose
Choose up toSet the maximum number of options to choose
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HeightHow to set the height to fit
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{[”value1”,”value3”…]}}

PropertiesDescription
ValueAn array of selected option values.

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the multi-select component.

Data​

The multi-select component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valuean array of selected option values

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the multi-select component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}

What’s more​

You can add or delete options by adding or deleting rows to the selection table.

- - +

Multi-select

Multi-select​

The multi-select component can be useful in situations where multiple options need to be selected from a list. This can allow for more efficient data entry and filtering. The component can be configured with various properties to achieve different effects and also supports methods and event handlers for more customization.

You can add options manually or in bulk from your data source. In this article, we will introduce in detail how to use the multi-select component.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Choose at leastSet the minimum number of options to choose
Choose up toSet the maximum number of options to choose
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HeightHow to set the height to fit
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{[”value1”,”value3”…]}}

PropertiesDescription
ValueAn array of selected option values.

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the multi-select component.

Data​

The multi-select component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valuean array of selected option values

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the multi-select component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}

What’s more​

You can add or delete options by adding or deleting rows to the selection table.

+ + \ No newline at end of file diff --git a/zh/mysql/index.html b/zh/mysql/index.html index b9c5415512..af395ccc82 100644 --- a/zh/mysql/index.html +++ b/zh/mysql/index.html @@ -10,13 +10,13 @@ - - + +
-

MySQL

MySQL in Illa is a database integration that allows you to connect and interact with a MySQL database. MySQL is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the MySQL integration in Illa, you can query, insert, update, and delete data from a MySQL database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MySQL database.

Create MySQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select MySQL from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MySQL will display as shown.

my_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MySQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MySQL database.

my_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MySQL server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MySQL resource, we can add the action by selecting MySQL from action list and choosing the Create action button.

my_resource_list

Now we have added the MySQL server as an action to our building page.

my

Configure MySQL​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

MySQL

MySQL in Illa is a database integration that allows you to connect and interact with a MySQL database. MySQL is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the MySQL integration in Illa, you can query, insert, update, and delete data from a MySQL database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a MySQL database.

Create MySQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select MySQL from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready MySQL will display as shown.

my_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select MySQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to MySQL database.

my_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the MySQL server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a MySQL resource, we can add the action by selecting MySQL from action list and choosing the Create action button.

my_resource_list

Now we have added the MySQL server as an action to our building page.

my

Configure MySQL​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/zh/neon/index.html b/zh/neon/index.html index c6ca02be85..296f71b17e 100644 --- a/zh/neon/index.html +++ b/zh/neon/index.html @@ -10,13 +10,13 @@ - - + +
-

Neon

Neon in Illa is a database integration that allows you to connect and interact with a Neon database. Neon is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Neon integration in Illa, you can query, insert, update, and delete data from a Neon database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Neon database.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Neon in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Neon, visit their website at https://neon.tech/ Let's begin!

Set up your Back end on Neon​

On the Neon dashboard, click New project and set the name to adminPanel.

neon_create_project

Then we can navigate to the project page.

neon_create_project_1

Importing data through sample SQL queries.

neon_create_sql

We now have sample database set up.

neon_sample_data

Create Neon​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Neon from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Neon will display as shown.

neon_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Neon from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Neon database.

neon_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Connection stringoptionala configuration setting that is used to specify the details of a connection to an external data source, such as a database or API.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Neon server.
PasswordrequiredUse this password for authentication.

There are two ways to fill in the information for configuring Neon.

  • Parsing given connection string

In Neon project page, scrolling done, we have a given connection string in Direct Connection.

neon_connection

Note: Tapping the blur shows the hidden numbers, then we may copy it.

After pasting the string into the connection string text area in configuration, click Parse.

neon_parsing

We have all the information filled out automatically for us.

neon_parse_done

  • Manually Fill out the information.

We can also find required information from the project page and manually fill them in to the configuration in Illa.

Create Actions​

We have created a Neon resource, we can add the action by selecting Neon from action list and choosing the Create action button.

neon_resource_list

Now we have added the Neon server as an action to our building page.

neon

Configure Neon​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first }}'
  WHERE id = {{ form1.updatedProfile.uid }};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

Neon

Neon in Illa is a database integration that allows you to connect and interact with a Neon database. Neon is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Neon integration in Illa, you can query, insert, update, and delete data from a Neon database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Neon database.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Neon in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Neon, visit their website at https://neon.tech/ Let's begin!

Set up your Back end on Neon​

On the Neon dashboard, click New project and set the name to adminPanel.

neon_create_project

Then we can navigate to the project page.

neon_create_project_1

Importing data through sample SQL queries.

neon_create_sql

We now have sample database set up.

neon_sample_data

Create Neon​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Neon from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Neon will display as shown.

neon_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Neon from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Neon database.

neon_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Connection stringoptionala configuration setting that is used to specify the details of a connection to an external data source, such as a database or API.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Neon server.
PasswordrequiredUse this password for authentication.

There are two ways to fill in the information for configuring Neon.

  • Parsing given connection string

In Neon project page, scrolling done, we have a given connection string in Direct Connection.

neon_connection

Note: Tapping the blur shows the hidden numbers, then we may copy it.

After pasting the string into the connection string text area in configuration, click Parse.

neon_parsing

We have all the information filled out automatically for us.

neon_parse_done

  • Manually Fill out the information.

We can also find required information from the project page and manually fill them in to the configuration in Illa.

Create Actions​

We have created a Neon resource, we can add the action by selecting Neon from action list and choosing the Create action button.

neon_resource_list

Now we have added the Neon server as an action to our building page.

neon

Configure Neon​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first }}'
  WHERE id = {{ form1.updatedProfile.uid }};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/zh/number-input/index.html b/zh/number-input/index.html index 991fc68f08..3376c2620b 100644 --- a/zh/number-input/index.html +++ b/zh/number-input/index.html @@ -10,13 +10,13 @@ - - + +
-

Number input

What is Number Input?​

The number Input component is a user interface element that allows users to enter and edit the number in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
Decimal placespecify the number of decimal places that can be entered in the number input.
Minimumminimum value that can be entered in the number input
Maximummaximum value that can be entered in the number input
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
Loadingmaximum value that can be entered in the number input
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • focus

When the focus method is called, the number input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

  • setValue

To set the number input value, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit from focusing on the component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the number input component.
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxthe value of maximum
minthe value of minimum
placeholderplaceholder value
prefixvalue of the prefix
suffixvalue of the suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{numberInput1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to number input with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

'111.txt' with the number '111' as its data. This is the value we want to show in number input.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 111.txt for **Object Key.**

Click Save and Run to activate this action.

s3output

Step 2 Add Components​

Next, we can add a number input component and a button component to the canvas.

We set the default value of numberInput to be 1 and labeled the button as 'Set value' as shown below

default1

Step 3 Configure the component​

For the button component, we can configure it to set the value in number input component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the numberInput1 component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

number_input_button_config

Step 4 Test​

Now that when you click the 'Set value' button, the value should change to 111.

number_input_test

- - +

Number input

What is Number Input?​

The number Input component is a user interface element that allows users to enter and edit the number in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
Decimal placespecify the number of decimal places that can be entered in the number input.
Minimumminimum value that can be entered in the number input
Maximummaximum value that can be entered in the number input
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
Loadingmaximum value that can be entered in the number input
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • focus

When the focus method is called, the number input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

  • setValue

To set the number input value, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit from focusing on the component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the number input component.
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxthe value of maximum
minthe value of minimum
placeholderplaceholder value
prefixvalue of the prefix
suffixvalue of the suffix
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCharacterCounta Boolean value indicate whether the character count of input is displayed
tooltipTextvalue of tooltip text

Example: {{numberInput1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to number input with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

'111.txt' with the number '111' as its data. This is the value we want to show in number input.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 111.txt for **Object Key.**

Click Save and Run to activate this action.

s3output

Step 2 Add Components​

Next, we can add a number input component and a button component to the canvas.

We set the default value of numberInput to be 1 and labeled the button as 'Set value' as shown below

default1

Step 3 Configure the component​

For the button component, we can configure it to set the value in number input component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the numberInput1 component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

number_input_button_config

Step 4 Test​

Now that when you click the 'Set value' button, the value should change to 111.

number_input_test

+ + \ No newline at end of file diff --git a/zh/oracledb/index.html b/zh/oracledb/index.html index 2b9a7eb8ad..5ca77f7502 100644 --- a/zh/oracledb/index.html +++ b/zh/oracledb/index.html @@ -10,13 +10,13 @@ - - + +
-

Oracle DB

Oracle DB in Illa is a database integration that allows you to connect and interact with a Oracle DB database. Oracle DB is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Oracle DB integration in Illa, you can query, insert, update, and delete data from a Oracle DB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Oracle DB database.

Create Oracle DB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Oracle DB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Oracle DB will display as shown.

oracle_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Oracle DB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Oracle DB database.

oracle_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Treat Database name asrequiredidentify a database instance with SID or Service Name.
Usernamerequiredthe username you wish to use when logging in to the Oracle DB server.
PasswordrequiredUse this password for authentication.
SSLrequireddecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created an Oracle DB resource, we can add the action by selecting Oracle DB from action list and choosing the Create action button.

oracle_resource_list

Now we have added the Oracle DB server as an action to our building page.

oracle

Configure Oracle DB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

Oracle DB

Oracle DB in Illa is a database integration that allows you to connect and interact with a Oracle DB database. Oracle DB is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Oracle DB integration in Illa, you can query, insert, update, and delete data from a Oracle DB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Oracle DB database.

Create Oracle DB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Oracle DB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Oracle DB will display as shown.

oracle_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Oracle DB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Oracle DB database.

oracle_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '3306'.
DatabaserequiredThe name of the database
Treat Database name asrequiredidentify a database instance with SID or Service Name.
Usernamerequiredthe username you wish to use when logging in to the Oracle DB server.
PasswordrequiredUse this password for authentication.
SSLrequireddecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created an Oracle DB resource, we can add the action by selecting Oracle DB from action list and choosing the Create action button.

oracle_resource_list

Now we have added the Oracle DB server as an action to our building page.

oracle

Configure Oracle DB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/zh/page/index.html b/zh/page/index.html index 129d2eb728..d1d37736db 100644 --- a/zh/page/index.html +++ b/zh/page/index.html @@ -10,13 +10,13 @@ - - + +
-

Page

​

A multi-page demo built on ILLA:

A single-page application is an app that can change pages without reloading all components on the page. Most resources(including HTML, CSS and Script) are only loaded once throughout the application's lifecycle, making a single-page application fast.

In a multi-page application, every change, such as displaying the data or submitting data back to the server requests rendering a new page from the server. The multi-page application has a few levels, which makes the application structure simple and straightforward for users.

In ILLA Builder, a single-page application can be built by setting the frame of the page and adding views to sections, and a multi-page application can be built by adding multiple pages, and developers can use both of these two design patterns in one application.

Set the layout of the pages​

Go to the page configuration as the following steps：

You can use the Preset Layouts, or manually add and delete sections to set the layout.

Add views to a page​

View path: a string spliced after the page URL to access the specified view. After the app is deployed, the complete access address is as follows: https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}/{{page_name}}/{{view_path}}

You can also enter the homepage and default view via the following path:

https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}.

Connect menu and pages​

Add event handlers to Menu items → set the Action to Set router → select the page and view

- - +

Page

​

A multi-page demo built on ILLA:

A single-page application is an app that can change pages without reloading all components on the page. Most resources(including HTML, CSS and Script) are only loaded once throughout the application's lifecycle, making a single-page application fast.

In a multi-page application, every change, such as displaying the data or submitting data back to the server requests rendering a new page from the server. The multi-page application has a few levels, which makes the application structure simple and straightforward for users.

In ILLA Builder, a single-page application can be built by setting the frame of the page and adding views to sections, and a multi-page application can be built by adding multiple pages, and developers can use both of these two design patterns in one application.

Set the layout of the pages​

Go to the page configuration as the following steps：

You can use the Preset Layouts, or manually add and delete sections to set the layout.

Add views to a page​

View path: a string spliced after the page URL to access the specified view. After the app is deployed, the complete access address is as follows: https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}/{{page_name}}/{{view_path}}

You can also enter the homepage and default view via the following path:

https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}.

Connect menu and pages​

Add event handlers to Menu items → set the Action to Set router → select the page and view

+ + \ No newline at end of file diff --git a/zh/pdf/index.html b/zh/pdf/index.html index 7219adf1ca..20aef97991 100644 --- a/zh/pdf/index.html +++ b/zh/pdf/index.html @@ -10,13 +10,13 @@ - - + +
-

PDF

What is PDF?​

The PDF component is a feature or element that allows users to view and interact with PDF documents within the application. It provides functionality for rendering, navigating, and manipulating PDF files, enabling users to access and work with PDF content seamlessly.

Properties​

PropertiesDescription
PDF sourcespecify the source of the pdf to be displayed
Show tool barcontrols the visibility of the toolbar within the PDF component
Tooltipadd a tooltip or a descriptive text that appears when the user hovers over the pdf
Scale page todetermines the scaling behavior of the PDF pages within the component
Hiddendetermines the visibility of the PDF component

Method​

You can use other components to control the component. We support the following methods:

  • setFileUrl

dynamically change the source or URL of the pdf file.

PropertiesDescription
PDF Sourcepdf source url

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
displayNameA string value that represents the name or title of the pdf.
heightthe vertical dimension or size of the PDF component
hiddenA boolean value that determines whether the pdf component is hidden from the user interface.
scaleModespecifies how the PDF document is scaled or fit within the available display area of the component
showToolBarwhether a toolbar or control panel is displayed along with the PDF component
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the pdf component.
urlsource of the PDF file to be displayed in the component
widththe horizontal dimension or size of the PDF component

Example: {{pdf1.displayName}}

Use case​

Next, we will demonstrate how to control the pdf display with a button.

Step 1 Add Components​

Add a PDF component and a button component to the canvas.

pdf_layout

Step 2 Configure the component​

For the button component, we can configure it to set the image source of the PDF component to a pdf address.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the PDF component that you want to change as the target of the event.
  3. Choose the setFileUrl action
  4. Put the new image address in the Value field

pdf_config

Step 3 Test​

Now that when you click the "Play" button, the image should switch

pdf_test

- - +

PDF

What is PDF?​

The PDF component is a feature or element that allows users to view and interact with PDF documents within the application. It provides functionality for rendering, navigating, and manipulating PDF files, enabling users to access and work with PDF content seamlessly.

Properties​

PropertiesDescription
PDF sourcespecify the source of the pdf to be displayed
Show tool barcontrols the visibility of the toolbar within the PDF component
Tooltipadd a tooltip or a descriptive text that appears when the user hovers over the pdf
Scale page todetermines the scaling behavior of the PDF pages within the component
Hiddendetermines the visibility of the PDF component

Method​

You can use other components to control the component. We support the following methods:

  • setFileUrl

dynamically change the source or URL of the pdf file.

PropertiesDescription
PDF Sourcepdf source url

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
displayNameA string value that represents the name or title of the pdf.
heightthe vertical dimension or size of the PDF component
hiddenA boolean value that determines whether the pdf component is hidden from the user interface.
scaleModespecifies how the PDF document is scaled or fit within the available display area of the component
showToolBarwhether a toolbar or control panel is displayed along with the PDF component
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the pdf component.
urlsource of the PDF file to be displayed in the component
widththe horizontal dimension or size of the PDF component

Example: {{pdf1.displayName}}

Use case​

Next, we will demonstrate how to control the pdf display with a button.

Step 1 Add Components​

Add a PDF component and a button component to the canvas.

pdf_layout

Step 2 Configure the component​

For the button component, we can configure it to set the image source of the PDF component to a pdf address.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the PDF component that you want to change as the target of the event.
  3. Choose the setFileUrl action
  4. Put the new image address in the Value field

pdf_config

Step 3 Test​

Now that when you click the "Play" button, the image should switch

pdf_test

+ + \ No newline at end of file diff --git a/zh/postgresql/index.html b/zh/postgresql/index.html index f75ca5d105..2ac20fe5c8 100644 --- a/zh/postgresql/index.html +++ b/zh/postgresql/index.html @@ -10,13 +10,13 @@ - - + +
-

PostgreSQL

PostgreSQL in Illa is a database integration that allows you to connect and interact with a PostgreSQL database. PostgreSQL is a popular open-source relational database management system that is known for its stability, reliability, and powerful features.

With the PostgreSQL integration in Illa, you can query, insert, update, and delete data from a PostgreSQL database using SQL commands. You can also create custom SQL queries and run them within Illa action. This makes it easy to build data-driven applications and dashboards that display real-time data from a PostgreSQL database.

Create PostgreSQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select PostgreSQL from the database list.

action_list

Connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready PostgreSQL will display as shown.

ex_post_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select PostgreSQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to PostgreSQL database.

post_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the PostgreSQL server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a PostgreSQL resource, we can add the action by selecting PostgreSQL from action list and choosing the Create action button.

post_resource_list

Now we have added the PostgreSQL server as an action to our building page.

post

Configure PostgreSQL​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

PostgreSQL

PostgreSQL in Illa is a database integration that allows you to connect and interact with a PostgreSQL database. PostgreSQL is a popular open-source relational database management system that is known for its stability, reliability, and powerful features.

With the PostgreSQL integration in Illa, you can query, insert, update, and delete data from a PostgreSQL database using SQL commands. You can also create custom SQL queries and run them within Illa action. This makes it easy to build data-driven applications and dashboards that display real-time data from a PostgreSQL database.

Create PostgreSQL​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select PostgreSQL from the database list.

action_list

Connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready PostgreSQL will display as shown.

ex_post_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select PostgreSQL from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to PostgreSQL database.

post_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the PostgreSQL server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a PostgreSQL resource, we can add the action by selecting PostgreSQL from action list and choosing the Create action button.

post_resource_list

Now we have added the PostgreSQL server as an action to our building page.

post

Configure PostgreSQL​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/zh/privacy-policy/index.html b/zh/privacy-policy/index.html index 7eb64f3a95..f19b151883 100644 --- a/zh/privacy-policy/index.html +++ b/zh/privacy-policy/index.html @@ -10,14 +10,14 @@ - - + +
-

Privacy Policy

Last updated: 2023-11-06

Your privacy is important to us. This Privacy Policy explains our practices regarding the collection, use and disclosure of information that we receive through our Services. This Privacy Policy does not apply to any third-party websites, services or applications, even if they are accessible through our Services.

In this Privacy Policy:

  1. We’ll refer to our website as the “Site”.

  2. We’ll refer to all the products and services we provide, individually and collectively, as the “Services”.

  3. We’ll refer to you, the person or entity accessing our Site or using our Services, as “you” or “your” or (if you are a purchaser of our Services), our “customer”.

Definitions​

Data Controller: For general data protection regulation purposes, the “Data Controller” means the organization who decides the purposes for which, and the way in which, any Personal Information is processed. Our customers are the Data Controllers.

Data Processor: A “Data Processor” is an organization which processes Personal Information for a Data Controller. We are the Data Processor for our customers. As a Data Processor, we are bound by the requirements of the General Data Protection Regulations (the “GDPR”).

Data Processing: Data processing is any operation or set of operations (whether automated or not) performed upon Personal Information. Examples of data processing explicitly listed in the text of the GDPR are: collection, recording, organizing, structuring, storing, adapting, altering, retrieving, consulting, using, disclosing by transmission, disseminating or making available, aligning or combining, restricting, erasure or destruction.

Personal Information: Personal information is any information which is about you, from which you can be identified. Personal Information includes information such as an individual's name, address, telephone number, or e-mail address. Personal Information also includes information about an individual's activities, such as information about his or her activity on Site or our Services, and demographic information, such as date of birth, gender, geographic area, and preferences, when any of this information is linked to personal information that identifies that individual. Personal Information does not include "aggregate" or other non-personally identifiable information. Aggregate information is information that we collect about a group or category of products, services, or users that is not personally identifiable or from which individual identities are removed.

How do we collect Personal Information?​

In our service as a Data Processor, we collect Personal Information from Data Controllers in several ways:

  1. Information you provide to us directly.

  2. Information we may receive from third parties.

  3. We may receive information about you, including Personal information, from other third parties, and may combine this information with other personal information we maintain about you. If we do so, this Privacy Policy governs any combined information that we maintain in personally identifiable format.

What information do we collect?​

We may collect the following types of personal information from you:

  1. Account information within ILLA: user ID, username, and email address.
  2. Team information within ILLA: Team Identifier, team name, etc.
  3. Information about your use of our website and services: IP address, device type, screen resolution, browser type, operating system name and version, and language. This information may also include usage data, including pages accessed and links clicked on our website, the amount of time spent on those pages, and the pages referred or recommended to you.
  4. Your usage data within ILLA, such as pages accessed and features clicked on ILLA. +

    Privacy Policy

    Last updated: 2023-11-06

    Your privacy is important to us. This Privacy Policy explains our practices regarding the collection, use and disclosure of information that we receive through our Services. This Privacy Policy does not apply to any third-party websites, services or applications, even if they are accessible through our Services.

    In this Privacy Policy:

    1. We’ll refer to our website as the “Site”.

    2. We’ll refer to all the products and services we provide, individually and collectively, as the “Services”.

    3. We’ll refer to you, the person or entity accessing our Site or using our Services, as “you” or “your” or (if you are a purchaser of our Services), our “customer”.

    Definitions​

    Data Controller: For general data protection regulation purposes, the “Data Controller” means the organization who decides the purposes for which, and the way in which, any Personal Information is processed. Our customers are the Data Controllers.

    Data Processor: A “Data Processor” is an organization which processes Personal Information for a Data Controller. We are the Data Processor for our customers. As a Data Processor, we are bound by the requirements of the General Data Protection Regulations (the “GDPR”).

    Data Processing: Data processing is any operation or set of operations (whether automated or not) performed upon Personal Information. Examples of data processing explicitly listed in the text of the GDPR are: collection, recording, organizing, structuring, storing, adapting, altering, retrieving, consulting, using, disclosing by transmission, disseminating or making available, aligning or combining, restricting, erasure or destruction.

    Personal Information: Personal information is any information which is about you, from which you can be identified. Personal Information includes information such as an individual's name, address, telephone number, or e-mail address. Personal Information also includes information about an individual's activities, such as information about his or her activity on Site or our Services, and demographic information, such as date of birth, gender, geographic area, and preferences, when any of this information is linked to personal information that identifies that individual. Personal Information does not include "aggregate" or other non-personally identifiable information. Aggregate information is information that we collect about a group or category of products, services, or users that is not personally identifiable or from which individual identities are removed.

    How do we collect Personal Information?​

    In our service as a Data Processor, we collect Personal Information from Data Controllers in several ways:

    1. Information you provide to us directly.

    2. Information we may receive from third parties.

    3. We may receive information about you, including Personal information, from other third parties, and may combine this information with other personal information we maintain about you. If we do so, this Privacy Policy governs any combined information that we maintain in personally identifiable format.

    What information do we collect?​

    We may collect the following types of personal information from you:

    1. Account information within ILLA: user ID, username, and email address.
    2. Team information within ILLA: Team Identifier, team name, etc.
    3. Information about your use of our website and services: IP address, device type, screen resolution, browser type, operating system name and version, and language. This information may also include usage data, including pages accessed and links clicked on our website, the amount of time spent on those pages, and the pages referred or recommended to you.
    4. Your usage data within ILLA, such as pages accessed and features clicked on ILLA. Information you publish to or collect from other users of the service, such as page size and
    5. App ID of the App you publish. We use this information to operate, maintain, and provide you with the features and functionality of our service.

    Detailed information on the processing of Personal Data​

    Personal Data is collected for the following purposes and using the following services:

    1. Analytics The services contained in this section enable the Owner to monitor and analyze web traffic and can be used to keep track of User behavior. Google Analytics (Google LLC) Google Analytics is a web analysis service provided by Google LLC (“Google”). Google utilizes the Data collected to track and examine the use of ILLA, to prepare reports on its activities and share them with other Google services. Google may use the Data collected to contextualize and personalize the ads of its own advertising network. Personal Data processed: Mixpanel. Place of processing: United States.
    2. Registration and authentication By registering or authenticating, users allow ILLA to identify them and give them access to dedicated services. Depending on what is described below, third parties may provide registration and authentication services. In this case, ILLA will be able to access some Data, stored by these third-party services, for registration or identification purposes. Some of the services listed below may also collect Personal Data for targeting and profiling purposes; to find out more, please refer to the description of each service. GitHub OAuth (GitHub Inc.) GitHub OAuth is a registration and authentication service provided by GitHub Inc. and is connected to the GitHub network.

    ILLA’s use and transfer to any other app of information received from Google APIs will adhere to the Google API Services User Data Policy, including the Limited Use requirements.

    What do we use Google data for?​

    When you want to connect ILLA Cloud to Google Sheets, we will request access to Google API to retrieve data from your Google Drive and Google Sheets. The specific requests and usage are as follows:

    1. To connect to Google Sheets using OAuth in read and write mode, we will request access to the following three APIs:
      • https://www.googleapis.com/auth/drive
      • https://www.googleapis.com/auth/spreadsheets
      • https://www.googleapis.com/auth/drive.file

    ILLA Cloud uses these three APIs for the following purposes:

    • We use https://www.googleapis.com/auth/drive to set your Drive access permission to read-only. This allows you and your users to read, create, modify, and delete files when accessing Google Sheets through ILLA Cloud.
    • We use https://www.googleapis.com/auth/spreadsheets to access your spreadsheets. This enables you and your users to perform read, add, delete, and modify operations on spreadsheet data through ILLA Cloud.
    • We use https://www.googleapis.com/auth/drive.file to list the accessible file names in your Drive. This helps you and your users quickly select the files they want to work with.
    1. To connect to Google Sheets using OAuth in read-only mode, we will request access to the following two APIs:
      • https://www.googleapis.com/auth/drive.readonly
      • https://www.googleapis.com/auth/spreadsheets.readonly

    ILLA Cloud uses these three APIs for the following purposes:

    • We use https://www.googleapis.com/auth/drive.readonly to set your Drive access permission to read-only. This allows you and your users to read files and no way to create, modify, and delete files when accessing Google Sheets through ILLA Cloud.
    • We use https://www.googleapis.com/auth/spreadsheets.readonly to access your spreadsheets. This enables you and your users to read data and no way to add, delete, and modify data in spreadsheet through ILLA Cloud.

    We do not store your data, and each time the data is displayed, it is directly fetched and shown to you through the API. Additionally, ILLA does not share your connection to Google data with any third parties through any means.

    What do we use your Personal Information for?​

    We will use your Personal Information, in compliance with this Privacy Policy, to help us deliver the Services to you. Any of the information we collect from you may be used in the following ways:

    1. To operate, maintain, and provide to you the features and functionality of the Services.

    2. To compile statistics and analysis about use of our Site and our Services.

    3. To personalize your experience.

    4. To improve our Site and our Services — we continually strive to improve our site offerings based on the information and feedback we receive from you.

    5. To improve customer service — your Personal Information helps us to more effectively respond to your customer service requests and support needs.

    6. To send periodic emails — The email address you provide may be used to send you information, notifications that you request about changes to our Services, to alert you of updates, and to send periodic emails containing information relevant to your account.

    7. If you purchase our Services, then to enable you to purchase, renew and appropriately use a commercial license to our Services.

    8. We may also use Personal Information you provide to send you email marketing about ILLA products and services, invite you to participate in events or surveys, or otherwise communicate with you for marketing purposes. We allow you to opt-out from receiving marketing communications from us as described in the "Your Choices" section below.

    9. We may need your Google OAuth to read your data in Google Sheets when you use the Google Sheets resource.

    We may also use your Personal Information where necessary for us to comply with a legal obligation, including to share information with government and regulatory authorities when required by law or in response to legal process, obligation, or request.

    We cooperate with government and law enforcement officials or private parties to enforce and comply with the law. We may disclose your Personal Information to government or law enforcement officials or private parties as we believe necessary or appropriate: (i) to respond to claims, legal process (including subpoenas); (ii) to protect our property, rights and safety and the property, rights and safety of a third party or the public in general; and (iii) to stop any activity that we consider illegal, unethical or legally actionable activity.

    We will request your consent before we use or disclose your Personal Information for a materially different purpose than those set forth in this Policy.

    Your Choices About Your Personal Information​

    We may use the information we collect or receive to communicate directly with you. We may send email marketing communications about ILLA. If you do not want to receive such email messages, you will be given the option to opt out. We will try to comply with your request(s) as soon as reasonably practical. Additionally, even after you opt out from receiving marketing messages from us, you will continue to receive administrative messages from us regarding our Services (e.g., account verification, purchase and billing confirmations and reminders, changes/updates to features of the Service, technical and security notices).

    Protection of Personal Information​

    At ILLA, we understand the importance of safeguarding your data. As part of our commitment to privacy, we integrate various services, including AI models, to enhance your experience. However, it is important to note that we will NEVER share your data in ILLA with any AI models. Your data remains strictly confidential and will only be used for the purposes of providing the integrated services you choose to connect and use within ILLA. We prioritize the security and privacy of your information, ensuring that it is handled with utmost care and in accordance with our updated privacy policy.

    ILLA cares about the security of your Personal Information, and we make reasonable efforts to ensure a level of security appropriate to the risk associated with the processing of your Personal Information. We maintain organizational, technical, and administrative procedures designed to protect your Personal Information against unauthorized access, deletion, loss, alteration, and misuse. Unfortunately, no data transmission or storage system can be guaranteed to be 100% secure. If you believe that your interaction with us is not secure, please contact us immediately.

    You are responsible for maintaining the secrecy of your unique password and account information, and for controlling access to your email communications from ILLA. Your privacy settings may also be affected by changes to the functionality of third-party sites and services that you add to the ILLA Service, such as single sign on. ILLA is not responsible for the functionality or security measures of any third party. Upon becoming aware of a breach of your Personal Information, we will notify you as quickly as we can and will provide timely information relating to the breach as it becomes known in accordance with any applicable laws and regulations or as is reasonably requested by you.

    Cookies​

    We didn't use cookies to remember information. At present, there is no industry standard for recognizing Do Not Track browser signals, so we do not currently respond to them.

    Who at ILLA may access your Personal Information?​

    Designated members of our staff may access Personal Information to help our customers with any questions they have, including help using our Services, investigating security issues, or following up on bug fixes with a customer. This activity is logged in our system for compliance, and we maintain different levels of access for its employees depending on their role in our company.

    Do we disclose any information to outside parties?​

    Except as set out below, we do not sell, trade, or otherwise transfer to outside parties your Personal Information.

    1. We may share your Personal Information with other companies owned by or under common ownership as ILLA, which also includes our subsidiaries (i.e., any organization we own or control).

    2. These companies will use your Personal Information in the same way as we can under this Privacy Policy, unless otherwise specified.

    3. We may disclose your Personal Information to third-party service providers (for example, drivePayment processing and data storage and processing facilities) that we use to provide the Services.

    4. We limit the Personal Information provided to these service providers to that which is reasonably necessary for them to perform their functions, and we require them to agree to maintain the confidentiality of such Personal Information.

    5. We may contract with third-party service providers to assist us in better understanding our Site visitors.

    6. These service providers are not permitted to use the information collected on our behalf except to help us conduct and improve our business.

    7. We may also release your Personal Information when we believe release is appropriate to comply with the law, enforce our site policies, or protect our or others’ rights, property, or safety.

    8. In particular, we may release your Personal Information to third parties as required to (i) satisfy any applicable law, regulation, subpoena/court order, legal process or other government request, (ii) enforce our Terms of Service, including the investigation of potential violations thereof, (iii) investigate and defend ourselves against any third party claims or allegations, (iv) protect against harm to the rights, property or safety of ILLA, its users or the public as required or permitted by law and (v) detect, prevent or otherwise address criminal (including fraud or stalking), security or technical issues.

    9. If you enable a public sharing of your ILLA applications, any information or content that you voluntarily disclose in your application becomes available to the public. If you remove information that you posted to the Services, copies may remain viewable in cached and archived pages of the Service, or if other users of the Services have copied or saved that information.

    10. In the event that we enter into, or intend to enter into, a transaction that alters the structure of our business, such as a merger, reorganization, joint venture, assignment, sale, or change of ownership, we may share Personal Information for the purpose of facilitating and completing the transaction.

    How do we handle global transfers and processing of your Personal Information?​

    Personal Information may be stored and processed in any country where we have operations, or where we engage service providers. This means that we may collect your Personal Information from, transfer it to, and store and process it in the United States and other countries outside of where you live. For example, some of our third-party providers may be located in different countries. Where this is the case, we will take steps to make sure the right security measures are taken so that your privacy rights continue to be protected as outlined in this Privacy Policy. By submitting your Personal Information, you’re agreeing to this transfer, storing or processing.

    If you are located in the European Union or other regions with laws governing data collection and use that may differ from U.S. law, please note that we may transfer information, including Personal Information, to a country and jurisdiction that does not have the same data protection laws as your jurisdiction. If we transfer your Personal Information from the E.U. and process it in the United States, we do so in accordance with applicable law. In certain situations, we may be required to disclose personal information in response to lawful requests by public authorities, including to meet national security or law enforcement requirements.

    Retention of your Personal Information​

    We retain your Personal Information for as long as we need to fulfill our Services. In addition, we retain Personal Information after we cease providing Services to you, to the extent necessary to comply with our legal obligations. Where we retain data, we do so in accordance with any limitation periods and records retention obligations that are imposed by applicable law.

    The Services may provide the ability to connect to other websites. These websites may operate independently from us and have their own privacy policies and notices, which we suggest you review. If the linked website is not owned or controlled by us, we are not responsible for its content, or the privacy practices

    By using our site, you consent to this Privacy Policy.

    Minors​

    These Services are not directed to individuals under the age of thirteen, and we kindly request they not provide any Personal Information through the Services.

    Your Rights​

    Other rights you have include the rights to:

    1. Ask for a copy of your Personal Information.

    2. Ask us to correct your Personal Information that is inaccurate, incomplete, or outdated.

    3. Ask us to transfer your Personal Information to other organizations.

    4. Ask us to erase certain categories or types of information.

    5. If you choose to remove your Personal Information, you acknowledge that we may retain archived copies of your Personal Information in order to satisfy our legal obligations, or where we reasonably believe that we have a legitimate reason to do so.

    6. Ask us to restrict certain processing.

    7. You have the right to object to processing of Personal Information. Where we have asked for your consent to process information, you have the right to withdraw this consent at any time.

    Changes to our Privacy Policy​

    If we decide to change our privacy policy, we will post those changes on this page. If we are going to use Personal Data collected through the Site in a manner materially different from that stated at the time of collection, then we will notify users via email and/or by posting a notice on our Site for 30 days prior to such use or by other means as required by law.

    Juridisiction-Specific Provisions​

    Residents of the European Economic Area and Switzerland: The Data Protection Officer can be contacted at business@illasoft.com

    Contacting Us​

    If you would like to submit a data rights request (also known as a data subject access request), please email business@illasoft.com。

    If you have any other questions, comments, or concerns about this privacy policy, please contact us via email: business@illasoft.com.

    Illa Soft, Inc

- - + + \ No newline at end of file diff --git a/zh/radio-button/index.html b/zh/radio-button/index.html index 30c05dffa3..46086484b0 100644 --- a/zh/radio-button/index.html +++ b/zh/radio-button/index.html @@ -10,13 +10,13 @@ - - + +
-

Radio button

A radio button is select input component that allows users to select one option from a group of pre-defined options. It appears as a rounded square button, which can be selected or deselected by users. When a radio button is selected, all other radio buttons in the same group are automatically deselected, ensuring that only one option can be selected at a time. Radio buttons are commonly used in forms, questionnaires, and surveys to help users make a single choice from a list of options.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueA string of selected option value.

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the radio button component.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a group of radio buttons, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valuea string of value of the selected option

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
- - +

Radio button

A radio button is select input component that allows users to select one option from a group of pre-defined options. It appears as a rounded square button, which can be selected or deselected by users. When a radio button is selected, all other radio buttons in the same group are automatically deselected, ensuring that only one option can be selected at a time. Radio buttons are commonly used in forms, questionnaires, and surveys to help users make a single choice from a list of options.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueA string of selected option value.

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the radio button component.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a group of radio buttons, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valuea string of value of the selected option

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
+ + \ No newline at end of file diff --git a/zh/radio-group/index.html b/zh/radio-group/index.html index c4a2631c2a..0e80056bee 100644 --- a/zh/radio-group/index.html +++ b/zh/radio-group/index.html @@ -10,13 +10,13 @@ - - + +
-

Radio group

A radio group, also known as a single-choice group or simply a radio group, is a component that allows users to select only one option from a list of predefined options. Each option in the group is represented by a circular button that can be selected or deselected by users. When one option is selected, any previously selected option in the group is automatically deselected.

Radio groups are commonly used in web forms, dialog boxes, and other interactive applications where users need to make a single choice from a set of options. They are useful for preventing errors that can occur when users select multiple options by mistake or confusion. Additionally, radio button groups are easy to use and visually intuitive, making them a popular choice for designers and developers alike.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueSelected value

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the radio group.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a radio group, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueSelected value

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
- - +

Radio group

A radio group, also known as a single-choice group or simply a radio group, is a component that allows users to select only one option from a list of predefined options. Each option in the group is represented by a circular button that can be selected or deselected by users. When one option is selected, any previously selected option in the group is automatically deselected.

Radio groups are commonly used in web forms, dialog boxes, and other interactive applications where users need to make a single choice from a set of options. They are useful for preventing errors that can occur when users select multiple options by mistake or confusion. Additionally, radio button groups are easy to use and visually intuitive, making them a popular choice for designers and developers alike.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueSelected value

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the radio group.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a radio group, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueSelected value

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
+ + \ No newline at end of file diff --git a/zh/rate/index.html b/zh/rate/index.html index a10a086495..d4862b2cca 100644 --- a/zh/rate/index.html +++ b/zh/rate/index.html @@ -10,13 +10,13 @@ - - + +
-

Rate

What is Rate?​

The Rate component in ILLA Cloud is a powerful tool that allows users to add rating functionality to their applications. With the Rate component, users can display a set of stars or any other custom symbol and allow users to rate an item or provide feedback.

Properties​

PropertiesDescription
Default valuesets the initial value for the rating
Iconcustomize the icon or symbol used for rating
Max countthe maximum number of icons or stars that can be displayed in the rate component
Allow halfWhen the allow half property is enabled, it allows the user to select and display a rating with half-star increments
Allow Clearenables the option for the user to clear or reset the selected rating
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the rate value, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user change the value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
allowHalfa Boolean value indicted whether half rate is allowed
customRuleuser-defined rule or validation logic that can be applied to the component
disableda Boolean value indicates the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the component.
hiddenhidden status (true or false)
iconthe icon or symbol used for rating
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxCountthe value of maximum count
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
tooltipTextvalue of tooltip text
valueuser input value

Example: {{rate1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to rate component with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

‘1.txt’ with the number ‘3.5’ as its data. This is the value we want to show in rate value.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 1.txt for **Object Key.**

Click Save and Run to activate this action.

rate_data

Step 2 Add Components​

Next, we can add a rate component and a button component to the canvas.

We set the default value of the rate component to be 0, label it as “Rate”, and labeled the button as “Set value” as shown below

![rate_layout](https://cdn.illacloud.com/official-website/img/official-site/components/rate_layout.jpg）

Step 3 Configure the component​

For the button component, we can configure it to set the value in rate component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the rate component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

rate_config

Step 4 Test​

Now that when you click the “Set value” button, the value should change to 111.

rate_test

- - +

Rate

What is Rate?​

The Rate component in ILLA Cloud is a powerful tool that allows users to add rating functionality to their applications. With the Rate component, users can display a set of stars or any other custom symbol and allow users to rate an item or provide feedback.

Properties​

PropertiesDescription
Default valuesets the initial value for the rating
Iconcustomize the icon or symbol used for rating
Max countthe maximum number of icons or stars that can be displayed in the rate component
Allow halfWhen the allow half property is enabled, it allows the user to select and display a rating with half-star increments
Allow Clearenables the option for the user to clear or reset the selected rating
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the rate value, for example, {{”value1”}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user change the value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
allowHalfa Boolean value indicted whether half rate is allowed
customRuleuser-defined rule or validation logic that can be applied to the component
disableda Boolean value indicates the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the component.
hiddenhidden status (true or false)
iconthe icon or symbol used for rating
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxCountthe value of maximum count
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
tooltipTextvalue of tooltip text
valueuser input value

Example: {{rate1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to rate component with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

‘1.txt’ with the number ‘3.5’ as its data. This is the value we want to show in rate value.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 1.txt for **Object Key.**

Click Save and Run to activate this action.

rate_data

Step 2 Add Components​

Next, we can add a rate component and a button component to the canvas.

We set the default value of the rate component to be 0, label it as “Rate”, and labeled the button as “Set value” as shown below

![rate_layout](https://cdn.illacloud.com/official-website/img/official-site/components/rate_layout.jpg）

Step 3 Configure the component​

For the button component, we can configure it to set the value in rate component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the rate component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

rate_config

Step 4 Test​

Now that when you click the “Set value” button, the value should change to 111.

rate_test

+ + \ No newline at end of file diff --git a/zh/redis/index.html b/zh/redis/index.html index 913e16126d..25cc1fc325 100644 --- a/zh/redis/index.html +++ b/zh/redis/index.html @@ -10,13 +10,13 @@ - - + +
-

Redis

Redis in Illa is a database integration that allows you to connect and interact with a Redis database. Redis is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Redis integration in Illa, you can query, insert, update, and delete data from a Redis database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Redis database.

Create Redis​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Redis from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Redis will display as shown.

redis_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Redis from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Redis database.

redis_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, the default port is '6379'.
Database Indexoptionala data structure that is used to optimize the performance of queries that retrieve data from a Redis database
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Redis server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a Redis resource, we can add the action by selecting Redis from action list and choosing the Create action button.

redis_resource_list

Now we have added the Redis server as an action to our building page.

redis

Configure Redis​

PropertiesDescription
querycommands to retrieve data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • KEYS

This command retrieves a list of all keys in the Redis database. You can use wildcards to filter the keys by pattern.

KEYS *
KEYS user:*
  • GET

This command retrieves the value associated with a given key.

GET user:12345
  • HGETALL

This command retrieves all fields and their values from a Redis hash data structure.

HGETALL user:12345
  • ZRANGE

This command retrieves a range of values from a Redis sorted set data structure, based on their scores.

ZRANGE high_scores 0 9 WITHSCORES
  • LRANGE

This command retrieves a range of values from a Redis list data structure.

LRANGE my_list 0 4
  • EXISTS

This command checks if a given key exists in the Redis database.

EXISTS user:12345
  • TTL

This command retrieves the time-to-live (TTL) value associated with a key, which specifies how long the key will remain in the database before it expires.

TTL user:12345
- - +

Redis

Redis in Illa is a database integration that allows you to connect and interact with a Redis database. Redis is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Redis integration in Illa, you can query, insert, update, and delete data from a Redis database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Redis database.

Create Redis​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Redis from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Redis will display as shown.

redis_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Redis from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Redis database.

redis_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, the default port is '6379'.
Database Indexoptionala data structure that is used to optimize the performance of queries that retrieve data from a Redis database
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Redis server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.

Create Actions​

We have created a Redis resource, we can add the action by selecting Redis from action list and choosing the Create action button.

redis_resource_list

Now we have added the Redis server as an action to our building page.

redis

Configure Redis​

PropertiesDescription
querycommands to retrieve data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • KEYS

This command retrieves a list of all keys in the Redis database. You can use wildcards to filter the keys by pattern.

KEYS *
KEYS user:*
  • GET

This command retrieves the value associated with a given key.

GET user:12345
  • HGETALL

This command retrieves all fields and their values from a Redis hash data structure.

HGETALL user:12345
  • ZRANGE

This command retrieves a range of values from a Redis sorted set data structure, based on their scores.

ZRANGE high_scores 0 9 WITHSCORES
  • LRANGE

This command retrieves a range of values from a Redis list data structure.

LRANGE my_list 0 4
  • EXISTS

This command checks if a given key exists in the Redis database.

EXISTS user:12345
  • TTL

This command retrieves the time-to-live (TTL) value associated with a key, which specifies how long the key will remain in the database before it expires.

TTL user:12345
+ + \ No newline at end of file diff --git a/zh/restapi/index.html b/zh/restapi/index.html index a2f3b5a573..ddfbb2a5ca 100644 --- a/zh/restapi/index.html +++ b/zh/restapi/index.html @@ -10,13 +10,13 @@ - - + +
-

REST API

In ILLA Cloud, the REST API functionality empowers developers to interact with external systems, services, and data sources by utilizing the Representational State Transfer (REST) architectural style. With the REST API in ILLA Cloud, developers can seamlessly integrate their low-code applications with other applications, databases, or services.

The REST API in ILLA Cloud allows for creating custom endpoints that can handle HTTP requests, such as GET, POST, PUT, and DELETE. This enables developers to perform various operations, including retrieving data, submitting data, updating records, and deleting information.

Create REST API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select REST API from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready REST API will display as shown.

rest_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select REST API from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to REST API database.

rest_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Base URLrequiredThe URL or IP address for your database
URL Parametersoptionalprovide additional information or modify the behavior of API requests
Headersoptionaladditional metadata about the API request or response
Cookiesoptionalsmall pieces of data that are stored on the client-side and sent with each API request
Authenticationoptionalverifying the identity of the user or application making the API request

Create Actions​

We have created a REST API resource; we can add the action by selecting REST API from the action list and choosing the Create action button.

rest_resource_list

Now we have added the REST API server as an action to our building page.

rest

Configure REST API​

PropertiesDescription
Action TypeGET, POST, PUT, HEAD, PATCH, DELETE, OPTIONS
URL Parameterprovide additional information or modify the behavior of API requests if not specified in connection setting
Headersadditional metadata about the API request or response if not specified in connection setting
Transformertransforming data into the style you like using JavaScript

GET​

retrieve or fetch data from a server. When making a GET request, the client specifies the URL of the resource it wants to access, and the server responds with the requested data.

POST​

create a new resource on the server. It allows clients to submit data to the server to be processed and stored. When sending a POST request, the client includes the data in the body of the request.

PUT​

updating or replacing an existing resource. It is typically used to modify the state or content of a resource identified by a specific URL.

similar to the GET method, but with one key difference: the HEAD method retrieves only the headers of the response, without the response body.

PATCH​

update a specific resource. It is typically used to make partial modifications to an existing resource without replacing the entire resource.

DELETE​

request the removal of a specific resource or data identified by a given URL

Use case​

We will demonstrate how to auto fill the form information from REST API data.

Step 1 Add an action​

Let us create a table in REST API with columns id, name, and age. The id 1 document is what we want to show in the form component.

rest_get_all

Then we can create a new action for REST API from the action list in the app we want to build, listing all the data in the bucket and named restapi1.

Select GET for **Action Type**. In URL Parameters, put id for key and 1 for value.

Click Save and Run to activate this action.

rest_get_1

Step 2 Add Components​

Add a form component with the default text "Form" and a "Submit" button to canvas.

Add an input component, a number input component, and a button component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the button component to be "Auto Fill".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

rest_layout

Step 3 Configure the component​

For the "Auto Fill" button components, we can configure it to set the value in input component.

  1. Click the "Auto Fill" button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the input component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as {{restapi1.data[0]["name"]}}

rest_get_input

Similarly, for "Auto Fill" button components to set value in number input component.

  1. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the number input component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as {{restapi1.data[0]["age"]}}

rest_get_num

For the "Submit" button component, we can configure it to submit the form if the form is completed

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method

rest_submit_config

Step 4 Test​

rest_test

- - +

REST API

In ILLA Cloud, the REST API functionality empowers developers to interact with external systems, services, and data sources by utilizing the Representational State Transfer (REST) architectural style. With the REST API in ILLA Cloud, developers can seamlessly integrate their low-code applications with other applications, databases, or services.

The REST API in ILLA Cloud allows for creating custom endpoints that can handle HTTP requests, such as GET, POST, PUT, and DELETE. This enables developers to perform various operations, including retrieving data, submitting data, updating records, and deleting information.

Create REST API​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select REST API from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready REST API will display as shown.

rest_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select REST API from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to REST API database.

rest_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Base URLrequiredThe URL or IP address for your database
URL Parametersoptionalprovide additional information or modify the behavior of API requests
Headersoptionaladditional metadata about the API request or response
Cookiesoptionalsmall pieces of data that are stored on the client-side and sent with each API request
Authenticationoptionalverifying the identity of the user or application making the API request

Create Actions​

We have created a REST API resource; we can add the action by selecting REST API from the action list and choosing the Create action button.

rest_resource_list

Now we have added the REST API server as an action to our building page.

rest

Configure REST API​

PropertiesDescription
Action TypeGET, POST, PUT, HEAD, PATCH, DELETE, OPTIONS
URL Parameterprovide additional information or modify the behavior of API requests if not specified in connection setting
Headersadditional metadata about the API request or response if not specified in connection setting
Transformertransforming data into the style you like using JavaScript

GET​

retrieve or fetch data from a server. When making a GET request, the client specifies the URL of the resource it wants to access, and the server responds with the requested data.

POST​

create a new resource on the server. It allows clients to submit data to the server to be processed and stored. When sending a POST request, the client includes the data in the body of the request.

PUT​

updating or replacing an existing resource. It is typically used to modify the state or content of a resource identified by a specific URL.

similar to the GET method, but with one key difference: the HEAD method retrieves only the headers of the response, without the response body.

PATCH​

update a specific resource. It is typically used to make partial modifications to an existing resource without replacing the entire resource.

DELETE​

request the removal of a specific resource or data identified by a given URL

Use case​

We will demonstrate how to auto fill the form information from REST API data.

Step 1 Add an action​

Let us create a table in REST API with columns id, name, and age. The id 1 document is what we want to show in the form component.

rest_get_all

Then we can create a new action for REST API from the action list in the app we want to build, listing all the data in the bucket and named restapi1.

Select GET for **Action Type**. In URL Parameters, put id for key and 1 for value.

Click Save and Run to activate this action.

rest_get_1

Step 2 Add Components​

Add a form component with the default text "Form" and a "Submit" button to canvas.

Add an input component, a number input component, and a button component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the button component to be "Auto Fill".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

rest_layout

Step 3 Configure the component​

For the "Auto Fill" button components, we can configure it to set the value in input component.

  1. Click the "Auto Fill" button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the input component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as {{restapi1.data[0]["name"]}}

rest_get_input

Similarly, for "Auto Fill" button components to set value in number input component.

  1. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the number input component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as {{restapi1.data[0]["age"]}}

rest_get_num

For the "Submit" button component, we can configure it to submit the form if the form is completed

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method

rest_submit_config

Step 4 Test​

rest_test

+ + \ No newline at end of file diff --git a/zh/run-script/index.html b/zh/run-script/index.html index 37f3764679..3f85b9a951 100644 --- a/zh/run-script/index.html +++ b/zh/run-script/index.html @@ -10,13 +10,13 @@ - - + +
-

Run Script

By triggering the Run Script through an Event handler, you can achieve sequential execution of operations and perform different actions based on different condition.

How-to​

Demo​

Run and fork​

https://illa.ai/app/ILAfx4p1C7Ac/detail

Use case: Login and redirect to different pages​

Run and fork​

https://illa.ai/app/ILAex4p1C7Eh/detail

ILLA custom functions​

Trigger action​

Structure​

const exampleData = await actionName.trigger();

The actionName is the string shown in the screenshot, as follows.

1

Description​

In Run Script, the variable exampleData is the same as actionName.data.

Example​

For example, we use the action postgresql1 to query James' email.

2

Trigger the action via Run Script

3

postgresql1.data is

[
  {
    "email": "James@outlook.com",
    "id": "1",
    "img": "https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "name": "James"
  }
]

When we need to use JavaScript to retrieve an email in the component's Inspect or elsewhere, we can use the following: {{postgresql1.data[0].email}}

4

And when we need to use the email in the "Run Script" after executing the statement const exampleData = await postgresql1.trigger();, we can directly use exampleData[0].email.

Show a success notification when the query is successful and the result is unique. Show a failure notification when the query result is not unique or when it fails.

5

const exampleData = await postgresql1.trigger();
//show email via notification when the length of the resulting array is 1.
if(exampleData.length==1){
utils.showNotification(
  {
    type:"info",
    title:"Retrieved successfully",
    description:exampleData[0].email,
    duration: 4500}
);
  }else{
  //else, show a failed notification
utils.showNotification(
  {
    type:"info",
    title:"Failed to retrieve",
    duration: 4500
  }
);
  };

Show notification​

Structure​

utils.showNotification(
{
type: "info",
title: "Congratulations",
description: "Retrieved successfully",
duration: 4500
}
)

Description​

ParameterDescriptionData typeExample
typeUsed to set the icon type in the notification.String, one of the following values:"info"default"success""error""warning"type: "info"
titleUsed to set the title of the notificationStringtitle: "Congratulations"
descriptionUsed to set the descriptionStringdescription: "Retrieved successfully"
durationUsed to set the display duration of the notification.Number, In milliseconds (ms)duration: 4500

Example​

Show notification when clicking the button:

6

It is the same as the Show notification action, as the following screenshot shows:

7

Control component​

Structure​

componentDisplayName.function()

componentDisplayName is the string shown in the screenshot, as follows.

8

Description​

setValue(parameter)​

Used to set the value. The parameter could be a string or number or object or boolean or array which depends on the component type.

Supported components​
ComponentParameter typeExample
Input, Editable Text, Text Area, Divider, Select, Radio Group, Radio Button, Radio Buttonm, Date, Date Time, Steps, Text, Bar Progress, Circle Progressstringinput1.setValue("Hello world")
JSON EditorstringjsonEditor1.setValue({ "firstName": "Chuck", "lastName": "Norris", "age": 80, "bio": "Roundhouse kicking asses since 1940", "password": "noneed", "telephone": "1-800-KICKASS" })
Timelinestring, Separate the values of different nodes via comma (,)timeline1.setValue("The first milestone,The second milestone")
Number Input, Slider, RatenumbernumberInput1.setValue(1000)
Switchbooleanswitch1.setValue(false)
JSON Schema Form, FormobjectjsonSchemaForm1.setValue({ "firstName": "Chuck", "lastName": "Norris", "age": 80, "bio": "Roundhouse kicking asses since 1940", "password": "noneed", "telephone": "1-800-KICKASS" })
Checkbox Group, Cascaderarraycascader1.setValue(["media_source_2","campaign_2-1"])
clearValue()​

Used to clear the value

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, JSON Editor, JSON Schema Form, Switch, Select, Multiselect, Checkbox Group, Cascader, Radio Group, Radio Button, Date, Date Range, Data Time, Date Time, Text, Rate, Bar Progress, Circle Progress, Timeline, Divider

Example​
input1.clearValue()
focus()​

Used to focus on the component

Supported components​

Input, Number Input, Editable Text, Text Area, JSON Editor, Rich text editor, Radio Group,

Example​
input1.focus()
validate()​

When you have set validation conditions for a component, such as email format, URL format, or required field, you can use the validate() function to determine if it meets the requirements. If it does not meet the requirements, a validation message will be displayed.

Set the validation conditions:

9

Display the validation message:

10

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, Select, Multiselect, Checkbox Group, Radio Group, Radio Button, Date, Date Range, Date Time, Form, Rate

Example​
input1.validate()
clearValidation()​

Used to clear the validation message.

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, Select, Multiselect, Checkbox Group, Radio Button, Date, Date Range, Date Time, Rate

Example​
input1.clearValidation()
setSelectedValue(array)​

Used to set the selected value of Multiselect. The parameter should be an array.

Supported components​

Multiselect

Example​
multiselect1.setSelectedValue(["Option 1", "Option 3"])
submit()​

Submit form data. When the submit method is triggered, we will first validate the form data. If there are validation errors, the form submission will be prevented, and the corresponding error messages will be displayed. Only after successful validation does the submission proceed.

Supported components​

JSON Schema Form, Form

Example​
form1.submit()
toggle()​

Used to switch the value from true to false or from false to true.

Supported components​

Switch

Example​
switch1.toggle()
setStartOfRange(number)​

Used to set the default start value of the range slider

Supported components​

Range Slider

Example​
rangeSlider1.setStartOfRange(1)
setEndOfRange(number)​

Used to set the default end value of the range slider

Supported components​

Range Slider

Example​
rangeSlider1.setEndOfRange(9)
setStartValue(string)​

Used to set the default start value

Supported components​

Date Range, Time Range

Example​
dateRange1.setStartValue("2023-09-09")
setEndValue(string)​

Used to set the default end value

Supported components​

Date Range, Time Range

Example​
dateRange1.setEndValue("2023-10-09")
setValueInArray(array)​

Used to set the switches whose value is true

Supported components​

Switch Group

Example​
switchGroup1.setValueInArray(["Option 1", "Option 3"])
selectPage(number)​

Used to set the index of the page to display. The index is a number starting from ０.

Supported components​

Table

Example​
table1.selectPage(1)
selectRow(number)​

Used to set the index of selected row. The index is a number starting from ０.

Supported components​

Table

Example​
table1.selectRow(1)
clearSelection()​

Used to clear the selected row.

Supported components​

Table

Example​
table1.clearSelection()
setFilters(array of objects, string)​

Used to set filters.

The first parameter is an array of objects. Each object represents a filtering condition. It includes three attributes:

id : This refers to the id of this column. If this column is a result of a database query, then the id would be the column name you retrieved from the query. For example, if the query is SELECT email AS user_email FROM users and rename email as Email using the right-hand panel of the table, the id of the column would still be user_email If this column is manually added using the Add Column button in the right-hand panel, you can check its id in the displayedData section of the left-hand panel. Typically, it will be a randomly generated string starting with column such as column-320169e8-225a-482d-9853-ad34b3040220.

filterFn : the match type of the filter. We support the following types: equalTo which is the same as = in SQL, notEqualTo which is the same as <> in SQL, contains which is the same as LIKE '%value%' in SQL, does NotContain which is the same as NOT LIKE '%value%' in SQL, lessThan which is the same as < in SQL, notLessThan which is the same as >= in SQL, notMoreThan which is the same as <= in SQL, empty which is the same as IS NULL in SQL, notEmpty which is the same as IS NOT NULL in SQL, before is used to compare time or date, which is the same as > in SQL, after is used to compare time or date, which is the same as < in SQL.

value : used to set the value to compare.

The second parameter: when there are multiple filter condition objects, it determines whether they have an "AND" relationship or an "OR" relationship. Set it as a string and for an "AND" relationship, and or for an "OR" relationship.

Supported components​

Table

Example​
table1.setFilters([{"id":"month", "filterFn":"equalTo", "value":"May"}, {"id":"month", "filterFn":"equalTo", "value":"June"}], "or")
clearFilters()​

Used to clear all filters

Supported components​

Table

Example​
table1.clearFilters()
setSort(string, string)​

Used to set the sort. The first parameter is the id of the column to sort which is a string value. The id is the same as the id mentioned in setFilters(array of objects, string). The second parameter is the sorting order, either ascending or descending. It is set using a string value ascend or descend.

Supported components​

Table

Example​
table1.setSort("incomes", "descend")
setCurrentViewKey(string)​

Use the key which is a string value of the view to set the shown view.

Supported components​

Container

Example​
container1.setCurrentViewKey("View 2")
setCurrentViewIndex(number)​

Use the index which is a number value starting from 0 of the view to set the shown view.

Supported components​

Container

Example​
container1.setCurrentViewIndex(1)
showNextView(boolean)​

Used to show the next view. The parameter is a boolean value that determines whether to loop from the end back to the start.

Supported components​

Container

Example​
container1.showNextView(true)
showNextVisibleView(boolean)​

Used to show the next visible view. Unlike the behavior of the showNextView(boolean) function, this function offers improved view switching functionality by skipping any hidden views during the transition. The parameter is a boolean value that determines whether to loop from the end back to the start.

Supported components​

Container

Example​
container1.showNextVisibleView(false)
showPreviousView()​

Used to show the previous view. The parameter is a boolean value that determines whether to loop from the start back to the end.

Supported components​

Container

Example​
container1.showPreviousView(true)
showPreviousVisibleView()​

Used to show the previous visible view. Unlike the behavior of the showPreviousView(boolean) function, this function offers improved view switching functionality by skipping any hidden views during the transition. The parameter is a boolean value that determines whether to loop from the start back to the end.

Supported components​

Container

Example​
container1.showPreviousVisibleView(true)
reset()​

Used to reset the value to default value.

Supported components​

Form

Example​
form1.reset()
resetValue()​

Used to reset the value to default value.

Supported components​

Steps

Example​
steps1.resetValue()
openModal()​

Used to open a modal

Supported components​

Modal

Example​
modal1.openModal()
closeModal()​

Used to close a modal

Supported components​

Modal

Example​
modal1.closeModal()
setImageUrl(string)​

Used to set the Image source URL. It can be a Base64 or a URL pointing to an image on the web.

Supported components​

Image

Example​
image1.setImageUrl("https://cloud-api.illacloud.com/drive/f/83095b77-1180-487e-86db-ff117e6083e5")
image1.setImageUrl("data:image/png;base64,iVBORw0KGgoAA...II=")
clearReplyMessage()​

Used to clear the quoted reply message above the input box.

Supported components​

Chat

Example​
chat1.clearReplyMessage()
setPrimaryValue(number)​

Used to set the primary value of statistics.

Supported components​

Statistics

Example​
statistic1.setPrimaryValue(100)
resetPrimaryValue()​

Used to reset the primary value to the default primary value of statistics.

Supported components​

Statistics

Example​
statistic1.resetPrimaryValue()
setFileUrl(string)​

Used to set the file URL. It can be a Base64 or a URL pointing to a PDF on the web.

Supported components​

PDF

Example​
pdf1.setFileUrl("https://upload.wikimedia.org/wikipedia/commons/e/ee/Guideline_No._GD-Ed-2214_Marman_Clamp_Systems_Design_Guidelines.pdf")
play()​

Used to play video or audio.

Supported components​

Video, Audio

Example​
video1.play()
pause()​

Used to pause video or audio.

Supported components​

Video, Audio

Example​
video1.pause()
showControls(boolean)​

Used to set whether to show the controls.

Supported components​

Video

Example​
video1.showControls(true)
setVideoUrl(string)​

Used to set the video's URL. It can be a Base64 or a video URL on media websites.

Supported components​

Video

Example​
video1.setVideoUrl("https://youtu.be/8sUovZlBh_M")
setVolume(number)​

Used to set the volume. The parameter is a number value between 0 to 1.

Supported components​

Video, Audio

Example​

video1.setVolume(0.5)

setSpeed(number)​

Used to set the speed. The parameter is a number value between 0.25 to 2.

Supported components​

Video, Audio

Example​
video1.setSpeed(0.5)
setLoop(boolean)​

Used to set whether to loop the playback.

Supported components​

Video, Audio

Example​
video1.setLoop(false)
seekTo(number)​

Used to seek to a specific time position. The parameter is a number value, measured in seconds (s). For example, to seek to the time position 5:35, you would use the value 335.

Supported components​

Video, Audio

Example​
video1.seekTo(335)
mute(boolean)​

Used to set mute or not.

Supported components​

Video, Audio

Example​
video1.mute(true)
setAudioUrl(string)​

Used to set the audio's URL. It can be a Base64 or a video URL on media websites.

Supported components​

Audio

Example​
video1.setAudioUrl("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3")
slickNext()​

Used to switch to the next image.

Supported components​

Carousel

Example​
carousel1.slickNext()
slickPrevious()​

Used to switch to the previous image.

Supported components​

Carousel

Example​
carousel1.slickPrevious()
setSrc()​

Used to set the source URL of IFrame.

Supported components​

IFrame

Example​
iframe1.setSrc("https://www.nasa.gov/")
setMarkers(array)​

Used to set the markers on the map. The parameter should be an array of objects. The latitude and longitude fields in each object should be same as the fields set in the right-hand panel

Supported components​

Map

Example​
map1.setMarkers([
{
    "lat":57.14009563040699,
    "lng":-114.6018657894011
 },{
     "lat":55.40432513713809,
     "lng":-112.98252263795787
 },{
     "lat":57.841288754888545,
     "lng":-103.3518657894011
 }
 ])
resetMarkers()​

Used to reset the markers to the default markers.

Supported components​

Map

Example​
map1.resetMarkers()

Go to URL​

Structure​

utils.goToURL({
url:string,
newTab:boolean
})

Description​

Use an object to set it. There are 2 attributes in the object. The first attribute is url. Its value is a complete URL, including 'https://' or 'http://', and it is of type string. The second attribute is newTab. It is a boolean used to set whether to open the URL in a new tab.

Example​

utils.goToURL({
url:"https://www.illacloud.com",
newTab:true
})

Copy to clipboard​

Structure​

utils.copyToClipboard(string)

Description​

Used to copy a string

Example​

utils.copyToClipboard("The text to copy")

Set router​

Structure​

utils.setRouter({
pagePath:string;
viewPath:string
})

Description​

Used to change the page in ILLA Apps. There are 2 attributes in the object.

The first attribute is pagePath. The value of pagePath is shown on the following screenshot without /.

11

The second attribute is viewPath. The value of viewPath is shown on the following screenshot without /.

12

Example​

utils.setRouter({
pagePath:"page2", 
viewPath:"sub-page1"
})

Save to ILLA Drive​

Structure​

utils.saveToILLADrive({
fileName:string,
fileData:string,
fileType:string,
folder:string,
allowAnonymous:boolean,
replace:boolean
})

Description​

Used to save a file to ILLA Drive.

fileName: Name with extension of the file after uploading to ILLA Drive.

fileData: Base64 or raw file data, such as JSON, CSV, plain text, etc.

fileType: One of the following values: Auto, Plain text, JPEG, PNG, SVG, JSON, CSV, TSV, Excel(.xlsx). When using "Auto," we will attempt to determine the file type based on either the file extension or the file data.

folder: Destination folder for file upload. Leave it blank to upload to the root folder.

allowAnonymous: Used to set whether anonymous user access is allowed. If you plan to set your application as public, anonymous access must be enabled. For the security of your data, files or folders accessible anonymously must be placed in the anonymous folder.

13

replace: Used to set when there are files with the same name in the same directory, replace the existing file with new file or automatically rename the new file.

Example​

//use upload1 to pick files from device and upload to apps folder. 
utils.saveToILLADrive({
fileName:upload1.files[0].name,
fileData:upload1.files[0].dataURI,
fileType:"PNG",
folder:"apps",
allowAnonymous:false,
replace:true
})
//upload a text file.  
utils.saveToILLADrive({
fileName:"test.txt",
fileData:"abc",
fileType:"Plain text",
folder:"apps",
allowAnonymous:false,
replace:true
})

Download from ILLA Drive​

Structure​

utils.downloadFromILLADrive({
    downloadInfo:[{
        tinyURL:string,
        fileID:string
        }],
    asZip:boolean
})

Description​

Used to download files from ILLA Drive.

downloadInfo: an array of objects including tinyURL and fileID. You can use the component Drive file picker to pick files from ILLA Drive and get the downloadInfo via drivePicker1.value

asZip: used to set whether to download the files as a Zip.

Example​

utils.downloadFromILLADrive({
    downloadInfo:drivePicker1.value,
    asZip:true
})

Download​

Structure​

utils.downloadFile({
    fileType:string,
    fileName:string,
    data:anyType
})

Description​

Used to export data to your device.

fileType: One of the following values: Auto, Plain text, JPEG, PNG, SVG, JSON, CSV, TSV, Excel(.xlsx). When using "Auto," we will attempt to determine the file type based on either the file extension or the file data.

fileName: a name with extension.

data: data of the file.

Example​

//download the data of table as a CSV
utils.downloadFile({
    fileType:"CSV",
    fileName:"text.csv",
    data: table2.dataSourceJS
})
//download image
utils.downloadFile({
    fileType:"PNG",
    fileName:"text.png",
    data: image1.imageSrc
})

Set global data​

Set global data value​

Structure​
utils.setGlobalDataValue({
key:string, 
value:any
})
Description​

Used to set the value of gobalData

key: the displayName of globalData as the following screenshot shows.

14

value: the value to set

Example​
//use input5 to get the user input value and set as the value of stringState. 
utils.setGlobalDataValue({
key:"stringState", 
value:input5.value
})

Set global data in​

Structure​
utils.setGlobalDataIn({
key:string, 
path:string, 
value:any
})
Description​

When the global data is an array or object, use setGlobalDataIn to modify the value corresponding to a specific index in an array or to modify the value corresponding to a specific key in an object.

key: the displayName of globalData.

path: the index of the value you intend to update in the array or the key in the object. For example, to set the second value in array, the path is 1 (the index). To set the value of the attribute named key1, the path is key1.

value: the value to set

Example​
//objectState is an object: {"key1":"value1", "key2":"value2"}, to set the 
utils.setGlobalDataIn({
key:"objectState", 
path:"key2", 
value:input7.value
})

Built-in libraries​

LibraryDocHow to use it in ILLA BuilderExample
Lodashhttps://lodash.com/docs/4.17.15__.concat(array, 2, [3], [[4]]);
Day.jshttps://day.js.org/dayjsdayjs(new Date())
uuidhttps://www.npmjs.com/package/uuiduuiduuid.parse()
numbrohttps://numbrojs.com/numbronumbro(1000).format({thousandSeparated: true})
Papahttps://www.papaparse.com/docsPapaPapa.parse(url, {download: true, // rest of config ... })

Value of actions, components...​

Use displayName.xxx to use the value of actions, components, or other globalData. Please note that in the Run Script, these variables can be directly accessed without using {{ references.

utils.downloadFromILLADrive({
    downloadInfo:{{drivePicker1.value}},//❌ 
    asZip:true
})

utils.downloadFromILLADrive({
    downloadInfo:drivePicker1.value,//✅
    asZip:true
})
- - +

Run Script

By triggering the Run Script through an Event handler, you can achieve sequential execution of operations and perform different actions based on different condition.

How-to​

Demo​

Run and fork​

https://illa.ai/app/ILAfx4p1C7Ac/detail

Use case: Login and redirect to different pages​

Run and fork​

https://illa.ai/app/ILAex4p1C7Eh/detail

ILLA custom functions​

Trigger action​

Structure​

const exampleData = await actionName.trigger();

The actionName is the string shown in the screenshot, as follows.

1

Description​

In Run Script, the variable exampleData is the same as actionName.data.

Example​

For example, we use the action postgresql1 to query James' email.

2

Trigger the action via Run Script

3

postgresql1.data is

[
  {
    "email": "James@outlook.com",
    "id": "1",
    "img": "https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "name": "James"
  }
]

When we need to use JavaScript to retrieve an email in the component's Inspect or elsewhere, we can use the following: {{postgresql1.data[0].email}}

4

And when we need to use the email in the "Run Script" after executing the statement const exampleData = await postgresql1.trigger();, we can directly use exampleData[0].email.

Show a success notification when the query is successful and the result is unique. Show a failure notification when the query result is not unique or when it fails.

5

const exampleData = await postgresql1.trigger();
//show email via notification when the length of the resulting array is 1.
if(exampleData.length==1){
utils.showNotification(
  {
    type:"info",
    title:"Retrieved successfully",
    description:exampleData[0].email,
    duration: 4500}
);
  }else{
  //else, show a failed notification
utils.showNotification(
  {
    type:"info",
    title:"Failed to retrieve",
    duration: 4500
  }
);
  };

Show notification​

Structure​

utils.showNotification(
{
type: "info",
title: "Congratulations",
description: "Retrieved successfully",
duration: 4500
}
)

Description​

ParameterDescriptionData typeExample
typeUsed to set the icon type in the notification.String, one of the following values:"info"default"success""error""warning"type: "info"
titleUsed to set the title of the notificationStringtitle: "Congratulations"
descriptionUsed to set the descriptionStringdescription: "Retrieved successfully"
durationUsed to set the display duration of the notification.Number, In milliseconds (ms)duration: 4500

Example​

Show notification when clicking the button:

6

It is the same as the Show notification action, as the following screenshot shows:

7

Control component​

Structure​

componentDisplayName.function()

componentDisplayName is the string shown in the screenshot, as follows.

8

Description​

setValue(parameter)​

Used to set the value. The parameter could be a string or number or object or boolean or array which depends on the component type.

Supported components​
ComponentParameter typeExample
Input, Editable Text, Text Area, Divider, Select, Radio Group, Radio Button, Radio Buttonm, Date, Date Time, Steps, Text, Bar Progress, Circle Progressstringinput1.setValue("Hello world")
JSON EditorstringjsonEditor1.setValue({ "firstName": "Chuck", "lastName": "Norris", "age": 80, "bio": "Roundhouse kicking asses since 1940", "password": "noneed", "telephone": "1-800-KICKASS" })
Timelinestring, Separate the values of different nodes via comma (,)timeline1.setValue("The first milestone,The second milestone")
Number Input, Slider, RatenumbernumberInput1.setValue(1000)
Switchbooleanswitch1.setValue(false)
JSON Schema Form, FormobjectjsonSchemaForm1.setValue({ "firstName": "Chuck", "lastName": "Norris", "age": 80, "bio": "Roundhouse kicking asses since 1940", "password": "noneed", "telephone": "1-800-KICKASS" })
Checkbox Group, Cascaderarraycascader1.setValue(["media_source_2","campaign_2-1"])
clearValue()​

Used to clear the value

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, JSON Editor, JSON Schema Form, Switch, Select, Multiselect, Checkbox Group, Cascader, Radio Group, Radio Button, Date, Date Range, Data Time, Date Time, Text, Rate, Bar Progress, Circle Progress, Timeline, Divider

Example​
input1.clearValue()
focus()​

Used to focus on the component

Supported components​

Input, Number Input, Editable Text, Text Area, JSON Editor, Rich text editor, Radio Group,

Example​
input1.focus()
validate()​

When you have set validation conditions for a component, such as email format, URL format, or required field, you can use the validate() function to determine if it meets the requirements. If it does not meet the requirements, a validation message will be displayed.

Set the validation conditions:

9

Display the validation message:

10

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, Select, Multiselect, Checkbox Group, Radio Group, Radio Button, Date, Date Range, Date Time, Form, Rate

Example​
input1.validate()
clearValidation()​

Used to clear the validation message.

Supported components​

Input, Number Input, Editable Text, Text Area, Upload, Select, Multiselect, Checkbox Group, Radio Button, Date, Date Range, Date Time, Rate

Example​
input1.clearValidation()
setSelectedValue(array)​

Used to set the selected value of Multiselect. The parameter should be an array.

Supported components​

Multiselect

Example​
multiselect1.setSelectedValue(["Option 1", "Option 3"])
submit()​

Submit form data. When the submit method is triggered, we will first validate the form data. If there are validation errors, the form submission will be prevented, and the corresponding error messages will be displayed. Only after successful validation does the submission proceed.

Supported components​

JSON Schema Form, Form

Example​
form1.submit()
toggle()​

Used to switch the value from true to false or from false to true.

Supported components​

Switch

Example​
switch1.toggle()
setStartOfRange(number)​

Used to set the default start value of the range slider

Supported components​

Range Slider

Example​
rangeSlider1.setStartOfRange(1)
setEndOfRange(number)​

Used to set the default end value of the range slider

Supported components​

Range Slider

Example​
rangeSlider1.setEndOfRange(9)
setStartValue(string)​

Used to set the default start value

Supported components​

Date Range, Time Range

Example​
dateRange1.setStartValue("2023-09-09")
setEndValue(string)​

Used to set the default end value

Supported components​

Date Range, Time Range

Example​
dateRange1.setEndValue("2023-10-09")
setValueInArray(array)​

Used to set the switches whose value is true

Supported components​

Switch Group

Example​
switchGroup1.setValueInArray(["Option 1", "Option 3"])
selectPage(number)​

Used to set the index of the page to display. The index is a number starting from ０.

Supported components​

Table

Example​
table1.selectPage(1)
selectRow(number)​

Used to set the index of selected row. The index is a number starting from ０.

Supported components​

Table

Example​
table1.selectRow(1)
clearSelection()​

Used to clear the selected row.

Supported components​

Table

Example​
table1.clearSelection()
setFilters(array of objects, string)​

Used to set filters.

The first parameter is an array of objects. Each object represents a filtering condition. It includes three attributes:

id : This refers to the id of this column. If this column is a result of a database query, then the id would be the column name you retrieved from the query. For example, if the query is SELECT email AS user_email FROM users and rename email as Email using the right-hand panel of the table, the id of the column would still be user_email If this column is manually added using the Add Column button in the right-hand panel, you can check its id in the displayedData section of the left-hand panel. Typically, it will be a randomly generated string starting with column such as column-320169e8-225a-482d-9853-ad34b3040220.

filterFn : the match type of the filter. We support the following types: equalTo which is the same as = in SQL, notEqualTo which is the same as <> in SQL, contains which is the same as LIKE '%value%' in SQL, does NotContain which is the same as NOT LIKE '%value%' in SQL, lessThan which is the same as < in SQL, notLessThan which is the same as >= in SQL, notMoreThan which is the same as <= in SQL, empty which is the same as IS NULL in SQL, notEmpty which is the same as IS NOT NULL in SQL, before is used to compare time or date, which is the same as > in SQL, after is used to compare time or date, which is the same as < in SQL.

value : used to set the value to compare.

The second parameter: when there are multiple filter condition objects, it determines whether they have an "AND" relationship or an "OR" relationship. Set it as a string and for an "AND" relationship, and or for an "OR" relationship.

Supported components​

Table

Example​
table1.setFilters([{"id":"month", "filterFn":"equalTo", "value":"May"}, {"id":"month", "filterFn":"equalTo", "value":"June"}], "or")
clearFilters()​

Used to clear all filters

Supported components​

Table

Example​
table1.clearFilters()
setSort(string, string)​

Used to set the sort. The first parameter is the id of the column to sort which is a string value. The id is the same as the id mentioned in setFilters(array of objects, string). The second parameter is the sorting order, either ascending or descending. It is set using a string value ascend or descend.

Supported components​

Table

Example​
table1.setSort("incomes", "descend")
setCurrentViewKey(string)​

Use the key which is a string value of the view to set the shown view.

Supported components​

Container

Example​
container1.setCurrentViewKey("View 2")
setCurrentViewIndex(number)​

Use the index which is a number value starting from 0 of the view to set the shown view.

Supported components​

Container

Example​
container1.setCurrentViewIndex(1)
showNextView(boolean)​

Used to show the next view. The parameter is a boolean value that determines whether to loop from the end back to the start.

Supported components​

Container

Example​
container1.showNextView(true)
showNextVisibleView(boolean)​

Used to show the next visible view. Unlike the behavior of the showNextView(boolean) function, this function offers improved view switching functionality by skipping any hidden views during the transition. The parameter is a boolean value that determines whether to loop from the end back to the start.

Supported components​

Container

Example​
container1.showNextVisibleView(false)
showPreviousView()​

Used to show the previous view. The parameter is a boolean value that determines whether to loop from the start back to the end.

Supported components​

Container

Example​
container1.showPreviousView(true)
showPreviousVisibleView()​

Used to show the previous visible view. Unlike the behavior of the showPreviousView(boolean) function, this function offers improved view switching functionality by skipping any hidden views during the transition. The parameter is a boolean value that determines whether to loop from the start back to the end.

Supported components​

Container

Example​
container1.showPreviousVisibleView(true)
reset()​

Used to reset the value to default value.

Supported components​

Form

Example​
form1.reset()
resetValue()​

Used to reset the value to default value.

Supported components​

Steps

Example​
steps1.resetValue()
openModal()​

Used to open a modal

Supported components​

Modal

Example​
modal1.openModal()
closeModal()​

Used to close a modal

Supported components​

Modal

Example​
modal1.closeModal()
setImageUrl(string)​

Used to set the Image source URL. It can be a Base64 or a URL pointing to an image on the web.

Supported components​

Image

Example​
image1.setImageUrl("https://cloud-api.illacloud.com/drive/f/83095b77-1180-487e-86db-ff117e6083e5")
image1.setImageUrl("data:image/png;base64,iVBORw0KGgoAA...II=")
clearReplyMessage()​

Used to clear the quoted reply message above the input box.

Supported components​

Chat

Example​
chat1.clearReplyMessage()
setPrimaryValue(number)​

Used to set the primary value of statistics.

Supported components​

Statistics

Example​
statistic1.setPrimaryValue(100)
resetPrimaryValue()​

Used to reset the primary value to the default primary value of statistics.

Supported components​

Statistics

Example​
statistic1.resetPrimaryValue()
setFileUrl(string)​

Used to set the file URL. It can be a Base64 or a URL pointing to a PDF on the web.

Supported components​

PDF

Example​
pdf1.setFileUrl("https://upload.wikimedia.org/wikipedia/commons/e/ee/Guideline_No._GD-Ed-2214_Marman_Clamp_Systems_Design_Guidelines.pdf")
play()​

Used to play video or audio.

Supported components​

Video, Audio

Example​
video1.play()
pause()​

Used to pause video or audio.

Supported components​

Video, Audio

Example​
video1.pause()
showControls(boolean)​

Used to set whether to show the controls.

Supported components​

Video

Example​
video1.showControls(true)
setVideoUrl(string)​

Used to set the video's URL. It can be a Base64 or a video URL on media websites.

Supported components​

Video

Example​
video1.setVideoUrl("https://youtu.be/8sUovZlBh_M")
setVolume(number)​

Used to set the volume. The parameter is a number value between 0 to 1.

Supported components​

Video, Audio

Example​

video1.setVolume(0.5)

setSpeed(number)​

Used to set the speed. The parameter is a number value between 0.25 to 2.

Supported components​

Video, Audio

Example​
video1.setSpeed(0.5)
setLoop(boolean)​

Used to set whether to loop the playback.

Supported components​

Video, Audio

Example​
video1.setLoop(false)
seekTo(number)​

Used to seek to a specific time position. The parameter is a number value, measured in seconds (s). For example, to seek to the time position 5:35, you would use the value 335.

Supported components​

Video, Audio

Example​
video1.seekTo(335)
mute(boolean)​

Used to set mute or not.

Supported components​

Video, Audio

Example​
video1.mute(true)
setAudioUrl(string)​

Used to set the audio's URL. It can be a Base64 or a video URL on media websites.

Supported components​

Audio

Example​
video1.setAudioUrl("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3")
slickNext()​

Used to switch to the next image.

Supported components​

Carousel

Example​
carousel1.slickNext()
slickPrevious()​

Used to switch to the previous image.

Supported components​

Carousel

Example​
carousel1.slickPrevious()
setSrc()​

Used to set the source URL of IFrame.

Supported components​

IFrame

Example​
iframe1.setSrc("https://www.nasa.gov/")
setMarkers(array)​

Used to set the markers on the map. The parameter should be an array of objects. The latitude and longitude fields in each object should be same as the fields set in the right-hand panel

Supported components​

Map

Example​
map1.setMarkers([
{
    "lat":57.14009563040699,
    "lng":-114.6018657894011
 },{
     "lat":55.40432513713809,
     "lng":-112.98252263795787
 },{
     "lat":57.841288754888545,
     "lng":-103.3518657894011
 }
 ])
resetMarkers()​

Used to reset the markers to the default markers.

Supported components​

Map

Example​
map1.resetMarkers()

Go to URL​

Structure​

utils.goToURL({
url:string,
newTab:boolean
})

Description​

Use an object to set it. There are 2 attributes in the object. The first attribute is url. Its value is a complete URL, including 'https://' or 'http://', and it is of type string. The second attribute is newTab. It is a boolean used to set whether to open the URL in a new tab.

Example​

utils.goToURL({
url:"https://www.illacloud.com",
newTab:true
})

Copy to clipboard​

Structure​

utils.copyToClipboard(string)

Description​

Used to copy a string

Example​

utils.copyToClipboard("The text to copy")

Set router​

Structure​

utils.setRouter({
pagePath:string;
viewPath:string
})

Description​

Used to change the page in ILLA Apps. There are 2 attributes in the object.

The first attribute is pagePath. The value of pagePath is shown on the following screenshot without /.

11

The second attribute is viewPath. The value of viewPath is shown on the following screenshot without /.

12

Example​

utils.setRouter({
pagePath:"page2", 
viewPath:"sub-page1"
})

Save to ILLA Drive​

Structure​

utils.saveToILLADrive({
fileName:string,
fileData:string,
fileType:string,
folder:string,
allowAnonymous:boolean,
replace:boolean
})

Description​

Used to save a file to ILLA Drive.

fileName: Name with extension of the file after uploading to ILLA Drive.

fileData: Base64 or raw file data, such as JSON, CSV, plain text, etc.

fileType: One of the following values: Auto, Plain text, JPEG, PNG, SVG, JSON, CSV, TSV, Excel(.xlsx). When using "Auto," we will attempt to determine the file type based on either the file extension or the file data.

folder: Destination folder for file upload. Leave it blank to upload to the root folder.

allowAnonymous: Used to set whether anonymous user access is allowed. If you plan to set your application as public, anonymous access must be enabled. For the security of your data, files or folders accessible anonymously must be placed in the anonymous folder.

13

replace: Used to set when there are files with the same name in the same directory, replace the existing file with new file or automatically rename the new file.

Example​

//use upload1 to pick files from device and upload to apps folder. 
utils.saveToILLADrive({
fileName:upload1.files[0].name,
fileData:upload1.files[0].dataURI,
fileType:"PNG",
folder:"apps",
allowAnonymous:false,
replace:true
})
//upload a text file.  
utils.saveToILLADrive({
fileName:"test.txt",
fileData:"abc",
fileType:"Plain text",
folder:"apps",
allowAnonymous:false,
replace:true
})

Download from ILLA Drive​

Structure​

utils.downloadFromILLADrive({
    downloadInfo:[{
        tinyURL:string,
        fileID:string
        }],
    asZip:boolean
})

Description​

Used to download files from ILLA Drive.

downloadInfo: an array of objects including tinyURL and fileID. You can use the component Drive file picker to pick files from ILLA Drive and get the downloadInfo via drivePicker1.value

asZip: used to set whether to download the files as a Zip.

Example​

utils.downloadFromILLADrive({
    downloadInfo:drivePicker1.value,
    asZip:true
})

Download​

Structure​

utils.downloadFile({
    fileType:string,
    fileName:string,
    data:anyType
})

Description​

Used to export data to your device.

fileType: One of the following values: Auto, Plain text, JPEG, PNG, SVG, JSON, CSV, TSV, Excel(.xlsx). When using "Auto," we will attempt to determine the file type based on either the file extension or the file data.

fileName: a name with extension.

data: data of the file.

Example​

//download the data of table as a CSV
utils.downloadFile({
    fileType:"CSV",
    fileName:"text.csv",
    data: table2.dataSourceJS
})
//download image
utils.downloadFile({
    fileType:"PNG",
    fileName:"text.png",
    data: image1.imageSrc
})

Set global data​

Set global data value​

Structure​
utils.setGlobalDataValue({
key:string, 
value:any
})
Description​

Used to set the value of gobalData

key: the displayName of globalData as the following screenshot shows.

14

value: the value to set

Example​
//use input5 to get the user input value and set as the value of stringState. 
utils.setGlobalDataValue({
key:"stringState", 
value:input5.value
})

Set global data in​

Structure​
utils.setGlobalDataIn({
key:string, 
path:string, 
value:any
})
Description​

When the global data is an array or object, use setGlobalDataIn to modify the value corresponding to a specific index in an array or to modify the value corresponding to a specific key in an object.

key: the displayName of globalData.

path: the index of the value you intend to update in the array or the key in the object. For example, to set the second value in array, the path is 1 (the index). To set the value of the attribute named key1, the path is key1.

value: the value to set

Example​
//objectState is an object: {"key1":"value1", "key2":"value2"}, to set the 
utils.setGlobalDataIn({
key:"objectState", 
path:"key2", 
value:input7.value
})

Built-in libraries​

LibraryDocHow to use it in ILLA BuilderExample
Lodashhttps://lodash.com/docs/4.17.15__.concat(array, 2, [3], [[4]]);
Day.jshttps://day.js.org/dayjsdayjs(new Date())
uuidhttps://www.npmjs.com/package/uuiduuiduuid.parse()
numbrohttps://numbrojs.com/numbronumbro(1000).format({thousandSeparated: true})
Papahttps://www.papaparse.com/docsPapaPapa.parse(url, {download: true, // rest of config ... })

Value of actions, components...​

Use displayName.xxx to use the value of actions, components, or other globalData. Please note that in the Run Script, these variables can be directly accessed without using {{ references.

utils.downloadFromILLADrive({
    downloadInfo:{{drivePicker1.value}},//❌ 
    asZip:true
})

utils.downloadFromILLADrive({
    downloadInfo:drivePicker1.value,//✅
    asZip:true
})
+ + \ No newline at end of file diff --git a/zh/search/index.html b/zh/search/index.html index 2bbc7a2018..743fe9a535 100644 --- a/zh/search/index.html +++ b/zh/search/index.html @@ -10,13 +10,13 @@ - - + +

在文档中搜索

- - + + \ No newline at end of file diff --git a/zh/select/index.html b/zh/select/index.html index 0fa3c2b0ad..3a7e5da491 100644 --- a/zh/select/index.html +++ b/zh/select/index.html @@ -10,13 +10,13 @@ - - + +
-

Select

A select component is commonly used to present users with a list of options in a dropdown menu format. The user can select only one option from the dropdown list at a time.

The dropdown single-select component typically consists of a text label and a dropdown arrow icon, which when clicked or tapped, opens a list of options for the user to choose from. Once the user selects an option, the dropdown menu closes, and the selected option is displayed in the component.

This component is often used in forms, surveys, and other data entry scenarios where a user needs to select one option from a predefined set of choices. It offers a compact and intuitive way to present a list of options without taking up too much screen real estate or overwhelming the user with too many options at once.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueSelected value

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the select component.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a select component, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueSelected value

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
- - +

Select

A select component is commonly used to present users with a list of options in a dropdown menu format. The user can select only one option from the dropdown list at a time.

The dropdown single-select component typically consists of a text label and a dropdown arrow icon, which when clicked or tapped, opens a list of options for the user to choose from. Once the user selects an option, the dropdown menu closes, and the selected option is displayed in the component.

This component is often used in forms, surveys, and other data entry scenarios where a user needs to select one option from a predefined set of choices. It offers a compact and intuitive way to present a list of options without taking up too much screen real estate or overwhelming the user with too many options at once.

Properties​

Manual options​

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options​

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method​

You can use other components to control the component. We support the following three methods:

setValue​

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueSelected value

clearValue​

To clear the selected options

validate​

To verify that the input information is legal

clearValidate​

To clear the validation message

Event handler​

We support listening to the onChange event of the select component.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a select component, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueSelected value

Use case​

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action​

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component​

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}
+ + \ No newline at end of file diff --git a/zh/self-hosted-deployment/index.html b/zh/self-hosted-deployment/index.html index ee07189328..cef8f17183 100644 --- a/zh/self-hosted-deployment/index.html +++ b/zh/self-hosted-deployment/index.html @@ -10,13 +10,13 @@ - - + +
-

Self-hosted deployment

Docker​

  1. Start Docker
  2. Enter the following command in the terminal to install the official image:

docker pull illasoft/illa-builder:latest

docker run -p80:2022 illasoft/illa-builder:latest

80 is the port, you can change it if it is already in use. After the execution is complete, you can access it via https://[localhost]:[80].

CLI​

Download ILLA CLI and deploy​

If you have Rust installed, you can easily build+install the latest ILLA CLI release with cargo:

cargo install illa

illa deploy --self --port=10000

The cargo tool will complete downloading the ILLA CLI with its source dependencies, build and install it into the cargo bin path so that we can run it. Once installed, you can run the ILLA CLI with the illa command.

Alternatively, you can just download the ILLA CLI for your operating system here:

If you do download from the above links, the steps are slightly different compared to downloading the ILLA CLI from cargo . After downloading the CLI, you will have to make it executable. Let’s take the illa-linux for example:

# download illa cli binary file
> wget <https://github.com/illacloud/illa/releases/latest/download/illa-x86_64-linux.tar.gz>

# unpack the file
> tar -zxvf illa-x86_64-linux.tar.gz

> cd illa-x86_64-linux

> chmod +x illa

# run the illa cli
> ./illa

Checking the prerequisites of self-hosted installation​

These ports 5432, 9999 and 8000 should remain for the ILLA Builder

The following command will check the prerequisites of self-hosted installation on your operating system:

> illa doctor

Deploying ILLA Builder​

Once the ILLA CLI has been installed, you can run a self-hosted or cloud installation.

You can simply deploy a self-hosted ILA Builder by running the following command:

# the port which ILLA Builder can be accessed on can be changed
# the <SERVER_ADDRESS> should be your cloud server public ip, default localhost
> illa deploy --self --port=10000 --server-addr=<SERVER_ADDRESS>

Now, you can access the ILLA Builder: http://localhost:10000

Updating ILLA Builder​

To update the ILLA Builder with the latest docker images, use the following command:

> illa update --self

Other operations​

# list the ILLA Builder
> illa list --self

# stop the ILLA Builder
> illa stop --self

# remove the ILLA Builder
> illa remove --self

# forced removal of the running ILLA Builder and persistent data
> sudo illa remove --force --self --data

# restart the ILLA Builder
> illa restart --self

# help information
> illa help

Kubernetes​

Description​

Build illa all-in-one image and run it by k8s on your machine. You can check out the scripts file in the scripts folder for more details.

Note:

We highly recommended deploying with our auto-deploy tools illa-cli.

And for the moment we do not support Apple Silicon M1 (darwin-arm64 arch).

Run with an official slim image​

Install GNU make and type:

make deploy

or just execute:

/bin/bash scripts/deploy.sh

this command will pull illasoft official all-in-one image and deploy it on your Kubernetes cluster.

For Database Persistent Storage​

Edit illa-builder.yaml, and add your IAAS persistent storage config on it.

For HTTPS Config​

You can route the NodePort to your Kubernetes cluster ingress gateway and rewrite to 443 port, and add https cert in your ingress gateway.

Or, you can deploy an ingress gateway manually into your Kubernetes server, config like this:

static_resources:
  listeners:
  - name: https_listener
    address:
      socket_address:
        address: 0.0.0.0
        port_value: 443
    filter_chains:
    - filters:
      - name: envoy.filters.network.http_connection_manager
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
          stat_prefix: https_listener
          route_config:
            name: local_route
            virtual_hosts:
            - name: illa_builder
              domains:
              - "illa.yourdomian.com" # replace with your domain
              routes:
              - match:
                  prefix: "/"route:
                  cluster: illa_builder
          http_filters:
          - name: envoy.filters.http.router
            typed_config:
              "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router
      transport_socket:
        name: envoy.transport_sockets.tls
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.transport_sockets.tls.v3.DownstreamTlsContext
          common_tls_context:
            tls_certificates:
            # replace this with your cert file
            - certificate_chain:
                filename: /your-cert-folder/fullchain.pem
              private_key:
                filename: /your-cert-folder/privkey.pem

  clusters:
  - name: illa_builder
    type: STRICT_DNS
    lb_policy: ROUND_ROBIN
    connect_timeout: 10s
    load_assignment:
      cluster_name: illa_builder
      endpoints:
      - lb_endpoints:
        - endpoint:
            address:
              socket_address:
                address: illa-builder
                port_value: 80

Quickly deploy​

You can deploy ILLA in a remarkably fast way, please follow the instructions below:

First, please download this docker file to your computer, then run the following code.

cd docker;
/bin/bash ./scripts/run-official-image.sh;

And log in with the default username and password:

Username: root

Password: password (self-host mode only).

- - +

Self-hosted deployment

Docker​

  1. Start Docker
  2. Enter the following command in the terminal to install the official image:

docker pull illasoft/illa-builder:latest

docker run -p80:2022 illasoft/illa-builder:latest

80 is the port, you can change it if it is already in use. After the execution is complete, you can access it via https://[localhost]:[80].

CLI​

Download ILLA CLI and deploy​

If you have Rust installed, you can easily build+install the latest ILLA CLI release with cargo:

cargo install illa

illa deploy --self --port=10000

The cargo tool will complete downloading the ILLA CLI with its source dependencies, build and install it into the cargo bin path so that we can run it. Once installed, you can run the ILLA CLI with the illa command.

Alternatively, you can just download the ILLA CLI for your operating system here:

If you do download from the above links, the steps are slightly different compared to downloading the ILLA CLI from cargo . After downloading the CLI, you will have to make it executable. Let’s take the illa-linux for example:

# download illa cli binary file
> wget <https://github.com/illacloud/illa/releases/latest/download/illa-x86_64-linux.tar.gz>

# unpack the file
> tar -zxvf illa-x86_64-linux.tar.gz

> cd illa-x86_64-linux

> chmod +x illa

# run the illa cli
> ./illa

Checking the prerequisites of self-hosted installation​

These ports 5432, 9999 and 8000 should remain for the ILLA Builder

The following command will check the prerequisites of self-hosted installation on your operating system:

> illa doctor

Deploying ILLA Builder​

Once the ILLA CLI has been installed, you can run a self-hosted or cloud installation.

You can simply deploy a self-hosted ILA Builder by running the following command:

# the port which ILLA Builder can be accessed on can be changed
# the <SERVER_ADDRESS> should be your cloud server public ip, default localhost
> illa deploy --self --port=10000 --server-addr=<SERVER_ADDRESS>

Now, you can access the ILLA Builder: http://localhost:10000

Updating ILLA Builder​

To update the ILLA Builder with the latest docker images, use the following command:

> illa update --self

Other operations​

# list the ILLA Builder
> illa list --self

# stop the ILLA Builder
> illa stop --self

# remove the ILLA Builder
> illa remove --self

# forced removal of the running ILLA Builder and persistent data
> sudo illa remove --force --self --data

# restart the ILLA Builder
> illa restart --self

# help information
> illa help

Kubernetes​

Description​

Build illa all-in-one image and run it by k8s on your machine. You can check out the scripts file in the scripts folder for more details.

Note:

We highly recommended deploying with our auto-deploy tools illa-cli.

And for the moment we do not support Apple Silicon M1 (darwin-arm64 arch).

Run with an official slim image​

Install GNU make and type:

make deploy

or just execute:

/bin/bash scripts/deploy.sh

this command will pull illasoft official all-in-one image and deploy it on your Kubernetes cluster.

For Database Persistent Storage​

Edit illa-builder.yaml, and add your IAAS persistent storage config on it.

For HTTPS Config​

You can route the NodePort to your Kubernetes cluster ingress gateway and rewrite to 443 port, and add https cert in your ingress gateway.

Or, you can deploy an ingress gateway manually into your Kubernetes server, config like this:

static_resources:
  listeners:
  - name: https_listener
    address:
      socket_address:
        address: 0.0.0.0
        port_value: 443
    filter_chains:
    - filters:
      - name: envoy.filters.network.http_connection_manager
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
          stat_prefix: https_listener
          route_config:
            name: local_route
            virtual_hosts:
            - name: illa_builder
              domains:
              - "illa.yourdomian.com" # replace with your domain
              routes:
              - match:
                  prefix: "/"route:
                  cluster: illa_builder
          http_filters:
          - name: envoy.filters.http.router
            typed_config:
              "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router
      transport_socket:
        name: envoy.transport_sockets.tls
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.transport_sockets.tls.v3.DownstreamTlsContext
          common_tls_context:
            tls_certificates:
            # replace this with your cert file
            - certificate_chain:
                filename: /your-cert-folder/fullchain.pem
              private_key:
                filename: /your-cert-folder/privkey.pem

  clusters:
  - name: illa_builder
    type: STRICT_DNS
    lb_policy: ROUND_ROBIN
    connect_timeout: 10s
    load_assignment:
      cluster_name: illa_builder
      endpoints:
      - lb_endpoints:
        - endpoint:
            address:
              socket_address:
                address: illa-builder
                port_value: 80

Quickly deploy​

You can deploy ILLA in a remarkably fast way, please follow the instructions below:

First, please download this docker file to your computer, then run the following code.

cd docker;
/bin/bash ./scripts/run-official-image.sh;

And log in with the default username and password:

Username: root

Password: password (self-host mode only).

+ + \ No newline at end of file diff --git a/zh/server-side-pagination/index.html b/zh/server-side-pagination/index.html index d961dcf00c..dadb57d3c2 100644 --- a/zh/server-side-pagination/index.html +++ b/zh/server-side-pagination/index.html @@ -10,13 +10,13 @@ - - + +
-

Server-side pagination

When building an application using a large dataset, it is crucial to limit the amount of data returned in each query. Returning a large amount of data at once can impact the performance of the application, especially when dealing with complex queries involving multiple table joins.

The best practice to optimize queries is to implement server-side pagination. By only returning the results necessary to populate the given view, the amount of data transferred can be reduced. When additional data is needed to populate the view, another action can be triggered, and the server will retrieve the next set of results.

How to enable server-side pagination​

Components

  • Data Grid
  • Grid List

Limit offset based pagination​

Supported on Data Grid and Grid List

Properties to configure​

Property nameTypeDescriptionUse example
Total row countnumberUse {{n}} to set the value. The total number of rows is used to calculate the total number of pages. You can use an Action to query the database for the total number of records and fill in the query result here.Create an action named mysql1 with the query statement "select count(*) from users". This query is used to determine the total number of records in the users table. Simply fill in {{mysql1.data[0].count}} in the Total row count field.
Page sizenumberUse {{n}} to set the number of records displayed per page. This will also be used to limit the number of records returned by the database or API in each pagination query.{{20}}

State of components​

State nameDescription
pageCurrent page index of data grid or grid list.
pageSizePage size refers to the number of records displayed per page in a data grid or grid list.

Configure Actions​

Take SQL-like database and API as examples.

SQL-like database​

Step 1: Write SQL in Action

SELECT *
FROM users
LIMIT {{dataGrid1.pageSize}}
OFFSET {{dataGrid1.page*dataGrid1.pageSize}}

In this example, we use {{dataGrid1.pageSize}} to determine how many records need to be returned for this query, and we use {{dataGrid1.page*dataGrid1.pageSize}} to calculate the offset for this request, indicating from which record to start returning.

Step 2: Changing "Run action only when manually triggered" to "Run action automatically when inputs change"

After that, every time you change the page number of dataGrid1, the action will be triggered automatically and query data with the new page number.

API​

Step 1: Setting up paginated queries using a query

https://example.com?limit={{dataGrid1.pageSize}}&skip={{dataGrid1.page*dataGrid1.pageSize}}

Many common APIs use the parameters "limit" and "skip" for pagination. In this example, we use {{dataGrid1.pageSize}} to determine how many records need to be returned for this query, and we use {{dataGrid1.page*dataGrid1.pageSize}} to calculate the offset for this request, indicating from which record to start returning.

Step 2: Changing "Run action only when manually triggered" to "Run action automatically when inputs change"

After that, every time you change the page number of dataGrid1, the action will be triggered automatically and query data with the new page number.

Cursor based pagination​

Only supported on Grid List

Properties to configure​

Property nameTypeDescriptionUse example
Previous cursorstringWhen you paginate forward, we will update the 'afterCursor' value to indicate to the API from which record to start querying data.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.startCursor}}
Next cursorstringWhile you are paging backward, we will update the "beforeCursor" with this value, which will inform the API about the starting point for querying data in the backward direction.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.endCursor}}
Has next pagebooleanUsed to determine if there is still a next page.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.hasNextPage}}
PagenumberUse {{n}} to set the number of records displayed per page. This is only used to inform the gridlist component about how many items should be displayed per page.{{20}}

State of components​

State nameDescription
beforeCursorWhen paging, inform the API to start querying from a specific record number. When beforeCursor is empty, it indicates the need to page backward. Therefore, based on this value, the configuration for the subsequent action will specify whether to perform a backward or forward query. This will be further explained in the upcoming action configuration.
afterCursorWhen paging, inform the API about the starting point for querying data. When afterCursor is empty, it indicates the need to page forward.

Configure Actions​

Take GitHub's GraphQL interface as example.

Query​

query ($repoOwner: String!, $repoName: String!, $first: Int, $last: Int, $beforeCursor: String, $afterCursor: String) {
   repository(owner: $repoOwner, name: $repoName) {
      issues(first: $first, last: $last, before: $beforeCursor, after: $afterCursor, orderBy: {field: CREATED_AT, direction: DESC}) {
         pageInfo {
            hasNextPage
            hasPreviousPage
            endCursor
            startCursor
         }
         totalCount
         edges {
            cursor
            node {
               title
               number
               url
            }
         }
      }
   }
}

In this example, we first ensure that the API response includes the following four values: hasNextPage, hasPreviousPage, endCursor, and startCursor. These values are used to configure the properties of the component.

And furthermore, we define some variables such as beforeCursor, afterCursor, etc., which need to be further set in the variables section under GraphQL.

Variables​

keyvaluedescription
repoOwnerillacloudTo query the issues in illa-builder repository on illacloud.
repoNameilla-builderTo query the issues in illa-builder repository on illacloud.
beforeCursor{{gridList1.beforeCursor}}This is used to set the cursor from which to start the query when paging forward. If you are paging backward, the value of this field will be null and no further processing is required.
last{{gridList1.beforeCursor ? gridList1.pageSize : null}}The last parameter is used to set the number of records to query when paging forward. If the value of {{gridList1.beforeCursor}} is not null, indicating that you want to page forward, then this conditional statement will also use {{gridList1.pageSize}} as the number of records to query when paging forward. Similarly, if you are paging backward, this value will be empty.
afterCursor{{gridList1.afterCursor}}This is used to set the cursor from which to start the query when paging backward. If you are paging forward, the value of this field will be null.
first{{!gridList1.beforeCursor ? gridList1.pageSize:null}}The first parameter is used to set the number of records to query when paging forward. If the value of {{gridList1.afterCursor}} is not null, it confirms that you are paging backward. However, when you initially trigger the pagination, both beforeCursor and afterCursor are empty, resulting in an error in the query. Therefore, when both are empty, we assume that the user's first pagination is always paging backward, so we only need to check if gridList1.beforeCursor is not empty. Once it is confirmed to be paging backward, this conditional statement will also use {{gridList1.pageSize}} as the number of records to query when paging backward.

Demo​

https://illa.ai/app/ILAcx4p1C7gj/detail

You can fork this demo to your team to check the configuration. And you can change the resources to the following resources:

GraphQL

FieldData
Base URLhttps://api.github.com/graphql
Authenticationbearer
Bearer TokenGenerate your personal token on GitHub

Rest API

FieldData
Base URLhttps://dummyjson.com/

PostgreSQL

FieldData
Hostname146.190.2.7
Port30739
Databaseilla_demo
Usernameilla
Passwordilla2022
- - +

Server-side pagination

When building an application using a large dataset, it is crucial to limit the amount of data returned in each query. Returning a large amount of data at once can impact the performance of the application, especially when dealing with complex queries involving multiple table joins.

The best practice to optimize queries is to implement server-side pagination. By only returning the results necessary to populate the given view, the amount of data transferred can be reduced. When additional data is needed to populate the view, another action can be triggered, and the server will retrieve the next set of results.

How to enable server-side pagination​

Components

  • Data Grid
  • Grid List

Limit offset based pagination​

Supported on Data Grid and Grid List

Properties to configure​

Property nameTypeDescriptionUse example
Total row countnumberUse {{n}} to set the value. The total number of rows is used to calculate the total number of pages. You can use an Action to query the database for the total number of records and fill in the query result here.Create an action named mysql1 with the query statement "select count(*) from users". This query is used to determine the total number of records in the users table. Simply fill in {{mysql1.data[0].count}} in the Total row count field.
Page sizenumberUse {{n}} to set the number of records displayed per page. This will also be used to limit the number of records returned by the database or API in each pagination query.{{20}}

State of components​

State nameDescription
pageCurrent page index of data grid or grid list.
pageSizePage size refers to the number of records displayed per page in a data grid or grid list.

Configure Actions​

Take SQL-like database and API as examples.

SQL-like database​

Step 1: Write SQL in Action

SELECT *
FROM users
LIMIT {{dataGrid1.pageSize}}
OFFSET {{dataGrid1.page*dataGrid1.pageSize}}

In this example, we use {{dataGrid1.pageSize}} to determine how many records need to be returned for this query, and we use {{dataGrid1.page*dataGrid1.pageSize}} to calculate the offset for this request, indicating from which record to start returning.

Step 2: Changing "Run action only when manually triggered" to "Run action automatically when inputs change"

After that, every time you change the page number of dataGrid1, the action will be triggered automatically and query data with the new page number.

API​

Step 1: Setting up paginated queries using a query

https://example.com?limit={{dataGrid1.pageSize}}&skip={{dataGrid1.page*dataGrid1.pageSize}}

Many common APIs use the parameters "limit" and "skip" for pagination. In this example, we use {{dataGrid1.pageSize}} to determine how many records need to be returned for this query, and we use {{dataGrid1.page*dataGrid1.pageSize}} to calculate the offset for this request, indicating from which record to start returning.

Step 2: Changing "Run action only when manually triggered" to "Run action automatically when inputs change"

After that, every time you change the page number of dataGrid1, the action will be triggered automatically and query data with the new page number.

Cursor based pagination​

Only supported on Grid List

Properties to configure​

Property nameTypeDescriptionUse example
Previous cursorstringWhen you paginate forward, we will update the 'afterCursor' value to indicate to the API from which record to start querying data.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.startCursor}}
Next cursorstringWhile you are paging backward, we will update the "beforeCursor" with this value, which will inform the API about the starting point for querying data in the backward direction.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.endCursor}}
Has next pagebooleanUsed to determine if there is still a next page.We can directly retrieve this value from the data returned by the API. For example, {{cursorBased.data.data.repository.issues.pageInfo.hasNextPage}}
PagenumberUse {{n}} to set the number of records displayed per page. This is only used to inform the gridlist component about how many items should be displayed per page.{{20}}

State of components​

State nameDescription
beforeCursorWhen paging, inform the API to start querying from a specific record number. When beforeCursor is empty, it indicates the need to page backward. Therefore, based on this value, the configuration for the subsequent action will specify whether to perform a backward or forward query. This will be further explained in the upcoming action configuration.
afterCursorWhen paging, inform the API about the starting point for querying data. When afterCursor is empty, it indicates the need to page forward.

Configure Actions​

Take GitHub's GraphQL interface as example.

Query​

query ($repoOwner: String!, $repoName: String!, $first: Int, $last: Int, $beforeCursor: String, $afterCursor: String) {
   repository(owner: $repoOwner, name: $repoName) {
      issues(first: $first, last: $last, before: $beforeCursor, after: $afterCursor, orderBy: {field: CREATED_AT, direction: DESC}) {
         pageInfo {
            hasNextPage
            hasPreviousPage
            endCursor
            startCursor
         }
         totalCount
         edges {
            cursor
            node {
               title
               number
               url
            }
         }
      }
   }
}

In this example, we first ensure that the API response includes the following four values: hasNextPage, hasPreviousPage, endCursor, and startCursor. These values are used to configure the properties of the component.

And furthermore, we define some variables such as beforeCursor, afterCursor, etc., which need to be further set in the variables section under GraphQL.

Variables​

keyvaluedescription
repoOwnerillacloudTo query the issues in illa-builder repository on illacloud.
repoNameilla-builderTo query the issues in illa-builder repository on illacloud.
beforeCursor{{gridList1.beforeCursor}}This is used to set the cursor from which to start the query when paging forward. If you are paging backward, the value of this field will be null and no further processing is required.
last{{gridList1.beforeCursor ? gridList1.pageSize : null}}The last parameter is used to set the number of records to query when paging forward. If the value of {{gridList1.beforeCursor}} is not null, indicating that you want to page forward, then this conditional statement will also use {{gridList1.pageSize}} as the number of records to query when paging forward. Similarly, if you are paging backward, this value will be empty.
afterCursor{{gridList1.afterCursor}}This is used to set the cursor from which to start the query when paging backward. If you are paging forward, the value of this field will be null.
first{{!gridList1.beforeCursor ? gridList1.pageSize:null}}The first parameter is used to set the number of records to query when paging forward. If the value of {{gridList1.afterCursor}} is not null, it confirms that you are paging backward. However, when you initially trigger the pagination, both beforeCursor and afterCursor are empty, resulting in an error in the query. Therefore, when both are empty, we assume that the user's first pagination is always paging backward, so we only need to check if gridList1.beforeCursor is not empty. Once it is confirmed to be paging backward, this conditional statement will also use {{gridList1.pageSize}} as the number of records to query when paging backward.

Demo​

https://illa.ai/app/ILAcx4p1C7gj/detail

You can fork this demo to your team to check the configuration. And you can change the resources to the following resources:

GraphQL

FieldData
Base URLhttps://api.github.com/graphql
Authenticationbearer
Bearer TokenGenerate your personal token on GitHub

Rest API

FieldData
Base URLhttps://dummyjson.com/

PostgreSQL

FieldData
Hostname146.190.2.7
Port30739
Databaseilla_demo
Usernameilla
Passwordilla2022
+ + \ No newline at end of file diff --git a/zh/snowflake/index.html b/zh/snowflake/index.html index c6f6d33642..761b5e8248 100644 --- a/zh/snowflake/index.html +++ b/zh/snowflake/index.html @@ -10,13 +10,13 @@ - - + +
-

Snowflake

In Illa, you can use the Snowflake query editor to execute SQL queries against your Snowflake data warehouse. You can connect to Snowflake by entering your Snowflake account credentials, including the account name, username, password, and warehouse name. Once you have connected to Snowflake, you can use the query editor to write and execute SQL queries to retrieve, manipulate, and analyze your data.

Create Snowflake​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Snowflake from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Snowflake will display as shown.

snow_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Snowflake from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Snowflake database.

snow_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Account namerequiredunique identifier that is assigned to each Snowflake account
Warehouserequireda cluster of compute resources that are used to process queries and run analytical workloads
DatabaserequiredThe name of the database
Schemaoptionala container that holds database objects such as tables, views, and procedures
Roleoptionala named set of privileges that can be assigned to one or more users
Authenticationrequiredsecure access to your data and resources in the Snowflake data warehouse (Basic Auth or Key Pair (only encrypted private keys are supported))
Usernamerequiredthe username you wish to use when logging in to the Snowflake server.
PasswordrequiredUse this password for authentication.

Create Actions​

We have created a Snowflake resource, we can add the action by selecting Snowflake from action list and choosing the Create action button.

snow_resource_list

Now we have added the Snowflake server as an action to our building page.

snow

Configure Snowflake​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

Snowflake

In Illa, you can use the Snowflake query editor to execute SQL queries against your Snowflake data warehouse. You can connect to Snowflake by entering your Snowflake account credentials, including the account name, username, password, and warehouse name. Once you have connected to Snowflake, you can use the query editor to write and execute SQL queries to retrieve, manipulate, and analyze your data.

Create Snowflake​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Snowflake from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Snowflake will display as shown.

snow_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Snowflake from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to Snowflake database.

snow_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Account namerequiredunique identifier that is assigned to each Snowflake account
Warehouserequireda cluster of compute resources that are used to process queries and run analytical workloads
DatabaserequiredThe name of the database
Schemaoptionala container that holds database objects such as tables, views, and procedures
Roleoptionala named set of privileges that can be assigned to one or more users
Authenticationrequiredsecure access to your data and resources in the Snowflake data warehouse (Basic Auth or Key Pair (only encrypted private keys are supported))
Usernamerequiredthe username you wish to use when logging in to the Snowflake server.
PasswordrequiredUse this password for authentication.

Create Actions​

We have created a Snowflake resource, we can add the action by selecting Snowflake from action list and choosing the Create action button.

snow_resource_list

Now we have added the Snowflake server as an action to our building page.

snow

Configure Snowflake​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/zh/statistics/index.html b/zh/statistics/index.html index e37c6a3dc4..9500cb7843 100644 --- a/zh/statistics/index.html +++ b/zh/statistics/index.html @@ -10,13 +10,13 @@ - - + +
-

Statistics

What is Statistics?​

The Statistics component in ILLA Cloud is a powerful tool for displaying and analyzing numerical data. It provides a visually appealing and customizable way to showcase key metrics and statistics.

Properties​

PropertiesDescription
LabelThe name of the field displayed to the user
Primary valuethe primary value or rating displayed by the component.
Secondary valuean additional rating or value associated with the primary value, providing additional information or context.
Primary
Decimal placespecify the number of decimal places that can be entered in the component
Show trend signEnabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separatorWhen enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend colorchange color based on the trend or change in the rating value.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Secondary
Decimal placespecify the number of decimal places that can be entered in the component
Show trend signEnabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separatorWhen enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend colorchange color based on the trend or change in the rating value.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Event handlerdefine custom actions or logic that trigger when the component is interacted with or the rating is changed.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Alignmentalignment of the component, such as left, center, or right.
Theme ColorAllows users to specify the button's background color and opacity
Positive colordetermines the color used for positive or high ratings
Negative colordefines the color used for negative or low ratings.

Method​

You can use other components to control the component. We support the following two methods:

  • setPrimaryValue

To set the primary value, for example, {{"value1"}}

PropertiesDescription
Primary ValueInput primary value
  • resetPrimaryValue

To reset the value to the default value of the selected component. If the default value is not specified, clear value.

Event handler​

EventDescription
ClickWhen a user clicks this button, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the number input component.
hiddenhidden status (true or false)
labellabel value
negativeColorSchemedetermines the color scheme used for displaying negative values
positiveColorSchemesets the color scheme for positive values
primaryValuethe primary numerical value to be displayed in the statistics component.
decimalPlacedefines the number of decimal places to be shown for both the primary and secondary values.
showTrendSigndisplays a positive or negative trend sign (+ or -) next to the values, indicating the direction of the trend.
textAlignthe alignment of the statistics component
positiveSignsets the symbol to be displayed for positive values
negativeSigndefines the symbol to be shown for negative values.
showSeparatorwhether displays a thousand separator (such as a comma) to improve readability of large numbers.
prefixTextvalue of the prefix
suffixTextvalue of the suffix
setPrimaryValueenables you to programmatically set or update the primary value of the statistics component.
secondaryValuea secondary numerical value that can be displayed alongside the primary value.
secondaryDecimalPlacespecifies the number of decimal places to be shown for the secondary value.
secondaryEnableTrendColorwhether applies a color scheme to the secondary value based on its trend
secondaryPositiveSignSets the symbol to be displayed for positive secondary values
secondaryNegativeSignDefines the symbol to be shown for negative secondary values
secondaryPrefixTextadd custom text or symbols to appear before the secondary values.
secondaryShowSeparatordisplays a thousand separator for the secondary value.
secondaryShowTrendSigndisplays a trend sign (+ or -) for the secondary value.
secondarySuffixTextadd custom text or symbols to appear after the secondary values.
tooltipTextvalue of tooltip text

Example: {{statistics1.secondaryValue}}

Use case​

Next, we will demonstrate how to map the data from the data source to statistics with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

'1.txt' with the decimal '1.1111' as its data. This is the value we want to show in number input.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 1.txt for **Object Key.**

Click Save and Run to activate this action.

stat_data

Step 2 Add Components​

Next, we can add a statistics component and a button component to the canvas.

We set the default primary value of statistics to 0 and labeled the button as "Set value" as shown below

stat_layout

Step 3 Configure the component​

For the button component, we can configure it to set the value in statistics component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the statistics component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

stat_button_config

Step 4 Test​

Now that when you click the "Set value" button, the value should change to 1.1111.

stat_test

- - +

Statistics

What is Statistics?​

The Statistics component in ILLA Cloud is a powerful tool for displaying and analyzing numerical data. It provides a visually appealing and customizable way to showcase key metrics and statistics.

Properties​

PropertiesDescription
LabelThe name of the field displayed to the user
Primary valuethe primary value or rating displayed by the component.
Secondary valuean additional rating or value associated with the primary value, providing additional information or context.
Primary
Decimal placespecify the number of decimal places that can be entered in the component
Show trend signEnabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separatorWhen enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend colorchange color based on the trend or change in the rating value.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Secondary
Decimal placespecify the number of decimal places that can be entered in the component
Show trend signEnabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separatorWhen enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend colorchange color based on the trend or change in the rating value.
Prefix texta short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix texta short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Event handlerdefine custom actions or logic that trigger when the component is interacted with or the rating is changed.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Alignmentalignment of the component, such as left, center, or right.
Theme ColorAllows users to specify the button's background color and opacity
Positive colordetermines the color used for positive or high ratings
Negative colordefines the color used for negative or low ratings.

Method​

You can use other components to control the component. We support the following two methods:

  • setPrimaryValue

To set the primary value, for example, {{"value1"}}

PropertiesDescription
Primary ValueInput primary value
  • resetPrimaryValue

To reset the value to the default value of the selected component. If the default value is not specified, clear value.

Event handler​

EventDescription
ClickWhen a user clicks this button, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the number input component.
hiddenhidden status (true or false)
labellabel value
negativeColorSchemedetermines the color scheme used for displaying negative values
positiveColorSchemesets the color scheme for positive values
primaryValuethe primary numerical value to be displayed in the statistics component.
decimalPlacedefines the number of decimal places to be shown for both the primary and secondary values.
showTrendSigndisplays a positive or negative trend sign (+ or -) next to the values, indicating the direction of the trend.
textAlignthe alignment of the statistics component
positiveSignsets the symbol to be displayed for positive values
negativeSigndefines the symbol to be shown for negative values.
showSeparatorwhether displays a thousand separator (such as a comma) to improve readability of large numbers.
prefixTextvalue of the prefix
suffixTextvalue of the suffix
setPrimaryValueenables you to programmatically set or update the primary value of the statistics component.
secondaryValuea secondary numerical value that can be displayed alongside the primary value.
secondaryDecimalPlacespecifies the number of decimal places to be shown for the secondary value.
secondaryEnableTrendColorwhether applies a color scheme to the secondary value based on its trend
secondaryPositiveSignSets the symbol to be displayed for positive secondary values
secondaryNegativeSignDefines the symbol to be shown for negative secondary values
secondaryPrefixTextadd custom text or symbols to appear before the secondary values.
secondaryShowSeparatordisplays a thousand separator for the secondary value.
secondaryShowTrendSigndisplays a trend sign (+ or -) for the secondary value.
secondarySuffixTextadd custom text or symbols to appear after the secondary values.
tooltipTextvalue of tooltip text

Example: {{statistics1.secondaryValue}}

Use case​

Next, we will demonstrate how to map the data from the data source to statistics with a button.

Step 1 Add an action​

Let us create a table in Amazon S3. One of the documents is called

'1.txt' with the decimal '1.1111' as its data. This is the value we want to show in number input.

s3data

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 1.txt for **Object Key.**

Click Save and Run to activate this action.

stat_data

Step 2 Add Components​

Next, we can add a statistics component and a button component to the canvas.

We set the default primary value of statistics to 0 and labeled the button as "Set value" as shown below

stat_layout

Step 3 Configure the component​

For the button component, we can configure it to set the value in statistics component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the statistics component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

stat_button_config

Step 4 Test​

Now that when you click the "Set value" button, the value should change to 1.1111.

stat_test

+ + \ No newline at end of file diff --git a/zh/supabase/index.html b/zh/supabase/index.html index bdf2cb7a02..7fb7ac3f0d 100644 --- a/zh/supabase/index.html +++ b/zh/supabase/index.html @@ -10,13 +10,13 @@ - - + +
-

Supabase DB

Supabase is an open-source Firebase alternative that allows developers to build real-time web and mobile applications. It provides many of the same features as Firebase, such as real-time databases, user authentication, and hosting, but with the added benefits of being open-source and providing a SQL API. This allows developers to use their existing SQL knowledge and tools, making it easy to integrate with other systems. Additionally, Supabase provides a more flexible and customizable platform than Firebase, which can be more restrictive regarding data modeling and usage.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Supabase in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Supabase, visit their website at https://supabase.com/. Let's begin!

Step 1: Set up your Back end on Supabase​

On the Supabase dashboard, click New project and set the name to adminPanel.

Create a new table by clicking on the Create a new table .

Supabase offers a variety of options for populating tables with data, including writing queries, creating schemas through a user interface, and uploading CSV files.

Fill out the info in the table. The database is now set up.

Step 2: Build UI on ILLA Cloud​

On ILLA Cloud, click Create New to create a new application.

Drag components from the Insert panel to the canvas.

Select the components on the canvas and configure the property on the Inspect panel.

As seen in the below screenshot, we have built a simple admin panel.

Step 3: Connect to Supabase and config CRUD​

Note down the database connection information under Project Settings in Supabase.

In the Action List, click + New and select Supabase DB.

Fill out the form to connect to your Supabase instance. Test connection and save resource.

Click Create Action to create an action with the Supabase resource and config your CRUD.

Use {{ to get the front-end input data. The following is an example of the User Management page in the Admin Panel.

Search for a user by the name inputted in input1

SELECT *
FROM user
WHERE name = "{{input1.value}}"
;

Update user data. Update user information when id matches

UPDATE user
SET name = "{{input3.value}}"
, email = "{{input4.value}}"
WHERE id="{{input2.value}}"
;

Insert user data

INSERT INTO user VALUES("{{input5.value}}","{{input6.value}}","{{input7.value}}");

Delete a user by id

DELETE FROM user WHERE id = "{{input2.value}}";

Step 4: Show data on components​

Configure the properties of components with {{ . For example:

Resources​

- - +

Supabase DB

Supabase is an open-source Firebase alternative that allows developers to build real-time web and mobile applications. It provides many of the same features as Firebase, such as real-time databases, user authentication, and hosting, but with the added benefits of being open-source and providing a SQL API. This allows developers to use their existing SQL knowledge and tools, making it easy to integrate with other systems. Additionally, Supabase provides a more flexible and customizable platform than Firebase, which can be more restrictive regarding data modeling and usage.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Supabase in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Supabase, visit their website at https://supabase.com/. Let's begin!

Step 1: Set up your Back end on Supabase​

On the Supabase dashboard, click New project and set the name to adminPanel.

Create a new table by clicking on the Create a new table .

Supabase offers a variety of options for populating tables with data, including writing queries, creating schemas through a user interface, and uploading CSV files.

Fill out the info in the table. The database is now set up.

Step 2: Build UI on ILLA Cloud​

On ILLA Cloud, click Create New to create a new application.

Drag components from the Insert panel to the canvas.

Select the components on the canvas and configure the property on the Inspect panel.

As seen in the below screenshot, we have built a simple admin panel.

Step 3: Connect to Supabase and config CRUD​

Note down the database connection information under Project Settings in Supabase.

In the Action List, click + New and select Supabase DB.

Fill out the form to connect to your Supabase instance. Test connection and save resource.

Click Create Action to create an action with the Supabase resource and config your CRUD.

Use {{ to get the front-end input data. The following is an example of the User Management page in the Admin Panel.

Search for a user by the name inputted in input1

SELECT *
FROM user
WHERE name = "{{input1.value}}"
;

Update user data. Update user information when id matches

UPDATE user
SET name = "{{input3.value}}"
, email = "{{input4.value}}"
WHERE id="{{input2.value}}"
;

Insert user data

INSERT INTO user VALUES("{{input5.value}}","{{input6.value}}","{{input7.value}}");

Delete a user by id

DELETE FROM user WHERE id = "{{input2.value}}";

Step 4: Show data on components​

Configure the properties of components with {{ . For example:

Resources​

+ + \ No newline at end of file diff --git a/zh/switch/index.html b/zh/switch/index.html index 049fc7d523..418f3be5b2 100644 --- a/zh/switch/index.html +++ b/zh/switch/index.html @@ -10,13 +10,13 @@ - - + +
-

Switch

What is Switch?​

The Switch component is a user interface element that allows users to toggle between two states: "on" and "off".

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
LoadingWhether the component should show a loading indicator.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following three methods:

  • setValue

To set the selected value, for example, {{'value1'}}

PropertiesDescription
ValueSelected value
  • clearValue

To clear the selected value

  • toggle

changing the switch from the "off" state to the "on" state, or vice versa

Example Usage:

Switch component support listening to the onClick event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onClick event of a Button component, you would add an event trigger to that Button component.
  2. In the Edit event handler, select Control component in action, select the Switch component that you want to update as the target of the event.
  3. Choose the toggle action. When the event is triggered (ie when the button is clicked), the switch component with be toggled and its status will be updated.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the switch component will automatically update whenever the onClick event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected option value, perform specific action customized by users.

Data​

The button component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
displayNamethe name of this component (ie button1)
hiddena boolean value indicate the hidden status of button
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
valueA user sets the value to be true or false

Use case​

Next, we will demonstrate how to switch the status of other components dynamically.

Step 1 Add a Component​

First we add the Switch component and label it as 'Hide'. Then we use the text component as an influenced component that changes from 'displayed' to 'hidden' state. We change its content to 'Hello World'

Step 2 Configure a Component​

In the Hidden property for Text. Click on the fx icon so we can control the component's hidden state by setting it the same as the value of our switch using JavaScript:

{{switch1.value}}

Now, whenever the switch is on, the value for switch is true, the text will be hide, and vice versa.

Switch On

switch0

Switch Off

switch_off

- - +

Switch

What is Switch?​

The Switch component is a user interface element that allows users to toggle between two states: "on" and "off".

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
LoadingWhether the component should show a loading indicator.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following three methods:

  • setValue

To set the selected value, for example, {{'value1'}}

PropertiesDescription
ValueSelected value
  • clearValue

To clear the selected value

  • toggle

changing the switch from the "off" state to the "on" state, or vice versa

Example Usage:

Switch component support listening to the onClick event of other components using built-in event system. Set it up by following these example steps:

  1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the onClick event of a Button component, you would add an event trigger to that Button component.
  2. In the Edit event handler, select Control component in action, select the Switch component that you want to update as the target of the event.
  3. Choose the toggle action. When the event is triggered (ie when the button is clicked), the switch component with be toggled and its status will be updated.
  4. Save the event trigger settings and repeat the process for any other components that you want to listen to.

Once you've set up the event triggers, the switch component will automatically update whenever the onClick event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.

Event handler​

EventDescription
ChangeWhen a user changes the selected option value, perform specific action customized by users.

Data​

The button component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemebackground color of the button
displayNamethe name of this component (ie button1)
hiddena boolean value indicate the hidden status of button
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
valueA user sets the value to be true or false

Use case​

Next, we will demonstrate how to switch the status of other components dynamically.

Step 1 Add a Component​

First we add the Switch component and label it as 'Hide'. Then we use the text component as an influenced component that changes from 'displayed' to 'hidden' state. We change its content to 'Hello World'

Step 2 Configure a Component​

In the Hidden property for Text. Click on the fx icon so we can control the component's hidden state by setting it the same as the value of our switch using JavaScript:

{{switch1.value}}

Now, whenever the switch is on, the value for switch is true, the text will be hide, and vice versa.

Switch On

switch0

Switch Off

switch_off

+ + \ No newline at end of file diff --git a/zh/table/index.html b/zh/table/index.html index 1b16e31c70..01fe22ac04 100644 --- a/zh/table/index.html +++ b/zh/table/index.html @@ -10,13 +10,13 @@ - - + +
-

Table

What is Table?​

The Table component in ILLA Cloud is a powerful feature that allows users to display, organize, and manipulate tabular data within the application. It provides a structured layout with rows and columns, enabling users to view and interact with data in a convenient and structured manner.

Properties​

PropertiesDescription
Data sourcesource of data that populates the table
Empty statethe content or message displayed when the table has no data to show
Loadingwhether the Table component is currently in a loading state
Columnsstructure and configuration of the columns in the table. (See the section about Columns below for more detail)
Columnthe number of columns
Multi-Row SelectionUse {{table.selectedRow[n].columnName}} to access data.
Cell SelectionWhether allow users to select a cell
Click outside to deselectSupported in the row single selection mode. After enabling it, click an area other than the table to unselect the row.
Overflowhow the table handles content that exceeds the available space within the table's container (pagination or scroll)
Enable server side paginationWhether to enable server pagination
PageSizethe number of rows to be displayed per page when server-side pagination is enabled
RefreshWhether to show the refresh icon.
DownloadShow download button in toolbar.
Download raw dataWhether to show the download raw data icon.
FilterShow filter button in toolbar
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions.
Disablednon-interactive and cannot be modified or triggered by the user.

Column Properties Overview​

For each column, we can configure its properties to customize the data displayed for each column.

PropertiesDescription
Column titlespecifies the name or label of the column, which serves as a header to identify the data it represents
Column typedefines the type of data that the column contains, including auto, text, date, tag, time, dateTime, number, percent, link, button, button group, boolean, image, iconGroup, Rating, Markdown, currency
Mapped ValueUse {{ currentRow }} to access the data of current row. For example, to calculate "cost per click" based on columns "cost" and "clickTimes":
{{ currentRow.cost / currentRow.clickTimes }}
Enable Sortingwhether the column allows users to sort the table data based on the values in that specific column
BackgroundSet the background of column. Use {{ write a conditional statement to set the color displayed by each cell under different conditions.
Alignmentcontrols the horizontal alignment of the content within the column cells

Column types:​

  • Auto

a dynamic type that automatically determines the data type based on the values within the column

  • Text

represents a column that contains textual data

  • Date

represents data values that correspond to specific dates

PropertiesDescription
Formataccepts various formatting codes or patterns, default is YYYY-MM-DD
  • Tag

a specialized format for displaying tags or labels associated with data entries

PropertiesDescription
Tag labelrepresents the text or label assigned to a tag in the "tag" column
Tag colordefines the color assigned to the tag in the "tag" column
  • Time

accurately represent and manipulate time values within the table

PropertiesDescription
Formatthe visual representation of the time data within the column, default is HH:mm:ss
  • DateTime

stores and represents date and time values

PropertiesDescription
Formatspecifies how the date and time values should be displayed in the column, default is YYYY-MM-DD HH:mm:ss
  • Number

handle numerical data

PropertiesDescription
Decimal placesspecify the number of decimal places to display for numeric values in the column
Show thousands separatorwhether the column should display a thousands separator to improve readability and ease of interpretation for large numbers
  • Percent

handle percentage values in a concise and visually appealing manner

PropertiesDescription
Decimal placesspecify the number of decimal places to display for percentage values in the column
Show thousands separatorwhether a thousands separator should be included in the displayed percentage values
  • Link

include clickable links within a specific column

  • Button

include interactive buttons within a specific column

PropertiesDescription
Event handlerdefines the action or event that occurs when the button within the column is clicked
Disabledwhether the button within the column is enabled or disabled
Theme colorchoose a theme color for the button
Variantvisual style or variant of the button (Fill or outline)
  • buttonGroup

allows users to create interactive button groups within a column

For each button in the columns, we can configure its properties.

PropertiesDescription
Mapped Valueassociate each button in the button group with a specific value or field from the data source
Variantvisual style or appearance of the buttons in the button group
Event handlerthe action or function triggered when a button in the group is clicked or interacted with
Disabledwhether the buttons in the button group are enabled or disabled
Theme colorcustomize the color or styling of the buttons in the group to align with the overall theme or branding of their application or website
  • Boolean

represents data that has two possible states: true or false

  • Image

populate a column in the table with image data

PropertiesDescription
Scale Typehow the image is scaled or resized within the table cell
  • IconGroup

a specialized column that allows users to display icons within a group or collection

For each button in the columns, we can configure its properties.

PropertiesDescription
Iconallows users to select or specify the icon to be displayed within the IconGroup column
Theme colordetermines the color scheme or theme applied to the icon within the IconGroup column
Event handlerenables users to define an event or action triggered when the icon in the IconGroup column is interacted with by users
Disabledstate of the IconGroup column, determining whether it is disabled or enabled for user interaction
  • Rating

represents ratings or feedback given to items or entities

  • Markdown

ability to render formatted text using Markdown syntax within the column cells

  • Currency

handle and format currency values.

PropertiesDescription
Decimal placesthe number of decimal places to display for the currency values within the column
Currency codespecifies the code or abbreviation representing the currency used in the column
Show thousands separatorwhether a thousands separator is displayed for large currency values

Method​

You can use other components to control the component. We support the following two methods:

  • selectPage

select all the rows on a specific page in a paginated table

PropertiesDescription
End Valuethe page number or index of the page to be selected
  • selectRow

select a specific row in the table

PropertiesDescription
Default selected rowdefault selected row value, can be the row index, a unique identifier, or any other property that uniquely identifies the row to be selected
  • clearSelection

clear the current selection in the table

  • setFilters

apply filters to the table data

PropertiesDescription
Filtersfiltering conditions or criteria
Filter modedetermines how the filters are applied
  • ClearFilters

clears any applied filters in the table

  • setSort

set the sorting for the table

PropertiesDescription
Columnthe column on which the sorting should be applied
Directiondirection of the sort, which can be "ascending" or "descending"

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
clickOutsideToResetSelectionwhether clicking outside the Table component should reset the current selection
columnMapperan object that maps the data fields or keys in the table's data source to the corresponding column names
columnNameIndicesan object that stores the indices of the column names
columnsan array that defines the configuration and properties of each column in the table
columnVisibilityan object that stores the visibility status of each column in the table
customColumnIndicesan object that stores the indices of the custom columns in the table
dataSourcethe data source for the table
dataSourceJSa JavaScript representation of the data source
dataSourceModethe mode or type of the data source.
defaultSortKeydefault column key to be used for sorting the table initially
defaultSortOrderthe default sorting order for the table
disabledwhether the Table component is disabled or not
displayedDatacurrently displayed data in the table
displayedDataIndicesthe indices of the displayed rows in the table
displayNamespecifies the name or label of the table component
downloadenables the ability to download the table data
downloadRawDatawhether to download the raw data or the displayed data of the table
emptyStatethe content or message to be displayed when the table is empty
enableServerSidePaginationWhen set to true, the enableServerSidePagination property enables server-side pagination for the table
enableSingleCellSelectionallows for single-cell selection in the table
filterthe currently applied filter or filtering conditions in the table
hasNextPagewhether there is a next page available in the paginated table
loadingwhether the Table component is in a loading state
multiRowSelectionenables multi-row selection in the table
nextAfterCursorthe cursor or identifier for fetching the next set of data in server-side pagination
nextBeforeCursorthe cursor for fetching the previous set of data in server-side pagination
overflowthe behavior of the table when the content exceeds the available space
pageIndexthe current page index in a paginated table
pageSizedetermines the number of rows to be displayed per page in a paginated table
paginationOffsetthe number of pages to be offset in the pagination
refreshtriggers a refresh of the table's data
renamedColumnNamesstores the renamed column names in the table
rowEventsallows for custom events or actions to be associated with specific rows in the table
totalRowCountthe total number of rows in the table

Example: {{table1.disabled}}

Use case​

Next, we will demonstrate how to map the data from **Upstash** to the **table** component.

Step 1 Add an action​

Let us create a table in Upstash called employee_profile, including 4 columns name, level, age, and married.

Then we can create a new action for Upstash from the action list in ILLA Cloud and named upstash2.

To list all data in employee_profile put the code snippet below in the Redis query section.

GET employee_profile

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const jsonString = data[0].result;

// Parse the JSON string into a JavaScript object
const jsonData = JSON.parse(jsonString);

// Access the "employees" property and map it to a new array
const mappedArray = jsonData.employees.map((employee) => ({
  name: employee.name,
  level: employee.level,
  age: employee.age,
  married: employee.married,
}));

return mappedArray;

up_code

Click Save and Run to activate this action.

up_data

Step 2 Add Components​

Next, we can add a table component to the canvas.

In the Data Source field in the Inspect page after clicking on the component, put {{upstash2.data}} to retrieve the data from Upstash.

Step 3 Test​

The final look should be as shown.

up_test

- - +

Table

What is Table?​

The Table component in ILLA Cloud is a powerful feature that allows users to display, organize, and manipulate tabular data within the application. It provides a structured layout with rows and columns, enabling users to view and interact with data in a convenient and structured manner.

Properties​

PropertiesDescription
Data sourcesource of data that populates the table
Empty statethe content or message displayed when the table has no data to show
Loadingwhether the Table component is currently in a loading state
Columnsstructure and configuration of the columns in the table. (See the section about Columns below for more detail)
Columnthe number of columns
Multi-Row SelectionUse {{table.selectedRow[n].columnName}} to access data.
Cell SelectionWhether allow users to select a cell
Click outside to deselectSupported in the row single selection mode. After enabling it, click an area other than the table to unselect the row.
Overflowhow the table handles content that exceeds the available space within the table's container (pagination or scroll)
Enable server side paginationWhether to enable server pagination
PageSizethe number of rows to be displayed per page when server-side pagination is enabled
RefreshWhether to show the refresh icon.
DownloadShow download button in toolbar.
Download raw dataWhether to show the download raw data icon.
FilterShow filter button in toolbar
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions.
Disablednon-interactive and cannot be modified or triggered by the user.

Column Properties Overview​

For each column, we can configure its properties to customize the data displayed for each column.

PropertiesDescription
Column titlespecifies the name or label of the column, which serves as a header to identify the data it represents
Column typedefines the type of data that the column contains, including auto, text, date, tag, time, dateTime, number, percent, link, button, button group, boolean, image, iconGroup, Rating, Markdown, currency
Mapped ValueUse {{ currentRow }} to access the data of current row. For example, to calculate "cost per click" based on columns "cost" and "clickTimes":
{{ currentRow.cost / currentRow.clickTimes }}
Enable Sortingwhether the column allows users to sort the table data based on the values in that specific column
BackgroundSet the background of column. Use {{ write a conditional statement to set the color displayed by each cell under different conditions.
Alignmentcontrols the horizontal alignment of the content within the column cells

Column types:​

  • Auto

a dynamic type that automatically determines the data type based on the values within the column

  • Text

represents a column that contains textual data

  • Date

represents data values that correspond to specific dates

PropertiesDescription
Formataccepts various formatting codes or patterns, default is YYYY-MM-DD
  • Tag

a specialized format for displaying tags or labels associated with data entries

PropertiesDescription
Tag labelrepresents the text or label assigned to a tag in the "tag" column
Tag colordefines the color assigned to the tag in the "tag" column
  • Time

accurately represent and manipulate time values within the table

PropertiesDescription
Formatthe visual representation of the time data within the column, default is HH:mm:ss
  • DateTime

stores and represents date and time values

PropertiesDescription
Formatspecifies how the date and time values should be displayed in the column, default is YYYY-MM-DD HH:mm:ss
  • Number

handle numerical data

PropertiesDescription
Decimal placesspecify the number of decimal places to display for numeric values in the column
Show thousands separatorwhether the column should display a thousands separator to improve readability and ease of interpretation for large numbers
  • Percent

handle percentage values in a concise and visually appealing manner

PropertiesDescription
Decimal placesspecify the number of decimal places to display for percentage values in the column
Show thousands separatorwhether a thousands separator should be included in the displayed percentage values
  • Link

include clickable links within a specific column

  • Button

include interactive buttons within a specific column

PropertiesDescription
Event handlerdefines the action or event that occurs when the button within the column is clicked
Disabledwhether the button within the column is enabled or disabled
Theme colorchoose a theme color for the button
Variantvisual style or variant of the button (Fill or outline)
  • buttonGroup

allows users to create interactive button groups within a column

For each button in the columns, we can configure its properties.

PropertiesDescription
Mapped Valueassociate each button in the button group with a specific value or field from the data source
Variantvisual style or appearance of the buttons in the button group
Event handlerthe action or function triggered when a button in the group is clicked or interacted with
Disabledwhether the buttons in the button group are enabled or disabled
Theme colorcustomize the color or styling of the buttons in the group to align with the overall theme or branding of their application or website
  • Boolean

represents data that has two possible states: true or false

  • Image

populate a column in the table with image data

PropertiesDescription
Scale Typehow the image is scaled or resized within the table cell
  • IconGroup

a specialized column that allows users to display icons within a group or collection

For each button in the columns, we can configure its properties.

PropertiesDescription
Iconallows users to select or specify the icon to be displayed within the IconGroup column
Theme colordetermines the color scheme or theme applied to the icon within the IconGroup column
Event handlerenables users to define an event or action triggered when the icon in the IconGroup column is interacted with by users
Disabledstate of the IconGroup column, determining whether it is disabled or enabled for user interaction
  • Rating

represents ratings or feedback given to items or entities

  • Markdown

ability to render formatted text using Markdown syntax within the column cells

  • Currency

handle and format currency values.

PropertiesDescription
Decimal placesthe number of decimal places to display for the currency values within the column
Currency codespecifies the code or abbreviation representing the currency used in the column
Show thousands separatorwhether a thousands separator is displayed for large currency values

Method​

You can use other components to control the component. We support the following two methods:

  • selectPage

select all the rows on a specific page in a paginated table

PropertiesDescription
End Valuethe page number or index of the page to be selected
  • selectRow

select a specific row in the table

PropertiesDescription
Default selected rowdefault selected row value, can be the row index, a unique identifier, or any other property that uniquely identifies the row to be selected
  • clearSelection

clear the current selection in the table

  • setFilters

apply filters to the table data

PropertiesDescription
Filtersfiltering conditions or criteria
Filter modedetermines how the filters are applied
  • ClearFilters

clears any applied filters in the table

  • setSort

set the sorting for the table

PropertiesDescription
Columnthe column on which the sorting should be applied
Directiondirection of the sort, which can be "ascending" or "descending"

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
clickOutsideToResetSelectionwhether clicking outside the Table component should reset the current selection
columnMapperan object that maps the data fields or keys in the table's data source to the corresponding column names
columnNameIndicesan object that stores the indices of the column names
columnsan array that defines the configuration and properties of each column in the table
columnVisibilityan object that stores the visibility status of each column in the table
customColumnIndicesan object that stores the indices of the custom columns in the table
dataSourcethe data source for the table
dataSourceJSa JavaScript representation of the data source
dataSourceModethe mode or type of the data source.
defaultSortKeydefault column key to be used for sorting the table initially
defaultSortOrderthe default sorting order for the table
disabledwhether the Table component is disabled or not
displayedDatacurrently displayed data in the table
displayedDataIndicesthe indices of the displayed rows in the table
displayNamespecifies the name or label of the table component
downloadenables the ability to download the table data
downloadRawDatawhether to download the raw data or the displayed data of the table
emptyStatethe content or message to be displayed when the table is empty
enableServerSidePaginationWhen set to true, the enableServerSidePagination property enables server-side pagination for the table
enableSingleCellSelectionallows for single-cell selection in the table
filterthe currently applied filter or filtering conditions in the table
hasNextPagewhether there is a next page available in the paginated table
loadingwhether the Table component is in a loading state
multiRowSelectionenables multi-row selection in the table
nextAfterCursorthe cursor or identifier for fetching the next set of data in server-side pagination
nextBeforeCursorthe cursor for fetching the previous set of data in server-side pagination
overflowthe behavior of the table when the content exceeds the available space
pageIndexthe current page index in a paginated table
pageSizedetermines the number of rows to be displayed per page in a paginated table
paginationOffsetthe number of pages to be offset in the pagination
refreshtriggers a refresh of the table's data
renamedColumnNamesstores the renamed column names in the table
rowEventsallows for custom events or actions to be associated with specific rows in the table
totalRowCountthe total number of rows in the table

Example: {{table1.disabled}}

Use case​

Next, we will demonstrate how to map the data from **Upstash** to the **table** component.

Step 1 Add an action​

Let us create a table in Upstash called employee_profile, including 4 columns name, level, age, and married.

Then we can create a new action for Upstash from the action list in ILLA Cloud and named upstash2.

To list all data in employee_profile put the code snippet below in the Redis query section.

GET employee_profile

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const jsonString = data[0].result;

// Parse the JSON string into a JavaScript object
const jsonData = JSON.parse(jsonString);

// Access the "employees" property and map it to a new array
const mappedArray = jsonData.employees.map((employee) => ({
  name: employee.name,
  level: employee.level,
  age: employee.age,
  married: employee.married,
}));

return mappedArray;

up_code

Click Save and Run to activate this action.

up_data

Step 2 Add Components​

Next, we can add a table component to the canvas.

In the Data Source field in the Inspect page after clicking on the component, put {{upstash2.data}} to retrieve the data from Upstash.

Step 3 Test​

The final look should be as shown.

up_test

+ + \ No newline at end of file diff --git a/zh/tabs/index.html b/zh/tabs/index.html index 6d581055a7..f9b9a8e309 100644 --- a/zh/tabs/index.html +++ b/zh/tabs/index.html @@ -10,13 +10,13 @@ - - + +
-

Tabs

What is Tabs?​

The Tabs component in ILLA Cloud is a versatile feature that allows users to organize and present content in a tabbed layout. It enables the creation of multiple tabs within a single container, allowing users to switch between different sections of content with ease. The Tabs component provides a user-friendly interface for navigating through related information, improving the overall user experience. With customizable styling options and the ability to add various types of content, such as text, images, or embedded components, the Tabs component in ILLA Cloud offers flexibility and enhances the organization and presentation of data.

Properties​

PropertiesDescription
Link to a containerlink the Tabs component to a specific container, enabling seamless navigation between tabs and the associated content.
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or value change.
Disableddisable specific tabs, preventing users from interacting with them
Tooltipadditional information or context about each tab
Layoutoffers different layout options, allowing you to arrange the tabs horizontally or vertically based on your design preferences or the available space.
Alignalign the Tabs component to different positions within its parent container, such as left, center, or right alignment
Hiddenhide specific tabs programmatically.
Text Colorscustomizable text colors, allowing you to style the tab labels with different colors to match your application's design or branding.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
alignalignment of the tabs within the component, such as left, center, or right alignment
colorSchemedefines the color of the text in the component
currentIndexrepresents the index of the currently selected tab within the tab list
currentKeyunique identifier or key of the currently selected tab
displayNamerepresents the name or label assigned to the component
hiddenboolean value that determines whether the tabs component is visible or hidden
linkWidgetDisplayNamedisplay name or label of the link widget associated with a particular tab
navigateContainercontainer or destination where the tab content should be displayed or navigated to
tabListlist of tabs, including their display names, keys, and other relevant information
tabPositionposition of the tab strip, such as top, bottom, left, or right position
tooltipTexttext displayed as a tooltip when the user hovers over a specific tab
viewListviews or content associated with each tab, enabling the rendering of different content based on the selected tab

Example: {{tabs1.displayName}}

Use case​

We will demonstrate how to use tabs component combined with a container component to show the three views.

Step 1 Add and configure Components​

Add a container component and a tabs component. In the inspect page of the tabs component, turn Link to a Container on and choose the container you want to link with for **Container**.

  • View 1:

This is the home page, thus we place a text component with "Home" on the upper left corner of the container.

Display a text component "Hi! Welcome to my personal website" in the middle and a button component labeled "Learn more about me" under it.

For the button component, we can configure it to go to the next view (view2) if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the container component that you want to update as the target of the event.
  3. Choose the showNextView method.

tab_view1

  • View 2:

This is the about page, thus we place a text component with "About me" on the upper left corner of the container.

Display the "name", "age", and "gender" information with text components and a profile picture of you or anyone you want to use with the **image** component.

Add a button component labeled "Make friends with me".

For the button component, we can configure it to go to the next view (view3) if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the container component that you want to update as the target of the event.
  3. Choose the showNextView method.

tab_view2

  • View 3

This is the form page, visitor can fill out the form with their information to send a friend request to the owner.

There is a form component in the middle of the container with input components labeled as "Your name", "Your age", and "Gender".

Change the text of the "submit" button in the bottom right corner to "Invite".

tab_view3

For the "Invite" button component, we can configure it to submit the information in the form if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method.

For the form component, we can configure it to show notification if submit.

  1. Click the form component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select submit in Event, select Show notification in action, Put "Submit successfully" for Title, "Friend request sent" for Description, and select Success for Type. We want the notification to show for 2s so put {{2000}} for the duration.

tab_form_event

Step 2 Test​

tab_test

- - +

Tabs

What is Tabs?​

The Tabs component in ILLA Cloud is a versatile feature that allows users to organize and present content in a tabbed layout. It enables the creation of multiple tabs within a single container, allowing users to switch between different sections of content with ease. The Tabs component provides a user-friendly interface for navigating through related information, improving the overall user experience. With customizable styling options and the ability to add various types of content, such as text, images, or embedded components, the Tabs component in ILLA Cloud offers flexibility and enhances the organization and presentation of data.

Properties​

PropertiesDescription
Link to a containerlink the Tabs component to a specific container, enabling seamless navigation between tabs and the associated content.
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or value change.
Disableddisable specific tabs, preventing users from interacting with them
Tooltipadditional information or context about each tab
Layoutoffers different layout options, allowing you to arrange the tabs horizontally or vertically based on your design preferences or the available space.
Alignalign the Tabs component to different positions within its parent container, such as left, center, or right alignment
Hiddenhide specific tabs programmatically.
Text Colorscustomizable text colors, allowing you to style the tab labels with different colors to match your application's design or branding.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
alignalignment of the tabs within the component, such as left, center, or right alignment
colorSchemedefines the color of the text in the component
currentIndexrepresents the index of the currently selected tab within the tab list
currentKeyunique identifier or key of the currently selected tab
displayNamerepresents the name or label assigned to the component
hiddenboolean value that determines whether the tabs component is visible or hidden
linkWidgetDisplayNamedisplay name or label of the link widget associated with a particular tab
navigateContainercontainer or destination where the tab content should be displayed or navigated to
tabListlist of tabs, including their display names, keys, and other relevant information
tabPositionposition of the tab strip, such as top, bottom, left, or right position
tooltipTexttext displayed as a tooltip when the user hovers over a specific tab
viewListviews or content associated with each tab, enabling the rendering of different content based on the selected tab

Example: {{tabs1.displayName}}

Use case​

We will demonstrate how to use tabs component combined with a container component to show the three views.

Step 1 Add and configure Components​

Add a container component and a tabs component. In the inspect page of the tabs component, turn Link to a Container on and choose the container you want to link with for **Container**.

  • View 1:

This is the home page, thus we place a text component with "Home" on the upper left corner of the container.

Display a text component "Hi! Welcome to my personal website" in the middle and a button component labeled "Learn more about me" under it.

For the button component, we can configure it to go to the next view (view2) if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the container component that you want to update as the target of the event.
  3. Choose the showNextView method.

tab_view1

  • View 2:

This is the about page, thus we place a text component with "About me" on the upper left corner of the container.

Display the "name", "age", and "gender" information with text components and a profile picture of you or anyone you want to use with the **image** component.

Add a button component labeled "Make friends with me".

For the button component, we can configure it to go to the next view (view3) if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the container component that you want to update as the target of the event.
  3. Choose the showNextView method.

tab_view2

  • View 3

This is the form page, visitor can fill out the form with their information to send a friend request to the owner.

There is a form component in the middle of the container with input components labeled as "Your name", "Your age", and "Gender".

Change the text of the "submit" button in the bottom right corner to "Invite".

tab_view3

For the "Invite" button component, we can configure it to submit the information in the form if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method.

For the form component, we can configure it to show notification if submit.

  1. Click the form component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select submit in Event, select Show notification in action, Put "Submit successfully" for Title, "Friend request sent" for Description, and select Success for Type. We want the notification to show for 2s so put {{2000}} for the duration.

tab_form_event

Step 2 Test​

tab_test

+ + \ No newline at end of file diff --git a/zh/terms-of-service/index.html b/zh/terms-of-service/index.html index 4c84b234e4..91b89cf7c7 100644 --- a/zh/terms-of-service/index.html +++ b/zh/terms-of-service/index.html @@ -10,18 +10,18 @@ - - + +
-

Terms of Service

Last updated: 2022-10-10

Thanks for using ILLA.

These Terms of Service govern your access to, and use of, our Site, and our provision of a variety of services.

  1. We’ll refer to these Terms of Service as the “Terms”, and to our website as the “Site”.

  2. We’ll refer to ILLA as “ILLA” or “we” or “us” or “our”.

  3. We’ll refer to all the services we provide, individually and collectively, and including our +

    Terms of Service

    Last updated: 2022-10-10

    Thanks for using ILLA.

    These Terms of Service govern your access to, and use of, our Site, and our provision of a variety of services.

    1. We’ll refer to these Terms of Service as the “Terms”, and to our website as the “Site”.

    2. We’ll refer to ILLA as “ILLA” or “we” or “us” or “our”.

    3. We’ll refer to all the services we provide, individually and collectively, and including our Product, as the “Services”.

    4. We’ll refer to you, the person or entity agreeing to these Terms, as “you” or “your”, and (if you are a purchaser of our Services), our “customer”.

    Agreement to Terms​

    By accessing or using the Site, and/or using a Service (including a Product), you agree to these Terms.

    Changes to Terms or Services​

    We may modify the Terms at any time. If we do so, we’ll let you know either by posting the modified Terms on the Site, or through other communications. If you continue to use the Site and the Services after we’ve let you know that the Terms have been modified, you are indicating to us that you agree to be bound by the modified Terms, and to license our Products as further detailed below.

    Your Right to Use the Site; Your Restrictions​

    1. Things you can do. Subject to your compliance with these Terms, ILLA grants you a personal, limited, non-exclusive, non-transferable, non-sublicenseable license to electronically access and use the Site solely as provided for in these Terms.

    2. Things you can’t do. You will not (and you will not allow any other person to) do any of the following:

    i. circumvent or manipulate the ILLA fee structure, billing process, or other fees owed to ILLA;

    ii. access or attempt to access any other ILLA systems, programs, data or accounts that are not made available for public or your use;

    iii. except as allowed with respect to backups of your data, copying, reproducing, republishing, uploading, posting, transmitting, reselling or distributing in any way any material from the Site;

    iv. work around any technical limitations in the Site, use any tool to enable features or functionalities that are otherwise disabled in the Site, or decompile, disassemble, or otherwise reverse engineer the Site except as otherwise permitted by applicable law;

    v. perform or attempt to perform any actions that would interfere with the proper working of the Site, prevent access to or the use of the Site by ILLA’s other licensees or customers, or impose an unreasonable or disproportionately large load on ILLA’s infrastructure;

    vi. frame or utilize framing techniques to enclose any trademark, logo, or other proprietary information (including images, text, page layout, or form) of ILLA or the Site or use any ILLA trademark or service marks, unless authorized to do so in writing by ILLA;

    vii. attempt to access or search the Site or download content from the Site through the use of any engine, software, tool, agent, device or mechanism (including spiders, robots, crawlers, data mining tools or the like) other than the software and/or search agents provided by ILLA or other generally available third-party web browsers;

    viii. impersonate or misrepresent your affiliation with any person or entity;

    ix. otherwise use the Site except as expressly allowed under the Terms.

    The license granted in these Terms does not include any right of resale of any ILLA Product or Service; or any collection and use of any service listings, descriptions, or prices; any derivative use of any ILLA Service or its contents. No ILLA Service may be reproduced, duplicated, copied, sold, resold, visited, or otherwise exploited for any commercial purpose without express written consent of ILLA. The licenses granted by ILLA terminate if you do not comply with these Terms of Use.

    Intellectual Property Rights​

    1. ILLA’s (and its licensors’) Ownership of IP. The content, organization, graphics, design, compilation, know-how, concepts, methodologies, procedures, magnetic translation, digital conversion and other matters related to the Site are protected under applicable copyrights, trademarks and other proprietary rights. Some of the content on the Site may be the copyrighted work of third parties. ILLA, the ILLA logo, and other ILLA trademarks, service marks, graphics, and logos used in connection with the Service are trademarks or registered trademarks of ILLA. Other trademarks, service marks, graphics, and logos used in connection with the Service may be the trademarks of their respective owners. In addition, the Product and Documentation contain proprietary and confidential information of ILLA and its licensors. ILLA and its licensors exclusively own all rights, title and interest in and to any software programs, tools, utilities, processes, inventions, devices, methodologies, specifications, documentation, techniques and materials of any kind used or developed by ILLA or its personnel in connection with the Products and performing the Services (collectively “ILLA Materials”), including all worldwide patent rights, copyright rights, trade secret rights, know-how and any other intellectual property rights (“Intellectual Property Rights”) therein. You will have no rights in any trademarks, the ILLA Materials or the Site except as expressly set forth in these Terms.

    2. Your Ownership of IP. For purposes of these Terms, “Customer Data” means all non-public data provided by you to the us to enable provision of the Services. You own all right, title and interest in and to your Customer Data.

    Use of the Services; Providing Us Information​

    1. You’ll Start by Creating an Account; Information You Must Provide. You will need to register with ILLA to become a Customer. You agree to provide accurate, complete registration information, and to will keep that information current. You agree that ILLA may store and use your registration information to maintain your account.

    2. Information You Must NOT Provide; DISCLAIMERS.

    i. Confidential Information of Third Parties. Despite anything to the contrary in these Terms, under no circumstances will you upload to the Site or otherwise provide to ILLA any data or information (including but not limited to third-party product or pricing information) which you are restricted from disclosing pursuant to any confidentiality (or similar) agreement with any third party. ILLA EXPRESSLY DISCLAIMS ALL LIABILITY WITH RESPECT TO ANY SUCH THIRD-PARTY CONFIDENTIAL INFORMATION.

    ii. Personal Data. Despite anything to the contrary in these Terms, under no circumstances will you upload to the Site or otherwise provide to ILLA any sensitive data or information including, without limitation, (1) protected health information regulated under the Health Insurance Portability and Accountability Act of 1996 and related regulations (“HIPAA”) or the Health Information Technology for Economic and Clinical Health Act (“HITECH Act”); (2) “cardholder data” as defined under the Payment Card Industry Data Security Standard (PCI DSS); or (3) “nonpublic personal information” as defined under the GrammLeach-Bliley Act of 1999, in each case as such Acts and standards have been or may be supplemented and amended from time to time. ILLA EXPRESSLY DISCLAIMS ALL LIABILITY WITH RESPECT TO ANY SUCH DATA. If you would like to use ILLA with such data, we recommend you use the self-hosted version of ILLA, which can be air-gapped.

    How We’ll Use Your Information; Our Privacy Policy​

    Your Privacy is Important to ILLA. Protecting your privacy is really important to us. With this in mind, we will protect your personal information in accordance with our Privacy Policy.

    Data Security; Disclaimer​

    1. The Security of Your Information is Important to ILLA. ILLA takes reasonable administrative, physical and electronic measures designed to protect from unauthorized access, use or disclosure of the information that we collect from you. ILLA servers are located in professional and secure hosting facilities designed to host servers with protection from unwanted attacks over the Internet and physical attacks to the building or server itself. In particular, illacloud.com's servers are in a private network with a dedicated firewall, and are protected by round-the-clock interior and exterior surveillance. For physical security, our data centers are all SSAE-16 and/or ISO 27001 compliant. Our software infrastructure is regularly updated with the latest security patches. Through Google authentication, we offer two-factor authentication, and all traffic between servers is encrypted as well.

    2. ILLA Backs Up Your Information. ILLA stores all data in secure locations, and performs multiple daily backups of all critical data (including the database). ILLA also tests its backups in duplicate environments on a regular basis to ensure their correctness, and to test disaster recovery scenarios. Database backups are audited daily.

    3. You Have Security Responsibilities. You agree to: (i)keep your password and online ID secure and strictly confidential, providing it only to Authorized Users of your account; (ii) instruct each person to whom you give your online ID and password that he or she is not to disclose it to any unauthorized person; (iii) notify us immediately and select a new online ID and password if you believe your password may have become known to an unauthorized person; and (iv) notify us immediately if you are contacted by anyone requesting your online ID and password. When you give someone your online ID and online password, you are authorizing that person to access and use your account, and you are responsible for any and all transactions that person performs while using your account, even those transactions that are fraudulent or that you did not intend or want performed. You agree to indemnify and hold harmless ILLA from and against any and all liability arising in any way from the access to the Site by persons to whom you have provided your online ID and/or online password. In addition, you are responsible for your information technology infrastructure, including computers, servers, software, databases, electronic systems (including database management systems) and networks, whether operated directly by you or through the use of third-party services. You agree to abide by all applicable local, state, national, and international laws and regulations in connection with using the Product, Documentation and Service, including, without limitation, all laws regarding the transmission of technical data exported from the United States through the Service and all privacy and data protection laws, rules and regulations.

    4. Some Third Parties May have Incidental Access to Your Information. ILLA works with other companies to provide information technology services to users of the Site. These companies may have access to ILLA’s databases, but only for the purposes of providing service to ILLA. For example, a third party (such as AWS) may obtain access to Your Information in an effort to update database software. These companies will operate under consumer confidentiality agreements with ILLA.

    5. The Internet is Not Guaranteed to be Safe. Please be aware that no method of transmitting information over the Internet or storing information is completely secure. Accordingly, we cannot guarantee the absolute security of any information. ILLA SHALL HAVE NO LIABILITY TO YOU FOR ANY UNAUTHORIZED ACCESS, USE, CORRUPTION OR LOSS OF ANY OF YOUR INFORMATION, EXCEPT TO THE EXTENT THAT SUCH UNAUTHORIZED ACCESS, USE, CORRUPTION, OR LOSS IS DUE SOLELY TO ILLA’S GROSS NEGLIGENCE OR MISCONDUCT.

    Ordering Products and Services from ILLA​

    1. Certain Definitions applicable to Buying Services on illacloud.com.

    i. "Member" means any individual (including your employees, agents, contractors, suppliers of services, and customers, in each case to the extent that you invite to your team such individual) who is authorized to access the apps, resources, files, or any other resources in your team or organization by you or other members in your team who have authorization capabilities like you. Each member must use a unique identity to access and use ILLA Cloud unless otherwise licensed and may access the services only to the extent licensed by you.

    ii. “Editor” means any individual (including your employees, agents, contractors, suppliers of services, and customers, in each case to the extent that your license includes, and you pay for, such individual) who is authorized to edit app(Defined as Owner, Administrator, Editor roles in ILLA Cloud) by you or other members in your team who have authorization capabilities like you. Each editor must use a unique identity to access and use ILLA Cloud unless otherwise licensed and may access the services only to the extent licensed by you.

    iii. “Delivery” means the availability of the Product and/or Documentation by us to the you via electronic or other means, without regard to when you actually install or use such Product.

    iv. “Documentation” means the instruction manuals, user guides, and other information to be made available from time to time by us to you in electronic form.

    v. “Order” is defined as the purchase of a Product (accepted by us) which you select and pay for with a valid online payment.

    vi. All references in this Agreement to “buying” or to the “sale” or “purchase” (or other similar terms) of any Subscription or Service or Product shall mean the sale or purchase of a license to such Subscription or Service or Product.

    vii. “Product” means, collectively, the product(s) set forth in any Order (to the extent such product(s) are subsequently made available to you by us), as well as any Update made available to you by us.

    viii. “Public Application” means an application that is available to the public without restriction (by password, payment, network infrastructure, or otherwise).

    ix. A “Server” means that computer device on which the Product is installed and operated. A Server may be located on your site or may be a “cloud” server located on our site or at a third party’s remote hosting site contracted for by either us or you. You agree that our third-party hosting provider meets or exceeds your standards for security and related certifications.

    x. “Specifications” means those technical specifications in respect of the Product(s) which are published by us and are in effect at the time of Delivery.

    xi. “Subscription” means licenses to the Product and Documentation. A Subscription includes access to currently supported versions of the Product for the term of the Subscription.

    xii. An “Update” means enhancements, modifications, or additions to the Product or Documentation as may be made available from time to time by us to you.

    xiii. “Use” shall mean the legal use by Customer of the Product and Documentation and/or Services in accordance with the terms and condition of these Terms and in a manner consistent with the Specifications, subject to any applicable Usage Limitation.

    2. How to Order Products. You can select Products for purchase by browsing our Product offerings on our pricing page, selecting the Product(s) you want to license, and successfully completing the payments process.

    i. An Order submitted by you to ILLA corresponding to Products for which you’ve successfully completed the payments process constitutes the agreement forILLA to provide the Products and for you to receive and pay for such Products.

    ii. ILLA shall have no responsibility to provide any Product with respect to Orders submitted where you have not successfully completed the online payments process or refunded.

    3. Your Order Cannot Contain Additional Terms or Conditions. These Terms set out the complete and exclusive statement of the contract between you and ILLA with respect to your purchase of Products. Any additional or conflicting provisions contained in an Order from you are expressly rejected.

    4. International Access. If you access and use this Site outside the United States you are responsible for complying with your local laws and regulations.

    5. Products Subscriptions; Renewals. ILLA Cloud Plus and ILLA Drive storage are licensed pursuant to Subscriptions. Subscriptions will be for the term agreed to in an applicable Order. Subscriptions will automatically renew for successive one-year or one-month terms based on the plan you subscribed to at ILLA’s then-current fees unless you provide written notice of non-renewal to us at least fourteen (14) days prior to the end of the then-current term of the applicable subscription.

    6. One-time purchase. ILLA Drive Traffic is a consumable product that cannot be restored once used. After use, you will need to continue purchasing in order to keep using it.

    7. Products are Delivered Electronically. All Products, Updates and Documentation licensed by you pursuant to these Terms will be delivered electronically (such as by electronic mail, file transfer or other means of electronic transmission, or in the case of ILLA Cloud subscriptions or purchases, by giving you access to such Products, Updates and Documentation). In the case of a renewal of a Subscription, you acknowledge and agree that there is no delivery requirement for such renewal. Such renewals shall be deemed Delivered on the first day of the then-current renewal term of the applicable Subscription.

    8. Usage Limitations. Your Subscription or purchase may be subject to Usage Limitations. Usage Limitations may include (among other things) a description of the specific product or service licensed from us, a maximum number of Authorized Users, the initial term of your Subscription, the fees you agree to pay us, a maximum amount of allotted storage, a maximum amount of traffic or other limitations. Usage Limitations applicable to your Subscription are set forth in our Product offerings on our pricing page or Product purchase page. If your use of our Services exceeds a Usage Limitation or otherwise requires the payment of additional fees, you shall be billed for such usage and you agree to pay the additional fees.

    Termination of Product Subscriptions or purchases​

    1. Termination by You or by Us. Either of us may terminate any Product Subscription under these Terms immediately if the other commits any material breach of any term of these Terms and which (in the case of a breach capable of being remedied) shall not have been remedied within thirty (30) days of a written request to remedy the breach.

    2. Termination by Us. We may terminate any Product Subscription under these Terms upon our reasonable determination that your Use of the Product or Documentation or Services (i) violates any applicable law or regulation or (ii) poses a threat to the secure or reliable provision of Services to other customers, or to the Cloud Infrastructure, or to the data contained therein.

    3. What Happens if a Product Subscription is Terminated? Any termination of any Product Subscription pursuant to these Terms shall be without prejudice to any other rights or remedies a party may be entitled to hereunder or at law and shall not affect any accrued rights or liabilities of either party nor the coming into or continuance in force of any provision hereof which is expressly or by implication intended to come into or continue in force on or after such termination. Upon termination of any Product Subscription pursuant to these Terms, you will immediately uninstall or destroy (or at our sole option) all copies of the Product and Documentation in its possession or control, and your duly authorized officer shall certify in writing to us that the you have complied with this obligation.

    Payment Terms​

    1. Invoicing and Payment. ILLA’s right to payment for any Product or Service purchased by you shall accrue on the date the Product or Service is Delivered to you. Except as otherwise expressly provided in these Terms, all payments accrued or made under these Terms are non-cancelable and nonrefundable. All stated prices are exclusive of any taxes, fees, and duties or other amounts, however designated, and including without limitation value added and withholding taxes that are levied or based upon such charges, or upon these Terms. Any taxes related to the Product, Documentation or Services purchased or licensed pursuant to these Terms including, but not limited to, withholding taxes, will be paid by you, or you will present an exemption certificate acceptable to the taxing authorities. You will not be liable for taxes based on our net income. All payments will be made in United States dollars.

    2. Your Failure to Pay or Failure to Pay on Time. If you have any outstanding balance due on your account, then we have the right to withhold Delivering any Product and Services to you until you have paid your account balance in full. If your payment is late, we may charge interest on your outstanding late balance at the rate of one and one-half percent (1.5%) per month or the maximum rate permitted by law, calculated from the date such amount was due until the date that payment is received by us. You agree to reimburse us for all reasonable costs and expenses incurred (including reasonable attorneys’ fees) in collecting any overdue amounts.

    Additional Terms Applicable to ILLA Cloud Subscriptions​

    1. Definitions Applicable to ILLA Cloud Subscriptions.

    “Cloud Infrastructure” means the Product including ILLA Builder, ILLA Drive, and the computing, storage, traffic, networking, and other hardware and software infrastructure used in providing the Services in ILLA Cloud.

    2. Hosting and Control of ILLA Cloud We may take such steps as may be necessary to prevent any person or entity, including you, from infringing on the ability of other customers to reasonably Use the Services. The method and means of providing the Services shall be under our exclusive control, management, and supervision. We will provide and operate the Services in a professional and commercially reasonable manner in accordance with applicable law.

    3. Your Obligations Related to Customer Data. You have sole responsibility for the accuracy, quality, integrity, legality, reliability, appropriateness, and intellectual property ownership or right to use the Customer Data. You will provide accurate, current and complete information required to enable your Authorized Users on the Cloud Infrastructure, and to maintain the accuracy of such information during the Use of the Product and Services. You will require Authorized Users to maintain proper password security, and for maintaining the confidentiality of your account. Without limiting any other responsibilities you have under these Terms, you are responsible for the actions of your Authorized Users, of anybody accessing the Cloud Infrastructure using the credentials of any Authorized User, and of any other individuals to whom you have given access to the Product or Services. You will not, and will not permit or enable others to, access or attempt to access any accounts or data on the Cloud Infrastructure, other than those explicitly belonging to you or provided by us for your Use.

    4. Restrictions on Your Use of the Cloud Infrastructure. You will not, and will not allow or enable any Authorized User or other person to: (1) access the Product or Services for or upload to the Cloud Infrastructure anything unlawful, misleading, malicious or discriminatory; (2) use any tool to enable features or functionality that are otherwise disabled in the Cloud Infrastructure, or decompile, disassemble or otherwise reverse engineer the Cloud Infrastructure; (3) perform or attempt to perform any actions that would interfere with the proper working of the Cloud Infrastructure, prevent access to or use of the Cloud Infrastructure by our other customers; or (4) upload or transmit to the Cloud Infrastructure any device, software or routine that contains any computer programming routine that may damage, interfere or attempt to interfere with, or intercept the normal operation of the Cloud Infrastructure.

    5. Your License Grant to Us Related to Customer Data. You grant to us a license store, record, transmit, maintain, and display the Customer Data only to the extent necessary to carry out its obligations under these Terms.

    6. Storage and Backups. We regularly back up the database used in conjunction with the Services. We will make a commercially reasonable effort to assist in restoring lost data; however, we do not guarantee that every backup will complete without error, that we will be able to restore any specific data, or that we will retain any backup for longer than thirty (30) days.

    Refund Terms​

    If you are not satisfied with our product, you can apply for a refund after payment has been made. If you require a refund, please contact business@illasoft.com.

    1. Regarding refunds for ILLA Cloud Plus subscriptions. You can apply for a refund in writing within 7 days of payment. Once we receive your application, we will process a full refund within 14 days.

    2. Regarding refunds for ILLA Drive Storage subscriptions. You can apply for a refund in writing within 7 days of payment. Once we receive your application, we will process a refund for the remaining balance within 14 days, calculated based on your actual usage.

    3. Regarding refunds for the purchase of ILLA Drive Traffic. You can apply for a refund in writing within 7 days of payment. Once we receive your application, we will process a refund for the remaining balance within 14 days, calculated based on your actual usage.

- - + + \ No newline at end of file diff --git a/zh/text-area-input/index.html b/zh/text-area-input/index.html index 2f10407add..9af6e26586 100644 --- a/zh/text-area-input/index.html +++ b/zh/text-area-input/index.html @@ -10,13 +10,13 @@ - - + +
-

Text area input

What is Text Area Input?​

The Text area input component is a user interface element that allows users to enter and edit the the text area in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Regexspecify a regular expression pattern that the input value must match
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
Heightspecify the vertical size or height of the input field
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the text area input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit focusing on component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
dynamicHeightallows the height of the text area to adjust dynamically based on the content entered by the user.
eventsgenerated or triggered when certain actions or events occur
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
resizeDirectionallows you to control the resizing behavior of the text area
regexapply pattern-based validation to the input text in the text area
tooltipTextvalue of tooltip text

Example: {{textarea1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to the Text area input with a button.

Step 1 Add an action​

Let us create a table in Supabase called Project. There are two attributes in Project: id and name. The name is the value we want to map to our text area input.

Then we can create a new action for Supabase from the action list, listing all the data in project and names as supabasedb2.

Click Save and Run to activate this action.

text_area_data

Step 2 Add Components​

Next, we can add a text area input component and a button component to the canvas.

We set the default value of text area to be 'None' and labeled the button as 'Set value' as shown below

text_area_look

Step 3 Configure the component​

For the button component, we can configure it to set the value in text area input component to the data of the document we read from supabasedb2.

  1. In the Edit event handler, select Control component in action, and select the textarea1 component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

text_area_config

Step 4 Test​

Now that when you click the 'Set value' button, the value should change to the names.

text_area_test

- - +

Text area input

What is Text Area Input?​

The Text area input component is a user interface element that allows users to enter and edit the the text area in a form or input field.

Properties​

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Show character countcontrol whether or not the character count of the input is displayed
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Regexspecify a regular expression pattern that the input value must match
Max lengthset the maximum number of characters that can be entered into the input field.
Min Lengthspecify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
Heightspecify the vertical size or height of the input field
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Method​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{'value1'}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • focus

When the focus method is called, the text area input field will be highlighted and ready for the user to start typing without the need for the user to click on the number input field

Event handler​

EventDescription
ChangeWhen a user changes the input value
FocusWhen a user moves the mouse cursor on the input component
BlurWhen a user is done inputting value and quit focusing on component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valueuser input value
colorSchemebackground color of the button
customRuleuser-defined rule or validation logic that can be applied to the number input component
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
dynamicHeightallows the height of the text area to adjust dynamically based on the content entered by the user.
eventsgenerated or triggered when certain actions or events occur
formDataKeythe Form Data Key of input
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxLengththe value of maximum length
minLengththe value of minimum length
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
resizeDirectionallows you to control the resizing behavior of the text area
regexapply pattern-based validation to the input text in the text area
tooltipTextvalue of tooltip text

Example: {{textarea1.value}}

Use case​

Next, we will demonstrate how to map the data from the data source to the Text area input with a button.

Step 1 Add an action​

Let us create a table in Supabase called Project. There are two attributes in Project: id and name. The name is the value we want to map to our text area input.

Then we can create a new action for Supabase from the action list, listing all the data in project and names as supabasedb2.

Click Save and Run to activate this action.

text_area_data

Step 2 Add Components​

Next, we can add a text area input component and a button component to the canvas.

We set the default value of text area to be 'None' and labeled the button as 'Set value' as shown below

text_area_look

Step 3 Configure the component​

For the button component, we can configure it to set the value in text area input component to the data of the document we read from supabasedb2.

  1. In the Edit event handler, select Control component in action, and select the textarea1 component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

text_area_config

Step 4 Test​

Now that when you click the 'Set value' button, the value should change to the names.

text_area_test

+ + \ No newline at end of file diff --git a/zh/text/index.html b/zh/text/index.html index 133d493b0a..1dabd8871c 100644 --- a/zh/text/index.html +++ b/zh/text/index.html @@ -10,13 +10,13 @@ - - + +
-

Text

Properties​

PropertyDescription
ContentSet the text displayed on Text component. Markdown and plain text are supported.
TooltipA tooltip displayed on the component when users hover over the component.
Horizontal alignmentTo set the horizontal position of the text content in the component
Vertical alignmentTo set the vertial position of the text content in the component
HiddenTo set whether to display this component and under what conditions to display it. For example, if the current user is not User A, this component should be hidden: {{ currentUserInfo.nickname != 'User A' }}
ColorTo set the text color in paint text format
Text sizeTo set the text size in paint text format

Use Markdown​

Headline​

# Heading 1
## Heading 2
### Heading 3

Bold & Italics​

**Bold**
*Italics*

To-do list​

### To-do list

1. [ ] 🚀 Build a new app on ILLA Cloud
2. [ ] ☎️ Call with Monica
3. [x] 🍷 Have dinner with **Elsa**
4. [x] 💃 Play `Just dance` for half an hour

Bulleted list​

### Bulleted list
- Real-time Collaboration: We can create everything in real-time together.
- 🛠 Custom Plugin: Build any custom plugin to do what you want.
- 🤖 Automate Support: Connect everything and automate them in 5 seconds.
- 🖥 Self-hosted: supports Docker & k8s

Table​

### Table
| Name        | Link   |  Description  |
| :--------  | :-------  | :----  |
| ILLA Cloud | [https://cloud.illacloud.com/](https://cloud.illacloud.com/) |Build apps on ILLA Cloud|
| ILLA GitHub | [https://github.com/illacloud/illa-builder](https://github.com/illacloud/illa-builder) |Star us on GitHub|
| ILLA homepage | [https://www.illacloud.com/](https://www.illacloud.com/) |ILLA Cloud Offical website

Display dynamic data​

Use {{ to get data from other components or actions or global variables. For example, to display the nickname of current user:

## {{ '👋 Hello! '+ currentUserInfo.nickname }}
- - +

Text

Properties​

PropertyDescription
ContentSet the text displayed on Text component. Markdown and plain text are supported.
TooltipA tooltip displayed on the component when users hover over the component.
Horizontal alignmentTo set the horizontal position of the text content in the component
Vertical alignmentTo set the vertial position of the text content in the component
HiddenTo set whether to display this component and under what conditions to display it. For example, if the current user is not User A, this component should be hidden: {{ currentUserInfo.nickname != 'User A' }}
ColorTo set the text color in paint text format
Text sizeTo set the text size in paint text format

Use Markdown​

Headline​

# Heading 1
## Heading 2
### Heading 3

Bold & Italics​

**Bold**
*Italics*

To-do list​

### To-do list

1. [ ] 🚀 Build a new app on ILLA Cloud
2. [ ] ☎️ Call with Monica
3. [x] 🍷 Have dinner with **Elsa**
4. [x] 💃 Play `Just dance` for half an hour

Bulleted list​

### Bulleted list
- Real-time Collaboration: We can create everything in real-time together.
- 🛠 Custom Plugin: Build any custom plugin to do what you want.
- 🤖 Automate Support: Connect everything and automate them in 5 seconds.
- 🖥 Self-hosted: supports Docker & k8s

Table​

### Table
| Name        | Link   |  Description  |
| :--------  | :-------  | :----  |
| ILLA Cloud | [https://cloud.illacloud.com/](https://cloud.illacloud.com/) |Build apps on ILLA Cloud|
| ILLA GitHub | [https://github.com/illacloud/illa-builder](https://github.com/illacloud/illa-builder) |Star us on GitHub|
| ILLA homepage | [https://www.illacloud.com/](https://www.illacloud.com/) |ILLA Cloud Offical website

Display dynamic data​

Use {{ to get data from other components or actions or global variables. For example, to display the nickname of current user:

## {{ '👋 Hello! '+ currentUserInfo.nickname }}
+ + \ No newline at end of file diff --git a/zh/tidb/index.html b/zh/tidb/index.html index b45fe17487..8d1cd525a2 100644 --- a/zh/tidb/index.html +++ b/zh/tidb/index.html @@ -10,13 +10,13 @@ - - + +
-

TiDB

TiDB is a database integration that allows you to connect and interact with a TiDB database. It is a distributed, horizontally scalable relational database management system that is designed to handle high-volume, high-concurrency workloads.

With the TiDB integration in Illa, you can query, update, and delete data from a TiDB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a TiDB database.

Create TiDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select TiDB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready TiDB will display as shown.

ti_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select TiDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to TiDB database.

ti_config

ti_config_1

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '4000'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the TiDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.
CA Certificaterequireda digital certificate that is used to verify the identity of a server and establish a secure, encrypted connection between a client and a TiDB cluster. If you don't specify it, we have filled in a default certificate for you.
Client Keyoptionala parameter that is used to establish a secure connection between the TiDB client and the TiDB server.
Client Certificateoptionala security feature that allows a client to authenticate itself to a TiDB server

Create Actions​

We have created a TiDB resource, we can add the action by selecting TiDB from action list and choosing the Create action button.

ti_resource_list

Now we have added the TiDB server as an action to our building page.

ti

Configure TiDB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
- - +

TiDB

TiDB is a database integration that allows you to connect and interact with a TiDB database. It is a distributed, horizontally scalable relational database management system that is designed to handle high-volume, high-concurrency workloads.

With the TiDB integration in Illa, you can query, update, and delete data from a TiDB database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a TiDB database.

Create TiDB​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select TiDB from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready TiDB will display as shown.

ti_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select TiDB from the database list. Then, connect to the database with required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to TiDB database.

ti_config

ti_config_1

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '4000'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the TiDB server.
PasswordrequiredUse this password for authentication.
SSL optionsoptionaldecides how high a secure SSL TCP/IP connection is prioritized while negotiating with the server.
CA Certificaterequireda digital certificate that is used to verify the identity of a server and establish a secure, encrypted connection between a client and a TiDB cluster. If you don't specify it, we have filled in a default certificate for you.
Client Keyoptionala parameter that is used to establish a secure connection between the TiDB client and the TiDB server.
Client Certificateoptionala security feature that allows a client to authenticate itself to a TiDB server

Create Actions​

We have created a TiDB resource, we can add the action by selecting TiDB from action list and choosing the Create action button.

ti_resource_list

Now we have added the TiDB server as an action to our building page.

ti

Configure TiDB​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using Javascript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first}}'
  WHERE id = {{ form1.updatedProfile.uid}};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};
+ + \ No newline at end of file diff --git a/zh/time-picker/index.html b/zh/time-picker/index.html index 9e54d0504f..3f315739d3 100644 --- a/zh/time-picker/index.html +++ b/zh/time-picker/index.html @@ -10,13 +10,13 @@ - - + +
-

Time Picker

What is Time Picker?​

Time picker component is a UI component that allows users to select a specific time from a 24-hour interface, typically used in forms or data entry interfaces where the user needs to specify a specific time.

When a Time picker component is added to canvas, it displays a 24-hour interface that shows hours, minutes, and seconds. The user can adjust the time by moving the mouse cursor or using the up and down arrows.

Properties​

Time picker's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input time value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
minuteStepminute step size value
placeholderplaceholder value
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput date and time value

Example: {{timePicker1.format}}

Use case​

Next, we will demonstrate how to map the data from the data source to time picker and set to current time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a time picker component and a button component to the canvas. For default value of the time component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Now" as shown below

time_picker_0

Step 3 Configure the component​

For the button component, we can configure it to set the date in time picker component to current date and time.

  1. In the Edit event handler, select Control component in action, select the time picker component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

time_picker_config

Step 4 Test​

Now that when you click the "Now" button, the time should change to current time. As for here, we have 20:03:05 but it may be different when you are testing it.

time_picker_1

- - +

Time Picker

What is Time Picker?​

Time picker component is a UI component that allows users to select a specific time from a 24-hour interface, typically used in forms or data entry interfaces where the user needs to specify a specific time.

When a Time picker component is added to canvas, it displays a 24-hour interface that shows hours, minutes, and seconds. The user can adjust the time by moving the mouse cursor or using the up and down arrows.

Properties​

Time picker's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
TooltipUser can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following four methods:

  • setValue

To set the input time value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
minuteStepminute step size value
placeholderplaceholder value
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput date and time value

Example: {{timePicker1.format}}

Use case​

Next, we will demonstrate how to map the data from the data source to time picker and set to current time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a time picker component and a button component to the canvas. For default value of the time component, we set it up as the last update time of first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].updatedAt}}

We also labeled the button as "Now" as shown below

time_picker_0

Step 3 Configure the component​

For the button component, we can configure it to set the date in time picker component to current date and time.

  1. In the Edit event handler, select Control component in action, select the time picker component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

time_picker_config

Step 4 Test​

Now that when you click the "Now" button, the time should change to current time. As for here, we have 20:03:05 but it may be different when you are testing it.

time_picker_1

+ + \ No newline at end of file diff --git a/zh/time-range/index.html b/zh/time-range/index.html index abd894d523..ed00ad2f6b 100644 --- a/zh/time-range/index.html +++ b/zh/time-range/index.html @@ -10,13 +10,13 @@ - - + +
-

Time range

Time Range component is a UI component that allows users to select a range of times from a 24-hour interface, typically used in forms or data entry interfaces where the user needs to specify a start and end time range.

When a Time Range component is added to canvas, it displays two 24-hour interfaces side by side. One interface is used to select the start time, while the other is used to select the end time. The user can adjust the time by moving the mouse cursor or using the up and down arrows.

Properties​

Time Range's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Start timeThe default start time value of the component
End timeThe default end time value of the component
FormatA valid date format string. See https://day.js.org/docs/en/parse/string-format.
Start PlaceholderThe value will be shown when the start time input field is empty.
End PlaceholderThe value will be shown when the end time input field is empty.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following two methods:

  • setStartTime

To set the start date value, for example, {{"value1"}}

PropertiesDescription
ValueInput start time value
  • setEndTime

To set the end date value, for example, {{"value2"}}

PropertiesDescription
ValueInput end time value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie cascader1)
startTimestart time value
endTimeend time value
startPlaceholderplaceholder value for start time
endPlaceholderplaceholder value for end time
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddena Boolean value indicate the hidden status of button
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
minuteStepminute step size value
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
valueSelected value

Example: {{rangeTime1.value[0]}}

Use case​

Next, we will demonstrate how to map the data from the data source to time range and set end value to current time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the startedAt and expiredAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a time range component and a button component to the canvas. For default start time value of the date range component, we use the startedAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].startedAt}}

Similarly, for default end time value, we use expiredAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].expiredAt}}

We also labeled the button as "Now" as shown below.

time_range_0

Step 3 Configure the component​

For the button component, we can configure it to set the end date value in time range component to today's date.

  1. In the Edit event handler, select Control component in action, select the time range component that you want to update as the target of the event.
  2. Choose the setEndTime action and set the End time as {{currentUserInfo.updatedAt}}

time_range_config

Step 4 Test​

Now that when you click the "Now" button, the end time should change to today's date. As for here, we have 20:03:05 but it may be different when you are testing it.

time_range_1

- - +

Time range

Time Range component is a UI component that allows users to select a range of times from a 24-hour interface, typically used in forms or data entry interfaces where the user needs to specify a start and end time range.

When a Time Range component is added to canvas, it displays two 24-hour interfaces side by side. One interface is used to select the start time, while the other is used to select the end time. The user can adjust the time by moving the mouse cursor or using the up and down arrows.

Properties​

Time Range's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Start timeThe default start time value of the component
End timeThe default end time value of the component
FormatA valid date format string. See https://day.js.org/docs/en/parse/string-format.
Start PlaceholderThe value will be shown when the start time input field is empty.
End PlaceholderThe value will be shown when the end time input field is empty.
Step sizethe step size in unit of minutes
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Methods​

You can use other components to control the component. We support the following two methods:

  • setStartTime

To set the start date value, for example, {{"value1"}}

PropertiesDescription
ValueInput start time value
  • setEndTime

To set the end date value, for example, {{"value2"}}

PropertiesDescription
ValueInput end time value
  • clearValue

To clear the value of the selected component

  • validate

To verify that the input information is legal

  • clearValidate

To clear the validation message

Event handler​

EventDescription
ChangeWhen a user changes the selected time value, perform specific action customized by users.

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie cascader1)
startTimestart time value
endTimeend time value
startPlaceholderplaceholder value for start time
endPlaceholderplaceholder value for end time
eventsan Array value for sequence of events
formatthe formate of date and time
formDataKeythe Form Data Key of Date
hiddena Boolean value indicate the hidden status of button
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of cascader label (left or right)
labelPositionposition of cascader label (left or right)
labelWidththe integer representing width of label
minuteStepminute step size value
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
valueSelected value

Example: {{rangeTime1.value[0]}}

Use case​

Next, we will demonstrate how to map the data from the data source to time range and set end value to current time with a button.

Step 1 Add an action​

Let us create a table in REST API called promoteCodes, including 6 columns:  code,  id, createdAt, expiredAt, startedAt, updatedAt. We will use the startedAt and expiredAt time for sample use.

Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.

Click Save and Run to activate this action.

Step 2 Add Components​

Next, we can add a time range component and a button component to the canvas. For default start time value of the date range component, we use the startedAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].startedAt}}

Similarly, for default end time value, we use expiredAt time of the first promote code from the rest api data.

{{restapi1.data.promoteCodes[0].expiredAt}}

We also labeled the button as "Now" as shown below.

time_range_0

Step 3 Configure the component​

For the button component, we can configure it to set the end date value in time range component to today's date.

  1. In the Edit event handler, select Control component in action, select the time range component that you want to update as the target of the event.
  2. Choose the setEndTime action and set the End time as {{currentUserInfo.updatedAt}}

time_range_config

Step 4 Test​

Now that when you click the "Now" button, the end time should change to today's date. As for here, we have 20:03:05 but it may be different when you are testing it.

time_range_1

+ + \ No newline at end of file diff --git a/zh/timeline/index.html b/zh/timeline/index.html index 26fc78b0e6..81efdeccdd 100644 --- a/zh/timeline/index.html +++ b/zh/timeline/index.html @@ -10,13 +10,13 @@ - - + +
-

Timeline

A timeline component is a graphical representation of events or data points arranged chronologically along a horizontal or vertical axis. It allows users to visualize and navigate through a series of events or milestones in a linear fashion.

Properties​

Timeline's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Itemsthe collection of individual events or data points that are displayed on the timeline
Directionthe orientation or layout of the timeline component (horizontal or vertical)
Pendingthe status of an item in the timeline
Heightvertical size or height of the timeline component
Hiddenwhether the timeline component is visible or hidden

Methods​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
directionorientation or layout of the timeline
dynamicHeightthe ability to adjust the height of the timeline dynamically based on its content or other factors.
displayNamethe name of this component (ie timeline1)
hiddenwhether the timeline component is visible or hidden
itemsthe collection of individual events or data points displayed on the timeline
pendingthe status of an item in the timeline
resizeDirectionthe direction in which the timeline component can be resized by the user

Example: {{timeline1.items}}

Use case​

Next, we will demonstrate how to map the data from the data source to the timeline component.

Step 1 Add an action​

Let us create a table in Supabase called timeline, including only 1 columns:  milestones. There are 4 milestones we want to map to the timeline component.

Then we can create a new action for Supabase from the action list and named supabasedb1.

To list all data in milestone, put the code snippet below in the SQL query section.

select * from timeline;

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const transformedData = data.map((obj) => Object.values(obj)[0]);
return transformedData;

Click Save and Run to activate this action.

timeline_data

Step 2 Add Components​

Next, we can add a timeline component to the canvas.

In the **Items** field in the Inspect page after clicking on the component, put {{supabasedb1.data}} to retrieve the data from supabase.

Step 3 Test​

The final look should be as shown.

timeline_test

- - +

Timeline

A timeline component is a graphical representation of events or data points arranged chronologically along a horizontal or vertical axis. It allows users to visualize and navigate through a series of events or milestones in a linear fashion.

Properties​

Timeline's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Itemsthe collection of individual events or data points that are displayed on the timeline
Directionthe orientation or layout of the timeline component (horizontal or vertical)
Pendingthe status of an item in the timeline
Heightvertical size or height of the timeline component
Hiddenwhether the timeline component is visible or hidden

Methods​

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
directionorientation or layout of the timeline
dynamicHeightthe ability to adjust the height of the timeline dynamically based on its content or other factors.
displayNamethe name of this component (ie timeline1)
hiddenwhether the timeline component is visible or hidden
itemsthe collection of individual events or data points displayed on the timeline
pendingthe status of an item in the timeline
resizeDirectionthe direction in which the timeline component can be resized by the user

Example: {{timeline1.items}}

Use case​

Next, we will demonstrate how to map the data from the data source to the timeline component.

Step 1 Add an action​

Let us create a table in Supabase called timeline, including only 1 columns:  milestones. There are 4 milestones we want to map to the timeline component.

Then we can create a new action for Supabase from the action list and named supabasedb1.

To list all data in milestone, put the code snippet below in the SQL query section.

select * from timeline;

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const transformedData = data.map((obj) => Object.values(obj)[0]);
return transformedData;

Click Save and Run to activate this action.

timeline_data

Step 2 Add Components​

Next, we can add a timeline component to the canvas.

In the **Items** field in the Inspect page after clicking on the component, put {{supabasedb1.data}} to retrieve the data from supabase.

Step 3 Test​

The final look should be as shown.

timeline_test

+ + \ No newline at end of file diff --git a/zh/transformer/index.html b/zh/transformer/index.html index 1701c83603..10ea108a3b 100644 --- a/zh/transformer/index.html +++ b/zh/transformer/index.html @@ -10,13 +10,13 @@ - - + +
-

Transformer

We have put a Transformer in ILLA to meet your requirements for writing JavaScript to refine your application logic. In the Transformer, you don't need to code in JavaScript using {{template syntax}} as you do in the character input box, so that you can write long and complex blocks of JS code more fluently. In addition, the Transformer helps developers responsible for page design and logic building to complete their development work more efficiently without being constrained by each other's progress.

You can use the Transformer not only for established data operations but also for creating transformer operations when transforming data. It would be better to choose an independent transformer when you have multiple operations involved in transforming data, or need to use complex JavaScript logic to transform data.

Creative Transformers​

Click on the Transformers tab in the Action list, and click on "+ New" to create a transformer. It will be displayed in the action list after creation. You can change the name, write JS code, save and run it in the configuration panel after selection.

You can use the 'preview' button to see the results of a transformer. Note that you have to save the transformer for the rest of the app to get the new value.

The insert calls the transformer with a value equal to the data returned within the transformer, this data will change as the data entered into the transformer changes with the code of the transformer. As with the character input box, you can still use the template syntax to call the global variable No. When you are writing JS code to call data, you can find the specific data variable name in the data workspace in the left hand panel to help you write code faster.

You can call the transformer variable in the data entry box by using {{transformerName. tagName}} to call the transformer variable in the data entry box.

Query Transformer​

We have put a Transformer in the query operation to allow you to transform the fetched data into the desired format directly after completing the action You can then simply pass {{actionName.data}} to retrieve the data once you have completed the conversion in the transformer within the action.

- - +

Transformer

We have put a Transformer in ILLA to meet your requirements for writing JavaScript to refine your application logic. In the Transformer, you don't need to code in JavaScript using {{template syntax}} as you do in the character input box, so that you can write long and complex blocks of JS code more fluently. In addition, the Transformer helps developers responsible for page design and logic building to complete their development work more efficiently without being constrained by each other's progress.

You can use the Transformer not only for established data operations but also for creating transformer operations when transforming data. It would be better to choose an independent transformer when you have multiple operations involved in transforming data, or need to use complex JavaScript logic to transform data.

Creative Transformers​

Click on the Transformers tab in the Action list, and click on "+ New" to create a transformer. It will be displayed in the action list after creation. You can change the name, write JS code, save and run it in the configuration panel after selection.

You can use the 'preview' button to see the results of a transformer. Note that you have to save the transformer for the rest of the app to get the new value.

The insert calls the transformer with a value equal to the data returned within the transformer, this data will change as the data entered into the transformer changes with the code of the transformer. As with the character input box, you can still use the template syntax to call the global variable No. When you are writing JS code to call data, you can find the specific data variable name in the data workspace in the left hand panel to help you write code faster.

You can call the transformer variable in the data entry box by using {{transformerName. tagName}} to call the transformer variable in the data entry box.

Query Transformer​

We have put a Transformer in the query operation to allow you to transform the fetched data into the desired format directly after completing the action You can then simply pass {{actionName.data}} to retrieve the data once you have completed the conversion in the transformer within the action.

+ + \ No newline at end of file diff --git a/zh/upload/index.html b/zh/upload/index.html index 9f34baea7c..686af3f746 100644 --- a/zh/upload/index.html +++ b/zh/upload/index.html @@ -10,14 +10,14 @@ - - + +
-

Upload

The upload component is used to allow users to upload files from their local machines to any cloud storage via API. Next, we will introduce how to configure an upload component, how to associate the upload component with a cloud storage service, how to use the upload component to select an image, and display it with an image, etc.

Properties​

PropertyDescription
TypeSet the type of upload component, including Button and Dropzone.
TextThe text shown on the upload component.
Selection typesSet the selection type to multiple files, single file, or directory.
File typesA list of file extensions allowed to upload. No value will permit all file types.
Append newly selected filesTo set the selected new file to append to the selected file or replace the selected file in the selection type of multiple files or directory.
File listTo set whether to show a list of selected files below the upload component. The height of uploader will change dynamically based on the length of the file list.
Parse ValueAttempt to parse the selected files, with support for JSON, CSV, TSV, Excel, and TXT files. Parsed data can be accessed via {{upload1.parsedValue}}. Files that can not be parsed will be null in the array. All files are available as base64 encoded strings on the value array, regardless of this option.
LoadingWhether the component should show a loading indicator.
DisabledTo set whether to disable this component and under what conditions to disable it. For example, if the input1 component is null, this component should be disabled: {{ input1.value == ‘ ’}}
TooltipA tooltip displayed on the component when users hover over the component.
Required fieldTo set whether it is required.
Min sizeTo set the minimum file size allowed to be added.
Max sizeTo set the maximum file size allowed to be added.
Custom ruleTo set the text displayed when verification fails.
Hide validation messageTo set whether to display the validation message when verification fails.
Form Data KeyTo set a key for the component. After adding this component to a form, this key will be used to identify the data of this component when submitting the form.
HiddenTo set whether to display this component and under what conditions to display it. For example, if the current user is not User A, this component should be hidden: {{ currentUserInfo.nickname != 'User A' }}
VariantTo set the Button Upload component to Outline or Filled.
Theme colorTo set the color of the Button Upload component.

Method​

You can use other components to control the Upload component. We support the following three methods:

clearValidationUsed to clear the validation message
clearValueUsed to clear the selected
setDisabledUsed to set the upload component to disabled or enabled

Event handler​

To trigger actions when the selected files change

Data of Uploader​

The upload component has some commonly used data, which can be called in the app.

value an array consisting of the base64 data of files.

files an array of objects. The keys of the objects include lastModified, name, size, type. You can use {{upload1.files.map(file =>file.name)}} to get an array of file names and you can also get lastModified array, size array, type array in the same way.

Upload files to a cloud storage service​

Upload a single file through an S3 resource​

The configuration of action is as follows.

Upload object name

{{upload1.files.map(file =>file.name)[0]}}

Upload data

{{upload1.value[0]}}

Upload multiple files through an S3 resource​

Upload object name list

{{upload1.files.map(file =>file.name)}}

Upload data list

{{upload1.value}}

Upload an image and display it on the image component +

Upload

The upload component is used to allow users to upload files from their local machines to any cloud storage via API. Next, we will introduce how to configure an upload component, how to associate the upload component with a cloud storage service, how to use the upload component to select an image, and display it with an image, etc.

Properties​

PropertyDescription
TypeSet the type of upload component, including Button and Dropzone.
TextThe text shown on the upload component.
Selection typesSet the selection type to multiple files, single file, or directory.
File typesA list of file extensions allowed to upload. No value will permit all file types.
Append newly selected filesTo set the selected new file to append to the selected file or replace the selected file in the selection type of multiple files or directory.
File listTo set whether to show a list of selected files below the upload component. The height of uploader will change dynamically based on the length of the file list.
Parse ValueAttempt to parse the selected files, with support for JSON, CSV, TSV, Excel, and TXT files. Parsed data can be accessed via {{upload1.parsedValue}}. Files that can not be parsed will be null in the array. All files are available as base64 encoded strings on the value array, regardless of this option.
LoadingWhether the component should show a loading indicator.
DisabledTo set whether to disable this component and under what conditions to disable it. For example, if the input1 component is null, this component should be disabled: {{ input1.value == ‘ ’}}
TooltipA tooltip displayed on the component when users hover over the component.
Required fieldTo set whether it is required.
Min sizeTo set the minimum file size allowed to be added.
Max sizeTo set the maximum file size allowed to be added.
Custom ruleTo set the text displayed when verification fails.
Hide validation messageTo set whether to display the validation message when verification fails.
Form Data KeyTo set a key for the component. After adding this component to a form, this key will be used to identify the data of this component when submitting the form.
HiddenTo set whether to display this component and under what conditions to display it. For example, if the current user is not User A, this component should be hidden: {{ currentUserInfo.nickname != 'User A' }}
VariantTo set the Button Upload component to Outline or Filled.
Theme colorTo set the color of the Button Upload component.

Method​

You can use other components to control the Upload component. We support the following three methods:

clearValidationUsed to clear the validation message
clearValueUsed to clear the selected
setDisabledUsed to set the upload component to disabled or enabled

Event handler​

To trigger actions when the selected files change

Data of Uploader​

The upload component has some commonly used data, which can be called in the app.

value an array consisting of the base64 data of files.

files an array of objects. The keys of the objects include lastModified, name, size, type. You can use {{upload1.files.map(file =>file.name)}} to get an array of file names and you can also get lastModified array, size array, type array in the same way.

Upload files to a cloud storage service​

Upload a single file through an S3 resource​

The configuration of action is as follows.

Upload object name

{{upload1.files.map(file =>file.name)[0]}}

Upload data

{{upload1.value[0]}}

Upload multiple files through an S3 resource​

Upload object name list

{{upload1.files.map(file =>file.name)}}

Upload data list

{{upload1.value}}

Upload an image and display it on the image component Change the image source to the file base64 data of upload component. The base64 data is stored in the value attribute in array. And we should splice the file prefix with the file data. The code is as follows. 

{{'data:image/jpeg;base64,'+upload1.value[0]}}
- - + + \ No newline at end of file diff --git a/zh/upstash/index.html b/zh/upstash/index.html index 92a0aceea0..95a80067fe 100644 --- a/zh/upstash/index.html +++ b/zh/upstash/index.html @@ -10,13 +10,13 @@ - - + +
-

Upstash

Upstash is a cloud-native serverless service with Redis compatible that provides an easy way to integrate Redis functionality into applications. In the context of ILLA Cloud, the Upstash integration allows users to leverage the features and capabilities of Upstash within the ILLA Cloud application.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Upstash in a few simple steps. ILLA Cloud is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Upstash, visit their website at https://upstash.com/(https://upstash.com/) Let's begin!

Set up your Back end on Upstash​

Create an account on Upstash. You may sign in using your Amazon, Github or Google accounts alternatively.

After signing into your account on Upstash, click on the Create database button in Redis.

up_home

On the Upstash dashboard, click Create database.

up_create_db

Note: you can only have ONE database in the free tier.

For the database configuration, You can name your database the way you want. Here we name it db1. Choose the primary region and read region based on your write and read user locations. Enable TSL/SSL. It's optional to enable Eviction.

up_db_config

Click the create button, we now have a database ready to use.

Create Upstash in ILLA Cloud​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Upstash from the database list.

action_list_0

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Upstash will display as shown.

up_ex_ready

  • Create in Builder

Sign in to your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Upstash from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to the Upstash database.

up_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '6379'.
PasswordrequiredUse this password for authentication.
SSL optionrequiredwhether to enable the SSL (recommend to enable)

In order to fill in the required information, go to the database dashboard page and click on the database we have just created in your Upstash.

up_info

You may copy it by hovering the mouse over the endpoint, password, and port and clicking the copy text icon behind it.

In the Upstash integration configuration in ILLA Cloud, put the name you want for Name, Endpoint for hostname, given Port for Port, and copy the encrypted Password for Password.

up_config_done

Create Actions​

We have created an Upstash resource, we can add the action by selecting Upstash from the action list and choosing the Create action button.

up_resource_list

Now we have added the Upstash server as an action to our building page.

upstash

Configure Upstash​

PropertiesDescription
Redis queryuse query to retrieve and manipulate data stored in your Redis database
Transformertransforming data into the style you like using JavaScript

Example usage:

  1. Get Values:
    • Get a value: Use the GET command to retrieve the value associated with a specific key. For example: GET key.
  2. Set Values:
    • Set a value: Use the SET command to set the value of a key. For example SET key value.
  3. Hash Operations:
    • Set field-value pairs in a hash: Use the HSET command to set a field-value pair in a hash. For example: HSET hashKey field value.
    • Get a value from a hash: Use the HGET command to retrieve the value of a specific field in a hash. For example: HGET hashKey field.
  4. List Operations:
    • Add an element to a list: Use the LPUSH or RPUSH command to add an element to the beginning or end of a list, respectively. For example: LPUSH listKey value.
    • Retrieve elements from a list: Use the LRANGE command to fetch a range of elements from a list. For example: LRANGE listKey start end.
  5. Set Operations:
    • Add elements to a set: Use the SADD command to add one or more elements to a set. For example: SADD setKey value1 value2.
    • Retrieve elements from a set: Use the SMEMBERS command to get all the members of a set. For example: SMEMBERS setKey.
  6. Sorted Set Operations:
    • Add elements to a sorted set: Use the ZADD command to add elements to a sorted set along with their scores. For example: ZADD sortedSetKey score1 member1 score2 member2.
    • Retrieve elements from a sorted set: Use the ZRANGE command to fetch a range of elements from a sorted set based on their scores. For example: ZRANGE sortedSetKey start end.

Note: You can refer to the Redis documentation for a fully comprehensive list of commands and their usage.

Use case​

Next, we will demonstrate how to map the data from **Upstash** to the table component.

Step 1 Add an action​

Let us create a table in Upstash called employee_profile, including 4 columns name, level, age, and married.

Then we can create a new action for Upstash from the action list in ILLA Cloud and name upstash2.

To list all data in employee_profile put the code snippet below in the Redis query section.

GET employee_profile

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const jsonString = data[0].result;

// Parse the JSON string into a JavaScript object
const jsonData = JSON.parse(jsonString);

// Access the "employees" property and map it to a new array
const mappedArray = jsonData.employees.map((employee) => ({
  name: employee.name,
  level: employee.level,
  age: employee.age,
  married: employee.married,
}));

return mappedArray;

up_code

Click Save and Run to activate this action.

up_data

Step 2 Add Components​

Next, we can add a table component to the canvas.

In the Data Source field in the Inspect page after clicking on the component, put {{upstash2.data}} to retrieve the data from upstash.

Step 3 Test​

The final look should be as shown.

up_test

- - +

Upstash

Upstash is a cloud-native serverless service with Redis compatible that provides an easy way to integrate Redis functionality into applications. In the context of ILLA Cloud, the Upstash integration allows users to leverage the features and capabilities of Upstash within the ILLA Cloud application.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Upstash in a few simple steps. ILLA Cloud is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Upstash, visit their website at https://upstash.com/(https://upstash.com/) Let's begin!

Set up your Back end on Upstash​

Create an account on Upstash. You may sign in using your Amazon, Github or Google accounts alternatively.

After signing into your account on Upstash, click on the Create database button in Redis.

up_home

On the Upstash dashboard, click Create database.

up_create_db

Note: you can only have ONE database in the free tier.

For the database configuration, You can name your database the way you want. Here we name it db1. Choose the primary region and read region based on your write and read user locations. Enable TSL/SSL. It's optional to enable Eviction.

up_db_config

Click the create button, we now have a database ready to use.

Create Upstash in ILLA Cloud​

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign in to your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Upstash from the database list.

action_list_0

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready Upstash will display as shown.

up_ex_ready

  • Create in Builder

Sign in to your Illa account, create a project in Illa Builder on the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Upstash from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings​

Here we need to provide information for connecting to the Upstash database.

up_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '6379'.
PasswordrequiredUse this password for authentication.
SSL optionrequiredwhether to enable the SSL (recommend to enable)

In order to fill in the required information, go to the database dashboard page and click on the database we have just created in your Upstash.

up_info

You may copy it by hovering the mouse over the endpoint, password, and port and clicking the copy text icon behind it.

In the Upstash integration configuration in ILLA Cloud, put the name you want for Name, Endpoint for hostname, given Port for Port, and copy the encrypted Password for Password.

up_config_done

Create Actions​

We have created an Upstash resource, we can add the action by selecting Upstash from the action list and choosing the Create action button.

up_resource_list

Now we have added the Upstash server as an action to our building page.

upstash

Configure Upstash​

PropertiesDescription
Redis queryuse query to retrieve and manipulate data stored in your Redis database
Transformertransforming data into the style you like using JavaScript

Example usage:

  1. Get Values:
    • Get a value: Use the GET command to retrieve the value associated with a specific key. For example: GET key.
  2. Set Values:
    • Set a value: Use the SET command to set the value of a key. For example SET key value.
  3. Hash Operations:
    • Set field-value pairs in a hash: Use the HSET command to set a field-value pair in a hash. For example: HSET hashKey field value.
    • Get a value from a hash: Use the HGET command to retrieve the value of a specific field in a hash. For example: HGET hashKey field.
  4. List Operations:
    • Add an element to a list: Use the LPUSH or RPUSH command to add an element to the beginning or end of a list, respectively. For example: LPUSH listKey value.
    • Retrieve elements from a list: Use the LRANGE command to fetch a range of elements from a list. For example: LRANGE listKey start end.
  5. Set Operations:
    • Add elements to a set: Use the SADD command to add one or more elements to a set. For example: SADD setKey value1 value2.
    • Retrieve elements from a set: Use the SMEMBERS command to get all the members of a set. For example: SMEMBERS setKey.
  6. Sorted Set Operations:
    • Add elements to a sorted set: Use the ZADD command to add elements to a sorted set along with their scores. For example: ZADD sortedSetKey score1 member1 score2 member2.
    • Retrieve elements from a sorted set: Use the ZRANGE command to fetch a range of elements from a sorted set based on their scores. For example: ZRANGE sortedSetKey start end.

Note: You can refer to the Redis documentation for a fully comprehensive list of commands and their usage.

Use case​

Next, we will demonstrate how to map the data from **Upstash** to the table component.

Step 1 Add an action​

Let us create a table in Upstash called employee_profile, including 4 columns name, level, age, and married.

Then we can create a new action for Upstash from the action list in ILLA Cloud and name upstash2.

To list all data in employee_profile put the code snippet below in the Redis query section.

GET employee_profile

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const jsonString = data[0].result;

// Parse the JSON string into a JavaScript object
const jsonData = JSON.parse(jsonString);

// Access the "employees" property and map it to a new array
const mappedArray = jsonData.employees.map((employee) => ({
  name: employee.name,
  level: employee.level,
  age: employee.age,
  married: employee.married,
}));

return mappedArray;

up_code

Click Save and Run to activate this action.

up_data

Step 2 Add Components​

Next, we can add a table component to the canvas.

In the Data Source field in the Inspect page after clicking on the component, put {{upstash2.data}} to retrieve the data from upstash.

Step 3 Test​

The final look should be as shown.

up_test

+ + \ No newline at end of file diff --git a/zh/video/index.html b/zh/video/index.html index f9362526ae..01e26903dc 100644 --- a/zh/video/index.html +++ b/zh/video/index.html @@ -10,13 +10,13 @@ - - + +
-

Video

The video component in ILLA Cloud is a powerful tool that allows users to incorporate multimedia content into their applications or projects. With this feature, users can seamlessly integrate videos into their user interfaces and create engaging and interactive experiences for their end-users.

The video component supports various video formats, including popular formats such as MP4, AVI, and MOV. Users can upload videos directly from their devices or provide URLs to external video sources. This flexibility enables users to leverage existing video content or create new videos specifically for their applications.

Properties​

PropertiesDescription
Video sourcespecify the location of the video file or provide a URL to an external video source
Autoplayenables the video to start playing automatically when the webpage loads
Loopallows the video to play continuously in a loop
Show controlswhether the video player controls are visible or hidden
Muteallows the video to play without any sound
Volumecontrols the audio level of the video
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.

Method​

You can use other components to control the component. We support the following eight methods:

  • play

start playing the video. When invoked, it initiates the playback of the video from the current position.

  • pause

pause the video playback. When called, it temporarily stops the video at its current position.

  • showControls

toggle the visibility of the video player controls. By invoking this method, the controls can be displayed or hidden, allowing users to interact with the video playback.

  • setVideoUrl

dynamically change the source or URL of the video.

PropertiesDescription
Video URLvideo source url
  • setVolume

adjusting the audio volume of the video. It takes a numeric value as the parameter volume

PropertiesDescription
Volumenumeric value, ranging from 0 to 1, where 0 represents muted or no sound, and 1 represents maximum volume.
  • setSpeed

changing the playback speed of the video. It accepts a numeric value as the parameter Speed

PropertiesDescription
Speednumeric value. 1 represents the normal playback speed. Values less than 1 slow down the video, while values greater than 1 speed it up.
  • setLoop

enable or disable the looping functionality of the video. By passing a boolean value as a parameter, the video can be set to loop continuously or play only once.

  • seekTo

seeking a specific time or position in the video. It takes numerical values as the parameter time(s)

PropertiesDescription
Time(s)a numeric value representing the desired time in seconds as a parameter and adjusts the playback position accordingly.

Event handler​

EventDescription
Playperform specific actions or execute code when the video playback begins
Pausehandle the pause event and execute actions accordingly
Loadedperforming tasks that need to be executed after the video has been fully loaded, such as updating the UI to display the video duration or initializing additional features related to the video playback
Endedhandle the end of the video and perform actions such as displaying a replay button, showing related content, or executing any other desired logic when the video has finished playing

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
autoplayA boolean value that determines whether the video should automatically start playing when it is loaded.
controlsA boolean value that determines whether the video player controls, such as play, pause, and volume, are displayed to the user.
displayNameA string value that represents the name or title of the video.
eventsAn array or object that defines the event handlers associated with the video component, such as play, pause, loaded, ended, etc.
hiddenA boolean value that determines whether the video component is hidden from the user interface.
loopA boolean value that determines whether the video should automatically restart playing from the beginning once it reaches the end.
mutedA boolean value that determines whether the video should be muted, i.e., played without sound.
playingA boolean value that indicates whether the video is currently playing.
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the video component.
urlA string value that specifies the URL or source of the video file to be played.
volumeA number value between 0 and 1 represents the volume level of the video, where 0 is muted and 1 is the maximum volume.

Example: {{video1.volume}}

Use case​

Next, we will demonstrate how to control the video playing with a button.

Step 1 Add Components​

Add a Video component and a button component to the canvas.

We set the video source of video component to the youtube link of any video you want to play. Here we will use the default video as example and labeled the button as “Play” as shown below

video_layout

Step 2 Configure the component​

For the button component, we can configure it to set the video component playing if the video is not playing.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the video1 component that you want to change as the target of the event.
  3. Choose the play action
  4. In the Only run when field, put {{!video1.playing}}.

video_config

Similarly, to stop the video playing, we create a new Event handler and follow the first two steps the same as above.

  1. Choose the pause action
  2. In the Only run when field, put {{video1.playing}}.

video_config_1

Step 3 Test​

Now that when you click the “Play” button, the video should play if not playing and pause if playing.

video_test

- - +

Video

The video component in ILLA Cloud is a powerful tool that allows users to incorporate multimedia content into their applications or projects. With this feature, users can seamlessly integrate videos into their user interfaces and create engaging and interactive experiences for their end-users.

The video component supports various video formats, including popular formats such as MP4, AVI, and MOV. Users can upload videos directly from their devices or provide URLs to external video sources. This flexibility enables users to leverage existing video content or create new videos specifically for their applications.

Properties​

PropertiesDescription
Video sourcespecify the location of the video file or provide a URL to an external video source
Autoplayenables the video to start playing automatically when the webpage loads
Loopallows the video to play continuously in a loop
Show controlswhether the video player controls are visible or hidden
Muteallows the video to play without any sound
Volumecontrols the audio level of the video
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.

Method​

You can use other components to control the component. We support the following eight methods:

  • play

start playing the video. When invoked, it initiates the playback of the video from the current position.

  • pause

pause the video playback. When called, it temporarily stops the video at its current position.

  • showControls

toggle the visibility of the video player controls. By invoking this method, the controls can be displayed or hidden, allowing users to interact with the video playback.

  • setVideoUrl

dynamically change the source or URL of the video.

PropertiesDescription
Video URLvideo source url
  • setVolume

adjusting the audio volume of the video. It takes a numeric value as the parameter volume

PropertiesDescription
Volumenumeric value, ranging from 0 to 1, where 0 represents muted or no sound, and 1 represents maximum volume.
  • setSpeed

changing the playback speed of the video. It accepts a numeric value as the parameter Speed

PropertiesDescription
Speednumeric value. 1 represents the normal playback speed. Values less than 1 slow down the video, while values greater than 1 speed it up.
  • setLoop

enable or disable the looping functionality of the video. By passing a boolean value as a parameter, the video can be set to loop continuously or play only once.

  • seekTo

seeking a specific time or position in the video. It takes numerical values as the parameter time(s)

PropertiesDescription
Time(s)a numeric value representing the desired time in seconds as a parameter and adjusts the playback position accordingly.

Event handler​

EventDescription
Playperform specific actions or execute code when the video playback begins
Pausehandle the pause event and execute actions accordingly
Loadedperforming tasks that need to be executed after the video has been fully loaded, such as updating the UI to display the video duration or initializing additional features related to the video playback
Endedhandle the end of the video and perform actions such as displaying a replay button, showing related content, or executing any other desired logic when the video has finished playing

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
autoplayA boolean value that determines whether the video should automatically start playing when it is loaded.
controlsA boolean value that determines whether the video player controls, such as play, pause, and volume, are displayed to the user.
displayNameA string value that represents the name or title of the video.
eventsAn array or object that defines the event handlers associated with the video component, such as play, pause, loaded, ended, etc.
hiddenA boolean value that determines whether the video component is hidden from the user interface.
loopA boolean value that determines whether the video should automatically restart playing from the beginning once it reaches the end.
mutedA boolean value that determines whether the video should be muted, i.e., played without sound.
playingA boolean value that indicates whether the video is currently playing.
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the video component.
urlA string value that specifies the URL or source of the video file to be played.
volumeA number value between 0 and 1 represents the volume level of the video, where 0 is muted and 1 is the maximum volume.

Example: {{video1.volume}}

Use case​

Next, we will demonstrate how to control the video playing with a button.

Step 1 Add Components​

Add a Video component and a button component to the canvas.

We set the video source of video component to the youtube link of any video you want to play. Here we will use the default video as example and labeled the button as “Play” as shown below

video_layout

Step 2 Configure the component​

For the button component, we can configure it to set the video component playing if the video is not playing.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the video1 component that you want to change as the target of the event.
  3. Choose the play action
  4. In the Only run when field, put {{!video1.playing}}.

video_config

Similarly, to stop the video playing, we create a new Event handler and follow the first two steps the same as above.

  1. Choose the pause action
  2. In the Only run when field, put {{video1.playing}}.

video_config_1

Step 3 Test​

Now that when you click the “Play” button, the video should play if not playing and pause if playing.

video_test

+ + \ No newline at end of file