PO UI

https://po-ui.io/guides
Admin
PO UI is an Angular-based UI component library that provides reusable components, templates, and...
Tokens:47,704
Snippets:356
Trust Score:6.9
Update:1 week ago
Show doc for...
Tokens:
Raw
### Update PO UI Sync Example

Source: https://po-ui.io/guides/migration-poui

Example command to update PO UI sync to the latest version.

```bash
ng update @po-ui/ng-sync --allow-dirty --force

```

--------------------------------

### Update PO UI Components Example

Source: https://po-ui.io/guides/migration-poui

Example command to update PO UI components to the latest version.

```bash
ng update @po-ui/ng-components --allow-dirty --force

```

--------------------------------

### Responsive behavior of po-md-* and po-lg-* classes

Source: https://po-ui.io/guides/grid-system

Shows the behavior when only po-md-* or po-lg-* classes are used: for po-md-*, screens smaller than md get 12 columns and larger get the defined size; for po-lg-*, screens smaller than lg get 12 columns and larger get the defined size. The example includes two rows: one with po-md-6 columns and another with po-lg-4 columns.

```html
<div class="po-row">
  <div class="po-md-6">po-md-6</div>
  <div class="po-md-6">po-md-6</div>
</div>

<div class="po-row">
  <div class="po-lg-4">po-lg-4</div>
  <div class="po-lg-4">po-lg-4</div>
  <div class="po-lg-4">po-lg-4</div>
</div>
```

--------------------------------

### Instalar o Po Theme Cli globalmente

Source: https://po-ui.io/guides/create-theme-customization

Instala a ferramenta Po Theme Cli de forma global para que possa ser utilizada em qualquer diretório.

```bash
npm install -g @po-ui/theme-cli

```

--------------------------------

### Success response example

Source: https://po-ui.io/guides/api

HTTP 2xx responses return the entity directly. Example shows a GET request and its response object.

```http
GET https://example.com.br/api/users/10
```

```json
{
    id: 10,
    name: "John",
    surname: "Doe",
    age: 25,
    country: "US"
}
```

--------------------------------

### Instalar dependências do projeto

Source: https://po-ui.io/guides/sync-get-started

Instala as dependências listadas no package.json após ajustar as versões.

```bash
npm install
```

--------------------------------

### Post-sync notification with PoSyncService.onSync()

Source: https://po-ui.io/guides/sync-fundamentals

Subscribe to `PoSyncService.onSync()` in the constructor to be notified after every successful synchronization secure, and call `loadHomePage()` to update the UI. The example is from the file `src/pages/home/home.ts` in the 'Começando com o PO Sync' guide.

```typescript
constructor(public navCtrl: NavController, private poSync: PoSyncService) {
  // Deve chamar o método loadHomePage() sempre que acontecer uma sincronização
  this.poSync.onSync().subscribe(() => this.loadHomePage());
}

async loadHomePage() {
  this.conference = await this.poSync.getModel('conference').findOne().exec();
}

```

--------------------------------

### Build e execução do portal PO UI

Source: https://po-ui.io/guides/development-flow

Compila o portal e inicia o servidor de desenvolvimento. O portal será exibido em http://localhost:4200/.

```bash
npm run build:portal && ng serve portal
```

--------------------------------

### GET /api/users

Source: https://po-ui.io/guides/api

Documentation for the GET /api/users endpoint, covering sorting, filtering, and pagination query parameters.

```APIDOC
## GET /api/users

### Description
Retrieves a list of users with optional sorting, filtering, and pagination parameters.

### Method
GET

### Endpoint
https://example.com.br/api/users

### Parameters
#### Query Parameters
- **order** (string) - Optional - Comma-separated list of fields to sort by. Fields preceded by a minus sign (-) are sorted descending; fields without a sign are sorted ascending.
- **property** (string) - Optional - Filter in the format `property=value`, e.g., `name=john`.
- **page** (integer) - Optional - Page number (greater than zero) representing the requested page.
- **pageSize** (integer) - Optional - Number of records to return (greater than zero).

### Request Example
GET https://example.com.br/api/users?order=name,-age,surname
GET https://example.com.br/api/users?name=john&surname=doe
GET https://example.com.br/api/users/?page=4&pageSize=10

### Response
#### Success Response (200)
- **hasNext** (boolean) - Indicates whether there is a next page available when pagination is used.

#### Response Example
{
  "hasNext": true
}
```

