Бренд веб-портала

  • Статья

Область применения: SQL Server 2016 (13.x) Reporting Services и более поздних версий Сервер отчетов Power BI

Узнайте, как настроить sql Server Reporting Services (SSRS) или Сервер отчетов Power BI веб-портал для сопоставления фирменной символики вашего бизнеса. Используя загруженный пакет фирменной символики, вы можете изменить цвета, логотипы и другие элементы стилей на веб-портале. Пакет фирменной символики состоит из трех элементов, которые вы упаковывая в виде ZIP-файла. В следующих разделах описываются элементы в пакете фирменной символики и приведены примеры содержимого.

Необходимые компоненты

  • SQL Server Reporting Services (SSRS) или Сервер отчетов Power BI установлен и настроен.
  • Доступ к веб-порталу служб Reporting Services.
  • Подключение к базе данных сервера отчетов.

Создание пакета фирменной символики

Чтобы создать пакет фирменной символики, можно использовать файлы с нуля или скачать примеры с сайта GitHub.

Если начать с нуля, начните с создания каждого файла и именования файлов в пакете фирменной символики следующим образом:

  • metadata.xml
  • colors.json
  • logo.png (необязательный файл)

Zip-файл можно назвать как угодно.

Если вы решили использовать пример пакета фирменной символики, скачайте ZIP-файл и извлеките файлы, чтобы их можно было изменить в соответствии с вашими потребностями.

Определение метаданных бренда (metadata.xml)

Файл metadata.xml указывает имя пакета фирменной символики и ссылается на colors.json файлы.logo.png

Чтобы изменить имя пакета фирменной символики, измените атрибут name для элемента SystemResourcePackage .

<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
    type="UniversalBrand"
    version="2.0.2"
    name="Multicolored example brand"
    >
</SystemResourcePackage>

В пакет фирменной символики можно включить логотип. Этот элемент содержится в элементе Contents .

В следующем примере не содержится файл логотипа:

<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
    type="UniversalBrand"
    version="2.0.2"
    name="Multicolored example brand"
    >
    <Contents>
        <Item key="colors" path="colors.json" />
    </Contents>
</SystemResourcePackage>

В следующем примере содержится файл логотипа:

<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
    type="UniversalBrand"
    version="2.0.2"
    name="Multicolored example brand"
    >
    <Contents>
        <Item key="colors" path="colors.json" />
        <Item key="logo" path="logo.png" />
    </Contents>
</SystemResourcePackage>

Определение цветовой схемы (colors.json)

Файл colors.json определяет цветовую схему для пакета фирменной символики. При отправке пакета фирменной символики сервер извлекает пары "имя-значение" из этого файла и объединяет их с основной таблицей стилей LESS. brand.less Он обрабатывает таблицу стилей и обслуживает полученный CSS-файл клиенту. Все цвета сохраняются в таблице стилей в формате шестисимвольного шестнадцатеричного представления.

Ниже приведен пример colors.json файла:

{
    "name": "Multicolored example brand",
    "version": "1.0",
    "interface": {
        "primary": "#009900",
        "primaryContrast": "#ffffff",
        "secondary": "#042200",
        "neutralPrimary": "#d8edff",
        "neutralSecondary": "#e9d8eb",
        "danger": "#ff0000",
        "success": "#00ff00",
        "warning": "#ff8800"
    },
    "theme": {
        "dataPoints": ["#0072c6", "#f68c1f", "#269657"],
        "good": "#85ba00",
        "bad": "#e90000",
        "neutral": "#edb327"
    }
}

Как работают переменные LESS

Таблица стилей LESS содержит блоки, ссылающиеся на предопределенные переменные LESS. В следующем примере показано, как таблица стилей использует переменные LESS:

/* primary buttons */
.btn-primary {
    color:@primaryButtonColor;
    background-color:@primaryButtonBg;
}

Хотя этот синтаксис напоминает CSS, значения цветов, префиксированные символом @ , уникальны для LESS. Файл colors.json задает эти переменные.

Например, colors.json файл может содержать следующие значения:

"primary":"#009900",
"primaryContrast":"#ffffff"

При обработке переменные LESS сопоставляются с соответствующими значениями в colors.json файле. Результирующий CSS выглядит следующим образом:

.btn-primary {
    color: #ffffff;
    background-color: #009900;
}

Все основные кнопки затем отрисовывает темно-зеленый с белым текстом.

Объекты в colors.json

Файл colors.json содержит два основных объекта:

  • Интерфейс: свойства, относящиеся к веб-порталу.
  • Тема: свойства, относящиеся к создаваемым мобильным отчетам.

Объект interface разбит на следующие свойства:

Раздел Описание
Основной Цвета кнопок и цвета при наведении указателя мыши.
Вторичные Строка заголовка, панель поиска, меню слева (если отображается) и цвет текста для этих элементов.
Нейтральная основная Фон области домашней страницы и области отчетов.
Нейтральная вторичная Фон текстового поля и свойств папки, а также меню настроек.
Нейтральная третичная Фон параметров сайта.
Сообщения об опасности, предупреждения и сообщения Цвета для этих сообщений.
КПЭ Управляет цветами для хорошего (1), нейтрального (0), нейтрального (-1) и ни одного.

Объект theme разбит на следующие свойства:

Раздел Описание
Точки данных Цвета точек данных в диаграммах и визуализациях.
Хороший/плохой/нейтральный Цвета, указывающие состояние.
Общие сведения Общий цвет фона.
Передний план Общий цвет переднего плана.
Базовая карта Базовый цвет для карт.
Фон панели/ передний план/акцент Цвета для панелей.
Акценты таблицы Цвета элементов для таблиц.

При первом подключении к серверу с издателем мобильных отчетов с развернутой фирменной символикой издатель добавляет тему в список доступных тем.

Снимок экрана: диалоговое окно

После этого вы сможете использовать тему для любого созданного вами мобильного отчета, даже если он расположен не на том сервере, где развернута тема.

Использование логотипа (logo.png)

Если вы включаете логотип с пакетом фирменной символики, он отображается на веб-портале вместо имени, который вы первоначально задали для веб-портала.

Убедитесь, что логотип находится в формате PNG-файла. Размер файла после отправки на сервер. Логотип масштабируется примерно до 290 x 60 пикселей.

Применение пакета фирменной символики к веб-порталу

  1. Доступ к веб-порталу.

  2. Щелкните значок шестеренки в правом верхнем углу и выберите "Параметры сайта".

    Снимок экрана: список параметров с выделенным параметром

  3. Выберите раздел Фирменная символика.

    Снимок экрана: страница

    В настоящее время установленный пакет фирменной марки отображает имя отправленного пакета или отображает none.

  4. Выберите " Отправить пакет фирменной символики". Пакет фирменной символики отправляется на сервер отчетов, а веб-портал немедленно отображает обновленную фирменную символику.

Скачивание или удаление пакета фирменной символики

Если вы видите пакет фирменной символики, указанный в поле пакета фирменной символики текущей версии, вы можете скачать или удалить пакет. Вы можете скачать пакет, если вы хотите внести изменения в существующий пакет и применить эти изменения. При удалении пакета веб-портал немедленно сбрасывается на фирменную символику по умолчанию. Выберите " Скачать " или "Удалить " в зависимости от действия, которое вы хотите предпринять.

Есть еще вопросы? Попробуйте запросить форум служб Reporting Services.