Reordering Left Hand Panel 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
How Do I
Overview
Tips
Configuration
Reference
First publish date
2007
ft:lastEdition
2023-06-02
ft:lastPublication
2023-06-02T09:43:01.991628
You can reorder the menu items in the left-hand panel at three levels.
  • Layer level
  • Record level
  • Tabular grid’s overflow menu
   
Layer level

Record level

Tabular grid’s overflow menu

The layer and record levels use the same overflow menu components. The following CSS example re-orders menu items for the layer and record levels.


			.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 specify selector of custom component to specify its order*/
			#overflowMenu>CUSTOM-ELEMENT-NAME{
			order: 30;
			}
		

This CSS example re-orders menu items in the tabular grid’s overflow menu:

.open>#gridOverflowMenuContent{
			display: flex;
			flex-direction: column;
			}
			.linkoutQryGrd{
			order: 10;
			}
			.exportCurrentPageQryGrd{
			order: 20;
			}
			.exportAllDataQryGrd{
			order: 30;
			}
			.columnsQryGrid{
			order: 40;
			}
			.columnNamesQryGrid{
			order: 50;
			}

To achieve this, refactor the overflow menu component. If a custom component uses injection points, such as QueryResultsItem, CalloutCardContainer, or CalloutContainer, then adapt the component code as follows:

@Component({
	selector: 'my-CallOutCardContainer',
	template: `
	<pan class="btn btn-link text-left btn-block container-flex">
	</i>CallOutCardContainer
	</span>
	`,
	})
	@Component({
	selector: 'my-CallOutCardContainer',
	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>
	`,
	})