Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiselectdropdown: Control selectedTextFormat #549

Open
yahiakala opened this issue Jul 21, 2024 · 4 comments
Open

Multiselectdropdown: Control selectedTextFormat #549

yahiakala opened this issue Jul 21, 2024 · 4 comments

Comments

@yahiakala
Copy link
Contributor

yahiakala commented Jul 21, 2024

Is your feature request related to a problem? Please describe.
I want to control the selectedTextFormat option as described here:

https://developer.snapappointments.com/bootstrap-select/options/
https://developer.snapappointments.com/bootstrap-select/examples/#selected-text-format

This shows up as data-selected-text-format="count" in the HTML part of the existing Anvil component.

The gist is that I want to display the placeholder text and otherwise control the text that is displayed on the component.

Describe the solution you'd like
Ideally this would be a component property.

Describe alternatives you've considered
For now, I have duplicated the component in my own project and hardcoded "static" which is my preferred option.

`

<select class="select-picker" 
        multiple 
        data-container="body"
        data-icon-base="fa"
        data-tick-icon="fa-check"
        data-show-subtext="true"
        data-selected-text-format="static"
></select>
<script type="module">
import {DesignerMultiSelectDropDown} from "https://deno.land/x/[email protected]/js/designer_components/bundle.min.js";
DesignerMultiSelectDropDown.init();
</script>

`

Additional context
Add any other context or screenshots about the feature request here.

I am considering making a PR for this issue
I am hesitant. Although it is a small change to hardcode, making it a property seems like I'd have to navigate a lot of abstractions. There's some code on deno.land, a bunch of helper functions, etc. If I get a little guidance I can take a stab at it.

It would be nice to understand this code more as I have created a component with choices-js but didn't have to use any of the stuff I see in your repo - I'd like to know what I'm missing

@s-cork
Copy link
Collaborator

s-cork commented Jul 22, 2024

don't worry about any of the deno.land stuff
that's obsolete since anvil updated custom components to be live in the designer

It should hopefully be a case of:
updating a property setter/getter in python
adding the property to the custom component dialogue, or equivalently editing the yaml
I'd expect it to be a 1 line diff in the yaml and 1 line diff in the python.

@s-cork
Copy link
Collaborator

s-cork commented Jul 22, 2024

@yahiakala
Copy link
Contributor Author

Ah yes I must have missed that in the docs - that works when multiple items are selected. That override doesn't work when only one option is selected (the selected text is whatever is selected).

I'll take a stab at a PR then and see how it goes

@yahiakala
Copy link
Contributor Author

Turned out to be remarkably simple! Just needed to create a new property (and default)

  data_selected_text_format = _component_property("data_selected_text_format", "data-selected-text-format")

I'll get around to a PR when I have the energy to update the docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants