diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 0000000..4962ed9 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,92 @@ +# Persona + +You are a senior technical content writer with deep expertise in documenting **low-code, WYSIWYG platforms**, specifically **App Builder**. You understand how users build applications visually using components, layouts, data sources, and AI-assisted tooling. You communicate complex concepts in a practical, concise way that helps developers, designers, and product teams succeed with App Builder. + +Your writing is authoritative, accurate, and aligned with how a modern, design-to-code platform works across **Angular, React, Web Components, and Blazor**. + +## Project Overview + +This repository manages public-facing documentation for **App Builder**, covering every aspect of the platform — visual design, component configuration, data binding, code generation, GitHub/Azure deployment, AI workflows, authentication, extensibility options, and platform-specific nuances (SaaS / On-prem / SDK). + +Documentation should: + +* Help users build apps visually with confidence. +* Explain how UI layout, interactions, styling, and data work within App Builder. +* Clarify how generated code maps to what they see in the designer. +* Enable onboarding for both low-code beginners and professional developers. + +All content must be kept up to date with platform improvements. + +## Documentation Standards + +* Write in **clear, user-oriented language** with correct grammar. +* Use **short sections**, headings, and consistent structure. +* Provide **step-by-step guidance** for UI actions (e.g., “Select the Data Grid → Configure Columns → Bind a Data Source"). +* Prefer **active voice** and concise sentences. +* Introduce App Builder-specific concepts before using them (e.g., “View Container,” “Master-Detail,” “Workspace,” “Preview Mode,” “AI Chat,” “Generated Code”). +* Link to related topics (components, deployment, data sources, tutorials). +* Make content easy to skim and navigate. + +## Topic Guidelines + +* Follow the folder and topic hierarchy already used in this repo. +* Write topics in **Markdown** with required DocFX frontmatter. Follow the markdownlint.json configuration file. +* Titles and summaries must reflect the intent of the topic (e.g., “Bind Data to a Grid,” “Use Quick Add,” “Deploy to GitHub with One Click”). +* Include: + * Prerequisites + * Expected outcomes + * Limitations (if any) + * Framework-specific notes when needed +* Use screenshots that highlight App Builder UI (Designer, Toolbox, Properties panel, Data panel, Preview). +* Ensure that all examples reflect the latest UI and terminology. + +## Writing Best Practices + +* Avoid jargon unless standard in frontend development; explain it when used. +* Use gender-neutral, inclusive phrasing. +* Be specific when referencing App Builder capabilities: + * “Open the **Data** panel and click **Add Data Source**” + * “Use the **Auto-Layout** properties to arrange elements responsively” + * “Apply a Theme” +* When describing features, consider how they appear in the WYSIWYG editor. + +## WYSIWYG and Low-Code Emphasis + +Your documentation should reflect how App Builder is used in practice: + +* Use UI-first explanations (drag-and-drop, property configuration, visual data mapping). +* When code is shown, clarify how App Builder generated it and how it maps back to UI settings. +* Reinforce that App Builder is **framework-agnostic at design time** but produces **framework-specific code**. +* Include examples that illustrate: + + * Binding a REST API + * Configuring interactions + * Adding components from the Toolbox + * Using App Builder AI to generate screens or CRUD flows + * Deploying to GitHub/Azure with 1 click + * Customizing themes and layouts + +## Content Review & Updates + +* All new topics and changes require peer review within the product or documentation team. +* Note major changes in **Release Notes** (New components, New features, AI improvements, UX changes). +* Keep content updated as the platform evolves, especially: + + * UX/UI changes + * Component capabilities + * AI Chat behaviors + * Deployment options + * Framework specific updates (Angular, React, Blazor) + +## Visuals and Media + +* Include **alt text** and captions when helpful. +* Ensure images show the *current* App Builder UI. +* Place images in the appropriate `/images` or `/assets` folder with logical naming. +* Use annotations when they clarify designer interactions (e.g., highlighting the Properties panel). + +## Resources + +* [App Builder Marketing Site](https://www.appbuilder.dev/) +* [App Builder Platform](https://my.appbuilder.dev/) +* [WCAG Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 344a424..41977ab 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -16,7 +16,7 @@ jobs: strategy: matrix: - node-version: [16.x, 18.x] + node-version: [22.x] # Only run linting on one Node version steps: - uses: actions/checkout@v3 @@ -26,4 +26,5 @@ jobs: node-version: ${{ matrix.node-version }} - run: npm ci - run: dotnet tool restore - - run: npm run build \ No newline at end of file + - run: npm run verify + - run: npm run build diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000..7f20458 --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,44 @@ +{ + "default": true, + "MD001": true, + "MD003": { "style": "atx" }, + "MD004": { "style": "dash" }, + "MD007": { "indent": 2 }, + "MD009": { "br_spaces": 2 }, + "MD010": true, + "MD012": { "maximum": 2 }, + "MD013": false, + "MD014": true, + "MD018": true, + "MD019": true, + "MD022": true, + "MD023": true, + "MD024": { "siblings_only": true }, + "MD025": { "front_matter_title": "" }, + "MD026": { "punctuation": ".,;:" }, + "MD027": true, + "MD028": false, + "MD029": { "style": "ordered" }, + "MD030": true, + "MD031": true, + "MD032": true, + "MD033": false, + "MD034": false, + "MD035": { "style": "---" }, + "MD036": false, + "MD037": true, + "MD038": true, + "MD039": true, + "MD040": false, + "MD041": false, + "MD042": true, + "MD043": false, + "MD044": false, + "MD045": true, + "MD046": { "style": "fenced" }, + "MD047": true, + "MD048": { "style": "backtick" }, + "MD049": { "style": "underscore" }, + "MD050": { "style": "asterisk" }, + "MD055": { "style": "leading_and_trailing" } +} \ No newline at end of file diff --git a/.markdownlintignore b/.markdownlintignore new file mode 100644 index 0000000..d12c85d --- /dev/null +++ b/.markdownlintignore @@ -0,0 +1,16 @@ +# Markdownlint ignore file +# Ignore generated site files +_site/ +node_modules/ + +# Ignore specific files that may have intentional formatting +*.nuspec +gulpfile.js +package.json + +# Ignore auto-generated or template files +docfx.json +global.json +environment.json +web.config +toc.yml \ No newline at end of file diff --git a/MARKDOWNLINT_RULES.md b/MARKDOWNLINT_RULES.md new file mode 100644 index 0000000..ac63c61 --- /dev/null +++ b/MARKDOWNLINT_RULES.md @@ -0,0 +1,245 @@ +# Markdown Linting Configuration + +## Overview + +This directory contains markdown linting configuration for the App Builder documentation. + +## Rules Configuration + +The `.markdownlint.json` file configures markdown-lint with rules suitable for technical documentation and DocFX compatibility: + +### Enabled Rules + +- **MD001**: Heading levels should only increment by one level at a time +- **MD003**: Heading style (ATX style with #) +- **MD004**: Unordered list style (dash) +- **MD007**: Unordered list indentation (2 spaces) +- **MD009**: Trailing spaces (allow 2 for line breaks) +- **MD010**: Hard tabs +- **MD012**: Multiple consecutive blank lines (max 2) +- **MD014**: Dollar signs used before commands without showing output +- **MD018**: No space after hash on atx style heading +- **MD019**: Multiple spaces after hash on atx style heading +- **MD022**: Headings should be surrounded by blank lines +- **MD023**: Headings must start at the beginning of the line +- **MD024**: Multiple headings with the same content (allow different nesting) +- **MD025**: Multiple top-level headings in same document (front_matter_title handled) +- **MD026**: Trailing punctuation in heading +- **MD027**: Multiple spaces after blockquote symbol +- **MD029**: Ordered list item prefix (ordered style) +- **MD030**: Spaces after list markers +- **MD031**: Fenced code blocks should be surrounded by blank lines +- **MD032**: Lists should be surrounded by blank lines +- **MD035**: Horizontal rule style (---) +- **MD037**: Spaces inside emphasis markers +- **MD038**: Spaces inside code span elements +- **MD039**: Spaces inside link text +- **MD042**: No empty links +- **MD045**: Images should have alternate text (alt text) +- **MD046**: Code block style (fenced) +- **MD047**: Files should end with a single newline character +- **MD048**: Code fence style (backtick) +- **MD049**: Emphasis style (underscore) +- **MD050**: Strong style (asterisk) +- **MD055**: Table pipe style (leading and trailing) + +### Disabled Rules + +- **MD013**: Line length (disabled - technical docs have long URLs/code examples) +- **MD028**: Blank line inside blockquote (disabled - allows flexible blockquote formatting) +- **MD033**: Inline HTML (disabled - allows HTML tags needed for DocFX) +- **MD034**: Bare URLs (disabled - allows bare URLs as we use many reference links) +- **MD036**: Emphasis used instead of heading (disabled - allows emphasis used as headers for styling) +- **MD040**: Fenced code blocks should have a language specified (disabled - would be noisy) +- **MD041**: First line in a file should be a top-level heading (disabled - not always applicable with frontmatter) +- **MD043**: Required heading structure (disabled - too restrictive) +- **MD044**: Proper names should have the correct capitalization (disabled - would require extensive config) + +## Usage + +### Run linting on all English docs + +```bash +npx markdownlint "en/**/*.md" +``` + +### Run linting on all Japanese docs + +```bash +npx markdownlint "jp/**/*.md" +``` + +### Run linting on specific file + +```bash +npx markdownlint en/getting-started.md +``` + +### Fix auto-fixable issues + +```bash +npx markdownlint --fix "en/**/*.md" +``` + +### Run with custom config + +```bash +npx markdownlint --config .markdownlint.json "en/**/*.md" +``` + +### Use npm scripts + +```bash +# Lint all markdown files +npm run lint:md + +# Lint only English docs +npm run lint:md:en + +# Lint only Japanese docs +npm run lint:md:jp + +# Fix auto-fixable issues (all files) +npm run lint:md:fix + +# Run spell check on English docs only +npm run spellcheck + +# Run spell check on Japanese docs only +npm run spellcheck:jp + +# Run full verification on English docs (spell check + linting) +npm run verify + +# Run full verification on Japanese docs (spell check + linting) +npm run verify:jp +``` + +## Auto-Fix Capabilities + +### Recommended Workflow +```bash +# 1. Auto-fix what's possible +npm run lint:md:fix + +# 2. Check remaining issues +npm run verify + +# 3. Manually fix spelling errors and remaining markdown issues (If needed) +``` + +### What Can Be Auto-Fixed (Markdownlint) + +- Trailing spaces (MD009) +- Missing blank lines around headers, lists, code blocks (MD022, MD031, MD032) +- Inconsistent list markers (MD004) +- Inconsistent heading styles (MD003) +- List indentation (MD007) +- File ending newlines (MD047) +- Header spacing issues (MD018, MD019) +- Some emphasis and code span formatting (MD037, MD038) + +### What Requires Manual Fix + +- **All spelling errors** (cspell has no auto-fix feature) +- Complex markdown structure issues +- Content-related problems +- Heading hierarchy problems (MD001) - need to add intermediate heading levels +- Ordered list numbering (MD029) - may need to indent content to maintain list context +- Multiple top-level headings (MD025) - need to demote additional H1s to H2 +- Code block style (MD046) - need to convert indented blocks to fenced blocks + +## Common Issues and Fixes + +### MD001 - Heading increment + +**Issue**: Jumping from `##` to `####` +**Fix**: Use `###` instead - headings should only increment by one level at a time + +### MD003 - Heading style + +**Issue**: Mixing ATX (`#`) and Setext (underline) heading styles +**Fix**: Use ATX style (`#`, `##`, `###`) consistently + +### MD004 - Unordered list style + +**Issue**: Mixing `-`, `*`, or `+` for list items +**Fix**: Use dash (`-`) consistently for unordered lists + +### MD007 - Unordered list indentation + +**Issue**: Incorrect indentation in nested lists +**Fix**: Use 2 spaces for nested list items + +### MD009 - Trailing spaces + +**Issue**: Unnecessary trailing spaces at end of line +**Fix**: Remove trailing spaces (except when intentional for line breaks with 2 spaces) + +### MD022 - Headings surrounded by blank lines + +**Issue**: No blank line before/after heading +**Fix**: Add blank lines around headings + +### MD025 - Multiple top-level headings + +**Issue**: Multiple `#` headings in same document +**Fix**: Use only one H1 per document (frontmatter title doesn't count) + +### MD029 - Ordered list item prefix + +**Issue**: Inconsistent or incorrect numbering like `1. 2. 4.` or using all `1.` items +**Fix**: Use sequential numbering `1. 2. 3.` for ordered lists + +### MD031 - Code blocks surrounded by blank lines + +**Issue**: No blank line before/after code fence +**Fix**: Add blank lines around code blocks + +### MD046 - Code block style + +**Issue**: Using indented code blocks (4 spaces) instead of fenced blocks +**Fix**: Use fenced code blocks with triple backticks (```) + +### MD047 - File should end with newline + +**Issue**: No newline at end of file +**Fix**: Add single newline at end of file + +### MD013 - Line length (disabled) + +This rule is disabled in `.markdownlint.json` because our documentation often contains long URLs, code samples, and reference content that are not practical to wrap manually. You may still choose to wrap paragraphs for readability, but the linter will not enforce a maximum line length. + +## Integration with CI/CD + +The configuration is integrated with GitHub Actions in `.github/workflows/node.js.yml`: + +```yaml +- run: npm run verify +``` + +npm scripts in `package.json`: + +```json +{ + "scripts": { + "lint:md": "markdownlint \"**/*.md\" --ignore node_modules --ignore _site", + "lint:md:fix": "markdownlint \"**/*.md\" --ignore node_modules --ignore _site --fix", + "spellcheck": "cspell \"en/**/*.md\" \"jp/**/*.md\"", + "verify": "npm run spellcheck && npm run lint:md" + } +} +``` + +## VS Code Integration + +Install the "markdownlint" extension by David Anson for real-time linting in VS Code: + +- Extension ID: `DavidAnson.vscode-markdownlint` +- The `.markdownlint.json` file will be automatically detected + +## Related Tools + +- **cspell**: Spell checking (configured in `cspell.json`) +- **DocFX**: Documentation generation platform +- **GitHub Actions**: CI/CD integration for automated checks diff --git a/README.md b/README.md index b382e85..b27468a 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ To install docfx restore it as a dotnet tool: dotnet tool restore ``` -### Installing the Node.js dependencies: +### Installing the Node.js dependencies If you are using npm, run: diff --git a/cspell.json b/cspell.json new file mode 100644 index 0000000..f9bec5b --- /dev/null +++ b/cspell.json @@ -0,0 +1,356 @@ +{ + "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json", + "version": "0.2", + "language": "en", + "useGitignore": true, + "ignorePaths": [ + "**/bin/**", + "**/obj/**", + "**/node_modules/**", + "**/dist/**", + "**/.git/**", + "**/*.svg", + "**/*.png", + "**/*.jpg", + "_site/**", + "*.min.js", + "*.min.css", + "package-lock.json", + "*.log" + ], + "dictionaries": ["softwareTerms", "typescript", "node", "en_US"], + "enableFiletypes": ["markdown"], + "overrides": [ + { + "filename": "**/*.md", + "caseSensitive": false, + "language": "en", + "ignoreRegExpList": [ + "/https?:\\/\\/[^\\s)]+/", + "/`[^`]*`/", + "/```[\\s\\S]*?```/", + "/~~~[\\s\\S]*?~~~/" + ] + } + ], + "words": [ + "IgniteUI", + "Ignite", + "DocFX", + "Codegen", + "frontends", + "Ecommerce", + "Entra", + "openclose", + "showhide", + "preconfigured", + "SSMS", + "SQLEXPRESS", + "PKCE", + "postlogout", + "LINQ", + "Snackbars", + "Behaviour", + "wireframes", + "asax", + "codegenerate", + "Infragistics", + "infragistics", + "StackBlitz", + "Stackblitz", + "NuGet", + "AppBuilder", + "appbuilder", + "Blazor", + "Angular", + "Figma", + "Sketch", + "GitHub", + "DevOps", + "Azure", + "ApexCharts", + "Northwind", + "PostgreSQL", + "OpenAPI", + "Swagger", + "WebAssembly", + "WASM", + "REST", + "API", + "JSON", + "HTML", + "CSS", + "TypeScript", + "JavaScript", + "React", + "Vue", + "Webpack", + "NodeJS", + "NPM", + "Yarn", + "VSCode", + "macOS", + "Linux", + "Windows", + "Dockerfile", + "Docker", + "Kubernetes", + "YAML", + "XML", + "SVG", + "PNG", + "JPEG", + "GIF", + "WebP", + "PDF", + "ZIP", + "GDPR", + "OAuth", + "JWT", + "HTTPS", + "HTTP", + "URL", + "URI", + "SCSS", + "SASS", + "Sass", + "ESLint", + "Prettier", + "webpack", + "rollup", + "vite", + "parcel", + "babel", + "tsx", + "jsx", + "readonly", + "nullable", + "enum", + "async", + "await", + "typeof", + "instanceof", + "keyof", + "viewport", + "viewports", + "breakpoint", + "responsive", + "mobile", + "desktop", + "tablet", + "iOS", + "Android", + "Safari", + "Chrome", + "Firefox", + "Edge", + "polyfill", + "transpile", + "transpiled", + "bundler", + "minify", + "uglify", + "gzip", + "cdn", + "CDN", + "localhost", + "dev", + "prod", + "staging", + "markdownlint", + "cspell", + "eslint", + "prettier", + "Igx", + "IgxAccordion", + "IgxAction", + "IgxAutocomplete", + "IgxAvatar", + "IgxBadge", + "IgxBanner", + "IgxButton", + "IgxCalendar", + "IgxCard", + "IgxCarousel", + "IgxCheckbox", + "IgxChip", + "IgxCombo", + "IgxDate", + "IgxDialog", + "IgxDivider", + "IgxDock", + "IgxDrop", + "IgxExcel", + "IgxExpansion", + "IgxForOf", + "IgxGrid", + "IgxHierarchicalGrid", + "IgxIcon", + "IgxInput", + "IgxLabel", + "IgxLayout", + "IgxLinear", + "IgxList", + "IgxMask", + "IgxNavbar", + "IgxNavDrawer", + "IgxOverlay", + "IgxPaginator", + "IgxPie", + "IgxQueryBuilder", + "IgxRadio", + "IgxRating", + "IgxRipple", + "IgxSelect", + "IgxSimple", + "IgxSlider", + "IgxSnackbar", + "IgxSparkline", + "IgxSplitter", + "IgxSpreadsheet", + "IgxStepper", + "IgxSwitch", + "IgxTab", + "IgxTabs", + "IgxText", + "IgxTheme", + "IgxTile", + "IgxTime", + "IgxToast", + "IgxToggle", + "IgxTooltip", + "IgxTransaction", + "IgxTree", + "IgxTreeGrid", + "GeoMap", + "OpenStreetMap", + "OSM", + "BingMaps", + "ESRI", + "ArcGIS", + "arcgisonline", + "bingmapsportal", + "basemap", + "Polyline", + "Polylines", + "Polygons", + "PolylineShape", + "PolylineSeries", + "PolylineFragment", + "PolylineStyle", + "PolylineObjects", + "PolylinePaths", + "shapefile", + "shapefiles", + "Shapefile", + "Shapefiles", + "workbooks", + "workbook", + "workheets", + "workitems", + "workitem", + "workgroup", + "ColorScale", + "NavDrawer", + "datepicker", + "autocomplete", + "materialicons", + "webfont", + "Treemap", + "backcolor", + "gridlines", + "trendlines", + "crosshairs", + "tickmarks", + "flexbox", + "WCAG", + "ZHHANS", + "ZHHANT", + "Consolas", + "codesandbox", + "treeshaken", + "Configurator", + "configurator", + "Autosizing", + "groupable", + "groupby", + "hgrid", + "childdatakey", + "primaryforeignkey", + "noscroll", + "zoomable", + "lazyload", + "fontset", + "Tabbar", + "tabbar", + "monthpicker", + "timepicker", + "zoomslider", + "sparkline", + "sparklines", + "Sparkline", + "changei18n", + "Titillium", + "finjs", + "trendline", + "Treemaps", + "treemaps", + "OHLC", + "toggleable", + "templatable", + "fintech", + "daterangepicker", + "DateRangePicker", + "ungroup", + "ungroups", + "ungrouping", + "lastname", + "firstname", + "interactable", + "gifs", + "Gantt", + "gantt", + "virtualizes", + "retemplate", + "retemplated", + "Geospatial", + "COUNTIF", + "SUMIF", + "AVERAGEIF", + "Contentful", + "wrappanel", + "stackpanel", + "Squarified", + "squarified", + "ngswitch", + "ngSwitch", + "navigations", + "Grayscale", + "Zoombar", + "webcomponents", + "unfocusable", + "unclickable", + "toolsets", + "SignalR", + "signalr", + "retheming", + "multiview", + "gridline", + "choropleth", + "Bollinger", + "artboard", + "antumbra", + "NOAA", + "coalescences", + "Lambo", + "valuekey", + "CSISS", + "NORTAD", + "Cruzin", + "INPC", + "batchediting", + "updateparameters", + "alldata", + "ja" + ] +} \ No newline at end of file diff --git a/en/ai/getting-started.md b/en/ai/getting-started.md index d76c879..80d8c18 100644 --- a/en/ai/getting-started.md +++ b/en/ai/getting-started.md @@ -5,22 +5,26 @@ _keywords: App Builder AI, Infragistics, Ignite UI --- # Getting Started with App Builder AI + This guide covers the newly introduced AI-powered content generation in App Builder. AI capabilities are currently available only as a **Preview** and are not yet with a finalized design. These AI features are still being polished and are intended for gathering feedback. As such, they may not be fully refined and may evolve based on user input. You can access the **Preview** functionalities here: https://preview.appbuilder.dev/ ## View Generation + The generative AI-powered view generation in App Builder provides a powerful alternative to traditional layout pickers. By leveraging free-text user prompts and multiple prompt patterns, users can generate highly customized views that are automatically transformed into fully functional applications. This approach not only accelerates the creation of App Views but also simplifies UI design, making interface generation accessible to users with varying levels of technical expertise.

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
-

