--- sourceDocument: Criar ou modificar aplicações do Xanadu sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development Release : - xanadu ft:locale : - pt-BR ft:publication_title : - Criar ou modificar aplicações do Xanadu ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- # Expor dados dinamicamente em páginas do Construtor de IU (recurso avançado) # Expor dados dinamicamente em páginas do Construtor de IU (recurso avançado) {#ariaid-title1} * Versão de lançamento: Xanadu * * Atualizado 1 de ago. de 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 7 min. de leitura Sincronize dados entre ServiceNow tabelas e dados com as páginas que você cria com Construtor de IU. As páginas exibem dados sincronizados em tempo real e atualizam dados/tabelas quando um usuário insere informações. ## Aprendizado sobre recursos de dados no Construtor de IU {#data-resources__section_kbz_fj3_myb} Construtor de IU sincroniza ServiceNow tabelas/dados usando [recursos de dados](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-data-resource-ui-builder "Uma maneira dinâmica e reutilizável de definir quais dados buscar para os componentes de uma página."). Um recurso de dados busca os dados que o Construtor de IU usa para exibir informações em um [componente](https://servicenow-prod.fluidtopics.net/K13DUGUgW4oiiQXteBMKFg#gloss-component-ui-builder "Use a biblioteca de componentes do Construtor de IU para criar páginas. Os componentes têm uma interface que um usuário final pode exibir e interagir. Os componentes podem se comunicar por meio de eventos e propriedades. Os componentes usados com frequência incluem Cabeçalho, Imagem, Lista, Formulário e Botão."). Construtor de IU componentes usam recursos de dados para sincronizar dados em diferentes experiências. Os recursos de dados tornam os dados nos componentes dinâmicos, o que significa que você não precisa recriar dados para cada página. Os recursos de dados são encontrados na gaveta de recursos de dados. A gaveta de recursos de dados é onde você pode adicionar e configurar um recurso de dados para sua página. Depois de configurar o recurso de dados, você pode sincronizar os dados entre os componentes da página e ServiceNow tabelas/dados. Figura 1. Recurso de dados Gaveta A gaveta de recursos de dados contém três seções: * Recursos de dados: os recursos de dados que fazem parte da experiência * Configuração/Eventos: recursos de dados configurados e eventos para a experiência * Visualização: JSON para as informações retornadas pelo recurso de dados {#data-resources__ul_lgm_whl_dzb} Você pode vincular as propriedades de configuração de componentes, outros recursos de dados, scripts de cliente, estado do cliente e eventos a esses recursos de dados. Defina condições para um filtro em seu recurso de dados. Para obter mais informações, consulte [Conectar dados a seus componentes](https://servicenow-prod.fluidtopics.net/ajgshAjdp2qhXGXuU_IHmA "Vincule dados expostos por recursos de dados locais a componentes na página Construtor de IU."). ## Como os recursos de dados funcionam no Construtor de IU {#data-resources__section_c11_j2j_xnb} Os recursos de dados buscam dados das APIs Glide, GraphQL e REST e os transformam para uso em um componente em uma página Construtor de IU. Os componentes usam instâncias de recursos de dados herdados e locais. Os recursos de dados herdados são carregados automaticamente em uma página Construtor de IU, e as instâncias de recursos de dados locais podem ser adicionadas e configuradas. Os recursos de dados são avaliados com base nos valores de entrada especificados para garantir que os dados corretos sejam recuperados. Para obter mais informações sobre recursos de dados herdados e locais, consulte [Recursos de dados herdados versus locais no Construtor de IU](https://servicenow-prod.fluidtopics.net/BDUmENQY96OSsVG1qIX2QQ#data-resources__inherited_versus_local). ## Recursos de dados locais no Construtor de IU {#data-resources__section_t32_nhp_d4b} Você pode selecionar recursos de dados locais, como dados do servidor, operações, transformações ou dados do cliente, como a API gForm, para trazer dados para a página Construtor de IU. Nota: Somente um GlideForm é compatível por página em Construtor de IU. Para obter mais informações sobre o GlideForm, consulte o [site do ServiceNow Developer](https://developer.servicenow.com/dev.do#!/reference/api/vancouver/client/c_GlideFormAPI). Os recursos de dados são organizados por aplicação na gaveta de recursos de dados. Em seguida, eles são categorizados pelo tipo de recurso de dados, como Dados do servidor ou Transformação. Por exemplo, a aplicação Global tem vários recursos de dados, mas a aplicação Customer Service Management (CSM) Workspace tem apenas alguns recursos de dados. Figura 2. Recursos de dados Você vê diferentes recursos de dados dependendo da aplicação em que está. Se você selecionar a aplicação Global, verá recursos de dados diferentes em Dados do servidor do que se selecionar a aplicação CSM Espaço configurável. ## Como usar vinculação de dados no Construtor de IU {#data-resources__section_v4x_n2j_xnb} A vinculação de dados permite criar páginas dinâmicas sincronizando páginas e componentes com recursos de dados. Você pode vincular dados a um componente para recuperar dados do back-end e usar parâmetros de campo para obter propriedades do URL. Alterar os parâmetros de URL permite criar páginas dinâmicas que mostram dados diferentes, dependendo dos parâmetros. Você pode vincular dados a um componente das seguintes maneiras: Vinculação de contexto : Use parâmetros de URL para conectar partes da URL às propriedades da sua página. Por exemplo, você pode vincular o nome da tabela do URL ao seu componente usando a sintaxe @context, como esta: `@context.props.table`. Imagine que você tem uma página Construtor de IU com um campo obrigatório chamado `table`. O URL da sua página pode ser /demo/page/\ . O\ pode ser algo como `incidente`. Os dados também podem vir de recursos de dados primários ou ser propriedades locais específicas da página. Para vincular as propriedades do componente, outras propriedades de recursos de dados ou detalhes do evento à propriedade da página, use uma vinculação `@context.props.table`. Certifique-se de fornecer um valor de teste no URL ou de definir um valor fixo para essa propriedade na configuração da página se estiver usando a vinculação de contexto. Vinculação de recurso de dados : Use recursos de dados para buscar dados do back-end da sua instância, como Estado do cliente, GraphQL ou uma REST API. Essas fontes de dados têm propriedades que podem ser vinculadas a elementos em uma página Construtor de IU. Por exemplo, se você estiver usando o recurso de dados Pesquisar registro, poderá utilizá-lo em um componente de botão. Você pode usar uma expressão de dados na propriedade "rótulo" como esta: `@data.lookup_record_1.result.number.displayValue`. Vinculação de componente : Use a vinculação de componente para conectar um componente a outro. Digamos que você tenha um componente de menu de lista na página Construtor de IU. O menu de lista revela a lista escolhida no momento para outros componentes na mesma página. Esses outros componentes podem acessar os dados vinculando-os a eles usando uma expressão como `@elements.list_menu_1.selectedListId`. Vinculação de parâmetro de estado do cliente : Use a vinculação de parâmetro de estado do cliente para conectar e sincronizar dados entre uma aplicação do lado do cliente e componentes Construtor de IU. A vinculação de parâmetros permite que o estado do cliente atualize automaticamente os dados nos componentes e vice-versa. Use a sintaxe `@state` para vincular uma propriedade de estado a um parâmetro de estado do cliente. ## Tipos de fontes de dados disponíveis no Construtor de IU {#data-resources__section_m2g_xwj_xnb} Você pode usar os seguintes tipos de recursos de dados mostrados na tabela. {#data-resources__table_edg_fyj_xnb__entry__2} | Tipo do recurso de dados | Descrição | |-|-| | Controlador | Encapsula a lógica de dados e eventos e habilita predefinições para componentes. | | GraphQL | Consultas GraphQL e mutação que são executadas. | | Transformação | Script que transforma os dados de entrada em outro formato. | | Estado do cliente | Recursos de dados do lado do cliente que incluem informações do cliente, estados ou lógica específicos do domínio, preferências do usuário e assim por diante. | | Composto | Recurso de dados reutilizável único que contém vários recursos de dados. | | REST | Recursos de dados que são feitos por meio de solicitações de REST API. | [Tabela 1. Tipos de recursos de dados] {#data-resources__table_edg_fyj_xnb} ## Recursos de dados herdados versus locais no Construtor de IU {#data-resources__inherited_versus_local} Os recursos de dados herdados compartilham informações das partes ao redor de uma página Construtor de IU, como uma aplicação. Imagine que sua página está em um quadro grande e obtém algumas informações do quadro ou de outras partes ao seu redor. Você pode usar essas informações conectando-as às propriedades da sua página, como se vinculasse peças de quebra-cabeça. Se você obter essas informações do quadro, não precisará obtê-las novamente. Recursos de dados locais são itens que você adiciona a uma página Construtor de IU. Imagine que você está criando uma página para solicitações de viagem. Você pode sincronizar os dados do funcionário com um componente de lista para que os funcionários possam solicitar viagens vinculadas às suas próprias informações. Para usar esses recursos de dados, traga-os de um aplicativo ou crie-os na plataforma ServiceNow. Em seguida, em Construtor de IU, disponibilize esses recursos para seus componentes. Em seguida, vincule os dados ao seu componente para que ele possa trabalhar com ele. Por exemplo, você pode ter um conjunto de registros, expô-lo no Construtor de IU e vinculá-lo a um componente. A partir daí, configure o componente para fazer coisas com os dados, como salvar novos registros. Depois que sua página estiver sincronizando dados, você a conectará à parte da página que precisa deles, como um componente. É como garantir que a peça certa do quebra-cabeça se encaixe no lugar certo. Em seguida, você pode informar a essa parte da página o que fazer com os dados. Por exemplo, você pode usá-lo para adicionar novos planos de viagem para funcionários. ## Construtor de IU Propriedades do recurso de dados {#data-resources__section_i3f_4d1_ynb} Quando você adiciona um recurso de dados em Construtor de IU, é como adicionar uma ferramenta que sabe de onde obter informações. As propriedades do recurso de dados são as instruções que informam a um recurso de dados como trazer dados para Construtor de IU páginas. Essas propriedades informam a um recurso de dados quais dados obter, como organizá-los e quais condições seguir. Por exemplo, você pode usar essas propriedades para especificar em quais tabelas procurar, como classificar os dados e muito mais. Essas propriedades são o que faz o recurso de dados funcionar corretamente e fornece os dados necessários. ## Construtor de IU Scripts de recursos de dados {#data-resources__section_hmp_jd1_ynb} Os scripts de recursos de dados são instruções especiais que você fornece Construtor de IU para retornar partes específicas de dados. Por exemplo, se você estiver lidando com uma lista de produtos, um script poderá informar a um recurso de dados para mostrar somente produtos que estão disponíveis em estoque ou organizá-los em um pedido específico. Os scripts de recursos de dados permitem que você personalize como Construtor de IU trata as informações, como adicionar regras ou ações extras. * **[Adicionar e configurar recursos de dados a uma página](https://servicenow-prod.fluidtopics.net/3~opgnfG3pqPmOiWlaDsJA)** Adicione recursos de dados para expor dinamicamente dados de tabelas, registros ou outros elementos em sua página em Construtor de IU. * **[Vincular dados a Construtor de IU páginas usando controladores (recurso avançado)](https://servicenow-prod.fluidtopics.net/5gsUs5SRTqPcjjRLgxlrPw#controllers)** Os controladores simplificam a vinculação de dados e a lógica de eventos para habilitar predefinições de componente em Construtor de IU. * **[Componentes de dados do Connect](https://servicenow-prod.fluidtopics.net/CtPdVVAbGWW~bbWIETuAow)** Use o modal de vinculação de dados para associar dados expostos por recursos de dados locais a componentes na página Construtor de IU. * **[Criar e vincular um parâmetro de estado do cliente a um componente (recurso avançado)](https://servicenow-prod.fluidtopics.net/~FM4GMoQLzj7Owiw2fZ8uw)** Crie e vincule um valor de parâmetro de estado do cliente a um componente em Construtor de IU. Ao adicionar valores personalizados aos componentes, esses componentes podem ser atualizados automaticamente por meio de um script. * **[Como definir e vincular client scripts aos componentes](https://servicenow-prod.fluidtopics.net/JgCSspyz89wEmcHxvB2EeA)** Adicione e edite client scripts em Construtor de IU para que você possa atualizar o estado do cliente por meio de eventos. Você pode vincular esses scripts a qualquer componente usando um manipulador de eventos. * **[Configuração de dados de várias tabelas](https://servicenow-prod.fluidtopics.net/wSG5B9Er2mpP82TXDOHjHA)** Apresente dados de várias tabelas usando componentes e controle o layout e o estilo. * **[Como trabalhar com o mapeador de ação de exibição de entidade para Construtor de IU](https://servicenow-prod.fluidtopics.net/~~lesTv_8D~hxYlhPSYxNw)** Com Construtor de IU, você pode usar a aplicação Entity View Action Mapper (EVAM) para padronizar como as fontes de dados em seus componentes são exibidas em seus cartões e listas.