Adding A Preview Function

Beyond Alteryx Macros - Adding A Value Preview

The first post in this series on JavaScript SDK created a simple custom tool allowing the user to add a new column to a data set with a specified value. The second post looked in detail on the techniques used by Alteryx within the Formula tool to create preview value. This post expands on the HelloFromJS tool to add the following:

• Three modes - constant, JavaScript templated string, Alteryx expression
• Incoming Meta Data and Value Preview
• Result Preview

Following Alteryx's own examples I am going to build this on top of the React framework but I will be using TypeScript again.

Getting A Simple Build Set Up

Previously, I gave no guidance on the set up I am using for working with TypeScript for this tool. The set up is fairly light and minimal but gives enough to get started. I have been using yarn rather than npm but both work fine.

My goals for the build are fairly simple:

• Run tslint to keep code clean
• Build the TypeScript using tsc
• Package everything with webpack

Run yarn init to set up an initial packages.json file, configuring as needed. The run:

yarn add -D tslint tslint-config-standard typescript webpack

To the top level folder need to add a tslint.json file to configure TSLint with following content:

{
    "extends": "tslint-config-standard",
    "rules": {
        "indent": [true, "spaces"],
        "ter-indent": [true, 2],
        "space-before-function-paren": ["error", {
            "anonymous": "always",
            "named": "never",
            "asyncArrow": "ignore"
        }]
    }
}

This sets up TSLint to use the StandardJS style TypeScript linting. Next add a tsconfig.json to configure the TypeScript compiler:

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es2016",
        "moduleResolution": "node",
        "pretty": true,
        "newLine": "LF",
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "sourceMap": true,
        "skipLibCheck": true,
        "allowJs": true,
        "jsx": "react"
    },
    "include": [
        "./**/*.ts",
        "./**/*.tsx"
    ],
    "exclude": [
        "node_modules"
    ]
}

This will pick up any file with either a ts or tsx extension inside the project folders. It is set to compile React JSX syntax as well. As we are targetting a CEF environment within Alteryx there is no need to target es5 but can instead target es2016's nicer syntax. Last but not least need to configure webpack. The configuration for this is minimal as most of the work is done by the TypeScript compiler. Add a webpack.config.js file:

const path = require('path')

module.exports = {
  entry: {
    HelloFromJS: './HelloFromJS/HelloFromJS.js',
    HelloFromJSGui: './HelloFromJS/HelloFromJSGui.js'
  },
  output: {
    path: path.join(__dirname, 'HelloFromJS'),
    filename: '[name].bundle.js'
  }
}

Finally need to add the scripts to the packages.json:

  "scripts": {
    "prebuild": "tslint -c tslint.json --project .",
    "build": "tsc -p tsconfig.json",
    "postbuild": "webpack"
  },

You can now build the TypeScript by running yarn run build.

I also keep the installer and uninstaller scripts, Alteryx Typings files in the top directory. The folder structure ends up looking like:

├── .vscode
|   ├── settings.json
|   ├── tasks.json
├── HelloFromJS
|   ├── HelloFromJS.html
|   ├── HelloFromJS.png
|   ├── HelloFromJS.ts
|   ├── HelloFromJSConfig.xml
|   ├── HelloFromJSGui.html
|   ├── HelloFromJSGui.ts
├── Install.bat
├── InstallerHTML.ps1
├── Uninstall.bat
├── UninstallerHTML.ps1
├── AlteryxDesigner.d.ts
├── AlteryxEngine.d.ts
├── tsconfig.json
├── tslint.json
├── tsconfig.json
├── webpack.config.js

All of the files are downloadbable from the GitHub repository.

Setting Up And Testing React

Now we have TypeScript set up, next to set up React and Fixed Data Table. Run:

yarn add react react-dom fixed-data-table
yarn add -D @types/react @types/react-dom @types/fixed-data-table

This will install all the required packages for working with React in TypeScript. Alteryx themselves use React and Fixed Data Table within their own plugin widget controls. For this UI, I am planning to use a mixture of Alteryx's controls and some bespoke React components.

Lets start by adding a simple control to the GUI.