공부한 것 꼭꼭 씹어먹기
[앱시트 AppSheet] 휴가 관리 어플 - 2. 화면에 뿌려주기 본문
메인 화면 생성하기
재밌는 앱시트 시간입니다! 후후후 🤣
화면에 보여줄 재료인 데이터가 다듬어졌으니 화면단을 만져보겠습니다.
왼쪽 UX 메뉴의 Views 탭을 보면 New View버튼이 있습니다. 그 버튼을 눌러 새로운 view를 생성해 줍니다.
그러면 Primary Views 이하에 새로운 view가 생깁니다.
view name은 Upcoming이라고 쓰고 나머지 내용도 아래와 같이 선택해 줍니다.
leave 테이블이 비어있기 때문에 오른쪽 미리보기 화면에 No items라고 표시됩니다.
새로운 뷰를 하나 더 만들어서 Calendar라고 이름 지어줍니다.
기존에 있던 member view도 조금 수정을 했습니다.
일단 여기까지 하고 저장을 하면 미리보기 화면에 3개의 메인 화면이 생깁니다.
아이콘은 각 view의 Display에서 icon을 선택하면 됩니다.
Member view
데이터가 들어있는 Member view부터 다듬어 보겠습니다.
일단 member 테이블의 모든 내용이 다 표출되다 보니 스크롤이 옆으로 길어져 있습니다.
이름과 이메일 아이콘, 직함, 남은 휴가 정도만 보이는 게 좋을 것 같네요.
View Options > Column order에 원하는 항목을 차례로 추가하면 됩니다.
사원 정보를 클릭하면 해당 사원의 상세 정보가 나옵니다.
하단에 View:member_Detail 이라고 써있네요.
Member view에서 member_Detail이라는 view로 이동을 한 것입니다.
member_Detail view는 Ref Views의 member 항목에 있습니다.
마찬가지로 member_Detail view에서 보여주고 싶은 항목만 Column order에 추가하면 됩니다.
Upcoming view
이제 Upcoming view를 해보겠습니다.
데이터가 없으니 데이터를 입력해 볼게요.
Upcoming view 오른쪽 하단에 있는 + 버튼을 클릭합니다.
그러면 leave_Form view가 나오는데요. 자동으로 이런걸 만들어주니 앱시트~ 앱시트~ 하나 봅니다... 호호
테이블명_Detail은 상세 내용을 표출하는 화면이고 _Form이 붙으면 뭔가 입력을 받는 화면을 말합니다.
이왕 leave_Form view로 넘어왔으니 여기부터 다듬어 보겠습니다.
id, 신청일, 상태 변경일 노출을 하지 않게 하려면 Data 쪽으로 가야합니다.
Data > Columns 탭에 가서 leave 테이블을 열어줍니다.
id/신청일/상태 변경일의 SHOW?와 SEARCH?를 체크 해제합니다.
신청자에 로그인한 본인의 이메일이 자동으로 입력되었습니다.
로그인 계정을 바꿔서 테스트 하려면 미리보기 화면 하단 Preview app as 에 이메일 주소를 바꾸면 됩니다.
휴가를 신청하고 저장했더니 Upcoming 화면에 표출됩니다.
스프레드시트의 leave 탭에도 방금 입력한 내용이 추가되네요!
화면에서 입력한 값이 데이터베이스인 스프레드시트에도 바로 반영이 되는 것입니다.
Calendar view
이제 마지막으로 Calendar 화면을 보겠습니다.
아직은 달력 화면에 휴가 내역이 표시되지 않고 있습니다.
Calendar view의 내용을 아래와 같이 채워주면 해당 휴가 날짜에 신청자의 이메일이 표시됩니다.
그런데 뭔가 좀 이상합니다.
banana는 8월 11일 ~ 13일 휴가를 냈는데 12일까지만 휴가를 낸 것처럼 나옵니다.
그리고 cherry는 8월 10일 ~ 11일 휴가를 냈는데 10일 하루만 낸 것처럼 나오네요.
End date에 휴가 종료일을 선택했지만 앱시트는 종료일을 포함하지 않은 기간만 표시해 줍니다. 그래서 휴가 종료일에 하루를 더한 값을 End date 항목에 넣어줘야 하는데요.
Data 메뉴에 가서 leave 테이블의 오른쪽 상단 'Add virtual Column'을 클릭하여 'End date for Calendar view'라는 컬럼을 추가해줍니다.말그대로 스프레드시트(데이터베이스)에는 존재하지 않는 가상의 컬럼입니다. formula는 [휴가 종료일]+1 이고 SHOW?와 SEARCH? 체크박스는 해제합니다.
그리고 다시 UX 메뉴의 Calendar 뷰로 옵니다. view options에서 End date를 방금 만든 End date for Calendar view로 선택해 보면 달력에 표시가 제대로 됩니다.
또한 category를 진행 상태로 선택하면 승인대기/승인/반려 상태에 따라 서로 다른 색상으로 표시됩니다.
여기까지 하고 나니 어느 정도 구색을 갖춘 앱처럼 보이는군요!! 👏👏👏
다음 시간에는 '기능'을 구현해보겠습니다.
여기서 기능이란, 관리자가 휴가를 승인하면 남은 휴가 날짜 계산이 되는 것이라거나 휴가 신청할 때 end date가 start date보다 작을 수 없게 만드는 것들이죠.
여기까지 해야 진짜 쓸모있는 앱이 되겠지요! :)
'노코딩으로 문제 해결하기 > AppSheet - 앱시트' 카테고리의 다른 글
| [앱시트 AppSheet] 휴가 관리 어플 - 3. 기능 구현하기_02 (0) | 2022.08.23 |
|---|---|
| [앱시트 AppSheet] 휴가 관리 어플 - 3. 기능 구현하기_01 (0) | 2022.08.17 |
| [앱시트 AppSheet] 휴가 관리 어플 - 1. 데이터 다듬기 (0) | 2022.08.10 |
| [앱시트 AppSheet] 휴가 관리 어플 - 0. 구상하기 (0) | 2022.08.09 |
| 노코드 앱만들기, 앱시트(appSheet)를 발견하다! (0) | 2022.08.09 |
