Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

Ao localizar no menu o programa "Campos personalizados (html.personalization-metadata)", é apresentada uma tela em formato de 'lista' que conterá todos os campos (metadados) cadastrados no produto Datasul. Para cadastrar um campo que será utilizado na personalização, basta clicar no botão +Adicionar.

Image Modified


A tela a seguir apresenta o cadastro do 'metadado' relacionado a um campo que pode ser apresentado no programa como personalizado.

Image Modified

CampoDescriçãoObrigatório
Código Programa Datasul

Código do programa "base" que podem ser aplicadas as técnicas de personalização

Nota
titleNota

É possível cadastrar os campos somente em programas que permitem a personalização

Sim

Identificador Campo

Identificador único do campo (por programa), necessário para a geração da tela personalizada (código do campo)Sim

Nome Campo

Nome do campo que será apresentado na tela (label do campo)

Caso o campo não seja informado, o nome do campo apresentado será o informado no identificador.

Não
Tipo Campo

Tipo do campo cadastrado

Caso o campo não seja informado, será considerado que o campo é do tipo string

Tipos de campos permitidos:

Tipo JavaScriptTipo ProgressDescrição
booleanlogicalValores lógicos
currencydecimalValores monetários
datedate

Valores de datas. 

Aceita os tipos string e Date padrão do Javascript, por exemplo: '2017-11-28' ou new Date(2017, 10, 28).

datetimedatetime

Valor de data com horário.

Aceita o tipo string no formato ISO-8601 estendido 'yyyy-mm-ddThh:mm:ss+|-hh:mm' e o tipo Date padrão

numberintegerValores numéricos
stringcharacterTextos
Informações
titleDica

Sugerimos a utilização do facilitador progress "com.totvs.framework.api.JsonAPIUtils", que faz a conversão dos tipos da dados do progress

para tipo de dados JavaScript e contêm o método abaixo :

Assinatura:

convertAblTypeToHtmlType (INPUT cType AS CHARACTER)

Exemplo:

ASSIGN cType = JsonAPIUtils:convertAblTypeToHtmlType ("integer").

O retorno no cType será "number", que é um formato reconhecido pelo PO-UI.

Não
Validação Campo

Caso o campo possuir alguma validação de máscaras, restrição de valores, é necessário informar neste campo (máscara de formatação do campo)

Exemplos:

Em um campo personalizado CNPJ, utilizamos o formato de exibição '99.999.999/9999-99'.

Não
Somente LeituraOpção para que o campo seja apresentado como 'somente leitura' (torna o campo readOnly)Sim
Habilita personalizaçãoOpção para habilitar ou desabilitar a apresentação da personalização por campo (torna o campo visível)Sim

...

Após cadastrar o campo, o mesmo é apresentado na tela inicial onde pode ser realizado filtros sobre seus resultados, bem como efetuar ações de edição ou exclusão.

Image Modified


Ao clicar na opção de editar, não será possível modificar o código do programa Datasul vinculado e também seu identificador. Os demais campos estão habilitados para edição.

Image Modified


Componentes PO-UI

...

Bloco de código
languagejs
firstline1
titleComponente de serviço
linenumberstrue
collapsetrue
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { PoNotificationService } from '@po-ui/ng-components';

const httpOptions: object = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    // 'Authorization': 'Basic ' + btoa('super:super@123'),
    // 'Access-Control-Allow-Origin': 'http://localhost:4200',
    // 'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Origin, Access-Control-Allow-Headers, X-Requested-With',
    // 'returnFormatVersion': '2',
  })
};

@Injectable({
  providedIn: 'root'
})
export class PersonalizationService {
  public progCode = 'html.aplicativos-eai';

  // Endpoint progress do framework para obtencao da lista de campos personalizados
  private urlMetadata = '/api/btb/v1/personalizationView/metadata/';

  // Endpoint progress da area de negocio para obtencao dos valores dos campos personalizados
  private urlArea = '/api/trn/v1/idiomaValues/';

  constructor(
    private http: HttpClient,
    private poNotification: PoNotificationService,
  ) { }

  public loadMetadata() {
    return this.http.post<any[]>(this.urlMetadata + this.progCode, httpOptions).pipe();
  }

  public loadValuesById(cId) {
    // tslint:disable-next-line:whitespace
    return this.http.get<any[]>(this.urlArea + 'byid/' + this.progCode + '/' + cId, httpOptions).pipe();
  }

  public loadAllValues() {
    return this.http.get<any[]>(this.urlArea + this.progCode + '/', httpOptions).pipe();
  }

  public create(cId, record) {
    return this.http.post<any[]>(this.urlArea + this.progCode + '/' + cId, record, httpOptions).pipe();
  }

  public update(cId, record) {
    return this.http.put<any[]>(this.urlArea + this.progCode + '/' + cId, record, httpOptions).pipe();
  }

  public delete(cId, record) {
    return this.http.put<any[]>delete<any>(this.urlArea + this.progCode + '/' + cId, record, httpOptions).pipe();
  }

  public getUrlArea(): string {
    return this.urlArea + this.progCode;
  }

  public getUrlAreaValidation(): string {
    return this.urlArea + 'validateForm/' + this.progCode;
  }
}

...

Tela do componente HTML com o resultado da personalização

  • Tela de Listagem:

Image Modified


  • Tela de Criação/Edição:

Image Modified

  • Tela de Detalhe/Visualização

Image Added




06. LINKS ÚTEIS

...