Problem in Custom Component blog post

Re: “Custom UI Components in Backendless UI Builder” by Vladimir Upirov
‘Component Properties’ section:

Default Value not showing in UI Builder:
UI Settings

Value manually entered in Settings does show up in Preview.

Dima,
No, no asterisk.

When a new default value is entered in Properties the asterisk appears, then disappears when the property is saved (and the “The component has been successfully saved” ‘green-box’ message pops up). ‘defaultValue’ in component.json shows the new default.

It will be a pleasure for me if you try to reproduce it again and provide certain steps for me. Because unfortunately i can’t do it by myself :frowning:

I followed the steps in the post. What “certain steps” are you looking for?

Hello @Jim_Austin!

Perhaps you are trying to change a property of a component already added to the UI Builder, but by the design of custom components it is intended that changing property values does not affect components already added to the UI Builder.
Please try adding this component to the UI Builder again and check the Placeholder value.

Regards,
Alexander

Created a new page (blank) and added the custom component per the post steps.
Property

Index.js

UI

Preview
Preview

It’s my understanding that the Default Value (MyTestUIComponent > Properties > Default Value > ‘Please Enter …’) should show up in Preview. ‘component.placeholder’ in index.js should point to the value, but the empty Placeholder setting and the blank placeholder in Preview implies that it does not.

Hello @Jim_Austin!

I just tried to reproduce this issue, but everything works correctly for me.
Could you please try deleting the component you added to the page and adding it again.


Regards,
Alexander

(Starting with a clean container/page/custom component build from the post) I see the problem: the initial default value gets into User Interface and thus shows in the Preview. But if you update it in Components > Properties > Default Value, the change does not get through to User Interface, thus does not show in Preview.

Testing indicates another problem in the next section with data binding, so I’m suspending work with this post to give this area time to ‘mature.’ Thanks for your help.

Hi @Jim_Austin

Once you placed a component on a page all the default values apply to the component instance and you can change these values by only modifying them for a particular component instance on a particular page. Changing default values in the component designer won’t be applied because of the already placed components.

Let’s imagine you have a component with a default value “Type here…” then you placed the component on several pages and modified the property for each component instance, somewhere you changed it to “Username”, somewhere “Password” and clear the default value for property of other instances.
Now you decided to change the default to “Input here…”, what do you expect? should all the instances be changed to the new default property or they should remain their values (“Username”, “Password”, “{empty string}”)?

So, the default value is applied only once when you place the component onto a page, does it make sense?

Regards, Vlad

Vlad,
Yes, that does make sense … I was suspicious my expectations might be wrong.
Thanks for taking the time to explain the design!

1 Like