topic Re: Web AppBuilder: Add Tab Container to Splash Widget in ArcGIS Web AppBuilder Questions

Web AppBuilder: Add Tab Container to Splash Widget

WilliamMiller3 — Wed, 27 Apr 2016 19:11:08 GMT

Using Web AppBuilder for ArcGIS, how would I go about modifying the Splash widget to add a tab container with several content panes? I tried including script in the JSON file, but found script will not run from a JSON file.

I found the example below on dojo and created an html template and javascript file, but I don't know how to include them in the main Splash widget.

I am new to Javascript and Dojo, so any help would be much appreciated. Thank you.

==========

tabs.html

==========

tabs.js (the content is just what was in the example on dojo)

require(["dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function (TabContainer, ContentPane) {
    var tc = new TabContainer({
        style: "height: 100%; width: 100%;"
    }, "tc1-prog");

    var cp1 = new ContentPane({
        title: "Food",
        content: "We offer amazing food"
    });
    tc.addChild(cp1);

    var cp2 = new ContentPane({
        title: "Drinks",
        content: "We are known for our drinks."
    });
    tc.addChild(cp2);

tc.startup();
});

Re: Web AppBuilder: Add Tab Container to Splash Widget

RobertScheitlin__GISP — Wed, 27 Apr 2016 19:27:08 GMT

William,

This is going to be much more difficult then you think. You can ad the html portion to the Widgets.html. then add the requires to the Widget.js and then the other code dealing with the contentPanes to the _resizeContentImg function. The hard part will be how to not loose all the functionality that the splash widget has now. as you will have to manage which tabs content pane will get the content that is normally in the splash widget.

Re: Web AppBuilder: Add Tab Container to Splash Widget

WilliamMiller3 — Wed, 18 May 2016 12:51:47 GMT

Hi Robert,

Sorry I didn't respond sooner. For some reason I was unable to reply or comment on GeoNet until this week.

I added some html to Splash/Widget.html (see below), but I'm not sure about the javascript.

Splash/Widget.html:
====================================================================
<div>
    <div class="overlay" data-dojo-attach-point="overlayNode"></div>
    <div class="envelope" data-dojo-attach-point="envelopeNode">
        <div class="splash-container" data-dojo-attach-point="splashContainerNode">
            <div class="custom-content">
                <div data-dojo-attach-point="customContentNode" id="tc1-prog"></div>
            </div>
            <div class="footer" data-dojo-attach-point="footerNode">
                <div data-dojo-attach-point="confirmCheck"></div>
                <div class="jimu-btn jimu-float-trailing" data-dojo-attach-point="okNode" data-dojo-attach-event="onclick:onOkClick">${nls.ok}</div>
            </div>
        </div>
    </div>
</div>
====================================================================

I modified the Splash/config.json and configs/Splash/config_Splash.json files so I have splashContent, splashContent2, splashContent3, splashContent4 and splashContent5, one for each of the five tabs.

