Solution to remove BAO infographic dynamic html export banner?

2273
9
02-12-2019 06:35 PM
BrianWays
New Contributor

Sorry, I am probably just coming off a bit lazy with this and skipping the research side of it. Maybe someone knows of a quick solution to remove the default tapestry segmentation infographic dynamic html export that has top css frame or banner in it? Is it just a setting in BAO? See the photo below (the bit I highlighted with the red box, I want to get rid of that blue box frame). Some how a functionality to just add &embed somewhere? Would like to keep the interactive aspect of it, as this is the point for the dynamic html export. 

Cheers for the advice and sorry for being lazy. 

Kind regards,

Brian

9 Replies
PraveenSrivastava
Occasional Contributor III

Hello Brian,

There is no setting in the Business Analyst Web application that removes that blue bar. To remove the blue bar from the dynamic HTML infographics while keeping its interactivity, you can insert the below highlighted one line of code in the HTML page. Let me know if this doesn't help.

 

Thank you,

Praveen Srivastava

ArcGIS Business Analyst Team

BeckyColwell-Ongenae
New Contributor III

I appreciate being able to make it transparent, but is there a way to remove it entirely?  The interactive part of the infographic that I want is for the end user to be able to hover over the bars of my chart and see additional info (see below).  I'm trying to put this into a Hub Premium site I'm developing.  The the top banner part of the infographic takes away from the desired appearance of the page.

FasilTiru
Esri Regular Contributor

Hello Becky and Brian,

You should be able to remove the toolbar entirely by modifying the file as follows:

.esriGEPlayerToolbar{display:none;}

As you can see in the example below, the toolbar is removed from the dynamic html infographics:

Thanks for contacting the Business Analyst team,

Fasil T.

Business Analyst Team

BeckyColwell-Ongenae
New Contributor III

Thank you soooo much Fasil!  That is what I was looking for!

I'm going to ask a follow up here, since you were so responsive and knowledgeable.  How do I turn the iframe background transparent instead of dark gray so that I can effectively wrap the frame to the dynamic infographic and have as much background image as possible.

I'm looking for a similar appearance and interaction experience to that of creating a chart in Dashboard and bringing it into a Hub site, but with the Community Analyst data and an infographic.

Thanks,

~Becky

JosephGenther
Esri Contributor

Those charts look great. 

An alternative for creating charts based on Esri data for sharing in ArcGIS Hub is to use the Web AppBuilder with the Business Analyst or infographic widgets. The Business Analyst widget allows you to choose which reports and infograhics to allow user to generate on the fly, including custom infographic templates designed in Business Analyst / Community Analyst web app. 

FasilTiru
Esri Regular Contributor

Hi Becky,

Consulted with our developers and confirmed this will make that background transparent as well.

.esriGEReportPlayer.playerThemeDark {background-color: transparent;}

Thanks,

Fasil T.

AbbyThornton
New Contributor

Hi Fasil - This is fantastic info and was thrilled to find it. I'm attempting to embed an infographic in the embed widget of Esri's Experience Builder,  however when I modify the html with the line of text you provided I'm not seeing any changes reflected with my infographic. I've cleared the cache of my browser and still not seeing the changes reflected. Any ideas? 

Thanks!

0 Kudos
ArielLow2146
Occasional Contributor II

@FasilTiru or others is there a way to remove the blue bar without hosting the infographic? I used the option to create a dashboard from the Business Analyst web app and would love to be able to take advantage of that feature but give the infographic more screen space by removing the blue bar.

0 Kudos
AmyRoust
Occasional Contributor III

That line of code has been removed from the downloaded Infographics since this post was last updated. Instead, you can append: 

?toolbarViewMode=none

 

 to your URL to suppress the toolbar. Nice that they added URL parameters. I don't know if that works for hosted infographics @ArielLow2146, but it's worth a try!

0 Kudos