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 <path> will be http://localhost:3003

<scripttype="module">importcreateAppfrom'<path>';createApp();</script>

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 argument
3. Configuration object should contain desired tag name as a key and widget descriptor object as a value. N.B.: widget name should contain at least one "-"

<scripttype="module">importcreateApp,{Card}from'<path>';createApp({'my-card': Card,});</script> ... <my-cardtitle="Lorem Ipsum"><p>My content here...</p></my-card>

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

<scripttype="module">importcreateAppfrom'<path>';constapp=createApp();app.watch('observed',(value)=>{/* handle "observed" property change here */});app.commit({observed: /* Desired "observed" value here */,});</script>

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.

<scripttype="module">importcreateAppfrom'<path>';constapp=createApp();app.emit('openDialog',{title: 'Lorem Ipsum',description: 'Dolor sit amet',});app.listen('dialog:confirmed',()=>{/* handle parent app dialog confirmation */});</script>