셀렉트 7월 뉴스레터
안녕하세요 셀렉트 팀 입니다.
이번 업데이트 소식에는 지도 API, 다양한 차트 라이브러리 등 고도화된 옵션과 그동안 많은 분들이 문의주셨던 2가지 신규 리소스 소식을 전해드립니다.
더불어 셀렉트 어드민에 대해 더 잘 이해하실 수 있게 5가지 템플릿도 추가되었습니다.
지도 표시
네이버지도 API를 활용하여 지도에 마커를 붙이거나, 영역을 지정할 수 있습니다.
지도 표기 기능이 추가되었습니다 display: map
안녕하세요, 셀렉트 팀에서 지도 기능을 추가하였습니다. 위도, 경도 데이터를 바탕으로 마커(marker)를 추가하거나 불러온 데이터를 통해 폴리곤(Polygon) 설정이 가능합니다. 마커를 클릭했을때 모달을 띄워 상세 정보를 조회할 수도 있습니다. 관련하여 도움이 필요하시거나 궁금하신 점은 문의주시기 바랍니다. 감사합니다. 지도 기능 display: map displayFn 으로 네이버지도 API 그대로 추가 가능합니다. 마커, 인포, 폴리곤, 폴리라인 클릭시 모달 띄우기, 액션 띄우기 예제1: 지도에 마커 표시하기 menus: - path: pages/EBulXa name: 지도 마커 pages: - path: pages/EBulXa title: 마커를 클릭하면 모달 열기 blocks: - type: query resource: mysql.qa sqlType: select sql: > SELECT * FROM tes…
신규 차트 컴포넌트
셀렉트 어드민을 통해 여러 차트 라이브러리를 이용하여 빠르게 서비스 지표, 대시보드 페이지 등을 만들 수 있습니다. 각 차트를 살펴보고 우리 팀과 프로젝트에 알맞는 옵션을 선택해보세요.
라이브러리 스크립트를 사용할 수 있기 때문에 ChatGPT 등을 활용하여 나온 결과를 그대로 이용 가능합니다.
차트 라이브러리 추가: plotly, billboard.js, echarts
셀렉트 어드민에서 기존에 제공하던 Chart.js 이외에 여러 차트 라이브러리 선택지를 추가하였습니다. 각 필요한 상황에 알맞게 선택적으로 이용해보세요. 차트 라이브러리 plotly (Plotly Python Graphing Library) 셀렉트어드민 사용법: [displayFn] plotly billboards.js (billboard.js) 셀렉트어드민 사용법: [displayFn] billboardjs echarts (Apache ECharts) 셀렉트어드민 사용법: [displayFn] echarts 셀렉트 어드민 이용시 displayFn block.id와 displayFn안에 차트를 그릴때 ID가 동일해야합니다. sqlMany 기능이 추가되었습니다. (여러개 쿼리 실행시 rows[0], rows[1] 안에 각각 결과가 담깁니다: 지난주/이번주 데이터 비교 등에 사용 가능) displayFn안에서 쓸수있는 변수: rows, id, openModal,…
신규 리소스 추가
AWS DynamoDB와 Supabase 2개의 리소스를 새로 지원합니다.
DynamoDB queryFn 사용법
셀렉트 어드민에서 DynamoDB를 지원합니다. queryFn을 통해 DynamoDB CRUD 페이지를 빠르게 만들어보세요. DynamoDB queryFn 예제 menus: - path: pages/L0Q0s4 name: dynamodb pages: - path: pages/L0Q0s4 title: dynamodb blocks: - type: top class: border-0 mt-5 p-5 bg-slate-50 blocks: - type: query name: 단순조회 resource: dynamodb sqlType: select queryFn: | if (property_id) { const query = { TableName: “test”, KeyConditionExpression: “test = :property…
Supabase queryFn 사용법
셀렉트 어드민에서 Supabase를 지원합니다. queryFn 기능을 통해 코드로 데이터를 처리할 수 있습니다. (참고) Supabase는 PostgreSQL 기반이기 때문에 PostgreSQL 리소스를 선택하고 연결해서 SQL 쿼리로 페이지를 만들수도 있습니다. queryFn 예시 menus: - path: pages/dYFTrb name: Supabase queryFn pages: - path: pages/dYFTrb blocks: - type: query resource: supabase.dev sqlType: select queryFn: | const r = await supabase .from(‘templates’) .select(‘*’) return r searchOptions: enabled: true paginationOptions: enabl…
신규 템플릿
셀렉트 어드민으로 만들 수 있는 페이지를 더 살펴보실 수 있게 5가지 신규 템플릿을 추가하였습니다. 서비스에 로그인하고 여기서 살펴보실 수 있어요.
세부사항 개선
이외에 다양한 편의 기능을 추가하였습니다.
- redirectAfterSubmit: 실행후 특정 페이지로 바로 이동할 수 있습니다.
- closeAfterSubmit: 모달안에서 실행후 창을 바로 닫습니다.
- useModalRow: 모달의 부모 테이블 JSON 데이터를 가져옵니다.
- editorOptions.height: 에디터의 높이를 조절할 수 있게 개선하였습니다.
어드민, 사내 시스템 구축에 도움이 필요하시다면 셀렉트 팀에게 문의해주세요.
감사합니다.