UI Bakery offers a large number of built-in components that you can choose from. Check out our section for the full list. But it's also possible to create custom components if you want to add functionality not present in our Components list. Here, we'll dive into how custom components work and provide you with some examples.
Custom components basics
Custom components can have their own logic and interface that are defined by you. Additionally, they can communicate with other features in UI Bakery by triggering events and receiving data to display. Custom components can be written in pure JavaScript or can be imported from custom libraries, such as jQuery or React.
Custom components are rendered inside of an iframe, thus we recommend using them only for fix-sized elements and avoiding overlays/popups inside them.
However, you can use to render any HTML or JavaScript without any restrictions - they are not rendered inside of an iframe.
Component anatomy
A custom component is basically an HTML page embedded within an iframe that can contain HTML, CSS, and JavaScript. You can specify its code in the component's Code property.
Here is an example of a custom component based on React:
<!-- 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>
<!-- custom styles -->
<style>
body {
padding: 1rem;
}
p {
margin-top: 0;
}
button {
margin-bottom: 1rem;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
</style>
<!-- root element where the component will be rendered -->
<div id="root"></div>
<!-- custom logic -->
<script type="text/babel">
function CustomComponent() {
// receive data from UI Bakery
const data = UB.useData();
return (
<div className="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 />, document.getElementById("root"));
</script>
Since the custom component is rendered inside an iframe there are no specific limitations to the code and styles specified by the developer.
Passing data to a component
To pass data into your custom component you can use the 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 also 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 updates of the data using:
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 the 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 the 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.
jQuery example
Copy and paste the whole example into the custom component Code field:
Now that we're done with the basics, let's explore how you can actually create custom components. In this section, we'll review the following examples:
Custom Calendar
In this section, we will create a custom calendar to display appointments:
Start by loading your data - create a JavaScript Code action step and add your data in the following format:
