콘텐츠로 건너뛰기
App Builder Release: Navigation with Route Parameters, Dependent Variables & More

App Builder 릴리스: 경로 매개변수, 종속 변수 등을 사용한 탐색

클라우드 기반 시각적 빌더, 로우 코드 기능 및 새로운 기능을 갖춘 App Builder는 모든 조직에 꼭 필요한 도구입니다. 최신 업데이트를 확인하세요.

5min read

오랫동안 기다려온 기능이 포함된 App Builder TM의 2월 업데이트가 출시되었습니다. 애플리케이션 상태 지원의 일환으로 이제 App Builder에서 변수를 사용하면 특별한 종류의 변수인 경로 매개변수를 통해 애플리케이션 내 탐색이 쉬워집니다.

App Builder에 대해 처음 배우는 경우 이를 조직의 애플리케이션 개발 프로세스에서 핵심 도구로 고려해야 하는 이유를 빠르게 공유하겠습니다.

  • 시각적 앱 빌더 – 제품 관리자, 디자이너, 개발자 및 이해관계자를 위한 통합 플랫폼입니다.
  • 기업이 그 어느 때보다 80% 빠르게 완전한 비즈니스 앱을 설계하고 구축할 수 있도록 지원하는 클라우드 기반 WYSIWYG 드래그 앤 드롭 도구입니다.
  • Figma 및 Sketch 설계에서 생산 준비가 완료된 Blazor 코드, Angular 코드 및 Web Components 코드를 생성하는 로우 코드 툴 입니다.

Infragistics의 로우 코드 App Builder에서 무엇이 새롭고 흥미로운지 살펴보겠습니다.

경로 매개변수를 사용한 앱 탐색

경로 매개변수는 변수로 작동하여 사용자가 값을 생성 및 저장하고, 값을 할당하고, 이를 애플리케이션의 다른 속성에 바인딩할 수 있도록 합니다. 그러나 이러한 경로 매개변수에는 사용자가 앱 내에서 탐색 기능을 구축할 수 있도록 하는 특정 기본 용도가 있습니다. 탐색 경로에 매개변수 바인딩이 필요한 경우 사용자는 경로 매개변수를 바인딩하여 이 프로세스를 용이하게 할 수 있습니다.

경로 매개변수를 사용한 앱 탐색

경로 매개변수 생성

경로 매개변수 생성

탐색 작업 만들기

앱 변수와 경로 매개변수의 주요 차이점

다음은 명심해야 할 몇 가지 사항입니다.

  • 경로 매개변수는 하위 보기에서만 생성될 수 있으며, 하위 보기는 특정 탐색 경로에 대한 방문 페이지 역할을 할 수 있습니다.
  • 경로 매개변수는 '문자열', '숫자' 또는 '부울' 유형만 가능합니다. 다른 유형에 대한 지원은 향후 버전에서 도입될 예정입니다.
  • 경로 매개변수는 초기값을 지원하며, `FALSE` 초기값만 지원하는 `부울` 경로 매개변수를 사용합니다.
  • 경로 매개변수는 변수 설정 작업의 대상 변수가 아닙니다.

경로 매개변수를 생성하는 방법

사용자는 두 가지 방법으로 경로 매개변수를 생성할 수 있습니다.

  • 변수 섹션의 새 변수 >️ 경로 매개변수 흐름을 통해.
  • 속성 패널의 일부인 Route Params 섹션에서 + 추가 버튼을 사용합니다.

매개변수 이름은 변수와 동일한 검증을 거칩니다.

종속변수란?

App Builder 사용자가 보기 및 애플리케이션 수준에서 상태 및 컨텍스트 변수를 정의하여 정교한 데이터 흐름을 위한 애플리케이션을 생성할 수 있는 기능을 제공합니다. 이제 이 릴리스에서는 사용자가 일련의 작업에서 순차적으로 데이터 흐름을 정의할 수 있습니다. 다음 데이터 흐름을 예로 들어 보겠습니다.

Customers -> Customer Orders -> Order Details

이 시나리오에서는 고객 목록에서 고객을 선택하면 특정 CustomerID에 대한 변수를 통해 고객 주문 목록으로 UI가 업데이트됩니다. Customer Orders에서 주문을 선택하면 UI의 다른 부분이 특정 OrderID에 대한 변수를 통해 특정 주문에 대한 세부 정보를 업데이트합니다. CustomerIDOrderID 라는 두 변수는 상위->하위 관계로 관련되어 있으며 이제 UI를 통해 이를 구성할 수 있는 방법이 제공됩니다. 이 시나리오에서는 사용자 상호 작용을 통해 새 OrderID를 제공해야 하므로 CustomerID 값을 변경하면 OrderID 값이 자동으로 재설정되도록 데이터 흐름 정의가 이루어집니다.

계단식 구성 요소 설정을 중심으로 주로 회전하는 다른 시나리오가 있을 수 있습니다. 예를 들어 하나를 지우면 계단식 콤보(국가 -> 주 -> 도시)가 계단식으로 재설정되거나 시작과 끝을 위한 두 개의 날짜 선택기가 있는 예약 필터가 변경이 시작됩니다. 자동 지우기를 끝내고 싶을 수도 있습니다.

Dependent Variables in App Builder

"변수 설정" 작업을 위한 정적 값 입력 기능

App Builder 변수 설정 작업을 사용할 때 소스에 대한 정적 값을 입력할 수 있습니다. 이는 편집기구성요소 (변수 유형 기반)를 통해 가능합니다. 이전에는 변수의 초기 값을 설정할 때 일반 문자열 사용법만 노출했습니다. 그리고 이제는 이것이 바뀌었습니다. 아래에서 데이터 유형에 따른 다양한 편집기를 찾을 수 있습니다.

  • 문자열(기본값) – 문자열 값을 입력할 수 있는 입력 구성 요소입니다.
  • 숫자 – 숫자 값만 허용하도록 입력의 유효성을 검사하는 입력 구성 요소
  • 부울 - true/false 드롭다운 - 기본값은 false입니다.
  • 날짜 – 날짜 선택기 구성 요소를 사용합니다.
정적 값 입력 기능

마무리

결론적으로 App Builder 앱 개발 프로세스의 판도를 바꾸는 역할을 합니다. 클라우드 기반 비주얼 빌더, 로우 코드 기능 및 새로운 기능을 갖춘 이 도구는 모든 조직에 꼭 필요한 도구입니다. 오늘 사용해 보세요! 더 자세한 내용이 필요하시면 다음을 확인해 보시기 바랍니다.

To experience everything, visit your customer portal and get the latest version. 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@infragistics.com and let me know how we can help you continue delivering value to your customers with Infragistics.

데모 요청