View Tab Naming

The content of a view has full control over the name that gets displayed on its relevant tab. Quite a lot of applications like to use the title to convey extra information to the user like the stock name and current price, therefore we allow applications to have control over what is displayed in the title.

• By default if the app that is displayed in the view does not change the title at all then the name is used from its "componentState".
• If the views html has a header block with "<title>Tracker</title>" then the tab will be loaded with that.
• If the view dynamically changes the title with "document.title = 'Tracker App';" then that will be displayed.

It is possible to change the name of the view tab after loading of the content however it is important to know that if the content dynamically changes the documents changes again your changes will be lost. The following ways will allow you to change the views contents document title and therefore the tab title:

• if you have control of the views application, you can use "document.title = 'New Name';" when the DOMContentLoaded event has been fired.
• use the preload script at the view level to change the title. The preload script would need the following code to execute after the DOM is loaded:

  window.addEventListener('DOMContentLoaded', (event) => {
     document.title = "Name I Want"
  })

•  If you are using a template in the form of an HTML with its own JavaScript to define the windows. For example, if you have a "url": "main.html defined in your "defaultWindowOptions" section of the "platform" section in your manifest file, you can listen for the tab-created and change the title at that point using the views executeJavaScript() method.

  window.addEventListener('DOMContentLoaded', () => {
  const myLayoutContainer = document.getElementById(CONTAINER_ID);
  myLayoutContainer.addEventListener('tab-created', (event) => {
  let view = fin.View.wrapSync({ uuid: event.detail.uuid, name: event.detail.name });
  view.executeJavaScript(`document.title = "Name I Want"`);
  })
  fin.Platform.Layout.init({ CONTAINER_ID });
  });