--------------------------------

### Exibir opções do Po Theme Cli

Source: https://po-ui.io/guides/create-theme-customization

Exibe as opções disponíveis da ferramenta Po Theme Cli.

```bash
po-theme -help

```

--------------------------------

### Install Angular Schematics for Angular@20

Source: https://po-ui.io/guides/migration-poui

Installs the Angular Schematics package required for the PO UI update script when the project is on Angular@20.

```bash
npm install @angular-devkit/schematics --save-dev

```

--------------------------------

### Instalar PO UI Components com ng add

Source: https://po-ui.io/guides/schematics

Instala o pacote @po-ui/ng-components e realiza configurações iniciais, como substituir o AppComponent por uma estrutura com po-page-default, po-toolbar e po-menu, importar o módulo do PO e configurar o tema.

```bash
ng add @po-ui/ng-components

```

--------------------------------

### Update Angular to Version 21

Source: https://po-ui.io/guides/migration-poui

Example command to update Angular to version 21, using the --force flag.

```bash
ng update @angular/cli@21 @angular/core@21 --force

```

--------------------------------

### Instalar PO UI Templates com ng add

Source: https://po-ui.io/guides/schematics

Instala o pacote @po-ui/ng-templates, importa o módulo do PO e configura o tema do PO caso não possua.

```bash
ng add @po-ui/ng-templates

```

--------------------------------

### PoDataTransform hasNext() implementation

Source: https://po-ui.io/guides/sync-fundamentals

Isolated implementation of `hasNext()` for the example, using the API's `next` property to check if a next page exists.

```typescript
hasNext(): boolean {
  return !!this.data.next;
}

```

--------------------------------

### Instalar o pacote po-migration globalmente

Source: https://po-ui.io/guides/migration-thf-to-po-ui

Instala o pacote po-migration globalmente via npm para preparar a migração do THF para o PO UI.

```bash
npm install -g po-migration

```

--------------------------------

### Manual synchronization with PoSyncService.sync()

Source: https://po-ui.io/guides/sync-fundamentals

Use `PoSyncService.sync()` to manually trigger a synchronization, for example from a button press. The promise resolves when synchronization completes and rejects on error.

```typescript
this.poSync.sync().then(() => {
  // Sincronização concluída
}).catch(() => {
  // Erro durante a sincronização
});

```

--------------------------------

### Instalar po-sync no aplicativo

Source: https://po-ui.io/guides/sync-get-started

Adiciona o pacote @po-ui/ng-sync ao projeto Ionic.

```bash
ng add @po-ui/ng-sync
```

--------------------------------

### Non-standard API response structure

Source: https://po-ui.io/guides/sync-fundamentals

An example of an API response that does not follow the PO standard, using `next`, `data`, and `sync_date`. These fields must be adapted using `PoDataTransform`.

```json
{
  "next": string,
  "data": [],
  "sync_date": date
}

```

--------------------------------

### Instalar dependências com npm

Source: https://po-ui.io/guides

Instala as dependências do projeto usando npm, após verificar as versões compatíveis.

```bash
npm install

```

--------------------------------

### Initial data load with PoSyncService.loadData()

Source: https://po-ui.io/guides/sync-fundamentals

Adds a conditional call to loadData() before the first sync. The condition should check whether this is the first data load (e.g., app installation).

```typescript
const config: PoSyncConfig = {
  type: PoNetworkType.ethernet,
  period: 30
};

const schemas = [conferenceSchema];

this.poSync.prepare(schemas, config).then(() => {
  
  // Implementação adicionada
  if(<condicao>) {
    this.poSync.loadData();
  }

});

```

--------------------------------

### Build e servir o Portal PO UI

Source: https://po-ui.io/guides/development-flow

Comandos para build das modificações e testagem no Portal PO UI. Execute npm run build, npm run build:portal e ng serve portal em sequência.

