Dropdown Navigation

[alexander]

Hi I would like to know how one can achieve a dropdown menu navigation item? If this has been answered in the forum already please point me to the topic?

Regards,

[p.colbert]

I haven’t seen one in the Anvil Reference (https://anvil.works/doc/index.html). But you could build one from a Button and a LinearPanel of Buttons. (I’ve built a data-driven Outline/Tree from a GridPanel, Buttons, and Links, so it’s certainly possible.)

Also, a Navigator Page (https://anvil.works/blog/multi-page-apps) might make a handy alternative. Although the demo uses it to display several alternate pages, it can do far more than that. The buttons (or other widgets) you place into the Navigator panel can do whatever you program them to do.

[david.wylie]

Here’s a quick demo of a couple of raw techniques you could use.

Needs refining, obviously, but it’s somewhere to start

https://anvil.works/ide#clone:FE6OS7B4ZX3F5MMK=CNPQU5BLTUVYVDQTN3QVRNFK

“File” menu uses a hidden panel, and “Edit” uses a repeating panel.

When you have a design you like you can turn it into a widget you can then drag & drop onto your forms.

(edit) - I favour the repeating panel technique as it allows you to isolate each menu item’s click functionality. Not sure if it makes much material difference but it seems neater.

[alexander]

I see that the “dropdown” is a click event. Do you think it’s possible to wire it to css for on hover?

[david.wylie]

Needs the Anvil crew to answer that one. Whilst there is a way to do custom HTML (and CSS) I can’t see any way to wire it into the rest of the code to handle the events.

[alexander]

Thanks alot for the help. Maybe will just have to relook at design but I will definitely keep your solution in mind.

[meredydd]

I can’t see any way to wire it into the rest of the code to handle the events.

Yeah, that’s also a blogpost that got stuck behind “responding to half of the Internet on Hacker News”. We’ve soft-launched a Javascript FFI (Foreign Function Interface) that lets you call from Python to JS and back again.

We’ll publish that blog post soon, but in the meantime you can check out this app, which is heavily commented to show what’s going on: https://anvil.works/ide#clone:7FVCLQEBN36MTY73=BKYCM54JV3EX2KOK42OLNCPI

You’ll need a paid account to edit the JS/HTML source, so here it is copied and pasted:

    <!-- Demo of calling from Python to Javascript and back -->
    
    <div id="from-js" style="border: 2px solid #d00; padding: 10px; text-align: center; cursor: pointer">
      Click here to call from Javascript to Python
    </div>
    <div id="from-python" style="border: 2px solid #00d; padding: 10px; text-align: center;">
      <!-- This will be filled with text from a Python call -->
    </div>
    <script>
      $('#from-js').on("click", function() {
        // The first parameter to anvil.call() is any DOM node inside this HTML form.
        // This identifies the correct Form instance.
        // The second parameter is a method name.
        // The rest of the parameters are passed on to the Python method.
        
        // anvil.call() returns a Promise that resolves/rejects when the Python code finishes executing.
        anvil.call($('#from-js'), "call_from_js", 42);
      });
      
      function say_hello(name) {
        // When you call a Javascript function with call_js(), 'this' is set to the
        // jQuery-wrapped DOM node representing this HTML form.
        // Other parameters are translated as normal.
        
        this.find(".card").css("background", "pink")
        
        $('#from-python').text("Hello, " + name + "!");
      }
    </script>

    <!-- End demo -->

[riazrizvi]

How would I add the anvil.call to a custom html form? I’ve tried adding it after

<div anvil-slot-repeat="default"/>
<script>
 $('#id1').on("click", function() {
  anvil.call($('#id1'), "call_from_js", 1);
 });
</script>

When I do this and run the app it works, but when I publish the app and make the call I get the following error:

I also tried putting the script inside the anvil-slot-repeat element to no avail.