Formatando a coluna de um relatório

Olá, pessoal! Dando continuidade a série de artigos sobre APEX, hoje vamos ver como podemos formatar uma coluna de um reports do APEX – que por ser uma linguagem web, permite que utilizemos CSS↳CSS31 conteúdosArquitetura CSS: CSS FuncionalDev (Back & Front) · set 2019Entendendo posicionamento com CSS de uma vez por todasDev (Back & Front) · jul 2025Sites que combinam estética e usabilidade: reflexos da evolução do CSSDev (Back & Front) · fev 2025Ver tudo em Dev (Back & Front) → para formatar os elementos das páginas.

Veja que vamos formatar as colunas do relatório de funcionários, desenvolvido em nossa aplicação demo que criamos em um artigo anterior.

Primeiramente, vou explicar um pouco sobre como e onde podemos inserir códigos CSS e Javascript no APEX. Existem 2 formas para isso:

Linkando arquivos externos

Em “Shared Components”, podemos fazer o upload dos arquivos CSS e Javascript externos, que podem ser utilizados nas páginas de uma mesma aplicação:

Após efetuado o upload, devemos criar um link associando ao arquivo na propriedade HTML Header and Body Attribute da página.

Na propriedade acima, podemos colocar códigos CSS, links a arquivos externos e valores de atributos meta. O código colocado nesta propriedade, será inserido entre a tag <HEAD> e  </HEAD> do cabeçário da página. Para um link a um arquivo externo CSS, devemos colocar a sintaxe HTML padrão:

<link rel=”stylesheet” href=”#WORKSPACE_IMAGES#teste.css” type=”text/css”>

No atributo HREF, deve-se colocar uma das tags de substituição, #WORKSPACE_IMAGES#  ou #APP_IMAGES#, seguido do nome do arquivo externo. Quando utilizado as tags #WORKSPACE_IMAGES#  ou #APP_IMAGES#, o APEX efetua automaticamente a substituição para o endereço do diretório onde esta o conteúdo do arquivo exteno.

Códigos diretamente na página

Em todas as páginas de uma aplicação APEX temos propriedades que permitem inserir códigos CSS e Javascript especificos a esta página. Por exemplo, na página LST_FUNCIONARIO, temos as seguintes propriedades:

• Function and Global Variable Declaration: Nesta propriedade podemos colocar nossos códigos Javascript, como funções e variáveis. O código colocado nesta propriedade, será inserido entre a tag <SCRIPT> e  </SCRIPT> do cabeçário da página;
• Execute when Page Loads: Nesta propriedade podemos colocar a chamada de uma função Javascript que foi declarada na propriedade acima para ser executada toda a vez que a página for carregada;
• Include Standard JavaScript and CSS: Determina se a página irá linkar os arquivos externos CSS e Javascript padrões do APEX.

• HTML Header:  Conforme citado acima, podemos colocar códigos CSS, links a arquivos externos e valores de atributos meta. O código colocado nesta propriedade, será inserido entre a tag <HEAD> e  </HEAD> do cabeçário da página.
•     Page HTML Body Attribute:  Nesta propriedade podemos colocar atributos do corpo da página, todos os atributos inseridos nessa propriedade serão inseridos na tag <BODY>.

Formatando uma coluna de um relatório

Agora que vimos como podemos inserir códigos CSS em uma página do APEX, vou demonstrar como podemos formatar as colunas de um relatório.

Quando criamos um relatório, o nome determinado para a coluna é publicado como o ID do cabeçalho da coluna, veja a imagem abaixo. As colunas com os dados recebem o atributo headers que associa a coluna a um cabeçalho. Evite repetir o nome das colunas, mesmo que exista mais de um relatório na mesma página. Também evite espaços e caracteres especiais nos nomes.

Desta maneira, podemos utilizar CSS, para efetuar a formatação. Veja que no código abaixo, o cabeçário da coluna NOME deverá ter o tamanho de 180 pixels, e todas as colunas que tiverem o atributo headers = “NOME”, deverão ter o tamanho de 180 pixels, a cor de fundo deve ser azul e a sua fonte em negrito.

<style type=”text/css”>

th#NOME
{
width: 480px;
}

td[headers=”NOME”]
{
width: 480px;
color: rgb(54,114,190);
font-weight:bold;
}

</style>

Ao colocarmos os código na propriedade HTML Header da página e executarmos a aplicação temos o seguinte resultado:

Como em outras linguages web, o APEX também permite inserir códigos CSS para manipular os elementos da página. Basta saber em qual propriedade do APEX colocar o código.

Pessoal, para esse artigo é só. Para acessar aplicação demo utilize o link http://apex.oracle.com/pls/apex/f?p=30361

• Usuário: DEMO
• Senha: imasters