! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

13강. 신청자 조회 리스트 만들어 보기 > 온라인 스터디

본문 바로가기

첫번째앱만들기 13강. 신청자 조회 리스트 만들어 보기

페이지 정보

작성자 MESCIUS 작성일 2020-07-15 16:53 조회 1,958회 댓글 0건

본문

첨부파일

이번 강의에서는 앞에서 만든 휴가 신청 등록 기능을 통해, 휴가를 신청한 사람의 리스트를 한눈에 볼 수 있도록 만들어 보겠습니다.



오늘도 코딩 없이 Excel 느낌 그대로 시작해봅시다~~!!


12강 신청 완료 페이지 만들기 (다른 페이지로 데이터 전달하기)에 이어서 시작하겠습니다.




리스트뷰를 이용하여 목록 만들기


우선, 기존에 만들었던 페이지 “페이지2” 내용을 모두 지우고 그 위에 리스트뷰를 이용하여 휴가 신청자의 목록을 만들어 보겠습니다.


1. 좌측 “프로젝트 탐색기” > “페이지 섹션” 에서, “페이지2” 시트를 더블 클릭하여 오픈합니다.



2. Ctrl + A를 눌러, “페이지2”의 내용을 모두 선택하고, "모두 지우기"를 통해 내용과 서식을 지워줍니다.




3. “L2:AI3”을 선택하고 아래 작업을 합니다.

  • 셀 병합” | “하계 휴가 신청자 목록”이라고 입력 | 글자크기: 14pt | 굵은 글씨 | 가운데 정렬


4. “G7:AO22”까지 선택 후, 상단 메뉴 바, “” > “ListView로 설정”을 클릭합니다.



5. 다음으로 나타나는 “테이블 선택 창”에서 신청 정보가 취합되어있는, “하계휴가신청” 테이블을 선택합니다.


테이블 선택 창


6. 다음으로, 좌측 “프로젝트 탐색기” > “테이블 섹션” 에서, “하계휴가신청” 테이블을 선택하여 데이터 항목을 확장합니다.



7. 이제 화면에서 보고자 하는 데이터 항목을, “하계휴가신청” 테이블로부터 “리스트뷰”의 파란색 영역에 끌어다 놓으면 됩니다.


  • G7:I7” 선택 후, “하계휴가신청”의 “ID” 끌어다 놓기.
  • J7:M7” 선택 후, “하계휴가신청”의 “사번” 끌어다 놓기.
  • N7:Q7” 선택 후, “하계휴가신청”의 “이름” 끌어다 놓기.
  • R7:V7” 선택 후, “하계휴가신청”의 “부서” 끌어다 놓기.
  • W7:AA7” 선택 후, “하계휴가신청”의 “시작일” 끌어다 놓기.
  • AB7:AF7” 선택 후, “하계휴가신청”의 “종료일” 끌어다 놓기.
  • AG7:AK7” 선택 후, “하계휴가신청”의 “생성일” 끌어다 놓기.

8. 휴가 취소 기능을 위해, (*해당 기능은 뒤에서 구현 하겠습니다.)

  • AL8:AN8” 선택 후, 셀병합 | “취소” 입력


9. “시작일”, “종료일”, “생성일”의 “날짜 형식”을 “간단한 날짜” 형식으로 변경합니다.

  • W8:AK8 선택 후, 상단 메뉴, “” > “숫자” > “간단한 날짜” 선택



리스트뷰 꾸며보기


이번에는 앞에서 만든 리스트뷰를 살짝 커스터마이징을 해보겠습니다. 간편하게 포건시에서 제공해주는 스타일을 활용해 보겠습니다.


1. 앞서 만든 “리스트뷰를 선택” 후에, 상단 메뉴의 “디자인” 메뉴로 이동합니다.



2. “상단 메뉴”에 “빠른 스타일”을 선택한 후, 아래 이미지와 같은 스타일을 선택합니다.



3. G7:AN7 까지 선택 후, “배경색 변경 | 굵은 글씨” 로 변경합니다.



4. 다음으로 “리스트뷰” 위에서 “마우스 오른쪽 버튼”을 눌러 “ListView 설정”을 선택합니다.



5. ListView 설정 창에서, “눈금선 표시” 를 해제하여 리스트뷰 안에 가로, 세로 줄을 제거합니다.


ListView 설정


6. 다음으로 아래와 같이, 리스트뷰를 선택한 후에, “” > “글꼴” 섹션에서 테두리 설정을 눌러, “테두리 없음”을 선택합니다.



7. “G8:AN8”까지 선택 후, “” > “글꼴” 섹션에서 테두리 설정을 눌러, “다른 테두리…”를 선택합니다.



8. 셀 서식 창에서, 아래와 같이 “선 색상”과 “선 스타일”을 선택 후에, 각 셀의 “위, 아래”에만 점선을 그려줍니다.


셀 서식


9. 마지막으로 리스트뷰의 경계를 보여주기 위해, “G23:AN23”까지 선택 후, 아래와 같이 상단에 굵은 테두리 설정을 해주세요.




취소 버튼에 삭제 기능 만들기


다음으로는 앞서 리스트뷰에서 만들었던, “취소” 텍스트에, 클릭 시에 해당 행이 삭제되는 기능을 구현해 보겠습니다.


1. 만든 리스트뷰에서, “취소” 텍스트(AL8)를 선택합니다.


2. 상단 메뉴, “” > “셀 유형” > “하이퍼링크”를 선택합니다.



3. “취소” 텍스트가 선택된 상태에서, 우측 패널의 “셀 유형” > “명령 편집”을 선택합니다.



4. 명령 창에서, “명령 선택” > “데이터 삭제하기” 를 선택합니다.


명령 창


5. “확인 대화 상자 표시” 영역에, “휴가를 취소하시겠습니까?”를 입력 후에 “확인” 버튼을 눌러 마무리합니다.


명령 창


이제 아래와 같이 모든 작업이 완료되었습니다.



실행 버튼을 눌러 정상적으로 동작하는지 확인해 봅니다.


실행 버튼


 


Forguncy 사용 중 기술 문의 또는 구매에 대한 상담이 필요하실 경우, 언제든지 연락 부탁드립니다.



  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.