A tela

Flow canvas: the toolbar, panels, menus, and debug controls that every tool shares, and what differs between Studio Web, VS Code, and Studio Desktop.

The Flow canvas is the visual workspace where you build Flow processes, in every environment: VS Code, Studio Web, and Studio Desktop. Each step of a workflow is a node, and the lines between nodes set the order in which steps run. The canvas opens when you create or open a .flow file.

The canvas works the same way in all three tools. The sections below describe what they share, and What differs between tools covers the rest.

Parts of the canvas

Area	Location	Para que serve
Tela	Centro	Place, connect, and arrange nodes.
Barra de ferramentas inferior	Centro inferior	Choose the product the workflow is built for, start a debug run or an evaluation, add a node, and add a note.
Painel de Propriedades	Direita	Configure the selected node.
Panel below the canvas	Inferior	Review debug runs, the execution trace, and the details of each node, and work with evaluations.

Uma faixa de ícones na borda direita abre o painel Propriedades , os logs e o painel de observação.

A barra de ferramentas inferior

A barra de ferramentas inferior tem estes controles, da esquerda para a direita:

• Menu Criar como : mostra e define o produto para o qual o projeto foi criado.
• Run Debug (▶): starts a debug run.
• Executar avaliação (ícone do pacote): abre o painel Configurar execução de avaliação , que pontua um conjunto de dados. A seta ao lado do ícone abre um menu com Executar avaliação, que seleciona um conjunto de dados e inicia uma execução, e Adicionar ponto de dados, que captura entradas e saídas esperadas em um assistente guiado. Avaliações as descreve.
• Adicionar nó (+): abre o painel Adicionar nó .
• Adicionar observação (ícone de página): adiciona uma observação à tela.

Adição de nós

O botão + na barra de ferramentas inferior abre o painel Adicionar nó , que possui uma caixa de pesquisa e grupos de nós por finalidade.

In order, the categories are Agent, Connector, Data, Document, Human, Control, Tool, and Wait for event, followed by the categories that call existing work. Scroll the panel to see the rest. A Trigger category appears when you add a node from the bottom toolbar. Node reference lists every node by category.

For example, the Tool category holds Script, Conversational tools, Queue tools, and Voice tools. Tool describes them.

O + no identificador de saída de um nó adiciona um novo nó e o conecta em uma etapa.

Observação:

Você pode adicionar gatilhos apenas na barra de ferramentas inferior, não a partir de identificadores de nós.

Conexão de nós

Os nós conectam-se por meio de identificadores, os pequenos pontos nas bordas de um nó. Um identificador de saída no lado direito de um nó conecta-se a um identificador de entrada no lado esquerdo do próximo nó. A tela valida conexões em tempo real: verde indica uma conexão válida e vermelho indica uma inválida. As conexões respeitam as restrições de nós; por exemplo, um gatilho não pode se conectar a outro gatilho.

Os segmentos de borda podem ser arrastados para reposicioná-los. O caminho ajustado é mantido para a sessão, mas não afeta o documento salvo ou o histórico de desfazer.

O Painel de Propriedades

O painel de propriedades abre à direita quando um nó é selecionado, mostrando a configuração desse nó. As guias variam de acordo com o tipo de nó; por exemplo, um nó do Script mostra Parâmetros, Tratamento de erros e Avançado.

As variáveis que pertencem a todo o fluxo de trabalho não são gerenciadas no painel de propriedades. Eles residem no painel Variáveis separado, que as Variáveis e o fluxo de dados descrevem.

A visualização expandida de tela cheia de um nó está disponível em sua barra de focalização. A visualização expandida tem três colunas: Entrada, que mostra os dados que o nó pode ler em uma exibição de Esquema ou JSON , Propriedades, que contém a configuração do nó, e Saída, que mostra os dados que o nó produziu. A coluna Saída tem um menu de modo com Ativo, Simulação estática e Gerado, que a simulação de saída descreve.

Depuração

Run Debug (▶) in the bottom toolbar runs the workflow on the canvas. If the trigger has inputs, a dialog asks for their values first. As the run progresses, each node shows its status, and the panel below the canvas shows the run and its execution trace.

Durante uma execução, a barra de ferramentas inferior mostra os controles de execução: um botão vermelho Parar depuração , Continuar e Próxima etapa. A sessão de depuração também termina quando você altera o fluxo de trabalho.

Pontos de Interrupção

