[SOLVED] Best way to assign properties but each properties only once

[dotnetic]

I am looking for the best (or at least a good) way to assign multiple properties to a real world object (a room in my case).

The number of properties should be random (because my customer can add as many properties as he wants), but each property should be assigned to the room only once.

So right now I have a ProFields: Table with two fields: a page field for the property and another one for a description to the property (it is very important to have a description field for the property).

The property (Eigenschaft) field is a page field (Page reference) which has a reference to pages which my customer can configure himself. It is displayed as an select input.

Most of the time the users are working in the backend, as I am building a software and not a website with it.

The problem is, that I can assign the same property multiple times. What would be the best way so I can select a property only once?

Sure I could tell my customer that only the first appearabce of a property he used, would be saved, but a good UI also prevents users from doing so.

It is always bad, if a user has to remember how to do things, because then it is not intuitive. So if he is allowed to use multiple properties more than once, what does he think, which value is going to be saved/used?

How would I handle this on the server-side? Add a hook before Page::saveReady?

Any help is appreciated.

Solution: I developed a module

Okay guys. This was very hard with much trial & error, but I finally got the solution (which is after all very simple).

It is even worth an own blog post on my website: How to disable options in select elements that are already selected in another select element

Here is a YouTube video of it in action

[bernhard]

Hm. That's a little tricky ? How many properties do you have? Are they editable by your users? Modifying your table with javascript would be a good option I think. But also a little bit of work. Maybe functional fields could be a solution? (never tried them, so I'm not sure)

[BitPoet]

How about the matrix field type (probably depends on how many properties there are, since all will be presented on every page)?

[bernhard]

34 minutes ago, BitPoet said:

How about the matrix field type (probably depends on how many properties there are, since all will be presented on every page)?

True! You could also use 

 The handsontable field is not perfect in some regards, though. Changing properties lateron can be problematic and content is also not queryable by selectors.

[elabx]

Would it work if you setup the properties beforehand? And maybe define a catalogue somewhere else with a page field (I do it in a parent page). So you have a text field and not a select field and one line per property.  And set them up in a hook (I've done this in Pages::added if I remember correctly)

Although this would requiere all fields to always appear on the page, and exclude them from rendering if their description field is not filled. 

I have also removed the add new button for this purpose through a hook in the inputfield render. 

[dotnetic]

Hey guys, thanks for your ideas, but actually none of them would handle my problem.

I updated the first post, to clarify things a little bit more.

@bernhard Functional fields serve a whole different purpose. HandsOnTable seems not to support a Page Reference field and even if so, it would not prevent a user from entering a property multiple times. 

@BitPoet Matrix fieldtype is nice but also has the problem of preventing a user from entering a property multiple times.

@elabx The properties are defined this way. Seems it was a little bit hard to read, that I already use a page reference field, so I updated my first post. 

I have some other fields, that work similar to what you described. I display them as checkboxes.

but the last checkbox requires the input of an additional information (Umgebungsgeräusche) in a textfield. So I could add an additional textfield for every checkbox, and show them conditionally if a checkbox is selected, but that would make it hundreds of them, and this is why I used ProFields: table for it.

I really think the best way is to go with ProFields: Table and disable used options in the Page Reference field (Eigenschaft).

I will post my solution here as soon as it's ready.

[bernhard]

1 hour ago, jmartsch said:

HandsOnTable seems not to support a Page Reference field

Not by default but it can quite easily be done (in this case it's an options field, but it could be the same with a page reference):

You can even do styling based on the input:

1 hour ago, jmartsch said:

even if so, it would not prevent a user from entering a property multiple times.

I don't understand. The user can only enter values once for each property:

http://jsfiddle.net/baumrock/c7gnthjm/ 

The biggest problem with handsontable is changing options. At the moment it works by a numbered index and not by key/value pairs. That would be an improvement for the future...

[dotnetic]

7 hours ago, bernhard said:

I don't understand. The user can only enter values once for each property:

 

Yes, thats true if you show all properties from the start. But this is not what I want, because then I have to show lots of fields.

I want to keep the form small and simple, and so the user should only select the properties he wants, instead of seeing them all.

My script for disabling the options of a select is mostly ready. Now it just needs to work with multiple InputfieldTables.

[bernhard]

1 minute ago, jmartsch said:

Yes, thats true if you show all properties from the start. But this is not what I want, because then I have to show lots of fields.

That's why I asked this question instantly:

On 9/25/2018 at 11:08 AM, bernhard said:

How many properties do you have?

? 

But I'm quite sure a custom script for the table field is the better solution anyhow ? 

[dotnetic]

Okay guys. This was very hard with much trial & error, but I finally got the solution (which is after all very simple).

It is even worth an own blog post on my website: How to disable options in select elements that are already selected in another select element

Here is a YouTube video of it in action

 

[dotnetic]

Maybe you have some inspirations for a better blog title?

[kongondo]

Great, thanks for sharing!

A little comment, if I may. Reading your original post (and to some extent the blog post), I got confused by what you meant by property. On the one hand, it seemed to refer to property in a OOP sense since you also talked of objects. It also seemed to refer to an actual physical property since you refer to a 'room' :-). My German is not great, so that didn't help :-). Reading the blog post, it also seems by property you mean an option in a select? Maybe you could clarify this and use options instead if that is what you mean?

Thanks again!

[bernhard]

Very nice and for sure the best solution ?? maybe you want to take the extra step and pack it into a module so that reusing/updating/improving is easier for you and others?

[dotnetic]

@bernhard I would like to do this if someone comes up with a good name for this module *wink*

[bernhard]

I think the name doesn't matter too much. What about TableUniqueRows?

[kongondo]

25 minutes ago, bernhard said:

I think the name doesn't matter too much.

A descriptive name sometimes helps when searching the modules directory, me thinks... :-).

[bernhard]

2 minutes ago, kongondo said:

A descriptive name sometimes helps when searching the modules directory, me thinks... :-).

Absolutely, I just meant that it should not be the first thing to think about. In other words: Just build your module and think about the name when it's finished ?