기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # 구성 요소 참조 이 주제에서는 각 App Studio의 구성 요소, 속성에 대해 자세히 설명하고 구성 예제를 포함합니다. ## 공통 구성 요소 속성 이 섹션에서는 애플리케이션 스튜디오의 여러 구성 요소에서 공유되는 일반적인 속성과 기능을 간략하게 설명합니다. 각 속성 유형에 대한 특정 구현 세부 정보 및 사용 사례는 구성 요소에 따라 다를 수 있지만 이러한 속성의 일반적인 개념은 App Studio 전체에서 일관되게 유지됩니다. ### 이름 각 구성 요소에 대해 기본 이름이 생성되지만를 편집하여 각 구성 요소의 고유한 이름으로 변경할 수 있습니다. 이 이름을 사용하여 동일한 페이지 내의 다른 구성 요소 또는 표현식에서 구성 요소 및 해당 데이터를 참조합니다. 제한: 구성 요소 이름에 공백을 포함하지 마세요. 문자, 숫자, 밑줄 및 달러 기호만 포함할 수 있습니다. 예: `userNameInput`, `ordersTable`, `metricCard1`. ### 기본 값, 보조 값 및 값 애플리케이션 스튜디오의 많은 구성 요소는 구성 요소 내에 표시되는 콘텐츠 또는 데이터를 결정하는 값 또는 표현식을 지정하기 위한 필드를 제공합니다. 이러한 필드는 구성 요소 유형 및 용도에 `Value`따라 `Primary value``Secondary value`, 또는 단순히 로 레이블이 지정되는 경우가 많습니다. `Primary value` 필드는 일반적으로 구성 요소 내에서 눈에 띄게 표시되어야 하는 기본 값, 데이터 포인트 또는 콘텐츠를 정의하는 데 사용됩니다. 사용 가능한 경우 `Secondary value` 필드는 기본 값과 함께 추가 또는 지원 값 또는 정보를 표시하는 데 사용됩니다. `Value` 필드를 사용하면 구성 요소에 표시해야 하는 값 또는 표현식을 지정할 수 있습니다. 이러한 필드는 정적 텍스트 입력과 동적 표현식을 모두 지원합니다. 표현식을 사용하면 애플리케이션 내의 다른 구성 요소, 데이터 소스 또는 변수의 데이터를 참조하여 동적 및 데이터 기반 콘텐츠 표시를 활성화할 수 있습니다. #### 표현식에 대한 구문 이러한 필드에 표현식을 입력하는 구문은 일관된 패턴을 따릅니다. ``` {{expression}} ``` 여기서 *표현*식은 표시하려는 값 또는 데이터로 평가되는 유효한 표현식입니다. ##### 예: 정적 텍스트 + 기본 값: `"123"` 또는와 같은 정적 숫자 또는 값을 직접 입력할 수 있습니다`"$1,999.99"`. + 보조 값: `"Goal"` 또는와 같은 정적 텍스트 레이블을 입력할 수 있습니다`"Projected Revenue"`. + 값: `"since last month"` 또는와 같은 정적 문자열을 입력할 수 있습니다`"Total Quantity"`. ##### 예: 표현식 + `Hello, {{currentUser.firstName}}`: 현재 로그인한 사용자의 이름이 인 인사말을 표시합니다. + `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`: 사용자의 역할에 따라 다른 대시보드 제목을 조건부로 표시합니다. + `{{ui.componentName.data?.[0]?.fieldName}}`: ID가 인 구성 요소의 데이터에 있는 첫 번째 항목에서 `fieldName` 필드 값을 검색합니다`componentName`. + `{{ui.componentName.value * 100}}`: ID가 인 구성 요소의 값에 대한 계산을 수행합니다`componentName`. + `{{ui.componentName.value + ' items'}}`: 구성 요소의 값을 ID `componentName` 및 문자열과 연결합니다`' items'`. + `{{ui.ordersTable.data?.[0]?.orderNumber}}`: `ordersTable` 구성 요소의 첫 번째 데이터 행에서 주문 번호를 검색합니다. + `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`: `salesMetrics` 구성 요소의 첫 번째 데이터 행에서 총 수익을 15% 늘려 예상 수익을 계산합니다. + `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`: `customerProfile` 구성 요소의 데이터에서 이름과 성을 연결합니다. + `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`: `orderDetails` 구성 요소의 주문 날짜를 보다 읽기 쉬운 날짜 문자열로 포맷합니다. + `{{ui.productList.data?.length}}`: `productList` 구성 요소에 연결된 데이터의 총 제품 수를 표시합니다. + `{{ui.discountPercentage.value * ui.orderTotal.value}}`: 할인율과 주문 합계를 기준으로 할인 금액을 계산합니다. + `{{ui.cartItemCount.value + ' items in cart'}}`: 레이블과 함께 장바구니의 항목 수를 표시합니다`items in cart`. 이러한 표현식 필드를 사용하면 애플리케이션 내에서 동적 데이터 기반 콘텐츠를 생성하여 사용자의 컨텍스트 또는 애플리케이션 상태에 맞는 정보를 표시할 수 있습니다. 이를 통해 더욱 개인화된 대화형 사용자 경험을 제공할 수 있습니다. ### Label **레이블** 속성을 사용하면 구성 요소의 캡션 또는 제목을 지정할 수 있습니다. 이 레이블은 일반적으로 구성 요소와 함께 또는 구성 요소 위에 표시되므로 사용자가 목적을 이해하는 데 도움이 됩니다. 정적 텍스트와 표현식을 모두 사용하여 레이블을 정의할 수 있습니다. #### 예: 정적 텍스트 레이블 필드에 "이름" 텍스트를 입력하면 구성 요소에 "이름"이 레이블로 표시됩니다. #### 예: 표현식 ##### 예: 소매점 다음 예제에서는 각 사용자에 대해 레이블을 개인 설정하므로 인터페이스가 개인에 맞게 조정된 느낌을 줍니다. ``` {{currentUser.firstName}} {{currentUser.lastName}}'s Account ``` ##### 예: SaaS 프로젝트 관리 다음 예제에서는 선택한 프로젝트에서 데이터를 가져와 컨텍스트별 레이블을 제공하므로 사용자가 애플리케이션 내에서 방향을 유지하는 데 도움이 됩니다. ``` Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}} ``` ##### 예: 의료 클리닉 다음 예제에서는 현재 사용자의 프로필과 의사 정보를 참조하여 환자에게 보다 개인화된 경험을 제공합니다. ``` Dr. {{ui.doctorProfileTable.data.firstName}} {{ui.doctorProfileTable.data.lastName}} ``` ### Placeholder 자리 표시자 속성을 사용하면 구성 요소가 비어 있을 때 구성 요소 내에 표시되는 힌트 또는 지침 텍스트를 지정할 수 있습니다. 이를 통해 사용자는 예상 입력 형식을 이해하거나 추가 컨텍스트를 제공할 수 있습니다. 정적 텍스트와 표현식을 모두 사용하여 자리 표시자를 정의할 수 있습니다. #### 예: 정적 텍스트 `Enter your name` **자리 표시자** 필드에 텍스트를 입력하면 구성 요소가 자리 표시자 텍스트`Enter your name`로 표시됩니다. #### 예: 표현식 ##### 예: 금융 서비스 `Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account`이 예제에서는 선택한 계정에서 데이터를 가져와 관련 프롬프트를 표시하므로 은행 고객이 인터페이스를 직관적으로 사용할 수 있습니다. ##### 예: 전자 상거래 `Enter the coupon code for {{ui.cartTable.data.currency}} total` 여기의 자리 표시자는 사용자의 장바구니 콘텐츠에 따라 동적으로 업데이트되므로 원활한 체크아웃 경험을 제공합니다. ##### 예: 의료 클리닉 `Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms`이 애플리케이션은 환자의 연령을 참조하는 표현식을 사용하여 보다 개인화되고 유용한 자리 표시자를 만들 수 있습니다. ### 소스 **소스** 속성을 사용하면 구성 요소의 데이터 소스를 선택할 수 있습니다. 선택하면 , `entity` `expression`또는 데이터 소스 유형 중에서 선택할 수 있습니다`automation`. #### 개체 **엔터티**를 데이터 소스로 선택하면 구성 요소를 애플리케이션의 기존 데이터 엔터티 또는 모델에 연결할 수 있습니다. 이는 애플리케이션 전체에서 활용하려는 데이터 구조 또는 스키마가 잘 정의된 경우에 유용합니다. 엔터티 데이터 소스를 사용하는 경우: + 구성 요소에 표시할 정보가 포함된 데이터 모델 또는 엔터티가 있는 경우(예: "Name", "Description", "Price"와 같은 필드가 있는 "Products" 엔터티). + 데이터베이스, API 또는 기타 외부 데이터 소스에서 데이터를 동적으로 가져와 구성 요소에 표시해야 하는 경우. + 애플리케이션의 데이터 모델에 정의된 관계 및 연결을 활용하려는 경우. ##### 개체에 대한 쿼리 선택 구성 요소를 전체 개체가 아닌 개체에서 데이터를 검색하는 특정 쿼리에 연결하는 것이 좋습니다. 엔터티 데이터 소스에는 기존 쿼리에서 선택하거나 새 쿼리를 생성할 수 있는 옵션이 있습니다. 쿼리를 선택하면 다음을 수행할 수 있습니다. + 특정 기준에 따라 구성 요소에 표시되는 데이터를 필터링합니다. + 쿼리에 파라미터를 전달하여 데이터를 동적으로 필터링하거나 정렬합니다. + 쿼리에 정의된 복잡한 조인, 집계 또는 기타 데이터 조작 기술을 활용합니다. 예를 들어, 애플리케이션에 , `Name` `Email`및와 같은 필드가 있는 `Customers`엔터티가 있는 경우. `PhoneNumber` 테이블 구성 요소를이 엔터티에 연결하고 상태에 따라 고객을 필터링하는 사전 정의된 `ActiveCustomers` 데이터 작업을 선택할 수 있습니다. 이렇게 하면 전체 고객 데이터베이스가 아닌 테이블의 활성 고객만 표시할 수 있습니다. ##### 개체 데이터 소스에 파라미터 추가 개체를 데이터 소스로 사용하는 경우 구성 요소에 파라미터를 추가할 수도 있습니다. 이러한 파라미터를 사용하여 구성 요소에 표시된 데이터를 필터링, 정렬 또는 변환할 수 있습니다. 예를 들어 , `Name`, `Description` `Price`및 같은 필드가 있는 `Products` 개체가 있는 경우 `Category` 제품 목록을 표시하는 `category` 테이블 구성 요소에 라는 파라미터를 추가할 수 있습니다. 사용자가 드롭다운에서 범주를 선택하면 테이블은 데이터 작업의 `{{params.category}}` 표현식을 사용하여 선택한 범주에 속하는 제품만 표시하도록 자동으로 업데이트됩니다. #### 표현식 **표현식을** 데이터 소스로 선택하여 사용자 지정 표현식 또는 계산을 입력하여 구성 요소에 대한 데이터를 동적으로 생성합니다. 이는 변환을 수행하거나, 여러 소스의 데이터를 결합하거나, 특정 비즈니스 로직을 기반으로 데이터를 생성해야 할 때 유용합니다. **표현식** 데이터 소스를 사용해야 하는 경우: + 데이터 모델에서 직접 사용할 수 없는 데이터를 계산하거나 도출해야 하는 경우(예: 수량 및 가격을 기준으로 총 주문 금액 계산). + 여러 엔터티 또는 데이터 소스의 데이터를 결합하여 복합 보기를 생성하려는 경우(예: 고객 연락처 정보와 함께 고객의 주문 내역 표시). + 특정 규칙 또는 조건을 기반으로 데이터를 생성해야 하는 경우(예: 사용자의 검색 기록을 기반으로 "권장 제품" 목록 표시). 예를 들어 이번 달의 총 수익을 표시해야 하는 *지표* 구성 요소가 있는 경우 다음과 같은 표현식을 사용하여 월별 수익을 계산하고 표시할 수 있습니다. ``` {{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}} ``` ##### 자동화 구성 요소를 애플리케이션의 기존 **자동화** 또는 워크플로에 연결하려면 자동화를 데이터 소스로 선택합니다. 이는 구성 요소의 데이터 또는 기능이 특정 프로세스 또는 워크플로의 일부로 생성되거나 업데이트될 때 유용합니다. **자동화** 데이터 소스를 사용해야 하는 경우: + 구성 요소에 표시된 데이터가 특정 자동화 또는 워크플로의 결과인 경우(예: 승인 프로세스의 일부로 업데이트된 "대기 중인 승인" 테이블). + 자동화 내의 이벤트 또는 조건을 기반으로 구성 요소에 대한 작업 또는 업데이트를 트리거하려는 경우(예: 지표를 SKU의 최신 판매 수치로 업데이트). + 자동화를 통해 애플리케이션의 다른 서비스 또는 시스템과 구성 요소를 통합해야 하는 경우(예: 타사 API에서 데이터를 가져와 테이블에 표시). 예를 들어 작업 애플리케이션 프로세스를 통해 사용자를 안내하는 단계 흐름 구성 요소가 있는 경우입니다. Stepflow 구성 요소는 작업 애플리케이션 제출, 신원 조회 및 제안 생성을 처리하는 자동화에 연결할 수 있습니다. 자동화가 이러한 단계를 진행함에 따라 단계 흐름 구성 요소는 애플리케이션의 현재 상태를 반영하도록 동적으로 업데이트할 수 있습니다. 각 구성 요소에 적합한 데이터 소스를 신중하게 선택하면 애플리케이션의 사용자 인터페이스가 올바른 데이터 및 로직으로 구동되도록 하여 사용자에게 원활하고 매력적인 경험을 제공할 수 있습니다. ### 다음과 같은 경우 표시됩니다. **Visible if** 속성을 사용하여 특정 조건 또는 데이터 값을 기반으로 구성 요소 또는 요소를 표시하거나 숨깁니다. 이는 애플리케이션 사용자 인터페이스의 특정 부분에 대한 가시성을 동적으로 제어하려는 경우에 유용합니다. 속성이 다음 구문을 사용하는 **경우 표시:** ``` {{expression ? true : false}} ``` 또는 ``` {{expression}} ``` 여기서 *표현*식은 `true` 또는 로 평가되는 부울 표현식입니다`false`. 표현식이 로 평가되면 `true`구성 요소가 표시됩니다. 표현식이 로 평가되면 `false`구성 요소가 숨겨집니다. 표현식은 애플리케이션 내의 다른 구성 요소, 데이터 소스 또는 변수의 값을 참조할 수 있습니다. #### 표현식 예제인 경우 표시 ##### 예: 이메일 입력을 기반으로 암호 입력 필드 표시 또는 숨기기 이메일 입력 필드와 암호 입력 필드가 있는 로그인 양식이 있다고 가정해 보겠습니다. 사용자가 이메일 주소를 입력한 경우에만 암호 입력 필드를 표시하려고 합니다. 표현식인 경우 다음 Visible을 사용할 수 있습니다. ``` {{ui.emailInput.value !== ""}} ``` 이 표현식은 `emailInput` 구성 요소의 값이 빈 문자열이 아닌지 확인합니다. 사용자가 이메일 주소를 입력하면 표현식이 로 평가`true`되고 암호 입력 필드가 표시됩니다. 이메일 필드가 비어 있으면 표현식이 로 평가`false`되고 암호 입력 필드가 숨겨집니다. ##### 예: 드롭다운 선택을 기반으로 추가 양식 필드 표시 사용자가 드롭다운 목록에서 범주를 선택할 수 있는 양식이 있다고 가정해 보겠습니다. 선택한 범주에 따라 더 구체적인 정보를 수집하기 위해 추가 양식 필드를 표시하거나 숨기려고 합니다. 예를 들어 사용자가 *제품* 범주를 선택하는 경우 다음 표현식을 사용하여 추가 *제품 세부 정보* 필드를 표시할 수 있습니다. ``` {{ui.categoryDropdown.value === "Products"}} ``` 사용자가 *서비스* 또는 *컨설팅* 범주를 선택하는 경우이 표현식을 사용하여 다른 추가 필드 세트를 표시할 수 있습니다. ``` {{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}} ``` ##### 예: 기타 구성 요소의 값이 빈 문자열이 아닌 경우 구성 `textInput1` 요소를 표시하려면: ``` {{ui.textInput1.value === "" ? false : true}} ``` 구성 요소를 항상 표시하려면: ``` {{true}} ``` 구성 요소의 값이 빈 문자열이 아닌 경우 구성 `emailInput` 요소를 표시하려면: ``` {{ui.emailInput.value !== ""}} ``` ### 다음과 같은 경우 비활성화됨 **Disabled if** 기능을 사용하면 특정 조건 또는 데이터 값에 따라 구성 요소를 조건부로 활성화하거나 비활성화할 수 있습니다. 이는 구성 요소의 활성화 여부를 결정하는 부울 표현식을 수락하는 **Disabled if** 속성을 사용하여 수행됩니다. 속성이 다음 구문을 사용하는 **경우 비활성화됨**: ``` {{expression ? true : false}} ``` 또는 ``` {{expression}} ``` #### 표현식 예제인 경우 비활성화됨 ##### 예: 양식 검증을 기반으로 제출 버튼 비활성화 입력 필드가 여러 개인 양식이 있고 모든 필수 필드가 올바르게 채워질 때까지 제출 버튼을 비활성화하려는 경우 다음 **Disabled If** 표현식을 사용할 수 있습니다. ``` {{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}} ``` 이 표현식은 필수 입력 필드(`nameInput`, `emailInput`, `passwordInput`)가 비어 있는지 확인합니다. 필드가 비어 있으면 표현식이 로 평가`true`되고 제출 버튼이 비활성화됩니다. 필수 필드를 모두 입력하면 표현식이 로 평가`false`되고 제출 버튼이 활성화됩니다. **Visible if** 및 **Disabled ff** 속성에서 이러한 유형의 조건 표현식을 사용하면 사용자 입력에 적응하는 동적 및 응답형 사용자 인터페이스를 생성하여 애플리케이션 사용자에게 보다 간소화되고 관련성이 높은 환경을 제공할 수 있습니다. 여기서 *표현*식은 true 또는 false로 평가되는 부울 표현식입니다. 예제: ``` {{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string. {{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid. ``` #### 컨테이너 레이아웃 레이아웃 속성은 구성 요소 내의 콘텐츠 또는 요소가 정렬되고 배치되는 방식을 결정합니다. 여러 레이아웃 옵션을 사용할 수 있으며, 각 레이아웃 옵션은 아이콘으로 표시됩니다. + **열 레이아웃**:이 레이아웃은 콘텐츠 또는 요소를 단일 열에 세로로 정렬합니다. + **2개 열 레이아웃**:이 레이아웃은 구성 요소를 동일한 너비의 2개 열로 분할하므로 콘텐츠 또는 요소를 나란히 배치할 수 있습니다. + **행 레이아웃**:이 레이아웃은 콘텐츠 또는 요소를 단일 행에 가로로 정렬합니다. ##### Orientation(방향) + **가로**:이 레이아웃은 콘텐츠 또는 요소를 가로로 정렬합니다. + **세로**:이 레이아웃은 콘텐츠 또는 요소를 단일 열에 세로로 정렬합니다. + **인라인 래핑**:이 레이아웃은 콘텐츠 또는 요소를 가로로 정렬하지만 요소가 사용 가능한 너비를 초과하면 다음 줄로 래핑됩니다. ##### 정렬 + **왼쪽**: 콘텐츠 또는 요소를 구성 요소의 왼쪽에 정렬합니다. + **Center**: 구성 요소 내에서 콘텐츠 또는 요소를 가로로 중앙에 배치합니다. + **오른쪽**: 콘텐츠 또는 요소를 구성 요소의 오른쪽에 정렬합니다. ##### 너비 **Width** 속성은 구성 요소의 가로 크기를 지정합니다. 상위 컨테이너 또는 사용 가능한 공간을 기준으로 구성 요소의 너비를 나타내는 0%\$1100% 사이의 백분율 값을 입력할 수 있습니다. ##### Height **Height** 속성은 구성 요소의 세로 크기를 지정합니다. "auto" 값은 콘텐츠 또는 사용 가능한 공간에 따라 구성 요소의 높이를 자동으로 조정합니다. ##### 사이의 공간 속성 **사이의 공간에** 따라 구성 요소 내의 콘텐츠 또는 요소 간의 간격이 결정됩니다. 0px(간격 없음)에서 64px 사이의 값을 4px 단위로 선택할 수 있습니다(예: 4px, 8px, 12px 등). ##### 패딩 **패딩** 속성은 콘텐츠 또는 요소와 구성 요소의 엣지 사이의 공간을 제어합니다. 0px(패딩 없음)에서 64px 사이의 값을 4px 단위로 선택할 수 있습니다(예: 4px, 8px, 12px 등). ##### 배경 **백그라운드**는 구성 요소의 백그라운드 색상 또는 스타일을 활성화하거나 비활성화합니다. 이러한 레이아웃 속성은 구성 요소 내에서 콘텐츠를 정렬하고 배치할 뿐만 아니라 구성 요소 자체의 크기, 간격 및 시각적 모양을 제어할 수 있는 유연성을 제공합니다. ## 데이터 구성 요소 이 섹션에서는 **테이블**, **세부 정보**, **지표**, **양식** 및 **반복기** 구성 요소를 포함하여 애플리케이션 스튜디오에서 사용할 수 있는 다양한 데이터 구성 요소를 다룹니다. 이러한 구성 요소는 애플리케이션 내에서 데이터를 표시, 수집 및 조작하는 데 사용됩니다. ### 표 **테이블** 구성 요소에는 행 및 열과 함께 테이블 형식의 데이터가 표시됩니다. 데이터베이스의 항목 또는 레코드 목록과 같은 구조화된 데이터를 체계적이고 easy-to-read 방식으로 표시하는 데 사용됩니다. #### 테이블 속성 **테이블** 구성 요소는 , `Name` `Source`및와 같은 다른 구성 요소와 몇 가지 공통 속성을 공유합니다`Actions`. 이러한 속성에 대한 자세한 내용은 섹션을 참조하세요[공통 구성 요소 속성](#common-properties). **테이블** 구성 요소에는 공통 속성 외에도 , 및를 비롯한 특정 속성 `Columns` `Search and export`및 구성 옵션이 있습니다`Expressions`. ##### 열 이 섹션에서는 테이블에 표시할 열을 정의할 수 있습니다. 각 열은 다음 속성으로 구성할 수 있습니다. + **형식**: 필드의 데이터 유형입니다. 예: text, number, date. + **열 레이블**: 열의 헤더 텍스트입니다. + **값**:이 열에 표시되어야 하는 데이터 소스의 필드입니다. 이 필드를 사용하면 열 셀에 표시해야 하는 값 또는 표현식을 지정할 수 있습니다. 표현식을 사용하여 연결된 소스 또는 기타 구성 요소의 데이터를 참조할 수 있습니다. 예: `{{currentRow.title}}` -이 표현식은 열 셀의 현재 행에서 *제목* 필드의 값을 표시합니다. + **정렬 활성화**:이 토글을 사용하면 특정 열에 대한 정렬 기능을 활성화하거나 비활성화할 수 있습니다. 활성화하면 사용자는이 열의 값을 기반으로 테이블 데이터를 정렬할 수 있습니다. ##### 검색 및 내보내기 **테이블** 구성 요소는 검색 및 내보내기 기능을 활성화하거나 비활성화하는 다음과 같은 토글을 제공합니다. + **검색 표시**이 토글을 활성화하면 테이블에 검색 입력 필드가 추가되어 사용자가 표시된 데이터를 검색하고 필터링할 수 있습니다. + **내보내기 표시**이 토글을 활성화하면 테이블에 내보내기 옵션이 추가되어 사용자가 CSV와 같은 다양한 형식으로 테이블 데이터를 다운로드할 수 있습니다. **참고** 기본적으로 검색 기능은 테이블에 로드된 데이터로 제한됩니다. 검색을 완전히 사용하려면 모든 데이터 페이지를 로드해야 합니다. ##### 페이지당 행 테이블의 페이지당 표시할 행 수를 지정할 수 있습니다. 그런 다음 사용자는 페이지 간에 이동하여 전체 데이터 세트를 볼 수 있습니다. ##### 미리 가져오기 제한 각 쿼리 요청에서 미리 가져올 최대 레코드 수를 지정합니다. 최대값은 3000입니다. ##### 작업 **작업** 섹션에서 다음 속성을 구성합니다. + **작업 위치**: **오른쪽으로 고정**이 활성화되면 사용자 스크롤과 관계없이 추가된 모든 작업이 항상 테이블 오른쪽에 표시됩니다. + **작업**: 테이블에 작업 버튼을 추가합니다. 사용자가 클릭할 때 다음과 같이 지정된 작업을 수행하도록 이러한 버튼을 구성할 수 있습니다. + 구성 요소 작업 실행 + 다른 페이지로 이동 + 데이터 작업 호출 + 사용자 지정 JavaScript 실행 + 자동화 간접 호출 ##### Expressions **테이블** 구성 요소는 테이블의 기능과 상호 작용을 사용자 지정하고 향상시킬 수 있는 표현식과 행 수준 작업 기능을 사용할 수 있는 여러 영역을 제공합니다. 이를 통해 테이블 내에서 데이터를 동적으로 참조하고 표시할 수 있습니다. 이러한 표현식 필드를 활용하여 동적 열을 생성하고, 행 수준 작업에 데이터를 전달하고, 애플리케이션 내의 다른 구성 요소 또는 표현식에서 테이블 데이터를 참조할 수 있습니다. ##### 예: 행 값 참조 `{{currentRow.columnName}}` 또는 `{{currentRow["Column Name"]}}` 이러한 표현식을 사용하면 렌더링되는 현재 행에 대한 특정 열의 값을 참조할 수 있습니다. *columnName* 또는 *열 이름을* 참조하려는 열의 실제 이름으로 바꿉니다. 예시: + `{{currentRow.productName}}` 현재 행의 제품 이름을 표시합니다. + `{{currentRow["Supplier Name"]}}` 현재 행의 공급업체 이름을 표시합니다. 여기서 열 헤더는 *공급업체 이름*입니다. + `{{currentRow.orderDate}}` 현재 행의 주문 날짜를 표시합니다. ##### 예: 선택한 행 참조 `{{ui.table1.selectedRow["columnName"]}}`이 표현식을 사용하면 ID table*1을 사용하여 테이블에서 현재 선택한 행에 대한 특정 열의 값을 참조할 수 있습니다*. *table1*을 테이블 구성 요소의 실제 ID로 바꾸고 *columnName*을 참조하려는 열의 이름으로 바꿉니다. 예시: + `{{ui.ordersTable.selectedRow["totalAmount"]}}` ID *ordersTable*과 함께 테이블에서 현재 선택한 행의 총 금액을 표시합니다. + `{{ui.customersTable.selectedRow["email"]}}` 테이블에서 현재 선택한 행의 이메일 주소를 ID *customersTable*과 함께 표시합니다. + `{{ui.employeesTable.selectedRow["department"]}}` 테이블에서 현재 선택한 행의 부서를 ID *employeesTable*과 함께 표시합니다. ##### 예: 사용자 지정 열 생성 기본 데이터 작업, 자동화 또는 표현식에서 반환된 데이터를 기반으로 테이블에 사용자 지정 열을 추가할 수 있습니다. 기존 열 값과 JavaScript 표현식을 사용하여 새 열을 생성할 수 있습니다. 예시: + `{{currentRow.quantity * currentRow.unitPrice}}` 수량 및 단위 가격 열을 곱하여 총 가격을 표시하는 새 열을 생성합니다. + `{{new Date(currentRow.orderDate).toLocaleDateString()}}` 주문 날짜를 더 읽기 쉬운 형식으로 표시하는 새 열을 생성합니다. + `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}` 각 행의 전체 이름과 이메일 주소를 표시하는 새 열을 생성합니다. ##### 예: 열 표시 값 사용자 지정: 열 매핑의 필드를 설정하여 테이블 열 내 `Value` 필드의 표시 값을 사용자 지정할 수 있습니다. 이렇게 하면 표시된 데이터에 사용자 지정 형식 지정 또는 변환을 적용할 수 있습니다. 예시: + `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}` 각 행의 등급 값을 기반으로 별 이모티콘을 표시합니다. + `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}` 각 행에 대해 대문자로 표시된 각 단어와 함께 범주 값을 표시합니다. + `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`: 각 행의 상태 값을 기반으로 색상이 지정된 원 이모티콘과 텍스트를 표시합니다. ##### 행 수준 버튼 작업 `{{currentRow.columnName}}` 또는 이러한 표현식을 사용하여 선택한 행의 데이터로 다른 페이지로 이동하거나 행의 데이터로 자동화를 트리거하는 등 행 수준 작업 내에서 참조된 행의 컨텍스트를 전달할 `{{currentRow["Column Name"]}}` 수 있습니다. 예시: + 행 작업 열에 편집 버튼이 있는 경우 파라미터`{{currentRow.orderId}}`로를 전달하여 선택한 주문의 ID가 있는 주문 편집 페이지로 이동할 수 있습니다. + 행 작업 열에 삭제 버튼이 있는 경우 주문을 삭제`{{currentRow.customerName}}`하기 전에 고객에게 확인 이메일을 보내는 자동화에 전달할 수 있습니다. + 행 작업 열에 세부 정보 보기 버튼이 있는 경우 주문 세부 정보를 본 직원을 로깅하는 `{{currentRow.employeeId}}` 자동화로 전달할 수 있습니다. 이러한 표현식 필드와 행 수준 작업 기능을 활용하여 특정 요구 사항에 따라 데이터를 표시하고 조작하는 고도로 사용자 지정된 대화형 테이블을 생성할 수 있습니다. 또한 행 수준 작업을 애플리케이션 내의 다른 구성 요소 또는 자동화와 연결하여 원활한 데이터 흐름과 기능을 구현할 수 있습니다. ### 세부 정보 **세부 정보** 구성 요소는 특정 레코드 또는 항목에 대한 세부 정보를 표시하도록 설계되었습니다. 단일 개체 또는 행과 관련된 포괄적인 데이터를 제공하는 전용 공간을 제공하므로 심층적인 세부 정보를 표시하거나 데이터 입력 및 편집 작업을 용이하게 하는 데 적합합니다. #### 세부 정보 속성 **세부 정보** 구성 요소는 , `Name` `Source`및와 같은 다른 구성 요소와 몇 가지 공통 속성을 공유합니다`Actions`. 이러한 속성에 대한 자세한 내용은 섹션을 참조하세요[공통 구성 요소 속성](#common-properties). **세부 정보** 구성 요소에는 , 및 `Fields``Layout`를 비롯한 특정 속성 및 구성 옵션도 있습니다`Expressions`. #### 레이아웃 **레이아웃** 섹션에서는 **세부 정보** 구성 요소 내에서 필드의 배열 및 표시를 사용자 지정할 수 있습니다. 다음과 같은 옵션을 구성할 수 있습니다. + **열 수**: 필드를 표시할 열 수를 지정합니다. + **필드 순서 지정**: 필드를 끌어서 놓아 모양을 재정렬합니다. + **간격 및 정렬**: 구성 요소 내의 필드 간격 및 정렬을 조정합니다. #### 표현식 및 예제 **세부 정보** 구성 요소는 구성 요소 내의 데이터를 동적으로 참조하고 표시할 수 있는 다양한 표현식 필드를 제공합니다. 이러한 표현식을 사용하면 애플리케이션의 데이터 및 로직과 원활하게 연결되는 사용자 지정 및 대화형 **세부 정보** 구성 요소를 생성할 수 있습니다. ##### 예: 데이터 참조 `{{ui.details.data[0]?.["colName"]}}`:이 표현식을 사용하면 **세부 정보** 구성 요소에 연결된 데이터 배열의 첫 번째 항목(인덱스 0)에 대해 "colName"이라는 열의 값을 ID "details"로 참조할 수 있습니다. "colName"을 참조하려는 열의 실제 이름으로 바꿉니다. 예를 들어 다음 표현식은 "details" 구성 요소에 연결된 데이터 배열의 첫 번째 항목에 대한 "customerName" 열의 값을 표시합니다. ``` {{ui.details.data[0]?.["customerName"]}} ``` **참고** 이 표현식은 **세부 정보** 구성 요소가 참조되는 테이블과 동일한 페이지에 있고 **세부 정보** 구성 요소에서 테이블의 첫 번째 행에 있는 데이터를 표시하려는 경우에 유용합니다. ##### 예: 조건부 렌더링 `{{ui.table1.selectedRow["colName"]}}`:이 표현식은 ID *table1*이 있는 테이블에서 선택한 행에 *colName*이라는 열에 대한 데이터가 있는 경우 true를 반환합니다. 테이블에서 선택한 행이 비어 있는지 여부에 따라 **세부 정보** 구성 요소를 조건부로 표시하거나 숨기는 데 사용할 수 있습니다. 예제: **Detail** 구성 요소의 `Visible if` 속성에서이 표현식을 사용하여 테이블에서 선택한 행을 기반으로 조건부로 표현식을 표시하거나 숨길 수 있습니다. ``` {{ui.table1.selectedRow["customerName"]}} ``` 이 표현식이 true로 평가되면(*table1* 구성 요소에서 선택한 행에 *customerName* 열 값이 있음) **세부 정보** 구성 요소가 표시됩니다. 표현식이 false로 평가되면(즉, 선택한 행이 비어 있거나 "customerName" 값이 없는 경우) **세부 정보** 구성 요소가 숨겨집니다. ##### 예: 조건부 표시 `{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`:이 표현식은 구성 요소 또는 데이터 필드의 값을 기반으로 이모티콘을 조건부로 표시합니다. 분류: + `ui.Component.value`: ID 구성 요소가 있는 *구성 요소의* 값을 참조합니다. + `=== "green"`: 구성 요소의 값이 문자열 "green"과 같은지 확인합니다. + `? "🟢"`: 조건이 true인 경우에 녹색 원 이모티콘이 표시됩니다. + `: ui.Component.value === "yellow" ? "🟡"`: 첫 번째 조건이 false인 경우는 구성 요소의 값이 문자열 "노란색"과 같은지 확인합니다. + `? "🟡"`: 두 번째 조건이 true이면에 노란색 사각형 이모티콘이 표시됩니다. + `: ui.detail1.data?.[0]?.CustomerStatus`: 두 조건이 모두 false인 경우 세부 정보 구성 요소에 연결된 데이터 배열의 첫 번째 항목의 "CustomerStatus" 값을 ID "detail1"로 참조합니다. 이 표현식은 **세부 정보** 구성 요소 내의 구성 요소 또는 데이터 필드 값을 기반으로 이모티콘 또는 특정 값을 표시하는 데 사용할 수 있습니다. ### Metrics **지표** 구성 요소는 주요 지표 또는 데이터 포인트를 카드와 유사한 형식으로 표시하는 시각적 요소입니다. 중요한 정보 또는 성능 지표를 제시하는 간결하고 시각적으로 매력적인 방법을 제공하도록 설계되었습니다. #### 지표 속성 **지표** 구성 요소는 , `Name` `Source`및와 같은 다른 구성 요소와 몇 가지 일반적인 속성을 공유합니다`Actions`. 이러한 속성에 대한 자세한 내용은 섹션을 참조하세요[공통 구성 요소 속성](#common-properties). #### 추세 지표의 추세 기능을 사용하면 표시되는 지표의 성능에 대한 시각적 지표를 표시하거나 시간 경과에 따라 변경할 수 있습니다. ##### 추세 값 이 필드를 사용하면 추세 방향과 크기를 결정하는 데 사용해야 하는 값 또는 표현식을 지정할 수 있습니다. 일반적으로 이는 특정 기간 동안의 변경 또는 성능을 나타내는 값입니다. 예제: ``` {{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}} ``` 이 표현식은 "salesMetrics" 지표에 연결된 데이터의 첫 번째 항목에서 month-over-month 수익 값을 검색합니다. ##### 긍정적 추세 이 필드를 사용하면 긍정적 추세에 대한 조건을 정의하는 표현식을 입력할 수 있습니다. 표현식은 true 또는 false로 평가되어야 합니다. 예제: ``` {{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}} ``` 이 표현식은 month-over-month 수익 값이 0보다 큰지 확인하여 긍정적인 추세를 나타냅니다. ##### 부정적 추세 이 필드를 사용하면 부정적인 추세에 대한 조건을 정의하는 표현식을 입력할 수 있습니다. 표현식은 true 또는 false로 평가되어야 합니다. 예제: ``` {{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}} ``` 이 표현식은 month-over-month 수익 값이 0보다 작은지 확인하여 부정적인 추세를 나타냅니다. ##### 색상 막대 이 토글을 사용하면 색상 막대 표시를 활성화하거나 비활성화하여 추세 상태를 시각적으로 표시할 수 있습니다. ##### 색상 막대 예제: ##### 예: 판매 지표 추세 + **추세 값**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}` + **긍정적 추세**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}` + **부정적 추세**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}` + **색상 막대**: 활성화됨 ##### 예: 인벤토리 지표 추세 + **추세 값**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}` + **긍정적 추세**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}` + **부정적 추세**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}` + **색상 표시줄**: 활성화됨 ##### 예: 고객 만족도 추세 + **추세 값**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}` + **긍정적 추세**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}` + **부정적 추세**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}` + **색상 막대**: 활성화됨 이러한 추세 관련 속성을 구성하면 표시되는 **지표**의 성능을 시각적으로 표현하거나 시간 경과에 따라 변경되는 지표 구성 요소를 생성할 수 있습니다. 이러한 표현식을 활용하여 데이터를 동적으로 참조하고 표시하는 고도로 사용자 지정되고 대화형인 지표 구성 요소를 생성하여 애플리케이션 내에서 주요 지표, 성능 지표 및 데이터 기반 시각화를 표시할 수 있습니다. #### 지표 표현식 예제 속성 패널에서 표현식을 입력하여 제목, 기본 값, 보조 값 및 값 캡션을 표시하여 값을 동적으로 표시할 수 있습니다. ##### 예: 기본 값 참조 `{{ui.metric1.primaryValue}}`:이 표현식을 사용하면 동일한 페이지 내의 다른 구성 요소 또는 표현식에서 ID *metric1*을 사용하여 **지표** 구성 요소의 기본 값을 참조할 수 있습니다. 예: `{{ui.salesMetrics.primaryValue}}`는 *salesMetrics* **지표** 구성 요소의 기본 값을 표시합니다. ##### 예: 보조 값 참조 `{{ui.metric1.secondaryValue}}`:이 표현식을 사용하면 동일한 페이지 내의 다른 구성 요소 또는 표현식의 ID *metric1*을 사용하여 **지표** 구성 요소의 보조 값을 참조할 수 있습니다. 예: `{{ui.revenueMetrics.secondaryValue}}`는 *revenueMetrics* **지표** 구성 요소의 보조 값을 표시합니다. ##### 예: 데이터 참조 `{{ui.metric1.data}}`:이 표현식을 사용하면 동일한 페이지 내의 다른 ** **구성 요소 또는 표현식의 ID *metric1*을 사용하여 지표 구성 요소의 데이터를 참조할 수 있습니다. 예: `{{ui.kpiMetrics.data}}`는 *kpiMetrics* 지표 구성 요소에 연결된 데이터를 참조**합니다**. ##### 예: 특정 데이터 값 표시: `{{ui.metric1.data?.[0]?.id}}`:이 표현식은 ID **metric1을 사용하여 지표** 구성 요소에 연결된 데이터의 특정 정보를 표시하는 방법의 예입니다. ** 데이터에 첫 번째 항목의 특정 속성을 표시하려는 경우에 유용합니다. 분류: + `ui.metric1`: ID **metric***1*을 사용하여 지표 구성 요소를 참조합니다. + `data`: 해당 구성 요소에 연결된 정보 또는 데이터 세트를 나타냅니다. + `?.[0]`: 해당 데이터 세트의 첫 번째 항목 또는 항목을 의미합니다. + `?.id`: 첫 번째 항목 또는 항목의 *ID* 값 또는 식별자를 표시합니다. 예: `{{ui.orderMetrics.data?.[0]?.orderId}}`는 *orderMetrics* 지표 구성 요소에 연결된 데이터에 첫 번째 항목의 orderId *orderId* 값을 표시합니다. **** ##### 예: 데이터 길이 표시 `{{ui.metric1.data?.length}}`:이 표현식은 ID **metric***1*을 사용하여 지표 구성 요소에 연결된 데이터의 길이(항목 수)를 표시하는 방법을 보여줍니다. 데이터의 항목 수를 표시하려는 경우에 유용합니다. 분류: + `ui.metric1.data`: 구성 요소에 연결된 데이터 세트를 참조합니다. + `?.length`: 해당 데이터 세트의 총 항목 수 또는 항목 수에 액세스합니다. 예: `{{ui.productMetrics.data?.length}}`는 *productMetrics* **지표** 구성 요소에 연결된 데이터의 항목 수를 표시합니다. ### 리피터 **Repeater** 구성 요소는 제공된 데이터 소스를 기반으로 요소 컬렉션을 생성하고 표시할 수 있는 동적 구성 요소입니다. 애플리케이션의 사용자 인터페이스 내에서 목록, 그리드 또는 반복 패턴을 쉽게 생성할 수 있도록 설계되었습니다. 몇 가지 사용 사례는 다음과 같습니다. + 계정의 각 사용자에 대한 카드 표시 + 이미지와 장바구니에 추가할 버튼이 포함된 제품 목록 표시 + 사용자가 액세스할 수 있는 파일 목록 표시 **Repeater** 구성 요소는 콘텐츠가 풍부한 **테이블** 구성 요소와 구별됩니다. **테이블** 구성 요소에는 엄격한 행 및 열 형식이 있습니다. **리피터**는 데이터를 보다 유연하게 표시할 수 있습니다. #### 리피터 속성 **Repeater** 구성 요소는 , `Name` `Source`및와 같은 다른 구성 요소와 몇 가지 공통 속성을 공유합니다`Actions`. 이러한 속성에 대한 자세한 내용은 섹션을 참조하세요[공통 구성 요소 속성](#common-properties). 일반적인 속성 외에도 **Repeater** 구성 요소에는 다음과 같은 추가 속성 및 구성 옵션이 있습니다. #### 항목 템플릿 **항목 템플릿**은 데이터 소스의 각 항목에 대해 반복될 구조와 구성 요소를 정의할 수 있는 컨테이너입니다. **텍스트**, **이미지**, **버튼** 또는 각 항목을 나타내는 데 필요한 기타 구성 요소와 같은 다른 구성 요소를이 컨테이너로 끌어서 놓을 수 있습니다. **항목 템플릿** 내에서 형식의 표현식을 사용하여 현재 항목의 속성 또는 값을 참조할 수 있습니다`{{currentItem.propertyName}}`. 예를 들어 데이터 소스에 `itemName` 속성이 포함된 경우 `{{currentItem.itemName}}`를 사용하여 현재 항목의 항목 이름(들)을 표시할 수 있습니다. #### 레이아웃 **레이아웃** 섹션에서는 반복기 구성 요소 내에서 반복되는 요소의 배열을 구성할 수 있습니다. ##### Orientation(방향) + **목록**: 반복되는 요소를 단일 열에 수직으로 정렬합니다. + **그리드**: 반복되는 요소를 여러 열이 있는 그리드 레이아웃에 정렬합니다. ##### 페이지당 행 목록 레이아웃의 페이지당 표시할 행 수를 지정합니다. 페이지 매김은 지정된 행 수를 오버플로하는 항목에 제공됩니다. ##### 페이지당 열 및 행(그리드) + **열**: 그리드 레이아웃의 열 수를 지정합니다. + **페이지당 행 수**: 그리드 레이아웃의 페이지당 표시할 행 수를 지정합니다. 지정된 그리드 차원을 오버플로하는 항목에 대해 페이지 매김이 제공됩니다. #### 표현식 및 예제 **Repeater** 구성 요소는 구성 요소 내의 데이터를 동적으로 참조하고 표시할 수 있는 다양한 표현식 필드를 제공합니다. 이러한 표현식을 사용하면 애플리케이션의 데이터 및 로직과 원활하게 연결되는 사용자 지정 대화형 **리피터** 구성 요소를 생성할 수 있습니다. ##### 예: 항목 참조 + `{{currentItem.propertyName}}`: **항목 템플릿** 내에서 현재 항목의 속성 또는 값을 참조합니다. + `{{ui.repeaterID[index]}}`: 리피터 구성 요소의 특정 항목을 인덱스별로 참조합니다. ##### 예: 제품 목록 렌더링 + **소스**: *제품* 개체를 데이터 소스로 선택합니다. + **항목 템플릿**: 안에 **텍스트** 구성 요소가 있는 **컨테이너** 구성 요소를 추가하여 제품 이름(`{{currentItem.productName}}`)을 표시하고 **이미지** 구성 요소를 추가하여 제품 이미지를 표시합니다(`{{currentItem.productImageUrl}}`). + **레이아웃**:를 `Orientation` 로 설정하고 원하는 `Rows per Page` 대로를 `List` 조정합니다. ##### 예: 사용자 아바타 그리드 생성 + **소스**: 표현식을 사용하여 사용자 데이터 배열(예: `[{name: 'John', avatarUrl: '...'}, {...}, {...}]`)을 생성합니다. + **항목 템플릿**: **이미지** 구성 요소를 추가하고 `Source` 속성을 로 설정합니다`{{currentItem.avatarUrl}}`. + **레이아웃**:를 `Orientation`로 설정하고`Grid`, `Columns` 및의 수를 지정하고`Rows per Page`, 필요에 `Padding` 따라 `Space Between` 및를 조정합니다. `Repeater` 구성 요소를 사용하면 동적 데이터 기반 사용자 인터페이스를 생성하여 요소 컬렉션을 렌더링하는 프로세스를 간소화하고 수동 반복 또는 하드 코딩의 필요성을 줄일 수 있습니다. ### 양식 양식 구성 요소는 사용자 입력을 캡처하고 애플리케이션 내에서 데이터 입력 작업을 용이하게 하도록 설계되었습니다. 입력 필드, 드롭다운, 확인란 및 기타 양식 제어를 표시하는 구조화된 레이아웃을 제공하므로 사용자가 데이터를 원활하게 입력하거나 수정할 수 있습니다. 테이블과 같은 양식 구성 요소 내부에 다른 구성 요소를 중첩할 수 있습니다. #### 양식 속성 **양식** 구성 요소는 , `Name` `Source`및와 같은 다른 구성 요소와 몇 가지 공통 속성을 공유합니다`Actions`. 이러한 속성에 대한 자세한 내용은 섹션을 참조하세요[공통 구성 요소 속성](#common-properties). #### 양식 생성 **양식 생성** 기능을 사용하면 선택한 데이터 소스를 기반으로 양식 필드를 자동으로 채워 빠르게 생성할 수 있습니다. 이렇게 하면 많은 수의 필드를 표시해야 하는 양식을 작성할 때 시간과 노력을 절약할 수 있습니다. ****양식 생성** 기능을 사용하려면:** 1. **양식** 구성 요소의 속성에서 **양식 생성** 섹션을 찾습니다. 1. 양식 필드를 생성하는 데 사용할 데이터 소스를 선택합니다. 이는 애플리케이션에서 사용할 수 있는 엔터티, 워크플로 또는 기타 데이터 소스일 수 있습니다. 1. 양식 필드는 필드 레이블, 유형 및 데이터 매핑을 포함하여 선택한 데이터 소스를 기반으로 자동으로 생성됩니다. 1. 생성된 필드를 검토하고 검증 규칙 추가 또는 필드 순서 변경과 같은 필요한 사용자 지정을 수행합니다. 1. 양식 구성에 만족하면 **제출**을 선택하여 생성된 필드를 **양식** 구성 요소에 적용합니다. **양식 생성** 기능은 애플리케이션에 사용자 입력을 캡처해야 하는 잘 정의된 데이터 모델 또는 엔터티 세트가 있는 경우 특히 유용합니다. 양식 필드를 자동으로 생성하면 시간을 절약하고 애플리케이션 양식 간의 일관성을 보장할 수 있습니다. **양식 생성** 기능을 사용한 후 특정 요구 사항에 맞게 **양식** 구성 요소의 레이아웃, 작업 및 표현식을 추가로 사용자 지정할 수 있습니다. #### 표현식 및 예제 다른 구성 요소와 마찬가지로 표현식을 사용하여 **양식** 구성 요소 내의 데이터를 참조하고 표시할 수 있습니다. 예제: + `{{ui.userForm.data.email}}`: ID가 인 **양식** 구성 요소에 연결된 데이터 소스의 `email` 필드 값을 참조합니다`userForm`. **참고** 공통 속성에 [공통 구성 요소 속성](#common-properties) 대한 자세한 표현식 예제는 섹션을 참조하세요. 이러한 속성을 구성하고 표현식을 활용하면 애플리케이션의 데이터 소스 및 로직과 원활하게 통합되는 사용자 지정 대화형 양식 구성 요소를 생성할 수 있습니다. 이러한 구성 요소를 사용하여 사용자 입력을 캡처하고, 미리 채워진 데이터를 표시하고, 양식 제출 또는 사용자 상호 작용을 기반으로 작업을 트리거할 수 있습니다. ### Stepflow **Stepflow** 구성 요소는 애플리케이션 내의 다단계 프로세스 또는 워크플로를 통해 사용자를 안내하도록 설계되었습니다. 각 단계마다 고유한 입력, 검증 및 작업 세트를 제공하는 구조화되고 직관적인 인터페이스를 제공합니다. Stepflow 구성 요소는 , `Name` `Source`및와 같은 다른 구성 요소와 몇 가지 공통 속성을 공유합니다`Actions`. 이러한 속성에 대한 자세한 내용은 섹션을 참조하세요[공통 구성 요소 속성](#common-properties). **Stepflow** 구성 요소에는 , 및와 같은 추가 속성 `Step Navigation` `Validation`및 구성 옵션이 있습니다`Expressions`. ## AI 구성 요소 ### AI 생성 **Gen AI** 구성 요소는 애플리케이션 스튜디오 내에서 채팅을 사용하여 AI를 사용하여 구성 요소와 함께 제공되는 로직을 그룹화하는 데 사용되는 그룹화 컨테이너입니다. 채팅을 사용하여 구성 요소를 생성하면 구성 요소가 **Gen AI** 컨테이너로 그룹화됩니다. 이 구성 요소의 편집 또는 사용에 대한 자세한 내용은 섹션을 참조하세요[앱 빌드 또는 편집](generative-ai.md#generative-ai-build-app). ## 텍스트 및 숫자 구성 요소 ### 텍스트 입력 **텍스트 입력** 구성 요소를 사용하면 사용자가 애플리케이션 내에서 텍스트 데이터를 입력하고 제출할 수 있습니다. 이름, 주소 또는 기타 텍스트 정보와 같은 사용자 입력을 캡처하는 간단하고 직관적인 방법을 제공합니다. + `{{ui.inputTextID.value}}`: 입력 필드에 제공된 값을 반환합니다. + `{{ui.inputTextID.isValid}}`: 입력 필드에 제공된 값의 유효성을 반환합니다. ### 텍스트 **텍스트** 구성 요소는 애플리케이션 내에서 텍스트 정보를 표시하는 데 사용됩니다. 표현식에서 생성된 정적 텍스트, 동적 값 또는 콘텐츠를 표시하는 데 사용할 수 있습니다. ### 텍스트 영역 **텍스트 영역** 구성 요소는 사용자의 여러 줄 텍스트 입력을 캡처하도록 설계되었습니다. 사용자가 설명, 메모 또는 설명과 같은 더 긴 텍스트 항목을 입력할 수 있도록 더 큰 입력 필드 영역을 제공합니다. + `{{ui.textAreaID.value}}`: 텍스트 영역에 제공된 값을 반환합니다. + `{{ui.textAreaID.isValid}}`: 텍스트 영역에서 제공된 값의 유효성을 반환합니다. ### 이메일 **이메일** 구성 요소는 사용자의 이메일 주소를 캡처하도록 설계된 특수 입력 필드입니다. 특정 검증 규칙을 적용하여 입력한 값이 올바른 이메일 형식을 준수하는지 확인할 수 있습니다. + `{{ui.emailID.value}}`: 이메일 입력 필드에 제공된 값을 반환합니다. + `{{ui.emailID.isValid}}`: 이메일 입력 필드에 제공된 값의 유효성을 반환합니다. ### 암호 **암호** 구성 요소는 사용자가 암호 또는 PIN 코드와 같은 민감한 정보를 입력하도록 특별히 설계된 입력 필드입니다. 입력한 문자를 마스킹 처리하여 프라이버시와 보안을 유지합니다. + `{{ui.passwordID.value}}`: 암호 입력 필드에 제공된 값을 반환합니다. + `{{ui.passwordID.isValid}}`: 암호 입력 필드에 제공된 값의 유효성을 반환합니다. ### 검색 **검색** 구성 요소는 사용자에게 검색 쿼리를 수행하거나 애플리케이션 내에서 채워진 데이터 내에 검색어를 입력하기 위한 전용 입력 필드를 제공합니다. + `{{ui.searchID.value}}`: 검색 필드에 제공된 값을 반환합니다. ### 전화번호 **전화** 구성 요소는 사용자의 전화번호 또는 기타 연락처 정보를 캡처하도록 조정된 입력 필드입니다. 입력한 값이 올바른 전화번호 형식을 준수하는지 확인하기 위해 특정 검증 규칙 및 형식 지정 옵션을 포함할 수 있습니다. + `{{ui.phoneID.value}}`: 전화 입력 필드에 제공된 값을 반환합니다. + `{{ui.phoneID.isValid}}`: 전화 입력 필드에 제공된 값의 유효성을 반환합니다. ### 숫자 **숫자** 구성 요소는 사용자가 숫자 값을 입력할 수 있도록 특별히 설계된 입력 필드입니다. 입력한 값이 지정된 범위 또는 형식 내의 유효한 숫자인지 확인하기 위해 검증 규칙을 적용할 수 있습니다. + `{{ui.numberID.value}}`: 숫자 입력 필드에 제공된 값을 반환합니다. + `{{ui.numberID.isValid}}`: 숫자 입력 필드에 제공된 값의 유효성을 반환합니다. ### 통화 **통화** 구성 요소는 통화 값 또는 금액을 캡처하기 위한 특수 입력 필드입니다. 통화 기호, 십진수 구분자를 표시하고 통화 입력과 관련된 검증 규칙을 적용하는 형식 지정 옵션을 포함할 수 있습니다. + `{{ui.currencyID.value}}`: 통화 입력 필드에 제공된 값을 반환합니다. + `{{ui.currencyID.isValid}}`: 통화 입력 필드에 제공된 값의 유효성을 반환합니다. ### 세부 정보 페어 **세부 정보 페어** 구성 요소는 키-값 페어 또는 관련 정보 페어를 구조화되고 읽기 가능한 형식으로 표시하는 데 사용됩니다. 일반적으로 특정 항목 또는 개체와 연결된 세부 정보 또는 메타데이터를 제공하는 데 사용됩니다. ## 선택 구성 요소 ### 스위치 **전환** 구성 요소는 사용자가 켜기/끄기, true/false 또는 활성화/비활성화와 같은 두 상태 또는 옵션을 전환할 수 있는 사용자 인터페이스 제어입니다. 현재 상태를 시각적으로 표시하며 사용자가 클릭 또는 탭 한 번으로 변경할 수 있습니다. ### 그룹 전환 **스위치 그룹** 구성 요소는 사용자가 미리 정의된 세트에서 하나 이상의 옵션을 선택할 수 있는 개별 스위치 제어 모음입니다. 선택한 옵션과 선택하지 않은 옵션을 시각적으로 표시하므로 사용자가 사용 가능한 옵션을 더 쉽게 이해하고 상호 작용할 수 있습니다. #### 그룹 표현식 필드 전환 + `{{ui.switchGroupID.value}}`: 앱 사용자가 활성화한 각 스위치의 값을 포함하는 문자열 배열을 반환합니다. ### 확인란 그룹 **확인란 그룹** 구성 요소는 사용자에게 확인란 그룹을 제공하여 여러 옵션을 동시에 선택할 수 있습니다. 사용자에게 옵션 목록에서 하나 이상의 항목을 선택할 수 있는 기능을 제공하려는 경우에 유용합니다. #### 확인란 그룹 표현식 필드 + `{{ui.checkboxGroupID.value}}`: 앱 사용자가 선택한 각 확인란의 값을 포함하는 문자열 배열을 반환합니다. ### 라디오 그룹 **라디오 그룹** 구성 요소는 사용자가 여러 상호 배타적인 선택 항목 중에서 단일 옵션을 선택할 수 있는 라디오 버튼 세트입니다. 한 번에 하나의 옵션만 선택할 수 있으므로 사용자가 명확하고 모호하지 않게 선택할 수 있습니다. #### 라디오 그룹 표현식 필드 다음 필드를 표현식에 사용할 수 있습니다. + `{{ui.radioGroupID.value}}`: 앱 사용자가 선택한 라디오 버튼의 값을 반환합니다. ### 단일 선택 **단일 선택** 구성 요소는 사용자에게 단일 항목을 선택할 수 있는 옵션 목록을 제공합니다. 일반적으로 사용자가 범주, 위치 또는 기본 설정 선택과 같은 미리 정의된 옵션 세트 중에서 선택해야 하는 시나리오에서 사용됩니다. #### 단일 선택 표현식 필드 + `{{ui.singleSelectID.value}}`: 앱 사용자가 선택한 목록 항목의 값을 반환합니다. ### 다중 선택 **다중 선택** 구성 요소는 **단일 선택** 구성 요소와 유사하지만 사용자가 선택 목록에서 여러 옵션을 동시에 선택할 수 있습니다. 사용자가 여러 태그, 관심사 또는 기본 설정 선택과 같이 미리 정의된 옵션 세트에서 여러 항목을 선택해야 하는 경우에 유용합니다. #### 다중 선택 표현식 필드 + `{{ui.multiSelectID.value}}`: 앱 사용자가 선택한 각 목록 항목의 값을 포함하는 문자열 배열을 반환합니다. ## 버튼 및 탐색 구성 요소 애플리케이션 스튜디오는 사용자가 작업을 트리거하고 애플리케이션 내에서 탐색할 수 있도록 다양한 버튼 및 탐색 구성 요소를 제공합니다. ### 버튼 구성 요소 사용 가능한 버튼 구성 요소는 다음과 같습니다. + Button + 개요 버튼 + 아이콘 버튼 + 텍스트 버튼 이러한 버튼 구성 요소는 다음과 같은 공통 속성을 공유합니다. #### 내용 + **버튼 레이블**: 버튼에 표시할 텍스트입니다. #### Type + **버튼**: 표준 버튼입니다. + **개요**: 요약된 스타일의 버튼입니다. + **아이콘**: 아이콘이 있는 버튼입니다. + **텍스트**: 텍스트 전용 버튼입니다. #### Size: 버튼의 크기입니다. 가능한 값은 `Small`, `Medium` 및 `Large`입니다. #### 아이콘 버튼에 표시할 다음과 같은 다양한 아이콘 중에서 선택할 수 있습니다. + 봉투 닫힘 + Bell + Person + 햄버거 메뉴 + 검색 + 동그라미로 표시된 정보 + 기어 + 왼쪽 셰브론 + 오른쪽 셰브론 + 가로 점 + Trash + 편집 + Check]를 선택합니다 + Close + 홈 + Plus #### 트리거 버튼을 클릭하면 트리거할 작업을 하나 이상 구성할 수 있습니다. 사용 가능한 작업 유형은 다음과 같습니다. + **기본** + 구성 요소 작업 실행: 구성 요소 내에서 특정 작업을 실행합니다. + 탐색: 다른 페이지 또는 보기로 이동합니다. + 데이터 작업 호출: 레코드 생성, 업데이트 또는 삭제와 같은 데이터 관련 작업을 트리거합니다. + **고급** + JavaScript: 사용자 지정 JavaScript 코드를 실행합니다. + 자동화 호출: 기존 자동화 또는 워크플로를 시작합니다. #### JavaScript 작업 버튼 속성 버튼을 클릭할 때 사용자 지정 JavaScript 코드를 실행할 `JavaScript` 작업 유형을 선택합니다. ##### 소스 코드 `Source code` 필드에 JavaScript 표현식 또는 함수를 입력할 수 있습니다. 예제: ``` return "Hello World"; ``` 이렇게 하면 버튼을 클릭할 `Hello World` 때 문자열이 반환됩니다. ##### 조건: 다음 경우 실행 JavaScript 작업을 실행할지 여부를 결정하는 부울 표현식을 제공할 수도 있습니다. 이 방식은 다음 구문을 사용합니다. ``` {{ui.textinput1.value !== ""}} ``` 이 예제에서 JavaScript 작업은 `textinput1` 구성 요소의 값이 빈 문자열이 아닌 경우에만 실행됩니다. 이러한 고급 트리거 옵션을 사용하면 애플리케이션의 로직 및 데이터와 직접 통합되는 고도로 사용자 지정된 버튼 동작을 생성할 수 있습니다. 이를 통해 버튼의 내장 기능을 확장하고 사용자 경험을 특정 요구 사항에 맞게 조정할 수 있습니다. **참고** JavaScript 작업이 예상대로 작동하는지 항상 철저하게 테스트합니다. ### 하이퍼링크 **Hyperlink** 구성 요소는 외부 URLs 또는 내부 애플리케이션 경로로 이동할 수 있는 클릭 가능한 링크를 제공합니다. #### 하이퍼링크 속성 ##### 내용 + **하이퍼링크 레이블**: 하이퍼링크 레이블로 표시할 텍스트입니다. ##### URL 외부 웹 사이트 또는 내부 애플리케이션 경로일 수 있는 하이퍼링크의 대상 URL입니다. ##### 트리거 하이퍼링크를 클릭하면 트리거할 작업을 하나 이상 구성할 수 있습니다. 사용 가능한 작업 유형은 버튼 구성 요소의 작업 유형과 동일합니다. ## 날짜 및 시간 구성 요소 ### Date **날짜** 구성 요소를 사용하면 사용자가 날짜를 선택하고 입력할 수 있습니다. **날짜** 구성 요소는 , `Name` `Source`및와 같은 다른 구성 요소와 몇 가지 공통 속성을 공유합니다`Validation`. 이러한 속성에 대한 자세한 내용은 섹션을 참조하세요[공통 구성 요소 속성](#common-properties). 공통 속성 외에도 **날짜** 구성 요소에는 다음과 같은 특정 속성이 있습니다. #### 날짜 속성 ##### 형식 + **YYYY/MM/DD**, **DD/MM/YYYY**, **YYYY/MM/DD**, **YYYY/DD/MM**, **MM/DD**, **DD/MM**: 날짜를 표시해야 하는 형식입니다. ##### 값 + **YYYY-MM-DD**: 날짜 값이 내부적으로 저장되는 형식입니다. ##### 최소 날짜 + **YYYY-MM-DD**: 선택할 수 있는 최소 날짜입니다. **참고** 이 값은 형식과 일치해야 합니다`YYYY-MM-DD`. ##### 최대 날짜 + **YYYY-MM-DD**: 선택할 수 있는 최대 날짜입니다. **참고** 이 값은 형식과 일치해야 합니다`YYYY-MM-DD`. ##### 일정 유형 + **1개월**, **2개월**: 표시할 일정 UI의 유형입니다. ##### 비활성화된 날짜 + **소스**: 비활성화해야 하는 날짜의 데이터 소스입니다. 예: 없음, 표현식. + **비활성화된 날짜**: 다음과 같이 비활성화해야 하는 날짜를 결정하는 표현식입니다. + `{{currentRow.column}}`:이 표현식이 평가되는 것과 일치하는 날짜를 비활성화합니다. + `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: 2023년 1월 1일 이전의 날짜 비활성화 + `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: 주말을 비활성화합니다. ##### 동작 + **Visible if**: **날짜** 구성 요소의 가시성을 결정하는 표현식입니다. + **Disable if**: **날짜** 구성 요소를 비활성화할지 여부를 결정하는 표현식입니다. #### 검증 **검증** 섹션에서는 날짜 입력에 대한 추가 규칙 및 제약 조건을 정의할 수 있습니다. 이러한 검증 규칙을 구성하면 사용자가 입력한 날짜 값이 애플리케이션의 특정 요구 사항을 충족하는지 확인할 수 있습니다. 다음과 같은 유형의 검증을 추가할 수 있습니다. + **필수**:이 토글을 사용하면 사용자가 양식을 제출하기 전에 날짜 값을 입력해야 합니다. + **사용자** 지정: JavaScript 표현식을 사용하여 사용자 지정 검증 규칙을 생성할 수 있습니다. 예제: ``` {{new Date(ui.dateInput.value) < new Date("2023-01-01")}} ``` 이 표현식은 입력한 날짜가 2023년 1월 1일 이전인지 확인합니다. 조건이 true이면 검증이 실패합니다. 검증이 충족되지 않을 때 표시할 사용자 지정 검증 메시지를 제공할 수도 있습니다. ``` "Validation not met. The date must be on or after January 1, 2023." ``` 이러한 검증 규칙을 구성하면 사용자가 입력한 날짜 값이 애플리케이션의 특정 요구 사항을 충족하는지 확인할 수 있습니다. #### 표현식 및 예제 **날짜** 구성 요소는 다음 표현식 필드를 제공합니다. + `{{ui.dateID.value}}`: 사용자가 입력한 날짜 값을 형식으로 반환합니다`YYYY-MM-DD`. ### Time **시간** 구성 요소를 사용하면 사용자가 시간 값을 선택하고 입력할 수 있습니다. **시간** 구성 요소의 다양한 속성을 구성하면 선택 가능한 시간 범위 제한, 특정 시간 비활성화, 구성 요소의 가시성 및 상호 작용 제어와 같은 애플리케이션의 특정 요구 사항을 충족하는 시간 입력 필드를 생성할 수 있습니다. #### 시간 속성 **시간** 구성 요소는 , `Name` `Source`및와 같은 다른 구성 요소와 몇 가지 공통 속성을 공유합니다`Validation`. 이러한 속성에 대한 자세한 내용은 섹션을 참조하세요[공통 구성 요소 속성](#common-properties). **시간** 구성 요소에는 공통 속성 외에도 다음과 같은 특정 속성이 있습니다. ##### 시간 간격 + **5분**, **10분**, **15분**, **20분**, **25분**, **30분**, **60분**: 시간을 선택하는 데 사용할 수 있는 간격입니다. ##### 값 + **HH:MM AA**: 시간 값이 내부적으로 저장되는 형식입니다. **참고** 이 값은 형식과 일치해야 합니다`HH:MM AA`. ##### Placeholder + **일정 설정**: 시간 필드가 비어 있을 때 표시되는 자리 표시자 텍스트입니다. ##### 최소 시간 + **HH:MM AA**: 선택할 수 있는 최소 시간입니다. **참고** 이 값은 형식과 일치해야 합니다`HH:MM AA`. ##### 최대 시간 + **HH:MM AA**: 선택할 수 있는 최대 시간입니다. **참고** 이 값은 형식과 일치해야 합니다`HH:MM AA`. ##### 비활성화된 시간 + **소스**: 비활성화해야 하는 시간의 데이터 소스입니다(예: 없음, 표현식). + **비활성화된 시간**:와 같이 비활성화해야 하는 시간을 결정하는 표현식입니다`{{currentRow.column}}`. ##### 비활성화된 시간 구성 **비활성화된 시간** 섹션을 사용하여 선택할 수 없는 시간 값을 지정할 수 있습니다. ##### 소스 + **없음**: 비활성화된 시간은 없습니다. + **표현식**: JavaScript 표현식을 사용하여와 같이 비활성화해야 하는 시간을 결정할 수 있습니다`{{currentRow.column}}`. ##### 표현식 예: ``` {{currentRow.column === "Lunch Break"}} ``` 이 표현식은 현재 행에 대해 "런치 브레이크" 열이 true인 경우 언제든지 비활성화됩니다. 이러한 검증 규칙과 비활성화된 시간 표현식을 구성하면 사용자가 입력한 시간 값이 애플리케이션의 특정 요구 사항을 충족하는지 확인할 수 있습니다. ##### 동작 + **Visible if**: 시간 구성 요소의 가시성을 결정하는 표현식입니다. + **Disable if**: 시간 구성 요소를 비활성화할지 여부를 결정하는 표현식입니다. ##### 검증 + **필수**: 사용자가 양식을 제출하기 전에 시간 값을 입력해야 하는 토글입니다. + **사용자 지정**: JavaScript 표현식을 사용하여 사용자 지정 검증 규칙을 생성할 수 있습니다. **사용자 지정 검증 메시지**: 사용자 지정 검증이 충족되지 않을 때 표시되는 메시지입니다. 예제: ``` {{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}} ``` 이 표현식은 입력한 시간이 오전 9시 또는 오전 9시 30분인지 확인합니다. 조건이 true이면 검증이 실패합니다. 검증이 충족되지 않을 때 표시할 사용자 지정 검증 메시지를 제공할 수도 있습니다. ``` Validation not met. The time must be 9:00 AM or 9:30 AM. ``` #### 표현식 및 예제 시간 구성 요소는 다음 표현식 필드를 제공합니다. + `{{ui.timeID.value}}`: 사용자가 입력한 시간 값을 HH:MM AA 형식으로 반환합니다. ##### 예: 시간 값 + `{{ui.timeID.value}}`: 사용자가 입력한 시간 값을 형식으로 반환합니다`HH:MM AA`. ##### 예: 시간 비교 + `{{ui.timeInput.value > "10:00 AM"}}`: 시간 값이 오전 10시보다 큰지 확인합니다. + `{{ui.timeInput.value < "05:00 pM"}}`: 시간 값이 오후 5시 미만인지 확인합니다. ### 날짜 범위 **날짜 범위** 구성 요소를 사용하면 사용자가 날짜 범위를 선택하고 입력할 수 있습니다. 날짜 범위 구성 요소의 다양한 속성을 구성하여 선택 가능한 날짜 범위 제한, 특정 날짜 비활성화, 구성 요소의 가시성 및 상호 작용 제어와 같은 애플리케이션의 특정 요구 사항을 충족하는 날짜 범위 입력 필드를 생성할 수 있습니다. #### 날짜 범위 속성 **날짜 범위** 구성 요소는 , `Name` `Source`및와 같은 다른 구성 요소와 몇 가지 공통 속성을 공유합니다`Validation`. 이러한 속성에 대한 자세한 내용은 섹션을 참조하세요[공통 구성 요소 속성](#common-properties). 공통 속성 외에도 **날짜 범위** 구성 요소에는 다음과 같은 특정 속성이 있습니다. ##### 형식 + **MM/DD/YYYY**: 날짜 범위를 표시해야 하는 형식입니다. ##### 시작일 + **YYYY-MM-DD**: 범위의 시작으로 선택할 수 있는 최소 날짜입니다. **참고** 이 값은 형식과 일치해야 합니다`YYYY-MM-DD`. ##### 종료일 + **YYYY-MM-DD**: 범위의 끝으로 선택할 수 있는 최대 날짜입니다. **참고** 이 값은 형식과 일치해야 합니다`YYYY-MM-DD`. ##### Placeholder + **일정 설정**: 날짜 범위 필드가 비어 있을 때 표시되는 자리 표시자 텍스트입니다. ##### 최소 날짜 + **YYYY-MM-DD**: 선택할 수 있는 최소 날짜입니다. **참고** 이 값은 형식과 일치해야 합니다`YYYY-MM-DD`. ##### 최대 날짜 + **YYYY-MM-DD**: 선택할 수 있는 최대 날짜입니다. **참고** 이 값은 형식과 일치해야 합니다`YYYY-MM-DD`. ##### 일정 유형 + **1개월**: 표시할 일정 UI의 유형입니다. 예를 들어 한 달입니다. + **2개월**: 표시할 일정 UI의 유형입니다. 예: 2개월. ##### 필수 일 선택됨 + **0**: 날짜 범위 내에서 선택해야 하는 필수 일수입니다. ##### 비활성화된 날짜 + **소스**: 비활성화해야 하는 날짜의 데이터 소스입니다(예: 없음, 표현식, 개체 또는 자동화). + **비활성화된 날짜**:와 같이 비활성화해야 하는 날짜를 결정하는 표현식입니다`{{currentRow.column}}`. ##### 검증 **검증** 섹션에서는 날짜 범위 입력에 대한 추가 규칙 및 제약 조건을 정의할 수 있습니다. #### 표현식 및 예제 **날짜 범위** 구성 요소는 다음 표현식 필드를 제공합니다. + `{{ui.dateRangeID.startDate}}`: 선택한 범위의 시작 날짜를 형식으로 반환합니다`YYYY-MM-DD`. + `{{ui.dateRangeID.endDate}}`: 선택한 범위의 종료 날짜를 형식으로 반환합니다`YYYY-MM-DD`. ##### 예: 날짜 차이 계산 + `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}` 시작 날짜와 종료 날짜 사이의 일수를 계산합니다. ##### 예: 날짜 범위에 따른 조건부 가시성 + `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}` 선택한 날짜 범위가 2023년을 벗어났는지 확인합니다. ##### 예: 현재 행 데이터를 기반으로 비활성화된 날짜 + `{{currentRow.isHoliday}}` 현재 행의 "isHoliday" 열이 true인 날짜를 비활성화합니다. + `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}` 현재 행의 "dateColumn"을 기반으로 2023년 1월 1일 이전의 날짜를 비활성화합니다. + `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}` 현재 행의 "dateColumn"을 기반으로 주말을 비활성화합니다. ##### 사용자 지정 검증 + `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}` 시작 날짜가 종료 날짜보다 이후인지 확인하여 사용자 지정 검증에 실패합니다. ## 미디어 구성 요소 애플리케이션 스튜디오는 애플리케이션 내에 다양한 미디어 유형을 임베딩하고 표시하기 위한 여러 구성 요소를 제공합니다. ### iFrame 임베드 **iFrame 임베드** 구성 요소를 사용하면 iFrame을 사용하여 애플리케이션 내에 외부 웹 콘텐츠 또는 애플리케이션을 임베드할 수 있습니다. #### iFrame 임베드 속성 ##### URL **참고** 이 구성 요소에 표시되는 미디어의 소스는 애플리케이션의 콘텐츠 보안 설정에서 허용되어야 합니다. 자세한 내용은 [앱의 콘텐츠 보안 설정 보기 또는 업데이트](app-content-security-settings-csp.md) 단원을 참조하십시오. 임베드하려는 외부 콘텐츠 또는 애플리케이션의 URL입니다. ##### 레이아웃 + **너비**: 백분율(%) 또는 고정 픽셀 값(예: 300px)으로 지정된 iFrame의 너비입니다. + **높이**: 백분율(%) 또는 고정 픽셀 값으로 지정된 iFrame의 높이입니다. ### S3 업로드 **S3 업로드** 구성 요소를 사용하면 사용자가 Amazon S3 버킷에 파일을 업로드할 수 있습니다. **S3 업로드** 구성 요소를 구성하면 사용자가 애플리케이션의 Amazon S3 스토리지에 파일을 쉽게 업로드한 다음 애플리케이션의 로직 및 사용자 인터페이스 내에서 업로드된 파일 정보를 활용할 수 있습니다. **참고** 애플리케이션의 파일 업로드 및 스토리지 요구 사항을 지원하는 데 필요한 권한과 Amazon S3 버킷 구성이 마련되어 있는지 확인해야 합니다. #### S3 업로드 속성 ##### S3 구성 + **커넥터**: 파일 업로드에 사용할 사전 구성된 Amazon S3 커넥터를 선택합니다. + **버킷**: 파일이 업로드될 Amazon S3 버킷입니다. + **폴더**: 파일이 저장될 Amazon S3 버킷 내의 폴더입니다. + **파일 이름**: 업로드된 파일의 이름 지정 규칙입니다. ##### 파일 업로드 구성 + **레이블**: 파일 업로드 영역 위에 표시되는 레이블 또는 지침입니다. + **설명**: 파일 업로드에 대한 추가 지침 또는 정보입니다. + **파일 유형**: 업로드할 수 있는 파일 유형입니다. 예: 이미지, 문서 또는 비디오. + **크기**: 업로드할 수 있는 개별 파일의 최대 크기입니다. + **버튼 레이블**: 파일 선택 버튼에 표시되는 텍스트입니다. + **버튼 스타일**: 파일 선택 버튼의 스타일입니다. 예를 들어, 개괄적으로 설명되거나 채워집니다. + **버튼 크기**: 파일 선택 버튼의 크기입니다. ##### 검증 + **최대 파일 수**: 한 번에 업로드할 수 있는 최대 파일 수입니다. + **최대 파일 크기**: 각 개별 파일에 허용되는 최대 크기입니다. ##### 트리거 + **성공 시**: 파일 업로드가 성공할 때 트리거되는 작업입니다. + **실패 시**: 파일 업로드가 실패할 때 트리거되는 작업입니다. #### S3 업로드 표현식 필드 **S3 업로드** 구성 요소는 다음 표현식 필드를 제공합니다. + `{{ui.s3uploadID.files}}`: 업로드된 파일의 배열을 반환합니다. + `{{ui.s3uploadID.files[0]?.size}}`: 지정된 인덱스에서 파일의 크기를 반환합니다. + `{{ui.s3uploadID.files[0]?.type}}`: 지정된 인덱스에서 파일 유형을 반환합니다. + `{{ui.s3uploadID.files[0]?.nameOnly}}`: 지정된 인덱스에서 확장 접미사가 없는 파일 이름을 반환합니다. + `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: 지정된 인덱스에 확장 접미사가 있는 파일의 이름을 반환합니다. #### 표현식 및 예제 ##### 예: 업로드된 파일 액세스 + `{{ui.s3uploadID.files.length}}`: 업로드된 파일 수를 반환합니다. + `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`: 업로드된 파일 이름의 쉼표로 구분된 목록을 반환합니다. + `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`: 업로드된 이미지 파일의 배열만 반환합니다. ##### 예: 파일 업로드 검증 + `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`: 업로드된 파일의 크기가 5MB를 초과하는지 확인합니다. + `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`: 업로드된 모든 파일이 PNG 이미지인지 확인합니다. + `{{ui.s3uploadID.files.length > 3}}`: 파일이 3개 이상 업로드되었는지 확인합니다. ##### 예: 작업 트리거 + `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`: 하나 이상의 파일이 업로드된 경우 성공 메시지를 표시합니다. + `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`: 비디오 파일이 업로드된 경우 비디오 처리 자동화를 트리거합니다. + `{{ui.s3uploadID.files.map(f => f.url)}}`: 업로드된 파일의 URLs을 검색하여 파일을 표시하거나 추가로 처리하는 데 사용할 수 있습니다. 이러한 표현식을 사용하면 업로드된 파일에 액세스하고, 파일 업로드를 검증하고, 파일 업로드 결과를 기반으로 작업을 트리거할 수 있습니다. 이러한 표현식을 활용하면 애플리케이션의 파일 업로드 기능 내에서 더 역동적이고 지능적인 동작을 만들 수 있습니다. **참고** *s3uploadID*를 **S3 업로드** 구성 요소의 ID로 바꿉니다. ### PDF 뷰어 구성 요소 **PDF 뷰어** 구성 요소를 사용하면 사용자가 애플리케이션 내에서 PDF 문서를 보고 상호 작용할 수 있습니다. App Studio는 PDF 소스에 대해 이러한 다양한 입력 유형을 지원합니다. **PDF 뷰어** 구성 요소는 정적 URL, 인라인 데이터 URI 또는 동적으로 생성된 콘텐츠에서 PDF 문서를 애플리케이션에 통합하는 방법에 유연성을 제공합니다. #### PDF 뷰어 속성 ##### 소스 **참고** 이 구성 요소에 표시되는 미디어의 소스는 애플리케이션의 콘텐츠 보안 설정에서 허용되어야 합니다. 자세한 내용은 [앱의 콘텐츠 보안 설정 보기 또는 업데이트](app-content-security-settings-csp.md) 단원을 참조하십시오. 표현식, 개체, URL 또는 자동화일 수 있는 PDF 문서의 소스입니다. ##### 표현식 표현식을 사용하여 PDF 소스를 동적으로 생성합니다. ##### 개체 **PDF 뷰어** 구성 요소를 PDF 문서가 포함된 데이터 엔터티에 연결합니다. ##### URL PDF 문서의 URL을 지정합니다. ##### URL 표시하려는 PDF 문서를 가리키는 URL을 입력할 수 있습니다. 퍼블릭 웹 URL이거나 자체 애플리케이션 내의 URL일 수 있습니다. 예시: `https://example.com/document.pdf` ##### 데이터 URI **데이터 URI**는 애플리케이션 내에 작은 데이터 파일(예: 이미지 또는 PDFs 인라인으로 포함하는 간단한 방법입니다. PDF 문서는 base64 문자열로 인코딩되며 구성 요소의 구성에 직접 포함됩니다. ##### Blob 또는 ArrayBuffer 또한 PDF 문서를 Blob 또는 ArrayBuffer 객체로 제공하여 애플리케이션 내의 다양한 소스에서 PDF 데이터를 동적으로 생성하거나 검색할 수 있습니다. ##### 자동화 **PDF 뷰어** 구성 요소를 PDF 문서를 제공하는 자동화에 연결합니다. ##### 작업 + **다운로드**: 사용자가 PDF 문서를 다운로드할 수 있는 버튼 또는 링크를 추가합니다. ##### 레이아웃 + **너비**: 백분율(%) 또는 고정 픽셀 값(예: 600px)으로 지정된 PDF 뷰어의 너비입니다. + **높이**: 고정 픽셀 값으로 지정된 PDF 뷰어의 높이입니다. ### 이미지 뷰어 **이미지 뷰어** 구성 요소를 사용하면 사용자가 애플리케이션 내의 이미지 파일을 보고 상호 작용할 수 있습니다. #### 이미지 뷰어 속성 ##### 소스 **참고** 이 구성 요소에 표시되는 미디어의 소스는 애플리케이션의 콘텐츠 보안 설정에서 허용되어야 합니다. 자세한 내용은 [앱의 콘텐츠 보안 설정 보기 또는 업데이트](app-content-security-settings-csp.md) 단원을 참조하십시오. + **개체**: **이미지 뷰어** 구성 요소를 이미지 파일이 포함된 데이터 개체에 연결합니다. + **URL**: 이미지 파일의 URL을 지정합니다. + **표현식**: 표현식을 사용하여 이미지 소스를 동적으로 생성합니다. + **자동화**: **이미지 뷰어** 구성 요소를 이미지 파일을 제공하는 자동화에 연결합니다. ##### 대체 텍스트 접근성 목적으로 사용되는 이미지의 대체 텍스트 설명입니다. ##### 레이아웃 + **이미지 맞춤**: 구성 요소 내에서 이미지의 크기를 조정하고 표시하는 방법을 결정합니다. 예: `Contain`, `Cover` 또는 `Fill`. + **너비**: **이미지 뷰어** 구성 요소의 너비로, 백분율(%) 또는 고정 픽셀 값(예: 300px)으로 지정됩니다. + **높이**: 고정 픽셀 값으로 지정된 **이미지 뷰어** 구성 요소의 높이입니다. + **배경**: 이미지 **뷰어** 구성 요소의 배경색 또는 이미지를 설정할 수 있습니다.