Improve the behavior and default value stored in the JSON of a toggle element

[sseppi]

Thanks to the feedback of a user, we noticed that the default value of all toggle elements seems to be misleading. Once the user creates a new record all toggle are set to false per default but in the JSON is stored null value. To store a false value the user has to click twice on the toggle to activate it and de-activate it. This seems to be not user friendly, since the user sees the toggle set on false per default.

Steps to replicate the issue

1. Login into the Data Browser
2. Open the table view of a Dataset (e.g. Articles by NOI: https://databrowser.opendatahub.testingmachine.eu/dataset/table/tourism/v1/Article?source=noi)
3. Click on add a record
4. Open the JSON DIFF (you can see a completely empty JSON)
5. Click on a toggle (e.g Active on Source) and in the JSON DIFF appers a value "Active": true
6. Click again on the same toggle and in the JSON DIFF appers a value "Active": false

User expectation

The user, since sees the toggle inactive (red) per default expects that the value is stored false per default.

Possible solutions

• Add a third state for the toggle allowing the user to choose between true, false and inactive/null
• Set per default all toggles to false and also store in the JSON the value false per default

[sseppi]

@pkritzinger @gappc What do you think? It would be nice to discuss a possible solution in the next refinement meeting and implement it as soon as possible, since the request came from a user that is actually using the Data Browser.

[pkritzinger]

@sseppi @gappc honestly, I lack technological know-how here. What does a "null"-value mean in detail? Is it something like "not defined"?

[sseppi]

@sseppi @gappc honestly, I lack technological know-how here. What does a "null"-value mean in detail? Is it something like "not defined"?

@pkritzinger yes, a null value means that the field is empty. In this case specifically it hasn't any status (neither true or false) assigned.

[pkritzinger]

@sseppi ok, but then we should set null as default and provide a dropdown to to the user to select between the different options (null, false, true)

fyi @gappc

[sseppi]

During the Refinement Meeting it has been decided, to keep the 3 levels and use "null" as default value.

@pkritzinger will now think a possible graphical solution to manage the 3 values (true, false and null)

[pkritzinger]

@sseppi @gappc what do you think of this solution?

[gappc]

I like :)

[sseppi]

@pkritzinger I like it too.

Since null is a technical term that is dissicult to understand for non technical users, I would propose only a change of name and to keep also the color status as follows:

• Not Assigned (switcher color: gray)
• True (switcher color: green)
• False (switcher color: red)

What do you think? If you agree, I think we are ready to implement this feature.

[pkritzinger]

@sseppi you mean like this?

Honestly, not sure if this does not get too colorful. Would stick to the original (green suggestion.).

[sseppi]

@pkritzinger I meant to color the whole switcher, also the border, like we do with the actual switcher (see screenshot below).

But I let you decide, which is the best solution to be applied.

[pkritzinger]

@sseppi like this?

Not sure if that works, we would have a constant change of font colors as well. I'm afraid that looks weird when interacting with the toggle. I would honestly stick to the previous solution.

[sseppi]

@sseppi like this?

Not sure if that works, we would have a constant change of font colors as well. I'm afraid that looks weird when interacting with the toggle. I would honestly stick to the previous solution.

@pkritzinger fine for me.

[pkritzinger]

@sseppi find the link to the design here: https://www.figma.com/design/DmuP6Dbv5LzkCNOXrDnWIL/2023-2024?node-id=3400-2726&t=Aqc1LTBFLNznyqoc-1

[sseppi]

@pkritzinger during the meeting we decided to use undefined instead of null

[pkritzinger]

@sseppi wording has been updated, see link to design below:

https://www.figma.com/design/DmuP6Dbv5LzkCNOXrDnWIL/2023-2024?node-id=3400-2726&t=0puXalq3WZ4uGn3o-1

[gappc]

@RudiThoeni when this 3-state toggle is set to "Undefined", should the value that gets written, be undefined or null?

[gappc]

@sseppi, @mrabans @pkritzinger, @Mazzolintis, @RudiThoeni here you can try out the first implementation: https://1.databrowser.gappc.net/dataset/edit/tourism/v1/Article/BCCEEEC0-739A-90F3-F0E8-268816DBAD48 (see first image below)

Things to note:

• at the moment, the component is used just in that one place shown in the screenshot
• for new records (e.g. https://1.databrowser.gappc.net/dataset/new/tourism/v1/Article), no value is selected, because there is no value yet (see image below). The component emits a new value to the underlying system only when something is selected. In essence, writing no value for a property should be the same as setting the property value to undefined (@RudiThoeni is this correct?). The difference to the current Toggle component is:
  • the user sees that nothing is selected (the Toggle component shows wrongly a value of false if nothing is selected)
  • the user can set the value to undefined / null intentionally

Please take a look and let me know what you think.

[sseppi]

@gappc Thank you for the fast implementation

In my point of view the "undefined" status of the toggle corresponds to the "Null" value in the database. For that reason I would propose to write "Null" in case the user selects "undefined" and use that status as default status.

@RudiThoeni do you agree?

[RudiThoeni]

@gappc @sseppi yes let's write null

[RudiThoeni]

PR merged issue closed

[sseppi]

I tested the component and everything seems to work fine. Close the issue.