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

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.