how do you display a splash widget?

JaredPilbeam2 · ‎08-24-2018

There's this, but they don't tell you where it goes: Splash—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

And there's nothing on ArcGIS API for JavaScript 4.8 sample code page: Samples Overview | ArcGIS API for JavaScript 4.8

RobertScheitlin__GISP · ‎08-24-2018

Jared,

Here is a sample of a Splash Screen that goes away after a few seconds:

Code taken from: How do you make a JavaScript splash page - JavaScript - The SitePoint Forums

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Load a basic WebMap - 4.8</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .overlay {
      opacity:0;
      position:fixed;
      top:-999em;
      left:-999em;
      width:100%;
      height:100%;
      display:table;
      background:rgba(0,0,0,0.8);
      -webkit-animation: splash 10s forwards; 
      animation: splash 10s forwards;
    }
    .overlay-inner {
      display:table-cell;
      vertical-align:middle;
      text-align:center;
    }
    .message {
      border:10px solid red;
      border-radius:10px;
      background:#fff;
      display:inline-block;
      vertical-align:middle;
      width:50%;
      text-align:left;
      padding:10px;
    }
    @-webkit-keyframes splash {
      0%  {opacity: 0;top:0;left:0}
      20% {opacity:1;top:0;left:0}
      60% {opacity:1;top:0;left:0}
      99% {top:0;left:0}
      100% {opacity:0;top:-999em;left:-999em}
    }
    @-moz-keyframes splash {
      0%  {opacity: 0;top:0;left:0}
      20% {opacity:1;top:0;left:0}
      60% {opacity:1;top:0;left:0}
      99% {top:0;left:0}
      100% {opacity:0;top:-999em;left:-999em}
    }
    @-ms-keyframes splash {
      0%   {opacity: 0;top:0;left:0}
         20% {opacity:1;top:0;left:0}
         60% {opacity:1;top:0;left:0}
         99% {top:0;left:0}
         100% {opacity:0;top:-999em;left:-999em}
    }  
    @keyframes splash {
      0%  {opacity: 0;top:0;left:0}
      20% {opacity:1;top:0;left:0}
      60% {opacity:1;top:0;left:0}
      99% {top:0;left:0}
      100% {opacity:0;top:-999em;left:-999em}
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

  <script src="https://js.arcgis.com/4.8/"></script>

  <script>
    require([
      "esri/views/MapView",
      "esri/WebMap",
      "dojo/domReady!"
    ], function(
      MapView, WebMap
    ) {

      /************************************************************
       * Creates a new WebMap instance. A WebMap must reference
       * a PortalItem ID that represents a WebMap saved to
       * arcgis.com or an on-premise portal.
       *
       * To load a WebMap from an on-premise portal, set the portal
       * url with esriConfig.portalUrl.
       ************************************************************/
      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "f2e9b762544945f390ca4ac3671cfa72"
        }
      });

      /************************************************************
       * Set the WebMap instance to the map property in a MapView.
       ************************************************************/
      var view = new MapView({
        map: webmap,
        container: "viewDiv"
      });
    });
  </script>
</head>

<body class="claro">
  <div id="viewDiv"></div>
  <div class="overlay">
    <div class="overlay-inner">
      <div class="message">
        <p>Lorem ipsum dolor sit amet consecetueur adispicing elit amet. Lorem ipsum dolor sit amet consecetueur <a href="#">adispicing elit</a> amet.Lorem ipsum dolor sit amet consecetueur adispicing elit amet.Lorem ipsum dolor sit amet consecetueur adispicing elit amet. </p>
      </div>
    </div>
</div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎08-24-2018

Jared,

You have a link to the Web App Builder Splash widget there and then you start talking about the 4.x JS API. These are two very separate things. The Splash widget is for use in a WAB application NOT a custom JS API app.

JaredPilbeam2 · ‎08-24-2018

Robert,

Sorry, I should have mentioned I'm building a custom app. Ok, so the code in WAB page won't work. I'm looking for a way to display a small paragraph about the app when the user first opens the page. I thought a splash screen could work nicely.

