Template / Layout

Olá, hoje quero trazer aqui sobre a customização de template da sua aplicação. Trouxe o exemplo de uma região de resumo de uma parte do processo, é um relatório clássico do Apex, mas se customizar pode-se ter o resultado da segunda imagem, sendo ele mais elegante e compacto.

Imagem 1

 

Imagem 2

 

Como chagar a esse resultado?

Coloque o CSS abaixo no arquivo (.css) e referencie na aplicação, ou pode ser colocado no campo CSS inline dentro da página, mas isso se for apenas para testar. O ideal é colocar no arquivo para que toda a aplicação possa usar.

 

#cabecalho {

 -webkit-box-shadow: 0px 2px 0px 0px rgba(228,225,221,0.98);

 -moz-box-shadow: 0px 2px 0px 0px rgba(228,225,221,0.98);

  box-shadow: 0px 1px 0px 0px rgba(228,225,221,0.98);

}

 

 

.t-AVPList {

  margin: 0px;

  padding: 0px 5px 0px;

  list-style: none;

  background-color: #ffffff;

}

 

.T-List {

  padding: 2px 6px;

  border-radius: 4px;

  background-color: #ffffff;

  margin: 2px;

  text-align: center;

  display: inline-block;

  color: #606060;

  font-size: 0.7rem;

}

 

.t-TList-label {

  font-weight: 700;

 }

 

Bom, próximo passo é ir nos componentes compartilhados > user interface > templates.

Depois localize um template do tipo Report e nome Standard.

Copie, eu coloquei o nome de "relatorio cabecalho". Edite para realizar a customização. Em Before row adicione:

<dl class="t-AVPList #COMPONENT_CSS_CLASSES#" #REPORT_ATTRIBUTES# data-region-id="#REGION_STATIC_ID#">

E column template adicione:

 <div class="T-List">

    <span class="t-TList-label">

    #COLUMN_HEADER#:

    </span>

    <span class="t-TList-value">

    #COLUMN_VALUE#

    </span>

</div>

E por fim na região do resumo indicar esse novo template, na aba dos atributos > aparência > template.

E então, vamos customizar nossas aplicações? Se precisar de ajuda, deixe nos comentários ou entre em contato por email.

Um abraço,

Daia

APEX Brings Gen AI to Developers - Novidades

 Olá.

Já viram as novidades do Apex?

Assista ao vídeo