how-to-make-filter-with-ui does not work

[kumi-gc]

Follow how-to-make-filter-with-ui creating the plugin

1. conda create -n ws1 python=3.8.5 nodejs=14 doit
   pip insatll ayx-python-sdk
   pip install ayx-plugin-cli
   ayx_plugin_cli sdk-workspace-init
   method1: ayx_plugin_cli create-ayx-plugin --use-ui
   error: complain node miniversion: 14.21.3 actually is 14.8.0
   using conda install update to next nodejs 16.13.1. doesn't not work
   using conda install latest nodejs 18.16.0 with $env:NODE_OPTIONS = "--openssl-legacy-provider" doesn't work
   mothod2: ayx_plugin_cli create-ayx-plugin
   ayx_plugin_cli generate-ui

   same as method 1 
   

2. navigate to ui/[tool name] - node run start. the ui show in the develop tool

3. by the way, without UI directly set filed="Ticker" filterText="AAPL" the tool output correct result.

4. Alteryx designer: 2023.1.1.200 Patch: 1

Looks like UI does not work.

[pillowfication]

The following worked for me, but I don't use conda

1. Install Python v3.8 and Node.js v16.20. These are the latest versions I have found to work.

   • This should also install pip and npm.

2. Install Alteryx stuff.

   > pip install ayx-plugin-cli
   > pip install ayx-python-sdk

3. Create the workspace.

   > mkdir MyPlugins
   > cd MyPlugins
   > ayx_plugin_cli sdk-workspace-init

4. Create the plugin. Make sure --use-ui is enabled. Some Alteryx documentation is old and doesn't include this flag which is now needed in the newest versions. This flag is also needed when you use create-yxi and install-yxi.

   > ayx_plugin_cli create-ayx-plugin --use-ui

5. Update the plugin to use the correct versions of @alteryx packages. Most Alteryx documentation assumes these versions, but it is not included by default yet (see issue). This will give you a whole bunch of new errors though, that are mostly safe to ignore (see issue)

   "dependencies": {
     "@alteryx/icons": "^1.2.0",
     "@alteryx/react-comms": "^1.0.1",
     "@alteryx/ui": "^1.4.5",
   }

   Optionally add the other recommended packages here too.

   > npm install final-form react-final-form-hooks --save --legacy-peer-deps

6. Install dependencies. The --legacy-peer-deps flag is needed for npm versions >6 (see issue). I've opted for Node 16 with npm 9 instead of the recommended because it fixes a bunch of TypeScript issues as well.

   > cd ui\{plugin}
   > npm install --legacy-peer-deps

7. Update the build script. npm install will likely need to be added regardless, depending on your build process, or create-yxi can fail (and it doesn't hurt to have anyway).

   "scripts": {
     "build": "npm install --legacy-peer-deps && webpack --config webpack.prod.js",
   }

Other considerations

1. Make sure port 8080 is free when using npm start (see issue).
2. For TypeScript support, you may need to add "src/**/*" to tsconfig.json's include, add "ui/{project}/tsconfig.json" to .eslintrc.js's project, and enable strictNullChecks in ui\{project}\tsconfig.json.
3. If you are using local npm modules, you may need to add modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'] to resolve in webpack.dev.js and webpack.prod.js.
4. When building (with create-yxi or designer-install), you may need to delete ui\PlaceholderToolName. This folder is created and not deleted for some reason, and building may fail if you modify ayx_workspace.json and don't delete this folder.
5. If using pytest, you may have to run it as python -m pytest backend instead of pytest backend.

[ayx-david-ung]

Hello @kumi-gc ,

It seems that conda got rid of the Node version we are using.

We recommend customers to download Node from https://nodejs.org/download/release/v14.21.3/

In our next SDK/CLI release, we will patch this up and downgrade the minimum version to 12 and then our conda command in the docs will work again. (We provided a range this time for more flexibility)
conda create -n NewEnv python==3.8.16 "nodejs>=12,<=16"