Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to manage the Pro UI using states and conditions.

With ArcGIS Pro SDK for .NET, you can extend ArcGIS Pro with your own unique tools and workflows. Using Microsoft Visual Studio and the Pro SDK, you can build Pro add-ins and configurations that provide your users with custom functionality specific to their organization or industry.

The Pro SDK allows you to take advantage of the contextual nature of the ArcGIS Pro UI, and manage a workflow of steps, by setting the enabling and visibility for tabs and controls on the Pro ribbon based on conditions using the Desktop Application Markup Language (DAML).

In this tutorial, you will create custom DAML conditions and new buttons which toggle the visibility of a new tab and new control group.

Steps

Create a new ArcGIS Pro Add-In Visual Studio Project

  1. Start Visual Studio.

  2. Choose File > New > Project and then from the ArcGIS templates group, select ArcGIS Pro Module Add-in. Name the add-in project StatesAndConditions.

Create new Pro buttons and update DAML with conditions

  1. Right click the project and choose Add > New Item and then from the ArcGIS Pro Add-ins group select ArcGIS Pro Button from the list of item templates. When prompted, name the new class file ToggleTab.cs and press Add to close the dialog box. Add a second button using these same steps, and name this class file EnableControls.

  2. Open the Config.daml file and copy the following code with the two conditions directly below the line </AddInInfo>:

    <conditions>
        <!-- our custom condition -->
        <insertCondition id="Tab_Toggle_condition" caption="Toggle Tab">
        <!-- our condition is set true or false based on this underlying state -->
        <state id="tab_state" />
        </insertCondition>
        <insertCondition id="Controls_Toggle_condition" caption="Toggle Controls">
        <!-- our condition is set true or false based on this underlying state -->
        <state id="controls_state" />
        </insertCondition>
    </conditions>
    
  3. Replace the current DAML code between <modules> and </modules> with the following:

     <insertModule id="StatesAndConditions_Module" className="Module1" autoLoad="false" caption="Module1">
      <!-- uncomment to have the control hosted on a separate tab-->
      <tabs>
        <tab id="StatesAndConditions_Tab1" caption="New Custom Tab" condition="Tab_Toggle_condition">
          <group refID="StatesAndConditions_Group2" />
          <group refID="StatesAndConditions_Group3" />
        </tab>
      </tabs>
      <groups>
        <!-- comment this out if you have no controls on the Addin tab to avoid
              an empty group-->
        <group id="StatesAndConditions_Group1" caption="Toggle Tab" appearsOnAddInTab="true">
          <!-- host controls within groups -->
          <button refID="StatesAndConditions_ToggleTab" size="large" />
        </group>
        <group id="StatesAndConditions_Group2" caption="Toggle Group" appearsOnAddInTab="false">
          <!-- host controls within groups -->
          <button refID="StatesAndConditions_ToggleControls" size="large" />
        </group>
        <group id="StatesAndConditions_Group3" caption="Controls Group" appearsOnAddInTab="false" condition="Controls_Toggle_condition">
          <!-- host controls within groups -->
          <!--Core Pro Commands-->
          <toolPalette refID="esri_mapping_newMapPalette" />
          <button refID="esri_core_saveProjectButton" />
          <button refID="esri_core_saveProjectAsButton" />
          <gallery refID="esri_mapping_bookmarksNavigateGallery" />
          <button refID="esri_mapping_mapContextMenu_ExportMap" />
        </group>
      </groups>
      <controls>
        <!-- add your controls here -->
        <button id="StatesAndConditions_ToggleTab" caption="Toggle Custom Tab" className="ToggleTab" loadOnClick="true" smallImage="Images\GenericButtonBlue16.png" largeImage="Images\GenericButtonBlue32.png">
          <tooltip heading="Tooltip Heading">Tooltip text<disabledText /></tooltip>
        </button>
        <button id="StatesAndConditions_ToggleControls" caption="Toggle Controls Visibility" className="ToggleControls" loadOnClick="true" smallImage="Images\GenericButtonBlue16.png" largeImage="Images\GenericButtonBlue32.png">
          <tooltip heading="Tooltip Heading">Tooltip text<disabledText /></tooltip>
        </button>
      </controls>
    </insertModule>
    

Create a new method and update button click events

  1. Copy the following code for a new ToggleState method, and paste it into the Module1.cs file, below the Overrides region.

        #region Toggle State
        /// <summary>
        /// Activate or Deactivate the specified state. State is identified via
        /// its name. Listen for state changes via the DAML <b>condition</b> attribute
        /// </summary>
        /// <param name="stateID"></param>
        public static void ToggleState(string stateID)
        {
            if (FrameworkApplication.State.Contains(stateID))
            {
                FrameworkApplication.State.Deactivate(stateID);
            }
            else
            {
                FrameworkApplication.State.Activate(stateID);
            }
        }
    
        #endregion Toggle State
    
  2. Update the ToggleControls button’s click event calling the ToggleState method, so it looks as follows:

        protected override void OnClick()
        {
            Module1.ToggleState("controls_state");
        }
    
  3. In the same way, update the ToggleTab button’s click event calling the ToggleState method, so it looks as follows:

        protected override void OnClick()
        {
            Module1.ToggleState("tab_state");
        }
    

Build and test your code

  1. Your code is completed Build your project and debug any issues. Start the project which will launch ArcGIS Pro. Create a new project or open an existing project when the start page appears.

  2. Go to the Add-In tab, and find the new Toggle Custom Tab button. Press the button, which will activate the tab_state for the condition which allows the new tab with the New Custom Tab caption to appear.

  3. Click on the new tab, and you will find a control group with a single button with the caption Toggle Controls Visibility. Press the button, which will activate the controls_state for the condition which allows the new Controls Group to become visible.

  4. Press the Toggle Controls Visibility button again to deactivate the state/condition and hide the Controls Group. Go back to the Add-In tab, and press the Toggle Custom Tab button to deactivate the state/condition and hide New Custom Tab.

Congratulations, you're done!

Compare your solution with our completed solution project.

Challenge

Review the online documentation

Read more information about DAML and conditions and states in the ProConcepts Framework document, and review more DAML Snippets.

Try a community sample

Download and try the WorkingWithDAML community sample, as well as other samples on GitHub.