App Builder 릴리스: Load-on-Demand Hierarchical Grids, DevOps 통합, 입력 검증 등!

5월에 출시된 App Builder의 최신 업데이트는 개발을 간소화하고, 성능을 향상시키며, 개발자와 디자이너가 앱 동작과 사용자 경험을 더 잘 제어할 수 있도록 설계된 강력한 새 기능을 제공합니다. Hierarchical Grids의 더 스마트한 데이터 로드부터 기본 Azure DevOps 통합 및 구성 요소 전반의 고급 검증 규칙에 이르기까지, 이 릴리스에는 생산성 향상 기능이 포함되어 있습니다.

이러한 새로운 기능에 대해 자세히 알아보기 전에 App Builder 대해 처음 배우는 경우 조직의 응용 프로그램 개발 프로세스에서 핵심 도구로 간주해야 하는 이유를 간략하게 공유하겠습니다.

• 시각적 앱 빌더 –최고 경영진, 엔터프라이즈 아키텍트, 개발 팀 리더, 디자이너, 개발자 및 이해 관계자를 위한 통합 플랫폼입니다.
• 기업이 그 어느 때보다 80% 빠르게 완전한 비즈니스 앱을 설계하고 구축할 수 있도록 지원하는 클라우드 기반 WYSIWYG 드래그 앤 드롭 도구입니다.
• ​로우 코드 도구는​ ​Angular, React, Web Components 및 Blazor 대한 프로덕션 준비 코드를 생성하고 Figma 디자인을 코드로 변환합니다.

이 App Builder 릴리스의 새로운 기능은 무엇입니까?

Load-on-Demand를 사용한 계층적 그리드

이제 RowIslands를 통해 Hierarchical Grid에서 Load-on-Demand를 구성하여 필요할 때만 자식 데이터를 로드할 수 있습니다. 이렇게 하면 대규모 중첩 데이터 세트로 훨씬 더 빠르고 효율적으로 작업할 수 있습니다.

주요 하이라이트:

• 계층적 데이터에 바인딩될 때 중첩된 RowIslands(최대 5개 수준)를 자동으로 생성합니다.
• 각 RowIsland는 개별적으로 구성할 수 있으며 필터링, 정렬, 페이지 매김 및 편집을 지원합니다.
• 자식 데이터는 부모 행이 확장될 때만 별도의 데이터 요청을 사용하여 로드됩니다.
• 시각적 계층이 개요 패널에 표시되어 직관적인 탐색과 디자인을 지원합니다.

사용 사례 예:

Customers, Orders 및 OrderDetails에 대해 별도의 데이터 소스를 정의합니다. 그리드는 행을 확장할 때 필요한 항목만 로드하므로 더 빠르고 깔끔한 UI 환경을 제공합니다.

자식 수준 간의 복사-붙여넣기가 비활성화되고, 부모 재지정이 지원되지 않으며, 순서 변경은 동일한 부모 내에서만 허용되며, CRUD, 원격 데이터 바인딩 및 자식 그리드에 대한 작업은 향후 릴리스에 대한 로드맵의 일부입니다.>

Azure DevOps 통합

이제 App Builder Azure DevOps에 직접 연결하여 몇 번의 클릭만으로 원활한 CI/CD 파이프라인 및 코드 핸드오프를 수행할 수 있습니다. 주제에 대한 전체 도움말 문서를 읽으십시오.

당신이 할 수 있는 일:

• 기존 Azure DevOps 프로젝트에 연결
• 소스 코드(Angular, React, Blazor 또는 Web Components)를 생성하여 DevOps 리포지토리에 직접 게시
• 자동 CI 빌드 트리거
• 끌어오기 요청을 통해 후속 변경 내용 제출
• 실시간 배포 준비(출시 예정)

Authentication Tip: Only Work or School Microsoft accounts (Azure AD) are supported for authentication. Personal Microsoft accounts (e.g., @outlook.com) are not compatible without converting to a work account or adding them as a guest to your Azure AD tenant.

폼(Forms), 그리드(Grids) 및 입력(Inputs)에 대한 입력 유효성 검사(Input Validation for Forms, Grids, and Inputs)

유효성 검사가 크게 업그레이드되었습니다! App Builder는 이제 Forms, Grid 구성 요소 및 독립 실행형 입력에서 입력 유효성 검사 규칙을 지원합니다.

