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

[RyanBohan]

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

[KellyHutchins · Accepted solution]

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;
}

[MollyWatson1]

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? 

[RyanBohan]

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

[RyanBohan]

Hi Kelly,

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

[MollyWatson1]

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?

[KellyHutchins]

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;
}

[MollyWatson1]

Thank you that worked!