Início Rápido Com Ferramentas Personalizadas

Last modified: August 05, 2022

Pré-requisitos

A criação de ferramentas personalizadas envolve trabalhar com vários SDKs. Por esta razão, assumimos que você está familiarizado com:

  • HTML
  • Javascript
  • Macros Python, C++ ou Alteryx
  • Gerenciamento de arquivos

    Para demonstrar o processo de criação de uma nova ferramenta, usaremos um exemplo do Hello World para que você possa conhecer o Alteryx designer. Faça o download do exemplo completo para seguir adiante.

    \HelloWorld

    \HelloWorld\helloWorld.png

    FechadoHelloWorld GUI exemplo

    \HelloWorld\HelloWorldGui.html

    Se sua ferramenta usa o SDK do Python como seu mecanismo, o nome da ferramenta, conforme definido na marca do arquivo de configuração, não pode conter espaços ou caracteres especiais. Para a legibilidade, o caso do camelo é recomendado.

    FechadoExemplo de arquivo de configuração da ferramenta Hello World

    \HelloWorld\HelloWorldConfig.xml

    FechadoExemplo de arquivo de configuração do pacote Hello World

    \Config.xml

    1. Crie um espaço de trabalho.
    2. Dentro do seu espaço de trabalho, crie uma pasta com o nome da sua ferramenta.
    3. Crie um ícone para representar a ferramenta no Alteryx. Salve o ícone dentro da pasta da ferramenta.
    4. Crie um arquivo que contenha a interface gráfica do usuário (GUI). Este arquivo é construído usando HTML e JavaScript. Para obter mais informações sobre como criar e gerenciar os dados retirados da GUI, consulte HTML GUI SDK.
    5. Salve o arquivo GUI dentro da pasta da ferramenta.
    6. Escolha qual back-end você deseja usar para sua ferramenta.

      Abra o designer do Alteryx e navegue até a categoria interface. Use essas ferramentas para criar a conexão entre a interface HTML e a macro. Verifique se o tipo de fluxo de trabalho está definido como uma macro. Baixe o exemplo de mecanismo de macro Hello World.

      Guarde a macro numa pasta \Supporting_Macro dentro da pasta de ferramenta.

      \HelloWorld\Supporting_Macros\HelloWorldMacro.yxmc

      FechadoExemplo de arquivo do motor Hello World Python

      Salve o arquivo do mecanismo do Python na pasta da ferramenta.

      \HelloWorld\HelloWorldPythonEngine.py

      • C++: para obter informações sobre como usar, consulte SDK do c++.

      Guarde o ficheiro de motor de C++ na pasta de ferramenta.

      \HelloWorld\HelloWorldCPlusPlusEngine.cpp

      • Macros alteryx: para usar uma macro Alteryx, consulte macro.
      • Python: para obter instruções de instalação ou informações sobre como usar o SDK do Python, consulte SDK do Python.
    7. Crie um arquivo de configuração de ferramenta. Esse arquivo contém as informações que o designer usa ao instalar a ferramenta, como o nome da ferramenta e a categoria na paleta de ferramentas. Ele também contém o local dos arquivos que compõem o mecanismo de ferramenta e GUI. Consulte arquivo de configuração da ferramenta.
    8. Salve o arquivo de configuração da ferramenta na pasta da ferramenta.
    9. Crie um arquivo de configuração de pacote. Este arquivo. xml contém as informações exibidas no instalador, como o nome da ferramenta, o ícone que será exibido e qual categoria esperar que a ferramenta apareça em uma vez instalada. Consulte empacotar uma ferramenta.
    10. Salve o arquivo de configuração do pacote no mesmo nível que a pasta da ferramenta.
    11. Empacotar seus arquivos em um. yxi para distribuição. O arquivo. yxi instala sua ferramenta no Alteryx designer. Consulte empacotar uma ferramenta.
      1. Zip a pasta da ferramenta e o arquivo de configuração do pacote em uma pasta zip.
      2. Renomeie a pasta zip para ter uma extensão. yxi.
    HTML
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Hello World tool</title>
     
      <!-- Includes the GUI library, which gives you access to the interface elements used in Designer -->
      <script type="text/javascript">
         document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
      </script>
     
      <!-- Applies styles to the interface elements you create -->
      <style type="text/css">
        body {
            margin: 15px;
          }
          #helloCheckBox{
            padding-top: 20px;
            font-family: "Segoe UI";
          }
          h1{
            text-align: center;
            margin: 0 0 0 0;
            padding: 0;
          }
      </style>
     
    </head>
    <body>
      <h1>Meet Designer</h1>
     
      <!-- Creates a check box with a widgetId to be referenced by engine code and a display label -->
      <div id="helloCheckBox">
        <ayx data-ui-props='{type:"CheckBox", widgetId:"helloCheckBox", label:"XMSG("Say hi!")"}'></ayx>
      </div>
      <script type="text/javascript">
        window.Alteryx.Gui.BeforeLoad = function(manager, AlteryxDataItems, json){
     
          // Creates a new data item, which can be used to store data.
          var greetingsDataItem = new AlteryxDataItems.SimpleBool('helloCheckBox')
     
          /* Binds the data item to the UI element, in this case the check box.
          The data item holds a boolean value based on if the check box is selected. */
          manager.bindDataItemToWidget(greetingsDataItem, 'helloCheckBox')
     
          // Adds the value to the manager, which then manages data persistence for you
          manager.addDataItem(greetingsDataItem)
     
          // Updates the boolean value stored in the data item every time the checkbox is clicked
          document.getElementById('helloCheckBox').onclick = function (newCheckBoxValue) {
            greetingsDataItem.setValue(newCheckBoxValue.target.value)
          }
        }
     
        //Retrieves data from data items
        window.Alteryx.Gui.AfterLoad = function(manager,AlteryxDataItems){
          var greetingsDataItem = manager.getDataItem('helloCheckBox')
     
          document.getElementById('helloCheckBox').value = greetingsDataItem.getValue()
        }
     
        //creates a string to display the returned value, in this case the value of the check box
        window.Alteryx.Gui.Annotation = function(manager){
          var greetingsDataItem = manager.getDataItem('helloCheckBox')
          return greetingsDataItem.getValue()
        }
      </script>
    </body>
    </html>

    5. Save the GUI file inside the tool folder.

    • \HelloWorld\HelloWorldGui.html

    6. Choose which back-end you want to use for your tool.

    Alteryx Macros

    Alteryx Macros: To use an Alteryx Macro, see Macro.

    Open Alteryx Designer and navigate to the Interface category. Use these tools to create the connection between the HTML interface and the macro. Ensure the workflow type is set to a macro. Download the Hello World Macro Engine Example.

    Save your macro in a \Supporting_Macro folder within your tool folder.

    • \HelloWorld\Supporting_Macros\HelloWorldMacro.yxmc

    Python

    For installation instructions or information on how to use the Python SDK, see Python SDK.

    Hello World Python Engine File Example

      Python
      """ Provides access to the Python SDK classes """
      import AlteryxPythonSDK as Sdk
      """ Allows for easy manipulation of the xml used to hold tool information """
      import xml.etree.ElementTree as Et
       
      """ The building block class for using the Python SDK """
      class AyxPlugin:
       
          """ initializes the instance of the tool """
          def __init__(self, n_tool_id: int, alteryx_engine: object, output_anchor_mgr: object):
       
              self.n_tool_id = n_tool_id
              self.alteryx_engine = alteryx_engine
              self.output_anchor_mgr = output_anchor_mgr
       
              """ connects with HTML checkbox """
              self.checkBoxValue = "False"
       
          """ pulls value from annotation """
          def pi_init(self, str_xml:str):
              self.checkBoxValue = Et.fromstring(str_xml).find('helloCheckBox').text
              self.alteryx_engine.output_message(self.n_tool_id, Sdk.EngineMessageType.info,
                self.message_to_display(self.checkBoxValue))
       
          """ method required with no input, but does not push records in this tool """
          def pi_push_all_records(self, n_record_limit:int) -> bool:
          	return True
       
          """ required after pi_push_all_records """
          def pi_close(self, b_has_errors:bool):
          	return True
       
          """ evaluates to get the output message """
          @staticmethod
          def message_to_display(checkBoxValue):
          	if checkBoxValue == "True":
          		return "Hello World!"
          	else:
          		return "You didn't say hi"

      Save your Python engine file in the tool folder.

      • \HelloWorld\HelloWorldPythonEngine.py

      C++

      For information on how to use, see C++ SDK.

      Save your C++ engine file in the tool folder.

      • \HelloWorld\HelloWorldCPlusPlusEngine.cpp

      7. Create a tool configuration file. This file contains the information that Designer uses when installing the tool, like the tool name and the category in the tool palette. It also contains the location of the files that comprise the tool engine and GUI. See Tool Configuration File.

      8. Save the tool configuration file in the tool folder.

      • \HelloWorld\HelloWorldConfig.xml

      9. Create a package configuration file. This .xml file contains the information that displays in the installer, such as the tool name, the icon that will display, and what category to expect the tool to appear in once installed. See Package a Tool.

      Hello World Package Configuration File Example

        XML
        <?xml version="1.0"?>
        <Configuration>
        	<Properties>
        		<MetaInfo>
        			<Name>Hello World</Name>
        			<Description>Designer wants to say hello!</Description>
        			<ToolVersion>1.0.0</ToolVersion>
        			<CategoryName>SDK Examples</CategoryName>
        			<Author>Alteryx</Author>
        			<Icon>HelloWorld\helloWorld.png</Icon>
        		</MetaInfo>
        	</Properties>
        </Configuration>

        10. Save the package configuration file at the same level as the tool folder.

        11. Package your files in a UXI for distribution. The YXI file installs your tool in Designer. See Package a Tool.

        1. Zip the tool folder and the package configuration file into a zip folder.
        2. Rename the zip folder to have a YXI extension.
        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.