Manage the Pro UI with conditions

This tutorial demonstrates how to manage the ArcGIS Pro UI using states and conditions.

With the 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, developers can build Pro add-ins and solution configurations that provide users with custom functionality specific to their organization or industry.

The ArcGIS Pro SDK allows you to use the contextual nature of the UI, managing a workflow of steps by setting the visibility for tabs and controls on the Pro ribbon based on conditions using 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.

Prerequisites

• Microsoft Visual Studio is required. See the ArcGIS Pro system requirements for latest version and compatibility.
• Install ArcGIS Pro version 3.3 or higher.
• Install the ArcGIS Pro SDK for .NET. See the Installation ProGuide for more information.

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.

   More info

   By default, the Config.daml file opens in Visual Studio. The Module1.cs file contains add-in module code.

   Note also in the Config.daml file that the id attribute of the insertModule tag matches the ID within the Module1.cs file and that the className attribute matches the class name of the module.

   To find the ArcGIS templates group, see Templates > Visual C# > ArcGIS. Also confirm that the latest .NET Framework is selected.

Create new Pro buttons and update DAML with conditions

1. Right-click the project and choose Add > New Item. From the ArcGIS Pro Add-ins group, select ArcGIS Pro Button from the list of item templates.

2. When prompted, name the new class file ToggleTab.cs and then click Add to close the dialog box.

3. Add a second button following these same steps. Name this class file EnableControls.

   More info

   Once added, the class files for each of the buttons should open by default. The Button template provides the contents of the class file as well as corresponding code in the Config.daml file for the ArcGIS Pro UI, so the buttons can be activated.

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

   More info

   When you update the Config.daml with new conditions, you can manage tab and group visibility.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   <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>

5. Replace the current DAML code between <modules> and </modules> with the following:

   More info

   The new DAML code does the following:

   • updates the new tab, which is made visible based on the Tab_Toggle_condition. It has a condition and includes two control groups.
   • updates control group 1 and adds control groups 2 and 3. Group 3 includes a condition.
   • updates the attributes of the ToggleTab and ToggleControls buttons.
   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
    <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="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/GenericButtonBlue16.png" largeImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/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="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/GenericButtonBlue16.png" largeImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/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.

   More info

   As described in the code’s comment, this method toggles the state passed into the method between activated and deactivated.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
       #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:

   Use dark colors for code blocksCopy

   1
   2
   3
   4
       protected override void OnClick()
       {
           Module1.ToggleState("controls_state");
       }

3. Update the ToggleTab button’s click event calling the ToggleState method, so it looks as follows:

   Use dark colors for code blocksCopy

   1
   2
   3
   4
       protected override void OnClick()
       {
           Module1.ToggleState("tab_state");
       }

Build and test your code

Once your code is completed, build your project and debug any issues.

1. Start the project, which will launch ArcGIS Pro. Create a new project or open an existing project when the start page opens.

2. From the Add-In tab, click the new Toggle Custom Tab button. This activates the tab_state for the condition, allowing the new tab with the New Custom Tab caption become visible.

3. Click on the new tab to find a control group with a single button, captioned Toggle Controls Visibility.

4. Press Toggle Controls Visibility, which activates the controls_state for the condition, allowing the new Controls Group to become visible.

5. Press Toggle Controls Visibility again to deactivate the state / condition and hide the Controls Group.

6. On the Add-In tab, click Toggle Custom Tab again to deactivate the state / condition and hide New Custom Tab.

What's Next?

Learn how to use additional ArcGIS Pro SDK for .NET features in these tutorials:

• Build your first configuration
• Manage add-in loading
• Edit attribute data