From be915f8ed4f667fa506bfab19424240ccabaffbb Mon Sep 17 00:00:00 2001
From: Rumyana Andriova <54146583+randriova@users.noreply.github.com>
Date: Wed, 5 Nov 2025 08:25:27 +0200
Subject: [PATCH 01/22] Updating JA with changes from #313
---
jp/sidebar-toc/toc.yml | 2 +
.../query-builder-overview.md | 59 +++++++++++++++++++
2 files changed, 61 insertions(+)
create mode 100644 jp/using-data-in-your-app/query-builder-overview.md
diff --git a/jp/sidebar-toc/toc.yml b/jp/sidebar-toc/toc.yml
index 21020eb..a8901ae 100644
--- a/jp/sidebar-toc/toc.yml
+++ b/jp/sidebar-toc/toc.yml
@@ -56,6 +56,8 @@
- name: Form Builder
href: ../using-data-in-your-app/form-builder.md
- name: Query Builder
+ href: ../using-data-in-your-app/query-builder-overview.md
+ updated: false
items:
- name: サーバー側フィルタリングの実装
href: ../using-data-in-your-app/api-project-query-builder-support.md
diff --git a/jp/using-data-in-your-app/query-builder-overview.md b/jp/using-data-in-your-app/query-builder-overview.md
new file mode 100644
index 0000000..1c5a9f5
--- /dev/null
+++ b/jp/using-data-in-your-app/query-builder-overview.md
@@ -0,0 +1,59 @@
+# Query Builder の概要
+
+App Builder の **Query Builder** を使用すると、コードを書かずにデータ クエリを視覚的に定義および管理できます。アプリケーションに接続されたデータのフィルター、グループ化、ソートを簡単に行う方法を提供します。
+
+## 実行できること
+
+Query Builder を使用すると次が可能です:
+
+* **データ ソース**に接続し、視覚的にクエリを構築
+* **フィルター処理**: 「equals」、「contains」、「greater than」 などの演算子を使ってフィールド値を条件設定
+* **複数条件の組み合わせ**: AND/OR の論理グループ
+* **クエリ結果のプレビュー**で結果を確認
+* クエリを UI コンポーネントに**バインド**: グリッド、リスト、またはチャートなど
+
+
+
クエリ実行テストを表示
+ +## 重要性 + +App Builder の Query Builder により、手動でクエリ構文を書く必要がなくなります。データ スキーマを反映した構造化されたドラッグ アンド ドロップ UI を使うことで、開発者とデザイナーがビューに必要なデータ セットを迅速かつ正確に調整できます。 + +## 典型的なユース ケース + +一般的なユース ケースは、カテゴリと価格帯に基づいて製品をフィルターする場面です。 + +例として、すべての Products から、選択された Category (すべてのカテゴリを表示する Select コンポーネントから選択) に属し、さらに 2 つの数値入力フィールドで指定された単価範囲に一致するものだけを取得するクエリを構築できます。 + +対応する SQL 表現は次のようになります: + +```sql +SELECT * FROM products +WHERE categoryId IN ( + SELECT categoryId + FROM categories + WHERE categoryId = {{SelectedCategory}} +) +AND productId IN ( + SELECT productId + FROM orderDetails + WHERE unitPrice >= {{UPFrom}} + AND unitPrice <= {{UPTo}} +) +``` + +App Builder では、SelectedCategory、UPFrom、UPTo の入力を動的フィルターとして接続することで、このロジックを視覚的に作成できます。ユーザーがこれらのコンポーネントを操作すると、Query Builder がデータ表示をリアルタイムで更新し、現在の選択条件に一致する製品のみが表示されます。 + + +## その他のリソース + + + +* [Query Builder のステップ バイス テップ ガイド](query-builder-step-by-step-guide.md) +* [API プロジェクト向けの Query Builder のサポート](api-project-query-builder-support.md) +* [App Builder コンポーネント](../indigo-design-app-builder-components.md) +* [App Builder インターフェイスの概要](../interface-overview.md) +* [Form Builder](form-builder.md) +* [グリッド リモート ページング](grid-remote-paging.md) +* [CRUD 操作](crud-operations.md) +* [リモート データ操作](remote-data-operations.md) From a3e2e6150a55a3f8a813c0c3dad50a2d8afa5610 Mon Sep 17 00:00:00 2001 From: zdrawku
Login screen
### Prompt-Based Generation + **Step 1**: Enter a free-text prompt into the GenAI Dialog. **Step 2**: View the generated result in the **Preview** section. **Step 3**: Apply an action using the plus button in the Preview section: + - **Add Content** – Appends the content to the end of the current view. - **Create New View** – Adds the newly generated content to a separate View page. - **Replace Content** – Replaces the selected component in the current view with the generated output. Simply select a section/layout/component that you want to transform into something else, and open the GenAI Dialog again, place your prompt and click on the Add button -> Replace Content option. @@ -58,6 +62,7 @@ Upload an image using the button under the View tab in the GenAI Dialog. #### Example 1: Login Screen Prompt: + ``` Create a detailed login screen ``` @@ -108,35 +113,35 @@ AI Output - Angular template: ```html
Login screen
-#### Prompt 2: +#### Prompt 2 Structured equivalent prompt @@ -182,14 +188,15 @@ Structured equivalent prompt Generate a view with this layout: nav bar horizontal group - nav drawer (isOpen=true, pin=true) - 5 items - vertical group - title (color=red) - horizontal group - 4 cards with media + nav drawer (isOpen=true, pin=true) + 5 items + vertical group + title (color=red) + horizontal group + 4 cards with media ``` + Result:
@@ -213,6 +220,7 @@ Result:
### Image Generation
**Steps:**
+
1. Open the **AIGen** dialog and navigate to the **Image** tab.
2. Enter a prompt describing the image or use an **Example Prompt**.
3. Once satisfied with the result, click **Add** to save it to your **Image Library**.
@@ -224,6 +232,7 @@ You can now start using it within your project.
### Data Source Generation
**Steps:**
+
1. Open the **AIGen** dialog and navigate to the **Data** tab.
2. Enter a prompt describing the data you need.
3. Click the **Example Prompt** button for inspiration.
@@ -240,12 +249,13 @@ Use the **Send Feedback** form to share your suggestions, report issues, or desc
Give Us Feedback
## Additional Resources + -* [App Builder Interface Overview](../interface-overview.md) -* [Single Page and Navigation](../single-page-apps-and-navigation.md) -* [App Builder Components](../indigo-design-app-builder-components.md) -* [Flex Layouts](../flex-layouts/flex-layouts.md) -* [Running Desktop App](../running-desktop-app.md) -* [Generating an App](../generate-app/generate-app-overview.md) -* [Indigo.Design Getting Started]({environment:infragisticsBaseUrl}/products/indigo-design/help/getting-started) +- [App Builder Interface Overview](../interface-overview.md) +- [Single Page and Navigation](../single-page-apps-and-navigation.md) +- [App Builder Components](../indigo-design-app-builder-components.md) +- [Flex Layouts](../flex-layouts/flex-layouts.md) +- [Running Desktop App](../running-desktop-app.md) +- [Generating an App](../generate-app/generate-app-overview.md) +- [Indigo.Design Getting Started]({environment:infragisticsBaseUrl}/products/indigo-design/help/getting-started) diff --git a/en/app-builder-overview.md b/en/app-builder-overview.md index 06eaab1..ee33a88 100644 --- a/en/app-builder-overview.md +++ b/en/app-builder-overview.md @@ -4,7 +4,7 @@ _description: App Builder is a design to code solution, enabling design and _keywords: App builder, Indigo Design, Infragistics --- -# App Builder - Overview +# App Builder - Overview App Builder is a web-based [design-to-code platform]({environment:appbuilderBaseUrl}/platform) that empowers design and development teams to rapidly build real, production-ready web applications using professionally built components for Angular, Blazor, React, and Web Components. With built-in support for design systems, pixel-perfect layouts, and instant real-time previews, teams can skip redundant handoffs and generate high-quality, dev-ready code directly from their designs - no installations, heavy IDEs, or third-party dependencies needed. @@ -32,10 +32,12 @@ You can kick off your app with pre-built templates or layout presets, then quick - **Enterprise-Ready**: Connect to real data, integrate dashboards, and manage workflows with extensibility in mind. ## Who Should Use It? + - Developers looking to speed up prototyping or production development. - Designers who want to hand off production-ready UI definitions. - Team Leads & CTOs needing scalable, consistent frontend architectures. - Cross-functional teams building internal tools, dashboards, or customer-facing apps. + ## Key Benefits and Impact | Benefit | Impact | @@ -54,12 +56,14 @@ You can kick off your app with pre-built templates or layout presets, then quick - Design system-driven applications ## Try It Yourself + Start from a [Figma file](ui-kits/figma.md), connect to your REST API, and [generate a fully working](https://my.appbuilder.dev/) Angular or React app in less than 10 minutes. ## Additional Resources + -* [Getting Started](getting-started.md) -* [App Builder Interface Overview](interface-overview.md) -* [Design to Code Story](design-to-code-story.md) -* [App Builder SDK](sdk/sdk.md) \ No newline at end of file +- [Getting Started](getting-started.md) +- [App Builder Interface Overview](interface-overview.md) +- [Design to Code Story](design-to-code-story.md) +- [App Builder SDK](sdk/sdk.md) diff --git a/en/app-themes/app-themes.md b/en/app-themes/app-themes.md index 0efdff5..63de29c 100644 --- a/en/app-themes/app-themes.md +++ b/en/app-themes/app-themes.md @@ -6,7 +6,7 @@ _keywords: App Builder themes, Indigo Design, Infragistics # What Are App Themes – Overview -An app theme is a collection of color palettes and attributes that create a sense of visual persistency throughout the entire app, view, or activity. With app themes, you can define the look and feel of your application by selecting and configuring different panels, styles, layouts, typography, pre-built theme widgets. Or you can create a custom theme file too. +An app theme is a collection of color palettes and attributes that create a sense of visual persistency throughout the entire app, view, or activity. With app themes, you can define the look and feel of your application by selecting and configuring different panels, styles, layouts, typography, pre-built theme widgets. Or you can create a custom theme file too. # App Builder themes @@ -14,16 +14,16 @@ An app theme is a collection of color palettes and attributes that create a sens The [App Builder]({environment:appbuilderBaseUrl}) adopts a design systems approach to UI creation and you can download app themes and apply them at the app-level. With a single selection of a theme, the theme is globally applied to the whole application immediately. Having global theme avoids the need to create local styles that are difficult to maintain. -## Switching App Builder themes +## Switching App Builder themes There are six built-in app themes based on Material, Fluent or Bootstrap. Each have a dark version and light version. You can try it out by selecting the theme card in the toolbox. Switching between themes
-## Material vs. Fluent vs. Bootstrap +## Material vs. Fluent vs. Bootstrap -When we switch from Material to Fluent, you will see the components look different. For example, the floating label style for the input field in Material switches to a fixed label. And the switch is also visually different. Some of the other changes are more subtle, but it's there. +When we switch from Material to Fluent, you will see the components look different. For example, the floating label style for the input field in Material switches to a fixed label. And the switch is also visually different. Some of the other changes are more subtle, but it's there. ## How To Customize & Apply App Themes @@ -35,21 +35,21 @@ You can create a custom app theme to match your brand. You do this by creating a Switching between themes
-After an app theme is selected, when you apply a fill color for a container, the color picker now reflects the palette from the selected theme. This helps us stay true to the design systems approach where brand attributes are decided and maintained at the app level, and not decided on an ad-hoc basis depending on who is creating the UI. +After an app theme is selected, when you apply a fill color for a container, the color picker now reflects the palette from the selected theme. This helps us stay true to the design systems approach where brand attributes are decided and maintained at the app level, and not decided on an ad-hoc basis depending on who is creating the UI. Change the appearance of a layout
In the future, we will include a way to add custom colors too, but as a secondary usage scenario. For now, if you still want to further customize the appearance of a layout and further restyle the app using a custom color, you can always type in the color code in the input field on the side. The app-level themes you created in the editor is persisted in a platform-compliant way when generating the app. It also makes it really simple to change the theme in the future. -Keep in mind that with the App Builder you can take advantage of Flex layouts, providing a set of advanced position capabilities for easier and faster creation of custom layouts. This way the app you build will adapt to any screen size. Whereas compared to an absolute layout, you get a particular design for only one screen size. +Keep in mind that with the App Builder you can take advantage of Flex layouts, providing a set of advanced position capabilities for easier and faster creation of custom layouts. This way the app you build will adapt to any screen size. Whereas compared to an absolute layout, you get a particular design for only one screen size. ## Additional Resources -* [Flex Layouts](../flex-layouts/flex-layouts.md) -* [Ignite UI for Angular Theming]({environment:infragisticsBaseUrl}/products/ignite-ui-angular/angular/components/themes/index) -* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) -* [App Builder Components]({environment:appbuilderBaseUrl}/components) +- [Flex Layouts](../flex-layouts/flex-layouts.md) +- [Ignite UI for Angular Theming]({environment:infragisticsBaseUrl}/products/ignite-ui-angular/angular/components/themes/index) +- [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder Components]({environment:appbuilderBaseUrl}/components) diff --git a/en/blazor-support.md b/en/blazor-support.md index d391d2d..c1ac9fa 100644 --- a/en/blazor-support.md +++ b/en/blazor-support.md @@ -1,7 +1,7 @@ --- title: App Builder - Blazor Code Generation _description: App Builder enables users to choose the desired platform for code and app generation. -_keywords: App Builder, Web App Builder, Blazor, Blazor Code generation, Blazor Appp Generation, Blazor UI App Builder, App Builder Blazor Support +_keywords: App Builder, Web App Builder, Blazor, Blazor Code generation, Blazor App Generation, Blazor UI App Builder, App Builder Blazor Support --- # Blazor Code Generation with App Builder @@ -20,58 +20,64 @@ You can generate both Blazor Web Assembly or Blazor Server apps based on your pr > [!NOTE] >Trying to generate code for components not available yet will put a placeholder informing that such a component is not yet supported. This makes it possible for you not to refrain from developing more complex UI in the designer. -### In this article: -* Introduction of the feature -* Blazor Code generation -* Uploading an application to GitHub -* Known issues and limitations +### In this article + +- Introduction of the feature +- Blazor Code generation +- Uploading an application to GitHub +- Known issues and limitations ## Introduction + As mentioned, Blazor Code generation feature supports a lot of new components and many are yet to come. Don't miss out on the Grid and Tree Grid code generation - as most of the grid features are now supported, like data binding that gives you the ability to run a Blazor application with a native grid component from Ignite UI for Blazor! Features like Excel-style filtering, Paging, Row editing, Cell selection and a lot more, are available to you. ## Blazor Code Generation + After finalizing the design of your application and before previewing its code, pay attention to the Platform picker dropdown, located in the navigation bar just next to the `Publish to Github` and `Preview` action buttons. Choose the `Blazor WASM` or `Blazor Server` option to generate code for Blazor, `Angular` or `Web Components` if this is the preferred framework for your app. The picker remembers your choice and next time you go to AppBuilder you will have your desired framework preselected for you. ## Uploading an application to GitHub + In addition to see your application in Preview mode or download it locally on the machine, there is the option for generating the full app code repository. In order to do that, simply go to the Generate app button and then connect your GitHub account to the App Builder. ## Known issues and limitations + Generating Blazor application has the following limitations: + - Bootstrap is turned off in the generated application. Generated components have the following limitations: - Card: - - reversed actions are not reflected in generated code. - - divider in "Actions-column" type is not reflected in generated code. + - reversed actions are not reflected in generated code. + - divider in "Actions-column" type is not reflected in generated code. - Navigation Drawer - - does not support pin threshold. + - does not support pin threshold. - Avatar: - - the "Initials" type does not limit the content to the first two chars. + - the "Initials" type does not limit the content to the first two chars. - Icon - - does not use `IgbIcon` in generated code. All components, which use icons, are also not generated with `IgbIcon`. + - does not use `IgbIcon` in generated code. All components, which use icons, are also not generated with `IgbIcon`. - Date Picker: - - does not support Dialog mode. - - does not support displaying multiple months. - - does not support action buttons. + - does not support Dialog mode. + - does not support displaying multiple months. + - does not support action buttons. - Icon Button - - does not generate `IgbIconButton`, but `IgbButton` with icon instead. + - does not generate `IgbIconButton`, but `IgbButton` with icon instead. - Input Group - when type is set to "Date": - - does not support input format. - - does not fully support display formats. - - does not support help text. - - does not support custom prefix and suffix. - - does not support min and max values. - - does not support value loop. + - does not support input format. + - does not fully support display formats. + - does not support help text. + - does not support custom prefix and suffix. + - does not support min and max values. + - does not support value loop. - Radio Group - - does not support required. + - does not support required. - Grid/Tree Gird: - - does not support column selection. - - does not support row actions (action strip). + - does not support column selection. + - does not support row actions (action strip). - Rating: - - does not support [ngModel] binding for `readonly` and `disabled` inputs (for Angular) - - does not support repeating of rating elements for exported code - - is included only for Angular and WC, there is no Rating for Blazor + - does not support [ngModel] binding for `readonly` and `disabled` inputs (for Angular) + - does not support repeating of rating elements for exported code + - is included only for Angular and WC, there is no Rating for Blazor For a list of all supported components see [Generate App](generate-app/generate-app-overview.md#supported-components) @@ -79,10 +85,10 @@ For a list of all supported components see [Generate App](generate-app/generate- -* [Generate App](./generate-app/generate-app-overview.md) -* [App Builder Components](indigo-design-app-builder-components.md) -* [Flex Layouts](flex-layouts/flex-layouts.md) -* [Running Desktop App](running-desktop-app.md) -* [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started) -* [Components]({environment:appbuilderBaseUrl}/components) -* [Indigo.Design Components]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) \ No newline at end of file +- [Generate App](./generate-app/generate-app-overview.md) +- [App Builder Components](indigo-design-app-builder-components.md) +- [Flex Layouts](flex-layouts/flex-layouts.md) +- [Running Desktop App](running-desktop-app.md) +- [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started) +- [Components]({environment:appbuilderBaseUrl}/components) +- [Indigo.Design Components]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) diff --git a/en/change-log.md b/en/change-log.md index dbd3b90..297a4ba 100644 --- a/en/change-log.md +++ b/en/change-log.md @@ -3,34 +3,42 @@ title: App Builder - Change Log _description: App Builder enables design and development teams to use various interactions when creating connections between screens and components in order to cover real application scenarios. _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI kit, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch UI kits, Interactions --- -# App Builder - Change Log +# App Builder - Change Log > [!NOTE] > Latest update was made on 23rd of September, 2025. [LEARN MORE in the AppBuilder blog](https://www.appbuilder.dev/blog) ## September 2025 Release + ### Features + - **Conditional Logic for General Actions** now enables nested If-Else, multi-branch conditions, conditional deletes with prompts, and dynamic parameter passing for more flexible data action flows. ## August 2025 Release + ### Features + - Added **ApexCharts** to the component toolbox. - **Pivot Grid** now auto-generates dimensions and values from data fields for a ready-to-use pivot view. - Added **Selected List Item** support, applying selected styling and storing the chosen value for later use. - Added **Empty Grid Template** and **Loading Indicator Template**. ## June 2025 Release + ### Features + - Enabled **Conditional Actions** for Data Actions, allowing forms and grids to perform different logic based on action outcomes. - Introduced **Grid Master-Detail** Template. - Added **Spanish language support**. - Added **Child-level Routing** support using the Views Container within nested routes for richer navigation. ### Improvements + - **Form and Input Validation** enhancements - Introduced additional variants for **Icon button** — contained, outlined, and flat. ### AI Features on [Preview](https://preview.appbuilder.dev/) + - **Pinned Chat History** – Pin/unpin chats to easily revisit key sessions. - **Contextual Editing** – Click a UI element to edit it directly via AI chat. - **Component Indicator** – See which UI element is selected below the chat. @@ -40,7 +48,9 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - **Image Upload Support** – Upload images via icon, drag & drop, or paste. ## May 2025 Release + ### Features + - Hierarchical Grid **Load-on-demand** functionality, configured through RowIslands with separate data requests, loading child data only when needed. - Added **Child-level Routing** support using the Views Container within nested routes for richer navigation. - Added **Input Validation** support across Form, Grid, and standalone Input components, enabling use of minLength, maxLength, pattern, min, and max attributes. @@ -48,7 +58,9 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Added **Azure DevOps Integration** that allows you to publish apps directly to your DevOps repositories. [Help docs](https://www.appbuilder.dev/help/generate-app/azure-integration). ## End of March 2025 Release ([Preview Environment](https://preview.appbuilder.dev/)) + ### Features + - **Conversational AI Experience** for app creation. - Added **Initial Advanced Filtering** support to all Grids. - New **Query Variable** type - A specialized variable that interacts with data sources, dynamically filtering large datasets through API requests with server-side filtering for optimal performance. @@ -56,27 +68,35 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - **Reorder Actions** – Customize the execution order of actions triggered by component interactions. ### Maintenance updates + - Forms Reset capabilities in generated applications. - Disabled Summaries Support for Blazor, React and Web Components. ## March 2025 Release + ### Features + - Added **Remote Paging** support to allow apps to request paged data from API. - **Multiple-actions Support** - a single interaction (e.g., click, row selection) can now trigger multiple actions, enabling more complex workflows. - Grid **Summaries toggle** – Added a property to enable/disable summaries per column. - Added **Carousel component** to the component toolbox. ## January 2025 Release + ### Features + - Introduced **Indigo UI Kit for Figma**, seamlessly integrating with App Builder to visually design and generate code for Angular, React, Blazor, and Web Components. - Added **Automatic value binding** for Grid Column edit templates. ## December 2024 Release + ### Features + - Added **Hierarchical Grid** to the component toolbox. - **GitHub Pages** deployment for hosting static sites directly from a repository. ### Maintenance updates + - Angular apps are generated using [Ignite UI for Angular `19.0.0`](https://github.com/IgniteUI/igniteui-angular/releases/tag/19.0.0). - React apps are generated using [Ignite UI for React `18.7.4`](https://github.com/IgniteUI/igniteui-react). - Web Component apps are generated using [Ignite UI for Web Components `5.1.2`](https://github.com/IgniteUI/igniteui-webcomponents/). @@ -84,21 +104,27 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Bug fixes ## November 2024 Release + ### Features + - **Form builder** - Build forms from scratch or automatically by dropping a REST data endpoint. - **New** default data source based on Northwind Rest API. - **New** US Presidential Election sample app. ### Improvements + - Improved UX for resolving theme and component sizes. ## September 2024 Release + ### Features + - Guided approach to **globally fix incompatible bindings** when relevant data source changes are detected - Configure **remote paging** on the Grid component to fetch data from the server in chunks. - CSS Grid Layout re-parenting support. Create **layouts using CSS Grid** with template rows and columns along with CSS Flexbox. ### Maintenance updates + - Angular apps are generated using [Ignite UI for Angular `18.1.0`](https://github.com/IgniteUI/igniteui-angular/releases/tag/18.1.0). - React apps are generated using [Ignite UI for React `18.6.1`](https://github.com/IgniteUI/igniteui-react). - Web Component apps are generated using [Ignite UI for Web Components `4.11.1`](https://github.com/IgniteUI/igniteui-webcomponents/). @@ -106,27 +132,34 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Bug fixes ## August 2024 Release + ### Features + - App Builder AI-driven image and data source generation. - Added CSS Grid Layout support. - Set global Application size and component based size. - Automatic background refresh of data sources upon updating your Rest API. ### Improvements + - New data provider support - PostgreSQL (SDK and On-prem). - New drill-down picker for collections of data sources. - Exposed UI for Download/upload application template. ## June 2024 Release + ### Features + - Design and generate your apps for **React**. - Allow first-time visitors to use App Builder in **Guest-access mode**. Visitors can save their progress at any time by signing in with an account. ### Improvements + - Added two-way data binding support to **Select, Text-area and Radio-group components**. - Get notified of **updates to Datasources** that your app depends on, and view the changes. ### Maintenance updates + - Angular apps are generated using [Ignite UI for Angular `17.2.0`](https://github.com/IgniteUI/igniteui-angular/releases/tag/17.2.0). - React apps are generated using [Ignite UI for React `18.6.1`](https://github.com/IgniteUI/igniteui-react). - Web Component apps are generated using [Ignite UI for Web Components `4.9.0`](https://github.com/IgniteUI/igniteui-webcomponents/blob/4.9.0/CHANGELOG.md#490---2024-04-30). @@ -134,12 +167,15 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Bug fixes ## May 2024 Release + ### Features + - **Update existing Datasource** to use the latest OpenAPI schema, and show differences if present. - Set up Data-action(s) to create, update and delete rows in **Tree-grid** component. - Update a variable based on row selection event in **Tree-grid** component. - + ### Improvements + - Added two-way data binding support to **Input, Checkbox, Switch, Date Picker, Calendar, Rating, and Slider components.** - Added **Tree component properties** for **single node expansion** and **toggle on item click**. - Added Search-style option for Input component @@ -149,64 +185,84 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Bug fixes ## February 2024 Release + ### Features + - App Navigation with **Route Parameters** - Added **Dependent variables** support - Added **Static value input capabilities** for "set variable" action through **editors** (based on variable type) ### Improvements + - Angular apps are generated using **Ignite UI for Angular `17.0.x`**. - Bug fixes ## December 2023 Release + ### Features -- **Manage all variables** defined in your app from a single location. + +- **Manage all variables** defined in your app from a single location. - Added **Financial Chart** to the component toolbox. - Added **Value Change** interaction event for **Date Picker** component. - + ### Improvements + - Angular apps are generated using **Ignite UI for Angular `16.1.11`**. -- Added an option to **select all** endpoints when configuring an OpenAPI-based datasource. +- Added an option to **select all** endpoints when configuring an OpenAPI-based datasource. - Bug fixes ## October 2023 Release + ### Features + - **Create and edit variables** to pass data between components (local vars) or views (global vars). - **Initialize value of array/object** variable from an API request. - Update target variable's value using **"Set Variable"** action, when defining a user interaction (event). - Use **"Selection changed"** or **"on Click"** events to update variables. - **Bind component properties** to variable's value or nested data-fields for object type variables. - **Bind component data** to API endpoints with URL params (path and query params). + ### Improvements + - Bug fixes and general improvements. ## August 2023 Release + ### Features + - Added Combo **Single Selection** feature. - Added support for **Material Extended Icons**. - New Stepper **navigation actions**. - New [Indigo.Design UI Kit version 1.3](https://www.figma.com/@infragistics) for both **Fluent** and **Material**. ### Improvements + - Angular apps are generated using **Ignite UI for Angular `16.0.15`** ([Changelog](https://github.com/IgniteUI/igniteui-angular/releases/tag/16.0.15)). - Bug fixes and general improvements. ## June 2023 Release + ### Features + - Added **Grid Column Templating** - Header, Cell display and Cell editing - UI for browsing and navigation through schema entities in OpenAPI definition - Toolbox components linked to relevant help documentation + ### Improvements + - Angular apps are generated using **Ignite UI for Angular `16.0.0`** ([Changelog](https://github.com/IgniteUI/igniteui-angular/releases/tag/16.0.0)) - Travel App: improvements for the background positioning of images - Bug fixes and general improvements. ## May 2023 Release + ### Features + - Added **Stepper** and **Reveal Dashboard** to the component toolbox. - Switch between **licensed vs. unlicensed packages** when generating apps. ### Improvements + - Improved layout heuristics to create **CSS Flexbox layouts from Figma designs** that use Auto-layout. - Updated **Figma Material UI Kit** to **v1.3**. - Updated **Figma plugin** to create apps using theme palette and **Dark theme**. @@ -216,17 +272,22 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Bug fixes and general improvements. ## April 2023 Release + ### Improvements + - New code generation for Combo, Select and Dialog components (Blazor) - New toggle for unlicensed code export - Sample application updates - Team Collaboration, Ecommerce Auto Shop - Focus on bug fixing and general improvements ## March 2023 Release + ### Features + - New sample application - Health Vault ### Improvements + - Figma import story enhancements - Figma Material UI Kit 1.2 - Figma Plugin upgrade @@ -235,6 +296,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k ## February 2023 Release + ### Features - Configure REST API methods POST/PUT/DELETE when creating a datasource based on OpenAPI definition. @@ -254,36 +316,46 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Bug fixes and general improvements ## December 2022 Release + ### Features + - Added **Pivot Grid component** to the component toolbox. - Added Hierarchical data support for **Tree Grid** component. -- Added **Combo component** code generation for Web Components. +- Added **Combo component** code generation for Web Components. - Released [**Indigo.Design UI kit** for Figma](https://www.figma.com/@infragistics). - Released [Figma plugin](https://www.figma.com/community/plugin/1170035114372031474) to create an app from designs. - Added new **sample app** - Movie Premieres. ### Improvements + - Added an option to **Remember authorization details** when connecting to REST API endpoints. - Bug fixes and performance improvements. ## November 2022 Release + ### Features + - **Generate app** and components as a **Web Components** project - **Share** a public link to preview your app - Added **Rating** to the component toolbox (Angular and Web Components) + ### Improvements + - Added new features for **Grid** component (Blazor) - Added TreeGrid component for **Blazor** and **Web Components** code generation - Angular apps are generated using **Ignite UI for Angular `~14.1.1`** ([Changelog](https://github.com/IgniteUI/igniteui-angular/releases/tag/14.1.1)) - Bug fixes ## October 2022 Release + ### Features + - Added **Tree-Grid** and **Accordion** to the component toolbox - Define columns collection for **Grid** component, and re-arrange columns - Added new **sample app** - HR Dashboard ### Improvements + - Added support for reference objects when using **OpenAPI** definition - Added support for **Safari browser** - **Generate app** with licensed packages if you own a subscription ([more](https://www.infragistics.com/products/appbuilder/help/generate-app/generate-app-overview#licensed-code-export)) @@ -292,11 +364,14 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k [LEARN MORE](https://www.infragistics.com/community/blogs/b/infragistics/posts/app-builder-release-with-web-components-code-generation-tree-grid-and-more) ## August 2022 Release + ### Features + - Added **Tree component** to the component toolbox, for Blazor and Angular. - Generate your app for both **Blazor WebAssembly and Server** ### Improvements + - Added support for `grid-gap` in **row and column layout (Flexbox)** - Added **filtering for endpoints** when configuring OpenAPI datasource - Generate **Expansion panel** as a Blazor component. @@ -304,27 +379,34 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Bug fixes and performance improvements ## July 2022 Release + ### Improvements + - Angular apps are generated using **Ignite UI for Angular `~14.0.0`** - Added support for selecting any **Google font** when defining app theme - General improvements to **Angular and Blazor code generation** ## June 2022 Release + ### Features - - Added **Category Chart** to the component toolbox - - Added **Pie Chart** to the component toolbox - - **GitHub Integration**: Publish updates without rolling back user changes - - Allow data requests from **local network sources** + +- Added **Category Chart** to the component toolbox +- Added **Pie Chart** to the component toolbox +- **GitHub Integration**: Publish updates without rolling back user changes +- Allow data requests from **local network sources** [LEARN MORE](https://www.infragistics.com/community/blogs/b/infragistics/posts/app-builder-release-with-charts-support-and-more) ## May 2022 Release + ### Features + - Create designs in Sketch with **four new UI kit(s)** matching Material, Fluent, Bootstrap and Indigo theme. - **Dark theme** support for **Blazor** ### Improvements + - Generate code for **Blazor** apps: - Added support for more components - **DropDown, Chip, Slider, Snackbar** - Updated code generation for **Navigation drawer, Navigation bar, and Card** @@ -337,20 +419,26 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - **Download App builder** desktop app from main App-Menu ## MAINTENANCE UPDATES & BUG FIXES + - Renamed Indigo.Design UI kit - Auto-fill baseUrl when configuring endpoints (OpenAPI) ## April 2022 Release + ### Features + - **Copy application** to a different workspace, and include all linked resources (theme, image assets and data) - Select new **app templates** when creating a new app - Select **preset layouts** when creating a new view in your app ### Improvements + - Related to Swagger UI and bug fixes ### MAINTENANCE UPDATES & BUG FIXES + **Including, but not limited to:** + - Hide Swagger table context menu - Add progress indicator for done button when adding URL - Fix missing `requestInfo` on DS table @@ -362,11 +450,14 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Select data dialog is listing the data sources instead of fields ## March 2022 Release + ### Features + - **OpenAPI (Swagger) Support** as part of our data-binding RestAPI story. - **On-Premises Version of App Builder** that you can install on your own server and behind your own server firewall. This instance is runnable on any infrastructure and accessible only by internal personnel ### Improvements + - Set image round radius using px, % or rems - Persist zoom level of the design surface when switching between views or preview - Improvements when generating **Blazor** apps @@ -377,7 +468,9 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Added support for **nested arrays** in objects as data source ### MAINTENANCE UPDATES & BUG FIXES + **Including, but not limited to:** + - Fix the error that is thrown on "Get Assets For Sketch" - Select component popup is cut at the top in preview mode - On app duplication the custom viewport is lost @@ -403,11 +496,14 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k ## January 2022 Release ### IMPROVEMENTS + - **Sketch UI Kit Improved Theming Support** - The light/dark mode toggle that changes the surface color now affects how gray colors are set up - as a derivative of black or white. - **UI Kits Version Check updates** - Now matching `Change canvas size
-## Row and column layout +## Row and column layout Flex-layout containers have settings that allow us to modify the position of the nested UI elements. There are flex properties for h.align and v.align properties that can be easily applied from the respective dropdowns. The canvas defaults to row layout, horizontally aligned to the left and stretched vertically. You can always switch between row and column layout irrespective of what you started with. The layout container is sized based on the content, but you can always specify a height and width. You can also add the padding property to container, and margins to space out the child UI elements - that can be done after selection a particular component and editing the padding or margin in the Property Panel on the right-hand side of the screen. @@ -37,15 +41,15 @@ You can always select the parent UI element by clicking on the label for the chi Select parent component
-## Fluid resizing & wrapping +## Fluid resizing & wrapping The other note-worthy properties are related to grow and shrink. These affect resizing for components when the viewport changes size. Setting a component to `grow` will expand a container in row direction if it's row layout or column direction if it's column layout. - + Grow column/row layout option
-## Add to layout via context menu +## Add to layout via context menu If you come up with the need to add an existing component to a new layout, there is a very handful option – with right on a selected component, you can trigger the context menu and to add the element to a row or column layout. @@ -54,13 +58,13 @@ If you come up with the need to add an existing component to a new layout, there ## Additional Resources -To summarize quickly, whatever you have learned about Flex layouts can be used here in the editor as-is. For someone new to Flex and CSS, it will take some getting used to, but over time it will become a lot easier to think of layouts as rows and columns. The most important is that Flex layout help us build application adapting to a screen size and define components behavior within the layout, while the absolute layout let us have a particular design for only one screen size. +To summarize quickly, whatever you have learned about Flex layouts can be used here in the editor as-is. For someone new to Flex and CSS, it will take some getting used to, but over time it will become a lot easier to think of layouts as rows and columns. The most important is that Flex layout help us build application adapting to a screen size and define components behavior within the layout, while the absolute layout let us have a particular design for only one screen size. -* [App Builder Components](../indigo-design-app-builder-components.md) -* [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) -* [A Guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) -* [Flexbox Froggy](https://flexboxfroggy.com/) -* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) -* [Indigo.Design Styling Overview](https://www.infragistics.com/products/indigo-design/help/style/styling-overview) +- [App Builder Components](../indigo-design-app-builder-components.md) +- [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) +- [A Guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +- [Flexbox Froggy](https://flexboxfroggy.com/) +- [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) +- [Indigo.Design Styling Overview](https://www.infragistics.com/products/indigo-design/help/style/styling-overview) diff --git a/en/flex-layouts/row-and-column-layout.md b/en/flex-layouts/row-and-column-layout.md index c2d72aa..88f606b 100644 --- a/en/flex-layouts/row-and-column-layout.md +++ b/en/flex-layouts/row-and-column-layout.md @@ -1,11 +1,9 @@ -## Row and column layout +## Row and column layout Flex-layout containers have settings that allow us to modify the position of the nested UI elements. It's shown here as h.align and v.align properties. The canvas defaults to row layout, horizontally aligned to the left and stretched vertically. You can always switch between row and column layout irrespective of what you started with. - -In this example, we want the sign in dialog to be centered on the canvas. To make that happen, I can use the alignment settings to center the nested container vertically and horizontally on the canvas. For the dialog itself, I've used a column layout so that everything stacks vertically inside it. The layout container is sized based on the content, but you can always specify a height and width. I'll can also add the padding property to container, and margins to space out the child UI elements. +In this example, we want the sign in dialog to be centered on the canvas. To make that happen, I can use the alignment settings to center the nested container vertically and horizontally on the canvas. For the dialog itself, I've used a column layout so that everything stacks vertically inside it. The layout container is sized based on the content, but you can always specify a height and width. I'll can also add the padding property to container, and margins to space out the child UI elements. - -While we are at it, you can always select the parent UI element by clicking on the label for the child element. This is helpful when you have nested layout containers. As you can see, there is nested row layout to show the text component and switch side-by side. And this lives inside a column layout. So, clicking on the row-layout label will select its parent column layout. \ No newline at end of file +While we are at it, you can always select the parent UI element by clicking on the label for the child element. This is helpful when you have nested layout containers. As you can see, there is nested row layout to show the text component and switch side-by side. And this lives inside a column layout. So, clicking on the row-layout label will select its parent column layout. diff --git a/en/generate-app/generate-app-overview.md b/en/generate-app/generate-app-overview.md index 26fb32f..de5bf3b 100644 --- a/en/generate-app/generate-app-overview.md +++ b/en/generate-app/generate-app-overview.md @@ -6,7 +6,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k # Generate App > [!NOTE] -> The applications designed in Ignite UI App Builder can be downloaded or directly uploaded to a GitHub repository. +> The applications designed in Ignite UI App Builder can be downloaded or directly uploaded to a GitHub repository.NPM Authentication Token
### Trial user + If you are a **trial user** then the free trial package of [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) will be used, upon app generation. This applies for both _application download_ and _publish to GitHub_. See the [License FAQ and Installation documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing) for information on how to upgrade to the full licensed package, if the project is using a Trial version of Ignite UI for Angular, and how to setup your environment and CI to use our licensed npm feed. @@ -107,9 +109,9 @@ Currently, the App Builder supports code generation for Angular and Blazor. Belo -* [Blazor Support](../blazor-support.md) -* [Upload Application to GitHub](upload-application-to-github.md) -* [Run Application Locally](run-application-locally.md) -* [Preview Application Code](../preview-code.md) -* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) -* [App Builder Components]({environment:appbuilderBaseUrl}/components) +- [Blazor Support](../blazor-support.md) +- [Upload Application to GitHub](upload-application-to-github.md) +- [Run Application Locally](run-application-locally.md) +- [Preview Application Code](../preview-code.md) +- [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder Components]({environment:appbuilderBaseUrl}/components) diff --git a/en/generate-app/run-application-locally.md b/en/generate-app/run-application-locally.md index fb9cc8f..c5ad387 100644 --- a/en/generate-app/run-application-locally.md +++ b/en/generate-app/run-application-locally.md @@ -6,26 +6,27 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k # Run Application Locally ### Run the app locally -To finally develop the app, you don't need to copy and paste code. Instead, use the generate app button in the toolbar. This quickly creates a package with your Angular or Blazor application (depending on what framework is selected in the Platform picker dropdown) that can be downloaded. To run this app, open up the folder in an IDE like Visual Studio Code. -* Make sure you have Node.js installed.An application running in VS Code
-The App Builder allows you to design your applications visually using professional grade Ignite UI components, and then you are able to generate them as Angular or Blazor applications that you can continue developing in your IDE of choice. In the end, you are guaranteed that what you designed in the App Builder design surface looks exactly the same when the app is generated and built. Don't forget to share your feedback using the feedback button. We look forward to hearing about your experience and also about what features are valuable to you as we move forward to our next release milestones. +The App Builder allows you to design your applications visually using professional grade Ignite UI components, and then you are able to generate them as Angular or Blazor applications that you can continue developing in your IDE of choice. In the end, you are guaranteed that what you designed in the App Builder design surface looks exactly the same when the app is generated and built. Don't forget to share your feedback using the feedback button. We look forward to hearing about your experience and also about what features are valuable to you as we move forward to our next release milestones. ## Additional Resources -* [Upload Application to Github](upload-application-to-github.md) -* [Preview Application Code](../preview-code.md) -* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) -* [appbuilderBaseUrl]({environment:appbuilderBaseUrl}/components) +- [Upload Application to Github](upload-application-to-github.md) +- [Preview Application Code](../preview-code.md) +- [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) +- [appbuilderBaseUrl]({environment:appbuilderBaseUrl}/components) diff --git a/en/generate-app/upload-application-to-github.md b/en/generate-app/upload-application-to-github.md index 2382fa0..022a158 100644 --- a/en/generate-app/upload-application-to-github.md +++ b/en/generate-app/upload-application-to-github.md @@ -6,17 +6,20 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k # Upload Application To Github > [!NOTE] ->Once ready with your design in App Builder you can upload it to your private or GitHub repository. +>Once ready with your design in App Builder you can upload it to your private or GitHub repository. -### In this article: -* Introduction of the feature -* Uploading an application to GitHub +### In this article + +- Introduction of the feature +- Uploading an application to GitHub ## Intro -One of the great App Builder features is actually the code generation service, so once the app design is ready and the code reviewed, users can get the final application code. However, what makes the experience even greater is the fact that the app code can be easily uploaded to a GitHub repository directly from inside the App Builder. GitHub is a favorite tool for thousands of developers, so this App Builder feature allows users to benefit from all GitHub features, such as assigning reviewers, tracking changes, commenting and many more. By delivering this feature, the product team adds one more piece to the full design-to-code collaborative story, but also integrates the App Builder platform with a well-known service that engineers are already used to. + +One of the great App Builder features is actually the code generation service, so once the app design is ready and the code reviewed, users can get the final application code. However, what makes the experience even greater is the fact that the app code can be easily uploaded to a GitHub repository directly from inside the App Builder. GitHub is a favorite tool for thousands of developers, so this App Builder feature allows users to benefit from all GitHub features, such as assigning reviewers, tracking changes, commenting and many more. By delivering this feature, the product team adds one more piece to the full design-to-code collaborative story, but also integrates the App Builder platform with a well-known service that engineers are already used to. ## Uploading an application to GitHub + After finalizing the design of your application and previewing its code, it comes the time for generating the full app code repository. In order to do that, simply go to the Generate app button and then connect your GitHub account to the App Builder. You can also download your application files from the button menu. @@ -39,9 +42,11 @@ When the upload process is done, users can apply changes to the GitHub repo from ## GitHub integration features ### Already pushed changes won't be overwritten -There are times when you will be doing application changes externally with code and not via the App Builder. Those changes won't be overwritten once you push a change from the App Builder GitHub UI. We've added a new integration point that now respects the user modifications in main/master branch outside AppBuilder. You are now able to merge App Builder work to `main` branch and next time App Builder will create a PR that contains only the new differences. + +There are times when you will be doing application changes externally with code and not via the App Builder. Those changes won't be overwritten once you push a change from the App Builder GitHub UI. We've added a new integration point that now respects the user modifications in main/master branch outside AppBuilder. You are now able to merge App Builder work to `main` branch and next time App Builder will create a PR that contains only the new differences. Improvements: + - Warnings when external changes are made in a pull request's associated branch. In order to keep these changes, merge the current Pull Request and then create a new one.
@@ -62,7 +67,7 @@ Improvements:
-* [Run Application Locally](run-application-locally.md)
-* [Preview Application Code](../preview-code.md)
-* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started)
-* [App Builder Components]({environment:appbuilderBaseUrl}/components)
+- [Run Application Locally](run-application-locally.md)
+- [Preview Application Code](../preview-code.md)
+- [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started)
+- [App Builder Components]({environment:appbuilderBaseUrl}/components)
diff --git a/en/getting-started.md b/en/getting-started.md
index 5723f21..50effa6 100644
--- a/en/getting-started.md
+++ b/en/getting-started.md
@@ -7,6 +7,7 @@ _keywords: App builder, Indigo Design, Infragistics
# Getting started with App Builder
App Builder is a low-code platform that lets you quickly turn designs into functional web apps—without writing all the code. Start from scratch, use templates, or import Figma designs, then visually build your app with drag-and-drop components, real data connections, and layout customization. It generates production-ready code for Angular, React, Blazor, and Web Components, with one-click export or deployment to GitHub or Azure.
+
## How Everything Works Together
The diagram below gives you a high-level overview of how App Builder fits into the broader ecosystem of design and development tools:
@@ -14,27 +15,29 @@ The diagram below gives you a high-level overview of how App Builder fits into t
Platform Ecosystem
-### In Simple Terms: +### In Simple Terms -* **Design System → UI Kits & Adapters**: +- **Design System → UI Kits & Adapters**: It starts with a design system, implemented as UI kits (like Indigo.Design for Figma). Adapters translate your design into a format App Builder can use. -* **App Builder + Integrations**: +- **App Builder + Integrations**: You use App Builder to visually create your app. It supports REST data, Reveal SDK widgets (for dashboards), and Slingshot tasks (for project management). -* **Common App Model**: +- **Common App Model**: Everything flows into a central **Common App Model**—a unified format that describes your app, regardless of how you started (design import or manual build). -* **Code Generation (Codegen)**: +- **Code Generation (Codegen)**: The model is then used by the **code generator**, which outputs real, usable code for: - * **Angular** - * **React** - * **Web Components** - * **Blazor** -* **Deployment Targets**: + - **Angular** + - **React** + - **Web Components** + - **Blazor** +- **Deployment Targets**: Finally, the generated code can be deployed directly to platforms like **GitHub** or **Microsoft Azure**. ## Launch App Builder + To access App Builder, navigate to [https://appbuilder.dev](https://appbuilder.dev) and sign in. Alternatively, you can launch App builder directly by visiting [https://my.appbuilder.dev](https://my.appbuilder.dev). You will need an active trial or paid subscription to create and edit apps. ## Create new app + There are three ways in which you can create a new app from the "Create new application" dialog: 1. **Sample apps** - the getting started apps will help you explore applications that have been created using the App Builder and also allow you to modify them in your own user space. They are also a good source for you to preview generated code for a larger application without having to create your own app from scratch. If you use the App Builder for first time, we recommend to use the sample app option as a starting point. This is the quickest way to onboard yourself with the awesome features of the tool and to start building your application. @@ -56,8 +59,9 @@ Note that once in the App Builder, users are enabled to easily switch between thSide menu
## Getting the code + The App Builder always displays a live-running web application both on the design surface and in the preview window. The underlying code and application model are updated in real time as you make changes to the application in the design surface. You can view the generated application code at any time in the preview window and you can also download the generated application at any time as a complete application code repository, which you can then open in a code editor of your choice. Then you can build and run the application you've designed using the App Builder locally on your machine and you can make additional modifications on the generated code. - +
Application preview window
@@ -70,6 +74,7 @@ The App Builder always displays a live-running web application both on the desig > Once the code for your application is downloaded, changes made locally will not be reflected in your App Builder user space. ## On-Premises version of App Builder + App Builder is a SaaS which provides Developers, Designers and Product Managers with a consolidated platform for software product discovery, software product design, building interactive product PoCs and emitting pixel-perfect code projects ready for subsequent modifications. Some businesses are part of highly regulated industries. Mostly for security reasons, a lot of them have limited to no access to cloud-based solutions like the App Builder, or limited internet connectivity in certain locations. In order to cover this segment, we had to provide an easy way for such organizations to bring the App Builder behind the firewall, by allowing them to use their own instance of the platform to run on their own infrastructure and to be accessible only by internal personnel. @@ -118,12 +123,13 @@ In order to run the downloaded application, the following prerequisites need to [This repository](https://github.com/IgniteUI/app-builder) is intended for issues and feature requests submission, as well as for general product discussions, questions and any feedback that you want to share. You can also send us an email. ## Additional Resources + -* [App Builder Interface Overview](interface-overview.md) -* [Single Page And Navigation](single-page-apps-and-navigation.md) -* [App Builder Components](indigo-design-app-builder-components.md) -* [Flex Layouts](flex-layouts/flex-layouts.md) -* [Running Desktop App](running-desktop-app.md) -* [Generate app](generate-app/generate-app-overview.md) -* [Indigo.Design Getting Started]({environment:infragisticsBaseUrl}/products/indigo-design/help/getting-started) \ No newline at end of file +- [App Builder Interface Overview](interface-overview.md) +- [Single Page And Navigation](single-page-apps-and-navigation.md) +- [App Builder Components](indigo-design-app-builder-components.md) +- [Flex Layouts](flex-layouts/flex-layouts.md) +- [Running Desktop App](running-desktop-app.md) +- [Generate app](generate-app/generate-app-overview.md) +- [Indigo.Design Getting Started]({environment:infragisticsBaseUrl}/products/indigo-design/help/getting-started) diff --git a/en/guide-to-variables-in-app-builder/component-properties-binding.md b/en/guide-to-variables-in-app-builder/component-properties-binding.md index 6779413..bfb9612 100644 --- a/en/guide-to-variables-in-app-builder/component-properties-binding.md +++ b/en/guide-to-variables-in-app-builder/component-properties-binding.md @@ -47,6 +47,7 @@ Understanding the scope of variables is crucial, Sso here is what we've learned: - **Local Variables**: Handle data exchange within the components of the same view. ## Takeaways + What's the essence of App Builder components binding? - **Enhanced Flexibility**: Variables in App Builder allow for more flexible and efficient data binding, reducing the need for data repeaters. @@ -58,10 +59,10 @@ What's the essence of App Builder components binding? -* [Variables management](variables-management.md) -* [URL parameters binding](url-parameters-binding.md) -* [Navigation with Route parameters](route-parameters-navigation.md) -* [Working with Events and Actions](working-with-events-and-actions.md) -* [Master-detail concept](../master-detail/master-detail.md) -* [Step-by-step App Creation examples](../master-detail/step-by-step-examples.md) -* [App Builder Components](../indigo-design-app-builder-components.md) \ No newline at end of file +- [Variables management](variables-management.md) +- [URL parameters binding](url-parameters-binding.md) +- [Navigation with Route parameters](route-parameters-navigation.md) +- [Working with Events and Actions](working-with-events-and-actions.md) +- [Master-detail concept](../master-detail/master-detail.md) +- [Step-by-step App Creation examples](../master-detail/step-by-step-examples.md) +- [App Builder Components](../indigo-design-app-builder-components.md) diff --git a/en/guide-to-variables-in-app-builder/route-parameters-navigation.md b/en/guide-to-variables-in-app-builder/route-parameters-navigation.md index a96a683..cce8f43 100644 --- a/en/guide-to-variables-in-app-builder/route-parameters-navigation.md +++ b/en/guide-to-variables-in-app-builder/route-parameters-navigation.md @@ -1,6 +1,6 @@ # Guide to Navigation with Route Parameters -As part of supporting the application state, using of variables in App Builder now facilitates the navigation within the application with a *special kind* of variables, i.e. `Route parameters`. +As part of supporting the application state, using of variables in App Builder now facilitates the navigation within the application with a _special kind_ of variables, i.e. `Route parameters`. ## Understanding Route Parameters @@ -57,9 +57,9 @@ In option 2, when a value for customerID param is not set, the handling of the ` -* [Component properties binding](component-properties-binding.md) -* [URL parameters binding](url-parameters-binding.md) -* [Working with Events and Actions](working-with-events-and-actions.md) -* [Master-detail concept](../master-detail/master-detail.md) -* [Step-by-step App Creation examples](../master-detail/step-by-step-examples.md) -* [App Builder Components](../indigo-design-app-builder-components.md) \ No newline at end of file +- [Component properties binding](component-properties-binding.md) +- [URL parameters binding](url-parameters-binding.md) +- [Working with Events and Actions](working-with-events-and-actions.md) +- [Master-detail concept](../master-detail/master-detail.md) +- [Step-by-step App Creation examples](../master-detail/step-by-step-examples.md) +- [App Builder Components](../indigo-design-app-builder-components.md) diff --git a/en/guide-to-variables-in-app-builder/url-parameters-binding.md b/en/guide-to-variables-in-app-builder/url-parameters-binding.md index abee05a..5976acb 100644 --- a/en/guide-to-variables-in-app-builder/url-parameters-binding.md +++ b/en/guide-to-variables-in-app-builder/url-parameters-binding.md @@ -9,6 +9,7 @@ keywords: "App Builder, Infragistics, URL Parameter Binding, Data Requests, Data App Builder allows for sophisticated data manipulation and display techniques, including the use of URL parameters for data requests and repeaters. This functionality is crucial for creating dynamic, data-driven applications. ## Data Requests + When working with data endpoints that require path or query parameters, App Builder's URL parameter binding feature becomes invaluable. This feature enables the application to make data requests based on parameters provided in the URL. For instance, consider a Grid component bound to Customer Orders. By using a “CustomerID” path parameter, the Grid dynamically fetches and displays data relevant to the specified customer. > [!NOTE] @@ -25,6 +26,7 @@ Data repeaters take this concept further. For example, a Tree node component canData repeaters
## Takeaways + URL parameters binding in the App Builder opens up a myriad of possibilities for creating dynamic, data-driven applications. By leveraging this feature, you can build applications that respond intelligently to user navigation and input, enhancing the overall user experience and the applicability of your applications in real-world scenarios. - **Dynamic Data Fetching**: URL parameter binding in App Builder enables dynamic data fetching, allowing components like Grids and Trees to display data based on URL parameters. @@ -37,10 +39,10 @@ URL parameters binding in the App Builder opens up a myriad of possibilities for -* [Variables management](variables-management.md) -* [Navigation with Route parameters](route-parameters-navigation.md) -* [Component properties binding](component-properties-binding.md) -* [Working with Events and Actions](working-with-events-and-actions.md) -* [Master-detail concept](../master-detail/master-detail.md) -* [Step-by-step App Creation examples](../master-detail/step-by-step-examples.md) -* [App Builder Components](../indigo-design-app-builder-components.md) \ No newline at end of file +- [Variables management](variables-management.md) +- [Navigation with Route parameters](route-parameters-navigation.md) +- [Component properties binding](component-properties-binding.md) +- [Working with Events and Actions](working-with-events-and-actions.md) +- [Master-detail concept](../master-detail/master-detail.md) +- [Step-by-step App Creation examples](../master-detail/step-by-step-examples.md) +- [App Builder Components](../indigo-design-app-builder-components.md) diff --git a/en/guide-to-variables-in-app-builder/variables-management.md b/en/guide-to-variables-in-app-builder/variables-management.md index 555ed7a..6be8566 100644 --- a/en/guide-to-variables-in-app-builder/variables-management.md +++ b/en/guide-to-variables-in-app-builder/variables-management.md @@ -25,6 +25,7 @@ For primitive types, you can set a Default value using a value editor. For Array ## How to Create a Variable? ### Interactions Section + Manage your variables through the Interactions section, associated with the specific component event that will utilize the Variable. For instance, if you add a Combo bound to the Financial -> Box Office Revenue table and add a Selection Changed event handler with a Set Variable Action, you can select the Variable field and use the “+ new variable” button. @@ -58,7 +59,7 @@ Here, you can create and edit variables. A validation process assists with the n Below, more details on utilizing Variables are provided. -## Initialize Data from an Endpoint +## Initialize Data from an Endpoint Store data in a Variable and use it in the data context for any component. The Variable type is automatically determined based on the selected endpoint's Data Schema. @@ -92,10 +93,10 @@ By mastering these aspects of variable management in App Builder, developers can -* [Component properties binding](component-properties-binding.md) -* [URL parameters binding](url-parameters-binding.md) -* [Navigation with Route parameters](route-parameters-navigation.md) -* [Working with Events and Actions](working-with-events-and-actions.md) -* [Master-detail concept](../master-detail/master-detail.md) -* [Step-by-step App Creation examples](../master-detail/step-by-step-examples.md) -* [App Builder Components](../indigo-design-app-builder-components.md) \ No newline at end of file +- [Component properties binding](component-properties-binding.md) +- [URL parameters binding](url-parameters-binding.md) +- [Navigation with Route parameters](route-parameters-navigation.md) +- [Working with Events and Actions](working-with-events-and-actions.md) +- [Master-detail concept](../master-detail/master-detail.md) +- [Step-by-step App Creation examples](../master-detail/step-by-step-examples.md) +- [App Builder Components](../indigo-design-app-builder-components.md) diff --git a/en/guide-to-variables-in-app-builder/working-with-events-and-actions.md b/en/guide-to-variables-in-app-builder/working-with-events-and-actions.md index 2e54846..4868435 100644 --- a/en/guide-to-variables-in-app-builder/working-with-events-and-actions.md +++ b/en/guide-to-variables-in-app-builder/working-with-events-and-actions.md @@ -54,10 +54,10 @@ A notable aspect of the Combo component is its behavior with the `valueKey` attr -* [Variables management](variables-management.md) -* [Navigation with Route parameters](route-parameters-navigation.md) -* [Component properties binding](component-properties-binding.md) -* [URL Parameters binding](url-parameters-binding.md) -* [Master-detail concept](../master-detail/master-detail.md) -* [Step-by-step App Creation examples](../master-detail/step-by-step-examples.md) -* [App Builder Components](../indigo-design-app-builder-components.md) \ No newline at end of file +- [Variables management](variables-management.md) +- [Navigation with Route parameters](route-parameters-navigation.md) +- [Component properties binding](component-properties-binding.md) +- [URL Parameters binding](url-parameters-binding.md) +- [Master-detail concept](../master-detail/master-detail.md) +- [Step-by-step App Creation examples](../master-detail/step-by-step-examples.md) +- [App Builder Components](../indigo-design-app-builder-components.md) diff --git a/en/how-to/responsive-fluid-layout.md b/en/how-to/responsive-fluid-layout.md index e07202f..4f46587 100644 --- a/en/how-to/responsive-fluid-layout.md +++ b/en/how-to/responsive-fluid-layout.md @@ -5,22 +5,23 @@ _keywords: App builder fluid layouts, Ignite UI, Infragistics --- # Responsive fluid layouts + Fluid layouts are always a challenge to create. In this mini tutorial you will see how to quickly create a 3-column layout and then make it behave **responsive** when the screen size changes.  -This tutorial will show you how to use the Layout properties in App Builder to achieve this dynamic stacking effect. +This tutorial will show you how to use the Layout properties in App Builder to achieve this dynamic stacking effect.Quick add a component
-## Configuring components +## Configuring components -Every component comes with a set of preset types that match the Indigo.Design system. For instance, there are three preset types of buttons in the Indigo.Design system - raised, outlined and flat. +Every component comes with a set of preset types that match the Indigo.Design system. For instance, there are three preset types of buttons in the Indigo.Design system - raised, outlined and flat. Component's presets
-For more complex components, like an input field or say card component, you can turn ON/OFF sections of the component. Also, the component properties also reflect the visual structure of the component, and match the specifications you will find in our developer toolkit like [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular). In the case of an input field, you can enable or disable the prefix section to add a leading icon. +For more complex components, like an input field or say card component, you can turn ON/OFF sections of the component. Also, the component properties also reflect the visual structure of the component, and match the specifications you will find in our developer toolkit like [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular). In the case of an input field, you can enable or disable the prefix section to add a leading icon. Turn off component's properties
## Additional Resources + -* [App Themes](app-themes/app-themes.md) -* [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started) -* [Indigo.Design Components]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) +- [App Themes](app-themes/app-themes.md) +- [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started) +- [Indigo.Design Components]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) diff --git a/en/interactions.md b/en/interactions.md index 0e34c59..9eb5f49 100644 --- a/en/interactions.md +++ b/en/interactions.md @@ -9,13 +9,13 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k > The Interactions feature of the App Builder enables users to define particular interactions between views and components, such as Navigate to another view, Show or Hide and Open or Close an app component. +### In this article -### In this article: -* Introduction of the feature -* Interaction: Navigate to -* Interaction: Open/Close -* Interaction: Show/Hide -* Additional Resources +- Introduction of the feature +- Interaction: Navigate to +- Interaction: Open/Close +- Interaction: Show/Hide +- Additional Resources"Navigate to" interaction
@@ -40,15 +42,17 @@ In order to add an interaction, first select the component that will trigger the See [Navigation with Route parameters](guide-to-variables-in-app-builder/route-parameters-navigation.md) for details on how to create enhanced navigation including parameters in the navigation route. ## Open/Close interaction -The Open/Close interaction targets only overlay components, such as Dialog. This means that in order to use it, initially a triggering component, e.g. a button and then an overlay component, e.g. a Dialog, have to be added in the design area. Using the button and dialog example, next step is to select the button, go to Interactions panel and select Open/Close interaction. Once the trigger and the overlay are available, the Open/Close interaction is unlocked and the user can pick the Dialog to be opened upon selection of the button. + +The Open/Close interaction targets only overlay components, such as Dialog. This means that in order to use it, initially a triggering component, e.g. a button and then an overlay component, e.g. a Dialog, have to be added in the design area. Using the button and dialog example, next step is to select the button, go to Interactions panel and select Open/Close interaction. Once the trigger and the overlay are available, the Open/Close interaction is unlocked and the user can pick the Dialog to be opened upon selection of the button. "Open/Close" interaction
-Note that once a Dialog component is added, an overlay notification will appear next to the name of the active view in the design area. By clicking on the overlay, just pick one of the available overlays and it will be activated. Then, it can be edited according to your application scenario. +Note that once a Dialog component is added, an overlay notification will appear next to the name of the active view in the design area. By clicking on the overlay, just pick one of the available overlays and it will be activated. Then, it can be edited according to your application scenario. + +## Show/Hide -## Show/Hide "Show/Hide" is an interaction that can be applied to a component to show and hide another component visibility in the same view. Similar to the other interactions, first has to be selected a component that triggers the interaction, then the targeted component (the one that shows and hides). Picking up the targeted component can be done upon selecting the target icon (next to the active interaction). This will change your mouse cursor to a target icon and then you are expected to click on the component that will show and hide. Once a target component is selected, the cursor goes back to regular. If you want to cancel targeting a component, simply click ESC. Note that targeting is enabled only when the cursor is over components on which the interaction can be applied and this interaction cannot be applied on a layout component or a whole view. In order to check the applied interaction, you can go and test it in Preview mode.  @@ -62,11 +66,11 @@ Note that we are constantly updating the Ignite UI App Builder with new interact -* [Single Page Apps and Navigation](single-page-apps-and-navigation.md) -* [Angular Routing](https://angular.io/start/start-routing) -* [App Builder Components](indigo-design-app-builder-components.md) -* [Flex Layouts](flex-layouts/flex-layouts.md) -* [Running Desktop App](running-desktop-app.md) -* [Generate app](generate-app/generate-app-overview.md) -* [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started) -* [Indigo.Design Components]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) +- [Single Page Apps and Navigation](single-page-apps-and-navigation.md) +- [Angular Routing](https://angular.io/start/start-routing) +- [App Builder Components](indigo-design-app-builder-components.md) +- [Flex Layouts](flex-layouts/flex-layouts.md) +- [Running Desktop App](running-desktop-app.md) +- [Generate app](generate-app/generate-app-overview.md) +- [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started) +- [Indigo.Design Components]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) diff --git a/en/interface-overview.md b/en/interface-overview.md index e8a67aa..85af3f7 100644 --- a/en/interface-overview.md +++ b/en/interface-overview.md @@ -4,7 +4,7 @@ _description: App Builder is a design to code solution, enabling design and _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI kit, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch UI kits --- -# Interface overview +# Interface overview The App Builder interface is similar to the interface of most design tools you may already be used to, with some minor differences. But in all cases you are going to get used to it very quickly. There are four main sections in the App Builder. @@ -13,9 +13,9 @@ There are four main sections in the App Builder.
Interface screen parts
-## Toolbox +## Toolbox -The **Toolbox** is the section on the left-hand side and it includes five tabs for **Components, Views, Data Sources, Themes** and the **Outline Tree**. +The **Toolbox** is the section on the left-hand side and it includes five tabs for **Components, Views, Data Sources, Themes** and the **Outline Tree**. The Components tab gives you access to all available components in App Builder that you can add to your design canvas and configure for use. The search input on the top of the components list makes easy to find a particular component. Below the Components tab you will find the Views tab. In the views tab you can find all the views in the application displayed with their parent-child relationships. The third tab is Data. This is where all data sources and related options are located. You can view and edit all available data sources, as well as add a new one. The fourth tab gives you access to all theming capabilities and to all available preconfigured themes. You can create and edit your own themes and quickly switch between them. The last tab - the Outline Tree - shows you a detailed hierarchy of the components in the selected app view. @@ -30,7 +30,8 @@ On the right side of the screen is the **Property Panel** with viewport, **Desig ## Additional Resources + -* [App Builder Components](indigo-design-app-builder-components.md) -* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder Components](indigo-design-app-builder-components.md) +- [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) diff --git a/en/managing-workspaces.md b/en/managing-workspaces.md index 3d1ed40..2630b69 100644 --- a/en/managing-workspaces.md +++ b/en/managing-workspaces.md @@ -15,6 +15,7 @@ With native workspace support, App Builder no longer relies on Indigo.Design Clo ## Key Features ### Workspace Collaboration + - Invite team members via email. - Add members based on shared workspace suggestions. - Accept invites with email/account validation. @@ -23,31 +24,38 @@ With native workspace support, App Builder no longer relies on Indigo.Design Clo - Pin/unpin workspaces per user preference. ### Workspace Entities + Resources automatically shared across all apps in a workspace: + - Viewports - Themes - Data Sources - Assets (e.g., images) ### App Copy Across Workspaces + Copy an app to another workspace with automatic handling of: + - Shared assets, themes, viewports, variables and datasources. - No GitHub repo links are preserved after copying. ## How to Use ### Create and Manage Workspaces + 1. Access the **Workspace menu** from the App Builder dashboard. 2. Use the existing UI to **create a workspace**, invite users, or update settings. 3. Use the **workspace pinning** option to personalize your menu. ### Invite and Manage Members + - **Invite users via email** directly from App Builder. - Accepting invites includes account validation for security. - Track invite status and resend invitations if needed. - Remove members with immediate effect. ### Copying Applications to Another Workspace + 1. Use the **"Copy to Workspace"** option from an app's context menu. 2. Select the target workspace(s). 3. Confirm the copy action. App Builder will: @@ -81,24 +89,27 @@ Copy an app to another workspace with automatic handling of: | Tracking Invites | Monitor and re-send unaccepted invites from the workspace settings. | - ## Frequently Asked Questions ### Can I see my App Builder workspaces in Indigo.Design? + No. Native workspace support is now fully decoupled from Indigo.Design. Workspaces created in App Builder are not visible or synced with Indigo. ### What happens to my apps and members after migration? + There is **no service interruption** or data loss. All existing workspaces, apps, memberships, and share URLs are preserved. ### Do I need to manually re-link resources when copying an app? + No. App Builder will auto-match resources when possible. Only unmatched resources are duplicated. ## Additional Resources + -* [App Builder Interface Overview](interface-overview.md) -* [Single Page and Navigation](single-page-apps-and-navigation.md) -* [App Builder Components](indigo-design-app-builder-components.md) -* [Flex Layouts](flex-layouts/flex-layouts.md) -* [Running Desktop App](running-desktop-app.md) -* [Generating an App](generate-app/generate-app-overview.md) +- [App Builder Interface Overview](interface-overview.md) +- [Single Page and Navigation](single-page-apps-and-navigation.md) +- [App Builder Components](indigo-design-app-builder-components.md) +- [Flex Layouts](flex-layouts/flex-layouts.md) +- [Running Desktop App](running-desktop-app.md) +- [Generating an App](generate-app/generate-app-overview.md) diff --git a/en/master-detail/master-detail.md b/en/master-detail/master-detail.md index 35ffef0..030da4a 100644 --- a/en/master-detail/master-detail.md +++ b/en/master-detail/master-detail.md @@ -6,12 +6,13 @@ keywords: "App Builder, Infragistics, Master-Detail Pattern, Web Application Dev # Master-Detail Style Apps with Variables & Events -Initially, this feature was planned to follow the basics of the Master-detail design interface. But it evolved into something much more. We are all familiar with the essence of the Master-detail pattern, it is a way to present a list of records and enable the user to manage them with ease. It usually comprises two views - One is the master list of records and the other is used to display extended data about a single record. +Initially, this feature was planned to follow the basics of the Master-detail design interface. But it evolved into something much more. We are all familiar with the essence of the Master-detail pattern, it is a way to present a list of records and enable the user to manage them with ease. It usually comprises two views - One is the master list of records and the other is used to display extended data about a single record.
Master-detail example
## Key Elements of the Master-Detail Pattern in App Builder + The new feature covers these key elements established by the Master-detail pattern: - **Primary Pane**: This area displays a list of items or triggers that initiate the loading of other app components. @@ -26,15 +27,19 @@ The new feature covers these key elements established by the Master-detail patte To create master-detail scenarios in App Builder, we integrate several features: ## Variables Management Topic + Unlock the full potential of your app by diving into [Variables Management](../guide-to-variables-in-app-builder/variables-management.md). Learn how to effectively manage and utilize both global and local variables for enhanced data flow and interactivity. ## Component Properties Binding + Enhance your app's data binding and user experience by exploring [Component Properties Binding](../guide-to-variables-in-app-builder/component-properties-binding.md). Discover how to bind component properties to your data for dynamic and interactive UIs. ## URL Parameters Binding + Delve into [URL Parameters Binding](../guide-to-variables-in-app-builder/url-parameters-binding.md) to learn how to perform data fetching. Learn how to use URL parameters for efficient data requests and repeaters in your applications. ## Working with Events and Actions + Get hands-on with interactive UI design by checking out [Working with Events and Actions](../guide-to-variables-in-app-builder/working-with-events-and-actions.md). Understand how to harness events and actions in App Builder for creating engaging and dynamic user interfaces. ## Known Issues and Limitations @@ -55,11 +60,12 @@ Get hands-on with interactive UI design by checking out [Working with Events and ## Additional Resources - [Variables Management](../guide-to-variables-in-app-builder/variables-management.md) -* [Navigation with Route parameters](../guide-to-variables-in-app-builder/route-parameters-navigation.md) +- [Navigation with Route parameters](../guide-to-variables-in-app-builder/route-parameters-navigation.md) + - [Component Properties Binding](../guide-to-variables-in-app-builder/component-properties-binding.md) - [URL Parameters Binding](../guide-to-variables-in-app-builder/url-parameters-binding.md) - [Working with Events and Actions](../guide-to-variables-in-app-builder/working-with-events-and-actions.md) - [Step-by-Step App Creation Examples](step-by-step-examples.md) - [App Builder Components](../indigo-design-app-builder-components.md) - [Flex Layouts](../flex-layouts/flex-layouts.md) -- [Running Desktop App](../running-desktop-app.md) \ No newline at end of file +- [Running Desktop App](../running-desktop-app.md) diff --git a/en/master-detail/step-by-step-examples.md b/en/master-detail/step-by-step-examples.md index 876e056..37e25de 100644 --- a/en/master-detail/step-by-step-examples.md +++ b/en/master-detail/step-by-step-examples.md @@ -12,15 +12,16 @@ Below you can find real use cases for two scenarios. These scenarios will cover > For the walkthrough below we will be using the [Northwind WebAPI](https://data-northwind.indigo.design/swagger/index.html). ## Example 1 + Global variable set from one View and Updating Grid request from another View through a Views container Live demo -1. Add a Global variable which is set upon the Combo selection change event. The combo is bound to the Customer endpoint -2. Pick a CustomerID from the Combo -3. Go to the other view, where the Grid is bound to an API request fetching orders based on that CustomerID -4. The Grid should be updated with the selected CustomerID (from the Combo) +1. Add a Global variable which is set upon the Combo selection change event. The combo is bound to the Customer endpoint +2. Pick a CustomerID from the Combo +3. Go to the other view, where the Grid is bound to an API request fetching orders based on that CustomerID +4. The Grid should be updated with the selected CustomerID (from the Combo)
Selection Changed event
@@ -28,41 +29,42 @@ Global variable set from one View and Updating Grid request from another View th
CustomerID Variable
-5. Upon clicking on Order from the Orders grid, load another Grid with OrderDetails -6. Result +5. Upon clicking on Order from the Orders grid, load another Grid with OrderDetails +6. Result
Result
## Example 2 + Tree bound to Hierarchical data source loading data for Grid and Chart Live demo -1. Add a Tree component and bind its parent to a Hierarchical data source (Repeated data context). -2. Bind the parent tree node On Click event to a Set variable action that stores the CustomerID - String variable +1. Add a Tree component and bind its parent to a Hierarchical data source (Repeated data context). +2. Bind the parent tree node On Click event to a Set variable action that stores the CustomerID - String variable
Tree node binding
-3. Add a Tree child node and repeat to the Parent data context. Bind the child tree node On Click event to a Set variable action that stores the OrderID - Number variable +3. Add a Tree child node and repeat to the Parent data context. Bind the child tree node On Click event to a Set variable action that stores the OrderID - Number variable
Child node binding
4. Ensure the root tree element shows the Customer and the child tree node shows the Orders -5. Bind a Grid to an endpoint that fetches Orders based on the OrderID variable as a query param +5. Bind a Grid to an endpoint that fetches Orders based on the OrderID variable as a query param
Bind Grid to Orders data
-6. Bind the Chart to an endpoint that fetches Customer orders history based on the CustomerID variable as a query param +6. Bind the Chart to an endpoint that fetches Customer orders history based on the CustomerID variable as a query param
Bind Chart to Customer Orders History table
-7. Result +7. Result
Tree + Grid + Chart Result
diff --git a/en/on-prem-prerequisites-and-installation.md b/en/on-prem-prerequisites-and-installation.md index f9488d7..b8299f8 100644 --- a/en/on-prem-prerequisites-and-installation.md +++ b/en/on-prem-prerequisites-and-installation.md @@ -11,24 +11,25 @@ _keywords: App builder, On-premises, Infragistics This topic lists the prerequisites to install the On-premises version of App Builder and is intended for System Administrators who configure operational parameters that maintain and support Linux/Mac OS/Windows. ### Database Management + Based on your requirements you can decide to use either MySQL or MSSQL Server database management systems. #### MySQL Installation 1 - Install [MySQL community edition](https://dev.mysql.com/doc/refman/8.0/en/installing.html) ([direct link for windows](https://dev.mysql.com/downloads/installer/)) - - Select: - * Developer default, Next and Execute. +- Select: + - Developer default, Next and Execute. > Note: if you get a prompt saying "one or more products requirements have not been satisfied. Do you want to continue?" Just select Yes) - - After installation ends: - * Select next to configure the server, when prompted enter the root password you wish, then Execute. - * After the server configuration ends, select Cancel to exit the installer since the rest of the configuration is not needed. +- After installation ends: + - Select next to configure the server, when prompted enter the root password you wish, then Execute. + - After the server configuration ends, select Cancel to exit the installer since the rest of the configuration is not needed. 2 - Allow container connection to MySQL. -Connect to MySQL with root user and password of step 1 and execute the following sql script (username and pasword will be the ones used from AppBuilder). -> Note: you can use [MySQL Workbench tool](https://dev.mysql.com/downloads/workbench/) to execute sql scripts. +Connect to MySQL with root user and password of step 1 and execute the following sql script (username and password will be the ones used from AppBuilder). +> Note: you can use [MySQL Workbench tool](https://dev.mysql.com/downloads/workbench/) to execute sql scripts. ``` CREATE USER 'username'@'%' IDENTIFIED BY 'password'; @@ -64,6 +65,7 @@ GRANT ALL PRIVILEGES ON *.* TO 'username'@'%' WITH GRANT OPTION; Windows guide -> [docs.microsoft.com guide](https://docs.microsoft.com/en-us/virtualization/windowscontainers/quick-start/set-up-environment?tabs=Windows-10-and-11#tabpanel_1_Windows-10-and-11) ## Installation + This section assumes that you already have docker and an MySQL database installed. ### First time installation @@ -95,7 +97,7 @@ docker images docker run --restart always -p 80:5000 -e "ConnectionStrings:AppBuilderMySqlConnection=server=
Docker Containers/Apps
@@ -133,7 +135,7 @@ docker images | --------: | --------- | ----------------- | ------------- |----- | | appbuilder | 1.0 | 27ff4c1079ac | 43 hours ago |932MB | |Configure Endpoints Dialog
## Using data source from local network sources + You can now make requests to a localhost or private networks. For more information, check out the [private networks usage section](using-data-in-your-app.md#using-data-source-from-local-network-sources) part of _Using data in your application_ topic
@@ -62,12 +65,12 @@ You can now make requests to a localhost or private networks. For more informati
-* [App Builder Components](indigo-design-app-builder-components.md)
-* [App Builder Interface Overview](interface-overview.md)
-* [Single Page And Navigation](single-page-apps-and-navigation.md)
-* [App Builder Components](indigo-design-app-builder-components.md)
-* [Flex Layouts](flex-layouts/flex-layouts.md)
-* [Running Desktop App](running-desktop-app.md)
-* [Generate app](generate-app/generate-app-overview.md)
-* [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started)
-* [Indigo.Design Components]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview)
\ No newline at end of file
+- [App Builder Components](indigo-design-app-builder-components.md)
+- [App Builder Interface Overview](interface-overview.md)
+- [Single Page And Navigation](single-page-apps-and-navigation.md)
+- [App Builder Components](indigo-design-app-builder-components.md)
+- [Flex Layouts](flex-layouts/flex-layouts.md)
+- [Running Desktop App](running-desktop-app.md)
+- [Generate app](generate-app/generate-app-overview.md)
+- [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started)
+- [Indigo.Design Components]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview)
diff --git a/en/preview-code.md b/en/preview-code.md
index 25bd790..6fd4e02 100644
--- a/en/preview-code.md
+++ b/en/preview-code.md
@@ -16,9 +16,9 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
Previewing generated code and downloading your work as an Angular app is the final step after designing one application. The design and development user story will be completed once the application is generated with all styling and layout properties.
-## Preview Code
+## Preview Code
-The preview mode allows you to interact with your design as if it's a running app. For instance, you can resize the viewport to see how the positioning for components behave. But the real value it offers to developers is to preview the app code that is about to be generated. To see this, you can toggle the code-view ON and see it side-by-side with the design. It's in read-only mode, but will help you review the quality of code produced.
+The preview mode allows you to interact with your design as if it's a running app. For instance, you can resize the viewport to see how the positioning for components behave. But the real value it offers to developers is to preview the app code that is about to be generated. To see this, you can toggle the code-view ON and see it side-by-side with the design. It's in read-only mode, but will help you review the quality of code produced.

View code in the Preview mode
@@ -35,10 +35,10 @@ Moreover, you are skipping the hand-off where developers have to inspect the vis -* [Generate App](./generate-app/generate-app-overview.md) -* [App Builder Components](indigo-design-app-builder-components.md) -* [Flex Layouts](flex-layouts/flex-layouts.md) -* [Running Desktop App](running-desktop-app.md) -* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) -* [App Builder Components]({environment:appbuilderBaseUrl}/components) +- [Generate App](./generate-app/generate-app-overview.md) +- [App Builder Components](indigo-design-app-builder-components.md) +- [Flex Layouts](flex-layouts/flex-layouts.md) +- [Running Desktop App](running-desktop-app.md) +- [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder Components]({environment:appbuilderBaseUrl}/components) diff --git a/en/running-desktop-app.md b/en/running-desktop-app.md index 0f27119..902d390 100644 --- a/en/running-desktop-app.md +++ b/en/running-desktop-app.md @@ -1,5 +1,6 @@ ## Running Desktop app + Stay connected to your apps on any device. Everyone needs instant access to their work no matter where they are – we’ve got you covered! Mobile, desktop, or web, App Builder is designed, so you can empower your team to reach its full potential from any device, even on the go. - [Windows installer](https://github.com/IgniteUI/app-builder-client/releases/latest/download/AppBuilder.exe) @@ -10,9 +11,11 @@ Stay connected to your apps on any device. Everyone needs instant access to thei ## Troubleshooting ### Linux installer -Have in mind that when you download the AppBuilder.AppImage file on Linux it may not be executable by default. So in order to be able to run it you should do the following things: + +Have in mind that when you download the AppBuilder.AppImage file on Linux it may not be executable by default. So in order to be able to run it you should do the following things: + 1. Navigate to its folder -2. Open terminal and write the following command chmod +x AppBuilder.AppImage. +2. Open terminal and write the following command chmod +x AppBuilder.AppImage. 3. Right click on the file, click on the Run button and the app will start.  @@ -21,30 +24,32 @@ Have in mind that when you download the AppBuilder.AppImage file on Linux The following error might be thrown while using the Desktop application _"Disconnected - it seems browser cannot connect to our servers."_ -Possible reason for the error could be that the proxy server is blocking some requests (company policy limitations). +Possible reason for the error could be that the proxy server is blocking some requests (company policy limitations). -A resolution for that problem would be whitelisting **"*.indigo.design"** and **"*.infragistics.com"** for both **https** and **secure websocket**. +A resolution for that problem would be whitelisting **"*.indigo.design"** and **"*.infragistics.com"** for both **https** and **secure websocket**. + +_The detailed list is as follows:_ -_The detailed list is as follows: _ - https://my.appbuilder.dev (https 443) -- wss://my.appbuilder.dev (websocket 443) -- https://cloud.indigo.design (https 443) -- https://igniteuithemingwidget-previous.infragistics.com (https 443) -- https://igniteuithemingwidget-prod.infragistics.com (https 443) -- https://iam.infragistics.com (https 443) +- wss://my.appbuilder.dev (websocket 443) +- https://cloud.indigo.design (https 443) +- https://igniteuithemingwidget-previous.infragistics.com (https 443) +- https://igniteuithemingwidget-prod.infragistics.com (https 443) +- https://iam.infragistics.com (https 443) Disconnected error
## Additional Resources + -* [App Builder Interface Overview](interface-overview.md) -* [Single Page And Navigation](single-page-apps-and-navigation.md) -* [App Builder Components](indigo-design-app-builder-components.md) -* [Flex Layouts](flex-layouts/flex-layouts.md) -* [Running Desktop App](running-desktop-app.md) -* [Generate app](generate-app/generate-app-overview.md) -* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder Interface Overview](interface-overview.md) +- [Single Page And Navigation](single-page-apps-and-navigation.md) +- [App Builder Components](indigo-design-app-builder-components.md) +- [Flex Layouts](flex-layouts/flex-layouts.md) +- [Running Desktop App](running-desktop-app.md) +- [Generate app](generate-app/generate-app-overview.md) +- [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) diff --git a/en/sdk/sdk.md b/en/sdk/sdk.md index 6bde027..804d25d 100644 --- a/en/sdk/sdk.md +++ b/en/sdk/sdk.md @@ -1,6 +1,7 @@ # Getting Started with the App Builder SDK ## SDK Overview + The App Builder SDK provides a comprehensive toolkit for integrating both front-end and back-end capabilities into your applications. To begin, [you can use the Help Documentation](https://github.com/IgniteUI/appbuilder-sdk-sample/blob/main/Documentation/Consuming-AB-SDK-all-in-one-doc.md) and create an Angular host application that consumes the front-end SDK package, enabling seamless UI integration. On the server side, you can build a custom backend using the App Builder Backend SDK, with support for development environments like Visual Studio Code and Visual Studio. These foundational steps ensure that your application is fully equipped to leverage the SDK’s capabilities from both ends.
@@ -9,9 +10,10 @@ The App Builder SDK provides a comprehensive toolkit for integrating both front-
The documentation further covers the Authentication and authorization key components of the SDK setup. You can configure [OpenID authentication](../on-premises/auth-with-openid-connect-o-auth.md) to allow users to log in using external identity providers, offering flexibility beyond the default IAM provider. Additionally, the SDK supports external authentication flows such as Authorization Code + PKCE, and allows the host application to manage authentication directly. For more advanced scenarios, you can customize the IAuthUserService and IPermissionsService interfaces to implement tailored logic for user roles and permissions. Optional guides are available to help configure backend endpoints that enforce role-based access control, ensuring secure and scalable integration.
## Additional Resources
+
-* [App Builder Interface Overview](../interface-overview.md)
-* [Single Page And Navigation](../single-page-apps-and-navigation.md)
-* [App Builder Components](../indigo-design-app-builder-components.md)
-* [Running Desktop App](../running-desktop-app.md)
\ No newline at end of file
+- [App Builder Interface Overview](../interface-overview.md)
+- [Single Page And Navigation](../single-page-apps-and-navigation.md)
+- [App Builder Components](../indigo-design-app-builder-components.md)
+- [Running Desktop App](../running-desktop-app.md)
diff --git a/en/share-preview-edit-app.md b/en/share-preview-edit-app.md
index c57a6d7..5518416 100644
--- a/en/share-preview-edit-app.md
+++ b/en/share-preview-edit-app.md
@@ -4,10 +4,12 @@ _description: App Builder enables users to choose the desired platform for code
_keywords: App Builder, Web App Builder, Preview apps, Edit applications, Share apps
---
# Share, Preview and Edit Applications
+
This topic provides detailed explanation on how to share application with other users, how to grant them with editing capabilities and how to set different App Preview settings and app description for more meaningful social platform sharing.
## Share application
-A share button has been added in Design mode to make friendlier experience for the [Desktop App](https://github.com/IgniteUI/app-builder-client/releases/tag/1.0.1) and also customize permissions if needed.
+
+A share button has been added in Design mode to make friendlier experience for the [Desktop App](https://github.com/IgniteUI/app-builder-client/releases/tag/1.0.1) and also customize permissions if needed.
You can customize the sharing experience with a toggle "Allow anyone to preview using this link". There is a a warning icon that hints how to disable the app link in order to stop the access to the app.
@@ -24,26 +26,32 @@ Share button is also available from the workspace view through the "more actions
## Preview and Edit application
### Signed-in user accessing app from your personal workspace
+
#### App preview link
+
If you share **app preview link** from your personal workspace with a **signed-in user**, the latter will have access to **preview the app** but will see it with **mock data**. The same applies for Anonymous (not signed-in) users.
> [!NOTE]
> Mock data will always be used for non-workspace member
#### Edit link
+
If you share **app edit link** from your personal workspace with a **signed-in user**, the latter won't have access to edit and will receive _You don't have access to edit_ message.
You don't have access to edit
### Signed-in user part of the app's workspace + #### App preview link + If you share **app preview link** with a **signed-in user** that is **part of the app's workspace**, the latter will have access to **preview and edit the app**. He will be able to also see **real data** if configured, not **mock data**. Data requests will be made with the encrypted token and the real data will be fetched.Shared workspace with real data
#### Edit link + If you share **app edit link** with a **signed-in user** that is **part of the app's workspace** he will have access to edit the application if no one is currently editing it.Only invited members can edit the app
### Signed-in user with disabled link preview + You can always stop sharing an app by disabling the link share with the switch. If you **stop sharing** an app from your personal workspace with a **signed-in user** the following "Access is restricted" dialog will appear. A "contact us" redirect button will be shown and "Sign out" button if you want to sign out from the App Builder. @@ -63,15 +72,18 @@ A "contact us" redirect button will be shown and "Sign out" button if you want tAccess is restricted
### Anonymous user app preview + Application preview is available for Anonymous users. Keep in mind that all edit operations will be disabled. Main menu is not loaded and only **Code view** is available. Anonymous users will always see **mock data** if REST API calls are configured within the app.Anonymous access preview
### Anonymous user accessing application from a personal workspace + If Anonymous (not signed in) user is accessing the application he will be able to **preview** it. Anonymous users will always see **mock data** if REST API calls are configured within the app. ### Anonymous user with disabled link preview + Anonymous users won't have access to restricted applications. You can always use the "Get started for free" button and create a trial account to try out all the other available App Builder features.
Add layout preset from the Menu button, then select Create New App
> [!Video https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw] -## Parent view vs. Child views +## Parent view vs. Child views -What you see here is the master view. And when you look at the views list in the toolbox, you can see that there are two child views nested under it. Each child view corresponds to the navigation buttons in the primary toolbar area. When you preview the app, you will see that clicking on view 1 shows you content available inside view 1, and similarly for view 2. +What you see here is the master view. And when you look at the views list in the toolbox, you can see that there are two child views nested under it. Each child view corresponds to the navigation buttons in the primary toolbar area. When you preview the app, you will see that clicking on view 1 shows you content available inside view 1, and similarly for view 2. Switch between views - layout preset
-Regarding the master view and child view concept, it should be noted that the master view represents the shell of your app, and can container UI elements that will be shared across all it's child views. In this case, the navigation toolbar and the side navigation are the shared components. To inject the child views based on navigation, you can add a component called a views-container to serve as a place-holder. And this is the area where child-views are rendered. The Views-container, by default, occupies the available space. +Regarding the master view and child view concept, it should be noted that the master view represents the shell of your app, and can container UI elements that will be shared across all it's child views. In this case, the navigation toolbar and the side navigation are the shared components. To inject the child views based on navigation, you can add a component called a views-container to serve as a place-holder. And this is the area where child-views are rendered. The Views-container, by default, occupies the available space. Switch between views - sample app
@@ -37,7 +37,7 @@ The views-container has a property to define which of the two child views will b ## Add navigations (routing) -To connect the navigation to the child views, a navigation action to the button in the 'interactions' section can be added. Currently, we offer Navigate to and Toggle (for components like Nav Drawer, Dropdown and Select) actions, but we'll be adding more actions in future releases. +To connect the navigation to the child views, a navigation action to the button in the 'interactions' section can be added. Currently, we offer Navigate to and Toggle (for components like Nav Drawer, Dropdown and Select) actions, but we'll be adding more actions in future releases.
Define navigation - sample app
-That's it for single page apps and the navigation feature. To summarize, child views are injected inside the master view based on navigate action. Child views are hosted inside the master view using the views-container component. And components added to the master view are shared across all it's children views.
+That's it for single page apps and the navigation feature. To summarize, child views are injected inside the master view based on navigate action. Child views are hosted inside the master view using the views-container component. And components added to the master view are shared across all it's children views.
## Additional Resources
-* [Preview Code and Generate App](preview-code.md)
-* [Angular Routing](https://angular.io/start/start-routing)
-* [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started)
-* [App Builder Components]({environment:appbuilderBaseUrl}/components)
-* [Indigo.Design Components]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview)
+- [Preview Code and Generate App](preview-code.md)
+- [Angular Routing](https://angular.io/start/start-routing)
+- [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started)
+- [App Builder Components]({environment:appbuilderBaseUrl}/components)
+- [Indigo.Design Components]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview)
diff --git a/en/toolbox/grid/master-detail-template.md b/en/toolbox/grid/master-detail-template.md
index 439ab1b..715f895 100644
--- a/en/toolbox/grid/master-detail-template.md
+++ b/en/toolbox/grid/master-detail-template.md
@@ -8,16 +8,16 @@ Master-detail template allow you to enrich your data grids by expanding rows to
With **App Builder’s Master-Detail template support**, you can:
-* Use **expandable rows** that reveal additional row data.
-* Leverage Component binding support - Add **cards, text blocks or other components** that can use row-specific data.
+- Use **expandable rows** that reveal additional row data.
+- Leverage Component binding support - Add **cards, text blocks or other components** that can use row-specific data.
## How It Works in App Builder
-* App Builder offers a **design-time experience** for inserting components inside the row detail area.
-* Components inside this area can be bound to:
- * The current **row’s data context**.
- * Other data sources and Variables context.
-* You can easily preview how these template will appear directly inside the App Builder Canvas and App Preview.
+- App Builder offers a **design-time experience** for inserting components inside the row detail area.
+- Components inside this area can be bound to:
+ - The current **row’s data context**.
+ - Other data sources and Variables context.
+- You can easily preview how these template will appear directly inside the App Builder Canvas and App Preview.
## Try It Out
@@ -30,6 +30,7 @@ To start using Master-Detail template:
5. Preview your app and export your code to extend the functionality even further.
## Known Limitations
+
### Contextual binding, Row ID Parameters Not Supported
When using a component within a Master-Detail template, **contextual binding using the current row’s ID as a parameter is not supported**. If the component’s data source requires parameters, these must not be bound to the master-detail (row) context. Instead, use manual values or predefined variables. This restriction helps avoid unsupported code generation scenarios involving per-row parameter binding.
@@ -38,6 +39,7 @@ When using a component within a Master-Detail template, **contextual binding usi
> This limitation applies only to data source parameters and iterated element data bindings. Other parameter picker components—such as those in the Set Data action sections for component interactions—are not affected and remain fully supported.
This restriction helps avoid:
+
- Ambiguity around dynamic subscriptions.
- Performance bottlenecks due to lack of caching.
@@ -52,8 +54,9 @@ Overlay elements like **Dialogs** or **Banners**, placed inside master-detail te
While these components may appear functional in the App Builder preview, they **do not retain the row data context** in the generated application. For example, a dialog meant to show details like `EmployeeId` will not have access to that value at local runtime.
### Working with Conditional Actions
+
Binding a parameter or comparison value in a Conditional Action to the Template context is not yet supported. At this time, only component properties and SetVariable support binding to the Template context.
## Resources
-* [Fleet Management Sample (GitHub)](https://www.infragistics.com/products/ignite-ui-angular/grid-samples)
\ No newline at end of file
+- [Fleet Management Sample (GitHub)](https://www.infragistics.com/products/ignite-ui-angular/grid-samples)
diff --git a/en/toolbox/reveal-dashboard.md b/en/toolbox/reveal-dashboard.md
index a1b59e8..597ccb4 100644
--- a/en/toolbox/reveal-dashboard.md
+++ b/en/toolbox/reveal-dashboard.md
@@ -5,6 +5,7 @@ _keywords: App builder, Infragistics, Reveal BI
---
# Reveal Dashboard
+
You can now add a Reveal Dashboard directly from the App Builder Toolbox and specify your URL to the Reveal Server SDK hosting your data. Consider the App Builder as a Client application that gets a baseURL which is the endpoint of your server that the App Builder will send/receive the requests and responses from.
When the Reveal Dashboard is loaded you can specify a Dashboard name out of the four available options - Marketing, Sales, Campaigns, and Manufacturing. We do host our own server for testing purposes only. Upon export, you will get a reference to our Trial server (base URL) exposing only the Marketing dashboard for demo purposes.
@@ -15,6 +16,7 @@ When the Reveal Dashboard is loaded you can specify a Dashboard name out of the
## Known issues and limitations
+
- Reveal dashboard Code generation is available **only for Angular.**
- Only one base URL binding is supported per view. If two or more Reveal dashboards are added to the App Builder View, they should be using the same base URL.
- Using Custom Theme with font that contains spaces doesn't affect text inside visualizations.
@@ -22,4 +24,4 @@ When the Reveal Dashboard is loaded you can specify a Dashboard name out of the
- Reveal View resizing problems when Display scale is different than 100%, noticeable with the vertical/horizontal scrollbar. **Workaround:** set Padding of the wrapping (parent) Reveal Dashboard. [Example](https://my.appbuilder.dev/app/wrwn5yv0tcjg/preview) with padding of the step container where the reveal dashboard is places.
- Editing dashboards in App Builder Preview might lead to unexpected errors from the server *Unexpected error - Quill is not defined*
- Upon code export:
- - There might be sizing problems when you interact with the dashboard elements and expand/collapse them. The Reveal placeholder is sizing itself properly when the whole browser window is resized, although thats not the case for the internal elements sizing changes.
\ No newline at end of file
+ - There might be sizing problems when you interact with the dashboard elements and expand/collapse them. The Reveal placeholder is sizing itself properly when the whole browser window is resized, although thats not the case for the internal elements sizing changes.
diff --git a/en/ui-kits/adobe-xd.md b/en/ui-kits/adobe-xd.md
index e597969..c672ccc 100644
--- a/en/ui-kits/adobe-xd.md
+++ b/en/ui-kits/adobe-xd.md
@@ -18,8 +18,8 @@ Crafted from the ground-up to equip designers with a modern and easy-to-use arse
There are a couple pre-requisites to get started:
-1. Login to your account or start a free trial of App Builder
-2. Login to your account or start a free trial of Adobe XD
+1. Login to your account or start a free trial of App Builder
+2. Login to your account or start a free trial of Adobe XD
Once you have installed Adobe XD, you need to install the Indigo.Design App Builder plugin, which enables design to code. You can access this from the Stock & Marketplace -> Plugins in the Creative Cloud app, simply search for Indigo.Design.
@@ -34,14 +34,15 @@ For more in-depth tutorial how to import your Adobe XD designs into App Builder,
You can download the Adobe XD Plugin, UI kit and sample apps from the [Download Assets page.](https://cloud.indigo.design/resources/adobe-xd).
Or through the direct links below:
+
- [Adobe XD UI Kit](https://assets.adobe.com/public/c1a672c5-49e6-4df1-4d32-1c37fa234f1e)
-- [Plugin for Adobe XD](https://exchange.adobe.com/creativecloud/plugindetails.html/app/cc/92c7dec5)
+- [Plugin for Adobe XD](https://exchange.adobe.com/creativecloud/plugindetails.html/app/cc/92c7dec5)
- [Sample Apps](https://download.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps_XD.zip)
## Additional Resources
-* [Design to code story](../design-to-code-story.md)
-* [Figma UI Kit](figma.md)
-* [Sketch UI Kit](sketch.md)
+- [Design to code story](../design-to-code-story.md)
+- [Figma UI Kit](figma.md)
+- [Sketch UI Kit](sketch.md)
diff --git a/en/ui-kits/figma.md b/en/ui-kits/figma.md
index 6aefddf..2791ca6 100644
--- a/en/ui-kits/figma.md
+++ b/en/ui-kits/figma.md
@@ -5,6 +5,7 @@ _keywords: App Builder, Web App Builder, Figma design
---
# Figma UI Kit
+
The brand-new Figma Indigo.Design UI Kit for Material maps to our Ignite UI for Angular, Blazor and Web Components UI toolset to completely redefine design-development processes. You now get a robust set of components, patterns, styling, and customization options, enabling you to import prototypes or any type of screen designed in Figma and transform it clean code. The best part is that all static designs become interactive, responsive apps with real UI components, branding, and styling – in a single click.
> [!NOTE]
@@ -14,6 +15,7 @@ The brand-new Figma Indigo.Design UI Kit for Material maps to our Ignite UI fo
Figma UI Kit
## Using the kit as a free Figma user vs Pro user + The Indigo.Design UI Kit for Material can be used by everyone, regardless of the user's chosen Figma plan. However, there are certain limitations that you should be aware of. If you're designing for a specific device or screen size, you may want to create a container for your designs. This is where frames come in. Frames allow you to choose an area of the canvas to create your designs in. @@ -21,7 +23,8 @@ If you're designing for a specific device or screen size, you may want to create
Add a frame
-### Figma Pro User Account +### Figma Pro User Account + In case you are a user, signed with a Professional Figma account, then the way to use the Indigo.Design UI Kit for Material is by simply creating a duplicate of the UI Kit from the Figma community. Once you have duplicated (Get a copy) the file, it will be placed in “Recent files”.
@@ -49,7 +52,7 @@ The activation is from _Assets > Team library icon > use the switch to activate
### Figma Free User Account
-For users with a “Free account”, the way to use the UI Kit is quite similar. Once you duplicate the file from the Figma community, you need to move it from **Recent files** to your team space. Open the file and use the chevron arrow, placed right next to the file's name, in order to move the file into your team space. Keep in mind that using the **Free Figma plan**, allows you to have a maximum of three projects, each of which can contain only three files. Once the file is moved, the following step is to open the file and go to the Assets panel. Click on the Team library icon, and you should be able to publish this file as a library, which will distribute only the color styles and typography to the rest of your team.
+For users with a “Free account”, the way to use the UI Kit is quite similar. Once you duplicate the file from the Figma community, you need to move it from **Recent files** to your team space. Open the file and use the chevron arrow, placed right next to the file's name, in order to move the file into your team space. Keep in mind that using the **Free Figma plan**, allows you to have a maximum of three projects, each of which can contain only three files. Once the file is moved, the following step is to open the file and go to the Assets panel. Click on the Team library icon, and you should be able to publish this file as a library, which will distribute only the color styles and typography to the rest of your team.
From now on, every time you start a project or continue to work on an existing one within your team space, you will be able to activate this library and use it directly inside your project. The activation is from _Assets > Team library icon > use the switch button to activate the library_.
@@ -60,27 +63,28 @@ From now on, every time you start a project or continue to work on an existing o
Publish styles
-Here is the difference with the Professional plan. You, as a **Free account user**, cannot use the library’s components directly from the Assets panel, therefore you need to copy all the needed components from the UI Kit file and paste them into your project file. This will break the link between the UI Kit library and the components you have copied, so any updates you make inside the UI Kit will not be applied directly to the components you have copied and pasted inside your project file. Only color styles and typography styles can be updated automatically. In case you have copied a button from the UI Kit and you have pasted it inside your project and want to make a change of its appearance over time, you can either detach the button and apply that change locally in your project file, or apply that change inside the UI Kit file and copy the button component again and paste it inside your project file. Then you should delete the old button, so there is no duplication of components with the same name. +Here is the difference with the Professional plan. You, as a **Free account user**, cannot use the library’s components directly from the Assets panel, therefore you need to copy all the needed components from the UI Kit file and paste them into your project file. This will break the link between the UI Kit library and the components you have copied, so any updates you make inside the UI Kit will not be applied directly to the components you have copied and pasted inside your project file. Only color styles and typography styles can be updated automatically. In case you have copied a button from the UI Kit and you have pasted it inside your project and want to make a change of its appearance over time, you can either detach the button and apply that change locally in your project file, or apply that change inside the UI Kit file and copy the button component again and paste it inside your project file. Then you should delete the old button, so there is no duplication of components with the same name. ## Figma Download assets You can download the Figma Plugin, UI kit and sample apps from the [Download Assets page.](https://cloud.indigo.design/resources/figma) Or through the direct links below: + - [Figma UI Kit](https://www.figma.com/@infragistics) -- [Plugin for Figma](https://www.figma.com/community/plugin/1462024243431691008/indigo-design-figma-plugin) +- [Plugin for Figma](https://www.figma.com/community/plugin/1462024243431691008/indigo-design-figma-plugin) - [Sample Apps](https://download.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps_Figma.zip) - + ## Known issues and limitations + - Dark mode will not be parsed upon import into the App Builder, currently we don't provide definitions or options for it. - The file model in Figma is closed. The content of the file itself is binary and the App Builder cannot read directly from a `.fig` file. In order to achieve the `import story` you will have to open the Figma app and use the plugin API ([Indigo.Design plugin](https://www.figma.com/community/plugin/1462024243431691008/indigo-design-figma-plugin)) to read the file model and its content. From here on the internal heuristics can build an input model for the AppBuilder and complete the import story. - [The difference when using the kit as a free Figma user vs Pro user](#using-the-kit-as-a-free-figma-user-vs-pro-user). - ## Additional Resources -* [Design to code story](../design-to-code-story.md) -* [Sketch UI Kit](sketch.md) +- [Design to code story](../design-to-code-story.md) +- [Sketch UI Kit](sketch.md) diff --git a/en/ui-kits/sketch.md b/en/ui-kits/sketch.md index 6101a27..3ef655c 100644 --- a/en/ui-kits/sketch.md +++ b/en/ui-kits/sketch.md @@ -6,6 +6,7 @@ A strong design-to-code movement emerged in the last few years to pick up where > Download [Sketch UI Kit](https://dl.infragistics.com/products/Infragistics/Indigo.Design/ABECAC7231EE434C8CD3DC619BE6F75B/Infragistics_IndigoDesign_UI_Kit.zip) and [Sample apps](https://dl.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps.zip) ## App Builder Sketch Importer + Here are the 4 simple steps to get from Design to Code with the App Builder with a drag & drop. Step 1: Click New App from the App Builder main menu @@ -38,6 +39,7 @@ Just like that, a design or a developer can go from sketch to code with a web-ba ## Sketch Download assets Or through the direct links below: + - [Sketch UI Kit](https://dl.infragistics.com/products/Infragistics/Indigo.Design/ABECAC7231EE434C8CD3DC619BE6F75B/Infragistics_IndigoDesign_UI_Kit.zip) - [Sample apps](https://dl.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps.zip) @@ -45,5 +47,5 @@ Or through the direct links below: -* [Design to code story](../design-to-code-story.md) -* [Figma UI Kit](figma.md) +- [Design to code story](../design-to-code-story.md) +- [Figma UI Kit](figma.md) diff --git a/en/using-data-in-your-app.md b/en/using-data-in-your-app.md index d112633..73641a1 100644 --- a/en/using-data-in-your-app.md +++ b/en/using-data-in-your-app.md @@ -4,8 +4,10 @@ _description: App Builder enables users to add external data sources and bind th _keywords: App builder, Indigo Design, Infragistics, Data Sources, Data Binding --- -# Data Feature overview +# Data Feature overview + The App Builder Data features let users add, edit and use external data source in the application they are developing. By default, the App Builder comes with a mock Northwind data source which users can use for reference. Below you can find different ways to set up Rest API data sources: + - By using a Rest API URL with the data source. - By using a Swagger URL or file definition (json/yaml). @@ -25,6 +27,7 @@ The App Builder also supports **nested collection inside a response object**. YoNested Collection Demo
## Adding a data source + The App Builder Data feature enables users to link to external publicly available source(Rest API) > [!NOTE] @@ -34,7 +37,8 @@ The App Builder Data feature enables users to link to external publicly availablAdding data source from a URL
## Adding a Swagger data source -The power of Swagger tools starts with the OpenAPI Specification — the industry standard for RESTful API design. + +The power of Swagger tools starts with the OpenAPI Specification — the industry standard for RESTful API design. You can now specify a Swagger definition (by providing a file URL or simply upload it) and an intuitive design will help you pick an endpoint an data fields, with ease. You can later on bind this data source to a component like Grid, Card, List or any other bindable component. @@ -44,7 +48,8 @@ Check out the [full article on how to add a Swagger definition](open-api-swaggerSwagger demo
## Using data source from local network sources -You can now make requests to a localhost or private networks. This includes regular REST endpoints and Swagger endpoints. + +You can now make requests to a localhost or private networks. This includes regular REST endpoints and Swagger endpoints.
Local network sources usage
@@ -52,9 +57,10 @@ You can now make requests to a localhost or private networks. This includes reguChanging a data source table field type
## Connecting Data Source to a repeated component + When a data source has been added, users can connect a particular data field to a component section. In order for this to be done, first select the component (a card component is used in the example below), then change Repeat mode to Data and scroll down the menu to locate and select the table from the Data Source that you want to connect to. Finally, connect the card section with the selected table field.
Connect a data source table field to a component section
### Hierarchical Binding Support + Now you can bind a component to a hierarchical data structure and bind nested data-context collections with data repeat. Let's look at the following datasource having three data levels, Movies -> Cast -> Films: @@ -264,7 +273,9 @@ It is also applicable to components like Tree and other containers. The example Lets review the Tree component, you will notice how we use the Repeat Data option in order to bind the root and child elements to a specific hierarchy level. As the Tree is declarative component, and it does not have data input binding (at tree root level), we declare it by specifying the node hierarchy and iterating through the hierarchical data set. Nodes should be bindable to a data model so that their expanded and selected states are reflected in the underlying data as well. ## Known issues and limitations + ### Unable to infer schema from data + This error message will be show when _the size of the parsed table schema_ of the datasource is too big (over 5mb). It can be triggered when: - Adding a regular REST endpoint. @@ -280,6 +291,7 @@ Keep in mind this is not a restriction on the data, for example it can be with mUnable to infer schema from data
### Download/Upload definition from local network source + Downloaded OpenAPI files dot not contain server URL information and it cannot infer the server base address. This will happen if you do not specify the localhost URL directly through the Add URL source and instead Upload it as definition, you will get an empty Base URL.
@@ -299,12 +311,13 @@ app.UseSwagger(c =>
```
## Additional Resources
+
-* [App Builder Components](indigo-design-app-builder-components.md)
-* [App Builder Interface Overview](interface-overview.md)
-* [Single Page And Navigation](single-page-apps-and-navigation.md)
-* [App Builder Components](indigo-design-app-builder-components.md)
-* [Flex Layouts](flex-layouts/flex-layouts.md)
-* [Running Desktop App](running-desktop-app.md)
-* [Generate app](generate-app/generate-app-overview.md)
\ No newline at end of file
+- [App Builder Components](indigo-design-app-builder-components.md)
+- [App Builder Interface Overview](interface-overview.md)
+- [Single Page And Navigation](single-page-apps-and-navigation.md)
+- [App Builder Components](indigo-design-app-builder-components.md)
+- [Flex Layouts](flex-layouts/flex-layouts.md)
+- [Running Desktop App](running-desktop-app.md)
+- [Generate app](generate-app/generate-app-overview.md)
diff --git a/en/using-data-in-your-app/api-project-query-builder-support.md b/en/using-data-in-your-app/api-project-query-builder-support.md
index 13bd644..282fa83 100644
--- a/en/using-data-in-your-app/api-project-query-builder-support.md
+++ b/en/using-data-in-your-app/api-project-query-builder-support.md
@@ -7,6 +7,7 @@ _keywords: App Builder, Query Builder, Query Variable, Data Filtering, Server-si
# Query Builder Support for API Projects
## Overview
+
This guide outlines how to implement a Query Builder Models and Utilities in your API Project, to enable user-defined queries. The implementation involves creating a controller, defining Query Builder models, and adding utilities for executing and generating SQL statements from these queries. The resulting customization will allow users to construct complex queries with subqueries support, filtering, logical operators, and field selection, executed efficiently against a data source.
The implementation is already part of the [NorthwindAPI REST API](https://github.com/IgniteUI/NorthwindAPI/tree/main/NorthwindCRUD/QueryBuilder) project. Here are the examples for [NorthwindAPI QueryBuilderController](https://github.com/IgniteUI/NorthwindAPI/blob/main/NorthwindCRUD/Controllers/QueryBuilderController.cs) and [NorthwindAPI QueryBuilder Models](https://github.com/IgniteUI/NorthwindAPI/tree/main/NorthwindCRUD/QueryBuilder).
@@ -60,9 +61,9 @@ Create a file named QueryBuilderController.cs in your Controllers directory:
}
```
-* Purpose: Accepts a Query object via POST request and delegates execution to the QueryExecutor.
-* Dependency Injection: Injects QueryExecutor for processing queries (configure this in your DI container).
-
+- Purpose: Accepts a Query object via POST request and delegates execution to the QueryExecutor.
+- Dependency Injection: Injects QueryExecutor for processing queries (configure this in your DI container).
+
For a complete example, see [NorthwindAPI QueryBuilderController](https://github.com/IgniteUI/NorthwindAPI/blob/main/NorthwindCRUD/Controllers/QueryBuilderController.cs).
@@ -82,9 +83,9 @@ public enum FilterType
}
```
-* And: Combines filters with a logical AND.
-* Or: Combines filters with a logical OR.
-
+- And: Combines filters with a logical AND.
+- Or: Combines filters with a logical OR.
+
### Query Class
@@ -100,10 +101,10 @@ public class Query
}
```
-* Entity: The target entity/table being queried (e.g., "Products").
-* ReturnFields: Fields to include in the result (e.g., ["Name", "Price"] or ["*"] for all).
-* Operator: Logical operator (And or Or) for combining filters.
-* FilteringOperands: Array of QueryFilter objects defining conditions.
+- Entity: The target entity/table being queried (e.g., "Products").
+- ReturnFields: Fields to include in the result (e.g., ["Name", "Price"] or ["*"] for all).
+- Operator: Logical operator (And or Or) for combining filters.
+- FilteringOperands: Array of QueryFilter objects defining conditions.
### QueryFilter Class
@@ -124,14 +125,14 @@ public class QueryFilter
}
```
-* FieldName: The field to filter (e.g., "Price").
-* IgnoreCase: Whether the filter is case-insensitive.
-* Condition: The comparison type (e.g., "Equals", "GreaterThan").
-* SearchVal: Value to compare against (e.g., 100).
-* SearchTree: Nested query for subqueries.
-* Operator: Logical operator for compound conditions.
-* FilteringOperands: Array for nested or compound filters.
-
+- FieldName: The field to filter (e.g., "Price").
+- IgnoreCase: Whether the filter is case-insensitive.
+- Condition: The comparison type (e.g., "Equals", "GreaterThan").
+- SearchVal: Value to compare against (e.g., 100).
+- SearchTree: Nested query for subqueries.
+- Operator: Logical operator for compound conditions.
+- FilteringOperands: Array for nested or compound filters.
+
### QueryFilterCondition Class
Defines available filtering conditions.
@@ -145,9 +146,9 @@ public class QueryFilterCondition
}
```
-* Name: Condition identifier (e.g., "Equals", "Contains").
-* IsUnary: True for single-operand conditions (e.g., "IsNull").
-* IconName: UI icon identifier (optional).
+- Name: Condition identifier (e.g., "Equals", "Contains").
+- IsUnary: True for single-operand conditions (e.g., "IsNull").
+- IconName: UI icon identifier (optional).
For reference, see [NorthwindAPI QueryBuilder Models](https://github.com/IgniteUI/NorthwindAPI/tree/main/NorthwindCRUD/QueryBuilder).
@@ -233,9 +234,9 @@ private static Expression BuildConditionExpressionAutomatic Form creation
### Automatic Form controls creation and mapping -Form controls are created based on each field's data type and metadata, ensuring intuitive inputs and labels (e.g., date fields use *date pickers*, boolean fields use *switches*). Developers retain full control to modify components, add validations, or adjust labels directly in the properties panel. + +Form controls are created based on each field's data type and metadata, ensuring intuitive inputs and labels (e.g., date fields use _date pickers_, boolean fields use _switches_). Developers retain full control to modify components, add validations, or adjust labels directly in the properties panel.
Automatic Form control creation
### Form modification + Once generated, the form can be edited to include or exclude fields, customize labels, and set input validations, offering an intuitive design experience. App Builder allows developers to tailor both form layout and components: + - Easily add or remove elements within the form. -- Adjust control properties such as *Required* and *Disabled* validations, label customization, and mapping. +- Adjust control properties such as _Required_ and _Disabled_ validations, label customization, and mapping.
Form modifications
### Live interaction with Forms + In App Builder’s Preview mode, users can interact with forms to see: + - Real-time input validation. - Form submission, with notifications indicating success or validation errors. @@ -43,6 +52,7 @@ In App Builder’s Preview mode, users can interact with forms to see: > Upon form submission in Preview mode, the `Post/Put` action is executed, adding or updating the record through the specified endpoint. ### Configurable Action Buttons + Action buttons (`Submit`, `Reset`) offer full customization, supporting both in-form and external placements. This flexibility is essential for developers needing precise control over form behavior in more complex layouts. @@ -51,9 +61,11 @@ Action buttons (`Submit`, `Reset`) offer full customization, supporting both in- ### Submit Action notifications + Success and error messages are displayed via Snackbars, offering non-intrusive feedback on form submissions. These notifications are hardcoded for the initial release, with plans to support flexible interaction handling in future iterations. ## Form Controls Support + The Form Builder supports a variety of UI controls mapped to specific data types, ensuring developers can create accessible, responsive forms efficiently. Below is a summary of supported controls and current limitations. | Form Control | Default Type | Notes | @@ -69,41 +81,44 @@ The Form Builder supports a variety of UI controls mapped to specific data types | Input Field | String, Number| - | > [!NOTE] -> Form controls currently support basic validation properties (`Required`, `Disabled`). +> Form controls currently support basic validation properties (`Required`, `Disabled`). All Form controls support two-way binding and are bound to the form context. ## Future Enhancements + The roadmap for App Builder’s Form Builder includes advancements in manual form creation, validation options, extended metadata support, and enhanced notification and interaction handling. Future validation enhancements will include: + - Range validation (`min`, `max`). - String length validation (`min length`, `max length`). - Pattern validation (regex). - Enum validation for select and combo box controls ## Known issues and Limitations + The following known issues and limitations apply to the initial release of Form Builder, launched on October 28: - **Form Reset behavior** discrepancy between App Builder runtime experience and generated application runtime: - - In App Builder, the Reset button click reverts to the initial values when editing a record, and clears the form when adding a new record. - - In the generated application, the Reset button click clears the form by setting all form controls to empty values. + - In App Builder, the Reset button click reverts to the initial values when editing a record, and clears the form when adding a new record. + - In the generated application, the Reset button click clears the form by setting all form controls to empty values. - **Form Copy-Pasting**: Copying and pasting a form currently results in the original form losing its data bindings, which transfer to the newly pasted form instance. - **Boolean Required Flag**: There is ambiguity in implementing a required Boolean field, particularly for cases like “accept terms of service.” - **Submit/Reset Behavior**: The Submit/Reset functionality has been adapted to work within both template and reactive forms but may still experience inconsistencies. - **Code Generation**: - - **Typing Issues with Form Models**: Typing inconsistencies may arise, especially when working with nested structures or arrays, complicating accurate form model generation in the output code. - - **`igx-hint` Element in Preview**: The `igx-hint` element is currently excluded from preview as it is not generated in the final code. Future updates may add support for message display functionality. - - **Calendar** not showing in generated app when in a form. - - **Reset button click behavior** - it clears the form for React-generated projects. Instead of reverting to initial values, the form controls get empty values. - - **Disabled property** will not be rendered for input in an Angular-generated form. + - **Typing Issues with Form Models**: Typing inconsistencies may arise, especially when working with nested structures or arrays, complicating accurate form model generation in the output code. + - **`igx-hint` Element in Preview**: The `igx-hint` element is currently excluded from preview as it is not generated in the final code. Future updates may add support for message display functionality. + - **Calendar** not showing in generated app when in a form. + - **Reset button click behavior** - it clears the form for React-generated projects. Instead of reverting to initial values, the form controls get empty values. + - **Disabled property** will not be rendered for input in an Angular-generated form. ## Additional Resources -* [App Builder Components](../indigo-design-app-builder-components.md) -* [App Builder Interface Overview](../interface-overview.md) -* [Single Page and Navigation](../single-page-apps-and-navigation.md) -* [Flex Layouts](../flex-layouts/flex-layouts.md) -* [Running Desktop App](../running-desktop-app.md) +- [App Builder Components](../indigo-design-app-builder-components.md) +- [App Builder Interface Overview](../interface-overview.md) +- [Single Page and Navigation](../single-page-apps-and-navigation.md) +- [Flex Layouts](../flex-layouts/flex-layouts.md) +- [Running Desktop App](../running-desktop-app.md) diff --git a/en/using-data-in-your-app/grid-remote-paging.md b/en/using-data-in-your-app/grid-remote-paging.md index b57cdb3..d7b7224 100644 --- a/en/using-data-in-your-app/grid-remote-paging.md +++ b/en/using-data-in-your-app/grid-remote-paging.md @@ -5,9 +5,11 @@ _keywords: App builder, Remote Paging, Infragistics, Data Sources --- # Grid Remote Paging + Remote paging is a feature that allows the grid to load and display data dynamically, fetching only a portion of the data from the server as needed. This results in improved performance, particularly for large datasets, by avoiding the need to fetch all records at once. ## Key Benefits of Remote Paging + - **Improved performance:** Only loads necessary data, reducing load times. - **Scalable:** Handles large datasets efficiently. - **User control:** Offers flexibility to developers and users in how data is presented. @@ -17,6 +19,7 @@ Remote paging is a feature that allows the grid to load and display data dynamic Remote paging divides the data into "pages" that are requested individually from a remote server. This ensures that only the necessary slice of data is loaded at a time. It can be configured for both **Grid** and **Tree Grid** components using built-in properties in the tool. Users use a Configurator to set up everything required for remote paging to work. What is needed? + - `pageIndex` - The index of the page, which data will be fetched. If this parameter is not provided, page index defaults to 0, which fetches the first page of data. - `pageSize` - The maximum number of records to fetch and display per page. If this parameter is not provided, all records are fetched, and total number of pages will be 1. - `totalRecords` - Returns the total number of records available at the server. This number is required for the Paginator to calculate the total number of pages. @@ -39,6 +42,7 @@ In this case, the API returns both the paged data and the total number of record In this setup, two API calls are made: one to retrieve the paged data and another to get the total records count. ### Single endpoint + This is an example of supported data structure: ``` @@ -57,7 +61,9 @@ This is an example of supported data structure: } ``` + **Steps:** + 1. Hook the Grid to an endpoint that returns an Object with Items collection and Total Records Count field. Object that provides a collection of items and the Total Records Count. 2. Add Remote paging feature and select the **Remote** paging mode to load the Configuration dialog. 3. Through the Paging Configuration Dialog, select the field property that corresponds to the Total Records Count. In the example above, that would be "totalRecordsCount". @@ -65,13 +71,14 @@ This is an example of supported data structure: 5. Click Save **Result:** + - Two variables of type number for storing both **Page Index** and **Page Size** values are created. - Third variable for storing of the **Grid data context** will be created. **Object type**, initialized from data request. The request Query params will be bound to the Page index and Page size variables. - The Grid will be bound to the third variable data context result -> _result.items_ collection. - Total records count will be bound to _result.totalRecordsCount_ field. - Two interaction for **PerPageChanged** and **PageChange** will be automatically created. - - **PerPageChange** will have **Source** (value) set to the Page size coming from the Event context provided by the igx-paginator. **Target** variable will be the **Page Size**. - - **PageChange** will have Source (value) set to the Page index (current page) coming from the Event context provided by the igx-paginator. **Target** variable will be the **Page Index**. + - **PerPageChange** will have **Source** (value) set to the Page size coming from the Event context provided by the igx-paginator. **Target** variable will be the **Page Size**. + - **PageChange** will have Source (value) set to the Page index (current page) coming from the Event context provided by the igx-paginator. **Target** variable will be the **Page Index**. **Behaviour:** On Preview, initial load will perform only one request. Upon page change or per page value change, a new request will be made to fetch the data based on the new Page and Size values. @@ -79,6 +86,7 @@ On Preview, initial load will perform only one request. Upon page change or per ### Two different endpoints **Steps:** + 1. Bind the `Data` property the grid to an endpoint that expects Page and Size query params. 2. Add Remote paging feature and select the **Remote** paging mode to load the Configuration dialog. 3. Hook the totalRecordsCount to a different endpoint (different than the grid `Data` property) that returns the total records count only. @@ -86,29 +94,30 @@ On Preview, initial load will perform only one request. Upon page change or per 5. Click Save **Result:** + - Two variables of type number for storing both **Page Index** and **Page Size** values are created. - Grid data source will have query params bound to the two newly created variables. - Third variable for storing the **Total records count** will be created. **Object type**, initialized from data request. (Note, currently AB does not support primitive result types) - Two interaction for **PerPageChanged** and **PageChange** will be automatically created. - - **PerPageChange** will have **Source** (value) set to the Page size coming from the Event context provided by the igx-paginator. **Target** variable will be the **Page Size**. - - **PageChange** will have Source (value) set to the Page index (current page) coming from the Event context provided by the igx-paginator. **Target** variable will be the **Page Index**. + - **PerPageChange** will have **Source** (value) set to the Page size coming from the Event context provided by the igx-paginator. **Target** variable will be the **Page Size**. + - **PageChange** will have Source (value) set to the Page index (current page) coming from the Event context provided by the igx-paginator. **Target** variable will be the **Page Index**. **Behaviour:** + - Upon going to Preview, initial load will perform two requests, one for the grid sliced data, and one for the total records count. After that, upon page change or per page change, only one request will be made for the Grid sliced data. ## Known limitations -When user sets up remote paging with the configurator and runs it again, the redundant variable, which is intitialized from API endpoint, will remain existing. + +When user sets up remote paging with the configurator and runs it again, the redundant variable, which is initialized from API endpoint, will remain existing. ## Additional Resources -* [App Builder Components](../indigo-design-app-builder-components.md) -* [App Builder Interface Overview](../interface-overview.md) -* [Single Page And Navigation](../single-page-apps-and-navigation.md) -* [App Builder Components](../indigo-design-app-builder-components.md) -* [Flex Layouts](../flex-layouts/flex-layouts.md) -* [Running Desktop App](../running-desktop-app.md) - - +- [App Builder Components](../indigo-design-app-builder-components.md) +- [App Builder Interface Overview](../interface-overview.md) +- [Single Page And Navigation](../single-page-apps-and-navigation.md) +- [App Builder Components](../indigo-design-app-builder-components.md) +- [Flex Layouts](../flex-layouts/flex-layouts.md) +- [Running Desktop App](../running-desktop-app.md) diff --git a/en/using-data-in-your-app/query-builder-overview.md b/en/using-data-in-your-app/query-builder-overview.md index ef56200..0536568 100644 --- a/en/using-data-in-your-app/query-builder-overview.md +++ b/en/using-data-in-your-app/query-builder-overview.md @@ -6,11 +6,11 @@ The **Query Builder** in App Builder allows you to visually define and manage da Using the Query Builder, you can: -* **Connect to a data source** and visually build queries. -* **Filter data** based on field values using operators like equals, contains, greater than, etc. -* **Combine multiple conditions** with logical groups (AND/OR). -* **Preview query results** to ensure the output matches your expectations. -* **Bind the query** to UI components such as grids, lists, or charts. +- **Connect to a data source** and visually build queries. +- **Filter data** based on field values using operators like equals, contains, greater than, etc. +- **Combine multiple conditions** with logical groups (AND/OR). +- **Preview query results** to ensure the output matches your expectations. +- **Bind the query** to UI components such as grids, lists, or charts.
View query execution test
@@ -49,11 +49,11 @@ In App Builder, this logic can be created visually — connecting the SelectedCa -* [Query Builder Step-by-Step Guide](query-builder-step-by-step-guide.md) -* [Query Builder Support for API Projects](api-project-query-builder-support.md) -* [App Builder Components](../indigo-design-app-builder-components.md) -* [App Builder Interface Overview](../interface-overview.md) -* [Form Builder](form-builder.md) -* [Grid Remote Paging](grid-remote-paging.md) -* [Crud Operations](crud-operations.md) -* [Remote Data Operations](remote-data-operations.md) +- [Query Builder Step-by-Step Guide](query-builder-step-by-step-guide.md) +- [Query Builder Support for API Projects](api-project-query-builder-support.md) +- [App Builder Components](../indigo-design-app-builder-components.md) +- [App Builder Interface Overview](../interface-overview.md) +- [Form Builder](form-builder.md) +- [Grid Remote Paging](grid-remote-paging.md) +- [Crud Operations](crud-operations.md) +- [Remote Data Operations](remote-data-operations.md) diff --git a/en/using-data-in-your-app/query-builder-step-by-step-guide.md b/en/using-data-in-your-app/query-builder-step-by-step-guide.md index b8a4e12..58dfa63 100644 --- a/en/using-data-in-your-app/query-builder-step-by-step-guide.md +++ b/en/using-data-in-your-app/query-builder-step-by-step-guide.md @@ -9,6 +9,7 @@ _keywords: App Builder, Query Builder, Query Variable, Data Filtering, Server-si ## Query Builder Variable and Component Overview The Query Builder component in App Builder operates through two key concepts: + - **Query Variable** and **Query Builder Component** in the toolbox. The **Query Variable**, currently available only as part of [Preview Environment](https://preview.appbuilder.dev/), is a specialized variable that interacts with data sources, designed to efficiently handle large datasets by dynamically filtering data through API requests. These requests utilize **server-side filtering**, driven by advanced expressions as parameters, ensuring optimal performance when handling extensive data. @@ -16,12 +17,13 @@ The **Query Variable**, currently available only as part of [Preview Environment This variable integrates with the **Query Builder component**, allowing for dynamic data management and UI-driven filtering. The Query Variable concept covers the two primary ways the Query Builder component is used: -* The **Query Builder component** integrated into App Builder as a **Query Variable editor**. -* The **Query Builder component** as a UI element that end-users can interact with directly from the App Builder Canvas when dropped from the Toolbox. + +- The **Query Builder component** integrated into App Builder as a **Query Variable editor**. +- The **Query Builder component** as a UI element that end-users can interact with directly from the App Builder Canvas when dropped from the Toolbox. ## Step-by-Step Introduction -## Step 1. Define a User story and implement it: +## Step 1. Define a User story and implement it Let's achieve the following use case, retrieve all Products from the **products** table that belong to a selected category and have been ordered in quantities within a specified range in the **orderDetails** table. @@ -39,18 +41,22 @@ AND productId IN ( ) ``` -1. **Main Query (Products table)**: +1. **Main Query (Products table)**: + - Selects all columns (`*`) from the **products** table. - Filters products where **categoryId = "Beverages"** (only products from the Beverages category). -2. **Subquery (OrderDetails table)**: + +2. **Subquery (OrderDetails table)**: + - Retrieves **productId's** from **orderDetails** where the **quantity** ordered is between **5 and 10** (inclusive). - These **productId's** are then used in the **IN** clause of the main query to filter products. - + **Final Output:** The result will be a list of **beverage products** that have been ordered in quantities between **5 to 10 units**. ## Step 2. Create a Query Variable + Let's start by creating a Query Variable. This Variable will be used for handling large datasets by dynamically filtering data through API requests. 1. Create a new variable. @@ -73,20 +79,21 @@ Let's start by creating a Query Variable. This Variable will be used for handlin
## Step 3. Configure the Query Variable
-
+
First, open the **Edit Query** panel.
-
+
Build the complex query that will work with **two tables**:
+
- **products** – The main table from which data is retrieved.
- **orderDetails** – Used in the subquery to filter products based on quantity between a range.
-
+
💡 **Note:** Instead of hardcoding values, we will **bind each condition to variables** that will be dynamically updated by the user through App Components.
-
+
**Filter products by selected category**:
- Start building the **WHERE clause** to set query conditions.
- Create a **numeric variable** with a default value of **1**, which will be used by a **Select component**.
-
+
View minimum quantity configuration
@@ -112,7 +120,7 @@ Build the complex query that will work with **two tables**:
View maximum quantity configuration
@@ -123,7 +131,7 @@ Build the complex query that will work with **two tables**: 💡 **Note:** Hardcoded values can also be used, but for this demo, we will use **variables** for **dynamic filtering**. ## Step 4. Apply and Save the Query - + 1. Click **Save** to store the **Complex Query Variable** configuration. 2. Test the query execution using the **SEND button**. @@ -133,20 +141,23 @@ Build the complex query that will work with **two tables**:
View component addition
@@ -159,7 +170,7 @@ Bind them: **Select component**: Focus the **Select component**, and click on the **Select item**. Apply a **data repeater** to it using the **Category table** from the Northwind data source.
View data repeater setup
@@ -170,7 +181,7 @@ Focus the **Select component**, and click on the **Select item**. Apply a **data Bind the Content and Value of the Select item element to Category -> Name and CategoryID.
View select item binding
@@ -181,7 +192,7 @@ Bind the Content and Value of the Select item element to Category -> Name and Ca Focus the Select component and bind it to the selectedCategory variable:
View select component binding
@@ -192,7 +203,7 @@ Focus the Select component and bind it to the selectedCategory variable: **Input component** for Quantity greater than:
View minimum quantity input binding
@@ -203,7 +214,7 @@ Focus the Select component and bind it to the selectedCategory variable: **Input Component** for Quantity less than:
View maximum quantity input binding
@@ -215,7 +226,7 @@ Focus the Select component and bind it to the selectedCategory variable: 3. Add a **Grid component** and bind it to the **Query Variable** created in Step 2.
View grid component binding
@@ -233,7 +244,7 @@ Focus the Select component and bind it to the selectedCategory variable: So far, our query returns **all products** that belong to the **Dairy Products** category and have been ordered in quantities **between 5 and 7**.
View initial query results
@@ -246,8 +257,9 @@ However, the **actual order quantities are not visible**, since our query only r ## Step 7. Show Order Quantities per Product Using Grid Row Selection 1. Add a **Grid Row Selection Changed** interaction and bind a **variable** to it. +
View grid row selection interaction
@@ -256,8 +268,9 @@ However, the **actual order quantities are not visible**, since our query only r
View variable type configuration
@@ -268,7 +281,7 @@ However, the **actual order quantities are not visible**, since our query only r 3. Add a **Dialog** and a **Grid** inside it to display the relevant data.
View dialog and grid setup
@@ -279,6 +292,7 @@ However, the **actual order quantities are not visible**, since our query only r 4. Configure another **Query Variable** that retrieves **order details** for products within a specific category. **Example Query:** + ``` SELECT * FROM orderDetails @@ -290,9 +304,10 @@ WHERE productId IN ( AND Quantity BETWEEN 5 AND 15; ``` +
View order details query result
@@ -300,7 +315,7 @@ AND Quantity BETWEEN 5 AND 15; 5. Bind the **Grid component** to the **OrdersComplexQuery Variable**
View grid binding to order details
@@ -313,12 +328,12 @@ AND Quantity BETWEEN 5 AND 15; - Click **Preview**. - Dynamically adjust the query results using the Input components. - Example use case: - - Search for **Confections** category. - - Set **Quantity between 4 and 8**. + - Search for **Confections** category. + - Set **Quantity between 4 and 8**.
View app preview with Confections example
@@ -326,11 +341,13 @@ AND Quantity BETWEEN 5 AND 15;
View Query Builder component addition
@@ -343,7 +360,7 @@ This step demonstrates **how the query can be modified in real-time**. Instead o 3. Now, the **Query Component** is bound to the **Query Variable**, dynamically handling data requests.
View Query Builder binding result
@@ -365,7 +382,7 @@ This step demonstrates **how the query can be modified in real-time**. Instead o ## FAQs -1. Why doesn’t the Query Builder use OData? +1. Why doesn’t the Query Builder use OData? OData lacks support for subqueries, while the Query Builder **primarily builds a conditions tree**, some expressions may be mapped to OData-compatible filters. However, full support is not guaranteed due to OData’s limitations. Query Builder provides more flexibility by allowing direct control over the **filtering logic**, enabling better support for complex scenarios like subqueries, which OData does not natively support. @@ -374,7 +391,7 @@ Query Builder provides more flexibility by allowing direct control over the **fi - **No Code Generation** - you will get "Component not supported" message upon trying to code-generate application with Query Variable or Query Builder - **Query Component in Preview** - you have full control on the conditions, but you lose the bindings, you get the current values (5 and 10). You have to re-add the component and start over if you want to bring back the initial state of the variable. -- We are not allowing you **to set specific fields when making the request**, you will always get all the fields, because we dont have a mechanic to let other components know about this, which will lead to inconsistencies. +- We are not allowing you **to set specific fields when making the request**, you will always get all the fields, because we don't have a mechanic to let other components know about this, which will lead to inconsistencies. - **Query Builder Return Fields are disabled** - Disabling the query builder return fields change is necessary because, while selecting a subset of fields works data-wise, App Builder does not support dynamic structures. Consequently, when instantiating a Grid, it assumes that all columns are available - If problems or inconsistencies appear, **refresh the page (F5)**. @@ -387,18 +404,19 @@ Query Builder provides more flexibility by allowing direct control over the **fi - **Bindable Properties:** Only the **"Query" property** supports variable binding. ### Server-Side Case Sensitivity + - If you implement your own data server, consider not configuring **case-sensitive field names**. ## Additional Resources -* [Query Builder Support for API Projects](api-project-query-builder-support.md) -* [App Builder Components](../indigo-design-app-builder-components.md) -* [App Builder Interface Overview](../interface-overview.md) -* [Form Builder](form-builder.md) -* [Grid Remote Paging](grid-remote-paging.md) -* [Crud Operations](crud-operations.md) -* [Remote Data Operations](remote-data-operations.md) -* [Flex Layouts](../flex-layouts/flex-layouts.md) -* [Running Desktop App](../running-desktop-app.md) +- [Query Builder Support for API Projects](api-project-query-builder-support.md) +- [App Builder Components](../indigo-design-app-builder-components.md) +- [App Builder Interface Overview](../interface-overview.md) +- [Form Builder](form-builder.md) +- [Grid Remote Paging](grid-remote-paging.md) +- [Crud Operations](crud-operations.md) +- [Remote Data Operations](remote-data-operations.md) +- [Flex Layouts](../flex-layouts/flex-layouts.md) +- [Running Desktop App](../running-desktop-app.md) diff --git a/en/using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md b/en/using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md index 3c3e950..f6b7c71 100644 --- a/en/using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md +++ b/en/using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md @@ -9,13 +9,14 @@ _keywords: Data API Builder, REST API, MySQL, MSSQL, Database Configuration, API This guide provides a step-by-step process to set up and use the Data API Builder with any database, [full list](https://learn.microsoft.com/en-us/azure/data-api-builder/overview) of the supported databases - SQL Server, MySQL and PostgreSQL to name a few. Follow these instructions to create native OpenAPI, Swagger for REST endpoints and manage your database effectively. Key Features + - Support for relational tables, views, and stored procedures - Support multiple, simultaneous data sources - REST endpoints - - POST, GET, PUT, PATCH, DELETE - - Filtering, sorting, and pagination - - In-memory cache - - Support for OpenAPI + - POST, GET, PUT, PATCH, DELETE + - Filtering, sorting, and pagination + - In-memory cache + - Support for OpenAPI - Easy development via dedicated CLI - Open Source & free @@ -44,6 +45,7 @@ dotnet tool update --global Microsoft.DataApiBuilder For more details, refer to the official documentation: [.](https://learn.microsoft.com/en-us/azure/data-api-builder/how-to-install-cli) ## 2. Database Configuration + Make sure you have a database set-up. You can use tools like SQL Server Management Studio, MySQL Workbench, or any other database management tool to create and configure your database. For this guide, we’ll provide examples for MSSQL database. ## 3. REST Endpoints in Data API Builder created through a Configuration file @@ -66,7 +68,8 @@ Add an entity (e.g., Products) to the configuration file: dab add Products --source "Products" --permissions "anonymous:*" ``` -### Observe your current dab-config.json configuration file. +### Observe your current dab-config.json configuration file + The file should include a baseline implementation of your API with a single entity, a REST API endpoint: > [!NOTE] @@ -139,13 +142,14 @@ The file should include a baseline implementation of your API with a single enti ``` ## 4. Test the REST API + Now, start the Data API builder tool to validate that everything is set-up correctly. ``` dab start ``` -Output.Once the API is running, you can access it at http://localhost:5000/swagger/index.html +Output.Once the API is running, you can access it at http://localhost:5000/swagger/index.html ``` Successfully completed runtime initialization. @@ -164,16 +168,17 @@ This URL will open the Swagger UI, where you can test your API endpoints. For [step-by-step walkthrough](https://www.appbuilder.dev/help/using-data-in-your-app#adding-a-swagger-data-source) follow [this](https://www.appbuilder.dev/help/using-data-in-your-app#adding-a-swagger-data-source) topic. -
+
DAB in AB
## 6. Troubleshooting Common Problems + Here are some common issues and their solutions: - In App Builder the CRUD is working only for Grid, for the Form component there are some missing peaces from the OpenAPI specification that are currently in progress. - CORS problems. How to enable CORS if needed: - + ``` "host": { "cors": { @@ -188,6 +193,7 @@ Here are some common issues and their solutions: "mode": "development" } ``` + - OpenID Connect Support Proposal - [Issue in data-api-builder GitHub](https://github.com/Azure/data-api-builder/issues/2226). - DELETE endpoint not working? @@ -201,12 +207,12 @@ Double-check the username, password, and authentication method (e.g., Windows Au -* [Query Builder Support for API Projects](api-project-query-builder-support.md) -* [App Builder Components](../indigo-design-app-builder-components.md) -* [App Builder Interface Overview](../interface-overview.md) -* [Form Builder](form-builder.md) -* [Grid Remote Paging](grid-remote-paging.md) -* [Crud Operations](crud-operations.md) -* [Remote Data Operations](remote-data-operations.md) -* [Flex Layouts](../flex-layouts/flex-layouts.md) -* [Running Desktop App](../running-desktop-app.md) \ No newline at end of file +- [Query Builder Support for API Projects](api-project-query-builder-support.md) +- [App Builder Components](../indigo-design-app-builder-components.md) +- [App Builder Interface Overview](../interface-overview.md) +- [Form Builder](form-builder.md) +- [Grid Remote Paging](grid-remote-paging.md) +- [Crud Operations](crud-operations.md) +- [Remote Data Operations](remote-data-operations.md) +- [Flex Layouts](../flex-layouts/flex-layouts.md) +- [Running Desktop App](../running-desktop-app.md) diff --git a/en/using-data-in-your-app/remote-data-operations.md b/en/using-data-in-your-app/remote-data-operations.md index cd1fbdb..bbb1827 100644 --- a/en/using-data-in-your-app/remote-data-operations.md +++ b/en/using-data-in-your-app/remote-data-operations.md @@ -9,6 +9,7 @@ _keywords: App Builder, Remote Data, Pagination, Infragistics, Data Sources This functionality allows users to iterate over data using the **Card**, **Column Layout**, **Absolute Layout**, and **Row Layout** components while leveraging the Paginator component to configure and execute requests that fetch only a specific page of the data. ## Key Benefits + - **Improved performance**: Fetch only the required subset (page) of data from the server, avoiding large payloads. - **Scalable**: Handles large datasets by loading data in smaller chunks. - **Flexible UI**: Allows the user to place repeated items, like Cards, in a custom layout while benefiting from paging features. @@ -31,40 +32,47 @@ During setup, internal variables such as **pageIndex** and **pageSize** are crea ## Setting Up Remote Data ### **1. Repeat a component over data** + - From the **Toolbox**, drag a **Card**, **Column Layout**, **Absolute Layout**, **Grid Layout** or **Row Layout** (these support paging so far). - Select the component and open its **Properties** panel, which will appear on the right hand side. ### **2. Select Data** + - Under **Repeat**, select **Data**. - Choose a REST endpoint or a Swagger definition that provides the JSON response. -- If paging is needed, ensure your API supports parameters like `pageIndex` and `pageSize` so you can page effectivelly. +- If paging is needed, ensure your API supports parameters like `pageIndex` and `pageSize` so you can page effectively. ### **3. Enable Pagination** + - Toggle **Paging** on. - App Builder will wrap your component in a **Row Layout** to ensure the Paginator is placed correctly with your host component together (**Card/Layout**). - A **Paginator** is added, so you will need to set it up by clicking on it and opening it's own properties panel. Check out how to set it up here: [Grid Remote Paging](../using-data-in-your-app/grid-remote-paging.md) ### **4. Preview the Setup** + - Once you've completed the setup and your local variables and actions have been generated, congratulations—you have successfully configured remote paging for your component! - Click **Preview** to load the first page of data. - Changing pages or page sizes triggers new requests, fetching only that portion of data. **Expected Result:** + - The component (**Card/Column Layout/Row Layout/Grid Layout/Absolute Layout**) paginates like a Grid, dynamically fetching only the data for the current page. ## Known Limitations ### **1. Row Layout Enforcement** + - To ensure proper alignment of the **Paginator** along with the repeated component, App Builder will wrap those inside a **Row Layout** with **Wrap**, **Grow** and "Shrink" rules enabled. ### **2. Variable-first Approach Not Yet Supported** + - Currently, the user must start with repeating a component over data, in order to enable Paging. Next version might expose the **Paginator** as a standalone component, which configures data requests on its own, allowing any component be bound to the corresponding data. ## Additional Resources -* [App Builder Components](../indigo-design-app-builder-components.md) -* [App Builder Interface Overview](../interface-overview.md) -* [App Builder Components](../indigo-design-app-builder-components.md) -* [Grid Remote Paging](../using-data-in-your-app/grid-remote-paging.md) \ No newline at end of file +- [App Builder Components](../indigo-design-app-builder-components.md) +- [App Builder Interface Overview](../interface-overview.md) +- [App Builder Components](../indigo-design-app-builder-components.md) +- [Grid Remote Paging](../using-data-in-your-app/grid-remote-paging.md) diff --git a/en/video-tutorials.md b/en/video-tutorials.md index 6017759..8f6e681 100644 --- a/en/video-tutorials.md +++ b/en/video-tutorials.md @@ -4,9 +4,10 @@ _description: Quickly learn how to use App Builder to create designs in Sketch, _keywords: Ignite UI for Angular, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components, Native Angular Components Library, Angular Grid, Angular Data Grid, Angular Grid Control, Angular Grid Component, code generation, prototyping, usability, videos, analytics --- -# Video Tutorials +# Video Tutorials ## App Builder Video Tutorials +Preview and Generate App Code
Code preview
## Uploading an application to GitHub + In addition to see your application in Preview mode or download it locally on the machine, there is the option for generating the full app code repository. In order to do that, simply go to the Generate app button and then connect your GitHub account to the App Builder. ## Known issues and limitations @@ -55,9 +58,9 @@ For a list of all supported components see [Generate App](generate-app/generate- -* [Generate App](./generate-app/generate-app-overview.md) -* [App Builder Components](indigo-design-app-builder-components.md) -* [Flex Layouts](flex-layouts/flex-layouts.md) -* [Running Desktop App](running-desktop-app.md) -* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) -* [App Builder Components]({environment:appbuilderBaseUrl}/components) \ No newline at end of file +- [Generate App](./generate-app/generate-app-overview.md) +- [App Builder Components](indigo-design-app-builder-components.md) +- [Flex Layouts](flex-layouts/flex-layouts.md) +- [Running Desktop App](running-desktop-app.md) +- [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder Components]({environment:appbuilderBaseUrl}/components) diff --git a/jp/ai/getting-started.md b/jp/ai/getting-started.md index 6c8fc4e..51982c4 100644 --- a/jp/ai/getting-started.md +++ b/jp/ai/getting-started.md @@ -6,22 +6,26 @@ _language: ja --- # App Builder AI を使用した作業の開始 + このガイドでは、App Builder で新しく導入された AI を活用したコンテンツ生成について説明します。 AI 機能は現在**プレビュー**としてのみ利用可能であり、まだ最終的なデザインではありません。これらの AI 機能は現在も改善中であり、フィードバックを収集することを目的としています。そのため、完全に洗練されておらず、ユーザーの入力に基づいて進化する可能性があります。**プレビュー**機能にはここからアクセスできます: https://preview.appbuilder.dev/ ## ビューの生成 + App Builder の AI を活用したビューの生成機能は、従来のレイアウト ピッカーに代わる強力な選択肢を提供します。フリーテキストのユーザー プロンプトと複数のプロンプト パターンを活用することで、ユーザーは高度にカスタマイズされたビューを生成し、それを完全に機能するアプリケーションに自動的に変換できます。このアプローチは、アプリ ビューの作成を加速するだけでなく、UI デザインを簡素化し、さまざまなレベルの技術レベルのユーザーがインターフェースを生成できるようにします。
ログイン画面
### プロンプト ベースの生成 + **手順 1**: GenAI ダイアログにフリーテキスト プロンプトを入力します。 **手順 2**: 生成された結果を **[プレビュー]** セクションで表示します。 **手順 3**: [プレビュー] セクションのプラス ボタンを使用して操作を適用します。 + - **コンテンツの追加** – 現在のビューの最後にコンテンツを追加します。 - **新しいビューの作成** – 新しく生成されたコンテンツを別のビュー ページに追加します。 - **コンテンツの置換** – 現在のビューで選択されたコンポーネントを生成された出力に置き換えます。別のものに変換したいセクション/レイアウト/コンポーネントを選択し、もう一度 GenAI ダイアログを開いてプロンプトを配置し、[追加] ボタン -> [コンテンツの置換] オプションをクリックします。 @@ -59,6 +63,7 @@ GenAI ダイアログの [表示] タブのボタンを使用して画像をア #### 例 1: ログイン画面 プロンプト: + ``` Create a detailed login screen ``` @@ -70,24 +75,24 @@ AI 出力 - Angular テンプレート: ```htmlEnter your username and password to log in.
- +Enter your username and password to log in.
+
ログイン画面
-#### プロンプト 2: +#### プロンプト 2 構造化された同等のプロンプト @@ -183,14 +189,15 @@ row layout Generate a view with this layout: nav bar horizontal group - nav drawer (isOpen=true, pin=true) - 5 items - vertical group - title (color=red) - horizontal group - 4 cards with media + nav drawer (isOpen=true, pin=true) + 5 items + vertical group + title (color=red) + horizontal group + 4 cards with media ``` + 結果:
@@ -214,6 +221,7 @@ horizontal group
### 画像の生成
**手順:**
+
1. **AIGen** ダイアログを開き、**[Image]** タブに移動します。
2. 画像を説明するプロンプトを入力するか、**プロンプトの例**を使用します。
3. 結果に満足したら、**[追加]** をクリックして**画像ライブラリ**に保存します。
@@ -225,6 +233,7 @@ horizontal group
### データ ソースの生成
**手順:**
+
1. **AIGen** ダイアログを開き、**[Data]** タブに移動します。
2. 必要なデータを説明するプロンプトを入力します。
3. インスピレーションを得るには、**[プロンプトの例]** ボタンをクリックしてください。
@@ -241,12 +250,13 @@ horizontal group
ご意見の送信
## その他のリソース + -* [App Builder インターフェイスの概要](../interface-overview.md) -* [単一ページとナビゲーション](../single-page-apps-and-navigation.md) -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) -* [Flex レイアウト](../flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](../running-desktop-app.md) -* [アプリの生成](../generate-app/generate-app-overview.md) -* [Indigo.Design はじめに]({environment:infragisticsBaseUrl}/products/indigo-design/help/getting-started) +- [App Builder インターフェイスの概要](../interface-overview.md) +- [単一ページとナビゲーション](../single-page-apps-and-navigation.md) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) +- [Flex レイアウト](../flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](../running-desktop-app.md) +- [アプリの生成](../generate-app/generate-app-overview.md) +- [Indigo.Design はじめに]({environment:infragisticsBaseUrl}/products/indigo-design/help/getting-started) diff --git a/jp/app-builder-overview.md b/jp/app-builder-overview.md index 508a888..db40b2b 100644 --- a/jp/app-builder-overview.md +++ b/jp/app-builder-overview.md @@ -5,7 +5,7 @@ _keywords: App builder, Indigo Design, インフラジスティックス _language: ja --- -# App Builder - 概要 +# App Builder - 概要 App Builder は、Angular、Blazor、React、Web Components 向けのプロフェッショナルなコンポーネントを使用して、本番対応の Web アプリケーションを迅速に構築できる Web ベースの[デザインからコード作成へのプラットフォーム]({environment:appbuilderBaseUrl}/platform)です。デザイン システム対応、ピクセルパーフェクトなレイアウト、リアルタイム プレビューなどが標準搭載されており、無駄な引き継ぎ作業を省き、デザインから直接高品質な開発用コードを生成できます。インストールや重たい IDE、外部依存は不要です。 @@ -32,10 +32,12 @@ App Builder は、Angular、Blazor、React、Web Components 向けのプロフ - **エンタープライズ対応**: リアルデータ接続、ダッシュボード統合、ワークフロー拡張に対応。 ## 利用対象者 + - プロトタイピングや本番開発を迅速化したい開発者。 - 本番対応 UI を引き渡したいデザイナー。 - スケーラブルで一貫したフロントエンド構成を求めるチーム リーダーや CTO。 - 社内ツールやダッシュボード、顧客向けアプリを構築するクロスファンクショナル チーム。 + ## 主なメリットと影響 | メリット | 影響 | @@ -54,12 +56,14 @@ App Builder は、Angular、Blazor、React、Web Components 向けのプロフ - デザイン システムに基づくアプリケーション ## 試してみましょう + [Figma ファイル](ui-kits/figma.md)から開始し、REST API に接続して、[10 分以内に完全に機能する](https://my.appbuilder.dev/) Angular または React アプリを生成してみましょう。 ## その他のリソース + -* [作業の開始](getting-started.md) -* [App Builder インターフェイスの概要](interface-overview.md) -* [デザインからコード作成へのストーリー](design-to-code-story.md) -* [App Builder SDK](sdk/sdk.md) \ No newline at end of file +- [作業の開始](getting-started.md) +- [App Builder インターフェイスの概要](interface-overview.md) +- [デザインからコード作成へのストーリー](design-to-code-story.md) +- [App Builder SDK](sdk/sdk.md) diff --git a/jp/app-themes/app-themes.md b/jp/app-themes/app-themes.md index 63da928..ddb9873 100644 --- a/jp/app-themes/app-themes.md +++ b/jp/app-themes/app-themes.md @@ -13,18 +13,18 @@ _language: ja ## App Builder テーマを切り替える -プライベート プレビューには、Material、Fluent、または Bootstrap に基づく 6 つの組み込みテーマが付属しています。それぞれにダーク バージョンとライト バージョンがあります。ツールボックスでテーマ カードを選択すると、試すことができます。 +プライベート プレビューには、Material、Fluent、または Bootstrap に基づく 6 つの組み込みテーマが付属しています。それぞれにダーク バージョンとライト バージョンがあります。ツールボックスでテーマ カードを選択すると、試すことができます。 テーマの切り替え
-## Material vs. Fluent vs. Bootstrap +## Material vs. Fluent vs. Bootstrap -Material から Fluent に切り替えると、コンポーネントの外観が異なることがわかります。たとえば、Material の入力フィールドのフローティング ラベル スタイルは、固定ラベルに切り替わります。また、スイッチも視覚的に異なります。ツールボックスでテーマ カードを選択すると、試すことができます。 +Material から Fluent に切り替えると、コンポーネントの外観が異なることがわかります。たとえば、Material の入力フィールドのフローティング ラベル スタイルは、固定ラベルに切り替わります。また、スイッチも視覚的に異なります。ツールボックスでテーマ カードを選択すると、試すことができます。 -## テーマをカスタマイズして適用する +## テーマをカスタマイズして適用する -ブランドに合わせてカスタム テーマを作成できます。これを行うには、新しいテーマを作成し、基本テーマの 1 つを開始点として選択します。カラー パレットは、選択したプライマリ カラーとセカンダリ カラーに基づいて自動的に生成されます。タイポグラフィに関しては、今のところフォントのセットが組み込まれていますが、将来のバージョンではよりクリエイティブなコントロールを追加する予定です。編集が完了したら、テーマを保存して変更を適用します。 +ブランドに合わせてカスタム テーマを作成できます。これを行うには、新しいテーマを作成し、基本テーマの 1 つを開始点として選択します。カラー パレットは、選択したプライマリ カラーとセカンダリ カラーに基づいて自動的に生成されます。タイポグラフィに関しては、今のところフォントのセットが組み込まれていますが、将来のバージョンではよりクリエイティブなコントロールを追加する予定です。編集が完了したら、テーマを保存して変更を適用します。 新しいテーマを作成する
@@ -43,8 +43,8 @@ Material から Fluent に切り替えると、コンポーネントの外観が -* [Flex レイアウト](../flex-layouts/flex-layouts.md) -* [Ignite UI for Angular テーマ化]({environment:infragisticsBaseUrl}/products/ignite-ui-angular/angular/components/themes/index) -* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) -* [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components) +- [Flex レイアウト](../flex-layouts/flex-layouts.md) +- [Ignite UI for Angular テーマ化]({environment:infragisticsBaseUrl}/products/ignite-ui-angular/angular/components/themes/index) +- [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components) diff --git a/jp/blazor-support.md b/jp/blazor-support.md index c37f225..b37c447 100644 --- a/jp/blazor-support.md +++ b/jp/blazor-support.md @@ -21,58 +21,64 @@ Blazor コンポーネントの可用性の一覧については、[アプリの > [!NOTE] >まだ利用できないコンポーネントのコードを生成しようとすると、そのようなコンポーネントがまだサポートされていないことを示すプレースホルダーが表示されます。これにより、デザイナーでより複雑な UI を開発することを控える必要はありません。 -### この記事の内容: -* 機能の概要 -* Blazor コード生成 -* アプリケーションを Github にアップロードする -* 既知の問題点および制限事項 +### この記事の内容 + +- 機能の概要 +- Blazor コード生成 +- アプリケーションを Github にアップロードする +- 既知の問題点および制限事項 ## 概要 + 好みや要件に基づいて、Blazor Web Assembly アプリまたは Blazor Server アプリの両方を生成できます。前述のように、Blazor コード生成機能は多数のコンポーネントをサポートしますが、多くのコンポーネントをサポートする予定です。グリッドおよびツリー グリッドのコード作成をお見逃しなく - Ignite UI for Blazor のネイティブ グリッド コンポーネントを使用して Blazor アプリケーションを実行できるようにするデータ バインディングなど、ほとんどのグリッド機能がサポートされるようになりました。Excel スタイル フィルタリング、ページング、行編集、セル選択などの機能を利用できます。 ## Blazor コード生成 + アプリケーションのデザインを完了し、コードをプレビューする前に、`[GitHub に公開]` と `[プレビュー]` アクション ボタンの隣のナビゲーション バーにあるプラットフォーム ピッカー ドロップダウンに注意してください。アプリに適したフレームワークは `[Blazor WASM]` または `[Blazor Server]` オプションを選択して Blazor のコードを生成します。Angular の場合は `[Angular]` または `[Web Components]` を選択します。ピッカーで選択した内容が保存され、次回 App Builder にアクセスしたときにフレームワークが事前に選択されています。 ## アプリケーションを Github にアップロードする + アプリケーションをプレビュー モードで表示したり、ローカルにダウンロードしたりする以外に、完全なアプリコード リポジトリを生成するオプションがあります。これを行うには、[アプリの生成] ボタンに移動し、GitHub アカウントを App Builder に接続します。 ## 既知の問題点および制限事項 + Blazor アプリケーションの生成には、次の制限があります: + - 生成されたアプリケーションでは、Bootstrap はオフになっています。 生成されたコンポーネントには、次の制限があります: - Card: - - 逆のアクションは、生成されたコードには反映されません。 - - Actions-column タイプのデバイダーは、生成されたコードに反映されません。 + - 逆のアクションは、生成されたコードには反映されません。 + - Actions-column タイプのデバイダーは、生成されたコードに反映されません。 - Navigation Drawer - - ピン固定のしきい値はサポートしていません。 + - ピン固定のしきい値はサポートしていません。 - Avatar: - - Initials タイプは、コンテンツを最初の 2 文字に制限しません。 + - Initials タイプは、コンテンツを最初の 2 文字に制限しません。 - Icon - - 生成されたコードで `IgbIcon` を使用しません。アイコンを使用するすべてのコンポーネントも、`IgbIcon` で生成されるわけではありません。 + - 生成されたコードで `IgbIcon` を使用しません。アイコンを使用するすべてのコンポーネントも、`IgbIcon` で生成されるわけではありません。 - Date Picker: - - ダイアログ モードはサポートしていません。 - - 複数の月の表示はサポートしていません。 - - アクション ボタンはサポートしていません。 + - ダイアログ モードはサポートしていません。 + - 複数の月の表示はサポートしていません。 + - アクション ボタンはサポートしていません。 - Icon Button - - `IgbIconButton` を生成しませんが、代わりにアイコン付きの `IgbButton` を生成します。 + - `IgbIconButton` を生成しませんが、代わりにアイコン付きの `IgbButton` を生成します。 - Input Group - タイプが Date に設定されている場合: - - 入力形式はサポートしていません。 - - 表示形式を完全にはサポートしていません。 - - ヘルプ テキストはサポートしていません。 - - カスタム プレフィックスとサフィックスはサポートしていません。 - - 最小値と最大値はサポートしていません。 - - 値ループをサポートしていません。 + - 入力形式はサポートしていません。 + - 表示形式を完全にはサポートしていません。 + - ヘルプ テキストはサポートしていません。 + - カスタム プレフィックスとサフィックスはサポートしていません。 + - 最小値と最大値はサポートしていません。 + - 値ループをサポートしていません。 - Radio Group - - 必須をサポートしていません。 + - 必須をサポートしていません。 - Grid/Tree Gird: - - 列の選択はサポートしていません。 - - 行操作はサポートしていません。(アクション ストリップ) + - 列の選択はサポートしていません。 + - 行操作はサポートしていません。(アクション ストリップ) - Rating: - - `readonly` および `disabled` 入力の [ngModel] バインディングをサポートしていません (Angular の場合)。 - - エクスポートされたコードの評価要素の繰り返しはサポートされていません。 - - Angular と WC にのみ含まれており、Blazor の Rating はありません。 + - `readonly` および `disabled` 入力の [ngModel] バインディングをサポートしていません (Angular の場合)。 + - エクスポートされたコードの評価要素の繰り返しはサポートされていません。 + - Angular と WC にのみ含まれており、Blazor の Rating はありません。 サポートされているすべてのコンポーネントのリストについては、[「アプリを生成」](generate-app/generate-app-overview.md#サポートされているコンポーネント)を参照してください。 @@ -80,10 +86,10 @@ Blazor アプリケーションの生成には、次の制限があります: -* [アプリを生成する](./generate-app/generate-app-overview.md) -* [App Builder コンポーネント](indigo-design-app-builder-components.md) -* [Flex レイアウト](flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](running-desktop-app.md) -* [はじめに]({environment:appbuilderBaseUrl}/help/getting-started) -* [コンポーネント]({environment:appbuilderBaseUrl}/components) -* [Indigo.Design コンポーネント]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) \ No newline at end of file +- [アプリを生成する](./generate-app/generate-app-overview.md) +- [App Builder コンポーネント](indigo-design-app-builder-components.md) +- [Flex レイアウト](flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](running-desktop-app.md) +- [はじめに]({environment:appbuilderBaseUrl}/help/getting-started) +- [コンポーネント]({environment:appbuilderBaseUrl}/components) +- [Indigo.Design コンポーネント]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) diff --git a/jp/change-log.md b/jp/change-log.md index 28bc669..8499664 100644 --- a/jp/change-log.md +++ b/jp/change-log.md @@ -10,28 +10,36 @@ _language: ja > 最新の更新は 2025 年 9 月 23 日に行われました。[詳細については、App Builder ブログをご覧ください。](https://www.appbuilder.dev/ja/blog) ## 2025 年 9 月リリース + ### 機能 + - **一般アクション向けの条件付きロジック** - ネストされた If-Else、マルチブランチ条件、プロンプト付きの条件付き削除、動的パラメーター渡しを可能にし、より柔軟なデータ アクション フローを実現します。 ## 2025 年 8 月リリース + ### 機能 + - コンポーネント ツールボックスに **ApexCharts** を追加しました。 - **Pivot Grid** が、データ フィールドからディメンションと値を自動生成し、すぐに使えるピボット ビューを提供するようになりました。 - **選択済みリスト項目**のサポートを追加し、選択時のスタイルを適用して、選択された値を後で使用できるようにしました。 - **空のグリッド テンプレート**と**ローディング インジケーター テンプレート**を追加しました。 ## 2025 年 6 月リリース + ### 機能 + - データ アクションの**条件付きアクション**を有効にして、フォームとグリッドがアクションの結果に基づいて異なるロジックを実行できるようにしました。 - **グリッドのマスター詳細**テンプレートが導入されました。 - **スペイン語のサポート**が追加されました。 - より豊富なナビゲーションを実現するために、ネストされたルート内の Views Container を使用した**子レベルのルーティング**のサポートを追加しました。 ### 機能改善 + - **フォームと入力検証**の機能強化 - **Icon button** に新しいバリアント (コンテインド、アウトライン、フラット) が追加されました。 ### [プレビュー版環境](https://preview.appbuilder.dev/)の AI 機能 + - **チャット履歴のピン固定** – 重要なセッションに簡単にアクセスできるように、チャットをピン固定/解除できます。 - **コンテキスト編集** – UI 要素をクリックして、AI チャット経由で直接編集できます。 - **コンポーネント インジケーター** – チャット下部に現在選択されている UI 要素が表示されます。 @@ -41,7 +49,9 @@ _language: ja - **画像アップロードのサポート** – アイコンのクリック、ドラッグ&ドロップ、または貼り付けで画像をアップロードできます。 ## 2025 年 5 月リリース + ### 機能 + - Hierarchical Grid の**オンデマンド ロード**機能は、個別のデータ リクエストを持つ RowIslands を通じて構成され、必要な場合にのみ子データをロードします。 - より豊富なナビゲーションを実現するために、ネストされたルート内の Views Container を使用した**子レベルのルーティング**のサポートを追加しました。 - Form、Grid、スタンドアロンの Input コンポーネント全体に**入力検証**のサポートが追加され、minLength、maxLength、pattern、min、max 属性の使用が可能になりました。 @@ -49,7 +59,9 @@ _language: ja - アプリを DevOps リポジトリに直接公開できる **Azure DevOps との統合**が追加されました。[ヘルプ ドキュメント](https://www.appbuilder.dev/ja/help/generate-app/azure-integration)。 ## 2025 年 3 月末リリース ([プレビュー版環境](https://preview.appbuilder.dev/)) + ### 機能 + - アプリ作成のための**会話型 AI エクスペリエンス**。 - すべてのグリッドに**初期の高度なフィルタリング**のサポートを追加しました。 - 新しい**クエリ変数**タイプ - データ ソースと連携し、API リクエストを通じて大規模なデータセットを動的にフィルタリングすることで、サーバー側フィルタリングによる最適なパフォーマンスを実現する特殊な変数です。 @@ -57,27 +69,35 @@ _language: ja - **アクションの並べ替え** - コンポーネントのインタラクションによってトリガーされるアクションの実行順序をカスタマイズします。 ### メンテナンス更新 + - 生成されたアプリケーションのフォーム リセット機能。 - Blazor、React、Web コンポーネントの集計サポートが無効になりました。 ## 2025 年 3 月リリース + ### 機能 + - アプリが API からページングされたデータをリクエストできるように、**リモート ページング**のサポートが追加されました。 - **複数の操作のサポート** - 1 回のインタラクション (クリック、行選択など) で複数の操作をトリガーできるようになり、より複雑なワークフローが可能になりました。 - グリッド**集計の切り替え** – 列ごとに集計を有効/無効にするプロパティが追加されました。 - コンポーネント ツールボックスに **Carousel コンポーネント**を追加しました。 ## 2025 年 1 月リリース + ### 機能 + - **Figma 用 Indigo UI Kit** を導入しました。これにより、App Builder とシームレスに統合し、Angular、React、Blazor、Web Components 用のコードを視覚的にデザインして生成できます。 - グリッド列編集テンプレートに**自動値バインディング**を追加しました。 ## 2024 年 12 月リリース + ### 機能 + - コンポーネント ツールボックスに **Hierarchical Grid** を追加しました。 - リポジトリから直接静的サイトをホストするための **GitHub Pages** 配置。 ### メンテナンス更新 + - Angular アプリは [Ignite UI for Angular `19.0.0`](https://github.com/IgniteUI/igniteui-angular/releases/tag/19.0.0) を使用して生成されるようにしました。 - React アプリは [Ignite UI for React `18.7.4`](https://github.com/IgniteUI/igniteui-react) を使用して生成されるようにしました。 - Web Component アプリは [Ignite UI for Web Components `5.1.2`](https://github.com/IgniteUI/igniteui-webcomponents/) を使用して生成されるようにしました。 @@ -85,21 +105,27 @@ _language: ja - 不具合修正 ## 2024 年 11 月リリース + ### 機能 + - **フォーム ビルダー** - フォームをゼロから作成するか、REST データ エンドポイントをドロップして自動的に作成します。 - Northwind Rest API に基づいた**新しい**デフォルトのデータ ソース。 - **新しい**米国大統領選挙のサンプル アプリ。 ### 機能改善 + - テーマとコンポーネントのサイズを解決するための UX が改善されました。 ## 2024 年 9 月リリース + ### 機能 + - 関連するデータ ソースの変更が検出されたときに**互換性のないバインディングをグローバルに修正する**ためのガイド付きアプローチ。 - グリッド コンポーネントで**リモート ページング**を構成して、サーバーからデータをチャンク単位で取得します。 - CSS グリッド レイアウトの親の変更のサポート。CSS Flexbox とともにテンプレートの行と列を含む **CSS グリッドを使用して**レイアウトを作成します。 ### メンテナンス更新 + - Angular アプリは [Ignite UI for Angular `18.1.0`](https://github.com/IgniteUI/igniteui-angular/releases/tag/18.1.0) を使用して生成されるようにしました。 - React アプリは、[Ignite UI for React `18.6.1`](https://github.com/IgniteUI/igniteui-react) を使用して生成されるようにしました。 - Web Component アプリは、[Ignite UI for Web Components `4.11.1`](https://github.com/IgniteUI/igniteui-webcomponents/) を使用して生成されるようにしました。 @@ -107,27 +133,34 @@ _language: ja - 不具合修正 ## 2024 年 8 月リリース + ### 機能 + - App Builder AI 駆動型画像およびデータ ソース生成。 - CSS グリッド レイアウトのサポートが追加されました。 - グローバル アプリケーション サイズとコンポーネント ベースのサイズを設定します。 - Rest API を更新すると、データ ソースが自動的にバックグラウンドで更新されます。 ### 機能改善 + - 新しいデータ プロバイダーのサポート - PostgreSQL (SDK およびオンプレミス)。 - データ ソースのコレクション用の新しいドリルダウン ピッカー。 - ダウンロード/アップロード アプリケーション テンプレートの UI を公開しました。 ## 2024 年 6 月リリース + ### 機能 + - **React** 用のアプリをデザインおよび生成します。 - 初めてアクセスするユーザーが **ゲスト アクセス モード**で App Builder を使用できるようにします。訪問者はアカウントでサインインすることで、いつでも進行状況を保存できます。 ### 機能改善 + - **Select、Text-area、Radio-group コンポーネント**に双方向データ バインディングのサポートが追加されました。 - アプリが依存する**データ ソースの更新**について通知を受け取り、変更内容を表示します。 ## メンテナンス更新 + - Angular アプリは [Ignite UI for Angular `17.2.0`](https://github.com/IgniteUI/igniteui-angular/releases/tag/17.2.0) を使用して生成されるようにしました。 - React アプリは、[Ignite UI for React `18.6.1`](https://github.com/IgniteUI/igniteui-react) を使用して生成されるようにしました。 - Web Component アプリは、[Ignite UI for Web Components `4.9.0`](https://github.com/IgniteUI/igniteui-webcomponents/blob/4.9.0/CHANGELOG.md#490---2024-04-30) を使用して生成されるようにしました。 @@ -135,12 +168,15 @@ _language: ja - 不具合修正 ## 2024 年 5 月リリース + ### 機能 + - 最新の OpenAPI スキーマを使用するように**既存のデータソースを更新し**、差異がある場合はそれを表示します。 - **Tree-grid** コンポーネントの行を作成、更新、削除するためのデータ アクションの設定。 - **Tree-grid** コンポーネントの行選択イベントに基づく変数の更新。 - + ### 機能改善 + - **Input、Checkbox、Switch、Date Picker、Calendar、Rating、Slider コンポーネント**に双方向データ バインディングのサポートが追加されました。 - **単一ノードの展開**と**項目のクリックによる切り替え**のための **Tree コンポーネント プロパティ**が追加されました。 - Input コンポーネントに検索スタイルのオプションが追加されました。 @@ -150,64 +186,84 @@ _language: ja - 不具合修正 ## 2024 年 2 月リリース + ### 機能 + - **ルート パラメーター**を使用したアプリのナビゲーションを追加しました。 - **依存変数**のサポートを追加しました。 - **エディター** (変数タイプに基づく) を介した「変数の設定」アクションに**静的値入力機能**を追加しました。 ### 機能改善 + - Angular アプリは **Ignite UI for Angular `17.0.x`** を使用して生成されるようにしました。 - 不具合修正 ## 2023 年 12 月リリース + ### 機能 -- アプリ内で定義された **すべての変数を 1 か所から管理**できるようになりました。 + +- アプリ内で定義された **すべての変数を 1 か所から管理**できるようになりました。 - コンポーネント ツールボックスに **Financial Chart** を追加しました。 - **Date Picker** コンポーネントに**値変更**のインタラクション イベントを追加しました。 - + ### 機能改善 + - Angular アプリは **Ignite UI for Angular `16.1.11`** を使用して生成されるようにしました。 -- OpenAPI ベースのデータ ソースを構成するときに **すべてのエンドポイントを選択する**オプションを追加しました。 +- OpenAPI ベースのデータ ソースを構成するときに **すべてのエンドポイントを選択する**オプションを追加しました。 - バグ修正。 ## 2023 年 10 月リリース + ### 機能 + - **変数を作成および編集して**、コンポーネント間 (ローカル変数) またはビュー間 (グローバル変数) でデータを受け渡します。 - API リクエストから**配列 / オブジェクト変数の値を初期化**します。 - ユーザー インタラクション (イベント) を定義するときに、**[変数の設定]** アクションを使用してターゲット変数の値を更新します。 - **[選択が変更されました]** または **[クリック時]** イベントを使用して変数を更新します。 - 変数の値、またはオブジェクト型変数のネストされたデータ フィールドを、**コンポーネント プロパティにバインド**します。 - URL パラメーター (パスおよびクエリ パラメーター) をを伴う API エンドポイントを、**コンポーネント データにバインド**します。 + ### 機能改善 + - バグ修正と全般的改善。 ## 2023 年 8 月リリース + ### 機能 + - Combo の**単一選択** 機能を追加しました。 - **Material Extended Icons** のサポートを追加しました。 - 新しい Stepper **ナビゲーション操作**を追加しました。 - **Fluent** と **Material** の両方用の新しい [Indigo.Design UI キット バージョン 1.3](https://www.figma.com/@infragistics) ### 機能改善 + - Angular アプリは **Ignite UI for Angular `16.0.15`** を使用して生成されるようにしました。([変更ログ](https://github.com/IgniteUI/igniteui-angular/releases/tag/16.0.15)) - バグ修正と全般的改善。 ## 2023 年 6 月リリース + ### 機能 + - **グリッド列テンプレート** - ヘッダー、セル表示、セル編集を追加しました。 - OpenAPI 定義のスキーマ エンティティを参照およびナビゲーションするための UI を追加しました。 - ツールボックス コンポーネントは関連するヘルプ ドキュメントにリンクされていました。 + ### 機能改善 + - Angular アプリは **Ignite UI for Angular `16.0.0`** を使用して生成されるようにしました。([変更ログ](https://github.com/IgniteUI/igniteui-angular/releases/tag/16.0.0)) - Travel アプリ: 画像の背景位置の改善。 - バグ修正と全般的改善。 ## 2023 年 5 月リリース + ### 機能 + - **Stepper** と **Reveal Dashboard** をコンポーネント ツールボックスに追加しました。 - アプリを生成するときに、**ライセンス付きパッケージとライセンスなしパッケージ**を切り替えることができます。 ### 機能改善 + - 自動レイアウトを使用する **Figma デザインから CSS Flexbox レイアウト**を作成するためのレイアウト ヒューリスティックが改善されました。 - **Figma Material UI キット** を **v1.3** に更新しました。 - テーマ パレットと **ダーク テーマ**を使用してアプリを作成できるように **Figma プラグイン**を更新しました。 @@ -217,17 +273,22 @@ _language: ja - バグ修正と全体的な改善。 ## 2023 年 4 月リリース + ### 機能改善 + - Combo、Select、Dialog コンポーネント用の新しいコード生成 (Blazor)。 - ライセンスのないコードのエクスポートのための新しいトグル。 - サンプル アプリケーションの更新 - Team Collaboration、Ecommerce Auto Shop。 - バグ修正と全体的な改善。 ## 2023 年 3 月リリース + ### 機能 + - 新しいサンプル アプリケーション - Health Vault。 ### 機能改善 + - Figma インポート ストーリーの強化。 - Figma Material UI キット 1.2。 - Figma プラグインのアップグレード。 @@ -236,6 +297,7 @@ _language: ja ## 2023 年 2 月リリース + ### 機能 - OpenAPI 定義に基づいてデータ ソースを作成するときに、REST API メソッドとして POST/PUT/DELETE を指定できるようになりました。 @@ -255,7 +317,9 @@ _language: ja - バグ修正と全般的改善 ## 2022 年 12 月リリース + ### 機能 + - コンポーネント ツールボックスに **Pivot Grid コンポーネント**を追加しました。 - **Tree Grid** コンポーネントに階層データ サポートを追加しました。 - Web Components の **Combo コンポーネント**コード生成を追加しました。 @@ -264,27 +328,35 @@ _language: ja - 新しい**サンプル アプリ** - Movie Premieres を追加しました。 ### 機能改善 + - REST API エンドポイントに接続するときに、**認証の詳細を記憶する**ためのオプションを追加しました。 - バグ修正とパフォーマンスの改善。 ## 2022 年 11 月リリース + ### 機能 + - **アプリ**とコンポーネントを **Web Components** プロジェクトとして生成できるようになりました。 - アプリをプレビューする公開リンクを**共有できます**。 - コンポーネント ツールボックスに **Rating** を追加しました (Angular と Web Components)。 + ### 機能改善 + - **Grid** コンポーネント (Blazor) の新機能を追加しました。 - **Blazor** と **Web Components** コード生成用の TreeGrid コンポーネントを追加しました。 - Angular アプリは **Ignite UI for Angular `~14.1.1`** を使用して生成されるようにしました。([変更ログ](https://github.com/IgniteUI/igniteui-angular/releases/tag/14.1.1)) - バグ修正 ## 2022 年 10 月リリース + ### 機能 + - コンポーネント ツールボックスに **Tree-Grid** および **Accordion** を追加しました。 - **Grid** コンポーネントの列コレクションを定義し、列を再配置しました。 - **Grid** コンポーネントの列コレクションを定義し、列を再配置しました。 ### 機能改善 + - **OpenAPI** 定義の使用時に参照オブジェクトのサポートを追加しました。 - **Safari ブラウザー**のサポートを追加しました。 - サブスクリプションを所有している場合、ライセンス版パッケージで**アプリを生成できるようになりました**。([詳細情報](https://jp.infragistics.com/products/appbuilder/help/generate-app/generate-app-overview#ライセンス-コードのエクスポート)) @@ -293,11 +365,14 @@ _language: ja [詳細情報](https://www.infragistics.com/community/blogs/b/infragistics/posts/app-builder-release-with-web-components-code-generation-tree-grid-and-more) ## 2022 年 8 月リリース + ### 機能 + - Blazor および Angular のコンポーネント ツールボックスに **Tree コンポーネント**を追加しました。 - **Blazor WebAssembly/Server 用**のアプリを生成できます。 ### 機能改善 + - **行と列のレイアウト (Flexbox)** に `grid-gap` のサポートを追加しました。 - OpenAPI データ ソースの構成時に**エンドポイントのフィルタリング**を追加しました。 - **Expansion panel** を Blazor コンポーネントとして生成 @@ -305,27 +380,34 @@ _language: ja - バグ修正とパフォーマンスの改善 ## 2022 年 7 月リリース + ### 機能改善 + - Angular アプリは **Ignite UI for Angular `~14.0.0`** を使用して生成されるようにしました。 - アプリのテーマを定義するときに任意の **Google フォント**の選択がサポートされました。 - **Angular および Blazor コード生成**の全般的な改善 ## 2022 年 6 月リリース + ### 機能 - - コンポーネント ツールボックスに **Category Chart** を追加しました。 - - コンポーネント ツールボックスに **Pie Chart** を追加しました。 - - **GitHub の統合**: ユーザーの変更をロールバックせずに更新を公開できるようになりました。 - - **ローカル ネットワーク ソース**からのデータ リクエストを許可するようになりました。 + +- コンポーネント ツールボックスに **Category Chart** を追加しました。 +- コンポーネント ツールボックスに **Pie Chart** を追加しました。 +- **GitHub の統合**: ユーザーの変更をロールバックせずに更新を公開できるようになりました。 +- **ローカル ネットワーク ソース**からのデータ リクエストを許可するようになりました。 [詳細情報](https://www.infragistics.com/community/blogs/b/infragistics/posts/app-builder-release-with-charts-support-and-more) ## 2022 年 5 月リリース + ### 機能 + - Sketch で Material、Fluent、Bootstrap、Indigo テーマに一致する **4 つの新しい UI キット**を使用してデザインを作成できます。 - **Blazor** に **Dark テーマ**のサポートを追加しました。 ### 機能改善 + - **Blazor** アプリのコード生成: - **DropDown、Chip、Slider、Snackbar** のサポートを追加しました。 - **Navigation drawer、Navigation bar、および Card** のコード生成を更新しました。 @@ -338,20 +420,26 @@ _language: ja - メインのアプリ メニューから **App Builder デスクトップ アプリケーションをダウンロード**できるようになりました。 ## メンテナンスの更新とバグ修正 + - Indigo.Design UI キットの名前を変更しました。 - エンドポイント (OpenAPI) の構成時の baseUrl の自動入力を更新しました。 ## 2022 年 4 月リリース + ### 機能 + - リンクされたすべてのリソース (テーマ、画像アセット、データ)を含め、**アプリケーションを別のワークスペースにコピーできます**。 - 新しいアプリの作成時に新しい**アプリ テンプレート**を選択できます。 - アプリで新しいビューを作成するときに**プリセット レイアウト**を選択できます。 ### 機能改善 + - **Swagger UI** 関連およびバグ修正 ### メンテナンスの更新とバグ修正 + **これには以下が含まれますが、これらに限定されません:** + - Swagger テーブルのコンテキスト メニューを非表示にしました。 - URL を追加時の進行状況インジケーターを、完了ボタンに追加しました。 - DS テーブルにない `requestInfo` を修正しました。 @@ -362,11 +450,14 @@ _language: ja - [データの選択] ダイアログが、フィールドではなくデータ ソースを表示する問題を修正しました。 ## 2022 年 3 月リリース + ### 機能 + - データ バインディング RestAPI ストーリーの一部としての **OpenAPI (Swagger) サポート**。 - **オンプレミス版の App Builder**。独自のサーバーにインストールし、独自のサーバー ファイアウォールの背後にインストールできます。このインスタンスは、任意のインフラストラクチャで実行可能で、内部担当者のみがアクセスできます。 ### 機能改善 + - 画像の丸め半径を px、%、または rem で設定できます - ビューやプレビューの切り替え時にデザイン サーフェスのズーム レベルを保持します。 - **Blazor** アプリ生成の改善 @@ -377,7 +468,9 @@ _language: ja - オブジェクトをデータ ソースとした**ネストされた配列**のサポートを追加しました。 ### メンテナンスの更新とバグ修正 + **これには以下が含まれますが、これらに限定されません:** + - 「Sketch のアセットを取得する」で発生するエラーの修正。 - Select コンポーネントのポップアップがプレビュー モードで上部に表示されない問題。 - アプリを複製するときに、カスタム ビューポートが失われる問題。 @@ -403,11 +496,14 @@ _language: ja ## 2022 年 1 月 リリース ### 機能改善 + - **Sketch UI キットのテーマサポートの改善** - 表面の色を変更するライト/ダーク モードの切り替えが、グレーの色の設定方法に影響するようになりました - 黒または白の派生物として。 - **UI キットのバージョン チェックの更新** - パーサー dll とシンボル間の一貫性のために `キャンバス サイズの変更
-## 行と列のレイアウト +## 行と列のレイアウト -Flex レイアウト コンテナには、ネストされた UI 要素の位置を変更できる設定があります。H.align プロパティと V.Aalign プロパティには、それぞれのドロップダウンから簡単に適用できる flex プロパティがあります。キャンバスのデフォルトは行レイアウトで、水平方向に左揃えになり、垂直方向に引き伸ばされます。何から始めたかに関係なく、いつでも行と列のレイアウトを切り替えることができます。レイアウト コンテナのサイズはコンテンツに基づいていますが、高さと幅はいつでも指定できます。Padding プロパティをコンテナに追加し、マージンを追加して子 UI 要素のスペースを空けることもできます。これは、特定のコンポーネントを選択し、画面右側のプロパティ パネルでパディングまたはマージンを編集した後に実行できます。 +Flex レイアウト コンテナには、ネストされた UI 要素の位置を変更できる設定があります。H.align プロパティと V.Align プロパティには、それぞれのドロップダウンから簡単に適用できる flex プロパティがあります。キャンバスのデフォルトは行レイアウトで、水平方向に左揃えになり、垂直方向に引き伸ばされます。何から始めたかに関係なく、いつでも行と列のレイアウトを切り替えることができます。レイアウト コンテナのサイズはコンテンツに基づいていますが、高さと幅はいつでも指定できます。Padding プロパティをコンテナに追加し、マージンを追加して子 UI 要素のスペースを空けることもできます。これは、特定のコンポーネントを選択し、画面右側のプロパティ パネルでパディングまたはマージンを編集した後に実行できます。 レイアウト プロパティ
@@ -38,15 +42,15 @@ Flex レイアウト コンテナには、ネストされた UI 要素の位置 親コンポーネントを選択する
-## 流動的なサイズ変更と折り返し +## 流動的なサイズ変更と折り返し 他の注目に値するプロパティは、拡大と縮小に関連しています。これらは、Viewport のサイズが変更されたときにコンポーネントのサイズ変更に影響します。コンポーネントを `grow` に設定すると、コンテナが行レイアウトの場合は行方向に、列レイアウトの場合は列方向に展開されます。 - + 列/行のレイアウト オプションを拡大する
-## コンテキスト メニューからレイアウトに追加 +## コンテキスト メニューからレイアウトに追加 既存のコンポーネントを新しいレイアウトに追加する必要がある場合は、非常に便利なオプションがあります。選択したコンポーネントを右クリックすると、コンテキスト メニューがトリガーされ、要素を行または列のレイアウトに追加できます。 @@ -59,9 +63,9 @@ Flex レイアウト コンテナには、ネストされた UI 要素の位置 -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) -* [Flexbox](https://developer.mozilla.org/ja-JP/docs/Learn/CSS/CSS_layout/Flexbox) -* [Flexbox のガイド (英語)](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) -* [Flexbox Froggy (英語)](https://flexboxfroggy.com/) -* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) -* [Indigo.Design スタイル設定の概要](https://jp.infragistics.com/products/indigo-design/help/style/styling-overview) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) +- [Flexbox](https://developer.mozilla.org/ja-JP/docs/Learn/CSS/CSS_layout/Flexbox) +- [Flexbox のガイド (英語)](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +- [Flexbox Froggy (英語)](https://flexboxfroggy.com/) +- [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) +- [Indigo.Design スタイル設定の概要](https://jp.infragistics.com/products/indigo-design/help/style/styling-overview) diff --git a/jp/flex-layouts/row-and-column-layout.md b/jp/flex-layouts/row-and-column-layout.md index 5156d00..c1d3385 100644 --- a/jp/flex-layouts/row-and-column-layout.md +++ b/jp/flex-layouts/row-and-column-layout.md @@ -1,11 +1,9 @@ -## 行と列のレイアウト +## 行と列のレイアウト Flex レイアウト コンテナには、ネストされた UI 要素の位置を変更できる設定があります。ここでは、h.align プロパティと v.align プロパティとして示されています。キャンバスのデフォルトは行レイアウトで、水平方向に左揃えになり、垂直方向に引き伸ばされます。何から始めたかに関係なく、いつでも行と列のレイアウトを切り替えることができます。 - -この例では、サインイン ダイアログをキャンバスの中央に配置する必要があります。これを実現するには、配置設定を使用して、ネストされたコンテナをキャンバス上で垂直方向と水平方向の中央に配置します。ダイアログ自体には、すべてがダイアログ内で垂直にスタックするように列レイアウトを使用しました。レイアウト コンテナのサイズはコンテンツに基づいていますが、高さと幅はいつでも指定できます。コンテナにパディング プロパティを追加し、子 UI 要素のスペースを空けるためにマージンを追加することもできます。 +この例では、サインイン ダイアログをキャンバスの中央に配置する必要があります。これを実現するには、配置設定を使用して、ネストされたコンテナをキャンバス上で垂直方向と水平方向の中央に配置します。ダイアログ自体には、すべてがダイアログ内で垂直にスタックするように列レイアウトを使用しました。レイアウト コンテナのサイズはコンテンツに基づいていますが、高さと幅はいつでも指定できます。コンテナにパディング プロパティを追加し、子 UI 要素のスペースを空けるためにマージンを追加することもできます。 - -その間、子要素のラベルをクリックすると、いつでも親 UI 要素を選択できます。これは、ネストされたレイアウト コンテナがある場合に役立ちます。ご覧のとおり、テキスト コンポーネントを表示し、並べて切り替えるためのネストされた行レイアウトがあります。そして、これは列レイアウト内にあります。したがって、行レイアウト ラベルをクリックすると、その親列レイアウトが選択されます。 \ No newline at end of file +その間、子要素のラベルをクリックすると、いつでも親 UI 要素を選択できます。これは、ネストされたレイアウト コンテナがある場合に役立ちます。ご覧のとおり、テキスト コンポーネントを表示し、並べて切り替えるためのネストされた行レイアウトがあります。そして、これは列レイアウト内にあります。したがって、行レイアウト ラベルをクリックすると、その親列レイアウトが選択されます。 diff --git a/jp/generate-app/generate-app-overview.md b/jp/generate-app/generate-app-overview.md index d524400..ef1b65c 100644 --- a/jp/generate-app/generate-app-overview.md +++ b/jp/generate-app/generate-app-overview.md @@ -7,7 +7,7 @@ _language: ja # アプリを生成する > [!NOTE] ->Ignite UI App Builder でデザインされたアプリケーションは、ダウンロードするか、GitHub リポジトリに直接アップロードできます。 +>Ignite UI App Builder でデザインされたアプリケーションは、ダウンロードするか、GitHub リポジトリに直接アップロードできます。NPM 認証トークン
### トライアル ユーザー + **トライアル ユーザー**の場合、アプリ生成時に [Ignite UI for Angular](https://jp.infragistics.com/products/ignite-ui-angular)の無料トライアル版パッケージが使用されます。これは、**アプリケーションのダウンロード**と **GitHub への公開**の両方に適用されます。 フル ライセンス パッケージにアップグレードする方法 (プロジェクトが Ignite UI for Angular のトライアル版を使用している場合)、および、ライセンス版の npm フィードを使用するように環境と CI をセットアップする方法については、[ライセンス FAQ とインストール ドキュメント](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing) を参照してください。 @@ -107,9 +109,9 @@ Angular コード生成を備えた App Builder が市場に出てから数か -* [Blazor サポート](../blazor-support.md) -* [アプリケーションを GitHub にアップロードする](upload-application-to-github.md) -* [アプリケーションをローカルで実行する](run-application-locally.md) -* [アプリケーション コードのプレビュー](../preview-code.md) -* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) -* [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components) +- [Blazor サポート](../blazor-support.md) +- [アプリケーションを GitHub にアップロードする](upload-application-to-github.md) +- [アプリケーションをローカルで実行する](run-application-locally.md) +- [アプリケーション コードのプレビュー](../preview-code.md) +- [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components) diff --git a/jp/generate-app/run-application-locally.md b/jp/generate-app/run-application-locally.md index 48f498f..5aa4481 100644 --- a/jp/generate-app/run-application-locally.md +++ b/jp/generate-app/run-application-locally.md @@ -7,26 +7,27 @@ _language: ja # アプリケーションをローカルで実行する ### アプリをローカルで実行する + 最終的にアプリを開発するために、コードをコピーしてを貼り付ける必要はありません。代わりに、ツールバーの [アプリの生成] ボタンを使用してください。これにより、Angular または Blazor アプリケーション (プラットフォーム ピッカー ドロップダウンで選択されたフレームワークに依存) を含むパッケージをすばやく作成できます。このアプリを実行するには、Visual Studio Code のような IDE でフォルダーを開きます。 -* Node.js がインストールされていることを確認してください。VS Code で実行されるアプリケーション
-App Builder を使用すると、プロ級の Ignite UI コンポーネントを使用してアプリケーションを視覚的にデザインできます。その後、選択した IDE で開発を継続できる Angular または Blazor アプリケーションとしてコードを生成できます。最終的に、App Builder のデザイン画面でデザインしたものは、アプリが生成およびビルドされたときにまったく同じに見えることが保証されます。フィードバック ボタンを使用してフィードバックをお気軽にお知らせください。今後のリリース マイルストーンに向けて、お客様の経験と、お客様にとって価値のある機能についてお聞かせください。 +App Builder を使用すると、プロ級の Ignite UI コンポーネントを使用してアプリケーションを視覚的にデザインできます。その後、選択した IDE で開発を継続できる Angular または Blazor アプリケーションとしてコードを生成できます。最終的に、App Builder のデザイン画面でデザインしたものは、アプリが生成およびビルドされたときにまったく同じに見えることが保証されます。フィードバック ボタンを使用してフィードバックをお気軽にお知らせください。今後のリリース マイルストーンに向けて、お客様の経験と、お客様にとって価値のある機能についてお聞かせください。 ## その他のリソース -* [アプリケーションを GitHub にアップロードする](upload-application-to-github.md) -* [アプリケーション コードのプレビュー](../preview-code.md) -* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) -* [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components) +- [アプリケーションを GitHub にアップロードする](upload-application-to-github.md) +- [アプリケーション コードのプレビュー](../preview-code.md) +- [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components) diff --git a/jp/generate-app/upload-application-to-github.md b/jp/generate-app/upload-application-to-github.md index e90ea94..bd83ba6 100644 --- a/jp/generate-app/upload-application-to-github.md +++ b/jp/generate-app/upload-application-to-github.md @@ -7,17 +7,20 @@ _language: ja # アプリケーションを Github にアップロードする > [!NOTE] ->App Builder でデザインの準備ができたら、非公開または GitHub リポジトリにアップロードできます。 +>App Builder でデザインの準備ができたら、非公開または GitHub リポジトリにアップロードできます。 -### トピック コンテンツ: -* はじめに -* アプリケーションを Github にアップロードする +### トピック コンテンツ + +- はじめに +- アプリケーションを Github にアップロードする ## はじめに -App Builder の優れた機能の 1 つに、コード生成サービスがあります。アプリ デザインを完成させ、コードをレビューすると、ユーザーは最終的なアプリケーションコードを取得できます。アプリ コードを App Builder 内から直接 GitHub リポジトリに簡単にアップロードできるため、エクスペリエンスがさらに向上します。GitHub は開発者に人気のあるツールで、App Builder 機能を使用すると、レビューアーの割り当て、変更の追跡、コメントなど、すべての GitHub 機能を利用できます。この機能を提供することにより、製品チームはデザインからコード作成へのコラボレーションのストーリーにさらに 1 つの要素を追加するだけでなく、App Builder プラットフォームを、エンジニアに馴染みのある有名なサービスと統合しました。 + +App Builder の優れた機能の 1 つに、コード生成サービスがあります。アプリ デザインを完成させ、コードをレビューすると、ユーザーは最終的なアプリケーションコードを取得できます。アプリ コードを App Builder 内から直接 GitHub リポジトリに簡単にアップロードできるため、エクスペリエンスがさらに向上します。GitHub は開発者に人気のあるツールで、App Builder 機能を使用すると、レビューアーの割り当て、変更の追跡、コメントなど、すべての GitHub 機能を利用できます。この機能を提供することにより、製品チームはデザインからコード作成へのコラボレーションのストーリーにさらに 1 つの要素を追加するだけでなく、App Builder プラットフォームを、エンジニアに馴染みのある有名なサービスと統合しました。 ## アプリケーションを Github にアップロードする + アプリケーションのデザインを完了し、そのコードをプレビューした後、完全なアプリ コード リポジトリを生成します。これを行うには、[アプリの生成] ボタンに移動し、GitHub アカウントを App Builder に接続します。ボタン メニューからアプリケーション ファイルをダウンロードすることもできます。 @@ -39,9 +42,11 @@ GitHub アカウントでログインした後、Indigo.Design にアクセス ## GitHub との統合機能 ### すでにプッシュされた変更は上書きされません + App Builder ではなく、コードを使用して外部でアプリケーションの変更を行う場合があります。App Builder GitHub UI から変更をプッシュすると、これらの変更は上書きされません。App Builder 以外の main/master ブランチでのユーザー変更を尊重する新しい統合ポイントを追加しました。App Builder の作業を `main` ブランチにマージでき、次回 App Builder は新しい違いのみを含む PR を作成します。 機能改善: + - プルリクエストの関連ブランチで外部変更が行われた場合の警告。これらの変更を保持するには、現在のプルリクエストをマージしてから新しいリクエストを作成します。
@@ -62,7 +67,7 @@ App Builder ではなく、コードを使用して外部でアプリケーシ
-* [アプリケーションをローカルで実行する](run-application-locally.md)
-* [アプリケーション コードをプレビューする](../preview-code.md)
-* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started)
-* [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components)
+- [アプリケーションをローカルで実行する](run-application-locally.md)
+- [アプリケーション コードをプレビューする](../preview-code.md)
+- [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started)
+- [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components)
diff --git a/jp/getting-started.md b/jp/getting-started.md
index 8b987de..44744f4 100644
--- a/jp/getting-started.md
+++ b/jp/getting-started.md
@@ -16,27 +16,29 @@ App Builder は、すべてのコードを記述することなく、デザイ
プラットフォーム エコシステム
-### 簡単に言うと: +### 簡単に言うと -* **デザインシ ステム → UI キットとアダプター**: +- **デザインシ ステム → UI キットとアダプター**: それは、UI キット (Figma の Indigo.Design など) として実装されたデザイン システムから始まります。アダプターはデザインを App Builder が使用できる形式に変換します。 -* **App Builder + 統合**: +- **App Builder + 統合**: App Builder を使用して、アプリを視覚的に作成します。REST データ、Reveal SDK ウィジェット (ダッシュボード用)、Slingshot タスク (プロジェクト管理用) をサポートしています。 -* **共通アプリ モデル**: +- **共通アプリ モデル**: すべてが中央の**共通アプリ モデル**に集約されます。共通アプリ モデルは、開始方法 (デザインのインポートまたは手動ビルド) に関係なく、アプリを記述する統一された形式です。 -* **コード生成 (Codegen)**: +- **コード生成 (Codegen)**: 次に、モデルは**コード ジェネレーター**によって使用され、次のような実際の使用可能なコードが出力されます。 - * **Angular** - * **React** - * **Web Components** - * **Blazor** -* **配置対象**: + - **Angular** + - **React** + - **Web Components** + - **Blazor** +- **配置対象**: 最後に、生成されたコードは、**GitHub** や **Microsoft Azure** などのプラットフォームに直接配置できます。 ## App Builder を起動する + App Builder にアクセスするには、[https://appbuilder.dev](https://appbuilder.dev) に移動してサインインします。または、[https://my.appbuilder.dev](https://my.appbuilder.dev) にアクセスして App Builder を直接起動することもできます。アプリを作成および編集するには、有効なトライアル版または有料サブスクリプションが必要です。 ## 新しいアプリの作成 + [新しいアプリケーションの作成] ダイアログから新しいアプリケーションを作成するには、次の 3 つの方法があります。 1. **サンプル アプリ** - 入門アプリは、App Builder を使用して作成されたアプリケーションを探索するのに役立ち、独自のユーザー スペースでそれらを変更することもできます。また、独自のアプリを最初から作成しなくても、より大きなアプリケーション用に生成されたコードをプレビューするための優れたソースです。App Builder を初めて使用する場合は、[Sample Apps] オプションを開始点として使用することをお勧めします。これは、ツールのすばらしい機能を利用してアプリケーションの構築を開始するための最も簡単な方法です。 @@ -58,8 +60,9 @@ App Builder にアクセスするには、[https://appbuilder.dev](https://appbuサイド メニュー
## コードの取得 + App Builder は、常にライブ実行中の Web アプリケーションをデザイン画面とプレビュー ウィンドウの両方に表示します。基になるコードとアプリケーション モデルは、デザイン画面でアプリケーションに変更を加えると、リアルタイムで更新されます。生成されたアプリケーション コードはプレビュー ウィンドウでいつでも表示できます。また、生成されたアプリケーションを完全なアプリケーション コード リポジトリとしてダウンロードして、選択したコード エディターで開くこともできます。次に、App Builder を使用してデザインしたアプリケーションをマシン上でローカルにビルドして実行し、生成されたコードに追加の変更を加えることができます。 - +
アプリケーション プレビュー ウィンドウ
@@ -72,9 +75,10 @@ App Builder は、常にライブ実行中の Web アプリケーションをデ > アプリケーションのコードがダウンロードされると、ローカルで行われた変更は App Builder ユーザー スペースに反映されません。 ## オンプレミス版の App Builder + App Builder は、ソフトウェア製品の検出、ソフトウェア製品の設計、インタラクティブな製品概念実証の構築、ピクセルパーフェクトなコード プロジェクトの生成などの統合プラットフォームを開発者、デザイナー、製品マネージャーに提供する SaaS です。 -規制の厳しい業界に属する企業もあります。ほとんどの場合、セキュリティ上の理由から、App Builde rなどのクラウド ベースのソリューションへのアクセスが制限されているか、特定の場所でのインターネット接続が制限されています。このセグメントをカバーするためには、このような組織が App Builder をファイアウォールの内側に導入するための簡単な方法を提供する必要がありました。この方法では、独自のインフラ上で動作するプラットフォームのインスタンスを使用し、内部の人員のみがアクセスできるようにする必要がありました。 +規制の厳しい業界に属する企業もあります。ほとんどの場合、セキュリティ上の理由から、App Builder rなどのクラウド ベースのソリューションへのアクセスが制限されているか、特定の場所でのインターネット接続が制限されています。このセグメントをカバーするためには、このような組織が App Builder をファイアウォールの内側に導入するための簡単な方法を提供する必要がありました。この方法では、独自のインフラ上で動作するプラットフォームのインスタンスを使用し、内部の人員のみがアクセスできるようにする必要がありました。 オンプレミス アプリケーションは信頼性が高く、安全であるため、クラウドでは実現できないレベルの制御を維持できます。 @@ -120,12 +124,13 @@ App Builder は、ソフトウェア製品の検出、ソフトウェア製品 [このリポジトリ](https://github.com/IgniteUI/app-builder)は、問題や機能リクエストの送信、および製品の全般的なディスカッション、質問、共有したいフィードバックを対象としています。メールを送信することもできます。 ## その他のリソース + -* [App Builder インターフェイスの概要](interface-overview.md) -* [単一ページとナビゲーション](single-page-apps-and-navigation.md) -* [App Builder コンポーネント](indigo-design-app-builder-components.md) -* [Flex レイアウト](flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](running-desktop-app.md) -* [アプリを生成する](generate-app/generate-app-overview.md) -* [Indigo.Design はじめに]({environment:infragisticsBaseUrl}/products/indigo-design/help/getting-started) \ No newline at end of file +- [App Builder インターフェイスの概要](interface-overview.md) +- [単一ページとナビゲーション](single-page-apps-and-navigation.md) +- [App Builder コンポーネント](indigo-design-app-builder-components.md) +- [Flex レイアウト](flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](running-desktop-app.md) +- [アプリを生成する](generate-app/generate-app-overview.md) +- [Indigo.Design はじめに]({environment:infragisticsBaseUrl}/products/indigo-design/help/getting-started) diff --git a/jp/guide-to-variables-in-app-builder/component-properties-binding.md b/jp/guide-to-variables-in-app-builder/component-properties-binding.md index fcac060..1074fd9 100644 --- a/jp/guide-to-variables-in-app-builder/component-properties-binding.md +++ b/jp/guide-to-variables-in-app-builder/component-properties-binding.md @@ -48,6 +48,7 @@ App Builder でコンポーネント プロパティにバインドするには - **ローカル変数**: 同じビューのコンポーネント内でデータ交換を処理します。 ## 重要ポイント + App Builder コンポーネント バインドの本質は何ですか? - **柔軟性の向上**: App Builder の変数を使用すると、より柔軟で効率的なデータ バインドが可能になり、データ リピーターの必要性が減ります。 @@ -59,10 +60,10 @@ App Builder コンポーネント バインドの本質は何ですか? -* [変数の管理](variables-management.md) -* [URL パラメーターのバインド](url-parameters-binding.md) -* [ルート パラメーターを使用したナビゲーション](route-parameters-navigation.md) -* [イベントとアクションの操作](working-with-events-and-actions.md) -* [マスター/詳細の概念](../master-detail/master-detail.md) -* [ステップバイステップのアプリ作成例](../master-detail/step-by-step-examples.md) -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) \ No newline at end of file +- [変数の管理](variables-management.md) +- [URL パラメーターのバインド](url-parameters-binding.md) +- [ルート パラメーターを使用したナビゲーション](route-parameters-navigation.md) +- [イベントとアクションの操作](working-with-events-and-actions.md) +- [マスター/詳細の概念](../master-detail/master-detail.md) +- [ステップバイステップのアプリ作成例](../master-detail/step-by-step-examples.md) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) diff --git a/jp/guide-to-variables-in-app-builder/route-parameters-navigation.md b/jp/guide-to-variables-in-app-builder/route-parameters-navigation.md index 183eed9..1340a32 100644 --- a/jp/guide-to-variables-in-app-builder/route-parameters-navigation.md +++ b/jp/guide-to-variables-in-app-builder/route-parameters-navigation.md @@ -57,9 +57,9 @@ -* [コンポーネント プロパティのバインド](component-properties-binding.md) -* [URL パラメーターのバインド](url-parameters-binding.md) -* [イベントとアクションの操作](working-with-events-and-actions.md) -* [マスター/詳細の概念](../master-detail/master-detail.md) -* [アプリ作成 - ステップバイステップの例](../master-detail/step-by-step-examples.md) -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) \ No newline at end of file +- [コンポーネント プロパティのバインド](component-properties-binding.md) +- [URL パラメーターのバインド](url-parameters-binding.md) +- [イベントとアクションの操作](working-with-events-and-actions.md) +- [マスター/詳細の概念](../master-detail/master-detail.md) +- [アプリ作成 - ステップバイステップの例](../master-detail/step-by-step-examples.md) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) diff --git a/jp/guide-to-variables-in-app-builder/url-parameters-binding.md b/jp/guide-to-variables-in-app-builder/url-parameters-binding.md index 0a244f8..092d6de 100644 --- a/jp/guide-to-variables-in-app-builder/url-parameters-binding.md +++ b/jp/guide-to-variables-in-app-builder/url-parameters-binding.md @@ -10,6 +10,7 @@ _language: ja App Builder では、データ リクエストやリピーターに URL パラメーターを使用することを含め、高度なデータ操作および表示の技法を実装可能です。この機能は、動的なデータ駆動型アプリケーションを作成するために重要です。 ## データ リクエスト + パスまたはクエリ パラメーターを必要とするデータ エンドポイントを扱う場合、App Builder の URL パラメーター バインド機能がとても有用です。この機能により、アプリケーションは URL で指定されたパラメーターに基づいてデータ要求を行うことができます。たとえば、Customer Orders にバインドされた Grid コンポーネントを考えてみましょう。「CustomerID」 パス パラメーターを使用することにより、グリッドは指定された顧客に関連するデータを動的に取得して表示します。 > [!NOTE] @@ -26,6 +27,7 @@ App Builder では、データ リクエストやリピーターに URL パラデータ リピーター
## 重要ポイント + App Builder での URL パラメーター バインドにより、動的なデータ駆動型アプリケーションを作成するための無数の可能性が提供されますこの機能を活用することで、ユーザーのナビゲーションや入力に最適に応答するアプリケーションを構築することができ、全体的なユーザー エクスペリエンスと実用レベルのシナリオでのアプリケーションの適用性を向上させることができます。 - **動的なデータ取得**: App Builder の URL パラメーター バインドにより、動的なデータの取得が可能になり、グリッドやツリーなどのコンポーネントが URL パラメーターに基づいてデータを表示できるようになります。 @@ -38,10 +40,10 @@ App Builder での URL パラメーター バインドにより、動的なデ -* [変数の管理](variables-management.md) -* [ルート パラメーターを使用したナビゲーション](route-parameters-navigation.md) -* [コンポーネント プロパティのバインド](component-properties-binding.md) -* [イベントとアクションの操作](working-with-events-and-actions.md) -* [マスター/詳細の概念](../master-detail/master-detail.md) -* [ステップバイステップのアプリ作成例](../master-detail/step-by-step-examples.md) -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) \ No newline at end of file +- [変数の管理](variables-management.md) +- [ルート パラメーターを使用したナビゲーション](route-parameters-navigation.md) +- [コンポーネント プロパティのバインド](component-properties-binding.md) +- [イベントとアクションの操作](working-with-events-and-actions.md) +- [マスター/詳細の概念](../master-detail/master-detail.md) +- [ステップバイステップのアプリ作成例](../master-detail/step-by-step-examples.md) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) diff --git a/jp/guide-to-variables-in-app-builder/variables-management.md b/jp/guide-to-variables-in-app-builder/variables-management.md index d2eb164..43da4b5 100644 --- a/jp/guide-to-variables-in-app-builder/variables-management.md +++ b/jp/guide-to-variables-in-app-builder/variables-management.md @@ -25,6 +25,7 @@ App Builder では、変数は主に次の 2 つのカテゴリに分類され ## 変数の作成方法 ### インタラクション セクション + 変数を利用する特定のコンポーネント イベントに関連付けられた変数は、[インタラクション] セクションを通じて管理します。 たとえば、Financial -> Box Office Revenue テーブルにバインドされたコンボを追加し、変数の設定アクションを使用して選択変更イベント ハンドラーを追加した場合、変数フィールドを選択して [+ 新しい変数] ボタンを使用できます。 @@ -58,7 +59,7 @@ App Builder では、変数は主に次の 2 つのカテゴリに分類され 以下に、変数の利用について詳しく説明します。 -## エンドポイントからのデータの初期化 +## エンドポイントからのデータの初期化 データを変数に保存し、任意のコンポーネントのデータ コンテキストで使用します。変数の型は、選択したエンドポイントのデータ スキーマに基づいて自動的に決定されます。 @@ -92,10 +93,10 @@ App Builder での変数管理のこれらの側面を習得することで、 -* [コンポーネント プロパティのバインド](component-properties-binding.md) -* [URL パラメーターのバインド](url-parameters-binding.md) -* [ルート パラメーターを使用したナビゲーション](route-parameters-navigation.md) -* [イベントとアクションの操作](working-with-events-and-actions.md) -* [マスター/詳細の概念](../master-detail/master-detail.md) -* [ステップバイステップのアプリ作成例](../master-detail/step-by-step-examples.md) -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) \ No newline at end of file +- [コンポーネント プロパティのバインド](component-properties-binding.md) +- [URL パラメーターのバインド](url-parameters-binding.md) +- [ルート パラメーターを使用したナビゲーション](route-parameters-navigation.md) +- [イベントとアクションの操作](working-with-events-and-actions.md) +- [マスター/詳細の概念](../master-detail/master-detail.md) +- [ステップバイステップのアプリ作成例](../master-detail/step-by-step-examples.md) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) diff --git a/jp/guide-to-variables-in-app-builder/working-with-events-and-actions.md b/jp/guide-to-variables-in-app-builder/working-with-events-and-actions.md index 2be881c..985d828 100644 --- a/jp/guide-to-variables-in-app-builder/working-with-events-and-actions.md +++ b/jp/guide-to-variables-in-app-builder/working-with-events-and-actions.md @@ -55,10 +55,10 @@ Combo コンポーネントの注目すべき点は、`valueKey` 属性が設定 -* [変数の管理](variables-management.md) -* [ルート パラメーターを使用したナビゲーション](route-parameters-navigation.md) -* [コンポーネント プロパティのバインド](component-properties-binding.md) -* [URL パラメーターのバインド](url-parameters-binding.md) -* [マスター/詳細の概念](../master-detail/master-detail.md) -* [ステップバイステップのアプリ作成例](../master-detail/step-by-step-examples.md) -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) \ No newline at end of file +- [変数の管理](variables-management.md) +- [ルート パラメーターを使用したナビゲーション](route-parameters-navigation.md) +- [コンポーネント プロパティのバインド](component-properties-binding.md) +- [URL パラメーターのバインド](url-parameters-binding.md) +- [マスター/詳細の概念](../master-detail/master-detail.md) +- [ステップバイステップのアプリ作成例](../master-detail/step-by-step-examples.md) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) diff --git a/jp/how-to/responsive-fluid-layout.md b/jp/how-to/responsive-fluid-layout.md index e6c9626..e927c69 100644 --- a/jp/how-to/responsive-fluid-layout.md +++ b/jp/how-to/responsive-fluid-layout.md @@ -6,22 +6,23 @@ _language: ja --- # レスポンシブ Fluid レイアウト + Fluid レイアウトは、作成するのが常に課題です。このミニチュートリアルでは、3カラムのレイアウトを素早く作成し、画面サイズが変わったときに**レスポンシブ**に動作するようにする方法を紹介します。  -このチュートリアルでは、App Builder で Layout プロパティを使用して、この動的なスタック効果を実現する方法を示します。 +このチュートリアルでは、App Builder で Layout プロパティを使用して、この動的なスタック効果を実現する方法を示します。コンポーネントのクイック追加
-## コンポーネントの構成 +## コンポーネントの構成 すべてのコンポーネントには、Indigo.Design システムに一致する一連のプリセット タイプが付属しています。たとえば、Indigo.Design システムには、Raised、Outline、Flat の 3 つのプリセット タイプのボタンがあります。 コンポーネントのプリセット
-入力フィールドやカード コンポーネントなどのより複雑なコンポーネントの場合は、コンポーネントのセクションをオン/オフにすることができます。また、コンポーネントのプロパティはコンポーネントの視覚的な構造も反映しており、[Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) などの開発者ツールキットにある仕様と一致します。入力フィールドの場合、プレフィックス セクションを有効または無効にして、先頭のアイコンを追加できます。 +入力フィールドやカード コンポーネントなどのより複雑なコンポーネントの場合は、コンポーネントのセクションをオン/オフにすることができます。また、コンポーネントのプロパティはコンポーネントの視覚的な構造も反映しており、[Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) などの開発者ツールキットにある仕様と一致します。入力フィールドの場合、プレフィックス セクションを有効または無効にして、先頭のアイコンを追加できます。 コンポーネントのプロパティをオフにする
## その他のリソース + -* [テーマ](app-themes/app-themes.md) -* [はじめに]({environment:appbuilderBaseUrl}/help/getting-started) -* [Indigo.Design コンポーネント]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) +- [テーマ](app-themes/app-themes.md) +- [はじめに]({environment:appbuilderBaseUrl}/help/getting-started) +- [Indigo.Design コンポーネント]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) diff --git a/jp/interactions.md b/jp/interactions.md index cf707a0..56ff963 100644 --- a/jp/interactions.md +++ b/jp/interactions.md @@ -10,13 +10,13 @@ _language: ja >App Builder のインタラクション機能を使用して、ビューとコンポーネント間の特定のインタラクション (他のビューへの移動、アプリ コンポーネントの表示/非表示、開く/閉じるなど) を定義できます。 +### トピック コンテンツ -### トピック コンテンツ: -* 機能の紹介 -* インタラクション: 次へ移動 -* インタラクション: 開く/閉じる -* インタラクション: 表示/非表示 -* その他のリソース +- 機能の紹介 +- インタラクション: 次へ移動 +- インタラクション: 開く/閉じる +- インタラクション: 表示/非表示 +- その他のリソース「次へ移動」インタラクション
@@ -41,15 +43,17 @@ App Builder を使用して、ユーザーはアプリケーションのレイ ナビゲーション ルートのパラメーターを含む拡張ナビゲーションを作成する方法の詳細については、[ルート パラメーターを使用したナビゲーション](guide-to-variables-in-app-builder/route-parameters-navigation.md)を参照してください。 ## 開く/閉じるインタラクション -開く/閉じるインタラクションは、Dialog などのオーバーレイ コンポーネントのみをターゲットにします。つまり、最初にトリガー コンポーネント (Button など) を追加し、次にオーバーレイ コンポーネント (Dialog など) をデザイン領域に追加する必要があります。ボタンとダイアログの例を使用して、次のステップはボタンを選択し、インタラクション パネルに移動してインタラクションを [開く/閉じる] を選択します。トリガーとオーバーレイが使用可能になると、開く/閉じるインタラクションのロックが解除され、ユーザーはボタンを選択して開くダイアログを選択できます。 + +開く/閉じるインタラクションは、Dialog などのオーバーレイ コンポーネントのみをターゲットにします。つまり、最初にトリガー コンポーネント (Button など) を追加し、次にオーバーレイ コンポーネント (Dialog など) をデザイン領域に追加する必要があります。ボタンとダイアログの例を使用して、次のステップはボタンを選択し、インタラクション パネルに移動してインタラクションを [開く/閉じる] を選択します。トリガーとオーバーレイが使用可能になると、開く/閉じるインタラクションのロックが解除され、ユーザーはボタンを選択して開くダイアログを選択できます。 「開く/閉じる」インタラクション
-Dialog コンポーネントを追加すると、デザイン領域のアクティブなビューの名前の隣にオーバーレイ通知が表示されます。オーバーレイをクリックして、使用可能なオーバーレイの 1 つを選択するとアクティブになります。その後、アプリケーション シナリオに従って編集できます。 +Dialog コンポーネントを追加すると、デザイン領域のアクティブなビューの名前の隣にオーバーレイ通知が表示されます。オーバーレイをクリックして、使用可能なオーバーレイの 1 つを選択するとアクティブになります。その後、アプリケーション シナリオに従って編集できます。 + +## 表示/非表示 -## 表示/非表示 「表示/非表示」は、コンポーネントに適用できるインタラクションで、同じビューで別のコンポーネントの表示状態を表示または非表示にします。他のインタラクションと同様に、最初にインタラクションをトリガーするコンポーネントを選択し、次にターゲット コンポーネント (表示/非表示コンポーネント) を選択する必要があります。ターゲット アイコンの選択 (アクティブなインタラクションの隣) でターゲット コンポーネントを取得できます。これにより、マウス カーソルがターゲット アイコンに変わり、表示または非表示にするコンポーネントをクリックします。ターゲット コンポーネントが選択されると、カーソルは標準に戻ります。コンポーネントのターゲットをキャンセルするには、ESC をクリックします。インタラクションを適用できるコンポーネント上にカーソルがあり、このインタラクションをレイアウト コンポーネントまたはビュー全体に適用できない場合のみ、ターゲットが有効になります。適用したインタラクションを確認するには、プレビュー モードでテストします。  @@ -63,11 +67,11 @@ Ignite UI App Builder は常に新しいインタラクションで更新され -* [単一ページアプリとナビゲーション](single-page-apps-and-navigation.md) -* [Angular ルーティング](https://angular.io/start/start-routing) -* [App Builder コンポーネント](indigo-design-app-builder-components.md) -* [Flex レイアウト](flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](running-desktop-app.md) -* [アプリを生成する](generate-app/generate-app-overview.md) -* [はじめに]({environment:appbuilderBaseUrl}/help/getting-started) -* [Indigo.Design コンポーネント]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) +- [単一ページアプリとナビゲーション](single-page-apps-and-navigation.md) +- [Angular ルーティング](https://angular.io/start/start-routing) +- [App Builder コンポーネント](indigo-design-app-builder-components.md) +- [Flex レイアウト](flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](running-desktop-app.md) +- [アプリを生成する](generate-app/generate-app-overview.md) +- [はじめに]({environment:appbuilderBaseUrl}/help/getting-started) +- [Indigo.Design コンポーネント]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview) diff --git a/jp/interface-overview.md b/jp/interface-overview.md index eed70b5..42a42d5 100644 --- a/jp/interface-overview.md +++ b/jp/interface-overview.md @@ -5,7 +5,7 @@ _keywords: App Builder, Web App Builder, デザイン システム, デザイン _language: ja --- -# インターフェイスの概要 +# インターフェイスの概要 App Builder のインターフェースは、すでに慣れているほとんどのデザイン ツールのインターフェースに似ていますが、多少違いがあります。しかし、すぐにそれに慣れるでしょう。 App Builder には 4 つの主要なセクションがあります。 @@ -14,7 +14,7 @@ App Builder には 4 つの主要なセクションがあります。
インターフェース画面パーツ
-## ツールボックス +## ツールボックス **ツールボックス**は左側のセクションであり、**[コンポーネント]、[ビュー]、[データ]、[テーマ]**、および **[アウトライン]** 用の 5 つのタブが含まれています。[コンポーネント] タブでは、デザイン キャンバスに追加して使用できるように構成できる、App Builder で使用可能なすべてのコンポーネントにアクセスできます。コンポーネント リストの上部にある検索入力により、特定のコンポーネントを簡単に見つけることができます。[コンポーネント] タブの下に、[ビュー] タブがあります。[ビュー] タブでは、親子関係で表示されるアプリケーションのすべてのビューを見つけることができます。3 番目のタブは [データ] です。これは、すべてのデータソースと関連オプションが配置されている場所です。使用可能なすべてのデータソースを表示および編集し、新しいデータソースを追加できます。4 番目のタブでは、すべてのテーマ機能と、使用可能なすべての事前構成済みテーマにアクセスできます。独自のテーマを作成および編集して、すばやく切り替えることができます。最後の [アウトライン] タブには、選択したアプリ ビューのコンポーネントの詳細な階層が表示されます。 @@ -29,7 +29,8 @@ App Builder には 4 つの主要なセクションがあります。 ## その他のリソース + -* [App Builder コンポーネント](indigo-design-app-builder-components.md) -* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder コンポーネント](indigo-design-app-builder-components.md) +- [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) diff --git a/jp/managing-workspaces.md b/jp/managing-workspaces.md index 03eaf4f..f9dbfc3 100644 --- a/jp/managing-workspaces.md +++ b/jp/managing-workspaces.md @@ -16,6 +16,7 @@ App Builder のワークスペースは、アプリケーションとその関 ## 主要機能 ### ワークスペース コラボレーション + - メールでチーム メンバーを招待します。 - 共有ワークスペースの提案に基づいてメンバーを追加します。 - メール/アカウント検証で招待を承認します。 @@ -24,31 +25,38 @@ App Builder のワークスペースは、アプリケーションとその関 - ユーザー設定ごとにワークスペースをピン固定/ピン固定解除します。 ### ワークスペース エンティティ + ワークスペース内のすべてのアプリ間で自動的に共有されるリソース: + - ビューポート - テーマ - データ ソース - アセット (画像など) ### ワークスペース間でのアプリのコピー + 次の処理を自動的に実行して、アプリを別のワークスペースにコピーします。 + - 共有アセット、テーマ、ビューポート、変数、データ ソース。 - コピー後に GitHub リポジトリ リンクは保存されません。 ## 使用方法 ### ワークスペースの作成と管理 + 1. App Builder ダッシュボードから**ワークスペース メニュー**にアクセスします。 2. 既存の UI を使用して、**ワークスペースを作成**したり、ユーザーを招待したり、設定を更新したりします。 3. **ワークスペースのピン固定**オプションを使用してメニューをカスタマイズします。 ### メンバーの招待と管理 + - App Builder から直接**メールでユーザーを招待します**。 - 招待を受け入れると、セキュリティのためにアカウントの検証が行われます。 - 招待の状態を追跡し、必要に応じて招待を再送信します。 - ただちにメンバーを削除します。 ### アプリケーションを別のワークスペースにコピーする + 1. アプリのコンテキスト メニューから **[ワークスペースにコピー]** オプションを使用します。 2. ターゲット ワークスペースを選択します。 3. コピー操作を確認します。App Builder は: @@ -82,24 +90,27 @@ App Builder のワークスペースは、アプリケーションとその関 | 招待の追跡 | ワークスペース設定から、承認されていない招待を監視し、再送信します。 | - ## よくある質問 (FAQ) ### Indigo.Design で App Builder ワークスペースを表示できますか? + いいえ。ネイティブ ワークスペース サポートは、Indigo.Design から完全に分離されました。App Builder で作成されたワークスペースは表示されず、Indigo で同期されません。 ### 移行後、アプリとメンバーはどうなりますか? + **サービスの中断**やデータの損失はありません。既存のワークスペース、アプリ、メンバーシップ、共有 URL はすべて保持されます。 ### アプリをコピーするときに、リソースを手動で再リンクする必要がありますか? + いいえ。App Builder は可能な場合にリソースを自動的に一致させます。一致しないリソースのみが複製されます。 ## その他のリソース + -* [App Builder インターフェイスの概要](interface-overview.md) -* [単一ページとナビゲーション](single-page-apps-and-navigation.md) -* [App Builder コンポーネント](indigo-design-app-builder-components.md) -* [Flex レイアウト](flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](running-desktop-app.md) -* [アプリの生成](generate-app/generate-app-overview.md) +- [App Builder インターフェイスの概要](interface-overview.md) +- [単一ページとナビゲーション](single-page-apps-and-navigation.md) +- [App Builder コンポーネント](indigo-design-app-builder-components.md) +- [Flex レイアウト](flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](running-desktop-app.md) +- [アプリの生成](generate-app/generate-app-overview.md) diff --git a/jp/master-detail/master-detail.md b/jp/master-detail/master-detail.md index e21c2fc..76cd266 100644 --- a/jp/master-detail/master-detail.md +++ b/jp/master-detail/master-detail.md @@ -7,12 +7,13 @@ _language: ja # 変数とイベントを備えたマスター/詳細スタイルのアプリ -当初、この機能はマスター/詳細設計インターフェイスの基本に従う予定でした。しかし、それはさらに進化しました。マスター/詳細パターンの本質については誰もがよく知っています。これは、レコードのリストを表示し、ユーザーがレコードを簡単に管理できるようにする方法です。通常、これは 2 つのビューで構成されます。1 つはレコードのマスター リストで、もう 1 つは単一レコードに関する拡張データを表示するために使用されます。 +当初、この機能はマスター/詳細設計インターフェイスの基本に従う予定でした。しかし、それはさらに進化しました。マスター/詳細パターンの本質については誰もがよく知っています。これは、レコードのリストを表示し、ユーザーがレコードを簡単に管理できるようにする方法です。通常、これは 2 つのビューで構成されます。1 つはレコードのマスター リストで、もう 1 つは単一レコードに関する拡張データを表示するために使用されます。
マスター/詳細の例
## App Builder のマスター/詳細パターンの重要な要素 + この新しい機能は、マスター/詳細パターンによって確立される次の主要な要素をカバーします。 - **プライマリ ペイン**: この領域には、他のアプリ コンポーネントの読み込みを開始する項目またはトリガーのリストが表示されます。 @@ -27,15 +28,19 @@ _language: ja App Builder でマスター/詳細シナリオを作成するために、いくつかの機能を統合します。 ## 変数管理のトピック + [変数管理](../guide-to-variables-in-app-builder/variables-management.md)でアプリの可能性を最大限に引き出します。グローバル変数とローカル変数を効果的に管理、活用し、データフローとインタラクティビティを向上させる方法について説明します。 ## コンポーネント プロパティのバインド + [コンポーネント プロパティのバインド](../guide-to-variables-in-app-builder/component-properties-binding.md)を使用して、アプリのデータ バインドとユーザー エクスペリエンスを向上させます。動的でインタラクティブな UI のためにコンポーネントのプロパティをデータにバインドする方法を説明します。 ## URL パラメーターのバインド + [URL パラメーターのバインド](../guide-to-variables-in-app-builder/url-parameters-binding.md)を詳しく調べて、データ フェッチを実行する方法について説明します。アプリケーションで効率的なデータ リクエストとリピーターを実現するための URL パラメーターの使用方法について説明します。 ## イベントとアクションの操作 + インタラクティブな UI デザインを実際に体験するには、[「イベントとアクションを操作する」](../guide-to-variables-in-app-builder/working-with-events-and-actions.md)をご覧ください。App Builder でイベントとアクションを利用して、魅力的で動的なユーザー インターフェイスを作成する方法を理解します。 ## 既知の問題と制限 @@ -56,11 +61,12 @@ App Builder でマスター/詳細シナリオを作成するために、いく ## その他のリソース - [変数の管理](../guide-to-variables-in-app-builder/variables-management.md) -* [ルート パラメーターを使用したナビゲーション](../guide-to-variables-in-app-builder/route-parameters-navigation.md) +- [ルート パラメーターを使用したナビゲーション](../guide-to-variables-in-app-builder/route-parameters-navigation.md) + - [コンポーネント プロパティのバインド](../guide-to-variables-in-app-builder/component-properties-binding.md) - [URL パラメーターのバインド](../guide-to-variables-in-app-builder/url-parameters-binding.md) - [イベントとアクションの操作](../guide-to-variables-in-app-builder/working-with-events-and-actions.md) - [ステップバイステップのアプリ作成例](step-by-step-examples.md) - [App Builder コンポーネント](../indigo-design-app-builder-components.md) - [Flex レイアウト](../flex-layouts/flex-layouts.md) -- [Desktop アプリの実行方法](../running-desktop-app.md) \ No newline at end of file +- [Desktop アプリの実行方法](../running-desktop-app.md) diff --git a/jp/master-detail/step-by-step-examples.md b/jp/master-detail/step-by-step-examples.md index 01fca97..6a76019 100644 --- a/jp/master-detail/step-by-step-examples.md +++ b/jp/master-detail/step-by-step-examples.md @@ -13,6 +13,7 @@ _language: ja > 以下のチュートリアルでは、[Northwind WebAPI](https://data-northwind.indigo.design/swagger/index.html) を使用します。 ## 例 1 + あるビューから設定されたグローバル変数と、ビュー コンテナを介した別のビューからのグリッド リクエストの更新 ライブ デモ @@ -20,8 +21,8 @@ _language: ja 1. コンボ選択変更イベント時に設定されるグローバル変数を追加します。コンボは Customer エンドポイントにバインドされています。 2. コンボから CustomerID を選択します。 -3. 他のビューに移動します。そこでは、グリッドが CustomerID に基づいて注文を取得する API リクエストにバインドされています。 -4. グリッドは、(コンボから) 選択した CustomerID で更新する必要があります。 +3. 他のビューに移動します。そこでは、グリッドが CustomerID に基づいて注文を取得する API リクエストにバインドされています。 +4. グリッドは、(コンボから) 選択した CustomerID で更新する必要があります。
選択変更のイベント
@@ -29,41 +30,42 @@ _language: ja
CustomerID 変数
-5. Orders グリッドから Order をクリックすると、OrderDetails を含む別のグリッドを読み込みます。 -6. 結果 +5. Orders グリッドから Order をクリックすると、OrderDetails を含む別のグリッドを読み込みます。 +6. 結果
結果
## 例 2 + グリッドとチャートのデータを読み込む階層データ ソースにバインドされたツリー ライブ デモ -1. Tree コンポーネントを追加し、その親を階層データ ソース (繰り返しデータ コンテキスト) にバインドします。 -2. 親ツリー ノードのクリック時イベントを、CustomerID - 文字列変数を格納する変数設定アクションにバインドします。 +1. Tree コンポーネントを追加し、その親を階層データ ソース (繰り返しデータ コンテキスト) にバインドします。 +2. 親ツリー ノードのクリック時イベントを、CustomerID - 文字列変数を格納する変数設定アクションにバインドします。
ツリー ノードのバインド
-3. ツリー子ノードを追加し、親データ コンテキストに繰り返します。子ツリー ノードのクリック時イベントを、OrderID - Number 変数を格納する変数の設定アクションにバインドします。 +3. ツリー子ノードを追加し、親データ コンテキストに繰り返します。子ツリー ノードのクリック時イベントを、OrderID - Number 変数を格納する変数の設定アクションにバインドします。
子ノードのバインド
4. ルート ツリー要素に Customer が表示され、子ツリー ノードに Orders が表示されていることを確認します。 -5. OrderID 変数に基づいてクエリ パラメーターとして Orders を取得するエンドポイントに Grid をバインドします。 +5. OrderID 変数に基づいてクエリ パラメーターとして Orders を取得するエンドポイントに Grid をバインドします。
グリッドを Orders データにバインドする
-6. CustomerID 変数に基づいて Customer Orders History をクエリ パラメーターとして取得するエンドポイントにチャートをバインドします。 +6. CustomerID 変数に基づいて Customer Orders History をクエリ パラメーターとして取得するエンドポイントにチャートをバインドします。
チャートを Customer Orders History テーブルにバインドする
-7. 結果 +7. 結果
ツリー + グリッド + チャートの結果
diff --git a/jp/on-prem-prerequisites-and-installation.md b/jp/on-prem-prerequisites-and-installation.md index d1dedc9..e6e838f 100644 --- a/jp/on-prem-prerequisites-and-installation.md +++ b/jp/on-prem-prerequisites-and-installation.md @@ -12,23 +12,24 @@ _language: ja このトピックでは、オンプレミス バージョンの App Builder をインストールするための前提条件を示し、Linux/Mac OS/Windows を維持およびサポートする操作パラメーターを構成するシステム管理者を対象としています。 ### データベースの管理 + 要件に基づいて、MySQL または MSSQL Server のどちらのデータベース管理システムを使用するかを決定できます。 #### MySQL のインストール 1 - [MySQL コミュニティ版](https://dev.mysql.com/doc/refman/8.0/ja/installing.html)をインストールします。([Windows 用の直接リンク](https://dev.mysql.com/downloads/installer/)) - - 選択: - * Developer default (開発者のデフォルト)、Next (次へ) および Execute (実行)。 +- 選択: + - Developer default (開発者のデフォルト)、Next (次へ) および Execute (実行)。 > 注:「one or more products requirements have not been satisfied. Do you want to continue?」というプロンプトが表示された場合は、「Yes」を選択してください。 - - インストールの終了後: - * [次へ] を選択してサーバーを構成し、プロンプトが表示されたら、必要なルート パスワードを入力してから [実行] を選択します。 - * サーバー構成が終了したら、残りの構成は必要ないため、Cancel (キャンセル) を選択してインストーラーを終了します。 +- インストールの終了後: + - [次へ] を選択してサーバーを構成し、プロンプトが表示されたら、必要なルート パスワードを入力してから [実行] を選択します。 + - サーバー構成が終了したら、残りの構成は必要ないため、Cancel (キャンセル) を選択してインストーラーを終了します。 2 - MySQL へのコンテナー接続を許可します。 -手順 1 のルート ユーザーとパスワードで MySQL に接続し、次の sql スクリプトを実行します (ユーザー名とパスワードは App Builder から使用されるものになります)。 +手順 1 のルート ユーザーとパスワードで MySQL に接続し、次の sql スクリプトを実行します (ユーザー名とパスワードは App Builder から使用されるものになります)。 > 注: [MySQL Workbench ツール](https://dev.mysql.com/downloads/workbench/)を使用して SQL スクリプトを実行できます。 ``` @@ -65,12 +66,13 @@ GRANT ALL PRIVILEGES ON *.* TO 'username'@'%' WITH GRANT OPTION; Windows ガイド -> [docs.microsoft.com guide](https://docs.microsoft.com/ja-jp/virtualization/windowscontainers/quick-start/set-up-environment?tabs=Windows-10-and-11#tabpanel_1_Windows-10-and-11) ## インストール + このセクションでは、Docker と MySQL データベースが既にインストールされていることを前提としています。 ### 初回インストール 1 - Infragistics カスタマー ポータルの下のダウンロード セクションの appbuilder.zip 部分をダウンロードします。[エンドポイントの設定] ダイアログ
## ローカル ネットワーク ソースからのデータ ソースの使用 + これで、ローカル ホストまたはプライベート ネットワークにリクエストを送信できます。詳細については、「アプリでデータを使用する」トピックの[プライベート ネットワークの使用セクション](using-data-in-your-app.md#ローカル-ネットワーク-ソースからのデータ-ソースの使用)の部分をご覧ください。
@@ -63,12 +66,12 @@ API 仕様は YAML または JSON で記述できます。このフォーマッ
-* [App Builder コンポーネント](indigo-design-app-builder-components.md)
-* [App Builder インターフェイスの概要 ](interface-overview.md)
-* [単一ページアプリとナビゲーション](single-page-apps-and-navigation.md)
-* [App Builder コンポーネント](indigo-design-app-builder-components.md)
-* [Flex レイアウト](flex-layouts/flex-layouts.md)
-* [Desktop アプリの実行方法](running-desktop-app.md)
-* [アプリを生成する](generate-app/generate-app-overview.md)
-* [はじめに]({environment:appbuilderBaseUrl}/help/getting-started)
-* [Indigo.Design コンポーネント]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview)
\ No newline at end of file
+- [App Builder コンポーネント](indigo-design-app-builder-components.md)
+- [App Builder インターフェイスの概要](interface-overview.md)
+- [単一ページアプリとナビゲーション](single-page-apps-and-navigation.md)
+- [App Builder コンポーネント](indigo-design-app-builder-components.md)
+- [Flex レイアウト](flex-layouts/flex-layouts.md)
+- [Desktop アプリの実行方法](running-desktop-app.md)
+- [アプリを生成する](generate-app/generate-app-overview.md)
+- [はじめに]({environment:appbuilderBaseUrl}/help/getting-started)
+- [Indigo.Design コンポーネント]({environment:infragisticsBaseUrl}/products/indigo-design/help/components/components-overview)
diff --git a/jp/preview-code.md b/jp/preview-code.md
index 2bd699c..2983ef5 100644
--- a/jp/preview-code.md
+++ b/jp/preview-code.md
@@ -17,9 +17,9 @@ _language: ja
生成されたコードをプレビューし、Angular アプリとして作業をダウンロードすることは、1 つのアプリケーションをデザインした後の最後のステップです。すべてのスタイリングおよびレイアウト プロパティを使用してアプリケーションが生成されると、デザインおよび開発のユーザー ストーリーが完成します。
-## コードをプレビューする
+## コードをプレビューする
-プレビュー モードでは、実行中のアプリであるかのようにデザインを操作できます。たとえば、ビューポートのサイズを変更して、コンポーネントの配置がどのように動作するかを確認できます。しかし、開発者に提供する真の価値は、生成されようとしているアプリ コードをプレビューすることです。これを確認するには、コード ビューをオンに切り替えて、デザインと並べて表示します。読み取り専用モードですが、生成されたコードの品質を確認するのに役立ちます。
+プレビュー モードでは、実行中のアプリであるかのようにデザインを操作できます。たとえば、ビューポートのサイズを変更して、コンポーネントの配置がどのように動作するかを確認できます。しかし、開発者に提供する真の価値は、生成されようとしているアプリ コードをプレビューすることです。これを確認するには、コード ビューをオンに切り替えて、デザインと並べて表示します。読み取り専用モードですが、生成されたコードの品質を確認するのに役立ちます。

プレビュー モードでコードを表示する
@@ -35,10 +35,10 @@ _language: ja -* [アプリを生成する](./generate-app/generate-app-overview.md) -* [App Builder コンポーネント](indigo-design-app-builder-components.md) -* [Flex レイアウト](flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](running-desktop-app.md) -* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) -* [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components) +- [アプリを生成する](./generate-app/generate-app-overview.md) +- [App Builder コンポーネント](indigo-design-app-builder-components.md) +- [Flex レイアウト](flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](running-desktop-app.md) +- [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components) diff --git a/jp/running-desktop-app.md b/jp/running-desktop-app.md index 5f2a270..0d485fd 100644 --- a/jp/running-desktop-app.md +++ b/jp/running-desktop-app.md @@ -1,5 +1,6 @@ ## Desktop アプリの実行方法 + あらゆるデバイスでアプリといつでも接続できます。どこにいてもすぐに作業にアクセスできます。App Builder は、モバイル、デスクトップ、またはウェブでデザインされているため、外出先でも、どのデバイスからでもチームの可能性を最大限に引き出すことができます。 - [Windows インストーラー](https://github.com/IgniteUI/app-builder-client/releases/latest/download/AppBuilder.exe) @@ -10,7 +11,9 @@ ## トラブルシューティング ### Linux インストーラー + Linux で AppBuilder.AppImage ファイルをダウンロードすると、デフォルトでは実行できない場合があることに注意してください。したがって、それを実行できるようにするには、以下のステップを実行する必要があります。 + 1. ファイルのフォルダーに移動します 2. ターミナルを開き、次のコマンドを実行します: chmod +x AppBuilder.AppImage 3. ファイルを右クリックし、[Run] ボタンをクリックすると、アプリが起動します。 @@ -26,24 +29,26 @@ Linux で AppBuilder.AppImage ファイルをダウンロードすると この問題を解決するには、**https** と **secure websocket** の両方に **"*.indigo.design"** と **"*.infragistics.com"** をホワイトリストに追加します。 詳細なリストは以下のとおりです。 + - https://my.appbuilder.dev (https 443) -- wss://my.appbuilder.dev (websocket 443) -- https://cloud.indigo.design (https 443) -- https://igniteuithemingwidget-previous.infragistics.com (https 443) -- https://igniteuithemingwidget-prod.infragistics.com (https 443) -- https://iam.infragistics.com (https 443) +- wss://my.appbuilder.dev (websocket 443) +- https://cloud.indigo.design (https 443) +- https://igniteuithemingwidget-previous.infragistics.com (https 443) +- https://igniteuithemingwidget-prod.infragistics.com (https 443) +- https://iam.infragistics.com (https 443) 切断エラー
## その他のリソース + -* [App Builder インターフェイスの概要 ](interface-overview.md) -* [単一ページアプリとナビゲーション](single-page-apps-and-navigation.md) -* [App Builder コンポーネント](indigo-design-app-builder-components.md) -* [Flex レイアウト](flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](running-desktop-app.md) -* [アプリを生成する](generate-app/generate-app-overview.md) -* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder インターフェイスの概要](interface-overview.md) +- [単一ページアプリとナビゲーション](single-page-apps-and-navigation.md) +- [App Builder コンポーネント](indigo-design-app-builder-components.md) +- [Flex レイアウト](flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](running-desktop-app.md) +- [アプリを生成する](generate-app/generate-app-overview.md) +- [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) diff --git a/jp/sdk/sdk.md b/jp/sdk/sdk.md index d7db928..01127e7 100644 --- a/jp/sdk/sdk.md +++ b/jp/sdk/sdk.md @@ -1,6 +1,7 @@ # App Builder SDK を使用した作業の開始 ## SDK の概要 + App Builder SDK は、フロントエンドとバックエンドの両方の機能をアプリケーションに統合するための包括的なツールキットを提供します。まず、[ヘルプ ドキュメントを使用して](https://github.com/IgniteUI/appbuilder-sdk-sample/blob/main/Documentation/Consuming-AB-SDK-all-in-one-doc.md)、フロントエンド SDK パッケージを使用する Angular ホスト アプリケーションを作成し、シームレスな UI 統合を可能にします。サーバー側では、Visual Studio Code や Visual Studio などの開発環境をサポートする App Builder Backend SDK を使用して、カスタム バックエンドを構築できます。これらの基本的な手順により、アプリケーションは、フロントエンドとバックエンドの両方から SDK の機能を十分に活用できるようになります。
@@ -9,9 +10,10 @@ App Builder SDK は、フロントエンドとバックエンドの両方の機
このドキュメントでは、SDK のセットアップにおける認証および認可の主要な コンポーネントについても詳しく説明します。[OpenID 認証](../on-premises/auth-with-openid-connect-o-auth.md)を構成すると、ユーザーが外部 ID プロバイダーを使用してログインできるようになり、デフォルトの IAM プロバイダーを超える柔軟性が提供されます。さらに、SDK は認可コード + PKCE (Proof Key for Code Exchange) などの外部認証フローをサポートしており、ホスト アプリケーションが認証を直接管理できます。より高度なシナリオでは、IAuthUserService および IPermissionsService インターフェイスをカスタマイズして、ユーザーのロールとアクセス許可に合わせた独自のロジックを実装できます。オプションのガイドは、ロールベースのアクセス制御を適用した、安全でスケーラブルな統合を保証するバックエンド エンドポイントを構成するのに役立ちます。
## その他のリソース
+
-* [App Builder インターフェイスの概要](../interface-overview.md)
-* [単一ページとナビゲーション](../single-page-apps-and-navigation.md)
-* [App Builder コンポーネント](../indigo-design-app-builder-components.md)
-* [Desktop アプリの実行方法](../running-desktop-app.md)
\ No newline at end of file
+- [App Builder インターフェイスの概要](../interface-overview.md)
+- [単一ページとナビゲーション](../single-page-apps-and-navigation.md)
+- [App Builder コンポーネント](../indigo-design-app-builder-components.md)
+- [Desktop アプリの実行方法](../running-desktop-app.md)
diff --git a/jp/share-preview-edit-app.md b/jp/share-preview-edit-app.md
index 79b960e..350a2cf 100644
--- a/jp/share-preview-edit-app.md
+++ b/jp/share-preview-edit-app.md
@@ -5,10 +5,12 @@ _keywords: App Builder, Web App Builder, Preview apps, Edit applications, Share
_language: ja
---
# アプリケーションの共有、プレビュー、および編集
+
このトピックでは、アプリケーションを他のユーザーと共有する方法、他のユーザーに編集機能を付与する方法、さまざまなアプリ プレビュー設定とアプリの説明を設定してより有意義なソーシャル プラットフォーム共有を行う方法について詳しく説明します。
## アプリケーションの共有
-デザイン モードに [共有] ボタンが追加され、[デスクトップ アプリ](https://github.com/IgniteUI/app-builder-client/releases/tag/1.0.1)の操作性が向上し、必要に応じてアクセス許可もカスタマイズできるようになりました。
+
+デザイン モードに [共有] ボタンが追加され、[デスクトップ アプリ](https://github.com/IgniteUI/app-builder-client/releases/tag/1.0.1)の操作性が向上し、必要に応じてアクセス許可もカスタマイズできるようになりました。
[このリンクを使用するすべてのユーザーにプレビューを許可する] トグルを使用して、共有エクスペリエンスをカスタマイズできます。アプリへのアクセスを停止するためにアプリ リンクを無効にする方法を示す警告アイコンがあります。
@@ -25,26 +27,32 @@ _language: ja
## アプリケーションの共有およびプレビュー
### 個人用ワークスペースからアプリにアクセスするサインインしているユーザー
+
#### アプリのプレビュー リンク
+
個人用ワークスペースからの**アプリ プレビュー リンク**を**サインインしているユーザー**と共有すると、後者は**アプリをプレビューする**ためのアクセス権を持ちますが、**モック データ**で表示されます。匿名 (サインインしていない) ユーザーにも同じことが当てはまります。
> [!NOTE]
> ワークスペース以外のメンバーには、常にモック データが使用されます。
#### リンクの編集
+
個人用ワークスペースから**アプリの編集リンク**を**サインインしているユーザー**と共有すると、後者は編集にアクセスできず、「編集するためのアクセス権がありません。」 メッセージを受け取ります。
編集するためのアクセス権がありません。
### アプリのワークスペースに参加しているサインイン済みユーザー + #### アプリのプレビュー リンク + **アプリのワークスペースに参加しているサインイン済みユーザー**と**アプリのプレビュー リンク**を共有すると、後者は**アプリのプレビューと編集**にアクセスできます。構成されている場合は、**モック データ**ではなく**実際のデータ**も表示できます。暗号化されたトークンを使用してデータ要求が行われ、実際のデータが取得されます。実際のデータを使用した共有ワークスペース
#### リンクの編集 + **アプリのワークスペースの一部であるサインインしているユーザー**と**アプリのプレビュー リンク**を共有すると、現在アプリケーションを編集しているユーザーがいない場合、そのユーザーはアプリケーションを編集するためのアクセス権を持つことになります。招待されたメンバーのみがアプリを編集できます
### リンクのプレビューが無効になっているサインイン ユーザー + スイッチでリンク共有を無効にすることで、アプリの共有をいつでも停止できます。個人用ワークスペースから**サインイン済み**ユーザーとのアプリの**共有を停止する**と、次の [アクセスが制限されています] ダイアログが表示されます。 [お問い合わせ] リダイレクト ボタンが表示され、App Builder からサインアウトする場合は [サインアウト] ボタンが表示されます。 @@ -64,15 +73,18 @@ _language: jaアクセスが制限されています
### 匿名ユーザー アプリのプレビュー + 匿名ユーザーは、アプリケーションのプレビューを利用できます。すべての編集操作が無効になることに注意してください。メインメニューはロードされておらず、**コード ビュー** のみが利用可能です。アプリ内で REST API 呼び出しが構成されている場合、匿名ユーザーには常に**モック データ**が表示されます。匿名アクセスのプレビュー
### 個人用ワークスペースからアプリケーションにアクセスする匿名ユーザー + 匿名 (サインインしていない) ユーザーがアプリケーションにアクセスしている場合、アプリケーションを**プレビューできます**。アプリ内で REST API 呼び出しが構成されている場合、匿名ユーザーには常に**モック データ**が表示されます。 ### リンクのプレビューが無効になっている匿名ユーザー + 匿名ユーザーは、制限されたアプリケーションにアクセスできません。[無料で使い始める!] ボタンを使用していつでもトライアル版アカウントを作成して、利用可能なその他の App Builder 機能をすべて試すことができます。
メニュー ボタンからレイアウト プリセットを追加し、[新しいアプリの作成] を選択する
@@ -16,7 +16,7 @@ App Builder のもう 1 つの機能は、単一ページのアプリとナビ ## 親ビュー vs. 子ビュー -ここに表示されているのは [Master View] です。また、ツールボックスの [ビュー] リストを見ると、その下に 2 つの子ビューがネストされていることがわかります。各子ビューは、プライマリ ツールバー領域のナビゲーション ボタンに対応しています。アプリをプレビューすると、[View 1] をクリックすると、[View 1] 内で利用可能なコンテンツが表示され、[View 2] でも同様に表示されます。 +ここに表示されているのは [Master View] です。また、ツールボックスの [ビュー] リストを見ると、その下に 2 つの子ビューがネストされていることがわかります。各子ビューは、プライマリ ツールバー領域のナビゲーション ボタンに対応しています。アプリをプレビューすると、[View 1] をクリックすると、[View 1] 内で利用可能なコンテンツが表示され、[View 2] でも同様に表示されます。 ビューを切り替える - レイアウト プリセット
@@ -36,9 +36,9 @@ Views container には、アプリの読み込み時に 2 つの子ビューの ビューの変更の操作 - サンプル アプリ
-## ナビゲーションの追加 (ルーティング) +## ナビゲーションの追加 (ルーティング) -ナビゲーションを子ビューに接続するために、[インタラクション] セクションのボタンへナビゲーション アクションを追加できます。現在、[次へ移動]、[開く / 閉じる] および [表示 / 非表示] (Nav Drawer、Dropdown、Select などのコンポーネント用) アクションを提供していますが、将来のリリースでさらにアクションを追加する予定です。 +ナビゲーションを子ビューに接続するために、[インタラクション] セクションのボタンへナビゲーション アクションを追加できます。現在、[次へ移動]、[開く / 閉じる] および [表示 / 非表示] (Nav Drawer、Dropdown、Select などのコンポーネント用) アクションを提供していますが、将来のリリースでさらにアクションを追加する予定です。
Figma UI キット
## Figma スターター ユーザーと Figma プロフェッショナル ユーザーとしてのキットの使用 + Indigo.Design UI Kit for Material は、ユーザーが選択した Figma プランに関係なく、誰でも使用できます。ただし、注意すべき特定の制限があります。 特定のデバイスまたは画面サイズ用にデザインしている場合は、デザイン用のコンテナーを作成することをお勧めします。ここでフレームの出番です。フレームを使用すると、キャンバスの領域を選択してデザインを作成できます。 @@ -23,6 +25,7 @@ Indigo.Design UI Kit for Material は、ユーザーが選択した Figma プラフレームを追加する
### Figma プロフェッショナル ユーザー アカウント + Figma プロフェッショナル アカウントのユーザーの場合、Indigo.Design UI Kit for Material を使用する方法は、Figma コミュニティから UI キットの複製を作成するだけです。ファイルを複製すると (Get a copy)、[Recent files] に配置されます。
@@ -68,20 +71,21 @@ Figma スターターのユーザーの場合も、UI キットの使用方法
Figma プラグイン、UI キット、およびサンプル アプリは[アセットのダウンロード ページ](https://cloud.indigo.design/resources/figma)からダウンロードできます。
または、以下の直接リンクから:
+
- [Figma UI キット](https://www.figma.com/@infragistics)
-- [Figma 用プラグイン](https://www.figma.com/community/plugin/1462024243431691008/indigo-design-figma-plugin)
+- [Figma 用プラグイン](https://www.figma.com/community/plugin/1462024243431691008/indigo-design-figma-plugin)
- [サンプル アプリ](https://download.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps_Figma.zip)
## 既知の問題と制限
+
- ダーク モードは、App Builder へのインポート時に解析されません。現在、ダーク モードの定義やオプションは提供されていません。
- Figma のファイル モデルは閉じられています。ファイル自体のコンテンツはバイナリであり、App Builder は `.fig` ファイルから直接読み取ることができません。`import story` を実現するには、Figma アプリを開き、プラグイン API ([Indigo.Design プラグイン](https://www.figma.com/community/plugin/1462024243431691008/indigo-design-figma-plugin)) を使用してファイル モデルとそのコンテンツを読み取る必要があります。ここから、内部ヒューリスティックが AppBuilder の入力モデルを構築し、インポート ストーリーの取り込みを完成させることができます。
- [Figma スターター ユーザーと Figma プロフェッショナル ユーザーとしてキットを使用した場合の違い](#figma-スターター-ユーザーと-figma-プロフェッショナル-ユーザーとしてのキットの使用)。
-
## その他のリソース
-* [デザインからコード作成のストーリー](../design-to-code-story.md)
-* [Sketch UI キット](sketch.md)
+- [デザインからコード作成のストーリー](../design-to-code-story.md)
+- [Sketch UI キット](sketch.md)
diff --git a/jp/ui-kits/sketch.md b/jp/ui-kits/sketch.md
index e8aee0c..852e71e 100644
--- a/jp/ui-kits/sketch.md
+++ b/jp/ui-kits/sketch.md
@@ -6,6 +6,7 @@
> [Sketch XD UI キット](https://dl.infragistics.com/products/Infragistics/Indigo.Design/ABECAC7231EE434C8CD3DC619BE6F75B/Infragistics_IndigoDesign_UI_Kit.zip)および[サンプル アプリ](https://dl.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps.zip)をダウンロード。
## App Builder Sketch インポーター
+
以下は、App Builder を使ってドラッグアンドドロップでデザインからコードを作成する 4 つの簡単な手順です。
手順 1: App Builder のメイン メニューで [新しいアプリ] をクリックします。
@@ -35,7 +36,7 @@ IDE の右上にあるボタンを使用して、アプリを生成するか、
そんな簡単に、デザインまたは開発者は、Web ベースの WYSIWYG ツールを使用して、Sketch からコードを作成できます。チームは、クラウドベースの WYSIWYG ドラッグ アンド ドロップで非常に優れた実際のアプリをデザインおよび構築し、コードを取得できます。これには、Web レイアウト、CSS、およびデータさえも完備しています。
-## Sketch アセットのダウンロード
+## Sketch アセットのダウンロード
Sketch UI キットは、以下の直接リンクからダウンロードできます:
@@ -46,5 +47,5 @@ Sketch UI キットは、以下の直接リンクからダウンロードでき
-* [デザインからコード作成へのストーリー](../design-to-code-story.md)
-* [Figma UI キット](figma.md)
+- [デザインからコード作成へのストーリー](../design-to-code-story.md)
+- [Figma UI キット](figma.md)
diff --git a/jp/using-data-in-your-app.md b/jp/using-data-in-your-app.md
index 2af6380..04fcf26 100644
--- a/jp/using-data-in-your-app.md
+++ b/jp/using-data-in-your-app.md
@@ -6,7 +6,9 @@ _language: ja
---
# データ機能の概要
+
App Builder のデータ機能を使用して、開発中のアプリケーションで外部データソースを追加、編集、使用できます。デフォルトで、App Builder には、ユーザーが参照に使用できる Northwind データ ソースが含まれています。以下は、REST API データ ソースを設定するさまざまな方法を示しています。
+
- データ ソースで REST API URL を使用します。
- Swagger URL またはファイル定義 (json/yaml) を使用します。
@@ -26,6 +28,7 @@ App Builder は、**応答オブジェクト内のネストされたコレクシ
ネストされたコレクションのデモ
## データ ソースを追加する + App Builder のデータ機能により、ユーザーは公開されている外部ソース (Rest API) にリンクできます。 > [!NOTE] @@ -35,6 +38,7 @@ App Builder のデータ機能により、ユーザーは公開されているURL からデータ ソースを追加する
## Swagger データ ソースを追加する + Swagger ツールの機能は、RESTful API 設計の業界標準である OpenAP I仕様から始まります。 Swagger 定義 (ファイル URL の提供またはファイルのアップロード) を指定できるようになりました。また、直感的なデザインにより、データ フィールドとエンドポイントを簡単に選択できます。Grid、Card、List、またはその他のバインド可能なコンポーネントにこのデータ ソースをバインドできます。 @@ -45,6 +49,7 @@ Swagger 定義 (ファイル URL の提供またはファイルのアップロSwagger のデモ
## ローカル ネットワーク ソースからのデータ ソースの使用 + これで、ローカル ホストまたはプライベート ネットワークにリクエストを送信できます。これには、通常の REST エンドポイントと Swagger エンドポイントが含まれます。
@@ -53,9 +58,10 @@ Swagger 定義 (ファイル URL の提供またはファイルのアップロ
データ ソース テーブルのフィールド タイプを変更する
## データ ソースを繰り返しコンポーネントに接続する + データ ソースが追加されると、ユーザーは特定のデータ フィールドをコンポーネント セクションに接続できます。これを行うには、最初にコンポーネント (以下の例では Card コンポーネントを使用) を選択し、[繰り返し] モードを [Data] に変更してメニューをスクロールダウンし、接続するデータ ソースからテーブルを見つけて選択します。最後に、Card セクションを選択したテーブル フィールドに接続します。
データ ソース テーブルのフィールドをコンポーネント セクションに接続する
### 階層バインドのサポート + コンポーネントを階層データ構造にバインドし、ネストされたデータ コンテキスト コレクションをデータの繰り返しでバインドできるようになりました。 Movies -> Cast -> Films の 3 つのデータ レベルを持つ次のデータ ソースを見てみましょう。 @@ -265,7 +274,9 @@ Tree やその他のコンテナーなどのコンポーネントにも適用で Tree コンポーネントを確認してみましょう。ルート要素と子要素を特定の階層レベルにバインドするために、繰り返し: Data オプションを使用します。Tree は宣言型コンポーネントであり、(ツリー ルート レベルで) データ入力バインドを持たないため、ノード階層を指定し、階層データ セットを反復処理することによって宣言します。ノードをデータ モデルにバインドして、展開された状態と選択された状態が基になるデータにも反映されるようにすることができます。 ## 既知の問題と制限 + ### データからスキーマを推測できません + このエラー メッセージは、データ ソースの解析されたテーブル スキーマのサイズが大きすぎる (5MB 以上) 場合に表示されます。以下の場合に発生します。 - 通常の REST エンドポイントを追加する場合。 @@ -281,6 +292,7 @@ Tree コンポーネントを確認してみましょう。ルート要素と子データからスキーマを推測できません
### ローカル ネットワーク ソースからの定義のダウンロード/アップロード + ダウンロードされた OpenAPI ファイルにはサーバー URL 情報が含まれていないため、サーバーのベース アドレスを推測できません。これは、URL 追加ソースを通じてローカル ホスト URL を直接指定せず、代わりに定義としてアップロードした場合に発生し、空のベース URL が取得されます。
@@ -300,12 +312,13 @@ app.UseSwagger(c =>
```
## その他のリソース
+
-* [App Builder コンポーネント](indigo-design-app-builder-components.md)
-* [App Builder インターフェイスの概要](interface-overview.md)
-* [単一ページとナビゲーション](single-page-apps-and-navigation.md)
-* [App Builder コンポーネント](indigo-design-app-builder-components.md)
-* [Flex レイアウト](flex-layouts/flex-layouts.md)
-* [Desktop アプリの実行方法](running-desktop-app.md)
-* [アプリを生成する](generate-app/generate-app-overview.md)
\ No newline at end of file
+- [App Builder コンポーネント](indigo-design-app-builder-components.md)
+- [App Builder インターフェイスの概要](interface-overview.md)
+- [単一ページとナビゲーション](single-page-apps-and-navigation.md)
+- [App Builder コンポーネント](indigo-design-app-builder-components.md)
+- [Flex レイアウト](flex-layouts/flex-layouts.md)
+- [Desktop アプリの実行方法](running-desktop-app.md)
+- [アプリを生成する](generate-app/generate-app-overview.md)
diff --git a/jp/using-data-in-your-app/api-project-query-builder-support.md b/jp/using-data-in-your-app/api-project-query-builder-support.md
index adf9361..0892d06 100644
--- a/jp/using-data-in-your-app/api-project-query-builder-support.md
+++ b/jp/using-data-in-your-app/api-project-query-builder-support.md
@@ -8,6 +8,7 @@ _language: ja
# API プロジェクト向けのクエリ ビルダーのサポート
## 概要
+
このガイドでは、ユーザー定義のクエリを有効にするために、API プロジェクトにクエリ ビルダー モデルとユーティリティを実装する方法について説明します。実装には、コントローラーの作成、クエリ ビルダー モデルの定義、およびこれらのクエリから SQL ステートメントを実行および生成するためのユーティリティの追加が含まれます。結果として得られるカスタマイズにより、ユーザーはサブクエリのサポート、フィルタリング、論理演算子、フィールド選択を使用して複雑なクエリを構築し、データ ソースに対して効率的に実行できるようになります。
この実装はすでに [NorthwindAPI REST API](https://github.com/IgniteUI/NorthwindAPI/tree/main/NorthwindCRUD/QueryBuilder) プロジェクトの一部になっています。これらは NorthwindAPI QueryBuilderController と NorthwindAPI QueryBuilder モデルの例です: [NorthwindAPI QueryBuilderController](https://github.com/IgniteUI/NorthwindAPI/blob/main/NorthwindCRUD/Controllers/QueryBuilderController.cs) と [NorthwindAPI QueryBuilder モデル](https://github.com/IgniteUI/NorthwindAPI/tree/main/NorthwindCRUD/QueryBuilder)。
@@ -61,9 +62,9 @@ Controllers ディレクトリに QueryBuilderController.cs という名前の
}
```
-* 目的: POST リクエストで Query オブジェクトを受け取り、QueryExecutor に処理を委ねます。
-* 依存性の注入: QueryExecutor を注入してクエリの処理を実行します (DI コンテナーで設定)。
-
+- 目的: POST リクエストで Query オブジェクトを受け取り、QueryExecutor に処理を委ねます。
+- 依存性の注入: QueryExecutor を注入してクエリの処理を実行します (DI コンテナーで設定)。
+
完全な例については、[NorthwindAPI QueryBuilderController](https://github.com/IgniteUI/NorthwindAPI/blob/main/NorthwindCRUD/Controllers/QueryBuilderController.cs) を参照してください。
@@ -83,9 +84,9 @@ public enum FilterType
}
```
-* And: フィルターを論理 AND で結合します。
-* Or: フィルターを論理 OR で結合します。
-
+- And: フィルターを論理 AND で結合します。
+- Or: フィルターを論理 OR で結合します。
+
### Query クラス
@@ -101,10 +102,10 @@ public class Query
}
```
-* Entity: クエリの対象となるエンティティ/テーブル (例: "Products")。
-* ReturnFields: 結果に含めるフィールド (例: ["Name", "Price"]、またはすべてを表す ["*"])。
-* Operator: フィルターを組み合わせるための論理演算子 (And または Or)。
-* FilteringOperands: 条件を定義する QueryFilter オブジェクトの配列。
+- Entity: クエリの対象となるエンティティ/テーブル (例: "Products")。
+- ReturnFields: 結果に含めるフィールド (例: ["Name", "Price"]、またはすべてを表す ["*"])。
+- Operator: フィルターを組み合わせるための論理演算子 (And または Or)。
+- FilteringOperands: 条件を定義する QueryFilter オブジェクトの配列。
### QueryFilter クラス
@@ -125,14 +126,14 @@ public class QueryFilter
}
```
-* FieldName: フィルタリングするフィールド (例: "Price")。
-* IgnoreCase: フィルターが大文字と小文字を区別するかどうか。
-* Condition: 比較タイプ (例: "Equals"、"GreaterThan")。
-* SearchVal: 比較する値 (例: 100)。
-* SearchTree: サブクエリのネストされたクエリ。
-* Operator: 複合条件の論理演算子。
-* FilteringOperands: ネストされたフィルターまたは複合フィルターの配列。
-
+- FieldName: フィルタリングするフィールド (例: "Price")。
+- IgnoreCase: フィルターが大文字と小文字を区別するかどうか。
+- Condition: 比較タイプ (例: "Equals"、"GreaterThan")。
+- SearchVal: 比較する値 (例: 100)。
+- SearchTree: サブクエリのネストされたクエリ。
+- Operator: 複合条件の論理演算子。
+- FilteringOperands: ネストされたフィルターまたは複合フィルターの配列。
+
### QueryFilterCondition クラス
使用可能なフィルタリング条件を定義します。
@@ -146,9 +147,9 @@ public class QueryFilterCondition
}
```
-* Name: 条件識別子 (例: "Equals"、"Contains")。
-* IsUnary: 単一オペランド条件の場合は True です (例: "IsNull")。
-* IconName: UI アイコン識別子 (オプション)。
+- Name: 条件識別子 (例: "Equals"、"Contains")。
+- IsUnary: 単一オペランド条件の場合は True です (例: "IsNull")。
+- IconName: UI アイコン識別子 (オプション)。
詳細な実装は、[NorthwindAPI QueryBuilder モデル](https://github.com/IgniteUI/NorthwindAPI/tree/main/NorthwindCRUD/QueryBuilder)を参照してください。
@@ -234,9 +235,9 @@ private static Expression BuildConditionExpression自動フォーム作成
### フォーム コントロールの自動作成とマッピング + フォーム コントロールは、各フィールドのデータ タイプとメタデータに基づいて作成され、直感的な入力とラベルが確保されます (例: 日付フィールドでは**日付ピッカー**が使用され、ブール型フィールドでは**スイッチ**が使用されます)。開発者は、プロパティ パネルでコンポーネントを変更したり、検証を追加したり、ラベルを直接調整したりするための完全な制御を保持します。
フォーム コントロールの自動作成
### フォームの変更 + フォームが生成されると、フィールドの追加や除外、ラベルのカスタマイズ、入力検証の設定などの編集が可能になり、直感的なデザイン エクスペリエンスが実現します。App Builder を使用すると、フォームのレイアウトとコンポーネントの両方をカスタマイズできます: + - フォーム内の要素を簡単に追加または削除します。 -- *Required* および *Disabled* の検証、ラベルのカスタマイズ、マッピングなどのコントロール プロパティを調整します。 +- _Required_ および _Disabled_ の検証、ラベルのカスタマイズ、マッピングなどのコントロール プロパティを調整します。
フォームの変更
### フォームとのライブ インタラクション + App Builder のプレビュー モードでは、ユーザーはフォームを操作して次の内容を確認できます: + - リアルタイムの入力検証。 - フォームの送信。成功または検証エラーを示す通知が表示されます。 @@ -44,6 +53,7 @@ App Builder のプレビュー モードでは、ユーザーはフォームを > プレビュー モードでフォームを送信すると、`Post/Put` アクションが実行され、指定されたエンドポイントを通じてレコードが追加または更新されます。 ### 設定可能なアクション ボタン + アクション ボタン (`Submit`、`Reset`) は完全なカスタマイズが可能で、フォーム内と外部の両方の配置をサポートします。開発者が複雑なレイアウトでフォームの挙動を正確に制御するために、この柔軟性は不可欠です。 @@ -52,9 +62,11 @@ App Builder のプレビュー モードでは、ユーザーはフォームを ### アクション通知の送信 + 成功メッセージとエラー メッセージはスナックバーを介して表示され、フォームの送信に関する邪魔にならないフィードバックを提供します。これらの通知は最初のリリースではハードコードされていますが、将来のリリースでは柔軟なインタラクション処理をサポートする予定です。 ## フォーム コントロールのサポート + フォーム ビルダーは、特定のデータ タイプにマップされたさまざまな UI コントロールをサポートしているため、開発者はアクセスしやすく応答性の高いフォームを効率的に作成できます。以下に、サポートされているコントロールと現在の制限の概要を示します。 | フォーム コントロール | デフォルトのタイプ | 注 | @@ -75,36 +87,39 @@ App Builder のプレビュー モードでは、ユーザーはフォームを すべてのフォーム コントロールは双方向バインディングをサポートし、フォーム コンテキストにバインドされます。 ## 将来の機能強化 + App Builder のフォーム ビルダーのロードマップには、手動フォーム作成、検証オプション、拡張メタデータ サポート、通知およびインタラクション処理といった強化が含まれています。 将来の検証機能の強化には以下が含まれます: + - 範囲の検証 (`min`、`max`)。 - 文字列の長さの検証 (`min length`、`max length`)。 - パターン検証 (正規表現)。 - 選択およびコンボ ボックス コントロールの列挙型検証。 ## 既知の問題と制限 + 10 月 28 日にリリースされたフォーム ビルダーの初期リリースには、次の既知の問題と制限が適用されます。 - App Builder ランタイム エクスペリエンスと生成されたアプリケーション ランタイム間の**フォーム リセット動作**の不一致: - - App Builder では、[リセット] ボタンをクリックすると、レコードを編集するときに初期値に戻り、新しいレコードを追加するときにフォームがクリアされます。 - - 生成されたアプリケーションでは、[リセット] ボタンをクリックすると、すべてのフォーム コントロールが空の値に設定され、フォームがクリアされます。 + - App Builder では、[リセット] ボタンをクリックすると、レコードを編集するときに初期値に戻り、新しいレコードを追加するときにフォームがクリアされます。 + - 生成されたアプリケーションでは、[リセット] ボタンをクリックすると、すべてのフォーム コントロールが空の値に設定され、フォームがクリアされます。 - **フォームのコピー / 貼り付け**: 現在、フォームをコピーして貼り付けると、元のフォームのデータ バインディングが失われ、新しく貼り付けたフォーム インスタンスに転送されます。 - **ブール必須フラグ**: 特に「利用規約に同意する」などの場合には、必須のブール値のフィールドを実装する際に曖昧さが生じます。 - **送信/リセット動作**: 送信/リセット機能は、テンプレート フォームとリアクティブ フォームの両方で動作するように調整されていますが、依然として不整合が発生する可能性があります。 - **コードの生成**: - - **フォーム モデルの型付けの問題**: 特にネストされた構造や配列を扱う場合には、型の不一致が発生する可能性があり、出力コードでの正確なフォーム モデルの生成が複雑になります。 - - **`igx-hint` - プレビューの要素**: `igx-hint` 要素は最終コードでは生成されないため、現在プレビューから除外されています。将来の更新では、メッセージ表示機能のサポートが追加される可能性があります。 - - **カレンダー**は、フォーム内に配置されたときに、生成されたアプリで表示されません。 - - **リセット ボタンのクリック動作** - React で生成されたプロジェクトでは、フォームがクリアされます。初期値に戻るのではなく、フォーム コントロールが空の値になります。 - - **無効なプロパティ**は、Angular で生成されたフォームの入力に対してレンダリングされません。 + - **フォーム モデルの型付けの問題**: 特にネストされた構造や配列を扱う場合には、型の不一致が発生する可能性があり、出力コードでの正確なフォーム モデルの生成が複雑になります。 + - **`igx-hint` - プレビューの要素**: `igx-hint` 要素は最終コードでは生成されないため、現在プレビューから除外されています。将来の更新では、メッセージ表示機能のサポートが追加される可能性があります。 + - **カレンダー**は、フォーム内に配置されたときに、生成されたアプリで表示されません。 + - **リセット ボタンのクリック動作** - React で生成されたプロジェクトでは、フォームがクリアされます。初期値に戻るのではなく、フォーム コントロールが空の値になります。 + - **無効なプロパティ**は、Angular で生成されたフォームの入力に対してレンダリングされません。 ## その他のリソース -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) -* [App Builder インターフェイスの概要](../interface-overview.md) -* [単一ページとナビゲーション](../single-page-apps-and-navigation.md) -* [Flex レイアウト](../flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](../running-desktop-app.md) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) +- [App Builder インターフェイスの概要](../interface-overview.md) +- [単一ページとナビゲーション](../single-page-apps-and-navigation.md) +- [Flex レイアウト](../flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](../running-desktop-app.md) diff --git a/jp/using-data-in-your-app/grid-remote-paging.md b/jp/using-data-in-your-app/grid-remote-paging.md index c2384b5..490f564 100644 --- a/jp/using-data-in-your-app/grid-remote-paging.md +++ b/jp/using-data-in-your-app/grid-remote-paging.md @@ -6,9 +6,11 @@ _language: ja --- # グリッド リモート ページング + リモート ページングは、必要に応じてサーバーからデータの一部のみを取得して、グリッドがデータを動的に読み込んで表示する機能です。これにより、すべてのレコードを一度に取得する必要がなくなるため、特に大規模なデータセットのパフォーマンスが向上します。 ## リモートページングの主な利点 + - **パフォーマンスの改善:** 必要なデータのみ読み込むため、読み込み時間を削減します。 - **スケール可能:** 大規模なデータセットを効率的に処理します。 - **ユーザーコントロール:** 開発者とユーザーにデータの表示方法に柔軟性を提供します。 @@ -18,6 +20,7 @@ _language: ja リモート ページングは、データをリモート サーバーから個別に要求される「ページ」に分割します。これにより、一度に必要なデータ スライスのみが読み込まれるようになります。ツールに組み込まれているプロパティを使用して、**グリッド** コンポーネントと**ツリー グリッド** コンポーネントの両方に対して構成できます。 ユーザーはコンフィギュレータを使用して、リモート ページングが機能するために必要なすべてのものを設定します。必要なもの + - `pageIndex` - データが取得されるページのインデックス。このパラメーターが指定されていない場合、ページのインデックスはデフォルトで 0 になり、データの最初のページが取得されます。 - `pageSize` - ページごとに取得して表示するレコードの最大数。このパラメーターが指定されていない場合、すべてのレコードが取得され、ページの合計数は 1 になります。 - `totalRecords` - サーバーで利用可能なレコードの合計数を返します。この数値は、ページネーターがページの合計数を計算するために必要です。 @@ -40,6 +43,7 @@ _language: ja この設定では、ページングされたデータを取得するための API 呼び出しと、合計レコード数を取得するための API 呼び出しの 2 つが行われます。 ### 単一のエンドポイント + サポートされているデータ構造の例は次のとおりです。 ``` @@ -58,7 +62,9 @@ _language: ja } ``` + **手順:** + 1. グリッドを、Items (項目) コレクションと Total Records Count (合計レコード数) フィールドを持つ Object (オブジェクト)を返すエンドポイントにフックします。このオブジェクトは、項目のコレクションと合計レコード数を提供します。 2. リモート ページング機能を追加し、**リモート** ページング モードを選択して構成ダイアログを読み込みます。 3. ページング構成ダイアログで、合計レコード数に対応するフィールド プロパティを選択します。上記の例では、「totalRecordsCount」 になります。 @@ -66,13 +72,14 @@ _language: ja 5. [保存] をクリックします。 **結果:** + - **ページ インデックス**と**ページ サイズ**の両方の値を格納するための、数値型の 2 つの変数が作成されます。 - **グリッド データ コンテキスト**を格納するための 3 番目の変数が作成されます。データ リクエストから初期化される **Object type** (オブジェクト タイプ)。リクエスト クエリ パラメーターは、ページ インデックスとページ サイズ変数にバインドされます。 - グリッドは、3 番目の変数データ コンテキスト result -> _result.items_ コレクションにバインドされます。 - 合計レコード数は _result.totalRecordsCount_ フィールドにバインドされます。 - **PerPageChanged** と **PageChange** の 2 つのインタラクションが自動的に作成されます。 - - **PerPageChange** の **Source** (値) は、igx-paginator によって提供されるイベント コンテキストからのページ サイズに設定されます。**ターゲット**変数は**ページ サイズ**になります。 - - **PageChange** の Source (値) は、igx-paginator によって提供されるイベント コンテキストからのページ インデックス (現在のページ) に設定されます。 **ターゲット**変数は**ページ インデックス**になります。 + - **PerPageChange** の **Source** (値) は、igx-paginator によって提供されるイベント コンテキストからのページ サイズに設定されます。**ターゲット**変数は**ページ サイズ**になります。 + - **PageChange** の Source (値) は、igx-paginator によって提供されるイベント コンテキストからのページ インデックス (現在のページ) に設定されます。 **ターゲット**変数は**ページ インデックス**になります。 **動作:** プレビューでは、初期ロードは 1 つのリクエストのみ実行されます。ページが変更されるか、ページごとに値が変更されると、新しいページとサイズの値に基づいてデータを取得するための新しいリクエストが行われます。 @@ -80,6 +87,7 @@ _language: ja ### 2つの異なるエンドポイント **手順:** + 1. グリッドの `Data` プロパティを、Page および Size クエリ パラメーターを必要とするエンドポイントにバインドします。 2. リモート ページング機能を追加し、**リモート** ページング モードを選択して構成ダイアログを読み込みます。 3. totalRecordsCount を、合計レコード数のみを返す別のエンドポイント (グリッドの `Data` プロパティとは異なる) にフックします。 @@ -87,29 +95,30 @@ _language: ja 5. [保存] をクリックします。 **結果:** + - **ページ インデックス**と**ページ サイズ**の両方の値を格納するための、数値型の 2 つの変数が作成されます。 - グリッドのデータ ソースには、新しく作成された 2 つの変数にバインドされたクエリ パラメーターが含まれます。 - **合計レコード数**を格納するための 3 番目の変数が作成されます。データ リクエストから初期化される **Object type** (オブジェクト タイプ)。(注意: 現在、App Builder はプリミティブ結果型をサポートしていません) - **PerPageChanged** と **PageChange** の 2 つのインタラクションが自動的に作成されます。 - - **PerPageChange** の **Source** (値) は、igx-paginator によって提供されるイベント コンテキストからのページ サイズに設定されます。**ターゲット**変数は**ページ サイズ**になります。 - - **PageChange** の Source (値) は、igx-paginator によって提供されるイベント コンテキストからのページ インデックス (現在のページ) に設定されます。 **ターゲット**変数は**ページ インデックス**になります。 + - **PerPageChange** の **Source** (値) は、igx-paginator によって提供されるイベント コンテキストからのページ サイズに設定されます。**ターゲット**変数は**ページ サイズ**になります。 + - **PageChange** の Source (値) は、igx-paginator によって提供されるイベント コンテキストからのページ インデックス (現在のページ) に設定されます。 **ターゲット**変数は**ページ インデックス**になります。 **動作:** + - プレビューに移動すると、初期ロードで 2 つのリクエストが実行されます。1 つはグリッドスライスされたデータ用、もう 1 つは合計レコード数用です。その後、ページの変更時またはページの変更ごとに、グリッドスライスされたデータに対して 1 つのリクエストのみが行われます。 ## 既知の制限 + ユーザーがコンフィギュレーターを使用してリモート ページングを設定し、再度実行すると、API エンドポイントから初期化された冗長な変数はそのまま残ります。 ## その他のリソース -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) -* [App Builder インターフェイスの概要](../interface-overview.md) -* [単一ページとナビゲーション](../single-page-apps-and-navigation.md) -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) -* [Flex レイアウト](../flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](../running-desktop-app.md) - - +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) +- [App Builder インターフェイスの概要](../interface-overview.md) +- [単一ページとナビゲーション](../single-page-apps-and-navigation.md) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) +- [Flex レイアウト](../flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](../running-desktop-app.md) diff --git a/jp/using-data-in-your-app/query-builder-step-by-step-guide.md b/jp/using-data-in-your-app/query-builder-step-by-step-guide.md index 4852668..8991aba 100644 --- a/jp/using-data-in-your-app/query-builder-step-by-step-guide.md +++ b/jp/using-data-in-your-app/query-builder-step-by-step-guide.md @@ -10,6 +10,7 @@ _language: ja ## Query Builder 変数とコンポーネントの概要 App Builder の Query Builder コンポーネントは、次の 2 つの主要な概念に基づいて動作します: + - ツールボックス内の**クエリ変数**と**クエリ ビルダー コンポーネント**。 **クエリ変数**は、現在[プレビュー版環境](https://preview.appbuilder.dev/)の一部としてのみ利用可能であり、データ ソースと対話する特殊な変数であり、API リクエストを通じてデータを動的にフィルター処理することで大規模なデータセットを効率的に処理できるように設計されています。これらのリクエストは、高度な式をパラメーターとして駆動する**サーバー側のフィルタリング**を利用し、大量のデータを処理する際に最適なパフォーマンスを保証します。 @@ -17,12 +18,13 @@ App Builder の Query Builder コンポーネントは、次の 2 つの主要 この変数は**クエリ ビルダー コンポーネント**と統合され、動的なデータ管理と UI 駆動型のフィルタリングが可能になります。 クエリ変数の概念は、クエリ ビルダー コンポーネントが使用される 2 つの主な方法をカバーします。 -* **クエリ ビルダー コンポーネント**が、App Builder に統合され、**クエリ変数**エディターとして使用される場合。 -* **クエリ ビルダー コンポーネント**が UI 要素として機能し、ツールボックスからキャンバスに配置された際にエンドユーザーが直接操作できる場合。 + +- **クエリ ビルダー コンポーネント**が、App Builder に統合され、**クエリ変数**エディターとして使用される場合。 +- **クエリ ビルダー コンポーネント**が UI 要素として機能し、ツールボックスからキャンバスに配置された際にエンドユーザーが直接操作できる場合。 ## ステップバイステップの紹介 -## 手順 1. ユーザー ストーリーを定義して実装します: +## 手順 1. ユーザー ストーリーを定義して実装します 次のユースケースを実現してみましょう。選択したカテゴリに属し、**orderDetails** テーブルで指定された範囲内の数量で注文されたすべての製品を、**products** テーブルから取得します。 @@ -40,18 +42,22 @@ AND productId IN ( ) ``` -1. **メイン クエリ (Products テーブル)**: +1. **メイン クエリ (Products テーブル)**: + - **products** テーブルからすべての列 (`*`) を選択します。 - **categoryId = "Beverages"** の製品をフィルタリングします (Beverages カテゴリの製品のみ)。 -2. **サブクエリ (OrderDetails テーブル)**: + +2. **サブクエリ (OrderDetails テーブル)**: + - 注文された **quantity** が **5 〜 10** (両端を含む) の **orderDetails** から **productId** を取得します。 - これらの **productId** は、メイン クエリの **IN** 句で使用され、製品をフィルター処理します。 - + **最終出力:** 結果は、**5 〜 10 個**の数量で注文された**飲料製品**のリストになります。 ## 手順 2. クエリ変数を作成します + クエリ変数を作成しましょう。この変数は、API リクエストを通じてデータを動的にフィルタリングすることで、大規模なデータセットを処理するために使用されます。 1. 新しい変数を作成します。 @@ -74,20 +80,21 @@ AND productId IN (
## 手順 3.クエリ変数を設定します
-
+
まず、**[クエリの編集]** パネルを開きます。
-
+
**2 つのテーブル**で機能する複雑なクエリを構築します。
+
- **products** – データが取得されるメイン テーブル。
- **orderDetails** – 範囲内の数量に基づいて製品をフィルタリングするためにサブクエリで使用されます。
-
+
💡 **注:** 値をハードコーディングする代わりに、**各条件を変数にバインド**し、アプリのコンポーネントを通じてユーザーが動的に更新できるようにします。
-
+
**選択したカテゴリで製品をフィルタリングします**:
- クエリ条件を設定するために **WHERE 句**の構築を開始します。
- **Select コンポーネント**で使用される、デフォルト値が **1** の**数値変数**を作成します。
-
+
最小数量構成を表示
@@ -113,7 +121,7 @@ AND productId IN (
最大数量設定を表示
@@ -124,7 +132,7 @@ AND productId IN ( 💡 **注:** ハードコードされた値も使用できますが、このデモでは、**動的フィルタリング**に**変数**を使用します。 ## 手順 4.クエリを適用して保存します - + 1. **[保存]** をクリックして、**複雑なクエリ変数**の設定を保存します。 2. **[SEND] ボタン**を使用してクエリの実行をテストします。 @@ -134,20 +142,23 @@ AND productId IN (
コンポーネントの追加を表示
@@ -160,7 +171,7 @@ AND productId IN ( **Select コンポーネント**: **Select コンポーネント**にフォーカスし、**[Select item]** をクリックします。Northwind データ ソースの **Category テーブル**を使用して、これに**データ リピーター**を適用します。
データ リピーターの設定を表示
@@ -171,7 +182,7 @@ AND productId IN ( Select item 要素の Content と Value を Category -> Name と CategoryID にバインドします。
Select item のバインディングを表示
@@ -182,7 +193,7 @@ Select item 要素の Content と Value を Category -> Name と CategoryID に Select コンポーネントにフォーカスし、selectedCategory 変数にバインドします。
Select コンポーネントのバインディングを表示
@@ -193,7 +204,7 @@ Select コンポーネントにフォーカスし、selectedCategory 変数に quantityGreaterThan の **Input コンポーネント**:
最小数量入力バインディングを表示
@@ -204,7 +215,7 @@ quantityGreaterThan の **Input コンポーネント**: quantityLessThan **Input コンポーネント**:
最大数量入力バインディングを表示
@@ -216,7 +227,7 @@ quantityLessThan **Input コンポーネント**: 3. **Grid コンポーネント**を追加し、手順 2 で作成した**クエリ変数**にバインドします。
Grid コンポーネントのバインディングを表示
@@ -234,7 +245,7 @@ quantityLessThan **Input コンポーネント**: これまでのところ、クエリは、**Dairy Products** カテゴリに属し、数量が **5 から 7 の間**で注文された**すべての製品**を返します。
最初のクエリ結果を表示
@@ -247,8 +258,9 @@ quantityLessThan **Input コンポーネント**: ## 手順 7.グリッド行選択を使用して製品ごとの注文数量を表示 1. **グリッドの行選択変更**インタラクションを追加し、それに**変数**をバインドします。 +
グリッドの行選択インタラクションを表示
@@ -257,8 +269,9 @@ quantityLessThan **Input コンポーネント**:
変数タイプの設定を表示
@@ -269,7 +282,7 @@ quantityLessThan **Input コンポーネント**: 3. 関連データを表示するには、**Dialog** とその中に **Grid** を追加します。
ダイアログとグリッドの設定を表示
@@ -280,6 +293,7 @@ quantityLessThan **Input コンポーネント**: 4. 特定のカテゴリ内の製品の **order details** を取得する別の**クエリ変数**を構成します。 **クエリの例:** + ``` SELECT * FROM orderDetails @@ -291,9 +305,10 @@ WHERE productId IN ( AND Quantity BETWEEN 5 AND 15; ``` +
orderDetails クエリ結果を表示
@@ -301,7 +316,7 @@ AND Quantity BETWEEN 5 AND 15; 5. **Grid コンポーネント**を **OrdersComplexQuery 変数**にバインドします。
orderDetails にグリッド バインディングを表示
@@ -314,12 +329,12 @@ AND Quantity BETWEEN 5 AND 15; - **[プレビュー]** をクリックします。 - Input コンポーネントを使用してクエリ結果を動的に調整します。 - ユース ケースの例: - - **Confections** カテゴリーを検索します。 - - **Quantity を 4 ~ 8 の間**で設定します。 + - **Confections** カテゴリーを検索します。 + - **Quantity を 4 ~ 8 の間**で設定します。
Confections の例でアプリのプレビューを表示
@@ -327,11 +342,13 @@ AND Quantity BETWEEN 5 AND 15;
Query Builder コンポーネントの追加を表示
@@ -344,7 +361,7 @@ AND Quantity BETWEEN 5 AND 15; 3. これで、**クエリ コンポーネント**は**クエリ変数**にバインドされ、データ リクエストを動的に処理するようになりました。
Query Builder のバインディング結果を表示
@@ -366,7 +383,7 @@ AND Quantity BETWEEN 5 AND 15; ## FAQ -1. Query Builder はなぜ OData を使用しないのですか? +1. Query Builder はなぜ OData を使用しないのですか? OData はサブクエリをサポートしていませんが、Query Builder は**主に条件ツリーを構築します**が、一部の式は OData 互換のフィルターにマップされる場合があります。ただし、OData の制限により、完全なサポートは保証されません。 Query Builder は、**フィルタリング ロジック**を直接制御できるようにすることで柔軟性を高め、OData がネイティブにサポートしていないサブクエリなどの複雑なシナリオをより適切にサポートできるようにします。 @@ -388,18 +405,19 @@ Query Builder は、**フィルタリング ロジック**を直接制御でき - **バインド可能なプロパティ:** 変数バインディングをサポートするのは **「Query」 プロパティ**のみです。 ### サーバー側の大文字と小文字の区別 + - 独自のデータ サーバーを実装する場合は、**大文字と小文字を区別するフィールド名**を構成しないことを検討してください。 ## その他のリソース -* [API プロジェクト向けの Query Builder のサポート](api-project-query-builder-support.md) -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) -* [App Builder インターフェイスの概要](../interface-overview.md) -* [フォーム ビルダー](form-builder.md) -* [グリッド リモート ページング](grid-remote-paging.md) -* [CRUD 操作](crud-operations.md) -* [リモート データ操作](remote-data-operations.md) -* [Flex レイアウト](../flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](../running-desktop-app.md) +- [API プロジェクト向けの Query Builder のサポート](api-project-query-builder-support.md) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) +- [App Builder インターフェイスの概要](../interface-overview.md) +- [フォーム ビルダー](form-builder.md) +- [グリッド リモート ページング](grid-remote-paging.md) +- [CRUD 操作](crud-operations.md) +- [リモート データ操作](remote-data-operations.md) +- [Flex レイアウト](../flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](../running-desktop-app.md) diff --git a/jp/using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md b/jp/using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md index 04a4f63..defdd22 100644 --- a/jp/using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md +++ b/jp/using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md @@ -10,13 +10,14 @@ _language: ja このガイドでは、データ API ビルダーを任意のデータベースでセットアップして使用するための手順を段階的に説明します。サポートされているデータベースの[完全なリスト](https://learn.microsoft.com/ja-jp/azure/data-api-builder/overview) (SQL Server、MySQL、PostgreSQL など) も示します。ネイティブ OpenAPI、Swagger for REST エンドポイントを作成し、データベースを効果的に管理するには、次の手順に従ってください。 主要機能 + - リレーショナル テーブル、ビュー、ストアド プロシージャーのサポート - 複数のデータ ソースを同時にサポート - REST エンドポイント - - POST、GET、PUT、PATCH、DELETE - - フィルタリング、並べ替え、ページネーション - - メモリ内キャッシュ - - OpenAPI のサポート + - POST、GET、PUT、PATCH、DELETE + - フィルタリング、並べ替え、ページネーション + - メモリ内キャッシュ + - OpenAPI のサポート - 専用 CLI による簡単な開発 - オープン ソースで無料 @@ -45,6 +46,7 @@ dotnet tool update --global Microsoft.DataApiBuilder 詳細については、[公式ドキュメント](https://learn.microsoft.com/ja-jp/azure/data-api-builder/how-to-install-cli)を参照してください。 ## 2. データベースの構成 + データベースが設定されていることを確認してください。SQL Server Management Studio、MySQL Workbench、その他のデータベース管理ツールなどのツールを使用して、データベースを作成および構成できます。このガイドでは、MSSQL データベースの例を紹介します。 ## 3. 構成ファイルを通じて作成されたデータ API ビルダーの REST エンドポイント @@ -68,6 +70,7 @@ dab add Products --source "Products" --permissions "anonymous:*" ``` ### 現在の dab-config.json 構成ファイルを確認します + ファイルには、単一のエンティティ (REST API エンドポイント) を含む API のベースライン実装が含まれている必要があります。 > [!NOTE] @@ -140,13 +143,14 @@ dab add Products --source "Products" --permissions "anonymous:*" ``` ## 4. REST API をテストします + 次に、データ API ビルダー ツールを起動して、すべてが正しく設定されていることを確認します。 ``` dab start ``` -出力。API が実行されると、http://localhost:5000/swagger/index.html でアクセスできます。 +出力。API が実行されると、http://localhost:5000/swagger/index.html でアクセスできます。 ``` Successfully completed runtime initialization. @@ -165,16 +169,17 @@ info: Microsoft.Hosting.Lifetime[0] [ステップバイステップのチュートリアル](https://www.appbuilder.dev/ja/help/using-data-in-your-app#swagger-データ-ソースを追加する)については、[このトピック](https://www.appbuilder.dev/ja/help/using-data-in-your-app#swagger-データ-ソースを追加する)を参照してください。 -
+
App Builder の DAB
## 6.よくある問題のトラブルシューティング + よくある問題とその解決策: - App Builder では CRUD が Grid でのみ動作します。Form コンポーネントでは、現在進行中の OpenAPI 仕様の一部が不足しているため、完全には動作しません。 - CORS の問題 - CORS を有効にする方法: - + ``` "host": { "cors": { @@ -189,6 +194,7 @@ info: Microsoft.Hosting.Lifetime[0] "mode": "development" } ``` + - OpenID Connect サポート提案 - [data-api-builder GitHub の問題](https://github.com/Azure/data-api-builder/issues/2226)。 - DELETE エンドポイントが機能しない? @@ -202,12 +208,12 @@ info: Microsoft.Hosting.Lifetime[0] -* [API プロジェクト向けの Query Builder のサポート](api-project-query-builder-support.md) -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) -* [App Builder インターフェイスの概要](../interface-overview.md) -* [フォーム ビルダー](form-builder.md) -* [グリッド リモート ページング](grid-remote-paging.md) -* [CRUD 操作](crud-operations.md) -* [リモート データ操作](remote-data-operations.md) -* [Flex レイアウト](../flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](../running-desktop-app.md) \ No newline at end of file +- [API プロジェクト向けの Query Builder のサポート](api-project-query-builder-support.md) +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) +- [App Builder インターフェイスの概要](../interface-overview.md) +- [フォーム ビルダー](form-builder.md) +- [グリッド リモート ページング](grid-remote-paging.md) +- [CRUD 操作](crud-operations.md) +- [リモート データ操作](remote-data-operations.md) +- [Flex レイアウト](../flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](../running-desktop-app.md) diff --git a/jp/using-data-in-your-app/remote-data-operations.md b/jp/using-data-in-your-app/remote-data-operations.md index ab8a684..25ecd5a 100644 --- a/jp/using-data-in-your-app/remote-data-operations.md +++ b/jp/using-data-in-your-app/remote-data-operations.md @@ -10,6 +10,7 @@ _language: ja この機能により、ユーザーは **Card** (カード)、**Column Layout** (列レイアウト)、**Absolute Layout** (絶対レイアウト)、**Row Layout** (行レイアウト) コンポーネントを使用してデータを反復処理しながら、Paginator (ページネーター) コンポーネントを活用してデータの特定のページのみを取得するリクエストを構成および実行できます。 ## 主な利点 + - **パフォーマンスの改善**: 必要なデータのサブセット (ページ) のみをサーバーから取得し、大きなペイロードを回避します。 - **スケール可能**: データを小さなチャンクに分割して読み込むことで、大規模なデータセットを処理します。 - **柔軟性の高い UI**: ユーザーは、ページング機能を活用しながら、カードなどの繰り返し項目をカスタム レイアウトに配置できます。 @@ -32,39 +33,46 @@ _language: ja ## リモート データのセットアップ ### **1.データ上でコンポーネントを繰り返す** + - **ツールボックス**から、**カード**、**列レイアウト**、**絶対レイアウト**、グ**リッド レイアウト**、または**行レイアウト** をドラッグします (現在のところこれらがページングをサポートしています)。 - コンポーネントを選択し、右側に表示される **[プロパティ]** パネルを開きます。 ### **2.データの選択** + - **[繰り返し]** の設定で、**[Data]** を選択します。 - JSON 応答を提供する REST エンドポイントまたは Swagger 定義を選択します。 - ページングを行う場合は、選択した API が `pageIndex` や `pageSize` などのパラメーターをサポートし、効果的にページングできることを確認してください。 ### **3.ページネーションを有効にする** + - **ページング**をオンに切り替えます。 - App Builder はコンポーネントを**行レイアウト**でラップし、ページネーターがホスト コンポーネント (**カード/レイアウト**) と一緒に正しく配置されるようにします。 - **ページネーター**が追加されるので、それをクリックして独自のプロパティ パネルを開き、設定をする必要があります。設定方法については、こちらをご覧ください: [グリッド リモート ページング](../using-data-in-your-app/grid-remote-paging.md) ### **4.セットアップのプレビュー** + - セットアップが完了し、ローカル変数と操作が生成されたら、コンポーネントのリモート ページングの設定は完了です。 - **[プレビュー]** をクリックして、データの最初のページを読み込みます。 - ページまたはページ サイズを変更すると、新しいリクエストがトリガーされ、必要な部分のデータのみが取得されます。 **期待される結果:** + - コンポーネント (**カード/列レイアウト/行レイアウト/グリッド レイアウト/絶対レイアウト**) はグリッドのようにページネーションされ、現在のページのデータのみを動的に取得します。 ## 既知の制限 ### **1.行レイアウトの適用** + - **ページネーター**と繰り返しコンポーネントの適切な配置を保証するために、App Builder は、**折り返し**、**拡大**、および「縮小」ルールを有効にして、それらを**行レイアウト**内にラップします。 ### **2.変数優先アプローチはまだサポートされていません** + - 現在、ページングを有効にするには、ユーザーはまずデータ上でコンポーネントを繰り返す必要があります。次のバージョンでは、**ページネーター**をスタンドアロン コンポーネントとして公開し、データ要求を独自に構成して、任意のコンポーネントを対応するデータにバインドできるようにする可能性があります。 ## その他のリソース -* [App Builder コンポーネント](../indigo-design-app-builder-components.md) -* [App Builder インターフェイスの概要](../interface-overview.md) -* [グリッド リモート ページング](../using-data-in-your-app/grid-remote-paging.md) \ No newline at end of file +- [App Builder コンポーネント](../indigo-design-app-builder-components.md) +- [App Builder インターフェイスの概要](../interface-overview.md) +- [グリッド リモート ページング](../using-data-in-your-app/grid-remote-paging.md) diff --git a/jp/video-tutorials.md b/jp/video-tutorials.md index d804cfc..18a3a79 100644 --- a/jp/video-tutorials.md +++ b/jp/video-tutorials.md @@ -8,6 +8,7 @@ _language: ja # ビデオ チュートリアル ## App Builder ビデオ チュートリアル +アプリ コードのプレビューと生成 (英語)
コードのプレビュー
## アプリケーションを Github にアップロードする + アプリケーションをプレビュー モードで表示したり、ローカルにダウンロードしたりする以外に、完全なアプリコード リポジトリを生成するオプションがあります。これを行うには、[アプリの生成] ボタンに移動し、GitHub アカウントを App Builder に接続します。 ## 既知の問題と制限 @@ -56,9 +59,9 @@ App Builder を使用すると、依存関係のないコンポーネントを -* [アプリの生成](./generate-app/generate-app-overview.md) -* [App Builder コンポーネント](indigo-design-app-builder-components.md) -* [Flex レイアウト](flex-layouts/flex-layouts.md) -* [Desktop アプリの実行方法](running-desktop-app.md) -* [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) -* [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components) \ No newline at end of file +- [アプリの生成](./generate-app/generate-app-overview.md) +- [App Builder コンポーネント](indigo-design-app-builder-components.md) +- [Flex レイアウト](flex-layouts/flex-layouts.md) +- [Desktop アプリの実行方法](running-desktop-app.md) +- [Indigo.Design はじめに](https://jp.infragistics.com/products/indigo-design/help/getting-started) +- [App Builder コンポーネント]({environment:appbuilderBaseUrl}/components) diff --git a/package.json b/package.json index b15bb60..e72a653 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "test": "echo \"Error: no test specified\" && exit 1", "postinstall": "dotnet tool restore", "lint:md": "markdownlint \"**/*.md\" --config .markdownlint.json", - "lint:md:fix": "markdownlint \"**/*.md\" --fix", + "lint:md:fix": "markdownlint \"**/*.md\" --config .markdownlint.json --fix", "spellcheck": "cspell \"en/**/*.md\" \"jp/**/*.md\"", "verify": "npm run spellcheck && npm run lint:md" }, From ace06c50ad3b3210c3a026719cd8495be909bc08 Mon Sep 17 00:00:00 2001 From: zdrawku
Array type variable
-2. **Create an Array Variable**: Set up an empty Array variable named "Box Office Revenue". The Data Type is automatically determined based on the data source of the Combo component. +1. **Create an Array Variable**: Set up an empty Array variable named "Box Office Revenue". The Data Type is automatically determined based on the data source of the Combo component. -
-New Variable dialog
+
+ New Variable dialog
-3. **Bind to a Card Component**: Link the "selectedMovies" variable to a card component. Bind the Title and Subtitle properties to the appropriate data fields from the Data Context. +2. **Bind to a Card Component**: Link the "selectedMovies" variable to a card component. Bind the Title and Subtitle properties to the appropriate data fields from the Data Context. -
-Data context binding
+
+ Data context binding
The result is a dynamically updated card component based on your selection: diff --git a/en/interactions.md b/en/interactions.md index 9eb5f49..afb3391 100644 --- a/en/interactions.md +++ b/en/interactions.md @@ -8,8 +8,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k > [!NOTE] > The Interactions feature of the App Builder enables users to define particular interactions between views and components, such as Navigate to another view, Show or Hide and Open or Close an app component. - -### In this article +## In this article - Introduction of the feature - Interaction: Navigate to diff --git a/en/master-detail/step-by-step-examples.md b/en/master-detail/step-by-step-examples.md index 37e25de..eebc27e 100644 --- a/en/master-detail/step-by-step-examples.md +++ b/en/master-detail/step-by-step-examples.md @@ -23,17 +23,17 @@ Global variable set from one View and Updating Grid request from another View th 3. Go to the other view, where the Grid is bound to an API request fetching orders based on that CustomerID 4. The Grid should be updated with the selected CustomerID (from the Combo) -
-Selection Changed event
+
+ Selection Changed event
-
-CustomerID Variable
+
+ CustomerID Variable
5. Upon clicking on Order from the Orders grid, load another Grid with OrderDetails 6. Result -
-Result
+
+ Result
## Example 2 @@ -44,27 +44,27 @@ Tree bound to Hierarchical data source loading data for Grid and Chart 1. Add a Tree component and bind its parent to a Hierarchical data source (Repeated data context). 2. Bind the parent tree node On Click event to a Set variable action that stores the CustomerID - String variable -
-Tree node binding
+
+ Tree node binding
3. Add a Tree child node and repeat to the Parent data context. Bind the child tree node On Click event to a Set variable action that stores the OrderID - Number variable -
-Child node binding
+
+ Child node binding
4. Ensure the root tree element shows the Customer and the child tree node shows the Orders 5. Bind a Grid to an endpoint that fetches Orders based on the OrderID variable as a query param -
-Bind Grid to Orders data
+
+ Bind Grid to Orders data
6. Bind the Chart to an endpoint that fetches Customer orders history based on the CustomerID variable as a query param -
-Bind Chart to Customer Orders History table
+
+ Bind Chart to Customer Orders History table
7. Result -
-Tree + Grid + Chart Result
+
+ Tree + Grid + Chart Result
diff --git a/en/on-prem-prerequisites-and-installation.md b/en/on-prem-prerequisites-and-installation.md index b8299f8..82398a7 100644 --- a/en/on-prem-prerequisites-and-installation.md +++ b/en/on-prem-prerequisites-and-installation.md @@ -21,7 +21,8 @@ Based on your requirements you can decide to use either MySQL or MSSQL Server da - Select: - Developer default, Next and Execute. - > Note: if you get a prompt saying "one or more products requirements have not been satisfied. Do you want to continue?" Just select Yes) + > Note: if you get a prompt saying "one or more products requirements have not been satisfied. Do you want to continue?" Just select Yes) + - After installation ends: - Select next to configure the server, when prompted enter the root password you wish, then Execute. - After the server configuration ends, select Cancel to exit the installer since the rest of the configuration is not needed. diff --git a/en/on-premises/external-references-for-whitelisting.md b/en/on-premises/external-references-for-whitelisting.md index 29256ca..99ddd4c 100644 --- a/en/on-premises/external-references-for-whitelisting.md +++ b/en/on-premises/external-references-for-whitelisting.md @@ -27,7 +27,7 @@ By integrating this whitelist, developers can ensure that all necessary external Below you can find a detailed list of all external URLs part of the App Builder Platform. To ensure clarity and usability, the URLs have been organized into categories based on their purpose: -#### App Builder Resources +### App Builder Resources - [Landing page.](https://www.infragistics.com/products/appbuilder) - [Pricing page.](https://www.appbuilder.dev/pricing) @@ -35,7 +35,13 @@ Below you can find a detailed list of all external URLs part of the App Builder - Platform URLs for [Preview](https://preview.appbuilder.dev/) and [Production](https://my.appbuilder.dev/) environments. - User Accounts for [Subscriptions](https://account.appbuilder.dev/subscriptions) and [Individual Profiles](https://account.appbuilder.dev/private-profile). -#### Documentation & Help + - [Landing page.](https://www.infragistics.com/products/appbuilder) + - [Pricing page.](https://www.appbuilder.dev/pricing) + - App Builder desktop application for [Windows](https://www.infragistics.com/products/appbuilder/download), [Mac](https://www.infragistics.com/products/appbuilder/download/mac) and [Linux](https://www.infragistics.com/products/appbuilder/download/linux). + - Platform URLs for [Preview](https://preview.appbuilder.dev/) and [Production](https://my.appbuilder.dev/) environments. + - User Accounts for [Subscriptions](https://account.appbuilder.dev/subscriptions) and [Individual Profiles](https://account.appbuilder.dev/private-profile). + +### Documentation & Help - [Getting started page.](https://www.infragistics.com/products/appbuilder/help/getting-started) - [Change Log.](https://www.infragistics.com/products/appbuilder/help/change-log) diff --git a/en/using-data-in-your-app.md b/en/using-data-in-your-app.md index 73641a1..aa35705 100644 --- a/en/using-data-in-your-app.md +++ b/en/using-data-in-your-app.md @@ -108,7 +108,7 @@ if (app.Environment.IsDevelopment()) } ``` -### Enable CORS Using IIS Manager, web.config or C # +### Enable CORS Using IIS Manager, web.config or C\# Follow the steps below in order to enable access to your internally hosted data source using IIS. diff --git a/en/using-data-in-your-app/query-builder-step-by-step-guide.md b/en/using-data-in-your-app/query-builder-step-by-step-guide.md index 58dfa63..373ad3b 100644 --- a/en/using-data-in-your-app/query-builder-step-by-step-guide.md +++ b/en/using-data-in-your-app/query-builder-step-by-step-guide.md @@ -43,15 +43,15 @@ AND productId IN ( 1. **Main Query (Products table)**: -- Selects all columns (`*`) from the **products** table. -- Filters products where **categoryId = "Beverages"** (only products from the Beverages category). + - Selects all columns (`*`) from the **products** table. + - Filters products where **categoryId = "Beverages"** (only products from the Beverages category). 2. **Subquery (OrderDetails table)**: -- Retrieves **productId's** from **orderDetails** where the **quantity** ordered is between **5 and 10** (inclusive). -- These **productId's** are then used in the **IN** clause of the main query to filter products. + - Retrieves **productId's** from **orderDetails** where the **quantity** ordered is between **5 and 10** (inclusive). + - These **productId's** are then used in the **IN** clause of the main query to filter products. -**Final Output:** + **Final Output:** The result will be a list of **beverage products** that have been ordered in quantities between **5 to 10 units**. @@ -64,19 +64,19 @@ Let's start by creating a Query Variable. This Variable will be used for handlin 3. Select the newly added **Query Builder endpoint**. [App Builder's Testing OpenAPI now supports server-side filtering](https://data-northwind.appbuilder.dev/swagger/index.html). 4. Search for "query" endpoints and pick **ExecuteQuery.products**. This will serve as the **base table** for our complex query example. -
-Endpoint selection
+
+ Endpoint selection
-
+
## Step 3. Configure the Query Variable
@@ -135,17 +135,17 @@ Build the complex query that will work with **two tables**:
1. Click **Save** to store the **Complex Query Variable** configuration.
2. Test the query execution using the **SEND button**.
-
-View query execution test
+
+ View query execution test
-
-View grid row selection interaction
+
+ View grid row selection interaction
-
-View variable type configuration
+
+ View variable type configuration
-
-View dialog and grid setup
+
+ View dialog and grid setup
-
-View order details query result
+
+ View order details query result
5. Bind the **Grid component** to the **OrdersComplexQuery Variable** -
-View grid binding to order details
+
+ View grid binding to order details
-
配列型の変数
-2. **配列変数を作成する**: 「Box Office Revenue」 型の空の配列変数を作成します。データ タイプは、Combo コンポーネントのデータ ソースに基づいて自動的に決定されます。 +1. **配列変数を作成する**: 「Box Office Revenue」 型の空の配列変数を作成します。データ タイプは、Combo コンポーネントのデータ ソースに基づいて自動的に決定されます。 -
-新しい変数のダイアログ
+
+ 新しい変数のダイアログ
-3. **Card コンポーネントにバインドする**: 「selectedMovies」 変数をカード コンポーネントにリンクします。Title プロパティと Subtitle プロパティをデータ コンテキストの適切なデータ フィールドにバインドします。 +2. **Card コンポーネントにバインドする**: 「selectedMovies」 変数をカード コンポーネントにリンクします。Title プロパティと Subtitle プロパティをデータ コンテキストの適切なデータ フィールドにバインドします。 -
-データ コンテキストのバインド
+
+ データ コンテキストのバインド
その結果、選択に基づいて動的に更新されるカード コンポーネントが生成されます。 diff --git a/jp/interactions.md b/jp/interactions.md index 56ff963..4aa24ac 100644 --- a/jp/interactions.md +++ b/jp/interactions.md @@ -9,8 +9,7 @@ _language: ja > [!NOTE] >App Builder のインタラクション機能を使用して、ビューとコンポーネント間の特定のインタラクション (他のビューへの移動、アプリ コンポーネントの表示/非表示、開く/閉じるなど) を定義できます。 - -### トピック コンテンツ +## トピック コンテンツ - 機能の紹介 - インタラクション: 次へ移動 diff --git a/jp/master-detail/step-by-step-examples.md b/jp/master-detail/step-by-step-examples.md index 6a76019..5ddc620 100644 --- a/jp/master-detail/step-by-step-examples.md +++ b/jp/master-detail/step-by-step-examples.md @@ -30,11 +30,12 @@ _language: ja
CustomerID 変数
-5. Orders グリッドから Order をクリックすると、OrderDetails を含む別のグリッドを読み込みます。 -6. 結果 +1. Orders グリッドから Order をクリックすると、OrderDetails を含む別のグリッドを読み込みます。 -
-結果
+2. 結果 + +
+ 結果
## 例 2 @@ -45,27 +46,27 @@ _language: ja 1. Tree コンポーネントを追加し、その親を階層データ ソース (繰り返しデータ コンテキスト) にバインドします。 2. 親ツリー ノードのクリック時イベントを、CustomerID - 文字列変数を格納する変数設定アクションにバインドします。 -
-ツリー ノードのバインド
+
+ ツリー ノードのバインド
3. ツリー子ノードを追加し、親データ コンテキストに繰り返します。子ツリー ノードのクリック時イベントを、OrderID - Number 変数を格納する変数の設定アクションにバインドします。 -
-子ノードのバインド
+
+ 子ノードのバインド
4. ルート ツリー要素に Customer が表示され、子ツリー ノードに Orders が表示されていることを確認します。 5. OrderID 変数に基づいてクエリ パラメーターとして Orders を取得するエンドポイントに Grid をバインドします。 -
-グリッドを Orders データにバインドする
+
+ グリッドを Orders データにバインドする
6. CustomerID 変数に基づいて Customer Orders History をクエリ パラメーターとして取得するエンドポイントにチャートをバインドします。 -
-チャートを Customer Orders History テーブルにバインドする
+
+ チャートを Customer Orders History テーブルにバインドする
7. 結果 -
-ツリー + グリッド + チャートの結果
+
+ ツリー + グリッド + チャートの結果
diff --git a/jp/on-prem-prerequisites-and-installation.md b/jp/on-prem-prerequisites-and-installation.md index e6e838f..08b5994 100644 --- a/jp/on-prem-prerequisites-and-installation.md +++ b/jp/on-prem-prerequisites-and-installation.md @@ -22,7 +22,8 @@ _language: ja - 選択: - Developer default (開発者のデフォルト)、Next (次へ) および Execute (実行)。 - > 注:「one or more products requirements have not been satisfied. Do you want to continue?」というプロンプトが表示された場合は、「Yes」を選択してください。 + > 注:「one or more products requirements have not been satisfied. Do you want to continue?」というプロンプトが表示された場合は、「Yes」を選択してください。 + - インストールの終了後: - [次へ] を選択してサーバーを構成し、プロンプトが表示されたら、必要なルート パスワードを入力してから [実行] を選択します。 - サーバー構成が終了したら、残りの構成は必要ないため、Cancel (キャンセル) を選択してインストーラーを終了します。 diff --git a/jp/on-premises/external-references-for-whitelisting.md b/jp/on-premises/external-references-for-whitelisting.md index 5b7c5db..35626fe 100644 --- a/jp/on-premises/external-references-for-whitelisting.md +++ b/jp/on-premises/external-references-for-whitelisting.md @@ -28,7 +28,7 @@ _language: ja 以下に、App Builder プラットフォームに含まれるすべての外部 URL の詳細なリストを示します。明確さと使いやすさを確保するために、URL はその目的に基づいてカテゴリごとに整理されています。 -#### App Builder リソース +### App Builder リソース - [ランディング ページ。](https://jp.infragistics.com/products/appbuilder) - [価格ページ。](https://www.appbuilder.dev/ja/pricing) @@ -36,7 +36,7 @@ _language: ja - [プレビュー版環境](https://preview.appbuilder.dev/)と[製品版環境](https://my.appbuilder.dev/)のプラットフォーム URL。 - [サブスクリプション](https://account.appbuilder.dev/subscriptions)と[個人プロファイル](https://account.appbuilder.dev/private-profile)のユーザー アカウント。 -#### ドキュメントとヘルプ。 +### ドキュメントとヘルプ。 - [作業の開始。](https://jp.infragistics.com/products/appbuilder/help/getting-started) - [変更ログ。](https://jp.infragistics.com/products/appbuilder/help/change-log) diff --git a/jp/using-data-in-your-app/query-builder-step-by-step-guide.md b/jp/using-data-in-your-app/query-builder-step-by-step-guide.md index 8991aba..53befcb 100644 --- a/jp/using-data-in-your-app/query-builder-step-by-step-guide.md +++ b/jp/using-data-in-your-app/query-builder-step-by-step-guide.md @@ -44,15 +44,15 @@ AND productId IN ( 1. **メイン クエリ (Products テーブル)**: -- **products** テーブルからすべての列 (`*`) を選択します。 -- **categoryId = "Beverages"** の製品をフィルタリングします (Beverages カテゴリの製品のみ)。 + - **products** テーブルからすべての列 (`*`) を選択します。 + - **categoryId = "Beverages"** の製品をフィルタリングします (Beverages カテゴリの製品のみ)。 2. **サブクエリ (OrderDetails テーブル)**: -- 注文された **quantity** が **5 〜 10** (両端を含む) の **orderDetails** から **productId** を取得します。 -- これらの **productId** は、メイン クエリの **IN** 句で使用され、製品をフィルター処理します。 + - 注文された **quantity** が **5 〜 10** (両端を含む) の **orderDetails** から **productId** を取得します。 + - これらの **productId** は、メイン クエリの **IN** 句で使用され、製品をフィルター処理します。 -**最終出力:** + **最終出力:** 結果は、**5 〜 10 個**の数量で注文された**飲料製品**のリストになります。 @@ -65,19 +65,19 @@ AND productId IN ( 3. 新しく追加された**クエリ ビルダー エンドポイント**を選択します。[App Builder のテスト OpenAPI は、サーバー側のフィルタリングをサポートするようになりました。](https://data-northwind.appbuilder.dev/swagger/index.html) 4. 「query」 エンドポイントを検索し、**ExecuteQuery.products** を選択します。これは、複雑なクエリの例の**基本テーブル**として機能します。 -
-エンドポイントの選択
+
+ エンドポイントの選択
-
+
## 手順 3.クエリ変数を設定します
@@ -136,17 +136,17 @@ AND productId IN (
1. **[保存]** をクリックして、**複雑なクエリ変数**の設定を保存します。
2. **[SEND] ボタン**を使用してクエリの実行をテストします。
-
-クエリ実行テストを表示
+
+ クエリ実行テストを表示
-
-グリッドの行選択インタラクションを表示
+
+ グリッドの行選択インタラクションを表示
-
-変数タイプの設定を表示
+
+ 変数タイプの設定を表示
-
-ダイアログとグリッドの設定を表示
+
+ ダイアログとグリッドの設定を表示
-
-orderDetails クエリ結果を表示
+
+ orderDetails クエリ結果を表示
5. **Grid コンポーネント**を **OrdersComplexQuery 変数**にバインドします。 -
-orderDetails にグリッド バインディングを表示
+
+ orderDetails にグリッド バインディングを表示
-