Dear community
What I wanna do: I am working on a data science dashboard and with zero knowledge of JS and CSS I decided to add one of one cool swiping button designs from codepen.:
What I have done so far: After watching a one hour video on youtube, I got an idea of how to relate CSS and JS to the custom HTML of the page and how to include google material design icons in the page. Here is the clone:
CLONE
What I need help with: The missing part is to how to inform the form when the user has swiped the button completely to the right. I would appreciate it if anyone can help.
suggestion: I’m sure there are a lot of users like me who come from an academic background and unfortunately equipped with python only. It will be a very useful initiative if anyone who can, convert cool/useful animations or components from codepen into anvil custom components. It will add a lot of richness to anvil’s possibilities for non web developers.
The main issue with the Javascript code in that button handling is that it doesn’t have anyway to set a callback when the button status changes. They clearly assume you’re proficient with Javascript and can work out where to insert function calls in those situations.
Ideally the code would come with the ability to set a callback; then you could work with the library entirely from Python, passing it Python functions as callbacks.
As is, you’d need to modify the existing Javascript to call a Python form function at the right time. I never work in that direction, but the basic technique to call a Python function in a form seems easy enough: Anvil Docs | HTML Forms
Looks like you give it a JQuery style selector for a component in the form that you want to call the function on.
2 Likes
You could have a look at how we’ve done the various components in Anvil Extras. We have some utility methods to inject html, css and javascript that might be useful.
The switch component is a material design component similar to the one you’re attempting to implement.
3 Likes
