topic Re: Icon and location options for "Print or export PDF" widget across instant apps in ArcGIS Instant Apps Questions

Icon and location options for "Print or export PDF" widget across instant apps

RyanBohan — Tue, 09 Aug 2022 22:53:43 GMT

I recently found the "Print or export PDF" widget and it seems like a great option coming to instant apps.

I noticed depending on the instant app initially selected the icon and available locations for the options vary, based on selected instant app.

Ideally I would like to use the "Print or export as PDF" widget with a printer icon, located on the same panel (top right of the pop-up) in the Sidebar instant app

Sidebar instant app (PDF logo, top-right of header only)

Exhibit instant app (printer icon, adjustable around map)

Zone Look-Up instant App (PDF logo, top-right of pop-up)

Is there a way to change the pdf icon used in the Sidebar instant app to match the printer icon used in the Exhibit instant app both for the "Print or export PDF" widget?

In the Sidebar instant app, is there a way to adjust the location of "Print or export PDF" widget? It seems it can only be placed on the top-right of the header bar.

Thank you

Re: Icon and location options for "Print or export PDF" widget across instant apps

KellyHutchins — Wed, 10 Aug 2022 17:50:17 GMT

Ryan

Thanks for the feedback. We chose the export to pdf icon because the print icon is used in a few apps for the Esri print service widget. We are going to update the exhibit app icon to match that used by Sidebar and Nearby.

It isn't currently possible to adjust the location of the export to pdf tool but with some custom CSS you can change the icon to a print icon. In the app configuration there is a theme section and at the bottom of that section there is an option to add custom css. Here's the css you can use to show a print icon. Note that depending on the theme of your app you might have to change the color value to something other than the value i set in the example which is white (#FFF).

calcite-icon.pdf-share { font-family: 'CalciteWebCoreIcons'; font-size: 18px; line-height: 32px; color:transparent; } calcite-icon.pdf-share:before { content: "\e668"; color:#fff; margin:0 1em 0 1em; }

Re: Icon and location options for "Print or export PDF" widget across instant apps

RyanBohan — Wed, 10 Aug 2022 20:04:50 GMT

Hi Kelly,

Thank you for the speedy response. The custom CSS seems to be working great.

Re: Icon and location options for "Print or export PDF" widget across instant apps

MollyWatson1 — Fri, 10 Mar 2023 18:32:36 GMT

Hi Kelly,

I tried copying your custom CSS text above into the theme section as you described.

My print icon doesn't change. It still looks the PDF symbol. I cleared my cache and refreshed my browser too.

I'm not sure what I'm missing. Do you know why it's not working for me?

Re: Icon and location options for "Print or export PDF" widget across instant apps

MollyWatson1 — Fri, 10 Mar 2023 20:09:04 GMT

Hi Ryan,

Did you input the custom CSS text the exact way as written in the example provided by Kelly? Did you have to make any modifications? I tried copying and pasting the custom CSS code into my theme configuration settings, and my pdf icon doesn't change to the print icon. I tried changing the hex color code and removing transparency as a test, and the colors of the icon don't change either. I'm not sure what I'm missing and why it's not working for me. Any ideas?

Re: Icon and location options for "Print or export PDF" widget across instant apps

KellyHutchins — Fri, 10 Mar 2023 22:18:15 GMT

Try this for Zone Lookup

calcite-icon.pdf-icon { font-family: 'CalciteWebCoreIcons'; line-height: 32px; color:transparent; display:inline-flex; font-size:20px; line-height:25px; } calcite-icon.pdf-icon:before { content: "\e668"; color:#333; }

Re: Icon and location options for "Print or export PDF" widget across instant apps

MollyWatson1 — Mon, 13 Mar 2023 14:52:46 GMT

Thank you that worked!

Re: Icon and location options for "Print or export PDF" widget across instant apps

RyanBohan — Fri, 16 Jun 2023 20:44:14 GMT

Instant Apps has been updated to include a list of export icon options. This is a huge improvement, Thank you.