Reordering Left Hand Panel Menu - Spectrum_Spatial_Analyst - Latest

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>
	`,
	})