```bash
npm run build
npm run build:portal
ng serve portal
```

--------------------------------

### Migrar com a opção --all para alterar palavras personalizadas

Source: https://po-ui.io/guides/migration-thf-to-po-ui

Atualiza todas as palavras do projeto que contêm 'thf, t-, ou totvs', incluindo palavras criadas pelo usuário. Cuidado: verifique se nenhum caminho de arquivo foi alterado indevidamente.

```bash
po-migration start --all

```

--------------------------------

### Exemplo de requisição com filtros

Source: https://po-ui.io/guides/api

Exemplo de requisição GET que filtra usuários por nome e sobrenome usando parâmetros no formato property=value.

```http
GET https://example.com.br/api/users?name=john&surname=doe
```

--------------------------------

### Pagination URL parameters pageNumber and size

Source: https://po-ui.io/guides/sync-fundamentals

Example URL for pagination parameters: `pageNumber` indicates page number and `size` items per page, as expected by the non-standard API.

```text
http://<url>/?pageNumber=2&size=10

```

--------------------------------

### Gerar build do tema customizado

Source: https://po-ui.io/guides/create-theme-customization

Executa o build e prepara o tema para publicação. Para nomear o arquivo gerado, use o parâmetro --name; para incluir fontes customizadas, use --fonts.

```bash
po-theme build

```

--------------------------------

### Definir schema PoSyncSchema (conference)

Source: https://po-ui.io/guides/sync-fundamentals

Define um schema para uma conferência, com endpoints GET e diff, campo de exclusão, campos, idField, nome e pageSize.

```typescript
import { PoSyncSchema } from '@po-ui/ng-sync';

const conferenceSchema: PoSyncSchema = {
  // Endpoint para o método GET
  getUrlApi: 'https://po-sample-conference.onrender.com/conferences',
  diffUrlApi: 'https://po-sample-conference.onrender.com/conferences/diff',
  deletedField: 'isDeleted',
  fields: [ 'id', 'title', 'date', 'location', 'description' ],
  idField: 'id',
  name: 'conference',
  pageSize: 1
};

```

--------------------------------

### Exibir a documentação completa do po-migration

Source: https://po-ui.io/guides/migration-thf-to-po-ui

Mostra a ajuda e a documentação completa do pacote po-migration.

```bash
po-migration --help

```

--------------------------------

### Exemplo de requisição com paginação

Source: https://po-ui.io/guides/api

Exemplo de requisição GET que retorna a quarta página de registros (registros 31 a 40) usando os parâmetros page e pageSize.

```http
GET https://example.com.br/api/users/?page=4&pageSize=10
```

--------------------------------

### Instalar Angular CLI versão 21

Source: https://po-ui.io/guides/sync-get-started

Instala globalmente o Angular CLI na versão ~21.2.17, necessária para o projeto.

```bash
npm install -g @angular/cli@21
```

--------------------------------

### Exemplo de requisição com ordenação

Source: https://po-ui.io/guides/api

Exemplo de requisição GET que retorna usuários ordenados por nome crescente, idade decrescente e sobrenome crescente, usando o parâmetro order.

```http
GET https://example.com.br/api/users?order=name,-age,surname
```

--------------------------------

### 12 equal columns using PO grid classes

Source: https://po-ui.io/guides/grid-system

Example of a row with 12 columns, each occupying 1/12 of the parent element. The classes po-xl-1, po-lg-1, po-md-1, and po-sm-1 are used for different breakpoints. Requires the @po-ui/style package.

```html
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
```

--------------------------------

### Instalar dependências com yarn

Source: https://po-ui.io/guides

Alternativa para instalar as dependências do projeto usando yarn.

```bash
yarn install

```

--------------------------------

### Comando para executar o aplicativo Ionic

Source: https://po-ui.io/guides/sync-get-started

Execute 'ionic serve' para iniciar o aplicativo e verificar o funcionamento com po-sync.

```bash
ionic serve
```

--------------------------------

### Instalar Ionic CLI versão 7

Source: https://po-ui.io/guides/sync-get-started

