Usando Itens De Dados Com Widgets

Last modified: August 05, 2022

Os widgets estão disponíveis para permitir que você crie uma ferramenta que seja consistente com a aparência e a funcionalidade do designer. Esses widgets são compatíveis com todos os métodos de ciclo de vida e não exigem tanta configuração manual. Por exemplo, ao usar widgets, você não precisa criar manualmente os itens de dados, anexar controles de interface do usuário para alterar eventos para atualizar dados ou definir o estado inicial de um controle de interface do usuário com AfterLoad.

Widgets e o DOM

Se estiver usando widgets, não interaja com eles por meio do DOM, pois eles modificam seus nós DOM dinamicamente por conta própria.

Para começar, puxe a biblioteca de interface do usuário do JavaScript adicionando o seguinte script ao cabeçalho da página. Esse script usa Document. Write para permitir que a janela. Alteryx. LibDir para especificar onde encontrar a biblioteca de interface do usuário, independentemente de onde o utilizador instalou o designer.

Colocar um widget

Os widgets são colocados antes de SetConfiguration ser chamado, pois a biblioteca de UI do SDK do JavaScript só coloca widgets na inicialização. Não tente adicionar ou modificar essas marcas depois que a página HTML tiver terminado de carregar.

Use a tag para colocar o widget no corpo da página. Esta tag aceita os seguintes atributos:

  • Data-UI-props: contém uma String de objeto JavaScript diferencia maiúsculas de minúsculas que descreve todas as propriedades a serem definidas na seleção e configuração do widget. As propriedades incluem:
    • tipo: obrigatório. Identifica qual widget para renderizar.
    • widgetId: usado para acessar o widget. Deve ser exclusivo em todos os widgets.
  • Data-item-props: defina para criar e anexar automaticamente um item de dados ao widget. Contém uma cadeia de caracteres de objeto JavaScript diferencia maiúsculas de minúsculas que descreve todas as propriedades para definir em selecionando e Configurando o item de dados. As propriedades incluem:
  • Atributos de marcação padrão, como Class ou Style. Os atributos persistem depois que o widget foi renderizado.

dados-UI-props e processamento de dados-item-props

Os atributos Data-UI-props e data-item-props são processados com uma chamada de eval () direta do JavaScript. Você pode referenciar diretamente valores e objetos que vivem na janela dentro dele.

dados-UI-props e processamento de dados-item-props

Os atributos Data-UI-props e data-item-props são processados com uma chamada de eval () direta do JavaScript. Você pode referenciar diretamente valores e objetos que vivem na janela dentro dele.

Vincular manualmente um widget

Para vincular manualmente um item de dados existente a um widget, use o método Binddataitemtowidget no Gerenciador.

Janela. Alteryx.Gui.Manager.bindDataItemToWidget(window.bearDataItem, 'bear')

Isso garante que o valor do item de dados é persistente e carrega corretamente da configuração XML da ferramenta, supondo que um item de dados foi adicionado ao Gerenciador ou DataItemContainer.

Para alterar o valor do widget descrito, chame a função SetValue no item de dados associado; o widget também atualiza. Várias coisas além dos dados são sincronizadas a partir do item de dados automaticamente, dependendo do item de dados escolhido.

Várias propriedades sincronizadas comuns:

  • Desativado
  • Escondidos
  • Nos itens de dados do seletor, optionList

Para alterar os adereços de item de dados de um widget depois que ele foi criado automaticamente pelo data-item-props, você deve obter o item de dados pelo nome de dados do Gerenciador:

dados do VARItemToModify = janela. Alteryx.Gui.Manager.getDataItem(dataName) dataItemToModify.setDisabled(true)

Alterar um widget

Para alterar as propriedades de interface do usuário de um widget depois que ela foi criada, use o método setProp. Não tente alterar os dados do widget-UI-props no nó DOM após o início do BeforeLoad; Eval () nessas propriedades só acontece na página inicial scrape.

Janela. Alteryx.Gui.Manager.setProp (widgetId, propertyName, newPropertyValue)

Para alterar as propriedades do item de dados de um widget, recupere-as de Manager. getDataItem (dataName).

Usar coleções

CheckBox e RadioButton widgets oferecem suporte a alternância de visibilidade de elementos HTML aninhados e widgets, portanto, a interface do usuário só apresenta a seleção ativa e seu conteúdo aninhado. Para criar uma coleção, coloque elementos HTML em vez disso, uma marca ayx .

