how do you display a splash widget?

JaredPilbeam2 — Fri, 24 Aug 2018 18:18:35 GMT

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

Re: how do you display a splash widget?

RobertScheitlin__GISP — Fri, 24 Aug 2018 18:27:11 GMT

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.

Re: how do you display a splash widget?

JaredPilbeam2 — Fri, 24 Aug 2018 18:53:25 GMT

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?

Re: how do you display a splash widget?

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:02:06 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: how do you display a splash widget?

JaredPilbeam2 — Fri, 24 Aug 2018 19:43:51 GMT

Good enough, thanks!

Re: how do you display a splash widget?

KenBuja — Fri, 24 Aug 2018 20:07:50 GMT

Nice, Robert Scheitlin, GISP‌

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

Re: how do you display a splash widget?

RobertScheitlin__GISP — Fri, 24 Aug 2018 20:09:34 GMT

Ken,

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

topic Re: how do you display a splash widget? in ArcGIS JavaScript Maps SDK Questions

how do you display a splash widget?

Re: how do you display a splash widget?

Re: how do you display a splash widget?

Re: how do you display a splash widget?

Re: how do you display a splash widget?

Re: how do you display a splash widget?

Re: how do you display a splash widget?