Commanding UX (Polymer 3)

Still here? If you're ready for yet another serving, I admire your appetite! In my previous articles, we explored the concepts, built a simple UX application, and extended it with new fields, buttons, dialogs, toasts, and ways to manipulate records. This time, for convenience, we'll repeat how to get the NPM and Maximo® Real Estate and Facilities tools, and we'll list all of the NPM-based tools in one place.

Tip: What is UX? The standard definition of "UX" is user experience. But for simplicity, I'll refer to the Maximo Real Estate and Facilities UX framework as "UX".
Note: For more about Polymer 3, see the Polymer website at www.polymer-project.org. For more about Node.js, see the NPM website at www.npmjs.com.

Commanding UX (Polymer 3): Managing your UX view with NPM-based tools

By Jay Manaloto

I. How do we get the NPM and Maximo Real Estate and Facilities tools?

Contact your IBM® Maximo Real Estate and Facilities representative or business partner if you cannot access the download location of the Node.js Package Manager (NPM) tool. This NPM tool is used to install several Maximo Real Estate and Facilities tools which allow you to populate the JavaScript (JS) files in your view metadata, preview your JS changes, and sync (deploy) your JS changes with the JS files in your Maximo Real Estate and Facilities environment. Be aware that these tools are not officially supported at this time.

Download and install the Node/NPM file. For example: node-v8.12.0-x64.msi.

Next, open your command prompt. Run the following NPM commands to install the following Maximo Real Estate and Facilities tools.

If you see any NPM-related warnings (optional, unsupported, or deprecated), you can ignore them.

a. Maximo Real Estate and Facilities Tools

Tool Description
tri-template
npm install @tririga/tri-template -g
This command installs the tri-template tool.
tri-template

This is a simple tool that generates UX view skeletons from available templates. This tool resembles the WebViewSync addview -s starter view command. If you're curious, feel free to check out the tri-template options and details.

See: https://www.npmjs.com/package/@tririga/tri-template

tri-proxy
npm install @tririga/tri-proxy -g
This command installs the tri-proxy tool.
tri-proxy

This is a simple tool that serves UX views from your local file system and proxies all other view files and calls to a Maximo Real Estate and Facilities server. This tool resembles the WebViewSync sync -a command, but provides a continuous preview (after each file save) without permanent changes. If you're curious, feel free to check out the tri-proxy options and details.

See: https://www.npmjs.com/package/@tririga/tri-proxy

tri-deploy
npm install @tririga/tri-deploy -g
This command installs the tri-deploy tool.
tri-deploy

This is a simple tool that deploys UX views to a Maximo Real Estate and Facilities server. It updates the UX view files on the server with the files from the specified local directory, and deletes any files on the server that does not exist in the local directory. This tool resembles the WebViewSync push or sync -a command, but provides a one-time action (not continuous) with permanent changes. If you're curious, feel free to check out the tri-deploy options and details.

See: https://www.npmjs.com/package/@tririga/tri-deploy

tri-pull
npm install @tririga/tri-pull -g
This command installs the tri-pull tool.
tri-pull

This is a simple tool that pulls UX views from a Maximo Real Estate and Facilities server. It updates the UX view files in the executed local directory with the files from the server. This tool resembles the WebViewSync pull command. If you're curious, feel free to check out the tri-pull options and details.

See: https://www.npmjs.com/package/@tririga/tri-pull

tri-polymer-upgrade
npm install @tririga/tri-polymer-upgrade -g
This command installs the tri-polymer-upgrade tool.
tri-polymer-upgrade

This is a simple tool that automatically converts Maximo Real Estate and Facilities UX views, UX components, and UX apps from Polymer 1 to Polymer 3. If you're curious, feel free to check out the tri-polymer-upgrade options and details.

See: https://www.npmjs.com/package/@tririga/tri-polymer-upgrade

tri-vulcanize
npm install @tririga/tri-vulcanize -g
This command installs the tri-vulcanize tool.
tri-vulcanize

This is a simple tool that bundles a Maximo Real Estate and Facilities UX view in Polymer 1 into a single output component file. This tool resembles the tri-bundler tool in Polymer 3. If you're curious, feel free to check out the tri-vulcanize options and details.

See: https://www.npmjs.com/package/@tririga/tri-vulcanize

The tri-vulcanize tool is designed specifically for Polymer 1 only.

tri-bundler
npm install @tririga/tri-bundler -g
This command installs the tri-bundler tool.
tri-bundler

This is a simple tool that bundles a Maximo Real Estate and Facilities UX view in Polymer 3 into a single output component file. This tool resembles the tri-vulcanize tool in Polymer 1. If you're curious, feel free to check out the tri-bundler options and details.

See: https://www.npmjs.com/package/@tririga/tri-bundler

The tri-bundler tool is designed specifically for Polymer 3 only.

II. Still confused or curious?

If you have any questions about UX that weren't answered in this article, feel free to reach out to your IBM Maximo Real Estate and Facilities representative or business partner. Or if you want, I'll go ask the team.