App Builder 릴리스: Tree Grid, Column 속성 및 기타 기능

App Builder 릴리스: Tree Grid, Column 속성 및 기타 기능

최신 App Builder 릴리스는 앱 개발을 간소화하기 위한 많은 새로운 기능과 구성 요소를 추가합니다 - Tree Grid, Column 속성 등. 모든 내용을 살펴보세요.

4min read

10월의 App BuilderTM 업데이트가 공개되었으며 중요한 업데이트가 포함되어 있습니다. App Builder에 대해 처음 알아보신다면, 조직의 애플리케이션 개발 프로세스에서 이를 핵심 도구로 고려해야 하는 이유를 빠르게 공유하겠습니다:

  • 시각적 앱 빌더 – 제품 관리자, 디자이너 및 개발자를 위한 통합 플랫폼입니다.
  • 클라우드 기반 WYSIWYG 드래그 앤 드롭 도구로, 기업이 완전한 비즈니스 앱을 이전보다 80% 더 빠르게 설계하고 구축할 수 있도록 지원합니다.
  • Sketch 또는 Figma 디자인 파일에서 훌륭한 Angular, Blazor 또는 Web Components 코드(React는 곧 출시)를 생성하는 로우 코드 도구입니다.

App Builder 시도 App Builder 시도 App Builder 시도

데모 요청

로우 코드 App Builder의 새롭고 흥미로운 기능들

Grid Columns 설정

Grid는 이제 각 Column을 하위 구성 요소로 노출하여 최종 사용자가 모든 열과 상호 작용할 수 있으며 다음 기능을 노출합니다:

Grid Columns 설정

  • 각 열은 일반 문자열이 아닌 추론된 열 형식과 함께 제공되므로 코드 내보내기 시 눈에 띄게 표시됩니다.
  • 키보드 화살표 키와 개요 패널을 통해 열을 다시 정렬합니다.
  • 열 헤더를 선택하고 제목이나 데이터 필드를 변경합니다.
  • 코드 내보내기 시 템플릿될 수 있거나 기존 데이터 필드에 바인딩할 수 있는 새 (빈) 열을 추가합니다.
  • “del” 키 또는 개요 패널을 통해 열을 삭제합니다.
  • 개요 패널을 통해 열을 숨깁니다.
  • 디자인 서피스에서 열의 크기를 조정할 수 있습니다.

AB의 다음 버전은 편집, 필터링, 고정 등과 같은 열 기반 기능을 활성화/비활성화할 수 있도록 추가할 계획입니다.

Tree Grid

Ignite UI Angular Tree Grid는 평면 데이터를 쉽게 표시하고 조작하는 데 사용됩니다. 이제 최소한의 코드로 데이터를 빠르게 바인딩하거나 다양한 이벤트를 사용하여 다양한 동작을 사용자 정의할 수 있습니다. 이 구성 요소는 데이터 선택, Excel 스타일 필터링, 정렬, 페이징, 템플릿 및 열 이동과 같은 풍부한 기능 집합을 제공합니다.

Tree Grid의 첫 번째 버전은 평면 데이터 바인딩만 지원하므로 데이터 개체에는 기본 키와 외래 키가 포함되어야 합니다. 기본 키는 현재 데이터 개체의 고유 식별자이고 외래 키는 해당 부모의 고유 식별자입니다. 이 경우 원본 데이터 소스를 포함하는 트리 그리드의 data 속성은 평면 컬렉션입니다. 공식 Tree Grid 설명서.

Tree Grid

계층적 데이터 소스 바인딩은 다음 반복 단계에서 계획되어 있으며 곧 출시될 예정입니다.

Accordion

이 릴리스에서는 Accordion 구성 요소도 추가합니다. 이는 클릭 가능한 헤더와 연결된 콘텐츠 섹션이 단일 컨테이너에 표시되는 수직 확장 가능한 패널을 구축하기 위한 GUI 구성 요소입니다. Accordion은 일반적으로 단일 페이지의 여러 콘텐츠 섹션을 스크롤할 필요를 줄이기 위해 사용됩니다.

