Web AppBuilder: Add Tab Container to Splash Widget

10598
25
04-27-2016 12:11 PM
WilliamMiller3
New Contributor

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

25 Replies
NatashaManzuiga
Occasional Contributor

William, it perfectly works...

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

Thanksss!

Naty

0 Kudos
WilliamMiller4
Occasional Contributor II

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
Occasional Contributor

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

Thanks,

Naty

0 Kudos
WilliamMiller4
Occasional Contributor II

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
Occasional Contributor III

William,

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

Baba

0 Kudos
WilliamMiller4
Occasional Contributor II

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
Occasional Contributor III

Thanks William,

Very Helpful....

0 Kudos
RebeccaStrauch__GISP
MVP Emeritus

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

0 Kudos
pavansumanth
New Contributor

Hi William

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

0 Kudos