Process Flow

O Process Flow é o controle do Fiori que permite visualizar etapas de um processo de forma gráfica. Ele pode ser utilizado para demonstrar cenários onde há etapas subsequentes para que um objetivo seja atingido.


Fonte de dados

Neste cenário, iremos utilizar uma tabela customizada chamada YTACH_FLOW. Ela contém 3 campos – 'planning', 'design' e 'implementation' – criados para demonstrar o uso de status semânticos em diferentes etapas do fluxo.


Criando a aplicação e Process Flow

No Builder, selecione o modelo no qual deseja criar sua aplicação. Neste tutorial, utilizaremos o "Relatório".

Na aba "Configuração", preencha com os dados básicos do app.

Na aba "Dados", indique a fonte de dados. Neste tutorial, a tabela YTACH_FLOW.

Na aba "Saída", indicar os campos desejados na Lista Principal.

Na aba "Tela (lista principal)", clique no botão [+ Process Flow].

Será adicionado um novo Process Flow na aplicação.


Criando etapas no Process Flow

Para criar a primeira etapa do fluxo, clique no botão [+ Etapa].

Para adicionar um campo na etapa desejada, pode-se utilizar o drag-and-drop a partir do painel de campos à esquerda ou clicar sobre o texto em azul e em seguida [Process Flow - Etapa 1].

Para configurar como o campo é apresentado no fluxo, clique no botão "Configurar" (engrenagem).

No diálogo apresentado, adicione duas novas linhas à área "Status". Nelas, adicione configurações para os valores "true" e "false" (valores booleanos presentes na tabela YTACH_FLOW). Nas colunas "Estado" e "Texto do Estado", é possível configurar o status semântico e texto apresentados no app, respectivamente.

Repita este mesmo procedimento para as demais etapas.

Ao final, as etapas são apresentadas desta forma:


Adicionando ícones às etapas

Para adicionar um ícone na etapa do Process Flow, clique no botão "Configuração" (engrenagem) correspondente à etapa desejada.

No diálogo apresentado, clique no botão [Selecionar] para escolher um dos ícones da biblioteca Fiori.


Construção e resultado

Para finalizar, clique no botão [Construir].

Na aplicação, o fluxo é apresentado desta forma.