Custom Components

There are a lot of default components available to show machine data on a Portal card or on pages. However, it is also possible to use self-built components. This can be done by developing custom components by using the Component SDK (Software Development Kit). This gives the opportunity to use components that are exactly tailored to the kind of information that a machine can provide.

The following information can be found in this article:

• Introduction to the Component SDK
• Where to find what information
  • Support website (this article)
  • GitHub
  • Detailed development documentation
• Process steps to request and upload a custom component

Introduction to the Component SDK

The Component SDK has been created to aid in the development of custom components. It is also used by StrideLinx internally in the development of StrideLinx components. The Component SDK makes developing custom components easy and secure as it has the following benefits:

• It has a built-in versioning system.
• Components can be tested before they are deployed. This can also be done locally.
• The custom components themselves are hosted in StrideLinx Cloud.
• Working locally makes the development of custom components quicker.

The Component SDK consists of the following elements:

• Project workspace boilerplate.
• Built-in support for frameworks (component wrapping).
• Component starter templates.
• Simulator app (ComponentContext with mock-data).
• Deployment and publishing tools for automation.

Where to find what information

Support website (this article)

This article is the starting point and describes the process of creating a custom component. It gives information on how to request and upload a custom component. Therefore, it is advisable to carefully read through all the steps.

GitHub

The Component SDK and instructions to build a custom component can be found on GitHub: https://github.com/AutomationDirect/component-workspace

In the SDK there are 5 example components that can be selected when generating a new custom component:

• Plain JS demo (YouTube player)
• Plain JS simple
• Svelte simple
• Vue demo (sticky note)
• Vue simple

Detailed development documentation

More detailed development documentation can be found on our developer website: Developer Support

Process steps to request and upload a custom component

By using the Component SDK, a component template is built and tested locally first. Next, the component can be uploaded to the company account to test the draft version. After the final tests, the component template can be published to make it available for all users in the company account where the component template is published. This complete process consists of these steps:

1. Read the README.md on GitHub.
2. Download the sources from GitHub.
3. Develop and test a component template locally until an early version is ready.
4. Create a new page component template in StrideLinx Cloud.
   Currently, this is not fully automated yet. For creating a new template, an email can be sent to support with a request to create a new custom component template and by providing these details:
   
   • The company name
   • The Company ID
   • The name of the component template
   When the component template is created, the confirmation e-mail will also contain a page-component-template ID.
5. Deploy the new version to the company account. When deploying, the component template is uploaded to StrideLinx Cloud and a preview link is available, which can be shared. E.g. with a client or colleagues.
   For uploading the component template both the Company ID and the page-component-template ID are required. The Company ID can be found at Admin > Company info > Company ID. The page-component-template ID can be found in the confirmation e-mail.
6. If the preview is fine, the component template can be published. At this moment, it becomes available in StrideLinx Cloud.
7. Optionally, it is also possible to share the component template with another company account.
   Currently, this is not fully automated yet. For sharing a template, send an email to support with a request to share a custom component template and by providing these details:
   • The source company name
   • The source Company ID
   • The target company name
   • The target Company ID
   • The page-component-template ID