Create Modal Panel with Tab Container

1516
2
Jump to solution
08-10-2016 05:31 AM
WilliamMiller4
Occasional Contributor II

Since completing the Create a New Panel​ tutorial, I have been trying to add a tab container to a modified Demo widget that opens in a modal panel. I can get the content to appear, but it all displays at once and no tabs are visible. Below is an image of what currently  displays. (I highlighted the text with my mouse.) Also below are my code for Widget.html and Widget.js.

modalPanel.jpg

<div>

    <div class="modaltab-content" data-dojo-attach-point="customContentNode"></div>

</div>

define(['dojo/_base/declare',

    'jimu/BaseWidget',

    'dijit/_WidgetsInTemplateMixin',

    'dojo/_base/html',

    'dojo/query',

    'dojo/_base/array',

    'dojo/_base/sniff',

    'dijit/layout/TabContainer',

    'dijit/layout/ContentPane'

  ],

  function(declare, BaseWidget, _WidgetsInTemplateMixin, html, query, array, sniff, TabContainer, ContentPane) {

    return declare([BaseWidget, _WidgetsInTemplateMixin], {

      baseClass: 'jimu-widget-modaltab',

     

      postCreate: function() {

        this.inherited(arguments);

      },

      startup: function() {

        this.inherited(arguments);

       

        var htmlFragment = '';

       

        var tc = new TabContainer("tc");

       

        //First Tab panel

        htmlFragment = htmlFragment + '<div dojo-data-type=\"dijit/layout/ContentPane\" title=\"WELCOME\" selected=\"true\">';

        theContent = '';

        theContent = theContent + '<div><h1>WELCOME</h1><br />';

        theContent = theContent + '<p>Welcome to ...</p></div>';

       

        var cp1 = new ContentPane({

             title: "WELCOME",

             content: theContent,

             selected: true

        });

        tc.addChild(cp1);

       

        //Second Tab Panel

        theContent = '';

        theContent = theContent + '<div><h1>ABOUT</h1><br />';

        theContent = theContent + '<p>The County Auditor...</p></div>';

       

        var cp2 = new ContentPane({

             title: "ABOUT",

             content: theContent,

             selected: true

        });

        tc.addChild(cp2);

       

        //Third Tab Panel

        theContent = '';

        theContent = theContent + '<div><h1>CONTACT</h1><br />';

        theContent = theContent + '<p>Comments and questions...</p></div>';

       

        var cp3 = new ContentPane({

             title: "CONTACT",

             content: theContent,

             selected: true

        });

        tc.addChild(cp3);

       

        //Fourth Tab Panel

        theContent = '';

        theContent = theContent + '<div><h1>HELP</h1><br />';

        theContent = theContent + '<p>For help...</p></div>';

       

        var cp4 = new ContentPane({

             title: "HELP",

             content: theContent,

             selected: true

        });

        tc.addChild(cp4);

       

        //tc.startup();

       

        this.customContentNode.appendChild(tc.domNode);

      }

     

    });

  });

Attached is the modal panel.

Any suggestions on how to get the tabs working properly would be greatly appreciated.

William

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

William,

Here is the code working (at least n my end it is):

define(['dojo/_base/declare',

    'jimu/BaseWidget',

    'dijit/_WidgetsInTemplateMixin',

    'dojo/_base/html',

    'dojo/query',

    'dojo/_base/array',

    'dojo/_base/sniff',

    'dijit/layout/TabContainer',

    'dijit/layout/ContentPane'

  ],

  function(declare, BaseWidget, _WidgetsInTemplateMixin, html, query, array, sniff, TabContainer, ContentPane) {

    return declare([BaseWidget, _WidgetsInTemplateMixin], {

      baseClass: 'jimu-widget-modaltab',

      postCreate: function() {

        this.inherited(arguments);

      },

      startup: function() {

        this.inherited(arguments);

        var tc = new TabContainer({style: "height: 100%; width: 100%;"}, this.customContentNode);

        //First Tab panel

        var theContent = '';

        theContent = theContent + '<div><h1>WELCOME</h1><br />';

        theContent = theContent + '<p>Welcome to ...</p></div>';

        var cp1 = new ContentPane({

             title: "WELCOME",

             content: theContent,

             selected: true

        });

        tc.addChild(cp1);

        //Second Tab Panel

        theContent = '';

        theContent = theContent + '<div><h1>ABOUT</h1><br />';

        theContent = theContent + '<p>The County Auditor...</p></div>';

        var cp2 = new ContentPane({

             title: "ABOUT",

             content: theContent,

             selected: true

        });

        tc.addChild(cp2);

        //Third Tab Panel

        theContent = '';

        theContent = theContent + '<div><h1>CONTACT</h1><br />';

        theContent = theContent + '<p>Comments and questions...</p></div>';

        var cp3 = new ContentPane({

             title: "CONTACT",

             content: theContent,

             selected: true

        });

        tc.addChild(cp3);

        //Fourth Tab Panel

        theContent = '';

        theContent = theContent + '<div><h1>HELP</h1><br />';

        theContent = theContent + '<p>For help...</p></div>';

        var cp4 = new ContentPane({

             title: "HELP",

             content: theContent,

             selected: true

        });

        tc.addChild(cp4);

        tc.startup();

      }

    });

  });

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

William,

Here is the code working (at least n my end it is):

define(['dojo/_base/declare',

    'jimu/BaseWidget',

    'dijit/_WidgetsInTemplateMixin',

    'dojo/_base/html',

    'dojo/query',

    'dojo/_base/array',

    'dojo/_base/sniff',

    'dijit/layout/TabContainer',

    'dijit/layout/ContentPane'

  ],

  function(declare, BaseWidget, _WidgetsInTemplateMixin, html, query, array, sniff, TabContainer, ContentPane) {

    return declare([BaseWidget, _WidgetsInTemplateMixin], {

      baseClass: 'jimu-widget-modaltab',

      postCreate: function() {

        this.inherited(arguments);

      },

      startup: function() {

        this.inherited(arguments);

        var tc = new TabContainer({style: "height: 100%; width: 100%;"}, this.customContentNode);

        //First Tab panel

        var theContent = '';

        theContent = theContent + '<div><h1>WELCOME</h1><br />';

        theContent = theContent + '<p>Welcome to ...</p></div>';

        var cp1 = new ContentPane({

             title: "WELCOME",

             content: theContent,

             selected: true

        });

        tc.addChild(cp1);

        //Second Tab Panel

        theContent = '';

        theContent = theContent + '<div><h1>ABOUT</h1><br />';

        theContent = theContent + '<p>The County Auditor...</p></div>';

        var cp2 = new ContentPane({

             title: "ABOUT",

             content: theContent,

             selected: true

        });

        tc.addChild(cp2);

        //Third Tab Panel

        theContent = '';

        theContent = theContent + '<div><h1>CONTACT</h1><br />';

        theContent = theContent + '<p>Comments and questions...</p></div>';

        var cp3 = new ContentPane({

             title: "CONTACT",

             content: theContent,

             selected: true

        });

        tc.addChild(cp3);

        //Fourth Tab Panel

        theContent = '';

        theContent = theContent + '<div><h1>HELP</h1><br />';

        theContent = theContent + '<p>For help...</p></div>';

        var cp4 = new ContentPane({

             title: "HELP",

             content: theContent,

             selected: true

        });

        tc.addChild(cp4);

        tc.startup();

      }

    });

  });

View solution in original post

WilliamMiller4
Occasional Contributor II

It's working for me too Robert.

Thanks once again!

William

0 Kudos