HumanSignal / label-studio

Label Studio is a multi-type data labeling and annotation tool with standardized output format
https://labelstud.io
Apache License 2.0
18.32k stars 2.3k forks source link

How to remove the values of choice not selected #6297

Open reveur-code opened 2 weeks ago

reveur-code commented 2 weeks ago

image Let say , i have 2 choices, each choice i have different other text area. When i choose one option, other option related text should become empty.

When i change to instant , all the related data on cumulative should become empty (when i change to instant , cumulative startdate, enddate , duration should be empty.

jombooth commented 2 weeks ago

Hi @reveur-code, please take this with a grain of salt, but our gen AI tool recommended this approach:

To achieve this behavior in Label Studio, you can use the visibleWhen attribute to control the visibility of the text areas based on the selected choice. Additionally, you can use the whenChoiceValue attribute to specify which choice should trigger the visibility of the text areas. Here's an example configuration that demonstrates how to set this up:

<View>
  <!-- Choices for selecting Instant or Cumulative -->
  <Choices name="selection" toName="text" choice="single" showInline="true" required="true">
    <Choice value="Instant" />
    <Choice value="Cumulative" />
  </Choices>

  <!-- Text areas for Instant -->
  <View visibleWhen="choice-selected" whenTagName="selection" whenChoiceValue="Instant">
    <TextArea name="instant_text" toName="text" placeholder="Instant Text" />
  </View>

  <!-- Text areas for Cumulative -->
  <View visibleWhen="choice-selected" whenTagName="selection" whenChoiceValue="Cumulative">
    <TextArea name="cumulative_startdate" toName="text" placeholder="Cumulative Start Date" />
    <TextArea name="cumulative_enddate" toName="text" placeholder="Cumulative End Date" />
    <TextArea name="cumulative_duration" toName="text" placeholder="Cumulative Duration" />
  </View>
</View>

In this example: The Choices tag allows the user to select either "Instant" or "Cumulative". The TextArea tags for "Instant" are only visible when "Instant" is selected. The TextArea tags for "Cumulative" are only visible when "Cumulative" is selected. To ensure that the text areas related to the unselected choice are cleared when switching between choices, you can use the visibleWhen attribute to hide the text areas, which will automatically clear their values when they are hidden. Explanation: Choices Tag: This tag creates a set of radio buttons for selecting between "Instant" and "Cumulative". TextArea Tags for Instant: These text areas are only visible when "Instant" is selected. TextArea Tags for Cumulative: These text areas are only visible when "Cumulative" is selected. When the user switches between "Instant" and "Cumulative", the text areas related to the unselected choice will be hidden and their values will be cleared. Note: Ensure that the toName attribute in the TextArea tags references an object tag in your configuration. The visibleWhen attribute is used to control the visibility of the text areas based on the selected choice. This setup will ensure that when you switch between "Instant" and "Cumulative", the related text areas for the unselected choice will be cleared.