새로운 기능: App Builder with Conditional Data Actions, Grid Master-Detail, and More
App Builder의 6월 업데이트에는 앱 개발을 가속화하고 사용자 상호 작용을 간소화하도록 설계된 새로운 생산성 기능이 도입되었습니다. 조건부 데이터 작업부터 스페인어 현지화 등에 이르기까지 지금 모든 것을 살펴보세요.
즈드라프코 콜레프
7분 읽기
6월에 출시 App Builder 에는 앱 개발을 가속화하고 사용자 상호 작용을 간소화하도록 설계된 새로운 생산성 기능이 도입되었습니다. 조건부 데이터 작업을 App Builder 이제 코드가 필요 없이 API 호출의 성공 또는 실패를 기반으로 워크플로에 더 스마트한 로직을 구축할 수 있습니다. 새로운 그리드 마스터-디테일 템플릿을 사용하면 확장 가능한 컨텍스트 인식 뷰로 행 데이터를 시각적으로 보강할 수 있습니다. 그리고 글로벌 팀을 위해 플랫폼 전반에 걸쳐 스페인어 현지화를 도입하고 있습니다. 새로운 하위 수준 라우팅 기능, 디자인 타임 개선 사항 및 윤곽선 및 포함된 아이콘 버튼과 같은 확장된 UI 변형과 결합된 이 릴리스는 더 많은 디자인 기능과 로직 제어를 간편하게 제공합니다.
이러한 새로운 기능에 대해 자세히 알아보기 전에 App Builder 대해 처음 배우는 경우 조직의 응용 프로그램 개발 프로세스에서 핵심 도구로 간주해야 하는 이유를 간략하게 공유하겠습니다.
- 시각적 앱 빌더 –최고 경영진, 엔터프라이즈 아키텍트, 개발 팀 리더, 디자이너, 개발자 및 이해 관계자를 위한 통합 플랫폼입니다.
- 기업이 그 어느 때보다 80% 빠르게 완전한 비즈니스 앱을 설계하고 구축할 수 있도록 지원하는 클라우드 기반 WYSIWYG 드래그 앤 드롭 도구입니다.
- 로우 코드 도구는 Angular, React, Web Components 및 Blazor 대한 프로덕션 준비 코드를 생성하고 Figma 디자인을 코드로 변환합니다.
이 App Builder 릴리스의 새로운 기능은 무엇입니까?
Master-Detail Templates로 그리드 개선
App Builder의 마스터-디테일 템플릿은 데이터 그리드에 강력한 상호 작용을 제공합니다. 확장 가능한 행을 활성화하면 사용자가 고객의 최근 주문, 직원의 실적 또는 차량의 주행 기록과 같이 각 레코드에 연결된 더 많은 세부 정보를 그리드 내에서 바로 표시할 수 있습니다.
App Builder의 직관적인 디자인 타임 지원을 통해 카드 또는 텍스트 블록과 같은 구성 요소를 확장된 세부 정보 영역으로 끌어다 놓고 현재 행의 데이터 컨텍스트에 바인딩할 수 있습니다. 플랫 테이블을 넘어서는 정보 UI를 빠르고 유연하게 구축할 수 있는 방법입니다.
이를 사용하려면 속성 패널에서 그리드 세부 정보 옵션을 활성화하고 구성 요소를 추가한 다음 행 데이터에 바인딩하기만 하면 됩니다.
다음 데모를 살펴보겠습니다.
위의 데모는 CRM 애플리케이션 내에 적용된 Master-Detail 레이아웃이 작동하는 모습을 보여줍니다. 고객을 선택하면 관련 주문이 표시되는 방법과 각 주문이 관련 주문 세부 정보를 동적으로 로드하는 방법을 보여 줍니다.
이 설정에서는 다음을 수행합니다.
- 기본 보기에는 고객 목록이 표시되며, 고객을 선택하면 해당 주문을 볼 수 있습니다.
- 선택한 주문의 행 컨텍스트에 바인딩된 보조 Order Details Grid가 추가되었습니다.
- 이 컨텍스트 기반 바인딩은 사용자가 특정 주문을 선택할 때 주문 세부 정보 그리드가 업데이트되어 관련 정보만 표시하도록 합니다.
이는 상황별 데이터 바인딩을 사용하여 드릴다운 환경을 얼마나 쉽게 구축할 수 있는지 보여주며, 이를 통해 사용자는 수동 배선이나 추가 코드 없이 계층적 데이터 관계를 탐색할 수 있습니다.
모든 것을 실시간으로 미리 보고 생성된 코드로 앱을 내보냅니다. 행별 매개 변수가 있는 데이터 소스 또는 대화 상자와 같은 오버레이 구성 요소와 같은 특정 고급 바인딩은 현재 코드 생성에서 지원되지 않습니다. 여기에서 전체 도움말 항목을 살펴보십시오.
더 스마트한 워크플로우: 조건부 데이터 작업을 통한 App Builder
이번 릴리스에서 App Builder는 데이터 요청의 결과를 기반으로 앱 동작을 제어하는 강력한 방법인 조건부 데이터 작업을 도입했습니다. 이제 초기 작업이 성공하거나 실패하는 경우에만 트리거되는 후속 작업을 정의할 수 있습니다. 예를 들어, 양식 제출이 성공적으로 완료된 후 성공 배너를 표시하거나 실패할 경우 오류 메시지를 표시합니다.
이 기능은 모든 것을 깔끔하고 집중적으로 유지합니다: 조건은 현재 데이터 작업으로만 제한되며, 특정 HTTP 코드를 확인할 필요 없이 간단한 통과/실패 평가를 지원합니다. 또한 조건 내에서 변수를 사용할 수 있으며 입력, 결과 또는 사용자 정의 변수를 참조하는지 여부를 명확히 하는 데 도움이 되는 상황별 드롭다운의 이점을 활용할 수 있습니다. 이는 보다 지능적이고 반응이 빠른 앱 로직을 향한 기본 단계이며 코딩이 필요하지 않습니다.
아래 데모는 HR Dashboard 애플리케이션 내에서 작동 중인 조건부 작업의 출력을 보여줍니다. 새 직원을 추가하는 프로세스를 동적으로 처리하고 결과에 따라 상황에 맞는 탐색을 제공하여 앱의 흐름을 향상시키는 방법을 보여 줍니다.
결과는 다음과 같습니다.
- 직원 그리드에 새 행이 추가되면 조건부 작업이 백엔드에 대한 PUT 요청을 트리거합니다.
- 요청이 성공하면 다음 두 가지 상황이 발생합니다.
- 새로 생성된 employee 개체를 저장하기 위해 변수가 설정됩니다.
- 스낵바 알림이 나타나 성공을 확인하고 신입 사원의 데이터로 미리 채워진 자세한 양식 보기에 대한 탐색 버튼을 제공합니다.
- 요청이 실패하면 사용자에게 문제를 알리는 대화 상자 창이 표시됩니다.
- 양식 보기에서 직원을 편집하고 업데이트를 제출하면 두 번째 스낵바가 나타나 사용자를 팀 보기로 안내하여 새로 추가되거나 업데이트된 직원 목록을 포함하여 전체 직원 목록을 볼 수 있습니다.
이 흐름은 조건부 작업이 코드 한 줄도 없이 데이터 생성에서 쉬운 인앱 탐색에 이르기까지 원활한 다단계 사용자 경험(UX)을 오케스트레이션하는 방법을 보여줍니다.
안녕! App Builder는 이제 스페인어를 지원합니다.
App Builder는 이제 스페인어 지역화를 제공하여 스페인어를 사용하는 사용자가 디자인 화면, 도구 상자, 속성 패널 등을 더 쉽게 탐색할 수 있도록 합니다. 이 업데이트는 브라우저 언어 설정 또는 기본 설정에 따라 인터페이스를 자동으로 조정하여 보다 접근하기 쉽고 포괄적인 경험을 보장합니다.
경로 및 쿼리 매개 변수를 사용한 하위 수준 라우팅 소개Introducing Child-Level Routing with Path and Query Parameters
App Builder의 라우팅에 대한 주요 개선 사항인 경로 및 쿼리 매개 변수를 사용한 하위 수준 라우팅에 대한 완전한 지원을 발표하게 되어 기쁩니다. 이 기능은 애플리케이션 계층 구조 내에서 중첩된 Views Container(라우터 콘센트)를 구성하는 기능을 도입하여 개발자가 다중 레벨 탐색 구조를 쉽게 설계할 수 있도록 합니다. 마스터 디테일 경험(예 Customers → Orders → OrderDetails: )을 구축하든 깊이 중첩된 UI를 구축하든, App Builder는 이제 최대 5개 수준 깊이의 라우팅 계층을 지원하며, 보다 직관적인 설정을 위해 탐색 및 대상 선택기에 대한 UI 개선이 완료되었습니다.
쿼리 파라미터, 탐색 로직 및 런타임 동작Query Parameters, Navigation Logic & Runtime Behavior
경로 매개 변수 외에도 App Builder 에는 이제 동일한 이름의 여러 매개 변수를 처리하기 위한 전략을 포함하여 모든 플랫폼에 대한 강력한 쿼리 매개 변수 지원이 포함됩니다. 코드 생성 로직이 올바른 쿼리 매개변수 사용을 반영하도록 업데이트되었으며 라우팅 작업과 원활하게 통합됩니다. 또한, 탐색 동작이 개선되었습니다: 루트(/)로 이동하면 이제 가장 깊은 유효 경로로 자동으로 드릴다운되어 필수 매개변수가 정의되지 않은 경우에만 중지됩니다. 이 지능적인 라우팅 동작은 앱 미리보기 환경을 향상시키고 복잡한 데이터 기반 탐색 흐름을 자신 있게 빌드하기 위한 기반을 설정합니다.
새로운 아이콘 버튼 변형: 포함 및 윤곽
App Builder는 이제 아이콘 버튼 컴포넌트에 대해 포함됨 및 윤곽선 변형을 지원하여 디자인 시스템 및 Figma UI 키트에서 사용할 수 있는 옵션에 맞게 조정합니다. 이러한 새로운 스타일은 대담하고 채워진 모양을 목표로 하든 미니멀한 윤곽선을 목표로 하든 앱의 시각적 톤을 일치시킬 수 있는 더 큰 유연성을 제공합니다. 이 업데이트는 App Builder UI의 디자인 타임 구성, 업데이트된 구성 요소 정의를 통한 정확한 코드 생성, 일관된 디자인 간 흐름을 유지하기 위한 Figma에서 원활한 가져오기를 포함하여 플랫폼 전반에 걸쳐 완벽한 지원을 제공합니다.
마무리
6월 릴리스는 App Builder에서 확장 가능한 최신 앱 경험을 제공하려는 우리의 지속적인 노력을 반영합니다. 복잡한 데이터 그리드를 설계하든, 강력한 검증 규칙을 적용하든, DevOps 워크플로를 간소화하든, 이 업데이트는 더 빠르게 움직이고 더 잘 구축할 수 있는 도구를 제공합니다.
지금 바로 appbuilder.dev에서 새로운 기능을 사용해 보세요.
App Builder는 앱 개발 프로세스의 판도를 바꾸고 있습니다. 클라우드 기반 비주얼 빌더, 로우 코드 기능 및 새로운 기능을 갖춘 이 도구는 모든 조직에 필수 도구입니다. 오늘 사용해 보세요! 자세한 내용이 필요한 경우 다음을 확인하는 것이 좋습니다.
최신 App Builder 업데이트의 모든 기능을 경험하려면 고객 포털을 방문하여 최신 버전을 다운로드하세요. 늘 그렇듯이 우리는 항상 귀하의 피드백을 받고 귀하가 추가하거나 추천하고 싶은 것을 듣게 되어 기쁩니다. 따라서 zkolev@appbuilder.dev로 이메일을 보내 Infragistics를 통해 고객에게 지속적으로 가치를 제공하는 데 도움이 될 수 있는 방법을 알려주십시오.
