How do I make my add-on appear as a "primary" sidebar that appears on the far right?

Question

We have an add-on that appears as a sidebar using the Ui.showSidebar function. To make this appear we are utilizing the homepageTrigger feature in appsscript.json

This works fine, however I notice that when you click the add-on icon the first thing that happens is a sidebar is opened, but a different sidebar compared to what eventually shows. This "primary" sidebar appears to appear then disappear very quickly and just triggers the second sidebar to appear.

How can I make my add-on just show in the first sidebar? It looks dodgy to have the sidebar appear and disappear quickly.

"Primary" sidebar (ignore the error):

Secondary sidebar:

appsscript.json

{
  "timeZone": "Australia/Sydney",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "dependencies": {
    "enabledAdvancedServices": [
      {
        "userSymbol": "Drive",
        "serviceId": "drive",
        "version": "v2"
      }
    ]
  },
  "oauthScopes": [
    "https://www.googleapis.com/auth/script.scriptapp",
    "https://www.googleapis.com/auth/documents.currentonly",
    "https://www.googleapis.com/auth/spreadsheets",
    "https://www.googleapis.com/auth/presentations",
    "https://www.googleapis.com/auth/script.container.ui",
    "https://www.googleapis.com/auth/drive",
    "https://www.googleapis.com/auth/drive.apps.readonly",
    "https://www.googleapis.com/auth/script.external_request",
    "https://www.googleapis.com/auth/script.locale",
    "https://www.googleapis.com/auth/userinfo.email"
  ],
  "urlFetchWhitelist": [
    "https://cm234-wgs-1.icognition.cloud/",
    "https://docs.google.com/feeds/download/documents/export/Export",
    "https://docs.google.com/spreadsheets/export",
    "https://docs.google.com/feeds/download/presentations/Export"
  ],
  "addOns": {
    "common": {
      "name": "Content Manager",
      "logoUrl": "https://cm234-wgs-1.icognition.cloud/CMServiceApiGoogle/TrimIcon/W64h64/trim.png",
      "homepageTrigger": {
        "runFunction": "showSidebar",
        "enabled": true
      }
    },
    "sheets": {},
    "docs": {},
    "slides": {}
  }
}

Code.gs

function showSidebar() {
  var sidebarName = "sidebar";

  if (getRecordUri() !== 0) {
    sidebarName = "existing_record_sidebar";
  }

  var ui =
    HtmlService.createHtmlOutputFromFile(sidebarName).setTitle(
      "Content Manager",
    );
  getUi().showSidebar(ui);
}

Answer 1

This is because you're using Workspace addons, but using HtmlService to provide a user interface. The primary sidebar is the one that should be created using CardService. The secondary one is on top of primary one - created with HtmlService, which is primarily used in Editor addons. If you want to use the primary one, use CardService instead of HtmlService to create a user interface.