Adding a Custom Component at a Specific Position - Spectrum_Spatial_Analyst

You can add a component at a specific position in Setting, Add Layer, or the Legend panel and control the order of existing options in these panels using CSS to specify the order of elements. To do this, you set the order of components, including custom components, in the map project-specific brand.css file: <Analyst_install_directory>\customerconfigurations\analyst\theme\branding\default\brand.css. By default, brand.css includes sample entries.

The following example shows how you can insert a custom component in the Setting Panel just below the Print option.

		#createPanelContainer{
		display: flex;
		flex-direction: column;
		}
		#addLayerContainer{order: 10; }
		#addNewRecord{order: 20; }
		#create_QueryContainer{order: 30; }
		#createThematicContainer{order: 40; }
		#annotationToolContainer{order: 50; }
		#measurementToolContainer{order: 60; }
		#multiSelectContainer{order: 70; }
		#settingsPanelContainer{
		display: flex;
		flex-direction: column;
		}
		#printContainer {order: 10; }
				
		#imageExporterContainer {order: 20; }
		#currentMapViewContainer {order: 30; }
		#helpContainer {order: 40; }
		#localeContainer {order: 50; }
		#templateDesignerContainer {order: 60; }
		#mapProjectContainer {order: 70; }
		#authBtnContainer {order: 80; }
		#appVersionContainer {order: 90; }
		#settingsPanelContainer > <CUSTOM_COMPONENT_ELEMENT_NAME1> {order: 11; }
			#settingsPanelContainer > <CUSTOM_COMPONENT_ELEMENT_NAME2< {order: 61; }
				#layersPanelContainer {
				display: flex;
				flex-direction: column;
				}
				#mapProjectSwitcherContainer{order: 10; }
				#baseMapSwitcherContainer{order: 20; }
				#legendContainer{order: 30; }
				#layersPanelContainer > <CUSTOM_COMPONENT_ELEMENT_NAME< {order: 11; }

The ‘order’ attribute specified for an element determines the order in which it appears. Elements without a specified order display at the top in the panel.

You must replace the <CUSTOM_COMPONENT_ELEMENT_NAME1> placeholder with the corresponding custom component’s selector name. The order applies to all projects using the corresponding brand. We recommend creating a new branding file instead of editing the default brand.css file.

Example

In the following example, we will demonstrate how to insert an extensible component below the 'Add Layer' link on the Add panel.

Start with inspecting the ‘Add Layer’ link in the browser's developer tools by right clicking it. For example, if you are using Chrome DevTools, when the DevTools opens, copy the id as shown below. In this example, the id is addLayer.

In the screenshot, we can see there are other ids like addLayerContainer for the elements which are parent to ‘Add Layer’ link. We can use those id as well. So, we can copy either addLayer or addLayerContainer from the dev tool. Let’s assume we use the id as addLayer for this sample.
Paste the id that we copied in Step 1 as parentComponentName inside the CustomAnalystModuleConfig.json file as highlighted in yellow.
Open the SSA application and then open the Add panel. We will see the extensible component getting injected below the ‘Add Layer’ link as shown below.

Adding a Custom Component at a Specific Position - Spectrum_Spatial_Analyst - 23.1

Spectrum Spatial Analyst Extensibility Guide

Example