위치:
리피터 위젯으로 토글에 스타일 추가
토글 위젯 대신에 리피터 위젯을 사용해 대시보드 토글에 활기를 불어 넣으십시오. 리피터 위젯을 사용하면 이미지를 추가해 사용 가능한 토글 상태에 대한 시각적 단서를 제공하고, 텍스트 위치를 변경하고, 이모티콘을 텍스트에 추가할 수 있습니다.
이 대시보드(1) 상단에서 토글을 사용해 이러한 세 가지 제품 범주에서 판매된 수량을 강조 표시할 수 있습니다. 각 토글 옵션에는 제품 범주를 나타내는 사진이 포함됩니다. 토글을 클릭하면 제품 범주가 막대형 차트(2)에서 강조 표시됩니다.
삽입 방법은 다음과 같습니다.
1. 이미지를 갤러리에 업로드합니다.
대시보드 빌더에서 이미지 위젯을 사용해 사용하려는 이미지를 업로드합니다. 대시보드 아무 데나 이미지 위젯을 배치할 수 있습니다. 위젯에서 이미지 아이콘을 클릭해 이미지 선택 창을 엽니다. 화면의 지침에 따라 첫 번째 이미지를 업로드합니다. 더 많은 이미지를 추가하려면 대시보드 빌더의 오른쪽에 있는 위젯 패널에서 이미지 이름을 클릭합니다.
모든 이미지를 업로드한 후 나중에 사용할 수 있도록 URL을 복사해 텍스트 파일에 저장합니다. 위젯 패널에서 이미지 이름을 클릭해 이미지 선택 창을 엽니다. 갤러리 탭(1)에서 각 이미지를 마우스 오른쪽 버튼으로 클릭하고 이미지 주소 복사(2)를 선택합니다. 이미지 주소를 텍스트 파일에 붙여 넣습니다.
URL 복사를 완료하면 이미지 위젯을 닫습니다.
1. 쿼리를 만듭니다.
비교 테이블을 사용해 원하는 쿼리(1)를 만듭니다. 이 예에서 데이터 소스의 경우 각 제품 범주에 대해 판매된 수량의 데이터 집합을 사용합니다. 그룹화의 경우 토글 작업(2)에 연결하려는 필드를 선택합니다. 이 예의 그룹화는 제품 범주가 기준입니다.
3. 쿼리 모드를 사용해 이미지 URL에 대한 열을 추가합니다.
쿼리 모드(1)에서 각 제품 범주를 해당 이미지에 연결할 SAQL 문을 만들고 새 사진 열(2)에 URL을 저장합니다. 텍스트 파일에 저장한 URL을 사용하십시오.
이 예를 위해서 이 SAQL 문을 만들었습니다. 각 제품 범주가 이미지에 매핑되고 사진 열에 추가됩니다. 자체 문을 만들 때 이 문을 모델로 사용할 수 있습니다.
q = load "SuperStoreSales";
result = group q by 'Product_Category';
result = foreach result generate q.'Product_Category' as 'Product_Category', count(q) as 'A', (case 'Product_Category'
when "Furniture" then "https://example.com/file-asset/furniturejpeg?v=1"
when "Office Supplies" then "https://example.com/file-asset/office_suppliesjpeg?v=1"
when "Technology" then "https://example.com/file-asset/technologiejpeg?v=1"
else "Unspecified"
end) as 'Photo';
result = order result by ('Product_Category' asc);
result = limit result 2000;작업 내용을 확인하려면 클릭해 비교 테이블 보기로 돌아갑니다. 이미지 URL이 사진 열(1)에 나열되고, 새로운 그룹은 왼쪽(2)에 있습니다.
4. 리피터 위젯 토글을 설계합니다.
이제 사진 열의 이미지 URL을 사용해 리피터 위젯을 설계할 수 있습니다.
- 리피터 위젯을 대시보드 캔버스로 끕니다.
- 오른쪽 패널에서 위젯으로 쿼리를 끕니다.
- 이미지 위젯을 리피터로 끕니다. 속성 패널에서 이미지 소스로 사진을 선택합니다. 이미지 배율을 맞게 조정합니다. 완료를 클릭합니다.
- 리피터 콘텐츠를 다시 편집합니다. 텍스트 위젯을 리피터 위젯으로 끕니다. 오른쪽의 위젯 패널에서 텍스트를 [Product_Category]로 변경합니다. 색 및 스타일을 추가합니다. 이모티콘을 추가하려면 텍스트 영역에서 마우스 오른쪽 클릭합니다. 완료했으면 완료를 클릭합니다.
- 오른쪽 패널의 콘텐츠 레이아웃에서 이 예에 대한 토글 옵션이 나란히 표시되도록 한 줄당 3개 항목을 입력합니다.
완료되었습니다. 대시보드를 저장하고 미리 봅니다. 토글 중 하나를 클릭하면 해당 제품 범주에 대한 막대가 강조 표시됩니다.
