how do you display a splash widget?

1591
6
Jump to solution
08-24-2018 11:18 AM
JaredPilbeam2
MVP Regular Contributor

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 

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
JaredPilbeam2
MVP Regular Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
MVP Regular Contributor

Good enough, thanks!

0 Kudos
KenBuja
MVP Honored Contributor

Nice, Robert Scheitlin, GISP

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Ken,

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

0 Kudos