React-UI - dropdowns show "no data" from autogenerated components

Support
#1

Hi all,

I am having difficulty getting the react front-end to show the data in a component edit screen.

Here are the steps I have taken:
Created entity.
Entity has attributes of type composition (among other normal types such as string).
Generated front-end component.

image

Shows data in normal datatypes and enums.

image

Entities of composition do not appear in the drop-downs (only on edit screen).
They display in browse screens.

Nothing has been changed in the cuba generated components yet.

Any help would be greatly appreciated.

Regards

Matt
SDL

#3

Still having trouble with this if anyone if able to help please? :slight_smile:
Matt

#4

Currently loading options for drop downs should be implemented manually.
We are working on data components for React which will be available in the next 2 weeks.

#5

Thank you for the update Vlad.

Don’t have very much experience with working with react and typescript.

Are you able to provide a simple example that I could work from please?

Unsure where the dropdown information needs to be inserted.

Thank you very much

Regards

Matt

#6

Hi @minaev - does v7.0.8 contain the changes in that you mention for data components for React?

Many thanks!

#7

So @minaev, one month later, maybe v7.0.9? Anything on this?

#8

Apologies for the delay, we are working to publish MobX based React data components (including changed generation) ASAP. It does not stick to CUBA Platform release schedule, so you will not need to migrate the main application.

#9

Hi, finally the the sample project is available here: GitHub - cuba-labs/cuba-petclinic-react: Obsolete, see https://github.com/cuba-platform/cuba-petclinic-react. .
Take a look at the Pet Editor. Providing options effectively boils down to the following code:

petTypesDc = collection<PetType>(PetType.NAME, {view: '_minimal', sort: 'name'});
....
<FormField entityName={Pet.NAME}
                   propertyName='type'
                   optionsContainer={this.petTypesDc}/>