I also tried a window alert, but I don't like the look: Tryit Editor v3.5

In this question on Geonet someone asks a similar question, but the answers refer to outside sources:

https://community.esri.com/thread/202969-splash-screen-with-the-arcgis-js-api-4x

Is there not a way using ArcGIS for JS?

RobertScheitlin__GISP · ‎08-24-2018

Jared,

Here is a sample of a Splash Screen that goes away after a few seconds:

Code taken from: How do you make a JavaScript splash page - JavaScript - The SitePoint Forums

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Load a basic WebMap - 4.8</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .overlay {
      opacity:0;
      position:fixed;
      top:-999em;
      left:-999em;
      width:100%;
      height:100%;
      display:table;
      background:rgba(0,0,0,0.8);
      -webkit-animation: splash 10s forwards; 
      animation: splash 10s forwards;
    }
    .overlay-inner {
      display:table-cell;
      vertical-align:middle;
      text-align:center;
    }
    .message {
      border:10px solid red;
      border-radius:10px;
      background:#fff;
      display:inline-block;
      vertical-align:middle;
      width:50%;
      text-align:left;
      padding:10px;
    }
    @-webkit-keyframes splash {
      0%  {opacity: 0;top:0;left:0}
      20% {opacity:1;top:0;left:0}
      60% {opacity:1;top:0;left:0}
      99% {top:0;left:0}
      100% {opacity:0;top:-999em;left:-999em}
    }
    @-moz-keyframes splash {
      0%  {opacity: 0;top:0;left:0}
      20% {opacity:1;top:0;left:0}
      60% {opacity:1;top:0;left:0}
      99% {top:0;left:0}
      100% {opacity:0;top:-999em;left:-999em}
    }
    @-ms-keyframes splash {
      0%   {opacity: 0;top:0;left:0}
         20% {opacity:1;top:0;left:0}
         60% {opacity:1;top:0;left:0}
         99% {top:0;left:0}
         100% {opacity:0;top:-999em;left:-999em}
    }  
    @keyframes splash {
      0%  {opacity: 0;top:0;left:0}
      20% {opacity:1;top:0;left:0}
      60% {opacity:1;top:0;left:0}
      99% {top:0;left:0}
      100% {opacity:0;top:-999em;left:-999em}
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

  <script src="https://js.arcgis.com/4.8/"></script>

  <script>
    require([
      "esri/views/MapView",
      "esri/WebMap",
      "dojo/domReady!"
    ], function(
      MapView, WebMap
    ) {

      /************************************************************
       * Creates a new WebMap instance. A WebMap must reference
       * a PortalItem ID that represents a WebMap saved to
       * arcgis.com or an on-premise portal.
       *
       * To load a WebMap from an on-premise portal, set the portal
       * url with esriConfig.portalUrl.
       ************************************************************/
      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "f2e9b762544945f390ca4ac3671cfa72"
        }
      });

      /************************************************************
       * Set the WebMap instance to the map property in a MapView.
       ************************************************************/
      var view = new MapView({
        map: webmap,
        container: "viewDiv"
      });
    });
  </script>
</head>

<body class="claro">
  <div id="viewDiv"></div>
  <div class="overlay">
    <div class="overlay-inner">
      <div class="message">
        <p>Lorem ipsum dolor sit amet consecetueur adispicing elit amet. Lorem ipsum dolor sit amet consecetueur <a href="#">adispicing elit</a> amet.Lorem ipsum dolor sit amet consecetueur adispicing elit amet.Lorem ipsum dolor sit amet consecetueur adispicing elit amet. </p>
      </div>
    </div>
</div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JaredPilbeam2 · ‎08-24-2018

Good enough, thanks!

KenBuja · ‎08-24-2018

Nice, Robert Scheitlin, GISP‌

One question...what's the Dialog argument on line 84?

RobertScheitlin__GISP · ‎08-24-2018

Ken,

Oh, that is just a leftover from when I was using dijit/Dialog.