Instala globalmente o Ionic CLI na versão ^7.2.0.

```bash
npm install -g @ionic/cli@7
```

--------------------------------

### Basic PO Sync preparation and sync

Source: https://po-ui.io/guides/sync-fundamentals

Configures and prepares PO Sync with a basic config using ethernet network type, then calls sync() after preparation completes.

```typescript
const config: PoSyncConfig = {
  type: PoNetworkType.ethernet
};
const schemas = [conferenceSchema];

this.poSync.prepare(schemas, config).then(() => {
  this.poSync.sync();
  ...
});

```

--------------------------------

### Estrutura HTML para exibir dados do po-sync

Source: https://po-ui.io/guides/sync-get-started

Código para o arquivo src/app/home/home.page.html, que cria botões para buscar e limpar informações, e exibe os dados da conferência sincronizada.

```html
<ion-content class="ion-padding">
  <ion-button expand="full" (click)="loadHomePage()">Buscar informações</ion-button>
  <ion-button expand="full" color="danger" (click)="clear()">Apagar informações</ion-button>

  <ion-card *ngIf="conference">
    <ion-card-content>
      <ion-card-title>
        {{ conference.title }}
      </ion-card-title>
      <p>{{ conference.description }}</p>
      <p>{{ conference.location }}</p>
    </ion-card-content>
  </ion-card>
</ion-content>
```

--------------------------------

### Navegar para a pasta do aplicativo

Source: https://po-ui.io/guides/sync-get-started

Entra no diretório do projeto criado.

```bash
cd po-sync-getting-started
```

--------------------------------

### Atualizar definições de schemas com destroy() e prepare()

Source: https://po-ui.io/guides/sync-fundamentals

Como atualizar definições de schemas: primeiro `destroy()` e depois `prepare()` com a nova definição. A promessa do `destroy()` deve ser concluída antes de chamar `prepare()` para evitar erros.

```javascript
// Schemas atualizados
const schemasUpdated = [...];

this.poSync.destroy()
  .then(() => this.poSync.prepare(schemasUpdated, config))
  .then(() => {
    // Definições dos schemas atualizadas
  });
```

--------------------------------

### Gerar schema com caminho completo

Source: https://po-ui.io/guides/sync-fundamentals

Gera um schema PO Sync especificando um caminho completo.

```bash
ng generate @po-ui/ng-sync:schema --name=conference/schema/conference

```

--------------------------------

### Import PO Sync and PO Storage in main.ts (Standalone)

Source: https://po-ui.io/guides/sync-get-started

Configures the standalone bootstrap in src/main.ts, adding PoSyncModule and PoStorageModule via importProvidersFrom. Requires the same packages as the NgModule approach.

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
import { importProvidersFrom } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

import { PoSyncModule } from '@po-ui/ng-sync';
import { PoStorageModule } from '@po-ui/ng-storage';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    provideRouter(routes, withPreloading(PreloadAllModules)),
    provideHttpClient(withInterceptorsFromDi()),
    importProvidersFrom(PoSyncModule),
    importProvidersFrom(PoStorageModule.forRoot()),
  ],
});

```

--------------------------------

### Buscar registros com PoEntity.find() e PoQueryBuilder.exec()

Source: https://po-ui.io/guides/sync-fundamentals

Busca todos os registros do schema na aplicação local. O método find() retorna um PoQueryBuilder, e é necessário chamar exec() para concluir a busca e obter os registros.

```javascript
this.conferences = await this.conferenceModel.find().exec();

```

--------------------------------

### Instalar e migrar @po-ui/ng-sync

Source: https://po-ui.io/guides/migration-poui-v2

Comandos para instalar a versão 2 do pacote e executar a migração automática.

```bash
npm i --save @po-ui/ng-sync@2
```

```bash
ng update @po-ui/ng-sync --from 1 --migrate-only
```

--------------------------------

### Instalar Angular CLI com yarn

Source: https://po-ui.io/guides/development-flow

Instala o Angular CLI globalmente usando yarn. Pré-requisito: Node.js 18.13.0 ou superior.

```bash
yarn global add @angular/cli
```
Tokens:
Raw