How to change the document.title?

Anvil Q&A
1

I had this…
image

… but I wanted this:
image

So I added this code inside a link’s event handler…

def show_table(self, sender, **event_args):
  self.call_js('setDocumentTitle', sender.text + ' - Table Viewer')

… and this code inside standard-page.html:

function setDocumentTitle(txt) { 
  document.title = txt; 
}

It works, but it feels hacky.
Is there a better / Python only way to do the same?

1 Like
2

I’d like to add “changing the con” to this as well.

3

You need to do it this way for now, but stay tuned. We’re working on a solution for editing metadata for your app, such as titles, icons, thumbnails. This is a popular request so we’re keen to get it in the product!

@david.wylie There’s also a workaround for favicons, but we appreciate that a built-in solution is needed, and it’s in development!

EDIT: This has now been implemented.

1 Like
4

That workaround does indeed work, thanks @shaun.

5

Well, the favicon workaround from StackOverflow kind of works.
We had one problem with IE that doesn’t understand ES6 lambda syntax and one problem with multiple size favicons.
Here is how we modified it to get the .ico from the assets of the app:

function changeFavicon(link) {
  let $favicon = document.querySelectorAll('link[rel="icon"]');
  for (var i in $favicon) {
    if ($favicon[i] !== null) {
      $favicon[i].href = link;
    }
  }
};
changeFavicon('https://myapp.anvil.app/_/theme/favicon.ico');
2 Likes
6

I’m trying to change a favicon and am struggling to figure this out. I can change the og data in Settings:Logos and Titles but that logo doesn’t seem to affect the favicon? Is the runtime JS script still the way to handle this or am I missing a setting somewhere?

Thanks!

8

Hi folks,

We have found an issue with the saving of the app logo/favicon, which will be fixed in a release over the next few days. In the meantime, pressing Ctrl/Cmd-S to force a full save after selecting a new icon and closing the Titles and Logos dialog will prevent newly-uploaded icons from getting lost.

Also bear in mind that favicons can be particularly aggressively cached by the browser, so you may need to hard-reload to see updates there.

3 Likes