Vincular dados a Construtor de IU páginas usando controladores (recurso avançado)

Os controladores simplificam a vinculação de dados e a lógica de eventos para habilitar predefinições de componente em Construtor de IU.

Os controladores permitem que os construtores de páginas conectem facilmente dados e scripts às suas páginas em Construtor de IU. Um controlador é um tipo de recurso de dados que as predefinições de componente usam para vincular dados a componentes. Os controladores diferem de outros recursos de dados porque contêm dados e lógica de eventos que habilitam predefinições para componentes. Um controlador traz dados do servidor para um componente e traz dados atualizados de volta para o servidor com base nas interações com o componente. Para obter mais informações sobre predefinições de componente, consulte Configurar componentes automaticamente usando predefinições.

Nota:

A criação de controladores não é compatível com Xanadu.

Os controladores são adicionados por padrão quando você usa um modelo de página Construtor de IU. Você pode adicionar controladores a Construtor de IU páginas sem um controlador na gaveta de recursos de dados ou selecionando uma predefinição de componente após adicionar um componente a uma página. Você pode exibir quais controladores estão configurados em sua página abrindo a gaveta de recursos de dados.

Figura 1. Controlador na gaveta de recursos de dados

Tipos de controladores de dados no Construtor de IU

Controladores de dados

Os controladores de dados decidem quais informações devem ser exibidas nas páginas Construtor de IU. Os controladores de dados usam recursos de dados para sincronizar informações em tempo real e atualizar dados/tabelas quando um usuário insere informações. Você pode adicionar manualmente controladores de dados a uma página.

Controladores de IU

Controladores de IU são adicionados a páginas ao usar modelos de página Construtor de IU e não podem ser adicionados manualmente.

Como usar controladores com predefinições no Construtor de IU

Você pode adicionar vários controladores a uma página Construtor de IU, mas não pode usar o mesmo controlador duas vezes. Se você tentar usar uma predefinição de componente que precisa de um controlador, Construtor de IU solicitará que você o adicione.

Nem todos os componentes funcionam com controladores, mas você pode ver facilmente quais funcionam na biblioteca de componentes. Se você tiver um controlador configurado na página Construtor de IU, poderá abrir a biblioteca de componentes para exibir quais componentes têm predefinições. Componentes com predefinições disponíveis são realçados na biblioteca de componentes.

Figura 2. Componentes com predefinições

Adicionar um controlador

Adicione um controlador de dados à sua página para usar predefinições de componente.

Antes de Iniciar

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

O controlador de registro é o único controlador que você pode adicionar a uma página em Xanadu.

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
   Para obter mais informações, consulte Configure como os usuários interagem com suas aplicações no Construtor de IU.
3. Crie ou abra uma página ou variante de página.
   Para obter mais informações sobre como criar uma página em Construtor de IU, consulte Criação de uma página no Construtor de IU.
4. Selecione o ícone + na gaveta de recursos de dados.
5. Selecione Recurso de dados.
   
6. Insira formulário no campo de pesquisa.
7. Selecione o controlador que você deseja adicionar à sua página.
8. Selecione Adicionar.
   
9. Preencha os campos para configurar o controlador.
   

Resultado

O controlador de formulário é exibido na seção Recursos de dados.

Editar um controlador

Configure um controlador para extrair dados de uma tabela.

Antes de Iniciar

Função necessária: administrador

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
   Para obter mais informações, consulte Configure como os usuários interagem com suas aplicações no Construtor de IU.
3. Crie ou abra uma página.
   Para obter mais informações sobre como criar uma página em Construtor de IU, consulte Criação de uma página no Construtor de IU.
4. Selecione o controlador que você deseja editar na gaveta Dados e scripts.
   
5. No formulário, preencha os campos.

   Tabela 1. Formulário do controlador de formulário

   Campo	Descrição
   Tipo	O controlador é predefinido como o tipo para todos os controladores.
   Tabela	Adicione uma tabela da qual você deseja que o controlador extraia dados.
   SYS ID	Insira o identificador exclusivo de um registro, forneça um valor ou use -1 para gerar um novo valor.

6. Feche o modal do controlador de edição.
7. Selecione Salvar.

Excluir um controlador

Exclua um controlador de que você não precisa mais em Construtor de IU.

Antes de Iniciar

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

Os controladores não podem ser excluídos de páginas criadas com um modelo de página.

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
   Para obter mais informações, consulte Configure como os usuários interagem com suas aplicações no Construtor de IU.
3. Abra a página com o controlador que você deseja excluir.
4. Selecione o ícone de Menu (ícone de ) ao lado do controlador que você deseja excluir.
   
5. Selecione Excluir.
   
   O controlador é removido das instâncias de recursos de dados locais.

Exibir propriedades e eventos na API do controlador

A API pública do controlador define os dados de saída que um controlador fornece para uma predefinição. Isso inclui os valores de propriedade e eventos manipulados usados por um componente quando uma predefinição é selecionada. As informações de propriedade e evento estão disponíveis para exibição no Construtor de IU.

