RobinSkill Custom Components

What is a Custom Component

Robin's library components and layout editor lets users point-and-click to build designs for the Robin application. In some scenarios, users might want a custom design for the Robin application that is not part of the standard layout editor.  In such scenarios, users can implement a custom component using robin-custom-component-template. The custom component enables control to create a complex UI design for the Robin application.

The custom component has access to all fields/data of the current task in context while the standard library components work with individual fields in the task. 

Automation Hero advises trying to implement UIs using Robin's standard library components as they are robust and are implemented to work different types of data. All library components come with features like read-only, data-type support, and data-validation. Automation Hero will continue to build more components to the standard library and will be adding more features to existing components. Library components provide the guarantee that the Robin application is always compatible with future versions of Hero Platform_. Custom components may require updating the component's implementation. 

Prerequisites

• You have access to the Hero Platform_ application and can create Robin Skills.
• You are familiar with the structure of Robin Skills and all data fields in each skill.
• You have access to robin-custom-component-template. (Access required, speak to your customer service representative or email support@automationhero.ai)  

How to Build a Custom Component

1. Fork/clone the repository.
2. Set up a Robin Skill layout structure in `src/mock/layout.json` to match with the Robin Skill in Hero Platform_.
3. Set up mock data to represent individual skill items to be processed in`src/mock/tuples.json`
4. Implement your custom component in `src/components` folder. You can use `npm start` to verify your component with mock data in development mode.
5. Register your component using `registerComponent` inside `src/index.tsx` file
6. Run `npm run build` to bundle and package the component to a deliverable artifact.
7. The artifact then can be imported in the Robin Skill wizard in Hero Platform_

Set Up `layout.json`

Before starting to implement a custom component, you need to edit `src/mock/layout.json` to match with the Robin Skill layout created in Hero Platform_. If you do not have access to Hero Platform_ or your Robin Skill does not use any library components, you can configure `layout.json` as follows:

[
  {
    "skillId": "robin-skill-id",
    "name": "Robin Skill Name",
    "layoutConfig": {
      "headerField": "fieldNameInFieldDefinitions",
      "items": [
        {
          "columnStart": 1,
          "columnEnd": 2,
          "rowStart": 1,
          "rowEnd": 1,
          "uiComponent": {
            "tagName": "<your-component-tag>",  
            "tupleField": "",
            "label": "",
            "readOnly": true,
            "required": true
          }
        }
      ]
    },
    "tupleDefinition": {
      "fieldDefinitions": []
    }
  }
]

This is will make your Robin application show only `<your-component-tag>` on the skill details page.

Once the layout is set up, you need to set up the data structure for your skill. This is called `tupleDefinition`. Define the fields that will be available in the Robin Skill under `tupleDefinition.fieldDefinitions`.You can configure `columnStart`, `columnEnd`, `rowStart` and `rowEnd` according to how big your component should be displayed in the Robin application. The minimum values for `columnStart` and `columnEnd` are 1 and the maximum value is 4. There is no maximum limit on `rowStart' and `rowEnd`.

Here is an example:

{
  "fieldDefinitions": [
    {
      "name": "firstName"
    },
    {
      "name": "lastName"
    } 
  ]
}

There will be additional details other than `name` for each field which do not need to be configured. The assumption is that you know the data type of each field in the `fieldDefinitions`.

Set Up `tuples.json`

After the layout and tuple definition have been set up, you will need to set up some mock data that can be displayed when starting to implement your component.

Assuming above the configured `fieldDefinitions`, you can create mock data like so:

{
  "robin-skill-id": [
    {
      "id": "1",
      "value": {
        "firstName": "First Name",
        "lastName": "Last Name"
      },
      "state": "OPEN"
    }
  ]
}

Implementing the Custom Component

1. Create a new file under the `src/component` folder for your component.
2. Make your component class extend `BaseCustomComponent`. You can see the props you will receive from Robin.
3. Every field change inside your component should trigger the `props.onChange` event.

4. Checkout `src/BaseCustomComponent` and `src/TestComponent'.
   

   Do no update the `src/BaseCustomComponent` file. This interface defines input and events for your component.

5. Once you begin implementing your component, verify your code changes in the browser with the `npm start` command. This starts the webpack-server on `http://localhost:3000` and live-reloads your changes. Your component will be rendered using the mock data in `src/mock/tuples.json`.

Registering Custom Component

Once the component has been implemented, register your component to the Robin application. You can do so in the `src/index.tsx` file.

Replace `registerComponent(TestComponent)` on line 15 with your component name.

Bundling

Before bundling your component into a production-ready artifact. Change the name of the component and version in `package.json`. The name in `package.json` is used in Hero Platform_'s layout editor.

Create a production-ready bundle for your component by running the `npm run build` command. This command generates a zip file under the `dist/` folder to upload to Hero Platform_.

Error Handling

If an error is found after running a custom component, an error message is displayed on the Robin task details pages for that Robin skill.

A skill with a non functioning custom component does not allow access to work on tasks for that skill. Other Robin skills are unaffected.