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