Using App Builder Components
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 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. From ef79f6a16d930d4b01568c66db025f715f639140 Mon Sep 17 00:00:00 2001 From: Zdravko Kolev-> 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.
@@ -34,7 +36,6 @@ Note, that once in the App Builder, users are enabled to easily switch between t
Side 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. diff --git a/en/sidebar-toc/toc.yml b/en/sidebar-toc/toc.yml index 82a643f..4d703b3 100644 --- a/en/sidebar-toc/toc.yml +++ b/en/sidebar-toc/toc.yml @@ -27,10 +27,10 @@ new: false - name: Running the App Builder Desktop App href: ../running-desktop-app.md -- name: Design-to-Code Workflow +- name: Design System & Design-to-Code Workflow href: ../design-to-code-story.md updated: false -- name: Figma Design-to-Code Workflow +- name: Figma UI Kit & Usage href: ../ui-kits/figma.md updated: false - name: Platform Interface and Structure @@ -51,6 +51,16 @@ 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 @@ -100,11 +110,20 @@ - name: App Navigation with Route Parameters href: ../guide-to-variables-in-app-builder/route-parameters-navigation.md new: false -- name: Integrations +- name: Integrations & External Tools items: - name: Adding Reveal Dashboards to Apps href: ../toolbox/reveal-dashboard.md - 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 From 8c58493d4e2d000ae19a152fd6a42091c31b3f14 Mon Sep 17 00:00:00 2001 From: Zdravko Kolev