Best way to use third party components in Perspective?

Ignition
,
1

I’m looking to extend Perspective’s functionality by integrating third-party components. Ideally, I could import these into the Designer and use them alongside other native components. Does anyone have experience doing this? If so, what is the best way to accomplish this goal? (If it helps, the components are developed in a variety of languages, including Javascript, which makes me think they should be able to be integrated.)

2

You can add new modules in your gateway that have components.
If there is no module of it yet you can try create one, tho that isnt all that easy.

I think this is an example tho it might be outdated

3

As @victordcq mentioned, the SDK would be the way to accomplish this.

A precautionary note: a Perspective component is probably the most difficult thing you could attempt to do with the Ignition SDK at this time. Do not underestimate the amount of work it will be, especially if you are not already a developer with frontend experience.

1 Like
4

Thanks for pointing me in the right direction. I suspected a module would be necessary, but wanted to double check.

Kevin, with that being said, do you think the difficulty remains if the component is already made? I’m imagining I would just need to expose its already-made properties and methods. Do you have any advice on this?

5

No I’m not the right person to ask. @PerryAJ maybe.

6

Many of the components people ‘add’ to perspective are ‘already made’ in the sense that they are part of a react component library - but having a react component is only a small part of getting it to work in the context of Perspective.

The example in the repo @victordcq linked is definitely the place to start. The Image component example is implemented to demonstrate what is essentially the ‘bare minimum’ needed for a simple component, but as Kevin hinted, there’s a non-trivial level of knowledge required to really understand what’s happening.

The TL;DR is:

  1. create a component in js file
  2. make that js file available to the java classpath
  3. tell perspective api about your component in appropriate places when your module is loaded

At a high level, that looks something like:

  1. In your web code - create an implementation of Component (from the node package we publish:@inductiveautomation/perspective-client). This wraps the react component from your library, which would look something like the Image Component Example, except you’d use your component instead of <img>.
  2. On the web (js) side: Create a ComponentMeta for your Component and register it with the client side that represents your bundled into a .js file that’s ultimately packaged into your module as a java-accessible resource. See where it’s registered in the example here
  3. Make your javascript file available in the module by adding it as a resource to the classpath of the module. In the example, this is largely handled by build logic that builds the js bundles it into one of the jars that is ultimately part of the Module.
  4. Register your components with the appropriate Java-side Perspective ComponentRegistry, so that the perspective system is aware they exist. This occurs by creating and registering ComponentDescriptors in Java. Registering in the GatewayHook is a minimal requirement, and designer has a similar API for components that need special UI or state in the designer.

That’s not a comprehensive list, but should give you broad idea of what’s required. The other example components have varying levels of complexity and demonstrate functionality beyond the ‘bare minimum’. Unfortunately, even the ‘simplest’ component has a fair amount of domain knowledge and complexity required - seems that’s inescapable when building a toolkit to build other toolkits like this.

3 Likes
7

Thanks for the reply, Perry! Seems I have a LOT of reading to do.