@ibm-adw/skill-toolkit/node_modules/@adw/skill-form/README.md

Developing your own skills with IBM Automation Digital Worker Skill Toolkit

# Skill-Form

## Introduction

Widgets supported:

* Boolean Checkbox
* RadioButtons
* Select
* Text Input (type: Email, Password, URI)
* Number (Up/Down Widget)
* Link

Custom Titles via a CustomField (cf. [react-jsonschema-form doc](https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/#custom-field-components) )

The Button Carbon Components are used to replace default generated buttons.

## Instructions:

In the project where you wnat to use skill-form:
* npm install --save @adw/skill-form

## How to create a SkillForm

In order to create a SkillForm (based on [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form)), you can use the following code:

```javascript
import {SkillForm} from '@adw/skill-form'

ReactDOM.render((
  <SkillForm
    JSONSchema={JSONSchema}
    UISchema={UISchema}
    formData={formData}
    step={1}
    isFormSubmittable={true}
    isLastStaticStep={true}
    onSubmit={onSubmit}>
  </SkillForm>
  ), document.getElementById("app"));
```

For more information on the variable JSONSchema, UISchema and formData (JSON format), please refer to [react-jsonschema-form documentation](https://react-jsonschema-form.readthedocs.io/en/latest/) or the [react-json-form playground](https://mozilla-services.github.io/react-jsonschema-form/)


## How to create a SkillFormManager

Once you have finalized your skill and it's running in the test-harness server, you can test it by using the `SkillFormManager` component.

You can do so by using the following code:

```javascript
import React from 'react';
import ReactDOM from 'react-dom';

import { SkillFormManager } from '@adw/skill-form';

import './index.scss';

const serverUrl = 'http://localhost:8888';

const onSubmit = ({ formData }) => {
    alert('Submitted form data: ' + JSON.stringify(formData));
    console.log('Submitted form data: ' + JSON.stringify(formData));
};

const onCancel = () => {
    console.log('Cancelled');
};

const onError = (error) => {
    alert('Got an error: ' + error);
    console.error('Got an error: ' + error);
};

const labels = {
    'skillForm': {
        'buttons': {
            'submit': 'Submit',
            'next': 'Next',
            'cancel': 'Cancel', 
            'addItem': 'Add new item'
        },
        'details': {
            'header': 'Details',
            'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ultrices sem id suspcit.'
        },
        'optional': 'optional'
    },
    'skillFormLinks': {
        'buttons': {
            'sampleInstructions': 'Sample instructions',
            'schemaInput': 'Schema input',
            'schemaOutput': 'Schema output'
        }
    }
};

ReactDOM.render(
    <SkillFormManager
        serverUrl={serverUrl}
        supportedLocales={process.env.REACT_APP_SUPPORTED_LOCALES}
        onSubmit={onSubmit}
        onCancel={onCancel}
        onError={onError}
        labels={labels} /> 
    ,
    document.getElementById('app')
);
```