- Vehicle Selection -

- - - Toyota - - - Honda - - - Ford - - - Select your car's make - - - - Corolla - - - Civic - - - Mustang - - - Select your car's model - +

+ Vehicle Selection +

+ + + Toyota + + + Honda + + + Ford + + + Select your car's make + + + + Corolla + + + Civic + + + Mustang + + + Select your car's model + ``` And here is the App Preview: @@ -150,23 +155,24 @@ And here is the App Preview: > Consider these patterns as recommendations; you can always use regular prompt descriptions phrasing. #### Pattern 1: Combined Layout and Component Prompts + For more structured outputs that combine layout and detailed component configurations, users can specify an overall screen design with multiple sections. For instance: ``` A login screen with: row layout - col layout - title: Login - text: Please enter your email and password to sign in - form: - input: email - input: password - switch: remember me - button: login - row layout - text: Don't have an account? - link: sign up - image + col layout + title: Login + text: Please enter your email and password to sign in + form: + input: email + input: password + switch: remember me + button: login + row layout + text: Don't have an account? + link: sign up + image ``` Result: @@ -174,7 +180,7 @@ Result:

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..d127fc0 100644 --- a/en/app-themes/app-themes.md +++ b/en/app-themes/app-themes.md @@ -6,24 +6,24 @@ _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 +## App Builder themes > [!Video https://www.youtube.com/embed/gcTyeFp_65c?si=w-3ycuuDZ4whrEZc&list=UULF8cj8_eJROxAXsOjhbvduLw] 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-Indigo-Design-App-Builder](../images/switching-between-themes-Indigo-Design-App-Builder.gif)

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-Indigo-Design-App-Builder](../images/switching-between-themes-Indigo-Design-App-Builder.gif)

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-appearance-Indigo-Design-App-Builder](../images/change-appearance-Indigo-Design-App-Builder.gif)

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..0867457 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 `.` for consistency between parser dll and symbol. `` will be ignored and won't throw an error if the symbol version is higher than the parser version (#13942) ### MAINTENANCE UPDATES & BUG FIXES + **Including, but not limited to:** + - Workspace title not updated - Create new workspace cancel shows invalid state - About dialog/Header/Account dialog improvements @@ -426,13 +522,16 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Dialog window navigation did not work ([GitHub issue](https://github.com/IgniteUI/app-builder/issues/7)) ## December 2021 Release + ### Features + - Design and generate your app for Blazor (beta) - Install App Builder as a desktop app on Windows, macOS, and Linux - Added Indigo.Design UI kit for Adobe XD - Create an app from designs using our new Adobe XD plugin ### Improvements + - Updated the App Builder menu to manage your apps and group workspaces - Added support for Nested collection inside a response object - Added Export to Excel feature to Data-Grid component @@ -440,172 +539,193 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k - Sketch Plugin Updates, improved theming and "Create new app from Sketch" story ## October 2021 Release + ### Features - - **Upload your images** to Assets library and share it across all apps in the same Workspace - - **Download uploaded images** used in the app when you publish or download app source code - - **Create app** directly from Sketch plugin + +- **Upload your images** to Assets library and share it across all apps in the same Workspace +- **Download uploaded images** used in the app when you publish or download app source code +- **Create app** directly from Sketch plugin ### Improvements - - **Include REST endpoint URL** in the generated app instead of hard-coded JSON data - - **Extract images** available in your Sketch file and add it to Workspace assets library - - Added context menu for **Document outline** elements - - Show outermost container (View) as the root-level element in the **Document outline** - - Added tooltip explanations for **Image fit** and **Layout position** options + +- **Include REST endpoint URL** in the generated app instead of hard-coded JSON data +- **Extract images** available in your Sketch file and add it to Workspace assets library +- Added context menu for **Document outline** elements +- Show outermost container (View) as the root-level element in the **Document outline** +- Added tooltip explanations for **Image fit** and **Layout position** options ### MAINTENANCE UPDATES & BUG FIXES - - General bug fixes and maintenance updates + +- General bug fixes and maintenance updates ## September 2021 Release ### Features - - Added more features to the **Grid** component part of the toolbox. - - 10+ new features including Sorting, Filtering, Cell/Row editing, Paging, Selection, GroupBy and more. - - Added **Snackbar** to the component toolbox. - - Onboarding experience improvements: - - Quick tips - The quick-tips feature aims to gradually educate users about the concepts and accelerators available. The quick-tips are triggered when the user completes a certain action in the App Builder, like resize a component or add a new child view. - - The sample apps show new visual thumbs with descriptions. + +- Added more features to the **Grid** component part of the toolbox. +- 10+ new features including Sorting, Filtering, Cell/Row editing, Paging, Selection, GroupBy and more. +- Added **Snackbar** to the component toolbox. +- Onboarding experience improvements: +- Quick tips - The quick-tips feature aims to gradually educate users about the concepts and accelerators available. The quick-tips are triggered when the user completes a certain action in the App Builder, like resize a component or add a new child view. +- The sample apps show new visual thumbs with descriptions. - GitHub Actions Integration - GitHub Publish now adds a workflow doing a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node. ### Improvements - - Reduced loading time on app download an Publish to GitHub - - "Generate app" button is now "Publish to GitHub". - - "Create new app" Dialog is now with two sizes. One for larger displays, and one for smaller displays. New section to get assets for Sketch or XD. - - All sample apps are with updated meaningful thumbnails representing actual screenshots and with a brief text description of the app upon hover. - - Improved loading of theming when uploading .sketch file for app generation. - - Adobe XD files support (will be available when the Adobe XD Plugin is ready). +- Reduced loading time on app download an Publish to GitHub +- "Generate app" button is now "Publish to GitHub". +- "Create new app" Dialog is now with two sizes. One for larger displays, and one for smaller displays. New section to get assets for Sketch or XD. +- All sample apps are with updated meaningful thumbnails representing actual screenshots and with a brief text description of the app upon hover. +- Improved loading of theming when uploading .sketch file for app generation. +- Adobe XD files support (will be available when the Adobe XD Plugin is ready). ### MAINTENANCE UPDATES & BUG FIXES - - Improved load times for apps and general performance tweaks when using the app builder. - - General bug fixes. - - Fixed errors with data repeated elements. - - Data source list population fix for bindable elements. +- Improved load times for apps and general performance tweaks when using the app builder. +- General bug fixes. +- Fixed errors with data repeated elements. +- Data source list population fix for bindable elements. [LEARN MORE](https://www.infragistics.com/community/blogs/b/infragistics/posts/indigo-design-app-builder-september-release) ## July 12, 2021 Release ### Features -* **GitHub Integration**: Publish your generated app to a GitHub repository instead of downloading as a ZIP -* Added “SLIDER” to the component toolbox -* Added “BANNER” to the component toolbox -* Added two new sample apps as reference in “Create new app” dialog -* Added Korean language translation + +- **GitHub Integration**: Publish your generated app to a GitHub repository instead of downloading as a ZIP +- Added “SLIDER” to the component toolbox +- Added “BANNER” to the component toolbox +- Added two new sample apps as reference in “Create new app” dialog +- Added Korean language translation ### Improvements -* When previewing an app, switch between "master" and "child views" using a dropdown in the toolbar -* Ability to reorder components in the document outline or design surface using drag & drop -* Ability to reorder “master” and “child views” in the views tab of the toolbox using drag & drop -* Updated “Radio” component to “Radio-group” -* Updated “Tab Layout” to allow custom content inside “Tab header” -* Improved icons for "align-content" dropdown when wrapping is enabled in Flex layouts -* Apps are generated using Ignite UI Angular v12.0.1 instead of v11.1.15 + +- When previewing an app, switch between "master" and "child views" using a dropdown in the toolbar +- Ability to reorder components in the document outline or design surface using drag & drop +- Ability to reorder “master” and “child views” in the views tab of the toolbox using drag & drop +- Updated “Radio” component to “Radio-group” +- Updated “Tab Layout” to allow custom content inside “Tab header” +- Improved icons for "align-content" dropdown when wrapping is enabled in Flex layouts +- Apps are generated using Ignite UI Angular v12.0.1 instead of v11.1.15 ### Maintenance updates & bug fixes -* Improved load times and performance tweaks when using the App Builder UI -* General bug fixes + +- Improved load times and performance tweaks when using the App Builder UI +- General bug fixes ## Official Release ### General -* Cloud integration and team collaboration - accessing the App Builder can be done through the App tab in Indigo.Design cloud, where users will find their active application projects. From there, users are enabled to start a new app or to preview, rename, archive or duplicate an existing one -* Using a Sketch file as a starting point for a new application in the App Builder - now, users are enabled to start a new application from an existing Sketch file by uploading it in the App Builder. + +- Cloud integration and team collaboration - accessing the App Builder can be done through the App tab in Indigo.Design cloud, where users will find their active application projects. From there, users are enabled to start a new app or to preview, rename, archive or duplicate an existing one +- Using a Sketch file as a starting point for a new application in the App Builder - now, users are enabled to start a new application from an existing Sketch file by uploading it in the App Builder. ### UI components -* Dialog -* Combo -* Tabs layout -* Expansion panel -* Date time editor (as an input type) -* Button group -* Text area -* Hyperlink + +- Dialog +- Combo +- Tabs layout +- Expansion panel +- Date time editor (as an input type) +- Button group +- Text area +- Hyperlink ### Interactions -* Open/Close - "Open/Close" interaction enables users create interactions using overlay components, such as a dialog component. -* 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. + +- Open/Close - "Open/Close" interaction enables users create interactions using overlay components, such as a dialog component. +- 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. ### Using Data in the App Builder -* Data sources - enables users to upload their own JSON file or provide a Rest API URL with the data source. The added data source can be used also in the repeaters to connect components to actual data source fields. + +- Data sources - enables users to upload their own JSON file or provide a Rest API URL with the data source. The added data source can be used also in the repeaters to connect components to actual data source fields. ### Code Generation -* General improvements and bug fixes + +- General improvements and bug fixes ## Public Release ### General -* Option to set min and max width and height for layouts -* More components and layouts size units - the newly added units are auto min, auto max, px, rem, vh, vw, %. -* New layout position options - the newly added positioning options are relative, absolute, fixed, sticky and overflow, which can be applied to components and layouts. -* Quick add shortcut for components through Ctrl/Cmd + E​ -* Error handling service​ improvements -* Quick app preview on various devices​ - when previewing an app project, users can quickly preview it on various viewports through the device icons in the top bar. -* Appearance and border options for components​ -* Initial concurrency version is implemented​ -* Sample apps library extended - the components in this release were used to enrich the existing sample apps. + +- Option to set min and max width and height for layouts +- More components and layouts size units - the newly added units are auto min, auto max, px, rem, vh, vw, %. +- New layout position options - the newly added positioning options are relative, absolute, fixed, sticky and overflow, which can be applied to components and layouts. +- Quick add shortcut for components through Ctrl/Cmd + E​ +- Error handling service​ improvements +- Quick app preview on various devices​ - when previewing an app project, users can quickly preview it on various viewports through the device icons in the top bar. +- Appearance and border options for components​ +- Initial concurrency version is implemented​ +- Sample apps library extended - the components in this release were used to enrich the existing sample apps. ### UI components -* Dropdown -* Select -* Chip -* Navigation drawer -* Navigation bar​ + +- Dropdown +- Select +- Chip +- Navigation drawer +- Navigation bar​ ### Using Data in the App Builder -* Repeaters feature - enables users to connect a component to a data source field. -* Binding to a mock data - enables users to try the data binding and repeaters with data features using a mockup Northwind data. + +- Repeaters feature - enables users to connect a component to a data source field. +- Binding to a mock data - enables users to try the data binding and repeaters with data features using a mockup Northwind data. ### Code Generation -* General improvements and bug fixes + +- General improvements and bug fixes ## Private Release ### General -* Interactive flows - the interactive flows feature has been extended with master and child views routing. -* Preset layouts - 4 predefined layouts for quick start of a new design have been added. -* Library of sample apps - 3 predefined sample apps have been added which users can use as a starting point to speed up the design process or quickly learn how Ignite UI App Builder works -* General improvements and bug fixes -* Visual improvements and user experience enhancement -### Themeing Service -* Theme presets - 6 predefined themes have been added for dark and light versions of Material, Bootstrap and Fluent. -* Adding new custom themes feature - users are enabled to create custom themes aligned with the brand assets and design system of their company. +- Interactive flows - the interactive flows feature has been extended with master and child views routing. +- Preset layouts - 4 predefined layouts for quick start of a new design have been added. +- Library of sample apps - 3 predefined sample apps have been added which users can use as a starting point to speed up the design process or quickly learn how Ignite UI App Builder works +- General improvements and bug fixes +- Visual improvements and user experience enhancement + +### Theming Service + +- Theme presets - 6 predefined themes have been added for dark and light versions of Material, Bootstrap and Fluent. +- Adding new custom themes feature - users are enabled to create custom themes aligned with the brand assets and design system of their company. ### UI components -* Absolute Layout -* Row Layout -* Column Layout -* Card -* Views Container -* Avatar -* Calendar -* Icon -* Image -* Text -* Title -* Button -* Checkbox -* Date picker -* Floating Action Button -* Icon Button -* Input Group -* Radio -* Switch -* Grid -* Badge + +- Absolute Layout +- Row Layout +- Column Layout +- Card +- Views Container +- Avatar +- Calendar +- Icon +- Image +- Text +- Title +- Button +- Checkbox +- Date picker +- Floating Action Button +- Icon Button +- Input Group +- Radio +- Switch +- Grid +- Badge ### Code Generation -* General improvements and bug fixes + +- General improvements and bug fixes ## Additional Resources
-* [Getting Started](getting-started.md) -* [App Builder Components](indigo-design-app-builder-components.md) -* [Interactions](interactions.md) -* [Using data in the App Builder](using-data-in-your-app.md) +- [Getting Started](getting-started.md) +- [App Builder Components](indigo-design-app-builder-components.md) +- [Interactions](interactions.md) +- [Using data in the App Builder](using-data-in-your-app.md) diff --git a/en/design-to-code-story.md b/en/design-to-code-story.md index 81470bb..827673b 100644 --- a/en/design-to-code-story.md +++ b/en/design-to-code-story.md @@ -17,6 +17,7 @@ App Builder enables you to go from Design to Code in a single click. First, crea ## Indigo.Design System The [Indigo.Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit) uniquely combines UI Kits that map to real UI controls and components, with tooling that delivers unprecedented productivity helping digital product teams go from pixel-perfect design to production-ready code. Anything you design can be turned into real, usable code, simplifying the designer-developer handoff. + ### What is a Design System? Design systems are usually described as a set of design principles and assets that translate to consistency in the way you build user interfaces. The three core advantages of using a design system are: @@ -26,7 +27,9 @@ Design systems are usually described as a set of design principles and assets th - Speeds up the design process and significantly improves consistency. ### Turn Your Designs into Code + Use file import or your favorite design tool. + #### File import Below are the 4 simple steps to get from Design to Code with the App Builder with simple drag & drop. @@ -54,6 +57,7 @@ Below are the 4 simple steps to get from Design to Code with the App Builder wit #### Publish via Plugin The plugin will help you to publish your designs into App Builder. You can download it by following these steps: + 1. Open App Builder 2. Click on "Create new application" 3. Click on "Get assets for..." @@ -73,15 +77,16 @@ Now you can start using the plugin. You can download the Plugins, UI kits 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/1170035114372031474) +- [Plugin for Figma](https://www.figma.com/community/plugin/1170035114372031474) - [Sample Apps](https://download.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps_Figma.zip) - [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) - + ## Additional Resources
-* [Figma UI Kit](ui-kits/figma.md) -* [Sketch UI kit](ui-kits/sketch.md) +- [Figma UI Kit](ui-kits/figma.md) +- [Sketch UI kit](ui-kits/sketch.md) diff --git a/en/flex-layouts/flex-layouts.md b/en/flex-layouts/flex-layouts.md index e606605..11a1e25 100644 --- a/en/flex-layouts/flex-layouts.md +++ b/en/flex-layouts/flex-layouts.md @@ -4,28 +4,32 @@ _description: Learn how to use Flex layouts to create and edit app layouts in Ap _keywords: App builder flex layouts, Indigo Design, Infragistics --- -# Flex layouts (and positioning) -### What is Flex layout? +# Flex layouts (and positioning) + +## What is Flex layout? + Flex layout is used for component positioning, space distribution between items, and resizing. It provides powerful alignment capabilities, lays out elements in either columns or rows, and helps you build responsive page layouts that easily adapt to any screen size. -### How to use Flex layout? +## How to use Flex layout? + In essence, the Flex layout is designed to enable developers to easily specify the sizing of a layout container, define visibilities and viewport sizes, and respectively shrink or expand items in order to best fit into the available space. In order to achieve all of this, the first thing you have to do when using Flex layout is to target the container or parent element and adjust the CSS of your container elements. -### How to create Flex layouts in App Builder? -In order to use the Flex layout in the App Builder, you need to define a container (which in the video is referred to as canvas). Note that it has its display property automatically set to Flex. Go to Views, add new container, choose Flex layout row or Flex layout column. +## How to create Flex layouts in App Builder? -You can now choose from different Flex layout properties to define alignment, default behavior for how flex items are laid, set other values, and more. +In order to use the Flex layout in the App Builder, you need to define a container (which in the video is referred to as canvas). Note that it has its display property automatically set to Flex. Go to Views, add new container, choose Flex layout row or Flex layout column. + +You can now choose from different Flex layout properties to define alignment, default behavior for how flex items are laid, set other values, and more. > [!Video https://www.youtube.com/embed/BRkaSYr7qHU?si=74eY9-rqm90A8kmh&list=UULF8cj8_eJROxAXsOjhbvduLw] -One of the greatest differences between the App Builder and the regular product design tools are the flex-based layouts used in the design-to-code tool. Since the App Builder is targeting web apps, we are offering Flex as one of the approaches to create layouts. It's available to you as a row or column layout component in the toolbox. The outermost container you see here is the canvas and has flex settings already applied to it. You can change the canvas size by editing the viewport size in the properties panel. +One of the greatest differences between the App Builder and the regular product design tools are the flex-based layouts used in the design-to-code tool. Since the App Builder is targeting web apps, we are offering Flex as one of the approaches to create layouts. It's available to you as a row or column layout component in the toolbox. The outermost container you see here is the canvas and has flex settings already applied to it. You can change the canvas size by editing the viewport size in the properties panel. ![edit-create-canvas-size-Indigo-Design-App-Builder](../images/edit-create-canvas-size-Indigo-Design-App-Builder.gif)

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-Indigo-Design-App-Builder](../images/select-parent-Indigo-Design-App-Builder.gif)

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-Indigo-Design-App-Builder](../images/grow-column-row-layout-Indigo-Design-App-Builder.gif)

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/azure-integration.md b/en/generate-app/azure-integration.md index 219af5c..f1fbc96 100644 --- a/en/generate-app/azure-integration.md +++ b/en/generate-app/azure-integration.md @@ -61,7 +61,7 @@ Soon, you’ll be able to deploy your app to **Azure Web Apps** directly from Ap - Will support both **standard** and **static web apps** - Simplifies deployment for customer demos and staging environments -# How Microsoft Account Types Impact Authentication +## How Microsoft Account Types Impact Authentication When connecting Azure DevOps to App Builder, authentication is handled via Microsoft Entra ID (formerly Azure Active Directory). Account type directly impacts the success of this connection. 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.
@@ -30,7 +30,8 @@ The design and development user story will be completed once the application is ## Licensed code export ### Licensed user -If you are a **licensed user** then the licensed packages 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_. + +If you are a **licensed user** then the licensed packages 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_. When the application is published to GitHub we add a CI that will build your project and run basic tests. We also publish NPM_AUTH_TOKEN that is required from the GitHub CI, in order to be able to use the licensed package. @@ -38,6 +39,7 @@ When the application is published to GitHub we add a CI that will build your pro

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..d95f537 100644 --- a/en/generate-app/run-application-locally.md +++ b/en/generate-app/run-application-locally.md @@ -5,27 +5,28 @@ _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. +## 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.
+- Then in the console, type `npm install` to install the dependencies. It may take a while to install all the necessary packages. +- Once that is done, type `npm start` to compile and launch the app.
-* Make sure you have Node.js installed.
-* Then in the console, type `npm install` to install the dependencies. It may take a while to install all the necessary packages. -* Once that is done, type `npm start` to compile and launch the app.
- > [!NOTE] >The application files can be downloaded as a package and then run in your preferred IDE.

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..41e201e 100644 --- a/en/generate-app/upload-application-to-github.md +++ b/en/generate-app/upload-application-to-github.md @@ -6,17 +6,19 @@ _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 -### In this article: -* Introduction of the feature -* Uploading an application to GitHub +- 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 +41,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 +66,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 th

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. - +

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..15bc8af 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 @@ -24,15 +24,15 @@ Consider a scenario where you have a collection of movies and wish to display de

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: @@ -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 can

Data 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. ![basic-structure](../images/how-to/basic-structure.png) -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.
## **Step 1:** Create the base layout -- Create a **New app** using a **Blank** template. +- Create a **New app** using a **Blank** template. - From the Components Toolbox, add a **Row layout** to the canvas and enable `Resize: Grow`. - Set **Appearance** for the **Row layout**: - `Padding: 24px` - `Gap: 24px` - `Bg.Fill: Gray-200` -- Inside the **Row layout**, add a **column layout**, enable `Resize: Grow`, and set`Gap: 24px`. +- Inside the **Row layout**, add a **column layout**, enable `Resize: Grow`, and set`Gap: 24px`. - Inside the column, add two **row layouts**, and set both to `Resize:Grow`and `Bg. Fill: White`.
@@ -35,7 +36,7 @@ This tutorial will show you how to use the Layout properties in App Builder to a - Copy the **column layout** containing the child rows, and paste twice to create a **3-column layout**. - To help identify each **row layout** easily: - - Add inside each one a **Title** component and give them a number, in the same order as the picture shown below. + - Add inside each one a **Title** component and give them a number, in the same order as the picture shown below. - Select all 6 **row layouts** with multiple-selection (shift + click) and change the alignment by setting `V.Align: center` and `H.Align: center`.
@@ -45,7 +46,7 @@ This tutorial will show you how to use the Layout properties in App Builder to a ## **Step 3:** Preparing for stacking -- Select the parent **row layout** that contains those 3 **column layouts** and set `Wrapping: wrap`. +- Select the parent **row layout** that contains those 3 **column layouts** and set `Wrapping: wrap`. - In the dropdown below, change the content alignment to `stretch`.
@@ -58,7 +59,7 @@ This tutorial will show you how to use the Layout properties in App Builder to a In order for the stacking to happen, the three **Column layouts** inside that **Row layout** need to have minimum widths set. When previewing the app, as the Browser width is reduced, each column will shrink till they reach that min-width. When this happens, the child layouts will **stack** as a result of setting `Wrapping: wrap`. - To achieve this, select the three columns and set `Min. W: 280px` for each. -- **Preview** your application to see how the columns stack vertically when you resize the browser. +- **Preview** your application to see how the columns stack vertically when you resize the browser. - You can also use the Breakpoint selector to switch to smaller devices. - Click on **Edit** to continue editing your app.
@@ -69,9 +70,9 @@ In order for the stacking to happen, the three **Column layouts** inside that ** ## **Step 5:** Let’s take this one step further! -Finally, I would also like the first column to be wider than the other two. So what I need to do is change its Resize settings. +Finally, I would also like the first column to be wider than the other two. So what I need to do is change its Resize settings. -- Select the first column and on the layout properties, click on the `edit` button next to `Grow` and `Shrink`, and set the `flex-grow:2`. +- Select the first column and on the layout properties, click on the `edit` button next to `Grow` and `Shrink`, and set the `flex-grow:2`. This will make the first column to take twice as much available space (horizontally) than the other 2.
@@ -89,9 +90,9 @@ You can also check out the [live app here](https://my.appbuilder.dev/app/ihyry6j
-* [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](
-## Quick add components +## 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**. -![quick-add-Indigo-Design-App-Builde](./images/quick-add-Indigo-Design-App-Builder.gif) +![quick-add-Indigo-Design-App-Builder](./images/quick-add-Indigo-Design-App-Builder.gif)

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-presets-Indigo-Design-App-Builder](./images/component-presets-Indigo-Design-App-Builder.gif)

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-on-off-properties-Indigo-Design-App-Builder](./images/turn-on-off-properties-Indigo-Design-App-Builder.gif)

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..afb3391 100644 --- a/en/interactions.md +++ b/en/interactions.md @@ -8,14 +8,13 @@ _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 -* Interaction: Open/Close -* Interaction: Show/Hide -* Additional Resources +- Introduction of the feature +- Interaction: Navigate to +- Interaction: Open/Close +- Interaction: Show/Hide +- Additional Resources
@@ -28,11 +27,13 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
## Intro + App Builder enables its users not only to design application layouts and screens, but also to define the application interaction design. Interactions can be set up between components and views or just between components. Through this feature particular application scenarios, such as showing and hiding a calendar component triggered upon click on a button component, can be established. This will help users build great UX flows according to the needs of their customers. All added interactions will be available not only in Preview mode, but also in the application code after generating it. In order to add an interaction, first select the component that will trigger the action, then go to the Property panel in the right side of the Ignite UI App Builder interface and scroll down to the Interactions. Then, select the + icon button to create a new interaction. Upon this, a new interaction will be created below where first has to be picked up the interaction type, then the target component or view. No more than one interaction can be added to a component. Created interactions can be tested on Preview Mode, as well as deleted or edited from the Interactions panel. Check below detailed description about how to use each one of the interactions. ## Navigate to -"Navigate to" is the most straight-forward and basic interaction which allows users to set up a connection from a component navigating to selected by the user child or master view. Simply pick up a component, create an interaction for it and pick up the destination view. Note that during design time, no visual changes will be introduced to the components or views with an interaction. + +"Navigate to" is the most straight-forward and basic interaction which allows users to set up a connection from a component navigating to selected by the user child or master view. Simply pick up a component, create an interaction for it and pick up the destination view. Note that during design time, no visual changes will be introduced to the components or views with an interaction. ![navigate-to-interaction](./images/navigate-to-interaction.gif)

"Navigate to" interaction

@@ -40,15 +41,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](./images/open-close-interaction.gif)

"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. ![show-hide-interaction](./images/show-hide-interaction.gif) @@ -62,11 +65,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..eebc27e 100644 --- a/en/master-detail/step-by-step-examples.md +++ b/en/master-detail/step-by-step-examples.md @@ -12,57 +12,59 @@ 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

+ +

Selection Changed event

- -

CustomerID Variable

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Bind Chart to Customer Orders History table

-7. Result +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 f9488d7..82398a7 100644 --- a/en/on-prem-prerequisites-and-installation.md +++ b/en/on-prem-prerequisites-and-installation.md @@ -11,24 +11,26 @@ _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) - > 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 +66,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 +98,7 @@ docker images docker run --restart always -p 80:5000 -e "ConnectionStrings:AppBuilderMySqlConnection=server=;database=;user=;password=;oldguids=false" -v :/appbuilder/logs -v :/appbuilder/storage --name appbuilder appbuilder:1.0 ``` -- **MySQL example** - This would be the command assuming your MySql instance is running a schema named IndigoAppBuilderOnPrem on 192.168.2.5 with username=appbuilder and password=appbuilder and that you have selected C:/AppBuilder as the external folder to store the logs and storage. +- **MySQL example** - This would be the command assuming your MySql instance is running a schema named IndigoAppBuilderOnPrem on 192.168.2.5 with username=appbuilder and password=appbuilder and that you have selected C:/AppBuilder as the external folder to store the logs and storage. ``` docker run --restart always -p 80:5000 -e "ConnectionStrings:AppBuilderMySqlConnection=server=192.168.2.5;database=IndigoAppBuilderOnPrem;user=appbuilder;password=appbuilder;oldguids=false" -v C:/AppBuilder/logs:/appbuilder/logs -v C:/AppBuilder/storage:/appbuilder/storage --name appbuilder appbuilder:1.0 @@ -109,7 +112,7 @@ docker run --restart always -p 80:5000 -e "ConnectionStrings:Provider=SqlServer" 6 - Open your browser and type `http://localhost/` -> Note: If you are using Docker Desktop, go to Containers/Apps, find your container and click `Open in browser` +> Note: If you are using Docker Desktop, go to Containers/Apps, find your container and click `Open in browser`

