<a href="https://npmjs.com/package/@cloudblueconnect/connect-ui-toolkit"><img src="https://img.shields.io/npm/v/%40cloudblueconnect%2Fconnect-ui-toolkit?logo=npm" alt="NPM package"></a> <a href="https://github.com/cloudblue/connect-ui-toolkit/actions/work
npm install @cloudblueconnect/connect-ui-toolkit---
Build your Connect Extension UI easily with our UI Toolkit. Feel free to use any frontend library
or framework you prefer!
Just plug a module via script tag, import default exported function and call it. You're good.
N.B.: For development mode - by default will be http://localhost:3003
``html`
This will implement minimalistic interaction with parent Connect Application.
1. Import required widget from named exports
2. Pass a configuration Object to createApp function as an argumentkey
3. Configuration object should contain desired tag name as a and widget descriptor object as a value. N.B.: widget name should contain at least one "-"
`html
...
My content here...
`
Control widgets using attributes (see widgets documentation)
We implemented two ways to interact with parent application - one is data-based, another events-based.
You will find supported data properties and handled events list in slot's documentation.
Let's see how you can use it to build your app:
If some data-based interface is documented for particular slot
you may subscribe on it using watch method or publish changes using commit
`html`
Use watch('observed', (value) => { ... }) to watch observed property
Use watch('*', (all) => { ... }) or just watch((all) => { ... }) to watch all provided
properties at once
Use commit({ observed: 'ABC' }) to commit values that you want to be sent to parent app.
N.B.: Only expected properties will be processed. Anything unexpected will be omitted
**N.B.2: Due to security reasons this tool supports only simple values - like Strings, Numbers and Booleans (in depth too).
Functions, Dates etc. will not work.**
`html``