POST
|
Hi Robert, I looked at the link you shared. From reading the article, it sounds like the resize event is the best option, but I'm having trouble implementing it. I have a modal panel, incorporating ideas from the splash widget, that works except for the screen rotation. Below are pictures of the panel (with a widget inside) upon first opening it in the orientation shown. Here is what they look like after rotation, respectively. I get the following error: Uncaught TypeError: b.call is not a function(…) init.js:1355 I've attached my panel, along with the original modal panel that is presented in Create a new panel. Any thoughts would be appreciated and enjoy your first fall weekend of the year. William
... View more
09-23-2016
01:15 PM
|
0
|
11
|
1406
|
POST
|
Hi Robert, Thanks for the links. I had been planning to use the following to determine whether the device being used was mobile or not. (I think this logic is correct. I was referencing this GeoNet thread.) if(isFullWindow()){
//true, mobile device
} else {
//false, not mobile device
} where function isFullWindow() {
if (window.appInfo.isRunInMobile) {
return true;
} else {
return false;
}
} Now I need a way to determine if the screen orientation is portrait or landscape. Looking at the links you provided, it appears the best way to go about this is to use two media queries in the CSS. @media screen and (orientation: portrait){},
@media screen and (orientation: landscape){} Is this the way you would go about solving the problem? I had hoped to make the changes in the JavaScript file. I see how dojo/has and dojo/sniff can help with determining the device being used, but not with screen orientation. Maybe I'm missing something... William
... View more
09-21-2016
02:20 PM
|
0
|
13
|
1406
|
POST
|
How does one determine if a mobile device is being used so changes can be made when the orientation goes from portrait to landscape? Any help would be appreciated. Thank you, William
... View more
09-21-2016
10:30 AM
|
0
|
15
|
2900
|
POST
|
Hello, I'm using the modal panel from the WAB Create a New Panel tutorial. I modified the Foldable theme to use the modal panel to open a group located in the header controller. The group has a single widget in it. This works fine on desktops (see first image below), but I'm having trouble styling the widget for mobile devices (see second image below). I tried using the Splash widget as a guide to modify the widget, but it doesn't seem to work. Do I need to add mobile styles to the modal panel instead of, or in addition too, the widget? Any help is greatly appreciated. Thank you, William
... View more
09-14-2016
11:34 AM
|
0
|
0
|
597
|
POST
|
Hello: Is there a way to prevent the port number from displaying in developer tools when the app is launch from the server? (See Below) Here is the process I'm using to test my apps on the server. -I download my Web AppBuilder app. -I extract the contents of the resulting zip file to the inetpub/wwwroot location on the server. -I access the site using the serverName/appName. Any guidance would be greatly appreciated. William
... View more
09-12-2016
08:11 AM
|
0
|
1
|
655
|
POST
|
Hi Robert, I tried the code you supplied, but an uncaught reference error occurs: _openWidgetGroup is not defined I've added 'jimu/PanelManager','jimu/WidgetManager', 'dojo/_base/array' and 'dijit/_WidgetsInTemplateMixin', to define, along with their aliases. The only thing I changed in the functions was swapping 'TOC and Legend' with 'TestGroup'. I referenced the function with: _openWidgetGroup(); I'm not sure what I'm doing wrong. I'm working with WAB 2.0. Any assistance would be greatly appreciated. William
... View more
09-06-2016
09:03 AM
|
0
|
2
|
1234
|
POST
|
Hi Robert, Just checking: There is no support for opening a grouped widget programmatically, is there? Not just on load, but at any time. Thanks again for your help. William
... View more
09-02-2016
02:40 PM
|
0
|
4
|
2636
|
POST
|
I watched the DevSummit 2016 Tech Session "Web AppBuilder for ArcGIS: Development Tools and Techniques" on the new ESRI Training site. (Also available at this link.) I followed along with the video and later reviewed the process on github. This part works fine, but Tom Wayson goes on to use yo esri-widget to create a sub-widget. I found the documentation on github, but when I use the command to install it, npm install -g generator-esri-widget, I get the result pictured below. Does anyone know what I need to do to get this to work properly? Also, do I need to worry about the WARN deprecated messages? I saw some comments to similar questions that said no and others that said to install the update separately. I've never used Yeoman or Grunt (or run Node.js), so any help will be greatly appreciated. William
... View more
08-24-2016
08:00 AM
|
0
|
3
|
1002
|
POST
|
Hi Robert, There's no need to reply to my last reply. I found an article that you commented on in June concerning the issue of opening a grouped widget on load and its unsupported nature. You might want to edit your last reply so it includes the additions I mentioned in my opening paragraph, which I'm pretty sure are needed. Thank you for your help and have a great weekend. William
... View more
08-12-2016
01:47 PM
|
2
|
0
|
2636
|
POST
|
Hi Robert, I was able to get the code to work after adding 'dojo/_base/array' and 'jimu/WidgetManager' to define, along with their aliases, and creating an instance of WidgetManager in the _getWidgetConfig function (this.wManager = WidgetManager.getInstance();). Standard widgets, like Legend, will open, however I get the following error when I look for a custom widget I created to open in a group: "Uncaught TypeError: Cannot read property 'id' of nullI". I added the following code to the support function to look for the widget in the groups section of the widgetPool: /*Check widgetPool.groups widgets*/
array.some(this.wManager.appConfig.widgetPool.groups.widgets, function(aWidget) {
if(aWidget.name == widgetName) {
widgetCnfg = aWidget;
return true;
}
return false;
}); so the entire function reads as: _getWidgetConfig: function(widgetName){
var widgetCnfg = null;
this.wManager = WidgetManager.getInstance();
/*Check widgetPool.groups widgets*/
array.some(this.wManager.appConfig.widgetPool.groups.widgets, function(aWidget) {
if(aWidget.name == widgetName) {
widgetCnfg = aWidget;
return true;
}
return false;
});
if(!widgetCnfg){
/*Check widgetPool widgets if not found in widgetPool.groups*/
array.some(this.wManager.appConfig.widgetPool.widgets, function(aWidget) {
if(aWidget.name == widgetName) {
widgetCnfg = aWidget;
return true;
}
return false;
});
}
if(!widgetCnfg){
/*Check OnScreen widgets if not found in widgetPool*/
array.some(this.wManager.appConfig.widgetOnScreen.widgets, function(aWidget) {
if(aWidget.name == widgetName) {
widgetCnfg = aWidget;
return true;
}
return false;
});
}
return widgetCnfg;
}, In the config file of my modified default layout, in my modified version of the FoldableTheme (eFoldableTheme, which also includes a new modal panel), I added the custom ModalTab Widget as follows, "widgetPool": {
"panel": {
"uri": "themes/eFoldableTheme/panels/FoldablePanel/Panel",
"position": {
"top": 5,
"right": 5,
"bottom": 5,
"zIndex": 5
}
},
"groups": [{
"widgets": [{
"uri": "widgets/ModalTab/Widget"
}],
"panel": {
"uri": "themes/eFoldableTheme/panels/ModalPanel/Panel",
"position": {
"relativeTo": "browser",
"zIndex": 102
}
}
}]
}, and it generates in a new app config file as: "widgetPool": {
"panel": {
"uri": "themes/eFoldableTheme/panels/FoldablePanel/Panel",
"position": {
"top": 5,
"right": 5,
"bottom": 5,
"zIndex": 5,
"relativeTo": "map"
}
},
"groups": [
{
"widgets": [
{
"uri": "widgets/ModalTab/Widget",
"id": "widgets_ModalTab_Widget_34",
"IsController": false,
"name": "ModalTab",
"label": "ModalTab",
"index": 0
}
],
"panel": {
"uri": "themes/eFoldableTheme/panels/ModalPanel/Panel",
"position": {
"relativeTo": "browser",
"zIndex": 102
}
},
"isPreconfiguredInTheme": true,
"id": "_33",
"visible": true,
"label": "ModalTab",
"icon": "widgets/ModalTab/images/icon.png",
"index": 2
}
],
"widgets": [
{
"uri": "widgets/Legend/Widget",
"version": "2.0.1",
"id": "widgets_Legend_Widget_16",
"name": "Legend",
"label": "Legend",
"index": 0
},
{
"uri": "widgets/LayerList/Widget",
"version": "2.0.1",
"id": "widgets_LayerList_Widget_17",
"name": "LayerList",
"label": "Layer List",
"index": 1
}
]
}, I use 'ModalTab' when I call the _getWidgetConfig function, as follows. var pm = PanelManager.getInstance();
pm.showPanel(this._getWidgetConfig('ModalTab')); What am I doing wrong? How does one reference a custom widget in a group? As always, any help you can provide is much appreciated. William
... View more
08-12-2016
09:05 AM
|
0
|
0
|
2636
|
POST
|
Bottom Line: I believe ESRI moved the location of the default map that displays when a new app is first created in Web AppBuilder 2.0 DE. Any applications that were relying on that map can no longer access it and display nothing in the map area when editing and a basically blank screen when launched. Adding the Topographic map from ESRI's Living Atlas should solve the problem. (Map > Choose Web Map > Public > ArcGIS Online > row 1, column 4) I don't know if this will help anyone, but I thought it worth sharing. It took me a little time to figure out what was going on with some of my apps. Especially since I had been working almost exclusively with the default map (for customization and testing) for quite some time.
... View more
08-12-2016
07:25 AM
|
0
|
0
|
774
|
POST
|
Hi Robert, Does this code still work in Web AppBuilder 2.0? I keep getting "Uncaught TypeError: Cannot read property 'id' of undefined". I'm trying to open a widget, for example purposes the Legend widget, which is under widgetPool > widgets in my app's root config file. The "id" property has "widgets_Legend_Widget_16", so I am using your code as follows: define([...
'jimu/PanelManager'],
function(..., PanelManager){
var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
...
onOkClick: function(){
...
var pm = PanelManager.getInstance();
pm.showPanel(this.appConfig.widgetPool.widgets[16]);
},
close: function(){...}
});
return clazz;
}); Any guidance is much appreciated. William
... View more
08-10-2016
11:33 AM
|
0
|
9
|
2636
|
POST
|
It's working for me too Robert. Thanks once again! William
... View more
08-10-2016
07:48 AM
|
0
|
0
|
713
|
POST
|
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. <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
... View more
08-10-2016
05:31 AM
|
0
|
2
|
2168
|
Title | Kudos | Posted |
---|---|---|
1 | 12-28-2016 08:09 AM | |
1 | 11-28-2016 08:34 AM | |
1 | 11-28-2016 08:39 AM | |
1 | 12-07-2016 06:14 AM | |
1 | 12-08-2016 08:44 AM |
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:24 AM
|