Partilhar via

Criar a marca para o portal web

Aplica-se a: SQL Server 2016 (13.x) Serviços de Relatórios e versões posteriores Power BI Report Server

Saiba como personalizar o portal da Web do SQL Server Reporting Services (SSRS) ou do Power BI Report Server para corresponder à marca da sua empresa. Usando um pacote de marca carregado, você pode alterar cores, logotipos e outros elementos de estilo em seu portal da Web. Um pacote de marca consiste em três itens que você empacota como um arquivo zip. As seções a seguir descrevem os itens no pacote da marca e fornecem exemplos do conteúdo.

Pré-requisitos

  • SQL Server Reporting Services (SSRS) ou Power BI Report Server instalado e configurado.
  • Acesso ao Portal da Web do Reporting Services.
  • Conexão com um banco de dados do servidor de relatório.

Crie o pacote de identidade visual

Para criar o pacote de marca, você pode usar criar arquivos do zero ou baixar amostras do site do GitHub.

Se você começar do zero, comece criando cada arquivo e nomeando os arquivos no pacote da sua marca da seguinte maneira:

  • metadata.xml
  • colors.json
  • logo.png (ficheiro opcional)

O arquivo zip pode ser nomeado como quiser.

Se você optar por usar um pacote de marca de exemplo, baixe o arquivo zip e extraia os arquivos para que você possa editá-los de acordo com suas necessidades.

Definir metadados da marca (metadata.xml)

O metadata.xml ficheiro especifica o nome do pacote de marca e faz referência aos ficheiros colors.json e logo.png.

Para alterar o nome do pacote de marca, altere o atributo name do elemento 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>

Pode incluir um logótipo no pacote da sua marca. Este item está contido no elemento Content .

O exemplo a seguir não inclui um arquivo de logotipo:

<?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>

O exemplo a seguir inclui um arquivo de logotipo:

<?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>

Definir o esquema de cores (colors.json)

O colors.json arquivo define o esquema de cores para o pacote da sua marca. Quando você carrega o pacote de marca, o servidor extrai os pares nome/valor desse arquivo e os mescla com a folha de estilo LESS primária, brand.less. Ele processa a folha de estilo e serve o arquivo CSS resultante para o cliente. Todas as cores na folha de estilo seguem a representação hexadecimal de seis caracteres de uma cor.

Aqui está um exemplo do arquivo 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"
    }
}

Como funcionam as variáveis LESS

A folha de estilo LESS contém blocos que fazem referência a variáveis LESS predefinidas. O exemplo a seguir mostra como a folha de estilo usa variáveis LESS:

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

Embora essa sintaxe se assemelhe a CSS, os valores de cor prefixados com o @ símbolo são exclusivos de LESS. O colors.json arquivo define essas variáveis.

Por exemplo, o arquivo pode incluir os colors.json seguintes valores:

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

Quando processadas, as variáveis LESS são mapeadas para os valores correspondentes no arquivo colors.json. O CSS resultante se parece com o exemplo a seguir:

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

Todos os botões primários são exibidos em verde-escuro com texto branco.

Objetos em colors.json

O colors.json arquivo inclui dois objetos principais:

  • Interface: Propriedades específicas do portal web.
  • Tema: Propriedades específicas dos relatórios móveis que você cria.

O interface objeto é dividido nas seguintes propriedades:

Seção Descrição
Primário Cores do botão e do foco.
Secundária Barra de título, barra de pesquisa, menu à esquerda (se exibido) e cor do texto para esses itens.
Primário Neutro Fundos da área inicial e de relatório.
Secundário Neutro Planos de fundo de opções de caixa de texto e pasta e o menu de configurações.
Terciário Neutro Planos de fundo das configurações do site.
Mensagens de perigo/aviso/sucesso Cores para essas mensagens.
KPI Controla as cores para bom (1), neutro (0), neutro (-1) e sem cor.

O theme objeto é dividido nas seguintes propriedades:

Seção Descrição
Pontos de dados Cores para pontos de dados em gráficos e visualizações.
Bom/Mau/Neutro Cores que indicam o estado.
Contexto geral Cor geral do plano de fundo.
Primeiro plano Cor geral do primeiro plano.
Mapa Base Cor base para mapas.
Fundo/Primeiro plano/Destaque do painel Cores para painéis.
Acentos de tabela Cores de destaque para tabelas.

Na primeira vez que você se conectar a um servidor com um Mobile Report Publisher que tenha um pacote de marca implantado, o editor adicionará o tema à lista de temas disponíveis.

Captura de tela da caixa de diálogo Escolha uma paleta de cores.

Em seguida, você pode usar esse tema para quaisquer relatórios móveis criados, mesmo que eles não sejam para o mesmo servidor em que o tema foi implantado.

Utilizar um logótipo (logo.png)

Se você incluir um logotipo no pacote da sua marca, ele aparecerá no portal da Web no lugar do nome que você definiu originalmente para o portal da Web.

Verifique se o logotipo está no formato de arquivo PNG. As dimensões do ficheiro são ajustadas depois de serem carregadas no servidor. O logotipo é dimensionado para aproximadamente 290 x 60 pixels.

Aplicar o pacote de marca ao portal web

  1. Aceda ao portal Web.

  2. Selecione o ícone de engrenagem no canto superior direito e, em seguida, escolha Configurações do Site.

    Captura de ecrã da lista de Definições com a opção Definições do Site realçada.

  3. Selecione Branding.

    Captura de ecrã da página Definições do Site com o separador Marca realçado.

    O pacote de marca instalado atualmente exibe o nome do pacote carregado ou exibe Nenhum.

  4. Selecione Enviar pacote de marca. O pacote de marca é carregado no servidor de relatório e o portal da Web renderiza a marca atualizada imediatamente.

Transferir ou remover o pacote da marca

Se vir um pacote de marca listado na caixa Pacote de marca atualmente instalado, pode escolher descarregar ou remover o pacote. Talvez você queira baixar o pacote se quiser fazer ajustes no pacote existente e aplicar essas alterações. Se remover o pacote, o portal web será imediatamente redefinido para a marca padrão. Escolha Baixar ou Remover , dependendo da ação que você deseja realizar.

Mais perguntas? Tente perguntar ao fórum do Reporting Services.

  • Last updated on