Os valores de propriedade do componente em uma predefinição podem ser valores estáticos ou caminhos para os dados de saída do controlador. Você pode usar o inspetor de recursos de dados no Construtor de IU para exibir os valores da estrutura de dados do controlador usada por uma predefinição. Para exibir a carga transportada por um evento na predefinição, você pode procurar esse evento no seletor de manipulador de eventos.

Como exibir propriedades na API do controlador

Você pode exibir as propriedades predefinidas no inspetor de dados do UIB. Conhecer os valores disponíveis ajuda a entender como um componente se comportará em seu design e a identificar quaisquer propriedades na predefinição que você queira substituir.

Este procedimento pressupõe que você tenha colocado um componente com uma predefinição na página e configurado um controlador. Para obter instruções, consulte Adição de um controlador.

A guia de configuração exibe valores de propriedade predefinidos como um caminho para a saída do controlador. O caminho dos dados de base é expresso como @data.<controller_name> . O restante do caminho é criado usando o conteúdo das categorias na hierarquia de dados do controlador. Você pode usar este caminho para exibir os valores atuais do registro para o qual o controlador foi configurado.

1. Para exibir os recursos de dados de um componente, selecione o ícone de dados na barra lateral inferior esquerda.

   

   O inspetor de dados do UIB de três colunas é exibido.

2. Na primeira coluna em que os recursos de dados são listados, selecione o controlador cuja saída você deseja exibir.
   Os dados de configuração do controlador selecionado aparecem na guia Configuração da segunda coluna. Essas são as propriedades de entrada que você inseriu ao configurar o controlador para o primeiro componente com uma predefinição colocada na página. Você pode editar esses valores de conexão aqui, se quiser.

   Nota:

   Configurar -1 para o valor no campo SYS ID configura o controlador para um novo registro. O controlador gera um GUID completo que você pode usar para armazenar dados em relação ao registro antes que ele seja salvo. Isso permite que você execute ações em um registro recém-criado, como salvar anexos.
   
   
   
3. Selecione as saídas de nível superior na terceira coluna.

   Este é o nível primário da hierarquia de dados do controlador, indicado com o prefixo @data., seguido pelo ID do controlador. Essa combinação forma o caminho raiz para os dados. Os dados contidos nas saídas de nível superior são exibidos no campo de código adjacente e estão disponíveis para predefinições e scripts. Outras propriedades nesse nível são algumas propriedades comuns que se aplicam a todos os registros.

   

   Quando a predefinição mapeia uma propriedade de componente para a saída do controlador, o caminho para a saída é mostrado em vez do valor. Os caminhos são indicados como @data.<ID do controlador>.<caminho do nível superior para a propriedade de saída> e podem ser usados como valores ou como parte de expressões de fórmula.

   Neste exemplo, o mapeamento na predefinição resulta em um caminho para @data.gform.table.

   
   
   
4. Para exibir dados abaixo do nível superior, selecione a categoria secundária indicada pelo caminho no valor da propriedade predefinida.

   O nome da categoria secundária aparece no caminho como @data.<controller ID> .<category> . Os dados dessa categoria são anexados a esse caminho. O caminho raiz acima do campo de código indica a categoria secundária que está sendo usada. Neste exemplo, o caminho para a propriedade Exibir na categoria de formulário é expresso como @data.gform.form.view. Esse valor predefinido exibe formulários na exibição do espaço.

   
   
   

   Neste exemplo, várias propriedades de saída do controlador são usadas em uma expressão de fórmula para criar um objeto.

   
   
   
5. Para exibir um valor de propriedade com script, selecione o ícone de cadeado ao lado da propriedade.

   Isso coloca a propriedade no modo de edição e abre um modal para editar o script.

   

Exibição de eventos na APIdo controlador ]

Você pode exibir eventos manipulados mapeados para um componente por uma predefinição e suas cargas úteis na guia Eventos no painel de configuração do Construtor de IU. Se o mapeamento de dados para um evento não for apropriado para o seu caso de uso, você poderá adicionar manipuladores de dados adicionais.

Nota:

Os mapeamentos do manipulador de dados fornecidos com a predefinição não são editáveis.

1. Selecione a guia Eventos no Construtor de IU.
2. Para exibir o mapeamento de um evento predefinido, selecione o bloco do evento.

   Um modal aparece mostrando as propriedades de carga do evento predefinido. Você pode desabilitar o evento neste modal.

   
   
   
3. Para adicionar um manipulador de eventos ao evento, selecione + Adicionar manipulador de eventos no bloco do evento.
   
   
   

   Um modal aparece, mostrando uma lista de eventos manipulados disponíveis. Você pode selecionar qualquer ação na lista, incluindo um manipulador de eventos de um dos controladores listados.

4. Selecione um manipulador de eventos na lista e clique em Adicionar.

   O novo manipulador é listado no bloco do evento.