Unrestricted custom components

When you require a component that is not available in the UI Bakery components list, you can develop it by utilizing the Unrestricted custom component. With the Unrestricted custom component, you can embed any HTML and JavaScript code without any constraints directly into the UI Bakery page.

It is not contained within an iframe and can be used for displaying overlays, popups, and other similar elements.

Component anatomy

Unlike a Custom component, the Unrestricted custom component is rendered on the same level as the rest of UI Bakery components.

We advise you to exercise caution while using it since it may disrupt the UI Bakery page layout and styles and potentially access app data.

A typical Unrestricted custom component would have the following structure:

• 3rd party scripts - UI Bakery will put all of the script tags with the "src" attribute to the end of the head tag. All of the scripts with the same src attributes will be loaded only once. If you remove a script, make sure to reload the page.

• custom styles

• custom JavaScript logic

<!-- 3rd party scripts and styles -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- root element where the component will be rendered -->
<div class="root"></div>

<!-- custom styles -->
<style>
  .custom-component-container p { margin-top: 0 }
  .custom-component-container button { margin-bottom: 1rem }
  .custom-component-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
</style>

<!-- custom logic -->
<script type="text/babel">
  function CustomComponent() {
    // receive data from UI Bakery
    const data = UB.useData();

    return (
      <div className="custom-component-container">
        <p>Data from UI Bakery: {data.title}</p>
        <button onClick={() => UB.triggerEvent("Data from custom component")}>Trigger Event</button>
        <input onChange={(event) => UB.updateValue(event.target.value)} placeholder="Set state"></input>
      </div>
    );
  }

  const Component = UB.connectReactComponent(CustomComponent);
  ReactDOM.render(<Component />, UB.container.querySelector('.root'));

  // it's a good practice to destroy all resources you consumed in your custom component.
  UB.onDestroy(() => ReactDOM.unmountComponentAtNode( UB.container.querySelector('.root')));
</script>

Passing data inside of the component

The API and settings for the Unrestricted custom component are the same as those of the Custom component.

To pass the data into your custom component use the "Data" setting. This can be done by passing a JavaScript object that contains the necessary data, such as:

{
  data: [1,2,3],
  display: 'only_new',
}

Additionally, you can pass the data using JS API in your actions:

ui.customComponent.setData({ ... })

To access this data within the custom component, use the following code:

const data = UB.useData()

You can also subscribe to updates of the data using the following code:

UB.onData(data => {
    console.log('new data', data);
});

Receiving data and triggering actions from the component

If your custom component produces events or needs to trigger an action, use the following code:

• To set the value of the component, use the following code inside the custom component:

UB.updateValue('Data from custom component');

Once executed, the new value is available as {{ui.customComponent.value}};

• To trigger an action, use the following code inside the custom component:

UB.triggerEvent('Data from custom component');

Then, subscribe your action to the On Event trigger of the custom component. Once the UB.triggerEvent('data') is executed, the assigned action will be triggered.

The data supplied to the triggerEvent() function is available as {{ui.customComponent.value}} as well as {{params}} variable in the assigned action.