Button widget

The Button widget provides links to open pages, windows, and section views in your app, scroll to a particular block or to the top of the page, or go to a web address. You can use a data source to provide dynamic buttons for which the text or link changes based on a feature selection (such as in a map or list). You can choose from different styles, sizes, and colors to design buttons.

Examples

Use this widget to support app design requirements such as the following:

• You have a feature layer that contains URLs to websites, and you want to use a button as a link to open the website associated with a selected feature.
• Your app has multiple pages and a menu on the home page to access each page. You also have several sections that you want users to get to quickly. You can create buttons that return a user to the home page or that advance to relevant sections or pages from anywhere in the app.

Usage notes

When you add a Button widget to the page, the Quick style window appears next to the widget where you can select from preset designs that coordinate with your app’s theme. (To access this window again later, click the Quick style button on the widget’s toolbar.) You can also configure your button design by choosing colors and fonts for default and hover states in the advanced settings.

If you connect the button to a data source, such as a feature layer, you can use the feature data to populate the button’s text or URL of the link.

Tip:

Click the Pin button on the Button widget toolbar to keep the widget visible on scrolling pages.

Settings

The Button widget includes the following settings:

• Connect to data—Optionally, connect the button to data so you can set a dynamic link, such as using a URL from feature attributes.
  • Select data—Select feature layers as a data source.
• Set link—Add a link on the button to open pages, windows, and section views in your app, scroll to a particular block or to the top of the page, or go to a web address. If you link to a web address, type a URL (that begins with https://). In addition to a web address, you can use the URL option to set a link to go to an email address, phone number, and more. If you connect the button to a data source, choose a dynamic source for the URL using Attribute or Expression. You can choose whether the link opens in the same window as the app, the top window, or a new window.
  • Tooltip—Provide hover text to describe the resource the button opens.
  • Text—Provide the text to appear on the button. If you connect the button to data, you can use dynamic text based on the data source by choosing Attribute, Statistic, or Expression.
  • Icon—Add an icon to the button and choose to position it on the left or right of the button text. You can choose icons from the General and Arrows galleries, or add your own icon from a file. Click the Delete button to remove unused uploaded icons.

    Note:

    You can upload the following image formats: PNG, GIF, JPG, JPEG, and BMP. To preserve optimal performance, there is a 10MB size limit for each upload.

• Advanced—Override the font and colors inherited from the app’s theme to style the button’s two states: Default is the state of the button without user interaction and Hover is the button state initiated by the user when they point to or click the button.
  • Text—Change the font size (in pixels) and color, and style the button text using bold, italic, strikethrough, and underline formatting.
  • Background—Choose a fill color or image to set the button’s background. If you choose an image, you can position it in the button using Fit, Fill, Center, Tile, or Stretch. If you choose Fit, the button displays the background fill color around the image.
  • Border—Choose a border color, style (such as dashed or dotted), and width in pixels. You can style all sides of the border at the same time or style each of them separately.
  • Corner—Change the radius size (by pixels or percent) to shape the button corners. Lock the settings to synchronize the radius of all four corners.
  • Shadow—Add a shadow effect around the button using the following settings:
    • Offset X—Set the horizontal distance of the shadow. A negative value places the shadow to the left of the button and a positive value places it to the right.
    • Offset Y—Set the vertical distance of the shadow. A negative value places the shadow above the button and a positive value places it below.
    • Blur radius—Apply a blur effect to the shadow.
    • Spread radius—Adjust the size of the shadow.
    • Color—Select a shadow color.

Interaction options

You can use a Button widget to open and close other widgets.

To do this, click Add a trigger on the Action tab of the Button widget's settings. Select the Button click trigger, then select a target widget and action. Currently, you can connect a Button widget to the following other widgets:

Target	Action
Sidebar widget	Toggle sidebar—Open or close the sidebar.
Widget Controller widget	Open widget—Open widgets in the controller.