Web AppBuilder: Add Tab Container to Splash Widget

[WilliamMiller3]

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

<div data-dojo-attach-point="tabsNode">
    <div id="tc1-prog"></div>
</div>

==========

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();
});

[NatashaManzuiga]

William, it perfectly works...

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

Thanksss!

Naty

[WilliamMiller4]

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

[NatashaManzuiga]

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

Thanks,

Naty

[WilliamMiller4]

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

[deleted-user-CQZbjNeBXm49]

William,

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

Baba

[WilliamMiller4]

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

[deleted-user-CQZbjNeBXm49]

Thanks William,

Very Helpful....

[RebeccaStrauch__GISP]

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

[WilliamMiller4]

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

[pavansumanth]

Hi William

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