Is it possible to re-use code?

UI Builder
1

Is there a way in UI Builder to build global elements like a nav bar or footers and re-use on multiple pages?

Related question, is there any way to copy code from one page to another? I know about functions provide some re-use already, and you can fork a page, but if you want to copy a (visual) code block from one spot to another page, is that possible?

Thanks.

2 Likes
2

Hello @Norman_Chui,

Unfortunately, there is no support for this yet. But this is one of the top priorities in our road map. We are constantly improving our product and want our customers to be comfortable using the UI builder. So the reuse of components and logic will definitely be implemented.

Regards,
Stanislaw

1 Like
3

Would agree that reusable components would be very useful, and in the meantime also the possibility to copy visual elements from one page and copy onto another.

4

@Nicolas_REMY We have good news for you :slight_smile:

This feature was already released a few months ago. So you could try it now.

5

Hi @Dima and thanks for your reply. I have indeed created a reusable component. But could you help in pointing me to where I can “connect” this component with the page containing it ?

Example : I have created a header with a logo and a back button, which won’t change, so that’s OK. But it also contains the page title, so how can I pass that as a parameter to the component so that the correct page title is displayed. And most importantly, I need to have an action button in there, and the logic for that button might be different from one page to the next, and it needs to interact with the page. Could you advise ?

Thanks !

6

Hi @Nicolas_REMY,
To pass data to a reusable component, you can use the “Page Data”.
For example, to pass data to the Title for different pages, you can use the following logic:
img
On each individual page, you need to pass your own value for the Title to the “headerTitle” property of “Page Data”.
In order for the logic in the reusable component to work differently on different pages, you can assign a different name to each page in the “Page Data”.
Then, in the reusable component, implement the logic depending on which page you are on.
img2

7

Hi Roman,

Thanks for the reply. I can see that this is going to work. If the logic for each action is quite complicated, then it might become difficult to read, but at least this provides a solution. Thanks.

NR

8

Hi @Nicolas_REMY,

you can move each action logic to a separate custom function. Thus it will be easy to read it.

Regards,
Stanislaw

9

Sounds great, thanks !

10

Another quick question, though.

Here is the logic I would like to use when clicking on an icon within the reusable component.

image
image1650Ă—680 63 KB

However, when editing the reusable component, there is no access to the other components (here Workspace). How can I access the Workspace component, for instance ? Or alternatively, how do I bind a property within Page Data to the data in the Workspace component ?

Thanks for your help.

11
  1. Reusable component has access only within this component, that is, you can search for components only inside.
  2. To manage the component outside the framework, you need to use Page Data / App Data.
  3. In the future we plan to add actions/events for reusable components and thus it will be possible to have access to the entire page already in instances.

Regards,
Stanislaw

12

Hmmm. OK, thanks for the feedback. This is where it gets tricky.

My use case is to simply have a “Save” button / icon in the header, and this would trigger saving the workspace data. I understand this will require some juggling. It will be great if the reusable component can access the rest of the page. Is there a timeframe planned for this ?