Merge branch 'vNext' of https://github.com/IgniteUI/app-builder-docfx into localization-2025-05-29

randriova · randriova · commit 04fd437b1a63 · 2025-06-03T15:08:12.000+03:00
diff --git a/en/generate-app/generate-app-overview.md b/en/generate-app/generate-app-overview.md
@@ -100,7 +100,8 @@ Currently, the App Builder supports code generation for Angular and Blazor. Belo
 | Reveal Dashboard       | :heavy_check_mark: | :x:                | :x:                |
 
 
-> Note: Partially generated components are marked with :construction:. See [Blazor Support](../blazor-support.md#known-issues-and-limitations) for more details on the known issues and limitations for Blazor components.
+> [!NOTE]
+> Partially generated components are marked with :construction:. See [Blazor Support](../blazor-support.md#known-issues-and-limitations) for more details on the known issues and limitations for Blazor components.
 
 ## Additional Resources
 
diff --git a/en/getting-started.md b/en/getting-started.md
@@ -10,9 +10,7 @@ _keywords: App builder, Indigo Design, Infragistics
 * <a href="#launch-app-builder">Launch App Builder</a>
 * <a href="#getting-the-code">Getting the code</a>
 * <a href="#running-the-generated-app-locally">Running the app locally</a>
-
-> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0]
-
+* <a href="#video-tutorial">Video tutorial</a>
 
 ## 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.
@@ -25,7 +23,9 @@ There are thee ways in which you can create a new app from the "Create new appli
 4. **Import design** - if you have an existing design file, created using the Indigo.Design UI kit for Figma or Sketch, you can use this as a starting point for your apps. To do this, get our Indigo.Design system, which includes plugins to publish your design, UI kits, and sample design files.
 
 <br>
-> Note: Due to the differences between the absolute layout in Sketch and the Flex layout in the App Builder, some additional adjustments may be needed after parsing your Sketch file.
+
+> [!NOTE]
+> Due to the differences between the absolute layout in Sketch and the Flex layout in the App Builder, some additional adjustments may be needed after parsing your Sketch file.
 <br>
 
 <img src="./images/getting-Started-new-project-dialog-Indigo-Design-App-Builder.png" srcset="./images/getting-Started-new-project-dialog-Indigo-Design-App-Builder-@2x.png 2x" />
@@ -36,7 +36,6 @@ Note, that once in the App Builder, users are enabled to easily switch between t
 <img src="./images/Indigo-Design-side-menu.png" srcset="./images/Indigo-Design-side-menu-@2x.png 2x" />
 <p style="text-align:center;">Side menu</p>
 
-
 ## 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.
  
@@ -90,9 +89,15 @@ In order to run the downloaded application, the following prerequisites need to
 </div>
 <div class="divider--half"></div>
 
+## Video tutorial
+
+
+> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0]
+
 ## Report an issue or send feedback
 
 [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 <a href="mailto:appbuilder@infragistics.com">send us an email</a>.
+
 ## Additional Resources
 <div class="divider--half"></div>
 
diff --git a/en/indigo-design-app-builder-components.md b/en/indigo-design-app-builder-components.md
@@ -6,17 +6,17 @@ _keywords: App builder components, Indigo Design, Infragistics
 
 # App Builder Components
 
+The **Toolbox** tab on the left let you cycle through the list of all available [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) components, as well as some App Builder general components, such as absolute, row, column layout and views container. The search input on the top of the components list makes it easy to find a particular component. All of the components are conveniently distributed into groups based on their usage. The grayed-out components have still not been added, and are thus disabled, but soon will be available in next updates. Components can be added to the **Design Canvas** by dragging and dropping them from the **Toolbox**.
+
+Using App Builder Components:
 <section class="video-container">
     <div>
         <div class="video-container__item">
             <iframe src="https://www.youtube.com/embed/omlSzOuvFlM" frameborder="0" allowfullscreen></iframe>
         </div>
-        <p>Using App Builder Components</p>
     </div>
 </section>
 
-The **Toolbox** tab on the left let you cycle through the list of all available [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) components, as well as some App Builder general components, such as absolute, row, column layout and views container. The search input on the top of the components list makes it easy to find a particular component. All of the components are conveniently distributed into groups based on their usage. The grayed-out components have still not been added, and are thus disabled, but soon will be available in next updates. Components can be added to the **Design Canvas** by dragging and dropping them from the **Toolbox**.
-
 ## Quick add components 
 
 You can also use our quick-add feature by using the keyboard shortcut ctrl+E or cmd+E on a macs to search and add components. Just remember "E" stands for everything. The quick-add keeps track of recently used components making it faster to add components you use frequently. Double-clicking a component in the **Toolbox** will also add it to the **Design Canvas**.  
diff --git a/en/sidebar-toc/toc.yml b/en/sidebar-toc/toc.yml
@@ -1,180 +1,154 @@
-
 - name: App Builder Overview
   href: ../app-builder-overview.md
   header: true
-- name: AI in App Builder
+- name: AI-Powered View and Content Generation
   href: ../ai/getting-started.md
   new: true
-  updated: false
 - name: Getting Started
   href: ../getting-started.md
-  new: false
-  updated: false
   items:
-    - name: On-premises prerequisites and installation
+    - name: Launch App Builder
+      href: ../getting-started.md#launch-app-builder
+    - name: Create New App
+      href: ../getting-started.md#create-new-app
+    - name: Running the Generated App Locally
+      href: ../generate-app/run-application-locally.md
+    - name: On-Premises Prerequisites and Installation
       href: ../on-prem-prerequisites-and-installation.md
-      updated: true
-    - name: Auth with OpenID Connect
+      updated: false
+    - name: On-Premise Authentication with OpenID Connect
       href: ../on-premises/auth-with-openid-connect-o-auth.md
-      new: true
-    - name: Configuration flags for On-prem and SDK
+      new: false
+    - name: On-Premises and SDK Configuration Flags
       href: ../on-premises/configuration-flags.md
-      new: true
-    - name: Whitelisting External Resources for On-Premise App Builder
-      href: ../on-premises/external-references-for-whitelisting.md
-      new: true
-    - name: Managing Workspaces in App Builder
-      href: ../managing-workspaces.md
-      new: true
-- name: Running Desktop App
-  href: ../running-desktop-app.md
-- name: Share, Preview and Edit apps
-  href: ../share-preview-edit-app.md
-  new: false
-- name: Design-to-Code story
-  href: ../design-to-code-story.md
-  new: false
-  items:
-    - name: Figma
-      href: ../ui-kits/figma.md
       new: false
-    - name: Sketch
-      href: ../ui-kits/sketch.md
+    - name: Whitelisting External Resources (On-Premises)
+      href: ../on-premises/external-references-for-whitelisting.md
       new: false
-- name: Interface Overview
-  href: ../interface-overview.md
-  new: false
-- name: Master-detail style apps
-  href: ../master-detail/master-detail.md
-  new: false
+    - name: Running the App Builder Desktop App
+      href: ../running-desktop-app.md
+- name: Design System & Design-to-Code Workflow
+  href: ../design-to-code-story.md
   updated: false
-  items:
-    - name: Step-by-step App Creation examples
-      href: ../master-detail/step-by-step-examples.md
-      new: false
-- name: Guide to Variables in App Builder
-  href: ../guide-to-variables-in-app-builder/variables-management.md
-  new: false
+- name: Figma UI Kit & Usage
+  href: ../ui-kits/figma.md
   updated: false
+- name: Platform Interface and Structure
+  href: ../interface-overview.md
   items:
-    - name: Component properties binding
-      href: ../guide-to-variables-in-app-builder/component-properties-binding.md
-      new: false
-    - name: URL Parameters Binding
-      href: ../guide-to-variables-in-app-builder/url-parameters-binding.md
-      new: false
-    - name: Working with events and actions
+    - name: Interface overview
+      href: ../interface-overview.md
+    - name: App Themes
+      href: ../app-themes/app-themes.md
+    - name: Toolbox Components
+      href: ../indigo-design-app-builder-components.md
+      items:
+      - name: Reveal Dashboard
+        href: ../toolbox/reveal-dashboard.md
+      - name: Grid
+        items:
+        - name: Grid Remote Paging
+          href: ../using-data-in-your-app/grid-remote-paging.md
+        - name: Grid CRUD
+          href: ../using-data-in-your-app/crud-operations.md
+      - name: Form Builder
+        href: ../using-data-in-your-app/form-builder.md
+      - name: Query Builder Component
+        items:
+        - name: Implementing Query Builder for Server-Side Filtering
+          href: ../using-data-in-your-app/api-project-query-builder-support.md
+          updated: false
+        - name: Step-by-Step Using the Query Builder
+          href: ../using-data-in-your-app/query-builder-step-by-step-guide.md
+          updated: false
+    - name: Layouts
+      items:
+        - name: Flex Layouts and Component Positioning
+          href: ../flex-layouts/flex-layouts.md
+        - name: Creating Responsive and Fluid Layouts (Row and Column)
+          href: ../how-to/responsive-fluid-layout.md
+    - name: Single Page Apps and Navigation
+      href: ../single-page-apps-and-navigation.md
+- name: Building Application Logic
+  items:
+    - name: Working with Events and Actions
       href: ../guide-to-variables-in-app-builder/working-with-events-and-actions.md
-      new: false
-    - name: App Navigation with Route Parameters
-      href: ../guide-to-variables-in-app-builder/route-parameters-navigation.md
-      new: false
-- name: Responsive Fluid Layouts
-  href: ../how-to/responsive-fluid-layout.md
-  new: false
-- name: Flex Layouts
-  href: ../flex-layouts/flex-layouts.md
-  # items:
-  #   - name: Row and column layout
-  #     href: ../flex-layouts/row-and-column-layout.md
-  #   - name: Fluid resizing & wrapping
-  #     href: ../flex-layouts/fluid-resizing-and-wrapping.md
-  #   - name: Add to layout via context menu
-  #     href: ../flex-layouts/add-to-layout-via-context-menu.md
-  #   - name: Additional resources to learn about web-layouts
-  #     href: ../flex-layouts/additional-resources-to-learn-about-web-layouts.md
-- name: UI Components
-  href: ../indigo-design-app-builder-components.md
-  # items:
-  #   - name: Quick add components
-  #     href: ../indigo-design-components/quick-add-components.md
-  #   - name: Configuring components
-  #     href: ../indigo-design-components/configuring-components.md
-- name: Interactions
-  href: ../interactions.md
-  # items:
-  #   - name: Quick add components
-  #     href: ../indigo-design-components/quick-add-components.md
-  #   - name: Configuring components
-  #     href: ../indigo-design-components/configuring-components.md
-- name: Using data in your app
+    - name: Configuring Interactions for Component Events
+      href: ../interactions.md
+    - name: Master-Detail Style Apps
+      href: ../master-detail/master-detail.md
+    - name: Step-by-step App Creation Examples
+      href: ../master-detail/step-by-step-examples.md
+- name: Using data in the App Builder
   href: ../using-data-in-your-app.md
-  new: false
-  updated: false
   items:
     - name: OpenAPI (Swagger) Support
       href: ../open-api-swagger-support.md
-    - name: Grid CRUD Operations
-      href: ../using-data-in-your-app/crud-operations.md
-    - name: Grid Remote Paging
-      href: ../using-data-in-your-app/grid-remote-paging.md
+    - name: Managing App State with Variables
+      href: ../guide-to-variables-in-app-builder/variables-management.md
+    - name: Binding Data to Component Properties
+      href: ../guide-to-variables-in-app-builder/component-properties-binding.md
+    - name: URL Parameter Binding
+      href: ../guide-to-variables-in-app-builder/url-parameters-binding.md
     - name: Remote Data Operations
       href: ../using-data-in-your-app/remote-data-operations.md
-    - name: Form Builder
-      href: ../using-data-in-your-app/form-builder.md
-    - name: Complex Query Builder
-      href: ../using-data-in-your-app/query-builder-step-by-step-guide.md
-      new: true
-    - name: Web API Query Builder Support
+    - name: Grid Remote Paging
+      href: ../using-data-in-your-app/grid-remote-paging.md
+    - name: Performing Grid CRUD Operations (with OpenAPI)
+      href: ../using-data-in-your-app/crud-operations.md
+    - name: Implementing Query Builder for Server-Side Filtering
       href: ../using-data-in-your-app/api-project-query-builder-support.md
-      new: true
-    - name: Use Data API Builder with Any Database
+      updated: false
+    - name: Step-by-Step Using the Query Builder
+      href: ../using-data-in-your-app/query-builder-step-by-step-guide.md
+      updated: false
+    - name: Quickstart with Microsoft Data API Builder
       href: ../using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md
-      new: true
-- name: App Themes
-  href: ../app-themes/app-themes.md
-  # items:
-  #   - name: Switching app themes
-  #     href: ../app-themes/switching-app-themes.md
-  #   - name: Material vs. Fluent vs Bootstrap 
-  #     href: ../app-themes/material-vs-fluent-vs-bootstrap.md
-  #   - name: Customize & apply theme 
-  #     href: ../app-themes/customize-and-apply-theme.md
-- name: Single Page Apps and Navigation
-  href: ../single-page-apps-and-navigation.md
-  # items:
-  #   - name: Master view vs. Child views
-  #     href: ../spa-and-navigation/master-view-vs-child-views.md
-  #   - name: Add navigations (routing)
-  #     href: ../spa-and-navigation/add-navigations-routing.md
-- name: Preview Code
-  href: ../preview-code.md
-  # items:
-  #   - name: Preview code
-  #     href: ../preview-code-and-genrate-app/preview-code.md
-  #   - name: Compile and Run the app
-  #     href: ../preview-code-and-genrate-app/compile-and-run-the-app.md
-- name: Blazor Support
-  href: ../blazor-support.md
-  new: false
-  updated: false
-- name: Web Components Support
-  href: ../web-components-support.md
-  new: false
-  updated: false
-- name: Toolbox Components
-  new: false
+    - name: Form Builder Visual Design and Data Connection
+      href: ../using-data-in-your-app/form-builder.md
+      updated: false
+    - name: App Navigation with Route Parameters
+      href: ../guide-to-variables-in-app-builder/route-parameters-navigation.md
+      new: false
+- name: Integrations & External Tools
   items:
-    - name: Reveal Dashboard
+    - name: Adding Reveal Dashboards to Apps
       href: ../toolbox/reveal-dashboard.md
-      new: false
-      updated: false
-- name: Generate App
-  href: ../generate-app/generate-app-overview.md
-  new: false
-  updated: false
+    - name: Figma Design-to-Code Workflow
+      href: ../ui-kits/figma.md
+    - name: OpenAPI (Swagger) Support
+      href: ../open-api-swagger-support.md
+    - name: Feed data with Microsoft Data API Builder
+      href: ../using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md
+    - name: Publishing Apps to GitHub
+      href: ../generate-app/upload-application-to-github.md
+    - name: Publishing Apps to Azure DevOps
+      href: ../generate-app/azure-integration.md
+- name: Code Generation
+  items:
+    - name: Preview Code
+      href: ../preview-code.md
+    - name: Generate App Overview
+      href: ../generate-app/generate-app-overview.md
+    - name: Supported Frameworks
+      items:
+        - name: Blazor Code Generation
+          href: ../blazor-support.md
+        - name: Web Components Code Generation
+          href: ../web-components-support.md
+        - name: Angular Code Generation
+          href: ../generate-app/generate-app-overview.md
+        - name: React Code Generation
+          href: ../generate-app/generate-app-overview.md
+- name: Application Deployment
   items:
-    - name: Upload application to Github
+    - name: Publishing Apps to GitHub
       href: ../generate-app/upload-application-to-github.md
-      new: false
-      updated: false
-    - name: Upload application to Azure DevOps
+    - name: Publishing Apps to Azure DevOps
       href: ../generate-app/azure-integration.md
-      new: true
-      updated: false
-    - name: Run Application Locally
-      href: ../generate-app/run-application-locally.md
-- name: Change Log
+- name: Sharing and Previewing Applications
+  href: ../share-preview-edit-app.md
+- name: Change Log (Release Notes)
   href: ../change-log.md
-  new: false
-  updated: true
+- name: Video Tutorials
+  href: ../video-tutorials.md
diff --git a/en/single-page-apps-and-navigation.md b/en/single-page-apps-and-navigation.md
@@ -6,13 +6,13 @@ _keywords: App builder, Indigo Design, Infragistics
 
 # Single page apps and navigation  
 
-> [!Video https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw]
-
 Another App Builder feature is the single-page apps and navigation. Unlike a page-based design approach, App Builder lets you create separate views that are injected or switched based on how users navigate. To see this action, you can create a new app using the create new application button, then select one of the default layouts that shows a top navigation defined. 
 
 <img src="./images/getting-Started-new-project-dialog-Indigo-Design-App-Builder.png" srcset="./images/getting-Started-new-project-dialog-Indigo-Design-App-Builder-@2x.png 2x" />
 <p style="text-align:center;">Add layout preset from the Menu button, then select Create New App</p>
 
+> [!Video https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw]
+
 ## 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. 
