Actions can either launch HTML pages in new browser tabs, or can show an HTML page as a popup window in the application.

To show an HTML page from an action

  1. Add a new task or action (see help page on execution tasks).
  2. In the Add execution task dialog, choose Launch URL.
  3. Click on the Script button to open the script editor. Add the appropriate script to launch the correct page (see below).

The script provided determines what page is launched, how it is launched, and what data is provided. See simple examples below.

Show a web page in a new browser tab

To launch a page, you must provide the URL and an HTTP method (POST or GET).

Note the display parameter is launch. This means launch the page in a new browser tab.

return {
  url: "//www.esri.com/sample.html",
  method: "get",
  display: "launch",
  query: null,
  form: null
};

Show a web page as a popup window in the application

The key difference here, is that the display parameter is set to show:

// Perform an HTTP GET to a web page and show the result in the App
return {
  url: "//www.esri.com/sample.html",
  method: "get",
  // "dismissible": true, // Flag to indicate if the dialog is modal, and script inside the dialog closes it.
  display: "show",
  query: null,
  form: null
};

Showing HTML as a popup window in the application

In this example, raw HTML is added to the application to show information:

Not all HTML tags are available. The HTML returned here will be run through a sanitizer to prevent dangerous content being added.

// In this example a URL is not provided. Instead content is used.
return {
    content: `<!-- Jumbotron for Report Header-->
    <div class="jumbotron report-jumbotron-bg-color">
      <div class="container pt-3">
        <h1 class="display-3 report-jumbotron-headline-color">Example Header</h1>
        <p class="report-jumbotron-text-color">
          Some byline
        </p>
      </div>
    </div>`,
    // "dismissible": true, // Flag to indicate if the dialog is modal, and script inside the dialog closes it.
    display: "show"  
  };