igniteui / app-builder

App Builder™ is a cloud-based WYSIWYG drag & drop tool that helps teams design and build complete business apps 80% faster than before. It has an integrated design system – Indigo.Design – and packs real UI components for Angular, Blazor, and Web Components.

App Builder

Join our Discord group!

App Builder is a cloud-based WYSIWYG drag & drop tool that streamlines everything in software development from design to code, allowing you to build business apps faster than ever before. With features that both designers and developers love, the low-code platform brings a toolbox of 60+ reusable UI controls and integrates a complete design system - Indigo.Design.

• You can start your app from scratch.
• Choose from a library of pre-built templates or responsive screen layouts and customize them easily.
• Work with limitless app themes and styling.
• Import Sketch and Figma Designs and turn them into clean code in a click.
• Preview code and generate production-ready code in Angular and Blazor.
• Use data in your app - Data Binding, Swagger UI Support (OpenAPI).

Try the web app now, download the Desktop application from our page, or read the official App Builder Documentation Page to see how to get started.

This repository is intended for issues and feature requests submission, as well as for general product discussions and questions.

Feedback

• Ask a question by starting a discussion
• Submit an issue
• Request a new feature
• Upvote popular feature requests
• File an issue
• Reach out to us through Discord

Tutorials

• Getting Started
• App Layouts
• Components
• App Themes
• Interactions
• Code Generation

Documentation

• App Builder Overview
• Getting Started
• Changelog
• Desktop App

Desktop App

app-builder's Issues

Code gen does not include border styles

In App Builder you can set a border style and width on an item. In the preview mode it shows the proper border style but the generated css does not.

[Help page] Flex Layout add new paragraphs

Add the short paragraphs included in the file (including the titles) to the App Builder Flex Layout help page. The new texts should be placed above the video

https://infragisticsinc297.sharepoint.com/:w:/g/Groups/marketing/EdmBfROjIMBOilKyO3dMFO0B4MtnioZt4uYm2PpxNLz0eQ?e=f8vfJq

Cannot Select Endpoints when connecting to Rest API

Description

I am attempting to connect to a Swagger REST API json file. I can utilize App Builder's REST API datasource to connect to the Swagger json file URL, but I cannot configure any endpoints. I can _see the endpoints, but not actually select any of them.

• browser: Microsoft Edge

Result

Cannot configure endpoints to test API with App Builder.

Expected result

Based on tutorials I've watched for App Builder, the endpoints should all be clickable. I should be able to configure endpoints and experiment with App Builder.

Roadmap for more components

Hi

We've used the Indigo studio app for some time, creating simple wireframes for our specifications. Recently I've started to look into further expand this to possible create full prototypes in place of simple wireframes. The app builder seems to be developing in the right direction, but there seems to be a few core components missing. One is chart, and I saw in the roadmap that this is to be included in the current iteration. However, I can't see anything about other important missing components. Above all, the tree grid is missing, but there seems to be quite a few others like hieracical grid and splitter as well. Are these being considered for inclusion soon? I can't see us adopting the app builder before more components are supported.

Pie Chart Issue

During todays Webinar, I dropped a pie chart on the right hand column. As soon as i clicked the DATA button, the chart got smaller and moved to the top of the column and several "shadow" charts appeared below it. This was the same with the latest desktop download and the web version.

Links in README lead to 404 pages.

Links in README lead to 404 pages

Application environment configurations support

Current state:
At the moment, if the OpenAPI schema file has defined servers (environments) App Builder will list them as dropdown options to pick from. Upon app code generation the selected Base URL will be hardcoded in the application files instead of exposing it in a config file/s (example with Blazor below). This leads to problems when there is a need to work on different deploy/build environments.

Expected result:
AppBuilder should automatically generate an appsettings.json, appsettings.development.json, or whatever is defined for each environment (Blazor-specific example). Any generated application should be ready to plug into a build and release pipeline if needed. In order to achieve that, App Builder should provide a UI to set the environment name, which will be used for the application settings environment files/configurations (based on the Framework).

For Blazor that would be appsettings.{Environment}.json configurations

For Angular environment.{env-name}.ts file

Based on the framework, other changes should be considered, not only the configuration files, but also:

• Angular, for example, would be the target-specific files, building and serving configurations, and so on.
• Blazor, for example is having app settings per environment. This means we need to set the environment variable on the server-side either by setting the ASPNETCORE_ENVIRONMENT environment variable or the blazor-environment response header. For Blazor Wasm, there is a boot script that loads the appsettings.json and appsettings.{Environment}.json file corresponding to the blazer-environment received and populate the WebAssemblyHostBuilder.Configuration with data in those files. We can then configure components, services, or js.

You can then configuration to your components, services or js

Looking at the OpenAPI spec docs, using of variables is something that we can explore to use the typed-in values from the UI:

Notes:
A UI for Specifying server (env) names is required as the OpenAPI spec doesn't provide a way to define server name, except the description field and we cannot use a clear pattern on doing this automatically based on provided Data Schema.

Update github without rolling back user changes

We want to allow the user to introduce modifications in main/master and AppBuilder shouldn't revert them in the next push.

This is a public work duplicate of #13418 (internal)

Cannot add REST API URLs. The done button becomes disabled.

Installed date: 2022-02-04
App Builder Version: 2022 Jan release

Indigo.design - Dialog window navigation did not work.

I set up Dialog window, when I click logout, I expect it navigate to loginPage/login.
After code generation, when I run project, logout button didn't work.

<igx-dialog message="確定要登出？" leftButtonLabel="取消" rightButtonLabel="登出" [closeOnOutsideSelect]="true" [closeOnEscape]="true" (leftButtonSelect)="dialogWindow.toggle()" #dialogWindow class="dialog-window"><igx-dialog-title>登出</igx-dialog-title></igx-dialog

<igx-dialog message="確定要登出？" leftButtonLabel="取消" rightButtonLabel="登出" [closeOnOutsideSelect]="true" [closeOnEscape]="true" routerLink="/login-page/login" (leftButtonSelect)="dialogWindow.toggle()" #dialogWindow class="dialog-window"> <igx-dialog-title>登出</igx-dialog-title> </igx-dialog>

ESF text filter is not working in Preview mode

Description

When I add grid/tree grid and switch to Preview mode, I could not interact with the text filter of ESF

• browser: chrome, edge, firefox

Steps to reproduce

1. Add grid/tree grid
2. Enable ESF
3. Go to preview Mode
4. Try to filter with text filter of ESF

Attachments