Docker Containers/Apps

@@ -133,7 +136,7 @@ docker images | --------: | --------- | ----------------- | ------------- |----- | | appbuilder | 1.0 | 27ff4c1079ac | 43 hours ago |932MB | | | | 2a05977e039b | 12 days ago |854MB | - + 3 - Stop the container ``` @@ -150,6 +153,7 @@ docker rm appbuilder ## Activation + This section assumes that you already installed the On-premises instance and it is now up and running. When the server is first started, a prompt dialog will provide you with _Installation ID_ and a _Authentication key_ will be requested. Send this _Installation ID_ to our [Sales department](https://www.infragistics.com/about-us/contact-us#sales) based on your region and we will provide you with _Authentication key_ to activate the server. @@ -161,20 +165,23 @@ When the server is first started, a prompt dialog will provide you with _Install > Note: You will receive a warning message directly through the UI thirty days before your key expires. ## Troubleshooting + ### Docker Desktop on Windows + Docker Desktop on Windows is not starting automatically without Login to Windows machine [Docker Desktop on Windows](https://github.com/docker/for-win/issues/6670) - Docker team doesn't recommend Docker Desktop for production workloads. You should use Docker on a Linux box or Docker for Windows Server if you want Windows containers. ## Additional Resources +
-* [On-Prem Authentication with OpenID Connect](on-premises/auth-with-openid-connect-o-auth.md) -* [App Builder Deployment Configuration Flags](on-premises/configuration-flags.md) -* [External Resources Whitelisting](on-premises/external-references-for-whitelisting.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) -* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) +- [On-Prem Authentication with OpenID Connect](on-premises/auth-with-openid-connect-o-auth.md) +- [App Builder Deployment Configuration Flags](on-premises/configuration-flags.md) +- [External Resources Whitelisting](on-premises/external-references-for-whitelisting.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) +- [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started) diff --git a/en/on-premises/auth-with-openid-connect-o-auth.md b/en/on-premises/auth-with-openid-connect-o-auth.md index eb553ae..95d2110 100644 --- a/en/on-premises/auth-with-openid-connect-o-auth.md +++ b/en/on-premises/auth-with-openid-connect-o-auth.md @@ -23,12 +23,14 @@ The guide includes: ## Settings for App Builder ### Required configuration settings + - AuthSettings__SkipAuth: false - AuthSettings__Authority: _OpenId server URL_ - AuthSettings__ClientId: _OpenId Client Id_ - AuthSettings__AccountIssuer: _Server Unique Alias_ ### Other options + - oidc_scope: 'openid email offline_access profile appbuilder.user' (default) - oidc_redirect_uri: '/oidc/ig/callback', (default) - oidc_post_logout_redirect_uri: /oidc/ig/callback-postlogout' (default) @@ -40,16 +42,18 @@ The guide includes: After setting up your OIDC client you’ll need to pass 3 required properties to App Builder docker container as environment variables: e.g. + ```sh docker run --restart always -p 80:5000 -e ConnectionStrings__Provider=SqlServer -e "ConnectionStrings:...." -e AuthSettings__SkipAuth=false -e AuthSettings__Authority="https://my-auth-server.example.com" -e AuthSettings__ClientId="1234-4657-00" -e AuthSettings__AccountIssuer="MyAuth" -v "C:\ProgramData\Infragistics\Appbuilder\logs:/appbuilder/logs" -v "C:\ProgramData\Infragistics\Appbuilder\storage:/appbuilder/storage" --name appbuilder appbuilder:1.0 ``` ## Additional Resources +
-* [On-prem Prerequisites and Installation Overview](../on-prem-prerequisites-and-installation.md) -* [App Builder Deployment Configuration Flags](configuration-flags.md) -* [External Resources Whitelisting](external-references-for-whitelisting.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) \ No newline at end of file +- [On-prem Prerequisites and Installation Overview](../on-prem-prerequisites-and-installation.md) +- [App Builder Deployment Configuration Flags](configuration-flags.md) +- [External Resources Whitelisting](external-references-for-whitelisting.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/on-premises/configuration-flags.md b/en/on-premises/configuration-flags.md index bbdeae4..a1c55e8 100644 --- a/en/on-premises/configuration-flags.md +++ b/en/on-premises/configuration-flags.md @@ -80,7 +80,7 @@ shellTheme: { }, } ``` - + ### Through a parameter in a docker run command (On-prem context) ```sh @@ -88,9 +88,10 @@ docker run --restart always -p 80:5000 -e AuthSettings__ClientId="1234-4657-00" ``` ## Additional Resources +
-* [Auth with openid connect](auth-with-openid-connect-o-auth.md) -* [External Resources Whitelisting](external-references-for-whitelisting.md) -* [On-prem Prerequisites and Installation Overview](../on-prem-prerequisites-and-installation.md) -* [App Builder Interface Overview](../interface-overview.md) \ No newline at end of file +- [Auth with openid connect](auth-with-openid-connect-o-auth.md) +- [External Resources Whitelisting](external-references-for-whitelisting.md) +- [On-prem Prerequisites and Installation Overview](../on-prem-prerequisites-and-installation.md) +- [App Builder Interface Overview](../interface-overview.md) diff --git a/en/on-premises/external-references-for-whitelisting.md b/en/on-premises/external-references-for-whitelisting.md index 0b47ff8..9140d67 100644 --- a/en/on-premises/external-references-for-whitelisting.md +++ b/en/on-premises/external-references-for-whitelisting.md @@ -6,46 +6,65 @@ _keywords: App builder, On-premises, whitelisting # Whitelisting External Resources for On-Premise App Builder -## Introduction +## Introduction + This document outlines the necessary external URLs that need to be whitelisted for the proper functioning of the App Builder within an on-premise environment. Whitelisting these URLs ensures seamless access to resources like component libraries, documentation, video tutorials, and more, enhancing both development and user experience. -## Implementation Tips: +## Implementation Tips + By integrating this whitelist, developers can ensure that all necessary external resources for the Infragistics App Builder are accessible from your on-premise setup: 1. Ensure that these URLs provided below are added to your network's whitelist or proxy settings to prevent blocking. 2. Regularly update this list if new resources or URLs are added by us or if any changes occur. 3. Consider using wildcard entries for domains where multiple sub-pages might be necessary (e.g., *.infragistics.com for all Infragistics resources). Examples: + - Add `*.infragistics.com` for all Infragistics resources. - Add `*.appbuilder.dev` for App Builder specific resources. - For services like YouTube, which might have multiple paths, consider `*.youtube.com` if you want to allow access to the entire YouTube site. - Discord channels might require a specific entry since it's not a [typical web URL.](https://discord.com/channels/836634487483269200/836635360594755665) ## Whitelisting Categories -Below you can find a detailed list of all external URLs part of the App Builder Platgorm. To ensure clarity and usability, the URLs have been organized into categories based on their purpose: -#### App Builder Resources +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 + - [Landing page.](https://www.infragistics.com/products/appbuilder) - [Pricing page.](https://www.appbuilder.dev/pricing) -- App Builder desktop applicaiton 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). +- 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). + + - [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 -#### 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) - [Navigation Tips.](https://www.infragistics.com/products/appbuilder/help/single-page-apps-and-navigation) - [Layout tips.](https://www.infragistics.com/products/appbuilder/help/flex-layouts/flex-layouts) + #### Product Pages + - [Reveal BI help pages.](https://help.revealbi.io/web/getting-started-angular/) + #### Legal & Privacy + - [Infragistics Privacy Policy.](https://www.infragistics.com/legal/privacy) - [Infragistics Terms of Use.](https://www.infragistics.com/legal/terms-of-use) - [App Builder AI Privacy Policy.](https://www.appbuilder.dev/ai-privacy-policy) #### Community & Support + - [Discord](https://discord.com/channels/836634487483269200/836635360594755665) - [YouTube videos including webinars and getting started content.](https://www.youtube.com/@AppBuilder_Dev) + #### Component Libraries + - [Ignite UI for Angular.](https://www.infragistics.com/products/ignite-ui-angular/angular) - [Ignite UI for Blazor.](https://www.infragistics.com/products/ignite-ui-blazor/blazor) - [Ignite UI for Web Component.](https://www.infragistics.com/products/ignite-ui-web-components/web-components) @@ -55,7 +74,8 @@ Below you can find a detailed list of all external URLs part of the App Builder By following the recommendations in this topic, users will have easier access to necessary resources, reducing friction in their workflow while maintaining network security. ## Additional App Builder Resources +
-* [On-Prem Authentication with OpenID Connect](auth-with-openid-connect-o-auth.md) -* [App Builder Deployment Configuration Flags](configuration-flags.md) \ No newline at end of file +- [On-Prem Authentication with OpenID Connect](auth-with-openid-connect-o-auth.md) +- [App Builder Deployment Configuration Flags](configuration-flags.md) diff --git a/en/open-api-swagger-support.md b/en/open-api-swagger-support.md index df7a9f7..58cee88 100644 --- a/en/open-api-swagger-support.md +++ b/en/open-api-swagger-support.md @@ -39,11 +39,13 @@ API specifications can be written in YAML or JSON. The format is easy to learn a At this point you can either specify a _Swagger file URL_ (json/yaml) or _Upload a definition_. Once loaded a _Configure endpoints_ will appear. The left-side of the _Configure endpoints_ dialog consists of: + - Base URL - can be automatically populated if value for it is present in the file definition - Authorization - provide auth key if needed - Endpoints tree view - All available endpoints will be loaded here along with its type (GET, PUT, POST and etc.) The right-side of the _Configure endpoints_ dialog consists of: + - Request url with _Send_ button that can be used to test the connection before selecting it - Tab elements for authorization, parameters and headers - if one is required, it will be marked as such. - Tab content section showing _info_ messages or required fields. Example image: @@ -52,6 +54,7 @@ The right-side of the _Configure endpoints_ dialog consists of:

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-Indigo-Design-App-Builder](./images/view-code-Indigo-Design-App-Builder.gif)

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. ![run-app-image](./images/run-app-image.png) @@ -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) ![cant-connect-error](./images/cant-connect-error.PNG)

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. @@ -55,6 +63,7 @@ If the user is not part of the workspace he will get _Only invited members can e

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 t

Access 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. @@ -81,9 +93,9 @@ Anonymous users won't have access to restricted applications. You can always use
-* [Using data in your app](./using-data-in-your-app.md) -* [Open API/Swagger support](open-api-swagger-support.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) +- [Using data in your app](./using-data-in-your-app.md) +- [Open API/Swagger support](open-api-swagger-support.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/single-page-apps-and-navigation.md b/en/single-page-apps-and-navigation.md index 3111a71..6a5575a 100644 --- a/en/single-page-apps-and-navigation.md +++ b/en/single-page-apps-and-navigation.md @@ -6,21 +6,21 @@ _keywords: App builder, Indigo Design, Infragistics # Single page apps and navigation -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. +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.

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. ![top-navigation-interactions-preview-Indigo-Design-App-Builder](./images/top-navigation-interactions-preview-Indigo-Design-App-Builder.gif)

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-views-indigo-design-app-builder](./images/switch-views-indigo-design-app-builder.gif)

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