Reusable Component - Data Binding

Okay so I’ve made one custom UI component that I need to reuse on multiple pages. Now I’m not sure how should I pass the data to that custom UI component, whenever I add that component inside a CELL of a REPEATED ROW?

Btw I’ve marked that component as a data container.


When I try to print the block data inside onMounted event of my custom UI component, I get this error:


Hello @Stefan_Jovanovic

Thanks for your questions!

See my answers inline

At this moment there are only two options

  1. is using “Page Data” to modify it outside of the reusable component
  2. having a component with an enabled “Data Container” option and in this case, you only can read/modify this data only when editing the reusable component, you can play around https://backendlessappcontent.com/7E25B48A-05FA-0B5D-FFAE-63CC0AC26C00/F640121C-CD82-46BF-8129-EBA286EC7793/files/ui-builder/containers/default/index.html?page=aa33



However, we have already made a couple of improvements for ReusableComponents:

  • BKNDLSS-28583 - each reusable component will have an option to have its own DataModel
  • BKNDLSS-28551 - adding LifeCycle EventHandlers (OnBeforeMount/OnMounted/OnBeforeUnmount/etc) for a ReusbleComponent class/instances

Both two tickets have been fixed and are in the testing stage, so once our QA department checks them we can release them.

I’ve added the topic link into these tickets, so when we release it we notify you here

It seems like the error split is not a function comes from logic that is not visible on the screenshot could you please provide us a link to a test page which demonstrate the issue

Application ID: 195055C2-93D4-F6AB-FF9C-142C8A8E2500
Page: submitted

Btw I don’t have any logic that would trigger this error.
Feel free to go to that page and check it out, along with my PaletteHolder custom UI component.
I would appreciate any help :slight_smile:

I found the place where it fails

DataModel can be Object or Array type but you are trying to create (assign) a string and then on the screenshot above you are trying to use blocks for string

take a look at this doc to what a Data Model is for Data Models - Backendless UI Builder Developer Guide

Oh okay, I’ve removed all the logic from the PaletteHolder component. And now I get a new error, I’m confused.

I just want to use that custom UI component inside a ROW’S CELL, so that I can receive a data to show it inside. Is that even possible? I marked my custom ui component as data container, and I’m also not able to get the data that I’m passing it from the submitted page. That block data does not show anything…

I mean I don’t want to manually create that component on each and every page, it’s unnecessary.

the last topic contains lots of questions, let’s split it up and solve each one step by step

you need to debug it, according to our support policy we do not debug customer’s code/ui/logic/etc

yes, it’s possible, I’ve described options in my first comment

if you use it inside a Repeater you actually do not need an extra DataContainer
https://backendless.com/docs/uibuilder/ui_repeaters.html

I totally agree with that

Thank you for all your help Vlad, I really appreciate your time. :slight_smile:
I’ve fixed that error from the last post.
But, I did not understand that first option you’ve mentioned:

“At this moment there are only two options”
“1. is using “Page Data” to modify it outside of the reusable component”

Is there a blueprint in the marketplace that has done something similar that I need, so that I can check it out?

Also you’ve mentioned that you are actually testing a new feature that will enable that. Is there any time-frame when that should come in production?

Your List data might be located in PageData or any parent data model, then assign list data to your repeater and use data binding inside your reusable component to the parent data model (the first parent data model will be RowItemData)

Check this out https://backendlessappcontent.com/7E25B48A-05FA-0B5D-FFAE-63CC0AC26C00/F640121C-CD82-46BF-8129-EBA286EC7793/files/ui-builder/containers/reusable/index.html?page=in-repeater

UI Builder - Backendless 2022-06-15 09-12-31

UI Builder - aa11aa - Backendless 2022-06-15 09-16-24
UI Builder - Backendless 2022-06-15 09-15-25

And here is my Reusable Component:

UI Builder - aa11aa - Backendless 2022-06-15 09-17-00
UI Builder - aa11aa - Backendless 2022-06-15 09-18-11

Is this what you are looking for?

I think the main problem here is that my custom UI component does not have any handler to which I can pass a data to. It only contains this visibility logic. And I’m not sure how to add a new handler to my existing reusable component, so that I can pass a data to it?

Screenshot_1

have you tried to use data-binding as I described above?

1 Like

I’ve finally managed to achieve what I wanted. :slight_smile:
Thanks Vlad!

I am glad to see that, If you have any questions we are here to help!

1 Like

Hello @Stefan_Jovanovic

Sorry for the long wait. We’ve just updated cloud servers with a fix for the issues you described above. Could you kindly let us know whether fix works for you well?

Regards,
Inna