Example - Adding Custom Component in Overflow Menu - Spectrum_Spatial_Analyst - 23.1

Spectrum Spatial Analyst Extensibility Guide

Product type
Software
Portfolio
Locate
Product family
Spectrum
Product
Spectrum > Spatial > Spectrum Spatial Analyst
Version
23.1
Language
English
Product name
Spectrum Spatial Analyst
Title
Spectrum Spatial Analyst Extensibility Guide
Topic type
Reference
Overview
Tips
How Do I
Configuration
First publish date
2007

This example adds a custom component at the second position in a layer’s information overflow menu.

  1. Configure an extensible component at the CalloutContainer injection point.
  2. Uncomment the following CSS in the brand.css file.
    
    .open>#overflowMenu{
    	display: flex;
    	flex-direction: column;
    	}
    	.exportAsCsv{
    	order: 10;
    	}
    	.addAsAnnotation{
    	order: 20;
    	}
    	.showOnMap{
    	order: 30;
    	}
    	.editRecord{
    	order: 40;
    	}
    	.deleteRecord{
    	order: 50;
    	}
    	.dataBindTitle{
    	order: 60;
    	}
    	.linkouts{
    	order: 70;
    					
    	}
    	/* Please replace CUSTOM-ELEMENT-NAME with the selector of custom component to specify its order*/
    	#overflowMenu>CUSTOM-ELEMENT-NAME{
    	order: 30;
    	}				
  3. Replace the CUSTOM-ELEMENT-NAME with the selector of the custom component. For example, my-CallOutContainer is the selector in the following component:
    
    @Component({
    	selector: 'my-CallOutContainer',
    	template: `
    	<li class="ellipsesDropdown">
    		<span class="btn btn-link text-left btn-block container-flex">
    		<i _ngcontent-c46="" class="nc-icon-outline ui-1_trash-simple margin-r overflow-imgMargin">
    		</i>CallOutCardContainer
    		</span>
    	</li>
    	`,
    	})			
    			

The entry in the brand.css file for my-CallOutContainer will be something like this:

/* Please replace CUSTOM-ELEMENT-NAME with the selector of custom component to specify its order*/
			#overflowMenu>CUSTOM-ELEMENT-NAME{
			order: 30;
			}

After replacing the CUSTOM-ELEMENT-NAME to my-CallOutContainer, the entry looks like this:

/* Please replace CUSTOM-ELEMENT-NAME with the selector of custom component to specify its order*/
			#overflowMenu>my-CallOutContainer'{
			order: 11;
			}

Also update the order property from 30 to 11, so that it is visible after the user selects the Export to CSV option in Spectrum Spatial Analyst.