View Additional Details from Map Tips - Result Pane Formatting

October 31, 2018 22:40

Hi all,

My users are requesting that 'View Additional Details' from the footer part of Map Tips operate differently. As it is now, the additional information populates the Results pane, ordering information in a particular way. Field values follows after Field Names with a space to between subsequent entries. Is it possible to get field values next to field names? This kind of format is desirable as that is how it was represented in Silverlight, which my users have used extensively in the past and prefer this look and feel. Also, Silverlight reveals additional details in a pop-up window; is this possible for the HTML5 Viewer?

Cheers!

_img_ alt="Results Pane" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=906f2000000Xc4S&feoid=Body&refid=0EMf2000000YDBd"_/_img__img_ alt="Pop-up Wndow" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=906f2000000Xc4S&feoid=Body&refid=0EMf2000000YDBi" _/_img_

Comments

13 comments

Richard Diaz

November 01, 2018 14:18
Jesse,

This should do it. Here's an example for your feature details:

Cheers...Rick

<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 10px">

<tbody>

<tr>

<td>FIPS Code:</td>

<td>{FIPS}</td>

</tr>

<tr bgcolor="#D4E4F3">

<td>2007 kW Load:</td>

<td>{LOAD2007}</td>

</tr>

<tr>

<td>2008 kW Load:</td>

<td>{LOAD2008}</td>

</tr>

<tr bgcolor="#D4E4F3">

<td>2009 kW Load:</td>

<td>{LOAD2009}</td>

</tr>

<tr>

<td>2010 kW Load:</td>

<td>{LOAD2010}</td>

</tr>

<tr bgcolor="#D4E4F3">

<td>2011 kW Load:</td>

<td>{LOAD2011}</td>

</tr>

<tr>

<td>2012 kW Load:</td>

<td>{LOAD2012}</td>

</tr>

<tr bgcolor="#D4E4F3">

<td>2013 kW Load:</td>

<td>{LOAD2013}</td>

</tr>

<tr>

<td>2014 kW Load:</td>

<td>{LOAD2014}</td>

</tr>

</tbody>

</table>
0
Richard Diaz

November 01, 2018 14:32
My bad, the above syntax is only meant for Feature Details, not Details accessed by using View Additional Details.

This is a snipit of my custom css. It will get you started but it does not include alternating colors for each attribute. Place it in the Desktop.css file located in the Custom Styles folder for the viewer

Site/ Your Site Name /Viewers/ Your Viewer Name /VirtualDirectory/Resources/Styles/Custom

----------------------------------------------------------------------------------

/* -------------------Begin Feature Details Side Panel Styling------------------------- */

/* Feature Details Attribute Name - common.css - 05/04/2015 */

.attribute-label {

    font-style: italic;

}

/* Feature Details Hyperlinks Color - desktop.css - 05/08/2015 */

a.list-menu-item {

    color: #1B7DBF;

    text-decoration: underline;

}

/* Relate Details Height Spacing for Relates Information - desktop.css - 04/11/2018 */

.attrib .list-menu-name, .attrib .list-menu-desc {

    padding: 0.5em;

}

/* Feature Details Panel Styling - Grey Band for "Hyperlinks" "Description" "Details" - common.css - 06-30-2015 */

.FeatureDetailsCompactView .panel-group h3,

.FeatureDetailsView .panel-group h3 {

    background: #F3F3F3;

    padding: 0.25em 0 0.3em 0.75em;

    font-size: 1.0em;

    font-weight: bold;

}

/* Form Styling - Vertical Spacing of Controls (e.g. checkboxes) - Desktop.css - 07-06-2015 */

.form-item{

    padding: 0.2em;

}

/* Form Styling - Vertical Spacing of Markdown <p> Tag - Desktop.css - 07-06-2017 */

p {

    margin: 0 0 0.3em 0;

}

/* Query Form Styling - Vertical Spacing Autocomplete Box - Desktop.css - 08-02-2017 */

.ui-menu.ui-autocomplete .ui-menu-item a {

    padding: 0.1em 0.5em;

}

/* Query Form Styling - Autocomplete Box Text Size - Desktop.css - 08-02-2017 */

.ui-widget-content, .ui-widget-header {

    font-size: 12px;

}

/* -------------------BEGIN TABULAR STYLING - 11-29-2017--------------------------- */

div.attrib .attribute-label {

    width: 35%;

}

div.attrib .attribute-details,.attribute-label{

    display: inline-block;

    font-size: 13px !important;

}

div.attrib li.attribute-item {

    padding-top: 3px !important;

    padding-bottom: 3px !important;

    margin-top: 0px !important;

    border-bottom: 1px solid #EEEEEE;

}

div.attrib li.attribute-item:hover {

    background-color: rgb(222,242,255);

}

div.attrib > div.multi-column-container {

    margin-top: 0px !important;

    margin-bottom: 0px !important;

    padding-top: 0px !important;

    padding-bottom: 0px !important;

}

/* -------------------END TABULAR STYLING - 11-29-2017--------------------------- */
0
Jesse Joe

