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 to 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 own button design by choosing colors and fonts for regular and hover states in the advanced settings.

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

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://). 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.

    Note:

    You can upload the following image formats: PNG, GIF, JPG, JPEG, and BMP.

• Advanced—Override the font and colors inherited from the app’s theme to style the button’s two states: Regular 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.
  • 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.