새로운 기능 Form Builder를 사용한 App Builder 릴리스
Form Builder는 App Builder에 추가된 최신 기능입니다. 어떻게 작동하며 앱 구축 경험에 어떤 이점이 있나요? 릴리스 블로그 게시물에서 알아보세요.
즈드라브코 콜레프
7분 읽기
로우 코드로 성능이 뛰어나고 데이터가 풍부한 앱을 빌드할 수 있도록 하는 것이 지속적인 개선을 위한 Microsoft의 약속의 목표입니다. 그렇기 때문에 우리는 항상 App Builder의 최신 기능이 원활하고 최적화된 개발 경험을 제공할 수 있도록 합니다. 이제 또 다른 훌륭한 기능인 Form Builder가 추가되었습니다.
새로운 기능과 모든 새로운 기능에 대해 자세히 알아보기 전에 App Builder에 대해 처음 배우는 경우 조직의 응용 프로그램 개발 프로세스에서 핵심 도구로 고려해야 하는 이유를 간단히 공유하겠습니다.
- 시각적 App Builder– 제품 관리자, 디자이너, 개발자 및 이해 관계자를 위한 통합 플랫폼입니다.
- 기업이 그 어느 때보다 80% 빠르게 완전한 비즈니스 앱을 설계하고 구축할 수 있도록 지원하는 클라우드 기반 WYSIWYG 드래그 앤 드롭 도구입니다.
- Figma 및 Sketch 설계에서 생산 준비가 완료된 Blazor 코드, Angular 코드, Web Components 및 React 코드를 생성하는 로우 코드 툴 입니다.
App Builder에서 Form Builder란 무엇입니까?
App Builder의 Form Builder 기능을 사용하면 개발자가 드래그 앤 드롭 환경을 통해 HTML 양식을 디자인할 수 있습니다. API 엔드포인트에서 직접 양식 구조를 자동으로 생성하는 것을 강조하여 생성 프로세스를 단순화하고 백엔드 소스와의 원활한 데이터 연결을 허용합니다. 이 기능은 양식 레이아웃 및 구성 요소 사용자 지정에 광범위한 유연성을 제공하며 제출, 오류 및 서버측 유효성 검사에 대한 알림을 표시하는 옵션을 포함합니다.
이 모든 것이 실제로 작동하는 것을 보고 싶다면 12월에 있을 데모 중심의 웨비나에 등록할 수 있습니다. 여기에서 자세한 내용을 확인하고 등록하십시오.
데이터 엔드포인트에서 자동 양식 생성
개발자가 데이터 끝점을 디자인 화면으로 드래그하면 끝점의 속성에 따라 양식 구성 요소 집합이 자동으로 생성됩니다.
POST및PUT메서드는 데이터 제출을 위한 입력 필드를 만듭니다.- 기본 이벤트 처리(예:
OnSuccess및OnError상호 작용)는 자동으로 구성됩니다.
Automatic Form Controls 생성 및 매핑
양식 컨트롤은 각 필드의 데이터 유형 및 메타데이터를 기반으로 생성되어 직관적인 입력 및 레이블을 보장합니다(예: 날짜 필드는 날짜 선택기 사용, 부울 필드는 스위치 사용). 개발자는 속성 패널에서 직접 구성 요소를 수정하거나, 유효성 검사를 추가하거나, 레이블을 조정할 수 있는 모든 권한을 보유합니다.
양식 수정
양식이 생성되면 필드를 포함하거나 제외하고, 레이블을 사용자 지정하고, 입력 유효성 검사를 설정하도록 양식을 편집하여 직관적인 디자인 경험을 제공할 수 있습니다. App Builder 통해 개발자는 양식 레이아웃과 구성 요소를 모두 조정할 수 있습니다.
- 양식 내에서 요소를 쉽게 추가하거나 제거할 수 있습니다.
- Required 및 Disabled validations, label customization, and mapping과 같은 제어 속성을 조정합니다.
수동 양식 작성
개발자는 입력 필드, 버튼 및 양식 구성 요소와 같은 요소를 양식 컨테이너로 끌어다 놓아 App Builder에서 수동으로 양식을 작성할 수 있습니다. 이 접근 방식을 사용하면 데이터 원본에 대한 즉각적인 바인딩 없이 구조와 레이아웃을 완벽하게 제어할 수 있습니다.
데이터 원본 바인딩
양식이 디자인되면 개발자는 구성된 데이터 소스의 끝점에 양식을 바인딩할 수 있습니다. 이러한 유연성은 데이터 상호 작용을 정의하기 전에 양식 요소를 구체화할 수 있는 기능을 보장합니다.
Binding Behavior and Validations
- 끝점 간 전환: 양식이 작성된 후 끝점 간에 전환하면 일치하지 않는 입력은 잘못된 바인딩 경고를 표시하고 해당 바인딩은 코드 출력에서 끊어진 바인딩으로 생성되지 않습니다.
- 변수 초기화: API 데이터 엔드포인트를 사용하여 양식 끝점 바인딩 대화 상자에서 새 변수를 초기화하여 양식 초기화에 필요한 컨텍스트를 제공할 수 있습니다.
- 코드 생성: 잘못된 바인딩은 생성된 코드에서 제외되어 응용 프로그램이 오류 없이 컴파일되도록 합니다.
엔드포인트를 전환할 때 중단을 최소화하기 위해 App Builder는 잠재적인 무효화에 대한 경고를 제공합니다.
Form과의 실시간 상호 작용
App Builder의 미리보기 모드에서 사용자는 양식과 상호 작용하여 다음을 확인할 수 있습니다.
- 실시간 입력 검증.
- 양식 제출, 성공 또는 유효성 검사 오류를 나타내는 알림과 함께 제공됩니다.
메모: 미리 보기 모드에서 Post/Put 양식을 제출하면 작업이 실행되어 지정된 끝점을 통해 레코드를 추가하거나 업데이트합니다.
구성 가능한 작업 버튼
작업 버튼(Submit, Reset)은 전체 사용자 지정을 제공하여 내부 및 외부 배치를 모두 지원합니다. 이러한 유연성은 더 복잡한 레이아웃에서 양식 동작을 정밀하게 제어해야 하는 개발자에게 필수적입니다.
작업 알림 제출
성공 및 오류 메시지는 스낵바를 통해 표시되며, 양식 제출에 대한 방해가 되지 않는 피드백을 제공합니다. 이러한 알림은 초기 릴리스에 대해 하드코딩되어 있으며 향후 반복에서 유연한 상호 작용 처리를 지원할 계획입니다.
양식 컨트롤 지원
Form Builder는 특정 데이터 유형에 매핑된 다양한 UI 컨트롤을 지원하여 개발자가 액세스 가능하고 반응이 빠른 양식을 효율적으로 만들 수 있도록 합니다. 다음은 지원되는 컨트롤과 현재 제한 사항에 대한 요약입니다. 모든 Form 컨트롤은 양방향 바인딩을 지원하며 Form 컨텍스트에 바인딩됩니다.
| 폼 컨트롤 | 기본 유형 | 노트 |
|---|---|---|
| 라디오 그룹 | 부울 | 필요한 필드 유효성 검사 부족 |
| 체크박스 | 부울 | 필요한 필드 유효성 검사 부족 |
| 스위치 | 부울 | – |
| 슬라이더 | 수 | – |
| 선택하다 | 열거형 | – |
| 콤보 박스 | 열거형 | – |
| 날짜 선택기 | 날짜 | – |
| 달력 | 날짜 | 선택한 날짜를 정확하게 새로 고치지 못할 수 있습니다. |
| 입력 필드 | 문자열, 숫자 | – |
메모: 양식 컨트롤은 현재 기본 유효성 검사 속성(Required,) Disabled을 지원합니다.
향후 개선 사항
App Builder의 Form Builder에 대한 로드맵에는 유효성 검사 옵션의 개선, 확장된 메타데이터 지원, 향상된 알림 및 상호 작용 처리가 포함됩니다.
향후 검증 개선 사항에는 다음이 포함됩니다.
- select 및 combo box 컨트롤에 대한 Enum 유효성 검사Enum validation for select and combo box controls.
- 범위 유효성 검사(
min,max). - 문자열 길이 유효성 검사(
min length,max length). - 패턴 유효성 검사(regex).
알려진 문제 및 제한 사항
다음과 같은 알려진 문제 및 제한 사항이 Form Builder의 초기 릴리즈에 적용됩니다.
- App Builder 런타임 경험과 생성된 애플리케이션 런타임 간의 Form Reset 동작 불일치:
- App Builder에서 재설정 버튼을 클릭하면 레코드를 편집할 때 초기 값으로 되돌아가고 새 레코드를 추가할 때 양식이 지워집니다.
- 생성된 응용 프로그램에서 Reset 버튼을 클릭하면 모든 양식 컨트롤을 빈 값으로 설정하여 폼이 지워집니다.
- 양식 복사-붙여넣기: 양식을 복사하여 붙여넣으면 현재 원래 양식의 데이터 바인딩이 손실되어 새로 붙여넣은 양식 인스턴스로 전송됩니다.
- Boolean Required Flag: 필수 Boolean 필드를 구현하는 데 모호성이 있으며, 특히 "서비스 약관 수락"과 같은 경우에 그렇습니다.
- 제출/재설정 동작: 제출/재설정 기능은 템플릿 및 반응형 양식 모두에서 작동하도록 조정되었지만 여전히 불일치가 발생할 수 있습니다.
- 코드 생성:
- 양식 모델의 입력 문제: 특히 중첩된 구조 또는 배열로 작업할 때 입력 불일치가 발생할 수 있으며, 이로 인해 출력 코드에서 정확한 양식 모델 생성이 복잡해질 수 있습니다.
igx-hint미리보기의 요소:igx-hint요소는 최종 코드에서 생성되지 않으므로 현재 미리보기에서 제외되어 있습니다. 향후 업데이트로 메시지 표시 기능에 대한 지원이 추가될 수 있습니다.- 양식에 있을 때 생성된 앱에 일정이 표시되지 않습니다.
- 버튼 클릭 동작 재설정–React 생성된 프로젝트의 양식을 지웁니다. 초기 값으로 되돌리는 대신 양식 컨트롤은 빈 값을 가져옵니다.
- Disabled 속성은 각도로 생성된 형식의 입력을 위해 렌더링되지 않습니다.
설문조사 질문
다음 설문 조사에 자유롭게 작성하십시오. 귀하의 피드백은 Form Builder 및 로우코드 도구의 미래를 형성하는 데 매우 중요합니다. 우리는 반응형 양식 디자인 및 유효성 검사 관리와 같은 문제를 해결하는 동시에 드래그 앤 드롭 UX 및 백엔드 통합과 같은 기능을 향상시키기 위해 최선을 다하고 있습니다.
결론
결론적으로 App Builder는 앱 개발 프로세스의 게임 체인저입니다. 클라우드 기반 비주얼 빌더, 로우 코드 기능 및 새로운 기능을 통해 모든 조직에 꼭 필요한 도구입니다. 지금 바로 사용해 보세요! 더 자세한 정보가 필요하시면 다음을 확인해 보시기 바랍니다.
To experience everything, head to appbuilder.dev and start using the App Builder. If you want an exclusive preview of our latest developments, check our App Builder Preview environment. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So, please email me at zkolev@appbuilder.dev and let me know how we can help you continue delivering value to your customers with Infragistics.
로우코드 개발(Low-Code Development)을 통한 비즈니스 민첩성 극대화
App Builder AI: 앱 개발을 어떻게 간소화하나요?
