Unrestricted custom components

The feature is deprecated, please refer to this article for information on building custom components in UI Bakery.

When you require a component not available in our Components list, you can develop it by utilizing the unrestricted custom component. With it, you can embed any HTML or JavaScript code without any constraints directly into any UI Bakery page.

Unlike custom components, unrestricted custom components are NOT contained within an iframe and can be used for displaying overlays, popups, and other similar elements.

Component anatomy

In contrast to custom components, unrestricted custom components are rendered on the same level as the rest of UI Bakery components.

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

Here is an example of an unrestricted custom component:

<!-- 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>

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

Passing data to a component

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

To pass data to your custom component you can use a component's Data property. You simply need to specify the JavaScript object that contains the necessary data, for example:

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

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

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

• To access this data within the custom component, you can use:

const data = UB.useData()

• You can also subscribe to data updates with the following code:

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

Receiving data and triggering actions from a component

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

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

Use this code inside a component to set its value. Once executed, the new value will be available as {{ui.customComponent.value}}.

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

Use this code inside a component to trigger an action. You also need to 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 the{{ui.customComponent.value}} variable as well as the {{params}} variable in the assigned action.