Histórico da Página
...
- Dynamic-Form;
- Dynamic-View;.
Templates:
- Page-Dynamic-Detail;
- Page-Dymic-Edit;
- Page-Dynamic-Search;
- Page-Dynamic-Table;.
Comunicando com o Back-End Progress:
...
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { IdiomaDynamicComponent } from './idioma/idioma-dynamic.component'; const routes: Routes = [ { path: 'idioma', component: IdiomaDynamicComponent, data: { serviceMetadataApi: 'https://6a6a8bb8-09be-496b-aeea-faa3a7052052.mock.pstmn.io/api/trn/v1/idiomas/metadados', // endpoint dos metadados serviceLoadApi: 'https://6a6a8bb8-09be-496b-aeea-faa3a7052052.mock.pstmn.io/api/trn/v1/idiomas/metadados' // endpoint de customizações dos metadados } }, { path: '', redirectTo: '/idioma', pathMatch: 'full' }, { path: '**', component: IdiomaDynamicComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
HTML:
No HTML devemos inserir a tag do componente dinâmico "po-page-dynamic-detail" para renderizar os dados de acordo com o retorno do back-end.
...
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<div class="po-wrapper">
<po-toolbar p-title="Datasul - Dynamic - Custom"></po-toolbar>
<po-page-dynamic-detail p-auto-router p-title="Idiomas" [p-service-api]="serviceApi">
</po-page-dynamic-detail>
</div>
|
TypeScript:
No Typescript devemos informar qual será a API que retornará os dados para a tela através da variável "serviceApi".
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
import { Component } from '@angular/core';
import { PoMenuItem } from '@po-ui/ng-components';
import { PoBreadcrumb } from '@po-ui/ng-components';
import { PoPageDynamicDetailActions} from '@po-ui/ng-templates';
@Component({
selector: 'app-idioma-dynamic',
templateUrl: './idioma-dynamic.component.html',
styleUrls: ['./idioma-dynamic.component.css']
})
export class IdiomaDynamicComponent {
public readonly serviceApi = 'https://6a6a8bb8-09be-496b-aeea-faa3a7052052.mock.pstmn.io/api/trn/v1/idiomas';
public readonly actions: PoPageDynamicDetailActions = {
back: '/documentation/po-page-dynamic-table'
};
public readonly breadcrumb: PoBreadcrumb = {
items: [
{ label: 'Home', link: '/' },
{ label: 'People', link: '/documentation/po-page-dynamic-table' },
{ label: 'Detail' }
]
};
}
|
05. Facilitadores Progress
Para Criamos dois novos facilitadores para auxiliar no desenvolvimento das API's com chamadas para UPC criamos facilitadores Progress.
...
title | IMPORTANTE |
---|
...
dentro da classe "com.totvs.framework.api.JsonAPIUtils"
...
:
Método | Descrição | Assinatura/Exemplo |
---|---|---|
convertAblTypeToHtmlType |
...
...
Converte os tipos nativos do Progress |
...
para os tipos esperados pelo PO-UI |
...
Bloco de código | ||
---|---|---|
| ||
/*------------------------------------------------------------------------------
Purpose: Converte o tipo de dado Progress em tipo HTML
------------------------------------------------------------------------------*/
METHOD PUBLIC STATIC CHARACTER convertAblTypeToHtmlType (INPUT cType AS CHARACTER):
DEFINE VARIABLE cRet AS CHARACTER NO-UNDO.
ASSIGN cRet = "string".
CASE cType:
WHEN "character" THEN ASSIGN cRet = "string".
WHEN "integer" THEN ASSIGN cRet = "number".
WHEN "decimal" THEN ASSIGN cRet = "currency".
WHEN "logical" THEN ASSIGN cRet = "boolean".
WHEN "datetime" THEN ASSIGN cRet = "datetime".
WHEN "date" THEN ASSIGN cRet = "date".
END CASE.
RETURN cRet.
END METHOD. |
convertToCamelCase:
Criamos este facilitador para converter os nomes dos campos lidos da tabela normalmente com "_" para "camel case" que é o mais comum utilizado em Json's.
...
linenumbers | true |
---|
...
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. | ||
convertToCamelCase | Converter os nomes dos campos lidos da tabela, normalmente com "_", para "camel case", que é o mais comum utilizado em Json's. | Assinatura: convertToCamelCase (INPUT cKey AS CHARACTER) Exemplo: ASSIGN cField= JsonAPIUtils:convertToCamelCase ("cod_e_mail_usuar"). O retorno no cField será "codEMailUsuar", que é o campo em Camel Case. |
06. Links Úteis
Documentação API Datasul:
...