Re-using a custom component

Anvil Q&A
1

I’m trying to re-use a custom component across multiple apps using the ‘dependencies’ feature.

I’ve created my component in one app (where it works fine) and made that a dependency of a second ‘demo’ app. The component appears in the toolbox of the demo app and I can drag it from there on to a form.

However, when I run the demo app, I get the error: “NameError: Could not find global JS function …”

The js function that it cannot find is defined in the assets of the custom component app and loaded within the native libraries of that app.

Is there a way to do this?

(The custom component I’m playing with is the ‘pivot’ from Pivot Table Demo)

2

Hi Owen,

Native Libraries are inherited across app dependencies, but right now the assets are not. That means that you will need to duplicate whatever function is defined in the assets of your custom component app, but you won’t need to duplicate the set of native libraries added there. This is something we’re working on, and app assets will be inherited properly in a future update.

Of course, remember that the Native Libraries feature just injects code into the <head> element of the page. So there’s nothing to stop you writing something like this:

<script>
    function foo() {
        return 42;
    }
</script>

The global function foo will then be available in both this app and its dependencies. You could also include the required JS function directly in the HTML of the Custom Component.

I hope that gives you enough to work around the lack of inheritance of assets for now!

3

That will do me nicely! Thank you.