격자 CRUD 작업을 포함한 App Builder 릴리스

2월의 App Builder 업데이트가 여기에 있으며, 격자 CRUD 작업, 중첩 데이터 바인딩 지원, 카테고리 차트 집계 등이 포함됩니다.

Zdravko Kolev Last Updated Jul 16, 2024 5min read

App BuilderTM의 2월 업데이트가 여기에 있으며, 흥미로운 새로운 기능으로 가득 찼습니다. 아직 App Builder를 들어본 적이 없다면, 조직의 앱 개발 프로세스를 위해 필수적인 도구인 이유를 알려드립니다:

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

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

데모 요청

Infragistics 저코드 App Builder의 모든 새로운 흥미로운 기능

App Builder의 새로운 흥미로운 기능에 대한 빠른 개요입니다.

기능

OpenAPI 정의를 기반으로 데이터 소스를 생성할 때 REST API 메서드 POST/PUT/DELETE를 구성합니다.
격자 컴포넌트에서 레코드를 생성, 업데이트, 삭제하기 위한 새로운 데이터 작업입니다.
Tree-Grid 및 Tree 컴포넌트에서 계층형 유형 데이터를 사용합니다.
계층형 데이터를 기반으로 컴포넌트를 반복할 때 중첩 데이터 바인딩 지원을 추가했습니다.
반복된 레이블이 있을 때 Category 차트에서 데이터를 그룹화하고 집계합니다.
두 개의 새로운 샘플 앱 – Learning portal 및 Inventory management를 추가했습니다.

개선 사항

부모 레이아웃(CSS Flex-box)에 정의된 V.align 및 H.align을 재정의하기 위해 Align-self 속성을 추가했습니다.
Row/Column/Absolute layout 컴포넌트에 대한 Rounding을 설정하기 위해 Border-radius 속성을 추가했습니다.
앱 이름을 브라우저 페이지 제목으로 표시합니다.
새 데이터 컬렉션을 추가할 때 모든 데이터 필드를 선택합니다.
새 애플리케이션 만들기 대화 상자를 최대화하는 옵션을 추가했습니다.
버그 수정 및 일반 개선 사항

격자 CRUD 작업

App Builder 격자의 기능은 또 다른 기능으로 계속 증가하고 있습니다 – Web API 호출을 포함한 격자 생성, 읽기, 업데이트 및 삭제 작업입니다. 이제 이를 격자 편집 작업 버튼에 연결하고 실시간 Web API 업데이트의 이점을 활용할 수 있습니다. 코드 생성 시 App Builder는 리소스 생성, 가져오기, 업데이트 및 삭제를 위한 API 호출을 처리하는 필요한 서비스를 생성합니다.

격자가 Customers 테이블에 바인딩된 경우 (Swagger 경로 이미지 1) 데이터 상호작용 섹션이 Customers에 사용 가능한 메서드로 로드되며, 그러한 상호작용을 추가할 때 (이미지 2).

App Builder의 격자 CRUD 작업

이미지 1

전체 격자 CRUD 예제

이미지 2

아래 예제에서 Northwind Web API 서비스를 사용하여 실제로 모든 고객을 가져오고, CustomerID “BERGS”를 가진 특정 고객을 선택하며, _CompanyName_을 “Testing the update”로 업데이트하는 방법을 볼 수 있습니다. App Builder는 최종 사용자가 프롬프트 창을 통해 허용하는 경우 실제 데이터 요청을 수행하여 원격 데이터를 변경할 수 있습니다 (라이브 편집 켜기). App Preview에서는 두 가지 데이터 액세스 상태가 있다는 점을 염두에 두세요. 편집기/인증된 사용자 워크스페이스의 일부는 실시간 변경 상태로 직접 표시됩니다 (아래 이미지). 뷰어/워크스페이스의 일부가 아닌 사용자는 실제 Web API에 액세스할 수 없으며 대신 모의 데이터를 사용할 것이라고 알림을 받을 것입니다.

데이터 변경 사항

알림 표시줄이 페이지 하단에 표시되어 최종 사용자에게 수행된 모든 변경 사항이 실제로 원격 데이터를 업데이트할 것임을 경고합니다. 라이브 편집 끄기 작업 버튼을 사용하여 해당 기능을 끌 수 있습니다.

알림 표시줄이 페이지 하단에 표시되어 최종 사용자에게 수행된 모든 변경 사항이 실제로 원격 데이터를 업데이트할 것임을 경고합니다:

알림 표시줄

이것이 작동하는 전체 CRUD 프로세스입니다:

CRUD 프로세스 작동

생성된 코드는 다음과 같습니다:

export class SwaggerNWindService { constructor(private http: HttpClient) { }

public postCustomer(data: any): Observable { const options = { headers: { Authorization: ‘Bearer <auth_value>’, }, }; const body = data; return this.http.post(`${API_ENDPOINT}/Customer`, body, options); } public putCustomer(data: any): Observable { const options = { headers: { Authorization: ‘Bearer <auth_value>’, }, }; const body = data; return this.http.put(`${API_ENDPOINT}/Customer`, body, options); } public deleteCustomer(id: string): Observable { const options = { headers: { Authorization: ‘Bearer <auth_value>’, }, }; return this.http.delete(`${API_ENDPOINT}/Customer/${id}`, options); } public getCustomer(): Observable { const options = { headers: { Authorization: ‘Bearer <auth_value>’, }, }; return this.http.get(`${API_ENDPOINT}/Customer`, options); } }

