액슈어(Axure) 따라하기 3. 리피터(repeater)를 활용한 조회 목록 - 드랍다운 검색 필터

지난 시간에 액슈어(Axure)의 리피터(repeater)를 활용해서 dataset을 구성해보았는데요.

오늘은 지난 시간에 리피터(repeater)로 구성한 dataset에 드랍다운 검색 필터를 적용해보겠습니다.

 

각종 조회목록 프로토타입(prototype)을 만들때 활용해보면 좋을 것 같습니다.

생각보다 매우 대단히 유용해요. ㅎㅎ

 

먼저 지난 포스팅에서 학습(?)했던 드랍다운리스트와 dataset 구성하기를 활용하여 dataset을 구성합니다.

 

이런 모습을 만들예정이예요.

 

 

드랍다운리스트는 전체, 접수, 처리중, 완료라는 Value를 추가했습니다.

 

조회목록의 제목은 임의로 추가했습니다. ID, 처리상태, 접수자, 접수일, 완료일

 

그리고 repeater dataset 구성인데요.

이 부분이 잘 적용되어야 합니다. (지난 포스팅 확인)

 

그리고 이제 버튼(검색)에 인터랙션을 적용할 예정입니다.

버튼을 선택한 후에 Properties에서 OnClick에 적용합니다.

 

첫 번째 케이스는 드랍다운리스트의 Value가 “전체”일 때,

검색 버튼을 클릭하면 반응할 인터랙션입니다.

 

Add Condition을 클릭하고

Selected option of 에서 Dropdown Menu를 선택한 후에

equals, option = “전체” 일 때라는 의미로 컨디션을 셋팅했습니다.

 

 

이 때 repeater > Remove Filter를 선택클릭합니다.

Repeater를 선택하고 Removed all filters의 체크박스를 선택합니다.

 

케이스 이름도 변경했습니다. (안해도 무방)

 

그리고 케이스를 추가합니다.

 

 

Add Condition을 클릭하고

Selected option of 에서 Dropdown Menu를 선택한 후에

equals, option = “접수” 일 때라는 의미로 컨디션을 셋팅했습니다.

 

 

Repeater를 선택하고

Remove all filters 체크 (이 부분을 체크해야 다른 필터와 중복이 일어나지 않습니다. 필요한 경우에 따라 확인합니다.)

Name을 접수 (중요하지 않음)

Rule에 [[item.status == ‘접수’]] 입력합니다.

[[item.status == ‘(repeater dataset 값)’입니다.

 

같은 방법으로 케이스를 추가합니다.

(이번에는 ‘처리중’을 추가할 예정입니다.)

Repeater를 선택하고

Remove all filters 체크 (이 부분을 체크해야 다른 필터와 중복이 일어나지 않습니다. 필요한 경우에 따라 확인합니다.)

Name을 접수 (중요하지 않음)

 

Rule을 입력하는 방법이 2가지인데요.

Rule에 직접 입력하는 방법과 “fx”를 클릭해서 입력하는 방법이 있습니다.

 

Rule에 “fx”를 클릭합니다.

Repeater / Dataset에서 item.status를 선택하고 [[item.status == ‘처리중’]] 입력합니다.

[[item.status == ‘(repeater dataset 값)’입니다.

 

[[item.status == ‘처리중’]]가 입력된 것을 확인할 수 있습니다.

[[item.status == ‘처리중’]]를 직접 입력해도 동일한 결과를 확인할 수 있습니다.

 

같은 방법으로 케이스를 추가합니다.

(이번에는 ‘완료’을 합니다.)

 

 

이제 4가지 케이스가 적용된 것을 확인할 수 있습니다.

 

공유링크 : https://mziisl.axshare.com

작업파일 : 

Repeater조회필터.rp

다운로드