LaunchPad theme
WABDev 2.5
Custom Widget
I'm looking for the simplest, most straight forward example of adding 2 tabs to a new widget (an absolute vanilla panel). THIS thread seemed to be close but I'm not seeing the expected result (no CSS example?).
Looking for the most basic form of HTML, JS and CSS to get this implemented.
TIA
Solved! Go to Solution.
James,
Try this. All I did was change the order of the modules in the define. It is recommended that basewidget and mixins be at the beginning of your array.
define(["dojo/_base/declare",
"dijit/_WidgetsInTemplateMixin",
"jimu/BaseWidget",
"dojo/_base/lang",
"dojo/_base/Color",
"dojo/_base/array",
"dojo/dom-construct",
"dojo/dom-class",
"dojo/keys",
"dojo/on",
"dojo/Deferred",
"dijit/layout/TabContainer"
],
function(
declare,
_WidgetsInTemplateMixin,
BaseWidget,
lang,
Color,
array,
domConstruct,
domClass,
keys,
on,
Deferred,
TabContainer
) {
return declare([BaseWidget, _WidgetsInTemplateMixin], {
// Custom widget code goes here
baseClass: "jimu-widget-customwidget",
LoadingIndicator: null,
currentFeatures: null,
printOutlineLayer: null,
printOutlineConnects: [],
_isPreparedExhibit: false,
startup: function() {
// summary:
// Called on initial widget load
// This function sets all of our configurable variables to those set in the settings
// page/file.
this.tab = new TabContainer({
tabs: [{
title: this.nls.input,
content: this.inputPaneNode
}, {
title: this.nls.output,
content: this.outputPaneNode
}],
selected: this.nls.input
});
this.tab.placeAt(this.domNode);
this.tab.startup();
window.map = this.map;
window.widget = this;
This is how I've added tabs to my widget's Settings
Setting.html
<div class="esriCTTabDiv" data-dojo-attach-point="tabDiv">
<div data-dojo-attach-point="agolSettingsNode" class="esriCTTabNode">
...
</div>
<div data-dojo-attach-point="prioritizationSettingsNode" class="esriCTFullHeight esriCTTabNode">
...
</div>
<div data-dojo-attach-point="otherSettingsNode" class="esriCTFullHeight esriCTTabNode">
...
</div>
</div>
Setting.js
define([.., 'jimu/dijit/TabContainer3', ..], function (.., TabContainer3, ..) {
_initTabs: function _initTabs() {
var agolSettingTab, prioritizationTab, otherSettingsTab, tabs;
agolSettingTab = {
title: this.nls.agolSettings.agolSettingsTabLabel,
content: this.agolSettingsNode
};
prioritizationTab = {
title: this.nls.prioritization.prioritizationSettingsTabLabel,
content: this.prioritizationSettingsNode
};
otherSettingsTab = {
title: this.nls.otherSettings.otherSettingsTabLabel,
content: this.otherSettingsNode
};
tabs = [agolSettingTab, prioritizationTab, otherSettingsTab];
this._tab = new TabContainer3({
tabs: tabs
}, this.tabDiv);
this._tab.startup();
},
});
Which results in this:
Thank you, Ken. Very much appreciated. However, I am looking for a way to add tabs to an actual widget that is launched/opened --- for example the Geoprocessing Widget has two tabs.
Again, thank you!
This should work equally well in the main widget.
You can always see how that widget was built by opening up its code in the client\stemapp\widgets folder. In it, you'll see
this.tab = new TabContainer({
tabs: [{
title: this.nls.input,
content: this.inputPaneNode
}, {
title: this.nls.output,
content: this.outputPaneNode
}],
selected: this.nls.input
});
this.tab.placeAt(this.domNode);
this.tab.startup();
That looks like it's right from the Geoprocessing Widget.js
I added that in my startup: function() but no tabs appear on the widget panel when it opens (no errors and widget does open). I want the "AppNo" label & text box and "Query" button placed on a tab that appears at the top.
James,
That looks like you do not have widgetsintemplate (I am on my phone so I don’t have access to the exact name and case right now) class added to you define list and in the array.
No worry Robert. I'll check into the widgetsintemplate -- thanks!
I have "dijit/_WidgetsInTemplateMixin" in the define
That is it but you need it in the array after the define where baseWidget is listed as well (hard to explain from memory).
Not a problem, Robert. This is essentially what I have after the declare() and function() --- both have the _WidgetsInTemplateMixin references.
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget,
_WidgetsInTemplateMixin
], {
// Custom widget code goes here
baseClass: "jimu-widget-customwidget",
LoadingIndicator: null,
currentFeatures: null,
printOutlineLayer: null,
printOutlineConnects: [],
_isPreparedExhibit: false,
startup: function() {
// summary:
// Called on initial widget load
// This function sets all of our configurable variables to those set in the settings
// page/file.
this.tab = new TabContainer({
tabs: [{
title: this.nls.input,
content: this.inputPaneNode
}, {
title: this.nls.output,
content: this.outputPaneNode
}],
selected: this.nls.input
});
this.tab.placeAt(this.domNode);
this.tab.startup();
window.map = this.map;
window.widget = this;
this.inherited(arguments);
this.geoLayerUrl = this.config.geoLayerUrl;
this.lookupLayerUrl = this.config.lookupLayerUrl;
this.majorRoadsUrl = this.config.majorRoadsUrl;
this.streetsUrl = this.config.streetsUrl;
this.countyUrl = this.config.countyUrl;
this.countyFilterGPUrl = this.config.countyFilterGPUrl;
this.printTaskUrl = this.config.printTaskUrl;
this.geometryServiceUrl = this.config.geometryServiceUrl;
this.permitUrl = this.config.permitUrl;
this.canalLayerUrl = this.config.canalLayerUrl;
this.queryTask = new QueryTask(this.lookupLayerUrl + "/1");
this.adminQueryTask = new QueryTask(this.lookupLayerUrl + "/3");
this.populatePermitFieldData();
this.createFacilityFeatureLayer();
},
James,
so you have it in your define and your declare right? You did not post your define portion.