HTML
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Location tool</title> 
    <script type="text/javascript"> 
      	// This line below is the necessary piece for loading our UI library 
      	document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">') 
    </script> 
    <script> 
      	// Any widget data-ui-props you wish to create in JavaScript instead of in-line 
      	// should be placed in a script tag here in the head, so that the object is alive 
      	// on the window, when the widget itself get's processed during SetConfiguration 
      	// which happens immediately after the page has completed loading. 
      	// If you are referencing a config object then we recommend namespacing your UI to reduce the likelihood of 
      	// conflicting with other properties on the window. 
      	window.MyGUINamespace = {} 
      	window.MyGUINamespace.XWidgetInitialProps = { 
        	type: 'TextBox', 
        	widgetId: 'X', 
        	placeholder: 'X coord value' 
      	} 
      	window.MyGUINamespace.YWidgetInitialProps = { 
        	type: 'TextBox', 
        	widgetId: 'Y', 
        	placeholder: 'Y coord value' 
      	}
    </script> 
</head> 
<body> 
 
    <h1>Location:</h1> 
    <br /> 
    <label>X:</label> 
    <!-- Note, you may use the data-ui-props to simply reference variables, as it will be eval()ed as JavaScript. --> 
    <ayx data-ui-props='window.MyGUINamespace.XWidgetInitialProps'></ayx> 
    <br /> 
    <label>Y:</label> 
	<ayx data-ui-props='window.MyGUINamespace.YWidgetInitialProps'></ayx> 
	</ayx> 
 
    <script type="text/javascript"> 
 		window.Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
    		// Using SimpleInt data items to work with integral values. 
    		var xDataItem = new AlteryxDataItems.SimpleInt('X') 
 
    		manager.bindDataItemToWidget(xDataItem, 'X') 
 
    		// Adding the data items to the manager is necessary if you want it 
    		// to automatically persist them during GetConfiguration for you 
    		// The manager is also window scoped at window.Alteryx.Gui.manager 
    		manager.addDataItem(xDataItem) 
  		} 
 
  		// This function will be called when it tries to persist the data 
  		// to give you a way of returning a string to display on the canvas 
  		window.Alteryx.Gui.Annotation = function (manager) { 
    		var xDataItem = manager.getDataItem('X') 
    		var yDataItem = manager.getDataItem('Y') 
    		return 'X:' + xDataItem.getValue() + '\nY:' + yDataItem.getValue() 
  		} 
 
    </script> 
</body> 
</html>
HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Location tool</title>
    <script type="text/javascript">
      // This line below is the necessary piece for loading our UI library
      document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">')
    </script>
    <script>
      // Any widget data-ui-props you wish to create in JavaScript instead of in-line
      // should be placed in a script tag here in the head, so that the object is alive
      // on the window, when the widget itself get's processed during SetConfiguration
      // which happens immediately after the page has completed loading.
      // If you are referencing a config object then we recommend namespacing your UI to reduce the likelihood of
      // conflicting with other properties on the window.
      window.MyGUINamespace = {}
      window.MyGUINamespace.XWidgetInitialProps = {
        type: 'TextBox',
        widgetId: 'X',
        placeholder: 'X coord value'
      }
      window.MyGUINamespace.YWidgetInitialProps = {
        type: 'TextBox',
        widgetId: 'Y',
        placeholder: 'Y coord value'
      }
    </script>
</head>
<body>
 
  <h1>Location:</h1>
  <br />
  <label>X:</label>
  <!-- Note, you may use the data-ui-props to simply reference variables, as it will be eval()ed as JavaScript. -->
  <ayx data-ui-props='window.MyGUINamespace.XWidgetInitialProps'
       data-item-props='{ dataName: "X", dataType: "SimpleInt" }'>></ayx>
  <br />
  <label>Y:</label>
  <ayx data-ui-props='window.MyGUINamespace.YWidgetInitialProps'
       data-item-props='{ dataName: "Y", dataType: "SimpleInt" }'></ayx>
  </ayx>
 
  <script type="text/javascript">
 
  // This function will be called when it tries to persist the data
  // to give you a way of returning a string to display on the canvas
  window.Alteryx.Gui.Annotation = function (manager) {
    var xDataItem = manager.getDataItem('X')
    var yDataItem = manager.getDataItem('Y')
    return 'X:' + xDataItem.getValue() + '\nY:' + yDataItem.getValue()
  }
 
  </script>
</body>
</html>
Esta página foi útil?

Problemas com seu produto Alteryx? Visite a Comunidade Alteryx ou entre em contato com nossa Equipe de Suporte. Não é possível enviar este formulário? Envie-nos um e-mail.