You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
App Builder is a design to code solution, enabling design and development teams to quickly and easily design and build real web applications, using professionally-built components to generate production-ready code for Angular, Blazor, Web Components and React.
10
-
11
-
Through the [App Builder]({environment:appbuilderBaseUrl}/platform) you are able to build pixel-perfect apps incredibly fast, saving huge amounts of design time and getting apps looking exactly like your design. That is a new generation design tool, where designers use the design system approach and a component library, everything designed is running live, dev ready, with high-quality app code. Speaking of production ready code, everything you design results in production ready Angular repository with all it's components, styles, build setup, etc. So, you do the design and check the instant real-time preview, we'll do the code. Since the App Builder is 100% web based, there is no need to download anything, not heavy IDE's, and no 3rd party dependencies. Everything is on the web, accessible by your whole team on any platform.
12
-
13
-
Starting your app building experience is fast and easy with one of our pre-built app templates or use one of our preset layout options to build your app in no time. Just tweak our app design, swap a theme and your done! Use pre-configured themes and typography, or customize them to match your own app theme and corporate branding on a per-control, per-screen or per-app basis. Start you new app in the App Builder, build it faster than ever, iterate with new features and get the production-ready code!
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.
11
+
12
+
You can kick off your app with pre-built templates or layout presets, then quickly customize the design, theme, and branding to fit your needs. Whether you're designing screens from scratch or modifying existing templates, App Builder streamlines the process—helping you go from concept to live code in minutes, ready to deploy or extend in your favorite development environment.
39
13
40
14
> [!NOTE]
41
15
> Supported browsers are Chrome, Edge (Chromium), Firefox, Safari MacOS and Mobile Safari. IE11 is not supported.
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.
Master-detail template allow you to enrich your data grids by expanding rows to display additional information about a record. This feature helps you build interactive views where users can click to reveal related summaries, or any other components tied to that specific row context data.
6
+
7
+
For example, you can show an **employee's performance info**, a **vehicle's trip history**, or a **customer’s recent orders** directly within the row, making your applications more informative and engaging.
8
+
9
+
## What Can You Do with It?
10
+
11
+
With **App Builder’s Master-Detail template support**, you can:
12
+
13
+
* Use **expandable rows** that reveal additional row data.
14
+
* Leverage Component binding support - Add **cards, text blocks or other components** that can use row-specific data.
15
+
16
+
## How It Works in App Builder
17
+
18
+
* App Builder offers a **design-time experience** for inserting components inside the row detail area.
19
+
* Components inside this area can be bound to:
20
+
* The current **row’s data context**.
21
+
* You can easily preview how these template will appear directly inside the App Builder Canvas and App Preview.
22
+
23
+
## Try It Out
24
+
25
+
To start using Master-Detail template:
26
+
27
+
1. Add a **Grid** to your canvas.
28
+
2. Under the Grid Properties Panel -> Custom template, click on **Grid-details** switch.
29
+
3. Drag and drop components you would want to use, inside the details area.
30
+
4. Bind them to fields from the grid row context.
31
+
5. Preview your app and export your code to extend the functionality even further.
32
+
33
+
## Known Limitations
34
+
### Contextual binding, Row ID Parameters Not Supported
35
+
36
+
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.
37
+
38
+
> [!NOTE]
39
+
> 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.
40
+
41
+
This restriction helps avoid:
42
+
- Ambiguity around dynamic subscriptions.
43
+
- Performance bottlenecks due to lack of caching.
44
+
45
+
### Iterating over data collection from the contextual binding is not implemented in CodeGen
46
+
47
+
Iterating over data collection from the contextual binding is not implemented in CodeGen. Such scenario fails to codegenerate.
48
+
49
+
### Overlay Components (e.g., Dialog, Banner)
50
+
51
+
Overlay elements like **Dialogs** or **Banners**, placed inside master-detail template, currently do not work correctly when code generated .
52
+
53
+
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.
0 commit comments