Building Custom component : How to?

UI Builder
1

Hi, I’d like to make a custom component with what I have on shelf in the UI builder.

My problem is : I can make a ‘Reusable’ but once it’s ‘Reusable’ I can’t turn it back to a custom instance and modify the custom instance (leaving the ‘Reusable’ as a template). (So all the work I have done seems lost :frowning: )

The other way I understand is to create a ‘Custom’ component within the ‘Components’ Tab of the UI
The problem here is I did not figure out how to use an existing component in my UI to turn it into a ‘Custom’ or ‘Template’.

Put it short : is there an easy way to turn a component in my page into a template I can reuse and modify elsewhere ?

2

Hi @MF_de_Preval,

If I understand your problem correctly, then in the Components tab you can make a clone of your custom component and make edits there, in this case your original component will not be changed.
If this does not help you, then describe the steps to reproduce with the actual and expected results and we will try to help you.

Regards,
Bohdan

3

Hi Bohdan,

I did make a reusable component from my component (‘Overlay Modal’)
Capture2

I also cloned it in the component section.

Capture
Capture1353×370 45 KB

It seems I cannot revert it to a ‘Custom’ component now :frowning:

However, I would like now to have this ‘Overlay Modal’ as a ‘Custom’ type (like the 'Template Component)
Capture1

Is this possible in any way ?

4

@MF_de_Preval,

There is no way to transfer a reusable component to a custom component. When a reusable component is created, a container of everything inside is created, so the custom component should remain in place.

Regards,
Bohdan

5

Hmmm … Ok …

Now, is there a way of making any designed component in the UI a ‘Custom component’ ?

Capture
Capture1666×734 112 KB

6

@MF_de_Preval

The custom component is a type of UI Component which you as a developer implement using code.

Since the system does not know what your component looks like until it runs in the runtime there is a way to compose UI which might be similar to your component and that UI you can see on the screenshot above. And the UI will not be rendered in the runtime since it’s just a preview of your component.

If you would like to use the same component in different places you need to use a Reusable Component

Regards,
Vlad