Zone Lookup Instant App - How to format the export to PDF option?

2613
11
Jump to solution
01-31-2022 05:50 AM
Labels (3)
SSMGroup
Occasional Contributor

I'm using the Zone Lookup Instant App.  I've taken it off the simple configuration set up so I have more control.  I want to use the "export results to PDF" option for exactly that.  However it formats the list of items within the zone to maybe 1/4 - 1/3 of the total width of the page.  AKA it's a waste of space and not even useful at the current formatting.  See image below for reference

Is there a way for format this PDF? It's just unusable in the current format. 

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

Give this custom css a try: 


@media print{ 
    .column-6, .column-12 {     
        max-width:100vw; 
     } 
     calcite-accordion .solo-section > .feature-group-container h2.esri-widget__heading{
         padding:0;
         background:#fff;
     }
     .feature-group{
         border:none;
         padding:0;
     }
     .feature-group-container{
         display:inline-flex;
         margin:5px 5px;
         padding-bottom:1px;
         width:fit-content;
     }
     .esri-feature__content-element{
         padding:10px;
     }
     .toggle-panel{
         display:none;
     }
     .esri-widget, .esri-widget__table{
         line-height: normal;
     }
     .esri-widget__heading{
         margin:1px;
     }
     .esri-widget__table tr td, .esri-widget__table tr th{
         padding:3px 1px;
     }

.feature-group {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.esri-feature{
    width:fit-content;
    padding:0.5em;
}
}

View solution in original post

11 Replies
KellyHutchins
Esri Frequent Contributor

Hi thanks for the feedback. It could be an issue with some types of popup content that we aren't currently handling correctly. I created a test app and the popup content takes up the full width. Is your app or map public? If so can you share so I can take a look and see if we can fix it for the next release? It's also possible that we may be able to workaround this issue using the custom CSS option available in the app's theming section 

0 Kudos
SSMGroup
Occasional Contributor

Kelly, 

Thanks for your response.  Unfortunately the app is not something that can be public.  I was originally using custom arcade expressions, so maybe that was part of the issue.  I've added a new layer which now allows the results to go across the full width of the page, although the list of results still takes up a ton of room. 

For example 35 results where the pop up is maybe 5 words each result, takes up 4 sheets of paper.  (see image). In an effort to save space, I tried removing the popup title, but it still leaves a gap.  I know my client will want to print this and it's so wasteful.  How would I go about editing the CSS?  I see the option, but is there documentation somewhere I can follow? 

Ideally, it would be great if it would export as a simple list or CSV etc. Is that possible?

Thanks

 

0 Kudos
KellyHutchins
Esri Frequent Contributor

Ok I did some testing and it looks like the problems happen when the panel size is set to small or large.  We'll get this fixed for the next release of ArcGIS Online. In the meantime you can paste the following CSS into the custom CSS option in the theme section. Let me know if this doesn't resolve the issue. 

 

@media print{
.column-6, .column-12 {
    max-width:100vw;
}
}
0 Kudos
KellyHutchins
Esri Frequent Contributor

There isn't any documentation for the custom css option. It requires knowing a little bit about CSS and there are lots of web sites where you can learn more about that topic. 

We don't offer an export to csv but I could put together some additional css to help streamline the list and remove some of the space. I'll work on it this morning and post the updated css here. 

SSMGroup
Occasional Contributor

Thank you so much Kelly! That would be greatly appreciated! 

 

I hope to become more fluent in CSS, Javascript, etc. in the next few years! Until I start my classes, I'm learning as a go. 

0 Kudos
KellyHutchins
Esri Frequent Contributor

Depending on your popup content this might help. If there are still spacing issues post an image of what the result looks like and I can refine some more. 

@media print{ 
    .column-6, .column-12 {     
        max-width:100vw; 
     } 
     calcite-accordion .solo-section > .feature-group-container h2.esri-widget__heading{
         padding:0;
         background:#fff;
     }
     .feature-group{
         border:none;
         padding:0;
     }
     .feature-group-container{
         margin-top:1px;
         padding-bottom:1px;
     }
     .esri-feature__content-element{
         padding:0;
     }
     .toggle-panel{
         display:none;
     }
     .esri-widget, .esri-widget__table{
         line-height: normal;
     }
     .esri-widget__heading{
         margin:1px;
     }
     .esri-widget__table tr td, .esri-widget__table tr th{
         padding:3px 1px;
     }
}
SSMGroup
Occasional Contributor

Kelly,

What you created already saved a ton of space!!  Thank you so so much!  

Is it possible to format the data into 2 columns on one page to save even more space?  

 

Thank you!!

 

0 Kudos
KellyHutchins
Esri Frequent Contributor
Possibly. Do you just have the one layer in your app? If not can you send me a picture of what the results look like for other layers?
0 Kudos
SSMGroup
Occasional Contributor

Just one layer that will be printed.  The only other layer in the polygon used as "zone" for the zone look up.  But it is not included in the printed data. 

0 Kudos