Breakpoints are markers on nodes. To set one, hover over the node, then select ⋮ (More options) > Add breakpoint in its toolbar. The run pauses when it reaches a breakpoint. A breakpoint appears as a red dot on the node, and a run that pauses there shows a pause icon on it. Continue and Next step control how the run continues. Breakpoints can be set before a run and during a run.

O painel abaixo da tela

Após uma execução de depuração, um painel aparece abaixo da tela.

Guia	O que ele mostra
Execuções	As execuções de depuração, o trace de execução da execução selecionada e os detalhes do item selecionado. Para uma execução, os detalhes têm as guias Variáveis, Incidentes e Metadados . Para um nó, elas mostram suas entradas e saídas.
Conjuntos de dados, avaliadores, execuções de avaliação	As guias de avaliação. Avaliações as descreve.

Selecionar um nó no trace de execução destaca o nó correspondente na tela.

Node and canvas menus

The menu of a node opens from ⋮ (More options) in its hover toolbar, or when you right-click the node. It has Add breakpoint, Add probe, Copy, Cut, Paste, and Delete. On a trigger, it also has Debug and Set as default entry point.

Definir como ponto de entrada padrão define o gatilho selecionado como o ponto de entrada padrão do fluxo de trabalho. Adicionar teste anexa um painel de teste ao nó. O painel mostra o valor de uma expressão, começando com $self.output que é a saída do próprio nó, e o + no painel adiciona outra expressão.

Clicar com o botão direito do mouse no plano de fundo da tela mostra as opções de layout:

• Arrumar nós: organiza automaticamente todos os nós
• Arrumar selecionados: organiza automaticamente os nós selecionados (2 ou mais)
• Alinhar: esquerda, centro, direita, superior, meio, inferior (2+ selecionados)
• Distribuir: horizontal, vertical (3 ou mais selecionados)
• Copiar / colar / excluir

Após Arrumar nós ou Arrumar seleção, as bordas roteia em torno de nós em vez de passar por eles, mantendo o diagrama legível quando os nós são reposicionados. As bordas de loop (autoconexões e identificadores de loopback) mantêm seu roteamento existente baseado no identificador.

Atalhos do teclado

Principais atalhos de tela:

• Cmd+Z / Ctrl+Z: desfazer
• Cmd+Shift+Z / Ctrl+Shift+Z: refazer
• Cmd+Shift+L / Ctrl+Shift+L: layout automático de todos os nós
• Delete / Backspace: excluir os nós selecionados

Keyboard shortcuts lists every shortcut of the canvas.

What differs between tools

Each tool adds its own explorer and toolbar around the canvas.

	Studio Web	Código VS	StudioDesktop
Explorer	The Explorer on the left lists the solution, its projects, and the resources a workflow can use.	The UiPath Maestro view, from the UiPath icon in the Activity Bar.	The Studio Desktop Explorer, with the solution and its projects.
Top toolbar	A Build | Manage switch, where Manage shows the deployments, and a Debug menu at the top left.	The UiPath commands in the Command Palette, which VS Code extension lists.	Design and Debug tabs, and a Debug menu with Debug File, Run File, Debug, and Run.
Depurar etapa por etapa	In the Debug menu (Shift+F5).	Not available.	Not available.
Autopilot (visualização)	The Autopilot panel.	The separate UiPath Autopilot extension.	The Autopilot panel on the right.

Studio Web debug menu

The Debug menu at the top left of the Studio Web toolbar has these options:

• Debug (F5): runs the workflow, like Run Debug in the bottom toolbar.
• Depurar passo a passo (Shift+F5): executa o fluxo de trabalho, um nó de cada vez.
• Debug configuration: opens the Debug configuration dialog. Its Entrypoint arguments tab sets the trigger's input values for debug runs, and its Solution resources tab chooses which connection each resource uses, under Debug using. While Show before debugging is on, the dialog also opens each time you start a debug run.
• Implantar solução para depuração

During a debug run, the Logs panel on the right shows the preparation steps of the run.

Properties panel options in VS Code and Studio Desktop

In VS Code and Studio Desktop, the sliders icon next to Properties, above the canvas, opens a menu that changes how the properties panel looks:

• Sections: show or hide Parameters, Variables, Input, and Output.
• Panel behavior: Auto hide or Always persist.
• Default layouts: Default — Right, Default — Bottom, or Default — Split.
• Saved presets: Save as preset saves the current layout as a preset.

You can also drag the Parameters and Variables tabs by their grip to rearrange them.

Páginas relacionadas

• Atalhos de teclado: mova-se pela tela e trabalhe com nós mais rapidamente.
• Your first Flow: build a working process on the Flow canvas.
• Debugging effectively: tips for debugging a process.