Here is what I have for the Splash/Widget.js, specifically the class inclusions and postCreate function (modifications bolded):
====================================================================
define([
    'dojo/_base/declare',
    'jimu/BaseWidget',
    'dijit/_WidgetsInTemplateMixin',
    'dijit/layout/TabContainer',
    'dijit/layout/ContentPane',
    'dojo/_base/lang',
    'dojo/_base/html',
    'dojo/on',
    'dojo/query',
    'dojo/io-query',
    'dojo/cookie',
    'jimu/dijit/CheckBox',
    'jimu/tokenUtils',
    'jimu/utils',
    'dojo/domReady!'
],
function (declare, BaseWidget, _WidgetsInTemplateMixin, TabContainer, ContentPane, lang, html, on, query, ioquery, cookie, CheckBox, TokenUtils, utils) {
      var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
          baseClass: 'jimu-widget-splash',

          _hasContent: null,
          _hasContent2: null,
          _hasContent3: null,
          _hasContent4: null,
          _hasContent5: null,
          _requireConfirm: null,
          _isClosed: false,

          postCreate: function () {
              this.inherited(arguments);
              this._hasContent = this.config.splash && this.config.splash.splashContent;
              this._hasContent2 = this.config.splash && this.config.splash.splashContent2;
              this._hasContent3 = this.config.splash && this.config.splash.splashContent3;
              this._hasContent4 = this.config.splash && this.config.splash.splashContent4;
              this._hasContent5 = this.config.splash && this.config.splash.splashContent5;
              this._requireConfirm = this.config.splash && this.config.splash.requireConfirm;
              this._showOption = this.config.splash && this.config.splash.showOption;
              this._confirmEverytime = this.config.splash && this.config.splash.confirmEverytime;

              tc = new TabContainer({
                  style: "height: 600px; width:600px;"
              }, "tc1-prog");

var cp1 = new ContentPane({

title: "Disclaimer",

content: this._hasContent

});

tc.addChild(cp1);

              var cp2 = new ContentPane({
                  title: "Contact",
                  content: this._hasContent2
              });
              tc.addChild(cp2);

              var cp3 = new ContentPane({
                  title: "Welcome",
                  content: this._hasContent3
              });
              tc.addChild(cp3);

              var cp4 = new ContentPane({
                  title: "About",
                  content: this._hasContent4
              });
              tc.addChild(cp4);

              var cp5 = new ContentPane({
                  title: "Help",
                  content: this._hasContent5
              });
              tc.addChild(cp5);

tc.startup();

this.customContentNode.innerHTML = tc;

              if (!this._requireConfirm && !this._showOption) {
                  html.setStyle(this.confirmCheck, 'display', 'none');
                  html.addClass(this.okNode, 'enable-btn');
              } else {
                  var hint = "";
                  if (this._requireConfirm) {
                      hint = this.config.splash.confirmText;
                      html.addClass(this.okNode, 'disable-btn');
                  } else {
                      hint = this.nls.notShowAgain;
                      html.addClass(this.okNode, 'enable-btn');
                  }
                  this.confirmCheck = new CheckBox({
                      label: utils.stripHTML(hint),
                      checked: false
                  }, this.confirmCheck);
                  this.own(on(this.confirmCheck.domNode, 'click', lang.hitch(this, this.onCheckBoxClick)));
                  html.setAttr(this.confirmCheck.domNode, 'title', utils.stripHTML(hint));
                  this.confirmCheck.startup();
              }

              if (this.config && this.config.splash && this.config.splash.backgroundColor) {
                  html.setStyle(
            this.splashContainerNode,
            'backgroundColor',
            this.config.splash.backgroundColor
          );
              }

this.urlParams = this.getUrlParams();
},

====================================================================

I wasn't sure what to do with the _resizeContentImg function that you mentioned.

I contacted ESRI Support Services about modifying the Splash widget to include tabs and was directed to the following thread: https://community.esri.com/thread/122299.

I've been going through the tutorials on dojotoolkit.org and have looked at various ESRI resources, but I haven't found a textbook like guide to learning dojo. Do you have any recommendations?

Thanks in advance for any assistance you can provide.

William

Re: Web AppBuilder: Add Tab Container to Splash Widget

RobertScheitlin__GISP — Thu, 19 May 2016 20:19:19 GMT

William,

There are a couple of things I see wrong in your code right off.

var cp5 = new ContentPane({

title: "Help",

content: this._hasContent5

});

"this._hasContent5" is a boolean I think you are wanting

this.config.splash.splashContent5

You would not want this line this.customContentNode.innerHTML = tc; or 'dojo/domReady!'

The big thing though is that even with those fixes you will continue to struggle with using the Splash widget for this as many things positional and height and width are calculated in the code.

Sorry to be the bearer of bad news.

Re: Web AppBuilder: Add Tab Container to Splash Widget

WilliamMiller4 — Thu, 19 May 2016 20:21:15 GMT

Hi Robert,

It's William, from my company account. (I set up the other account before this one was created for me.)

What if I use something similar to this dojo example to implement tabs in the splash widget:

https://dojotoolkit.org/documentation/tutorials/1.10/recipes/custom_widget/

That is create a separate json file with an array and have each item contain information for a different content pane,

create a javascript widget for the content pane (not sure if this is right),

create an html template for the content pane,

use the script below to create each content pane from the json and attach it to the main Widget.html.

I don't know if this would solve the problem with the splashContent in the config.json or not.

Thanks again for any assistance you can give.

William

Re: Web AppBuilder: Add Tab Container to Splash Widget

RobertScheitlin__GISP — Thu, 19 May 2016 21:11:56 GMT

William,

Bottom line is I am unsure. If it were me I would ditch the splash widget altogether and start a new custom widget like Larry did.

Re: Web AppBuilder: Add Tab Container to Splash Widget

NatashaManzuiga — Tue, 22 Nov 2016 10:59:50 GMT

Hi William, did you make it work?

I need something like this too..

Thanks!!

Naty

Re: Web AppBuilder: Add Tab Container to Splash Widget

WilliamMiller4 — Tue, 22 Nov 2016 14:06:32 GMT

Hi Natasha,

I didn't get it to work the way I had hoped, but I did get something fairly comparable. I modified the foldable theme by adding a modal panel and a new default layout (using the modal panel), adding a custom widget with tabs, and calling the widget to open in a modal panel after the splash screen's "OK" button is click. If you are interested, let me know what version of Web AppBuilder (WAB) developer's edition you are using, and I can attach the relevant files, along with some instructions.

William

Re: Web AppBuilder: Add Tab Container to Splash Widget

NatashaManzuiga — Tue, 22 Nov 2016 14:24:10 GMT

Hi William, I am using the 2.1 version...

Yes, I am interested

Thanks in advance!

Naty

Re: Web AppBuilder: Add Tab Container to Splash Widget

WilliamMiller4 — Tue, 22 Nov 2016 19:13:47 GMT

Hi Natasha,

Attached is a zip file with the following items: eFoldableTheme, Welcome and Widget.js.

Here is what to do once the zip file is downloaded and its files extracted:
(Note: ... represents the location of WebAppBuilderForArcGIS on your PC)

Add the eFoldableTheme folder to ...\client\stemapp\themes
Add the Welcome folder to ...\client\stemapp\widgets
In the Welcome folder, go to the nls\strings.js file and add your own tab labels and contents. See notes in the code for further instructions.
Once you have added your content, start Web AppBuilder and create a new app
Select the eFoldableTheme and save the app
Go to ...\server\apps\#ofTheAppYourJustCreated\widgets\Splash. Replace the existing Widget.js with the Widget.js from the zip file.
To change the icon of the Welcome widget, go to Welcome\images and replace the icon.png with a different .png image and name it icon

With this solution, put any disclaimer in the Splash widget. Once the user clicks "OK", the Welcome widget opens. After "closing" the Welcome widget, it is still available in the header and can be opened later in the life of the web page.

I hope this helps.

William

Note: The following files in the eFoldableTheme were modified from FoldableTheme:

FoldableTheme\images\icon.png
FoldableTheme\layouts\default\config.json
FoldableTheme\nls\string.js
FoldableTheme\common.css
FoldableTheme\manifest.json

ModalPanel and all its contents were added to eFoldableTheme\panels. (The files with the -Orig suffix are the result of completing the Create a New Panel sample code tutorial and are not needed.)

Re: Web AppBuilder: Add Tab Container to Splash Widget

NatashaManzuiga — Thu, 24 Nov 2016 13:23:10 GMT

William, it perfectly works...

But if I want to start my application with the Welcome Widget instead of the Splash Widget?

Thanksss!

Naty

Re: Web AppBuilder: Add Tab Container to Splash Widget

deleted-user-CQZbjNeBXm49 — Thu, 24 Nov 2016 15:03:09 GMT

William,

Lovely piece of work, will this widget only work with the Foldable Theme?

Baba

Re: Web AppBuilder: Add Tab Container to Splash Widget

WilliamMiller4 — Mon, 28 Nov 2016 16:34:29 GMT

Hi Natasha,

To open the Welcome widget in a modal panel, I added it to a group that uses the modal panel. Since the widget is in a group, I don't think it can be set to open on start. Sorry.

William

Re: Web AppBuilder: Add Tab Container to Splash Widget

WilliamMiller4 — Mon, 28 Nov 2016 16:39:49 GMT

Hi Babatope,

The widget should work in any theme. However, to have the widget open in a modal panel, the eFoldable theme needs to be used. You should be able to modify other themes and get the same result. Here is a link on how to create/modify a theme. See the note at the end of my post above for a list of files I modified in the Foldable theme in order to open the widget in a modal panel.

William

Re: Web AppBuilder: Add Tab Container to Splash Widget

deleted-user-CQZbjNeBXm49 — Tue, 29 Nov 2016 08:30:29 GMT

Thanks William,

Very Helpful....

Re: Web AppBuilder: Add Tab Container to Splash Widget

NatashaManzuiga — Mon, 05 Dec 2016 17:22:53 GMT

Hi William, if I want to open the widget with a specified Active Tab ?

Thanks,

Naty

Re: Web AppBuilder: Add Tab Container to Splash Widget

WilliamMiller4 — Sat, 11 Dec 2021 20:16:34 GMT

Hi Natasha,

In the Welcome's Widget.js file, in each of the tab panel sections, you can delete the line selected: true (along with the comma on the preceding line) for all the tab panels but the one you want to be the active tab. In the example below, the second tab should display upon opening.

// Tab Panel 1
var cp1 = new ContentPane({
title: this.nls.tab1Title,
content: this.nls.tab1Text//, - DELETE OR COMMENT OUT THE COMMA
//selected: true - DELETE OR COMMENT OUT THIS LINE
});
tc.addChild(cp1);

// Tab Panel 2
var cp2 = new ContentPane({
title: this.nls.tab2Title,
content: this.nls.tab2Text,
selected: true
});
tc.addChild(cp2);

// Tab Panel 3
var cp3 = new ContentPane({
title: this.nls.tab3Title,
content: this.nls.tab3Text//, - DELETE OR COMMENT OUT THE COMMA
//selected: true - DELETE OR COMMENT OUT THIS LINE
});
tc.addChild(cp3);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

William

Re: Web AppBuilder: Add Tab Container to Splash Widget

RebeccaStrauch__GISP — Wed, 07 Dec 2016 17:22:35 GMT

William, I added the comment where you have the .zip download to the /blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list‌ ...but it is so buried in this thread. If you get a chance, can you post as a new blog or doc (and put a link here). It will be easier for others to find (and I'll link to that instead). Just a request. Thanks

Re: Web AppBuilder: Add Tab Container to Splash Widget

WilliamMiller4 — Thu, 08 Dec 2016 16:44:34 GMT

https://community.esri.com/docs/DOC-9122-tab-widget-to-follow-splash-screen-web-appbuilder-21

Re: Web AppBuilder: Add Tab Container to Splash Widget

pavansumanth — Tue, 27 Dec 2016 06:02:22 GMT

Hi William

I want to add t multiple widgets to each of the tab in the panel developed by you. How to achieve this?