보고서 테마

보고서 테마는 보고서의 모양과 느낌을 사용자 정의하는 방법 중 하나입니다. 이 기능은 여러 보고서의 모양을 단일 구성으로 제어하려는 경우에 유용합니다. 연결된 리소스에서 보고서 제목이나 표 열 헤더 같은 정적 텍스트를 끌어오는 다국어 보고서를 제공하는 데에도 도움이 될 수 있습니다.

보고서 테마 구조

보고서 테마는 색 팔레트, 주요 및 보조 글꼴 속성, 이미지 목록, 텍스트 값을 포함하는 JSON 개체입니다. 현재 ActiveReportsJS는 테마 편집기를 제공하지 않지만 다음 단계에 따라 쉽게 테마를 처음부터 만들 수 있습니다.

*.rdlx-json-theme 확장명을 가진 새 파일을 만듭니다.
새로 만든 파일에 다음 내용을 복사하고 값을 고유한 값으로 바꿉니다. base64-image 같은 온라인 도구를 사용하여 이미지 파일을 base64 문자열로 변환할 수 있습니다.

{
  "Theme": {
    "Colors": {
      "Dark1": "#000000",
      "Dark2": "#1a1a1a",
      "Light1": "#40cddf",
      "Light2": "#e6e6e6",
      "Accent1": "MediumTurquoise",
      "Accent2": "Gold",
      "Accent3": "DeepPink",
      "Accent4": "#557bd2",
      "Accent5": "#8acc1f",
      "Accent6": "#409dcc",
      "Hyperlink": "#aaa",
      "HyperlinkFollowed": "#3c3c3c"
    },
    "Fonts": {
      "MajorFont": {
        "Family": "Montserrat",
        "Style": "Normal",
        "Size": "20pt",
        "Weight": "Medium"
      },
      "MinorFont": {
        "Family": "Montserrat",
        "Style": "Normal",
        "Size": "9pt",
        "Weight": "Normal"
      }
    },
    "Images": [
      {
        "Name": "Logo",
        "MIMEType": "image/png",
        "ImageData": "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsSAAALEgHS3X78AAABD0lEQVRIie2UzW3CQBCFn1OB0wG3dyUVABUk6SDpIHRAB0AFoQPSAaEDru8UOmBLiFYao9F6gZXZW/Iky9q/93lnxoN/3VLj1yWdALTJmTnJ1dBIPiTj1Dzq+Z40pYDqKgGMa97gO7OnlTQYkgIOmT3BniqAfcZ8RvI4FNCkE5J+AIycee5WxcoleW3v9kLZ3g3YAOhCsqwOIBlDM7fhWNJnVYBBvgB07eHtEkTS6FYJ95KcGOwATG24Ifnu1qLxzvIUXInvSS5KAfHw1kEOFr7gzHsiefa9CnCgmOwPNxWuVZgHFDU7kvGrX111FZdvcTe1xD9ZiIr/7KIQ5STpBcDEuu3UbQkkH4f6/jUB+AWm0kmTmeXA3wAAAABJRU5ErkJggg=="
      }
    ],
    "Constants": [
        {
          "Key": "Title",
          "Value": "Sales Report"
        }
      ]
  }
}

보고서를 테마에 연결

보고서를 특정 테마에 연결하기 위해 다음 단계를 수행합니다.

보고서 파일이 있는 동일한 폴더에 테마 파일을 *.rdlx-json-theme 확장자로 저장합니다.
보고서 편집기에서 보고서를 엽니다. 이제 테마 속성 드롭다운 메뉴에 보고서와 동일한 디렉토리에 있는 모든 사용 가능한 테마가 나열됩니다.
선택적으로, 테마 속성을 런타임에 원하는 테마 이름으로 계산되는 표현식으로 설정하여 동적으로 보고서에 테마를 할당할 수 있습니다. 예를 들어, 보고서 테마 데모에서 보고서의 테마 속성은 다음 표현식으로 구성됩니다: IIF(Parameters!ThemeID.Value = "dark", "DarkTheme.rdlx-json-theme", "LightTheme.rdlx-json-theme")
이 설정을 사용하면 보고서 뷰어 인터페이스에서 사용자가 선택한 ThemeID 매개변수 값에 따라 밝은 테마나 어두운 테마를 보고서에 적용합니다.

테마를 선택한 후 다음 표현식을 사용하여 테마 값을 참조할 수 있습니다.

테마 값	식
밝게 1 색	{Theme.Colors!Light1}
밝게 2 색	{Theme.Colors!Light2}
어둡게 1 색	{Theme.Colors!Dark1}
어둡게 2 색	{Theme.Colors!Dark2}
강조색1 색	{Theme.Colors!Accent1}
강조색2 색	{Theme.Colors!Accent2}
강조색3 색	{Theme.Colors!Accent3}
강조색4 색	{Theme.Colors!Accent4}
강조색5 색	{Theme.Colors!Accent5}
강조색6 색	{Theme.Colors!Accent6}
하이퍼링크 색	{Theme.Colors!Hyperlink}
HyperlinkFollowed 색	{Theme.Colors!HyperlinkFollowed}
주 글꼴 패밀리	{Theme.Fonts!MajorFont.Family}
주 글꼴 크기	{Theme.Fonts!MajorFont.Size}
주 글꼴 스타일	{Theme.Fonts!MajorFont.Style}
주 글꼴 두께	{Theme.Fonts!MajorFont.Weight}
보조 글꼴 패밀리	{Theme.Fonts!MinorFont.Size}
보조 글꼴 크기	{Theme.Fonts!MinorFont.Size}
보조 글꼴 스타일	{Theme.Fonts!MinorFont.Style}
보조 글꼴 두께	{Theme.Fonts!MinorFont.Weight}
이미지 데이터 ^*	{Theme.Images!<Image Name>.ImageData}
이미지 MIME 형식	{Theme.Images!<Image Name>.MIMEType}
상수 값	{Theme.Constants("<Constant Key>")}

^* 테마의 이미지를 사용하려면 이미지 보고서 항목의 소스 속성을 데이터베이스로 설정합니다.

스타일 속성

일부 보고서 항목에는 테마 기반의 여러 값을 설정하는 바로 가기인 스타일 속성이 있습니다. 예를 들어 텍스트 상자의 스타일 속성에는 밝게 1 강조색1 주요와 같이 세 개의 값이 공백으로 구분된 항목 목록이 포함되어 있습니다. 항목 중 하나를 선택하면 텍스트 상자는 첫 번째 값을 텍스트 전경색(예: 밝게 1)으로, 두 번째 값을 텍스트 배경색(예: ``강조색1)으로, 세 번째 값을 글꼴 속성(예: 주요```)으로 사용합니다.

런타임 테마 확인

실제로 보고서를 실행하고 내보내거나 뷰어 컴포넌트에 로드하는 응용 프로그램은 런타임에 테마를 확인해야 합니다. 이 작업을 위해 리소스 로케이터 기능을 사용할 수 있습니다. 예를 들어 *.rdlx-json-theme 파일을 응용 프로그램의 정적 자산에 저장하고 리소스 로케이터 구현의 코드를 통해 파일 내용을 반환할 수 있습니다. 테마를 동적으로 변경할 수도 있습니다. 이 방법의 전체 코드 샘플은 라이브 데모를 참조하십시오.

보고서 테마