@camunda/form-playground


Camunda Form Playground.

Usage

Integrate the playground into your application:

``javascript
import { createCamundaFormPlayground } from 'camunda/form-playground';

const formPlayground = await createCamundaFormPlayground({
container: document.querySelector('#container'),
data,
schema
});

// open preview
formPlayground.open();

// close preview
formPlayground.collapse();

// listen on editor events
const formEditor = formPlayground.getEditor();

formEditor.on('selection.changed', () => { ... });
`

Styling

For proper styling include the necessary stylesheets, and font used:

`html






`

API

$3

Create a fully rendered form playground with options.

`javascript
import { createFormPlayground } from '@camunda/form-playground';

const formPlayground = await createFormPlayground({
container: document.querySelector('#form-playground'),
data,
schema
});
`

$3

Create a new form playground with options.

`javascript
import { CamundaFormPlayground } from '@camunda/form-playground';

const formPlayground = new CamundaFormPlayground({
container: document.querySelector('#form-playground'),
data,
schema
});
`

$3

There are several options that can be passed to the createFormPlayground or CamundaFormPlayground:

`javascript
{
container: HTMLElement, // optional - the container to render the form playground into
data: {}, // required - set the initial form data
schema: {}, // required - set the initial form schema
exporter: { name: '', version: '' }, // optional - set the schema exporter name and version
layout: {}, // optional - set the initial form layout
editorAdditionalModules: [], // optional - add additional modules to the form editor
viewerAdditionalModules: [], // optional - add additional modules to the form preview
editorProperties: {}, // optional - set the initial form editor properties
viewerProperties: {}, // optional - set the initial form preview properties
}
`

As an example, you can use the viewerProperties to override the default behavior to open external links in a new tab:

`javascript
viewerProperties: {
textLinkTarget: '_blank'
}
`

$3

Open all or specific playground containers.

`javascript
// open all
formPlayground.open();

// open specific
formPlayground.open([ 'form-preview' ]);
`

$3

Collapse all or specific playground containers.

`javascript
// collapse all
formPlayground.collapse();

// collapse specific
formPlayground.collapse([ 'form-preview' ]);
`

$3

Get a service from the embedded form editor.

`javascript
const eventBus = formPlayground.get('eventBus');
`

$3

Get the embedded input data editor.

`javascript
const dataEditor = formPlayground.getDataEditor();

const data = dataEditor.getValue();
`

$3

Get the embedded form editor.

`javascript
const editor = formPlayground.getEditor();

editor.on('selection.changed', () => { ... });
`

$3

Get the embedded preview form.

`javascript
const form = formPlayground.getForm();

form.on('submit', event => {
console.log('Form ', event);
});
`

$3

Get the embedded output data view.

`javascript
const resultView = formPlayground.getResultView();

const data = resultView.getValue();
`

$3

Get the current form schema.

$3

Set the form schema.

$3

Export the form schema from the embedded form editor.

`javascript
const schema = formPlayground.saveSchema(schema);

console.log('exported schema', schema);
`

$3


Attach the form playground to a parent node.

$3


Detach the form playground from its parent node.

$3

Fire an event.

$3

Subscribe to an event.

$3

Unsubscribe from an event.

$3

Remove form playground from the document.

Hacking the Project

To get the development setup make sure to have NodeJS installed.
As soon as you are set up, clone the project and execute

`
npm install
npm start
``

License

MIT