계층형 반복자 바인딩 지원

Tree, Cards 및 Containers와 같은 컴포넌트에 적용할 수 있습니다. 아래 예제는 간단한 Tree 및 Tree Grid가 계층형 구조를 가진 데이터 소스에 바인딩하는 방법을 보여주고 있습니다.

Tree 컴포넌트를 검토해 보겠습니다. 루트 및 자식 요소를 특정 계층 수준에 바인딩하기 위해 Repeat Data 옵션을 사용하는 방법을 알 수 있습니다. Tree는 선언적 컴포넌트이며 데이터 입력 바인딩(Tree 루트 수준)이 없으므로, 노드 계층 구조를 지정하고 계층형 데이터 세트를 반복하여 선언합니다. 노드는 확장된 상태와 선택된 상태가 기본 데이터에 반영되도록 데이터 모델에 바인딩 가능해야 합니다.

격자 CRUD 작업, 중첩 데이터 바인딩 지원, 카테고리 차트 집계 등을 포함한 App Builder 릴리스

차트 집계 기능

반복된 레이블이 있을 때 Category 차트에서 데이터를 그룹화하고 집계할 수 있습니다. 이 기능의 기본 아이디어는 격자와 매우 유사합니다. 카테고리(식료품, 가정용품, 음식점)로 그룹화한 다음 금액 열의 최대값을 얻고 싶다고 가정합시다. 해당 데이터를 카테고리 차트에 할당한 다음 그룹을 카테고리로 지정하고 최대 금액에 대한 요약을 지정할 수 있습니다.

격자 CRUD 작업, 중첩 데이터 바인딩 지원, 카테고리 차트 집계 등을 포함한 App Builder 릴리스

다른 기능:

카테고리 필드 값에 대한 그룹화(집계)를 정의하여 고유한 카테고리 레이블만 가로축에 표시되도록 합니다.
집계 옵션을 선택하면 선택된 모든 값 필드에 대해 자동으로 집계가 적용됩니다. 기본값은 “합계”입니다. 카테고리 레이블에 대한 집계를 제거하면 모든 값 필드에 대한 집계가 제거됩니다.
사용자는 값 필드에 대한 집계 함수를 개별적으로 변경할 수 있습니다. 예를 들어, 합계(수량) -> 평균(수량)이지만 개별적으로 제거할 수는 없습니다.
카테고리 필드에 대해 집계가 활성화되어 있는 동안, 이전에 포함되지 않은 새로운 값 필드가 추가되면, 기본 집계 함수와 함께 추가됩니다.
문자열 필드를 값으로 추가할 수도 있지만, 이를 수행하면 자동으로 집계가 활성화되고 이 필드에 대해 집계 함수가 개수로 설정됩니다.
모든 필드(카테고리 또는 값)에 대해 정렬을 활성화할 수 있습니다. 오름차순/내림차순/없음이 될 수 있습니다. 한 필드만 정렬할 수 있습니다. 값 필드가 오름차순으로 정렬되고 사용자가 다른 값 필드 또는 카테고리 레이블에서 정렬을 활성화하는 경우, 이전 정렬이 제거되고 정렬이 가장 최근에 선택된 필드에 적용됩니다. 정렬은 정렬 오름차순 -> 정렬 내림차순 -> 없음 순서를 따릅니다.
제한: 같은 필드를 두 번 이상 추가할 수 없습니다. 따라서 사용자는 ProductSales의 합계와 Product Sales의 평균을 함께 추가할 수 없습니다.

새로운 샘플 애플리케이션

다양한 기능을 노출하는 새로운 샘플 애플리케이션이 추가되었습니다.

Learning Portal

인기 있는 주제 또는 강사를 기반으로 과정의 진행 상황을 추적하는 학습 관리 앱입니다. REST에 바인딩된 사용자 정의 목록 및 적응형 레이아웃을 포함합니다.

격자 CRUD 작업, 중첩 데이터 바인딩 지원, 카테고리 차트 집계 등을 포함한 App Builder 릴리스

Inventory Management

재고 수준을 관리하고 재고 제품을 검토하는 보고 대시보드입니다. 라우팅을 위해 사용자 정의 측면 탐색을 사용하고 성능을 보고하기 위해 카테고리 차트를 사용합니다.

격자 CRUD 작업, 중첩 데이터 바인딩 지원, 카테고리 차트 집계 등을 포함한 App Builder 릴리스

새로운 On-Prem 버전

App Builder On-Prem 소프트웨어는 데이터 보안, 유지 관리, 저장소 및 소프트웨어 개발에 관해 각 조직의 고유한 필요를 충족합니다. App Builder의 온프레미스 버전은 조직이 자신의 인스턴스를 사용하고 자신의 인프라에서 실행할 수 있도록 하여 클라우드 기반 플랫폼에 쉽게 액세스하고 내부 직원만 액세스 가능하게 하는 쉬운 방법을 제공합니다.

On-Prem 사전 요구 사항 및 설치.

격자 CRUD 작업, 중첩 데이터 바인딩 지원, 카테고리 차트 집계 등을 포함한 App Builder 릴리스