Designer Help

Open topic with navigation

Component Settings

You can change the settings that affect multiple components of a GXW app. The settings for components are accessible from the Configure Components panel, which appears when you create or open an app.

Common Settings

Nearly all components have the following settings:

• Title: Type a title to display for this component.

• Icon: To select an icon to represent this component, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.

Basemap Picker Settings

You can configure two kinds of basemaps for the user to select:

• Esri basemap: These are the well-known standard Esri basemaps.

• Custom basemap: Create your own basemap with whichever layers you want.

Basemap layers are typically drawn at the bottom of other layers, although a custom basemap may contain reference layers, which are drawn on top of all other layers.

To add an Esri basemap:

1. In the Configure Components panel, select Basemap Picker.

2. In the Basemap Picker panel, click +Add Esri Basemap.

3. In the Esri Basemap panel, set the following: 

   • Title: The title of the basemap as it will appear in the basemap picker.

   • Basemap: The standard Esri basemap to use as the basemap.

To add a custom basemap:

1. In the Configure Components panel, select Basemap Picker.

2. In the Basemap Picker panel, click beside +Add Esri Basemap and click Add Custom Basemap.

3. In the Custom Basemap panel, set the following: 

   • Title: The title of the basemap as it will appear in the basemap picker.

   • Thumbnail Image URL: The URL for an image you want to use as the thumbnail in the basemap picker.

   • Reference Layers: These layers are drawn on top of all other layers. They are typically text label layers such as street names.

     To add a reference layer:

     1. In the Custom Basemap panel, click +Add Layer.

     2. Select the reference layers you want to add as part of the custom basemap. You can search for a reference layer to use by name or portal item ID. You can search reference layers you own, reference layers shared with you or public reference layers.

     3. Click Select.

     To edit a reference layer:

     1. In the Custom Basemap panel, in the Reference Layers section, click the name of the reference layer.

     2. Change any of the following reference layer settings:

        • Layer: Click Select to select a different reference layer.

        • Opacity: The opacity of the reference layer represented by a decimal number between 0 (transparent) and 1 (opaque).

        • Maximum Scale: The maximum visible scale of the reference layer.

        • Maximum Scale: The minimum visible scale of the reference layer.

     3. Click the back button .

     To reorder a reference layer:

     1. In the Custom Basemap panel, in the Reference Layers section, click Edit Items.

     2. Drag the reference layer up or down to the position you want.

     3. Click Done.

     To delete a reference layer:

     1. In the Basemap Picker panel, in the Reference Layers section, click Edit Items.

     2. Click the Delete icon .

     3. Click Done.

   • Base Layers: These layers are drawn at the bottom of the other layers.

     To add a base layer:

     1. In the Custom Basemap panel, click +Add Layer.

     2. Select the base layers you want to add as part of the custom basemap. You can search for a base layer to use by name or portal item ID. You can search base layers you own, base layers shared with you or public base layers.

     3. Click Select.

     To edit a base layer:

     1. In the Custom Basemap panel, in the Base Layers section, click the name of the base layer.

     2. Change any of the following base layer settings:

        • Layer: Click Select to select a different base layer.

        • Opacity: The opacity of the base layer represented by a decimal number between 0 (transparent) and 1 (opaque).

        • Maximum Scale: The maximum visible scale of the base layer.

        • Maximum Scale: The minimum visible scale of the base layer.

     3. Click the back button .

     To reorder a base layer:

     1. In the Custom Basemap panel, in the Base Layers section, click Edit Items.

     2. Drag the base layer up or down to the position you want.

     3. Click Done.

     To delete a base layer:

     1. In the Basemap Picker panel, in the Base Layers section, click Edit Items.

     2. Click the Delete icon .

     3. Click Done.

To edit a basemap:

1. In the Configure Components panel, select Basemap Picker.

2. In the Basemap Picker panel, click the name of the basemap.

3. Change the basemap settings you want.

To reorder a basemap:

1. In the Configure Components panel, select Basemap Picker.

2. In the Basemap Picker panel, click Edit Items.

3. Drag the basemap up or down to the position you want.

4. Click Done.

To delete a basemap:

1. In the Configure Components panel, select Basemap Picker.

2. In the Basemap Picker panel, click Edit Items.

3. Click the Delete icon .

4. Click Done.

Branding Settings

The following settings apply to the application as a whole and set the appearance of the whole app.

• Color Template: Apply an overall background color scheme. From the drop-down list, select either the Light Template or Dark Template.