지원되는 규칙:

• min, max (숫자/날짜 입력)
• minLength, maxLength
• pattern (예: 이메일 형식, 전화 마스크)
• required

이러한 유효성 검사는 다음과 같이 적용됩니다.

• Swagger 스키마에서 읽을 때 자동으로
• 수동으로 사용자 지정 규칙 정의(스키마 규칙을 재정의함)Manually through custom rule definitions (which override schema rules)
• 다양한 입력 상호 작용 중(흐림, 제출, 편집 등)

HTML5 표준에 따른 유효성 검사 상태​

입력 유형	min / max	minLength / maxLength	pattern	노트
이메일	❌	✅	✅	사용자 지정 형식에 패턴 사용
찾다	❌	✅	✅	자유 텍스트처럼 작동합니다.
전화(전화)	❌	✅	✅	사용자 지정 숫자 형식에 적합
문자 메시지	❌	✅	✅	가장 유연한 입력 유형
비밀번호	❌	✅	✅	강도 규칙에 사용
수	✅	❌	❌	HTML5 제한 패턴 지원
날짜	✅	❌	❌	엄격한 사용 YYYY-MM-DD

Multi-Column Headers & Collapsible Column Groups

이 App Builder 릴리스에는 다중 열 헤더 및 축소 가능한 열 그룹이 도입되어 보다 체계적이고 반응이 빠른 그리드 레이아웃을 만들 수 있습니다.

기능 하이라이트:

• 여러 열을 단일 부모 헤더 아래에 그룹화합니다.
• 축소 가능한 그룹은 표시되는 열을 제어하기 위해 확장/축소할 수 있습니다.
• 가시성, 고정 및 상태(확장/축소)를 Properties Panel 또는 Outline Panel을 통해 구성합니다.
• and visibleWhenCollapsed와 같은 collapsible 구성 요소 및 속성에 의해 igx-column-group 뒷받침됩니다.

기술적 한계:

• 재귀 렌더링 및 동적 구조 업데이트에 대한 Angular 및 Ignite UI의 제한으로 인해 현재 한 수준의 그룹화만 지원됩니다.
• 고정: 자식 열을 고정할 때 부모 그룹도 고정해야 합니다.

주요 기능:

• 마스터 보기와 자식 보기 모두에 컨테이너를 추가합니다 RouterOutlet.
• 2단계 심층 탐색을 활성화합니다(예: ,). Customers → Orders → Order Details​
• 최대 5개의 라우팅 수준을 준비하며, 이는 향후 릴리스에서 도입될 예정입니다.
• 마스터 세부 정보 시나리오, 대시보드 또는 점진적 공개 UI에 적합합니다.

마무리

5월의 출시는 App Builder에서 확장 가능하고 현대적인 앱 경험을 제공하기 위한 Microsoft의 지속적인 노력을 반영합니다. 복잡한 데이터 그리드를 설계하든, 강력한 검증 규칙을 적용하든, DevOps 워크플로를 간소화하든, 이 업데이트는 더 빠르게 이동하고 더 잘 빌드할 수 있는 도구를 제공합니다.

​지금 바로 appbuilder.dev에서 새로운 기능을 사용해 보세요.

결론적으로 App Builder 앱 개발 프로세스의 판도를 바꾸는 역할을 합니다. 클라우드 기반 비주얼 빌더, 로우 코드 기능 및 새로운 기능을 갖춘 이 도구는 모든 조직에 꼭 필요한 도구입니다. 오늘 사용해 보세요! 더 자세한 내용이 필요하시면 다음을 확인해 보시기 바랍니다.

• Discord 채널.
• GitHub 토론.
• 로드맵.

최신 App Builder 업데이트의 모든 기능을 경험하려면 고객 포털을 방문하여 최신 버전을 다운로드하세요. 늘 그렇듯이 우리는 항상 귀하의 피드백을 받고 귀하가 추가하거나 추천하고 싶은 것을 듣게 되어 기쁩니다. 따라서 zkolev@appbuilder.dev로 이메일을 보내 Infragistics를 통해 고객에게 지속적으로 가치를 제공하는 데 도움이 될 수 있는 방법을 알려주십시오.