Retool Dashboard 101 - (6) ETC

DMIS·2023년 2월 9일
0

Retool

목록 보기
6/6
post-thumbnail

⚠︎ 유의사항

  • velog에 영상 업로드가 불가능한 관계로 스크린샷으로 대체합니다.
  • 스크린샷은 조만간 업데이트 하겠습니다.

✐ 기타

☺︎ 기본

✔︎ 쿼리 - 캐시 설정하기


✔︎ 툴팁


✔︎ progress bar / circle


✔︎ select - 옵션 앞에 색 입히기


✔︎ 모바일 환경에서 그럴싸하게 보여주기

☻ 심화

✔︎ 새로고침 기능(Event handler)


✔︎ 인터랙티브 기능 ({{anything.you_want}})

  • 컴포넌트의 Value에 쿼리 결과 넣기
  • 쿼리의 조건문에 컴포넌트 값 넣기
    select * 
    from orders_order
    where modified >= **{{date1.value}}**
    order by modified desc
    limit 10
  • 헷갈릴 때는 state를 확인하는 것이 좋습니다.
    • 궁금한 부분에 커서를 올려놓으면 아래 사진과 같은 화면이 나오는데, Inspect 버튼을 눌러 확인할 수 있습니다.

    • 우측 하단의 디버그 버튼을 눌러 확인하실 수도 있습니다.

      ![스크린샷 2023-02-03 오전 8.19.30.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cd62ea63-6ec6-4a82-a0cd-cef72ef74f0e/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2023-02-03_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_8.19.30.png)

      예시

      select * 
      from orders_order
      order by modified desc
      limit 10

  • .(dot)을 누르고 나오는 것들을 확인하면서 기능을 만들면 좋습니다.
    • 위의 예시에서 {{query1.data.amount['0']}} 와 같이 입력하면 어떤 것이 나올까요? 당연하게도 179900이 나오게 됩니다.

✔︎ CSS 가져오기

profile
Data + Math

0개의 댓글