• Accent Color: Apply a color to UI elements such as the I Want To menu. To select a color, click the color picker on the right, or manually type an rgb(#, #, #) value. The numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. For example, rgb(0, 127, 255).

Geometry Service Settings

• Geometry Service URL: Type the URL of the geometry service you want your app to use for functions like buffering, calculating area and lengths, etc.

Highlighting Settings

You can change the colors used to highlight features found when you search or click a feature to focus on it. You can also add a either a simple marker or a picture that points to the specific feature highlighted.

• Highlight Color: Sets the color that shows highlighted features returned in a search.

  

  To select a color, click the color picker on the right, or manually type an rgba(#, #, #, #) value. The first three numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. The final number represents the color's opacity, and must be a decimal number between 0 (fully transparent) and 1 (fully opaque). For example, rgba(0, 127, 255, 0.5).

• Focus Color: Sets the color that surrounds a feature that is in focus, that is, the feature last clicked.

  

  To select a color, click the color picker on the right, or manually type an rgba(#, #, #, #) value. The first three numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. The final number represents the color's opacity, and must be a decimal number between 0 (fully transparent) and 1 (fully opaque). For example, rgba(0, 127, 255, 0.5).

• Highlight Symbol Type:

  • No Symbol: Select if you only want an outline around every feature identified in a search with no additional marker.

  • Picture Marker Symbol: Select if you want to add a picture marker to highlight each feature found during a search. When you select this option, the Highlight Symbol section appears.

    

    To view the following settings, click Highlight Symbol to expand that section if necessary:

    • Display: Sets whether the marker is displayed in 2D web maps, 3D web scenes or both.

    • Rotation Angle: The angle of the marker in degrees.

    • Height: The height of the marker in pixels.

    • URL: The URL of the image to use as the marker.

    • Width: The width of the marker in pixels.

    • X Offset: The number of pixels to horizontally offset the marker from the feature.

    • Y Offset: The number of pixels to vertically offset the marker from the feature.

    

  • Simple Marker Symbol: Select this option if you want to add a simple marker to highlight each feature found during a search. When you select this option, the Highlight Symbol section appears.

    To view the following settings, click Highlight Symbol to expand that section if necessary:

    • Display: Sets whether the marker is displayed in 2D web maps, 3D web scenes or both.

    • Rotation Angle: The angle of the marker in degrees.

    • Color: The fill color of the marker. To select a color, click the color picker on the right, or manually type an rgba(#, #, #, #) value. The first three numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. The final number represents the color's opacity, and must be a decimal number between 0 (fully transparent) and 1 (fully opaque). For example, rgba(0, 127, 255, 0.5).

    • Outline Color: The color of the line surrounding the marker. To select a color, click the color picker on the right, or manually type an rgba(#, #, #, #) value. The first three numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. The final number represents the color's opacity, and must be a decimal number between 0 (fully transparent) and 1 (fully opaque). For example, rgba(0, 127, 255, 0.5).

    • Outline Width: The width of the line surrounding the marker.

    • Size: The size of the marker in pixels.

    • Style: The shape of the marker. Select either a Circle, Cross, Diamond, Square or an X.

    • X Offset: The number of pixels to horizontally offset the marker from the feature.

    • Y Offset: The number of pixels to vertically offset the marker from the feature.

• Focus Symbol Type:

  • No Symbol: Select if you want the focus symbol to be only a line around the feature when it is clicked.

  • Picture Marker Symbol: Select if you want to add a picture marker to highlight a feature when it is clicked. When you select this option, the Focus Symbol section appears:

    

    To view the following settings, click Focus Symbol to expand that section if necessary:

    • Display: Sets whether the marker is displayed in 2D web maps, 3D web scenes or both.

    • Rotation Angle: The angle of the marker in degrees.

    • Height: The height of the marker in pixels.

    • URL: The URL of the image to use as the marker.

    • Width: The width of the marker in pixels.

    • X Offset: The number of pixels to horizontally offset the marker from the feature.

    • Y Offset: The number of pixels to vertically offset the marker from the feature.

    

  • Simple Marker Symbol: Select if you want to add a simple marker to highlight a feature when it is clicked. When you select this option, the Focus Symbol section appears.

    To view the following settings, click Focus Symbol to expand that section if necessary:

    • Display: Sets whether the marker is displayed in 2D web maps, 3D web scenes or both.

    • Rotation Angle: The angle of the marker in degrees.

    • Color: The fill color of the marker. To select a color, click the color picker on the right, or manually type an rgba(#, #, #, #) value. The first three numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. The final number represents the color's opacity, and must be a decimal number between 0 (fully transparent) and 1 (fully opaque). For example, rgba(0, 127, 255, 0.5).

    • Outline Color: The color of the line surrounding the marker. To select a color, click the color picker on the right, or manually type an rgba(#, #, #, #) value. The first three numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. The final number represents the color's opacity, and must be a decimal number between 0 (fully transparent) and 1 (fully opaque). For example, rgba(0, 127, 255, 0.5).

    • Outline Width: The width of the line surrounding the marker.

    • Size: The size of the marker in pixels.

    • Style: The shape of the marker. Select either a Circle, Cross, Diamond, Square or an X.

    • X Offset: The number of pixels to horizontally offset the marker from the feature.

    • Y Offset: The number of pixels to vertically offset the marker from the feature.

• Highlight Label Text Symbol: Select the settings for the labels that appear when features on the map are highlighted.

  To view the following settings, click Highlight Label Text Symbol to expand that section if necessary:

  • Color: The color of the label text. To select a color, click the color picker on the right, or manually type an rgba(#, #, #, #) value. The first three numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. The final number represents the color's opacity, and must be a decimal number between 0 (fully transparent) and 1 (fully opaque). For example, rgba(0, 127, 255, 0.5).

  • Halo Size: The point size of the background halo around the label text.

  • Halo Color: The color of the background halo around the label text. To select a color, click the color picker on the right, or manually type an rgba(#, #, #, #) value. The first three numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. The final number represents the color's opacity, and must be a decimal number between 0 (fully transparent) and 1 (fully opaque). For example, rgba(0, 127, 255, 0.5).

  • Font Size: The point size of the font of the label text.

  Highlight labels only appear for 2D maps at this time.

• Focus Label Text Symbol: Select the settings for the label that appears when a feature on the map is clicked.

  To view the following settings, click Focus Label Text Symbol to expand that section if necessary:

  • Color: The color of the label text. To select a color, click the color picker on the right, or manually type an rgba(#, #, #, #) value. The first three numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. The final number represents the color's opacity, and must be a decimal number between 0 (fully transparent) and 1 (fully opaque). For example, rgba(0, 127, 255, 0.5).

  • Halo Size: The point size of the background halo around the label text.

  • Halo Color: The color of the background halo around the label text. To select a color, click the color picker on the right, or manually type an rgba(#, #, #, #) value. The first three numbers represent the amount of red, green and blue, respectively, and each must be an integer between 0 and 255. The final number represents the color's opacity, and must be a decimal number between 0 (fully transparent) and 1 (fully opaque). For example, rgba(0, 127, 255, 0.5).

  • Font Size: The point size of the font of the label text.

  Focus labels only appear for 2D maps at this time.

I Want To Menu Settings

You can change any item in the I Want To menu, add custom items to the menu or delete those you do not want.

Within each menu item, you can change the following:

• Title: Type a title for this menu item. For example, change Line Identify to Identify Features using a Line.

• Description: Type a description of what this menu item does. If you don't want a description of the menu item, leave it blank.

• Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.

• Command: Type the name of the command to run when a user clicks the menu item. When you begin typing, known commands are listed for you to select and implement.

• Hide when Disabled: Whether to hide the menu item when the command cannot be executed.

• Can be Toggled: Whether the menu item can be toggled between two states. If the menu item can be toggled, you can specify the behavior of the menu item for both states as well as whether the menu item is toggled by default.

To add a menu item:

1. In the Configure Components panel, select I Want To Menu.

2. In the Menu panel, click +Add Menu Item.

   You can add a divider to the menu, which helps to organize related menu items. To add a menu divider, click beside +Add Menu Item and click Add Divider.

3. In the Menu Item panel, set the following: 

   • Title: Type in a title for this menu item as it will appear in the I Want To menu. For example, Switch to Results Table.

   • Description: Type an explanation of what this menu item will do when you click it. For example, Switches to viewing search results in a table.

   • Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. You do not need to have an icon, you can just have words to represent the menu item. To remove the icon, click Clear Icon.

   • Command: Type or select the command to run when a user clicks the menu item. A command is an action the app should perform.

     An example command is already in the Command box. Delete the example command and replace it with your own command. The list of available commands depends on the context of the menu.

     Some commands have additional settings you can configure.

     To turn your command into a custom command, click Customize. The code for the command appears in a code box below.

     To run multiple commands, in the Command box, select Define Custom Command and, in the code box that appears below, type a sequence of commands in JSON format. While editing the custom command in the code box, press CTRL+Space to access suggestions of all possible commands.

     For example, the following custom command switches from the Results List to the Results Table.

     [
       {
         "name": "ui.deactivate",
         "arguments": "results-list"
       },
       {
         "name": "ui.activate",
         "arguments": "results-table"
       }
     ]

To edit a menu item:

1. In the Configure Components panel, select I Want To Menu.

2. In the Menu panel, click the name of the menu item.

3. Change the menu item settings you want.

To reorder a menu item:

1. In the Configure Components panel, select I Want To Menu.

2. In the Menu panel, click Edit Items.

3. Drag the menu item up or down to the position you want.

4. Click Done.

To delete a menu item:

1. In the Configure Components panel, select I Want To Menu.

2. In the Menu panel, click Edit Items.

3. Click the Delete icon .

4. Click Done.

Image Settings

• Image Source: The URL of the banner image. You can use a path that is relative to GXW.

• Alternative text: The alternative text to display if the banner image cannot be displayed.

Layer List Settings

• Layer Extensions: Select the layer list settings for each layer:

  • Disable/Enable Included : Click the icon to toggle whether this layer is included in the layer list.

    This setting does not affect the layer's visibility on the map.

  • Open the layer : Click the arrow to open this layer's settings:

    • Included : Toggles whether this layer is included in the layer list.

      This setting does not affect the layer's visibility on the map.

Layer Presets Settings

A layer preset allows a user to change the visibility settings of many layers at once. For example, you could configure a layer preset that only displays layers related to vegetation. Layer presets are located at the bottom of the layer list.

• Layer Presets: 

  Layer presets have the following settings:

  • Layer Extensions: Select the layer preset settings for each layer:

    • Disable/Enable Visible : Click the icon to toggle whether this layer is visible on the map when this layer preset is selected.

    • Open the layer : Click the arrow to open this layer's settings:

      • Visible : Toggles whether this layer is visible on the map when this layer preset is selected.

  • Title: Change the name of the layer preset as it will appear in the layer list.

  • Icon: To select an icon to represent this layer preset, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.

  To add a layer preset:

  1. In the Configure Components panel, select Layer Presets.

  2. In the Layer Presets panel, click +Add Layer Preset.

  3. In the New Layer Preset panel, set the following: 

     • Layer Extensions: Select the layer preset settings for each layer:

       • Disable/Enable Visible : Click the icon to toggle whether this layer is visible on the map when this layer preset is selected.

     • Title: Change the name of the layer preset as it will appear in the layer list.

     • Icon: To select an icon to represent this layer preset, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.

  To edit a layer preset:

  1. In the Configure Components panel, select Layer Presets.

  2. In the Layer Presets panel, click the name of the layer preset.

  3. Change the layer preset settings you want.

  To reorder a layer preset:

  1. In the Configure Components panel, select Layer Presets.

  2. In the Layer Presets panel, click Edit Items.

  3. Drag the layer preset up or down to the position you want.

  4. Click Done.

  To delete a layer preset:

  1. In the Configure Components panel, select Layer Presets.

  2. In the Layer Presets panel, click Edit Items.

  3. Click the Delete icon .

  4. Click Done.

Map Settings

A group of settings related to the map, its layers, context menu and start up event: 

• Web Map: Click Select, select a web map to use and click Select. You can search for a web map by name or portal item ID. You can search web maps you own, web maps shared with you or public web maps.

  For a list of supported web maps , see 2D Web Map Support.

  To remove the web map, click Remove.

• Web Scene: Click Select, select a web scene to use and click Select. You can search for a web scene by name or portal item ID. You can search web scenes you own, web maps shared with you or public web scenes.

• For a list of supported web scenes, see 3D Web Scene Support.

  To remove the web scene, click Remove.

• Use Esri Field Formatting: Whether to use the field formatting configured in the Esri portal or the formatting defined within Web Designer.

  In the Esri portal, the field formatting settings found within the layer's pop-up configuration.

  In Web Designer, formatting settings are found within both the Region and Map component settings. Formatting settings in the Region component affect the entire app. Within the Map component, formatting can apply to an entire layer or an individual field.

• Layer Extensions: Add or remove layers for this map. You can also set the following on each layer:

  • Disable/Enable Identify : Click the icon to toggle the identify function for this layer.

  • Disable/Enable Search : Click the icon to toggle search for this layer.

  • Open the layer : Click the arrow to open this layer and select settings for this layer's field extensions.

    Field Extensions:

    • Disable Search : Click the icon to disable search for this field extension

    • Open the Field Extension : Click the icon to see settings that apply to this field extension. The settings are different depending on the type of field extension but could include any of the following: 

      • Searchable : Click the icon to turn off searching of this field extension.

      • Inherit Formatting : Turn inherited number formatting for this field extension on or off. To select individual settings that override the inherited formatting, turn Inherit Formatting off and then select one of the following possible options: 

        • Date Format: Select the date format to use for this field extension.

        • Number Format: Select the number format to use for numbers displayed by this field extension. For more information on number formats, see Standard Numeric Format Strings. The default is Fixed Point. Select one of the following formats:

          • Number: A localized representation of a number with a decimal separator, group separator and optional negative sign. For example, in the en-us locale: 12,345.67 or -42.

          • Fixed Point: A localized representation of a number with a decimal separator and optional negative sign. For example, in the en-us locale: 12345.67 or -42.

          • Currency: A localized representation of a monetary amount in a specific currency. For example, in the en-us locale: $123.45 for USD or £123.45 for GBP.

          • Accounting: A localized representation of a monetary amount in a specific currency except negative values are displayed in brackets. For example, in the en-us locale, -$543.21 would be represented as: ($543.21) for USD.

          • Percent: A localized representation of a percentage. For example, in the en-us locale, 0.99 would be represented as: 99%.

          • Custom: Use one or more numeric specifiers to define how to format numeric data. For more information, see Microsoft's Custom Numeric Format Strings.

        • Currency: The currency of this field extension.

        • Fractional Digits: Type in the number of digits to appear after the decimal point in fractions. If you do not set a number, the default applied to currency units depends on the currency.

    • Feature Actions: 

      Feature actions set at this level only appear for features of this particular layer. To add a feature action for all features, see the Result Details, Results List or Results Table settings.

      Menu items have the following settings:

      • Title: Change the name of the menu item as it will appear in the Result Details, Results List and Results Table panels.

      • Description: Type a description of what this menu item does. If you don't want a description of the menu item, leave it blank.

      • Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.

      • Command: Type the name of the command to run when a user clicks the menu item. When you begin typing, known commands are listed for you to select and implement.

      To add a menu item:

      1. In the Configure Components panel, select Map, and select the desired layer.

      2. In the layer panel, click +Add Menu Item.

      3. In the Menu Item panel, set the following: 

         • Title: Type a title for this menu item as it will appear in the Result Details, Results List and Results Table panels. For example, Zoom to and Pulse Features.

         • Description: Type an explanation of what this menu item will do when you click it. For example, Zooms to features and temporarily highlights them.

         • Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. You do not need to have an icon, you can just have words to represent the menu item. To remove the icon, click Clear Icon.

         • Command: Type or select the command to run when a user clicks the menu item. A command is an action the app should perform.

           An example command is already in the Command box. Delete the example command and replace it with your own command. The list of available commands depends on the context of the menu.

           Some commands have additional settings you can configure.

           To turn your command into a custom command, click Customize. The code for the command appears in a code box below.

           To run multiple commands, in the Command box, select Define Custom Command and, in the code box that appears below, type a sequence of commands in JSON format. While editing the custom command in the code box, press CTRL+Space to access suggestions of all possible commands.

           For example, the following custom command zooms to features in the results and temporarily highlights them.

           [
             "map.zoom-to-features",
             "highlights.pulse"
           ]

           The above example demonstrates how to pass the current context - the features in the results - as an argument into the map.zoom-to-features operation. The returned value of map.zoom-to-features, which is the same set of features, is then automatically passed into the next command, highlights.pulse. If you want to instead ignore the current context and supply your own argument to a command, see the example provided in Toolbar Settings.

      To edit a menu item:

      1. In the Configure Components panel, select Map, and select the desired layer.

      2. In the layer panel, click the name of the menu item.

      3. Change the menu item settings you want.

      To reorder a menu item:

      1. In the Configure Components panel, select Map, and select the desired layer.

      2. In the layer panel, click Edit Items.

      3. Drag the menu item up or down to the position you want.

      4. Click Done.

      To delete a menu item:

      1. In the Configure Components panel, select Map, and select the desired layer.

      2. In the layer panel, click Edit Items.

      3. Click the Delete icon .

      4. Click Done.

    • Task Settings:

      • Editing : Turn editing on or off for this layer.

      • Export : Turn the export feature on or off for this layer.

      • Identify : Turn identifying on or off for this layer.

      • Query : Turn querying on or off for this layer.

      • Search : Turn search on or off for this layer.

    • Zoom Settings:

      • Zoom Scale: Set the scale to which the map should zoom for results in this layer. When zooming to results from multiple layers, the highest Zoom Scale is used. If both Zoom Scale and Zoom Factor are set, the higher of the two scale values is used.

      • Zoom Factor: Set the Zoom Factor that is applied to the geometry of non-point results to calculate the scale at which to zoom. When zooming to non-point results from multiple layers, the highest Zoom Factor is used. The default is 1.5. If both Zoom Scale and Zoom Factor are set, the higher of the two scale values is used.

    • Formatting:

      • Inherit Formatting : Turn inherited formatting options on or off.

        Turn off Inherit Formatting to activate options to set custom formatting for this layer.

      • Date Format: Select the format of the date to use for this layer. The default is Date Time Short.

      • Number Format: Select the number format to use for numbers displayed by this layer. For more information on number formats, see Standard Numeric Format Strings. The default is Fixed Point. Select one of the following formats:

        • Number: A localized representation of a number with a decimal separator, group separator and optional negative sign. For example, in the en-us locale: 12,345.67 or -42.

        • Fixed Point: A localized representation of a number with a decimal separator and optional negative sign. For example, in the en-us locale: 12345.67 or -42.

        • Currency: A localized representation of a monetary amount in a specific currency. For example, in the en-us locale: $123.45 for USD or £123.45 for GBP.

        • Accounting: A localized representation of a monetary amount in a specific currency except negative values are displayed in brackets. For example, in the en-us locale, -$543.21 would be represented as: ($543.21) for USD.

        • Percent: A localized representation of a percentage. For example, in the en-us locale, 0.99 would be represented as: 99%.

        • Custom: Use one or more numeric specifiers to define how to format numeric data. For more information, see Microsoft's Custom Numeric Format Strings.

      • Currency: Select the currency you want to use for this layer. The default is USD.

      • Fractional Digits: Type in the number of digits to appear after the decimal point in fractions. If you do not set a number, the default applied to currency units depends on the currency.
        For a number format, the default applied is 4.

• Context Menu: Configures the menu items in the context menu that appears when a user right-clicks or long-presses somewhere on the map.

  Menu items have the following settings:

  • Title: Change the name of the menu item as it will appear in the context menu.

  • Description: Type a description of what this menu item does. If you don't want a description of the menu item, leave it blank.

  • Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.

  • Command: Type the name of the command to run when a user clicks the menu item. When you begin typing, known commands are listed for you to select and implement.

  To add a menu item:

  1. In the Configure Components panel, select Map.

  2. In the Map panel, click +Add Menu Item.

     You can add a divider to the menu, which helps to organize related menu items. To add a menu divider, click beside +Add Menu Item and click Add Divider.

  3. In the Menu Item panel, set the following: 

     • Title: Type a title for this menu item as it will appear in the context menu when the user right-clicks or long-presses the map. For example, Run My Worklow.

     • Description: Type an explanation of what this menu item will do when you click it. For example, Runs my custom workflow.

     • Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. You do not need to have an icon, you can just have words to represent the menu item. To remove the icon, click Clear Icon.

     • Command: Type or select the command to run when a user clicks the menu item. A command is an action the app should perform.

       An example command is already in the Command box. Delete the example command and replace it with your own command. The list of available commands depends on the context of the menu.

       Some commands have additional settings you can configure.

       To turn your command into a custom command, click Customize. The code for the command appears in a code box below.

       To run multiple commands, in the Command box, select Define Custom Command and, in the code box that appears below, type a sequence of commands in JSON format. While editing the custom command in the code box, press CTRL+Space to access suggestions of all possible commands.

       For example, to create a menu item that runs a workflow, in the Command box, type the name of the workflow and click it when it appears. The command becomes a custom command and code similar to the following appears in the code box:

       {
         "id": "1a2b3c4d-5e6f-1a2b-3c4d-5e6lucina14e",
         "inputs": {},
         "portalItem": "https://mycompany.maps.arcgis.com/sharing/rest/content/items/1c8eevee4b154mewsix894bff619a4d7",
         "commandArgumentInput": "myGeometryParameter"									
       }

       The above example uses the commandArgumentInput property to specify which workflow input should receive the current context as its value, that is, the geometry of the selected point. By default, the commandArgumentInput property is set to context.

       You can also use the inputs property to supply values to workflow inputs. The inputs property is a key-value object, where the keys are the names of workflow inputs.

       The commandArgumentInput property overrides the inputs property.

       For more information, see Use the Menu Context as a Workflow Input.

  To edit a menu item:

  1. In the Configure Components panel, select Map.

  2. In the Map panel, click the name of the menu item.

  3. Change the menu item settings you want.

  To reorder a menu item:

  1. In the Configure Components panel, select Map.

  2. In the Map panel, click Edit Items.

  3. Drag the menu item up or down to the position you want.

  4. Click Done.

  To delete a menu item:

  1. In the Configure Components panel, select Map.

  2. In the Map panel, click Edit Items.

  3. Click the Delete icon .

  4. Click Done.

Events

• Initialized: Type or select the command to run the first time the map finishes loading. A command is an action the app should perform. The command runs again if the page is refreshed but not when switching between a 2D web map and a 3D web scene, or vice versa.

  Some commands have additional settings you can configure.

  To turn your command into a custom command, click Customize. The code for the command appears in a code box below.

  To run multiple commands, in the Command box, select Define Custom Command and, in the code box that appears below, type a sequence of commands in JSON format. While editing the custom command in the code box, press CTRL+Space to access suggestions of all possible commands.

Print Settings

You can adjust the print settings available when the user prints the map, including the print template settings, spatial reference grids and resolutions the user can select. The user is also presented with any input parameters the print template may have.

• Print Templates: Add print templates for the user to select. Print templates are created with Geocortex Printing. Each print template has the following settings:

  • Title: The title to display for the print template.

  • Template: The URL of the print template.

  To add a print template:

  1. In the Configure Components panel, select Print.

  2. In the Print panel, click +Add Print Templates.

  3. Select one or more print templates. You can search for a print template by name or portal item ID. You can search print templates you own or print templates shared with you.

  4. Click Select.

  To edit a print template:

  1. In the Configure Components panel, select Print.

  2. In the Print panel, click the title of the print template.

  3. Change the print template settings you want.

  To reorder a print template:

  1. In the Configure Components panel, select Print.

  2. In the Print panel, click Edit Items.

  3. Drag the print template up or down to the position you want.

  4. Click Done.

  To delete a print template:

  1. In the Configure Components panel, select Print.

  2. In the Print panel, click Edit Items.

  3. Click the Delete icon .

  4. Click Done.

• Spatial Reference Grids: Add spatial reference grids for the user to select that will appear when the map is printed. Each spatial reference grid has the following settings:

  • Name: The display name of the spatial reference grid.

  • WKID: The Well-Known ID (WKID) that identifies the spatial reference to use for the grid.

  • Well-Known Text: The Well-Known Text (WKT) that identifies the spatial reference to use for the grid.

  For a list of Well-Known IDS (WKIDs) and Well-Known Texts (WKTs), see Esri's Geographic Coordinate Systems or Projected Coordinate Systems.

  To add a spatial reference grid:

  1. In the Configure Components panel, select Print.

  2. Click +Add Grid.

  3. In the Name box, type a display name for the spatial reference grid.

  4. Do one of the following:

     • In the WKID box, type the Well-Known ID of the spatial reference to use for the grid.

     • In the Well-Known Text box, type the Well-Known Text of the spatial reference to use for the grid.

     The WKID setting overrides the Well-Known Text setting.

  To edit a spatial reference grid:

  1. In the Configure Components panel, select Print.

  2. In the Print panel, click the title of the spatial reference grid.

  3. Change the spatial reference grid settings you want.

  To reorder a spatial reference grid:

  1. In the Configure Components panel, select Print.

  2. In the Print panel, click Edit Items.

  3. Drag the spatial reference grid up or down to the position you want.

  4. Click Done.

  To delete a spatial reference grid:

  1. In the Configure Components panel, select Print.

  2. In the Print panel, click Edit Items.

  3. Click the Delete icon .

  4. Click Done.

• Resolutions: Add resolutions for the user to select in which to print the map. Each resolution has the following setting:

  • DPI: The Dots Per Inch (DPI) resolution in which to print the map.

  To add a resolution:

  1. In the Configure Components panel, select Print.

  2. In the Resolution panel, click +Add Resolution.

  3. In the DPI box, type a number representing the Dots Per Inch (DPI) resolution.

  4. Click Select.

  To edit a resolution:

  1. In the Configure Components panel, select Print.

  2. In the Resolution panel, click the title of the resolution.

  3. Change the resolution settings you want.

  To reorder a resolution:

  1. In the Configure Components panel, select Print.

  2. In the Resolution panel, click Edit Items.

  3. Drag the resolution up or down to the position you want.

  4. Click Done.

  To delete a resolution:

  1. In the Configure Components panel, select Print.

  2. In the Resolution panel, click Edit Items.

  3. Click the Delete icon .

  4. Click Done.

Region Settings

By default, these region settings apply to the entire app but can be overridden by certain components. For example, each layer or field may have individual format settings.

• Measurement Units: Sets the measurement units of the app to be one of the following:

  • Detected Measurement: Determines whether to use metric or imperial units of measurement based on your system's region settings.

  • Metric: Sets the app to use metric units of measurement.

  • Imperial: Sets the app to use the imperial units of measurement.

• Fallback Locale: Sets the default locale to use when no translation exists for the currently-selected locale.

• Date Format: Sets the date format to apply to your whole app. You can also set individual settings for specific layers and fields by editing the settings of those layers or fields. The actual date format produced is dependent on your operating system and its own region settings. The default is Date Time Short.

• Number Format: Sets the format by which numbers should be represented in your app. These settings affect both the formatting and calculation of numeric feature data associated with the map. You can also apply number formats to specific layers or fields by editing the settings of those layers or fields. For more information on number formats, see Standard Numeric Format Strings. The default option is Fixed Point. Select one of the following formats:

  • Number: A localized representation of a number with a decimal separator, group separator and optional negative sign. For example, in the en-us locale: 12,345.67 or -42.

  • Fixed Point: A localized representation of a number with a decimal separator and optional negative sign. For example, in the en-us locale: 12345.67 or -42.

  • Currency: A localized representation of a monetary amount in a specific currency. For example, in the en-us locale: $123.45 for USD or £123.45 for GBP.

  • Accounting: A localized representation of a monetary amount in a specific currency except negative values are displayed in brackets. For example, in the en-us locale, -$543.21 would be represented as: ($543.21) for USD.

  • Percent: A localized representation of a percentage. For example, in the en-us locale, 0.99 would be represented as: 99%.

  • Custom: Use one or more numeric specifiers to define how to format numeric data. For more information, see Microsoft's Custom Numeric Format Strings.

• Currency: Select the currency you want your app to operate in.

• Decimal Places: Type in the number of digits to appear after the decimal point in fractions. If you do not set a number, the default applied to currency units depends on the currency. By default, this field is blank.

• Time Zone: Select the time zone your app will operate within. The default is Default, which uses the time zone from your system settings.

Result Details Settings

The Result Details settings contain a list of feature action menu items that are common to the Results List and Results Table settings. Adding, editing or removing a menu item in one place affects the others.

Feature Actions: 

Feature actions set at this level are available for all features, unlike setting feature actions on a particular layer within Map Settings.

Menu items have the following settings:

• Title: Change the name of the menu item as it will appear in the Result Details, Results List and Results Table panels.

• Description: Type a description of what this menu item does. If you don't want a description of the menu item, leave it blank.

• Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.

• Command: Type the name of the command to run when a user clicks the menu item. When you begin typing, known commands are listed for you to select and implement.

To add a menu item:

1. In the Configure Components panel, select Result Details.

2. In the Result Details panel, click +Add Menu Item.

3. In the Menu Item panel, set the following: 

   • Title: Type a title for this menu item as it will appear in the Result Details, Results List and Results Table panels. For example, Zoom to and Pulse Features.

   • Description: Type an explanation of what this menu item will do when you click it. For example, Zooms to features and temporarily highlights them.

   • Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. You do not need to have an icon, you can just have words to represent the menu item. To remove the icon, click Clear Icon.

   • Command: Type or select the command to run when a user clicks the menu item. A command is an action the app should perform.

     An example command is already in the Command box. Delete the example command and replace it with your own command. The list of available commands depends on the context of the menu.

     Some commands have additional settings you can configure.

     To turn your command into a custom command, click Customize. The code for the command appears in a code box below.

     To run multiple commands, in the Command box, select Define Custom Command and, in the code box that appears below, type a sequence of commands in JSON format. While editing the custom command in the code box, press CTRL+Space to access suggestions of all possible commands.

     For example, the following custom command zooms to features in the results and temporarily highlights them.

     [
       "map.zoom-to-features",
       "highlights.pulse"
     ]

     The above example demonstrates how to pass the current context - the features in the results - as an argument into the map.zoom-to-features operation. The returned value of map.zoom-to-features, which is the same set of features, is then automatically passed into the next command, highlights.pulse. If you want to instead ignore the current context and supply your own argument to a command, see the example provided in Toolbar Settings.

To edit a menu item:

1. In the Configure Components panel, select Result Details.

2. In the Result Details panel, click the name of the menu item.

3. Change the menu item settings you want.

To reorder a menu item:

1. In the Configure Components panel, select Result Details.

2. In the Result Details panel, click Edit Items.

3. Drag the menu item up or down to the position you want.

4. Click Done.

To delete a menu item:

1. In the Configure Components panel, select Result Details.

2. In the Result Details panel, click Edit Items.

3. Click the Delete icon .

4. Click Done.

Results List Settings

The Results List settings contain a list of feature action menu items that are common to the Result Details and Results Table settings. Adding, editing or removing a menu item in one place affects the others.

Feature Actions: 

Feature actions set at this level are available for all features, unlike setting feature actions on a particular layer within Map Settings.

Menu items have the following settings:

• Title: Change the name of the menu item as it will appear in the Result Details, Results List and Results Table panels.

• Description: Type a description of what this menu item does. If you don't want a description of the menu item, leave it blank.

• Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.

• Command: Type the name of the command to run when a user clicks the menu item. When you begin typing, known commands are listed for you to select and implement.

To add a menu item:

1. In the Configure Components panel, select Results List.

2. In the Results panel, click +Add Menu Item.

3. In the Menu Item panel, set the following: 

   • Title: Type a title for this menu item as it will appear in the Result Details, Results List and Results Table panels. For example, Zoom to and Pulse Features.

   • Description: Type an explanation of what this menu item will do when you click it. For example, Zooms to features and temporarily highlights them.

   • Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. You do not need to have an icon, you can just have words to represent the menu item. To remove the icon, click Clear Icon.

   • Command: Type or select the command to run when a user clicks the menu item. A command is an action the app should perform.

     An example command is already in the Command box. Delete the example command and replace it with your own command. The list of available commands depends on the context of the menu.

     Some commands have additional settings you can configure.

     To turn your command into a custom command, click Customize. The code for the command appears in a code box below.

     To run multiple commands, in the Command box, select Define Custom Command and, in the code box that appears below, type a sequence of commands in JSON format. While editing the custom command in the code box, press CTRL+Space to access suggestions of all possible commands.

     For example, the following custom command zooms to features in the results and temporarily highlights them.

     [
       "map.zoom-to-features",
       "highlights.pulse"
     ]

     The above example demonstrates how to pass the current context - the features in the results - as an argument into the map.zoom-to-features operation. The returned value of map.zoom-to-features, which is the same set of features, is then automatically passed into the next command, highlights.pulse. If you want to instead ignore the current context and supply your own argument to a command, see the example provided in Toolbar Settings.

To edit a menu item:

1. In the Configure Components panel, select Results List.

2. In the Results panel, click the name of the menu item.

3. Change the menu item settings you want.

To reorder a menu item:

1. In the Configure Components panel, select Results List.

2. In the Results panel, click Edit Items.

3. Drag the menu item up or down to the position you want.

4. Click Done.

To delete a menu item:

1. In the Configure Components panel, select Results List.

2. In the Results panel, click Edit Items.

3. Click the Delete icon .

4. Click Done.

Results Table Settings

The Results Table settings contain a list of feature action menu items that are common to the Result Details and Results List settings. Adding, editing or removing a menu item in one place affects the others.

Feature Actions: 

Feature actions set at this level are available for all features, unlike setting feature actions on a particular layer within Map Settings.

Menu items have the following settings:

• Title: Change the name of the menu item as it will appear in the Result Details, Results List and Results Table panels.

• Description: Type a description of what this menu item does. If you don't want a description of the menu item, leave it blank.

• Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.

• Command: Type the name of the command to run when a user clicks the menu item. When you begin typing, known commands are listed for you to select and implement.

To add a menu item:

1. In the Configure Components panel, select Results Table.

2. In the Results panel, click +Add Menu Item.

3. In the Menu Item panel, set the following: 

   • Title: Type a title for this menu item as it will appear in the Result Details, Results List and Results Table panels. For example, Zoom to and Pulse Features.

   • Description: Type an explanation of what this menu item will do when you click it. For example, Zooms to features and temporarily highlights them.

   • Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. You do not need to have an icon, you can just have words to represent the menu item. To remove the icon, click Clear Icon.

   • Command: Type or select the command to run when a user clicks the menu item. A command is an action the app should perform.

     An example command is already in the Command box. Delete the example command and replace it with your own command. The list of available commands depends on the context of the menu.

     Some commands have additional settings you can configure.

     To turn your command into a custom command, click Customize. The code for the command appears in a code box below.

     To run multiple commands, in the Command box, select Define Custom Command and, in the code box that appears below, type a sequence of commands in JSON format. While editing the custom command in the code box, press CTRL+Space to access suggestions of all possible commands.

     For example, the following custom command zooms to features in the results and temporarily highlights them.

     [
       "map.zoom-to-features",
       "highlights.pulse"
     ]

     The above example demonstrates how to pass the current context - the features in the results - as an argument into the map.zoom-to-features operation. The returned value of map.zoom-to-features, which is the same set of features, is then automatically passed into the next command, highlights.pulse. If you want to instead ignore the current context and supply your own argument to a command, see the example provided in Toolbar Settings.

To edit a menu item:

1. In the Configure Components panel, select Results Table.

2. In the Results panel, click the name of the menu item.

3. Change the menu item settings you want.

To reorder a menu item:

1. In the Configure Components panel, select Results Table.

2. In the Results panel, click Edit Items.

3. Drag the menu item up or down to the position you want.

4. Click Done.

To delete a menu item:

1. In the Configure Components panel, select Results Table.

2. In the Results panel, click Edit Items.

3. Click the Delete icon .

4. Click Done.

Scale Bar Settings

You can configure the settings that control the style and units of measurement used to display the Scale Bar. The scale bar is a line that indicates the size of features and distances on a map. You can represent the scale bar in different units of measurement, as a simple line, or a ruler broken into increments of the units.

Select from the following options: 

• Style: Select the style of the line to display the scale bar. You can select either Line or a Ruler. The default is Line.

  

  Line scale bar (left); Ruler scale bar (right)

• Show Dual Units: Whether to display both Metric and Imperial units. This setting is only available when the scale bar's Style is set to Line.

  

  Line scale bar with dual units

Search Settings

Set the following options for searches in your app:

• Maximum Results: Type in the maximum number of search results to display on a single page. The default is set to 100.

• Maximum Search Suggestions: Type in the maximum number of search suggestions to offer a user. The default is 6.

Text Settings

Controls the content of the Home panel.

• Text: Type the content you want to appear on the Home panel. You can include rich content, as this setting supports the original Markdown syntax.

  You can include an image by typing something similar to the following: 

Toolbar Settings

You can change any item on the Toolbar menu, add custom items to the menu or delete those you do not want.

Under each menu item, you can change the following: 

• Title: Type in a title for this menu item. For example, change Line Identify to Identify Features using a Line.

• Description: Change the description of what this menu item does. You can simply delete the current description and do without one, or change the existing description.

• Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.

• Command: You can change the code to customize the command.

• Hide when Disabled: Whether to hide the menu item when the command cannot be executed.

• Can be Toggled: Whether the menu item can be toggled between two states. If the menu item can be toggled, you can specify the behavior of the menu item for both states as well as whether the menu item is toggled by default.

To add a menu item:

1. In the Configure Components panel, select Toolbar.

2. In the Menu panel, click +Add Menu Item.

   You can add a divider to the menu, which helps to organize related menu items. To add a menu divider, click beside +Add Menu Item and click Add Divider.

   You can add a submenu to the menu, which helps to further organize related menu items. To add a submenu, click beside +Add Menu Item and click Add Submenu. The process of adding menu items to a submenu is the same except you cannot add a submenu to a submenu.

3. In the Menu Item panel, set the following: 

   • Title: Type a title for this menu item as it will appear in the toolbar. For example, Switch to Results Table.

   • Description: Type an explanation of what this menu item will do when you click it. For example, Switches to viewing search results in a table.

   • Icon: To select an icon to represent this menu item, click Select Icon, click the desired icon and click OK. You do not need to have an icon, you can just have words to represent the menu item. To remove the icon, click Clear Icon.

   • Command: Type or select the command to run when a user clicks the menu item. A command is an action the app should perform.

     An example command is already in the Command box. Delete the example command and replace it with your own command. The list of available commands depends on the context of the menu.

     Some commands have additional settings you can configure.

     To turn your command into a custom command, click Customize. The code for the command appears in a code box below.

     To run multiple commands, in the Command box, select Define Custom Command and, in the code box that appears below, type a sequence of commands in JSON format. While editing the custom command in the code box, press CTRL+Space to access suggestions of all possible commands.

     For example, the following custom command switches from the Results List to the Results Table.

     [
       {
         "name": "ui.deactivate",
         "arguments": "results-list"
       },
       {
         "name": "ui.activate",
         "arguments": "results-table"
       }
     ]

To edit a menu item:

1. In the Configure Components panel, select Toolbar.

2. In the Menu panel, click the name of the menu item.

3. Change the menu item settings you want.

To reorder a menu item:

1. In the Configure Components panel, select Toolbar.

2. In the Menu panel, click Edit Items.

3. Drag the menu item up or down to the position you want.

4. Click Done.

To delete a menu item:

1. In the Configure Components panel, select Toolbar.

2. In the Menu panel, click Edit Items.

3. Click the Delete icon .

4. Click Done.