topic Missing logo in header - chart viewer instant app in ArcGIS Instant Apps Questions

Missing logo in header - chart viewer instant app

SaraJK — Wed, 03 Nov 2021 14:11:15 GMT

I've created a chart viewer instant app. The logo is missing and just shows the placeholder image and text which runs into the title in the header. I know it's in beta so I'm not sure if it's the app or on my end. I have a logo uploaded to my org and I don't see anywhere else to change the logo in the app config.

Re: Missing logo in header - chart viewer instant app

ABishop — Wed, 03 Nov 2021 14:33:15 GMT

Hello @SaraJK

It seems the app is inherent of your organization settings. Make sure that the shared logo for your org is shared publicly.

Re: Missing logo in header - chart viewer instant app

SaraJK — Wed, 03 Nov 2021 14:45:15 GMT

@ABishop The logo is uploaded to my organization and it appears on the organization home page publicly. I don't see any other settings? I'm looking in my Org under the General page.

Re: Missing logo in header - chart viewer instant app

ABishop — Wed, 03 Nov 2021 14:54:25 GMT

I tried doing the same thing just now and my org logo isn't showing in the header either. Maybe like you said, since its BETA, they haven't added this customization setting yet. Maybe try putting this post in the idea board on GeoNet? I'll vote for you!

Re: Missing logo in header - chart viewer instant app

BethRomero — Wed, 03 Nov 2021 22:29:58 GMT

Thanks for the feedback, shared theme logos will show in the header of the Chart Viewer app in the next update of ArcGIS Online.

Re: Missing logo in header - chart viewer instant app

RyanLibed — Thu, 16 Dec 2021 17:14:54 GMT

Hi Sara,

Just a quick follow up. A fix has been implemented and logos should appear in the header now.

Within Chart Viewer's app configuration, you'll need to enable the 'Shared theme' setting.
If express setup is on, the setting will be in Theme & Layout.
If express setup is off, the setting will be in Theme & Layout > Theme.

Finally, you'll need to upload a logo within your organization's settings.

Sample app:
https://webapps.maps.arcgis.com/apps/instant/charts/index.html?appid=349bb4e15d5c4159bf66c5f6a7bc8941

Please let us know if you have further questions.

Thanks,
Ryan

Re: Missing logo in header - chart viewer instant app

SaraJK — Thu, 16 Dec 2021 20:02:19 GMT

Thanks so much. For the benefit of anyone else reading this, I discovered that there are actually two places in the organization settings to upload a logo. I had one already loaded for the main account but there is also a place to upload a logo in the shared theme section in the settings. The second one is what appears in the app.

Re: Missing logo in header - chart viewer instant app

BrittanyBurson — Fri, 13 May 2022 19:42:11 GMT

Hi @RyanLibed I can't seem to get our Org logo to show up in the Sidebar app, though it is added under "Shared theme". Should the same settings apply there as with the Chart Viewer Instant App?

I am also not seeing a logo in your Sample app URL?

I wish we could upload our own logo though, because we have different versions of the logo that work better against different colors.

My goal is to match WAB:

But all I can get is:

Settings:

Thanks!

Re: Missing logo in header - chart viewer instant app

RyanLibed — Fri, 13 May 2022 21:21:37 GMT

Hi Brittany,

You can upload your organization logo located in the organization settings:

At that point, the logo should display in your app once the 'Apply shared theme' setting is on. In the near future, you will also have the option to upload a custom logo to your Instant App as well.

Thanks,
Ryan

Re: Missing logo in header - chart viewer instant app

BrittanyBurson — Fri, 13 May 2022 21:31:54 GMT

Thanks for the reply @RyanLibed . We have the logo shared there, it just doesn't show up in the header.

Good to hear that a custom option is coming in the future!

Re: Missing logo in header - chart viewer instant app

RyanLibed — Fri, 13 May 2022 22:03:57 GMT

Interesting. I just ran a quick test and it appears to be working for me.

Sample app: https://webapps.maps.arcgis.com/apps/instant/charts/index.html?appid=349bb4e15d5c4159bf66c5f6a7bc8941

I uploaded the logo in Organization settings > General > Shared Theme:

And enabled 'Shared Theme' in the Instant Apps configuration for Chart Viewer:

Do you have a sample app I can take a look at?

Re: Missing logo in header - chart viewer instant app

BrittanyBurson — Fri, 13 May 2022 22:10:12 GMT

Thanks for looking @RyanLibed ! Sure, I just made my test app Public: link

Re: Missing logo in header - chart viewer instant app

KellyHutchins — Mon, 16 May 2022 16:25:03 GMT

Ok looks like a bug in Sidebar if a custom theme is set. We'll get that fixed for the next release. In the meantime you can add the logo to the app using the following custom CSS. Paste it into the custom css option in the theme section of the config.

.site-header__wrapper { background-image: url(https://www.sandiego.gov/sites/default/files/cosd-logo-initials-white-color-sails-72ppi.png); background-size: 45px; background-repeat: no-repeat; height: 45px; margin-left: 5px; } .site-header__wrapper h1.heading { margin-left: 50px; }

Re: Missing logo in header - chart viewer instant app

BrittanyBurson — Mon, 16 May 2022 18:33:46 GMT

Thank you so much @KellyHutchins -- the CSS worked!

Looking forward to the next releases. Would also be great to allow the user to change the placeholder Search text when using multiple sources! 🙂

Re: Missing logo in header - chart viewer instant app

JoeBryant1 — Wed, 31 Jul 2024 21:58:29 GMT

I think this bug may still be present in the 'Interactive Legend' instant app. The custom header logo (not our org's shared style logo) I uploaded in the app designer works in the Edge browser, but not in Chrome. The app is public; you can view it here: Russian River Watershed Interactive Map

I haven't modified the CSS of an app before, but will take a look to see if that fixes it.

Re: Missing logo in header - chart viewer instant app

JoeBryant1 — Wed, 31 Jul 2024 22:52:49 GMT

I tried hosting the logo as a publicly shared item in our AGOL organization and adding it's URL to the CSS code above. This caused the app to prompt for AGOL credentials, even though the item is publicly shared. I used the https://ago-item-storage.s3.amazonaws.com/... address, which probably needs a token to be viewed, whether shared publicly or not in AGOL (?).

Still looking for a solution...

Re: Missing logo in header - chart viewer instant app

BethRomero — Thu, 01 Aug 2024 19:53:39 GMT

@JoeBryant1 The logo you are using is associated with another item and the app does not have access to it. You could try deleting the logo and uploading it through the configuration expirence, that way it will be associated with your app and the sharing will match the app.

Re: Missing logo in header - chart viewer instant app

JoeBryant1 — Fri, 13 Sep 2024 22:36:25 GMT

Thanks, this worked.