Accordion 구성 요소

라이선스 코드 내보내기

이제 생성할 수 있는 코드에는 두 가지 유형이 있습니다:

1. 라이선스 사용자인 경우 앱 생성 시 Angular 구성 요소의 라이선스 패키지가 사용됩니다. 이는 애플리케이션 다운로드 및 _GitHub에 게시_에 모두 적용됩니다.

애플리케이션이 GitHub에 게시되면 프로젝트를 빌드하고 기본 테스트를 실행하는 CI를 추가합니다. 또한 GitHub CI가 라이선스 패키지를 사용할 수 있도록 필요한 NPM_AUTH_TOKEN을 게시합니다.

라이선스 코드 내보내기

  1. 평가판 사용자인 경우 앱 생성 시 Angular 구성 요소의 무료 평가판 패키지가 사용됩니다. 이는 애플리케이션 다운로드 및 _GitHub에 게시_에 모두 적용됩니다.

프로젝트가 Ignite UI Angular의 평가판 버전을 사용 중인 경우 완전한 라이선스 패키지로 업그레이드하는 방법 및 라이선스 npm 피드를 사용하도록 환경 및 CI를 설정하는 방법에 대한 정보는 라이선스 FAQ 및 설치 설명서를 참조하세요.

또는 npm run infragistics-login을 실행하여 라이선스 피드에 대한 가이드 로그인을 수행합니다.

여기서 이용 가능한 주제입니다.

OpenAPI 개선 사항

  • Reference Object 지원 – AB는 이제 사양 내에서 및 외부적으로 다른 구성 요소를 참조할 수 있는 객체를 지원합니다.

Reference Object는 JSON Reference로 정의되며 동일한 구조, 동작 및 규칙을 따릅니다.

OpenAPI 개선 사항

  • 구문 분석된 테이블 스키마의 크기에 대한 제한 사항이 추가되었습니다 (문서)

“데이터에서 스키마를 유추할 수 없습니다” – 이 오류 메시지는 데이터 소스의 구문 분석된 테이블 스키마의 크기가 너무 큰 경우(5MB 초과) 표시됩니다. 다음과 같은 경우에 트리거될 수 있습니다:

 – 일반 REST 끝점을 추가하는 경우입니다.  
 – Swagger 데이터 소스의 끝점을 확인할 때입니다.  
 – 또는 데이터 소스가 업데이트될 때입니다.

이것이 데이터에 대한 제한은 아니라는 점을 명심하세요. 예를 들어 50MB 이상의 행이 있을 수 있지만, 데이터의 스키마(형태)를 5MB 이하로 표현할 수 있는 한 App Builder는 이를 로드합니다.

URL 추가

전체 Safari 브라우저 지원

App Builder는 이제 MacOS Safari 및 Mobile Safari를 모두 지원합니다.

Safari 브라우저 지원

HR Dashboard 샘플

Grid 및 Chart 구성 요소를 포함하는 새로운 샘플 애플리케이션이 추가되었습니다. 애플리케이션은 또한 List, Card, Dialog 및 아름다운 레이아웃과 같은 다른 구성 요소의 사용도 보여줍니다.

HR Dashboard 샘플

흥미로운 기사

최근에 작업 중인 기사 목록을 확인하세요:

마무리

간단히 말해서, 이것들은 App Builder의 6월 업데이트에서 볼 수 있는 모든 새로운 기능 및 구성 요소입니다. 더 자세한 내용이 필요하시면 다음을 확인해 보시기를 권장합니다:

물론 내용을 놓쳤거나 질문이 있으시면 zkolev@appbuilder.dev로 연락 주세요.

마지막으로 최신 Infragistics Ultimate 22.2 제품 출시와 함께 App Builder의 모든 흥미로운 새로운 조정 및 업그레이드를 보고 싶으시면 아래의 빠른 개요를 시청하세요.

제품 업데이트

Product Updates