Histórico da Página
...
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.
A tela a seguir apresenta o cadastro do 'metadado' relacionado a um campo que pode ser apresentado no programa como personalizado.
Campo | Descrição | Obrigatório | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Código Programa Datasul | Código do programa "base" que podem ser aplicadas as técnicas de 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:
| 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 Leitura | Opção para que o campo seja apresentado como 'somente leitura' (torna o campo readOnly) | Sim | ||||||||||||||||||||||||||
Habilita personalização | Opçã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.
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.
Componentes PO-UI
...
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
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:
- Tela de Criação/Edição:
- Tela de Detalhe/Visualização
06. LINKS ÚTEIS
...