November 01, 2018 16:28
Hi there Richard,

Thanks for the helping hand. I've gone and cut and pasted the code to my Desktop.css file. When I start-up the Viewer again, it won't load up properly. I don't think adding the code in this file could do that but that's what happened. It may very well be a bad coincidence ... do you have any experience with viewers not be able to open because of additions to the viewer Desktop css file?
0
Jesse Joe

November 01, 2018 16:57
Richard, should I try again, taking out the comments? Perhaps that is what is rendering my viewer unable to load properly.
0
Richard Diaz

November 01, 2018 18:57
Try one code block at a time like this:

/* -------------------BEGIN TABULAR STYLING - 11-29-2017--------------------------- */

div.attrib .attribute-label {

    width: 35%;

}

div.attrib .attribute-details,.attribute-label{

    display: inline-block;

    font-size: 13px !important;

}

div.attrib li.attribute-item {

    padding-top: 3px !important;

    padding-bottom: 3px !important;

    margin-top: 0px !important;

    border-bottom: 1px solid #EEEEEE;

}

div.attrib li.attribute-item:hover {

    background-color: rgb(222,242,255);

}

div.attrib > div.multi-column-container {

    margin-top: 0px !important;

    margin-bottom: 0px !important;

    padding-top: 0px !important;

    padding-bottom: 0px !important;

}

/* -------------------END TABULAR STYLING - 11-29-2017--------------------------- */
0
Jesse Joe

November 01, 2018 20:55
Hi Richard,

I want to be more clear on how the data will be represented after implementing the code you provided. Can you give me an example like screenshots? I am unsure what a part of the code will do to the viewer and also what the rest of the code does ... If you can provide me with more explanation, that would be helpful, thanks.
0
Richard Diaz

November 02, 2018 15:11
Hi Jesse,

I would suggest that you apply these customizations to the LA_County demonstration site as it does not have any custom css. That way you can tell exactly what's changed. That's what I do to test during development.

Rick
0
Jesse Joe

November 02, 2018 15:59
Hi Richard,

Thank you for the direction there; it has helped immensely. I've come away with the following test results and I am quite pleased. I will deploy the code into my production environment and keep tabs, until then. Thanks!

_img_ alt="Reformatting Results Entries" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000Xe9U&feoid=Body&refid=0EMf2000000YDDU"_/_img_
0
Jesse Joe

November 02, 2018 16:08
Hi Richard,

I've successfully deployed the code into my production environment and the results are exactly what I am looking for! My users will be very content. Thank you for the direction and further guidance required on my part. Have a terrific weekend!

_img_ alt="View Additional Details Upgrade to Results List" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000Xe9Z&feoid=Body&refid=0EMf2000000YDDe" _/_img_
0
Richard Diaz

November 02, 2018 16:48
Jesse,

If you have fields that contain a lot of text, I recomend placing those attributes in the Feature Long Description Area like this:

_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000Xe9j&feoid=Body&refid=0EMf2000000YDDy"_/_img_

_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000Xe9j&feoid=Body&refid=0EMf2000000YDE3" _/_img_

Syntax:

<br/>

<p><u>Parcel Notes:</u>   {PARCELINFO.NOTES}</p>

<p><u>Resource Area Location:</u>   {RESOURCEAREAS.RA_LOC}</p>

<p><u>Resource Area Description:</u>   {RESOURCEAREAS.RA_DESC}</p>

<p><u>Resource Area Improvements:</u>   {RESOURCEAREAS.RA_IMPR}</p>

<p><u>Resource Area Notes:</u>   {RESOURCEAREAS.RA_NOTES}</p>

In the Look and Feel Menu in the Viewer, use these settings:

_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000Xe9j&feoid=Body&refid=0EMf2000000YDE8"_/_img_
0
Jesse Joe

November 02, 2018 19:37
Hi Richard,

I've been able to incorporate the rest of your custom css and I am liking it allot. I will now play around with the look and feel menu in the viewer as I do have a comment field I'd like to make available under Descriptions

_img_ alt="RemainingSuggestionsImplemented" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000Xe9o&feoid=Body&refid=0EMf2000000YDEc"_/_img_
0
Richard Diaz

November 02, 2018 20:48
Jesse,

You can also give your popup's the same look with this html table in the Feature Description. These are two lines for two attributes. Just add additional <tr> blocks for more attributes.

<table>

<tbody>

<tr>

<td>Parcel ID:</td>

<td>  </td>

<td>[PARCEL_ID}</td>

</tr>

<tr>

<td>Common Name::</td>

<td>  </td>

<td>[COMMON_NAME}</td>

</tr>

</tbody>

</table>

Cheers...Rick
0
Jesse Joe

November 02, 2018 22:13
My Map tips are now getting polished in the same way...thanks again Richard, you are really good at your job!

_img_ alt="Polished Map 'Tips" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=907f2000000XeAN&feoid=Body&refid=0EMf2000000YDEm"_/_img_
0

Please sign in to leave a comment.

View Additional Details from Map Tips - Result Pane Formatting

Comments

Didn't find what you were looking for?