첫번째앱만들기 15강. 월별 필터 기능 만들어 보기
페이지 정보
작성자 MESCIUS
작성일 2020-10-23 10:02 조회 2,480회
댓글 0건
본문
첨부파일
관련링크
이번 강의에서는 앞서 만든 검색 기능에 더하여, 라디오 버튼을 통한 간단한 필터 기능을 만들어 보겠습니다.
오늘도 코딩 없이 Excel 느낌 그대로 시작해봅시다~~!!
14강 신청자 검색 기능 만들어보기에 이어서 시작하겠습니다.
자동 검색 기능 추가
먼저, 알아두면 유용한 기능을 먼저 소개해드리고 본격적으로 들어가 보겠습니다.
일반적으로 많은 사용자들은 검색창에 입력을 하고, 자연스럽게 검색을 기대하고 Enter키를 누릅니다. 하지만 포건시에서는 기본적으로 Enter를 누른다고 해서 검색 버튼을 누른 것과 같은 동작을 할 수 없어 당황하셨을 것입니다.
다행히도, 여러분들을 위해, 원클릭 설정만으로 동일한 기능을 구현할 수 있게 준비해 놓았습니다.
1. 좌측 "프로젝트 탐색기" > "페이지 섹션"에서, "페이지2" 시트를 더블 클릭하여 오픈합니다.
2. "AL5"의 "검색 버튼"을 선택 후, 우측 패널의 "셀 유형 > 기타" 섹션의 "자동 실행"을 "체크(활성화)"해줍니다.
이제 검색창에 입력 후, 사용자가 Enter를 누르면, 검색 버튼을 누른 것과 같은 동일한 동작을 할 수 있습니다.
모던 스타일의 월별 필터 UI
이제 본격적으로, 오늘의 주제인 "월별 필터 기능"을 만들어 보겠습니다.
스마트폰에서 자주 볼 수 있는 스위치 버튼을 만들어, 사용자가 원하는 필터의 스위치를 클릭하면, 해당 조건에 따라서 휴가 목록이 변경되도록 만들어 보겠습니다.
전혀 어렵지 않으며, 따라 오시면 쉽게 이해하실 수 있습니다.
1. 먼저, 좌측 "프로젝트 탐색기" > "페이지 섹션"에서, "페이지2" 시트를 더블 클릭하여 오픈합니다.
2. "G5:V5"까지 선택한 후에, 셀 유형 섹션에서 "라디오 그룹" 타입을 선택합니다.
3. 만들어진 "라디오 그룹"를 선택한 후, 우측 패널의 "셀 유형" > "목록 항목" 섹션의 "항목"들을 아래와 같이 수정해 줍니다.
- 목록 항목 > 항목1 = "전체" 로 수정
- 목록 항목 > 항목2 = "이번달" 로 수정
- 목록 항목 > 항목3 = "다음달" 로 수정
4. 라디오 그룹이 선택된 상태에서, 우측 패널의 "셀 유형">"스타일" 섹션에서 "스위치" 스타일을 선택합니다. 이제 라디오 그룹의 모양이 스마트폰에서 보는 스위치 형태로 변경된 것을 볼 수 있습니다.
Excel 수식으로 기준 시작월(Start Month) 구하기
해당 섹션에서는, 페이지2 시트 위에 월별 필터링에 사용될 이번달, 다음달, 다다음달에 시작날짜 값을 만들어 놓고, 이를 숨김처리하여 실제 웹 페이지 상에는 보이지 않지만, 개발 시에 다양한 방법으로 사용하는 방법에 대해서 안내드리겠습니다.
이제부턴, Excel의 영역이라고 보시면 됩니다.
1. 먼저, "페이지2" 시트의 "AW5:AW7" 열에, 개발 시에 헷갈리지 않도록 각 값에 대한 설명글을 적습니다.
2. "AX5:AX7" 열 각각에 이번달, 다음달, 다다음달의 시작일을 구하는 엑셀 수식을 입력합니다.
- "AX5" (이번달 시작) 셀 : "=DATE(YEAR(TODAY()),MONTH(TODAY()),1)"
- "AX6" (다음달 시작) 셀 : "=DATE(YEAR(TODAY()),MONTH(TODAY())+1,1)"
- "AX7" (다다음달 시작)셀 : "=DATE(YEAR(TODAY()),MONTH(TODAY())+2,1)"
3. 마지막으로 엑셀과 동일한 방법으로 AW 열과 AX열을 선택후, 마우스 오른쪽 버튼을 눌러 나오는 메뉴를 통해, 숨김 처리를 줍니다.
숨김 처리된 열 또는 행은, 포건시 빌더에서만 볼 수 있습니다. 웹 페이지 상에는 노출이 되지 않습니다.
월별 필터 기능 만들기1 - 전체 리스트
다음으로 위에서 생성한 필터 스위치에 "이번달"에 휴가 예정인 사람과 "다음달"에 휴가 예정인 사람을 클릭만으로 필터링할 수 있게 만들어 보겠습니다.
포건시의 강력한 기능인 엑셀 수식 기능을 활용하여, 오늘 날짜를 기준으로 이번달과 다음달의 날짜를 구한 후, 이를 활용하는 방법을 학습할 수 있습니다.
1. "라디오 그룹"를 선택 후, 우측 패널의 "셀 유형" 패널의 "명령 편집…" 을 클릭합니다.
2. "명령 창"의 명령 선택 항목 중, "조건문(If-Else)만들기"를 선택합니다. (조건문을 통해, 선택한 필터의 종류에 따라서 검색 명령을 각각 생성할 예정입니다.)
3. 첫번째 조건문을 만들기 위해 아래와 같이, If 문 섹션에서 "…" 버튼을 눌러 조건을 작성하기 위한 창으로 들어갑니다.
4. "조건 창"에서 "새 조건"을 클릭 한 후에, "열" 컬럼에서 "셀 선택" 버튼을 클릭하여, "라디오 그룹(필터 조건)" 셀을 선택할 준비를 합니다.
5. 셀 선택 버튼 클릭 후에, 나타나는 "조건" 팝업 창을 통해, "라디오 그룹(필터 조건) 셀 (G5)"를 선택하고 원래 "조건 창"으로 돌아 옵니다.
6. 이제 아래와 같이 사용자가 선택한 G5의 필터 조건 값이 "전체"일 때라는 조건을 만들어 주고, 확인을 눌러 완료합니다.
- 연산자 = "같음" 선택
- 값 = "전체" 입력
7. 다음으로, 선택한 필터 항목이 "전체"일 때 작동하는 "Then-Do" 명령 생성을 위해, "…" 버튼을 클릭합니다.
8. ConditionalCommand에 대한 명령 선택 창에서, 아래과 같이 "명령 선택" > "쿼리(Query) 만들기"를 선택 합니다.
9. 휴가 신청자의 "전체" 목록을 불러 올때는, 별도의 조건이 필요 없기에 DataTable 선택항목이 "하계휴가신청" 인지만 확인하고, 확인을 눌러 빠져 나옵니다.
월별 필터 기능 만들기2 - 이번달 리스트
위와 동일한 방법으로 사용자가 "이번달"이라는 필터 버튼을 눌렀을때, "이번달에 휴가를 가는 직원들"을 불러올 수 있도록 만들어 보겠습니다.
1. 동일한 명령 창에서, 좌측 패널의 "조건문 (If-Esle) 만들기" 항목을 선택 후, 우측 패널에서 추가 조건을 만들기 위해 "Else If 추가" 버튼을 클릭합니다.
2. 두번째 조건문을 만들기 위해 아래와 같이, Else-If 문 섹션에서 "…" 버튼을 눌러 조건을 작성하기 위한 창으로 들어갑니다.
3. "조건 창"에서 "새 조건"을 클릭 한 후에, 아래와 같이 사용자가 필터 항목에 "이번달"을 선택하였는지 확인하는 조건을 입력합니다.
- 열 = "라디오 그룹[=G5].값" (우측 "셀 선택" 버튼을 클릭하여, "콤보 상자(검색 조건)" 셀을 선택)
- 연산자 = "같음" 선택
- 값 = "이번달" 입력
4. 선택한 필터 항목이 "이번달"을 선택했을때 작동하는 "Then-Do" 명령 생성을 위해, "…" 버튼을 클릭합니다.
5. ConditionalCommand에 대한 명령 선택 창에서, 아래과 같이 "명령 선택" > "쿼리(Query) 만들기"를 선택 합니다.
6. 아래와 같이 "시작일을 기준으로"에 이번달과 다음달의 시작일 사이에 있는 휴가 신청자의 목록을 불러오기 위해, 우선 아래와 같이 "열"과 "연산자"를 설정해줍니다.
- 열 = "시작일" 컬럼 선택
- 연산자 = "보다 크거나 같음" 선택
7. 이번달의 시작일 값을 설정해주기 위해, "값" 컬럼 우측의 "셀 선택" 버튼을 눌러줍니다.
8. 이번달의 시작일을 계산한 Excel 수식셀(AW5)을 선택하고, 다시 우측 "셀 선택"버튼을 눌러 원래 화면으로 돌아옵니다.
9. 다시 원래 명령화면에서, "새 조건"을 클릭하고, 아래와 같이 이번 달의 마지막 일을 설정해줍니다. 이후 확인을 눌러 "이번달"에 대한 필터 동작을 마무리 합니다.
- 및/또는 = "및" 선택 (두 조건이 모두 만족 해야 하기 때문에)
- 열 = "시작일" 컬럼 선택
- 연산자 = "보다 작음" 선택
- 값 = "=AX6"(다음달 시작일) 선택
월별 필터 기능 만들기3 - 다음달 리스트
위와 동일한 방법으로 사용자가 "다음달"이라는 필터 버튼을 눌렀을때, "다음달에 휴가를 가는 직원들"을 불러올 수 있도록 만들어 보겠습니다.
1. 동일한 명령 창에서, 좌측 패널의 "조건문 (If-Esle) 만들기" 항목을 선택 후, 우측 패널에서 추가 조건을 만들기 위해 "Else If 추가" 버튼을 클릭합니다.
2. 세번째 조건문을 만들기 위해 아래와 같이, Else-If 문 섹션에서 "…" 버튼을 눌러 조건을 작성하기 위한 창으로 들어갑니다.
3. "조건 창"에서 "새 조건"을 클릭 한 후에, 아래과 같이 사용자가 필터 항목에 "다음달"을 선택하였는지 확인하는 조건을 입력합니다.
- 열 = "라디오 그룹[=G5].값" (우측 "셀 선택" 버튼을 클릭하여, "콤보 상자(검색 조건)" 셀을 선택)
- 연산자 = "같음" 선택
- 값 = "다음달" 입력
4. 선택한 필터 항목이 "이번달"을 선택했을때 작동하는 "Then-Do" 명령 생성을 위해, "…" 버튼을 클릭합니다.
5. ConditionalCommand에 대한 명령 선택 창에서, 아래과 같이 "명령 선택" > "쿼리(Query) 만들기"를 선택합니다.
6. 아래와 같이 "시작일을 기준으로"에 다음달과 다다음달의 시작일 사이에 있는 휴가 신청자의 목록을 불러오기 위해, 우선 아래와 같이 설정해줍니다.
[조건1]
- 열 = "시작일" 컬럼 선택
- 연산자 = "보다 크거나 같음" 선택
- 값 = "=AX6"(다음달 시작일) 선택
[조건2]
- 및/또는 = "및" 선택 (두 조건이 모두 만족 해야 하기 때문에)
- 열 = "시작일" 컬럼 선택
- 연산자 = "보다 작음" 선택
- 값 = "=AX7"(다다음달 시작일) 선택
7. 명령창에서 "확인" 버튼을 누르고 모든 설정을 마무리합니다.
이제 실행 버튼을 눌러 정상적으로 동작을 하는지 확인해 보세요.
Forguncy 사용 중 기술 문의 또는 구매에 대한 상담이 필요하실 경우, 언제든지 연락 부탁드립니다.
- 기술 문의 : Forguncy - Q&A | 토론
- 구매 문의 : sales-kor@grapecity.com
- 전화번호 : 1670-0583
댓글목록
등록된 댓글이 없습니다.
