단기집중과정 101
10 모듈
5 주

옵션 구성 요소

복사하려면 클릭

웹 애플리케이션에서 다양한 옵션을 선택하기 위한 구성 요소


URL에서 ID를 사용하는 대신 목록에서 국가를 선택할 수 있는 기능이 있는 특별한 Select 구성 요소를 사용하여 필터링을 만드는 것을 선호할 수 있습니다. 이전에 우리는 이미 Relselect 구성 요소를 사용했으며 그 작업의 논리는 매우 유사하지만 Select 덕분에 사용 가능한 모든 국가에서 선택 사항을 제공할 수 있을 뿐만 아니라 자체 옵션을 추가할 수도 있습니다.

구성 요소 Select

Select 설정을 살펴보겠습니다. 테이블에 포함되어야 하는 국가의 도시를 결정하는 선택 사항 및 일반적으로 사용 가능한 모든 도시를 표시하는 기능이 추가되었습니다.


Select 구성 요소를 생성할 때 선택을 수행할 옵션으로 채워야 합니다. 이렇게 하려면 Relselect 에서와 같이 국가의 일반 목록을 가져와야 합니다. 그러나 우리는 이 목록을 Select 에 직접 보내지 않고 사용 가능한 옵션으로 변환합니다. 각 옵션은 Select Option 모델로 표시됩니다. 따라서 Select Options 배열을 변수로 선언하고 루프에서 필요한 데이터로 채웁니다.


이 예에서 필수 Select Options 필드는 Label (제안된 옵션의 텍스트) 및 Value (숫자 식별자)입니다. 이 값을 국가 이름과 ID로 설정하십시오.

루프가 완료되면 국가별로 필터링하지 않고 사용 가능한 모든 도시를 표시하는 옵션을 하나 더 만들고 추가해야 합니다. Label = WorldValue = 0 으로 설정하겠습니다.

옵션을 선택하면 Select onChange 트리거가 실행됩니다. 이를 사용하여 선택한 옵션을 찾아 새 전역 변수 Country selected 에 작성해 보겠습니다. 이 경우 추가 확인이 필요하며, 마지막 옵션(사용 가능한 모든 도시)을 선택한 경우 이 변수의 값을 공백( null )으로 설정해야 합니다.

이 비즈니스 프로세스의 마지막 작업은 테이블의 데이터를 새로 고치는 Refresh 버튼 클릭을 시작하는 것입니다. 새로운 변수의 출현을 고려하여 비즈니스 프로세스도 약간 변경해야 합니다.


이제 테이블에 표시해야 하는 국가의 도시를 선택할 수 있습니다.


마지막으로 다른 옵션을 선택할 수 있는 또 다른 구성 요소인 Dropdown 을 살펴보겠습니다. 주요 차이점은 특정 옵션을 선택하면 선택한 옵션을 기억하는 것보다 즉시 일부 작업을 트리거해야 한다는 것입니다. 기능이 확장된 버튼이라고 할 수 있습니다.

예를 들어 표에서 국가 삭제 버튼을 대신하여 Dropdown 을 사용한다고 가정해 보겠습니다. 이제 데이터베이스의 항목을 즉시 삭제하지 않지만 삭제를 확인하거나 취소할 수 있는 추가 옵션을 불러옵니다.

구성 요소의 일반적인 구성부터 시작하겠습니다. 모양과 사용 가능한 옵션을 선택합시다.


다음으로 우리는 비즈니스 프로세스 자체를 생성할 것입니다. 그리고 첫 번째 작업은 Dropdown 을 클릭한 레코드를 확인하는 것입니다. 일반 버튼의 경우 이 값이 Record ID 로 전달되지만 이 경우 Dropdown 자체도 누르지 않고 원하는 옵션이 있는 자식 구성 요소가 눌러집니다. 따라서 항목 ID를 얻는 것이 조금 더 복잡합니다.

반복되는 표 요소의 경우 Component ID 는 "-" 기호로 구분된 두 부분으로 구성됩니다. 첫 번째 부분은 표준 구성 요소 ID입니다. 그러나 두 번째 부분은 반복 구성 요소의 식별자를 고유하게 만드는 레코드 ID일 뿐입니다.

이것만 알면 우리는 이 ID를 얻기만 하면 됩니다. 따라서 문자열을 부분으로 분할하고( Split string ) 두 번째 부분( index = 1 )의 값을 찾습니다.


다음 단계로 우리는 어떤 옵션이 선택되었는지 알아내야 합니다.


이것이 실제로 삭제를 확인하는 옵션인 경우 적절한 명령을 실행하십시오. 그렇지 않으면 일부 조치가 필요하지 않기 때문에 아무 것도 할 수 없습니다.


이제 데이터베이스에서 레코드를 삭제하는 것이 우발적인 클릭으로부터 보호됩니다.

Was this article helpful?
아직도 답을 찾고 계십니까?