# forms-ui-designer

UI designer for OpenText™ Forms API

## Contents
- [Install](#install)
- [Usage](#usage)

## Install

Run:

```
npm install @opentext/forms-ui-designer
```

## Usage

UI designer is built using standard web component technology and therefore can run standalone or embedded within an existing application.  To include UI designer in a web page or application, include script tags for `ocpd-components`.  Additionally the `locales` folder needs to be included.

``` html
<html>
	<head>
		<script defer="" src="ocpd-components.js"></script>
	</head>
	<body>
		<ocpd-designer style="width: 100%; height: 100%; display: block; box-sizing: border-box; transform: translate(0px, 0px); overflow: hidden;" data-localisation-folder="">
		</ocpd-designer>
	</body>
</html>
<script>
	document.getElementsByTagName('OCPD-DESIGNER')[0].addEventListener('ocpd-set-configuration', applyConfigurationToDesigner);
	function applyConfigurationToDesigner() {
		document.getElementsByTagName('OCPD-DESIGNER')[0].setConfiguration({});
	}
</script>
```

You will also need to include UI runtime which requires 3 bundled files: `components.js`, `designer-components.js` and the runtime chunk `runtime.js`.  The UI runtime locale files need placing in the `locales` folder created for UI designer.
