For those of you that don't want the popup to block features on the map or wish you could have selections results info display some where beside the map info window, this is the widget for you. This widget basically takes the JS API sample "Popup content in side panel" and makes it into a WAB widget.
Older Versions
List of the latest enhancements and changes:
List of the older enhancements and changes:
There are no errors. After the instant flashing at start up, it vanishes. When you click on a feature, the popup shows up as a infowindow (floating) not as a side panel.
I checked the config.json of your popuppanel website it seems that the popuppanel needs to be in the groups widget??
"groups": [
{
"visible": false,
"panel": {
"uri": "themes/JewelryBoxTheme/panels/LDockablePanel/Panel",
"position": {
"left": 0,
"top": 40,
"bottom": 0,
"width": 360,
"relativeTo": "browser"
}
},
"maxWidgets": 1,
"id": "_18",
"widgets": [
{
"name": "PopupPanel",
"uri": "widgets/PopupPanel/Widget",
"id": "widgets_PopupPanel_Widget_32",
"icon": "widgets/PopupPanel/images/icon.png?wab_dv=2.1",
"config": "configs/PopupPanel/config_widgets_PopupPanel_Widget_32.json",
"version": "2.7"
}
],
"label": "Group_0",
"icon": "widgets/PopupPanel/images/icon.png?wab_dv=2.1"
}
],
"panel": {
"uri": "jimu/OnScreenWidgetPanel",
"position": {
"relativeTo": "map"
}
}
},
No that is just for that theme (jewlerybox). This is really puzzling. Your screen shot does not match any of the standard billboard theme layout options, so does that mean you have customized the billboard theme?
nope, no modification. Just to verify that I have the problem, I created a new app. Then I follow these steps, and please let me know if there is something not right.
1. Change the theme to billboard. Clicked Saved.
2. extracted the contents of the popupanel zip file into a new folder PopupPanel in the widgets folder.
3. edited the app's config.json and added under the widgetOnScreen the entry
{
"uri": "widgets/PopupPanel/Widget"
}
4. open the "Configure Popup Panel" and clicked OK. That created the rest of the entries in config.json and the Popup Panel in the configs folder.
5. Refresh the app and the popup panel flashes once before it vanished.
Lefteris,
I am not sure why you are manually adding it to the config.json in step 3...
Once the Popup panel is added to your WAB stemApp widgets folder then you can just select the popup panel in the choose widget dialog like you do any other widget.
I'd like to add the widget on the widgetsonscreen group (off panel) and be invisible. If I add it to the widgets in the stemapp it becomes another widget on the headercontroller with an icon. I am using the Box theme.
Lefteris,
Well that is the issue then. You can not take an in panel widget like this and just use it in an off panel scenario and expect it to work. Off panel widgets are developed in a different manner.
I have apps with the Foldable and Jewlerey theme and I use the widget in the same panel as you do in Live Preview site. The widget is defined under the groups section of the config.json. No icons on the headercontroller, and it is running in the background. I am using the box theme and want to apply the same (no icon and in the background). If I place the widget in the widgets in stemap folder it creates an on-panel widget. Below is the config.json of the live preview site. In the box theme the groups section is empty. Since the box theme does not have a LDockable panel is it possible to apply the widget on this theme? Thanks.
"groups": [
{
"visible": false,
"panel": {
"uri": "themes/JewelryBoxTheme/panels/LDockablePanel/Panel",
"position": {
"left": 0,
"top": 40,
"bottom": 0,
"width": 360,
"relativeTo": "browser"
}
},
"maxWidgets": 1,
"id": "_18",
"widgets": [
{
"name": "PopupPanel",
"uri": "widgets/PopupPanel/Widget",
"id": "widgets_PopupPanel_Widget_32",
"icon": "widgets/PopupPanel/images/icon.png?wab_dv=2.1",
"config": "configs/PopupPanel/config_widgets_PopupPanel_Widget_32.json",
"version": "2.7"
}
],
"label": "Group_0",
"icon": "widgets/PopupPanel/images/icon.png?wab_dv=2.1"
}
],
"panel": {
"uri": "jimu/OnScreenWidgetPanel",
"position": {
"relativeTo": "map"
}
}
},
Lefteris,
In the box theme you will have to have the widget in the header icons and then once clicked on it will show the widget. It is not similar to those other themes.
Hey Robert,
Great widget! We are running into an issue where when we try to view a related record using the popup panel, the table appears blank. If I do not use the popup panel, the related record appears to be behaving normal. Any Ideas?
Sean,
It has been mentioned a few times here that this widget does Not support related records.
Ah, okay, I must have missed those. Is this something you are working on, or is support for related records completely gone?
something that is on a to do list.
Awesome, look forward to it! Thanks again for all you do!
Robert,
This widget is awesome, as are all of your contributions and I appreciate everything you do. And I hate to bother you with a question, but I am not sure what is going on, or if this is expected behavior. I'm using WAB 2.8 and I am using the Pop Up Panel in the header controller. I'm having trouble with the Pop Up Panel getting hidden behind other panels, and not responding to clicks.
I have a site where you can take a look if you really want to, but here is my general situation:
The site loads with no layers turned on, and only the Pop Up Panel enabled and showing on the right side:
Do you have any ideas of what I need to set in order to give priority to the Pop Up Panel, if that is feasible? Maybe it is expected behavior, but I feel like most of my users are never going to remember to X out the layers panel, or the basemap gallery, etc so that the Pop Up Panel works. I try to tell users to always hit the Pop Up Panel icon (I call it Information Results on my maps) but it just seems like it should pop up all the time.
Any advice you may have would be greatly appreciate it.
Thank you.
Andy,
Honestly you are the first that I have heard of that is placing the popup panel widget in the header. The header controller widget is unique in the fact that it only allows one of the widget in its pool to be open at a time and when the opened widget is switched to another one then the previous opened widget is closed. But my popup widget overrides that feature to make sure the popup is always opened period. But as you are seeing it is open under the layer list widget. So the simple fix is one line of code to change in the popup panel widget.js file in the displayPopupContent function. In latest version it is line 348:
//was: PanelManager.getInstance().normalizePanel(this.inPanel);
//needs to be
PanelManager.getInstance().openPanel(this.inPanel);
Andy, what widget did you use to hyperlink to your scanned tax documents
Robert,
Thanks for your response to my question. Changing from normalizePanel to openPanel worked perfectly. It wasn't a huge issue as it was, but not having to close out the other panels when a user clicks on things on the map, makes it work more like our users expect from Google Maps, so I appreciate the tip.
George,
It's just the About widget. And it's poorly formatted (for right now).
Will this work on 10.5.1?
Scott,
Sorry I do not use Portal so I am not sure if it works there. But the one thing I do know is that Portal 10.5.1 is only using WAB version 2.4 so that is very likely a issue since this widget is developed for WAB 2.9 or greater.
Thank you.
Scott Foster
GIS Specialist
Pipelines & Terminals
Direct: (210)-345-5198
Cell: (713)-240-7770
Email: scott.foster@valero.com<mailto:scott.foster@valero.com>
Hello;
I am using this widget, and I would like that when this widget is closed and later do a click in a feature, the popup of the webmap of Portal/AGOL is displayed.
Is this possible?
Best regards.
Alberto,
What theme are you using?
Robert;
I am using a custom theme. Not one of the themes of WAB.
Thanks.
Alberto,
Not sure how this will work with a custom theme but here is some code changes you could make.
onClose: function() {
this.removeEvtHandlers();
html.removeClass(query('.esriPopup')[0], 'myPopupHidden');
this.popup.reposition();
},
onOpen: function () {
var mapMan = MapManager.getInstance();
if(mapMan.isMobileInfoWindow){
this.map.setInfoWindow(mapMan._mapInfoWindow);
mapMan.isMobileInfoWindow = false;
}
//hide the standard esri popup instead
html.addClass(query('.esriPopup')[0], 'myPopupHidden');
this.setEvtHandlers();
this.displayPopupContent(this.popup.getSelectedFeature());
},
...
displayPopupContent: function (feature) {
if(this.state === "closed"){
return;
}
...
Hi Robert,
Very useful widget! I am using Web App Builder Developer Edition 2.11 with Portal 10.6.1 and version 2.9 of PopupPanel. I was working with a WebApp in Dashboard Theme since a while and everything worked fine. What I experienced today is that pop-up appears both in PopupPanel and default pop-up on the WebMap. Couple hours ago, it was appearing only in PopupPanel as it should. Do you have any idea of what might went wrong? Is it possible that I changed some settings? I would really appreciate your help.
Aleksandra,
Strange. Can I assume that you have tried shutting down WAB and restarting? I apply a css rule in my widget to the maps default popup "myPopupHidden" that sets the display to none, could you have made some change to that or somehow overridden that css rule?
Thanks for reply. Yes, I have restarted WAB. I didn't change anything in code, but just in case compared files with the original folder and haven't found any difference. As I tried to troubleshoot a little bit I deleted PopupPanel permanently and copied a new one into widgets folder -the same effect. I tried to build a new app, use another layer or another WebMap - always the same - two pop-ups at the same time.
What I discovered is when I changed theme to for example 'foldable' or 'jewelery box', tested that pop-up is working correctly there and switched back to 'dashboard' theme, the pop-up is ok in configuration view, which means I get only one pop-up in on of the boxes around the map, but when I launch the WebApp, problem appears again (traditional pop-up on the map and another one in PopupPanel widget). So now I am not so sure if everything was working fine at the beginning or if I tested only configure view all the time and pop-up have never worked in launch view. However, is it a known issue with PopupPanel in Dashboard theme?
(I did some test in WAB configured with AGOL instead of Portal and experienced the same problem)
Aleksandra,
Yes there does seem to be an bug with my widget in the Dashboard theme. Thanks for letting me know. I will start to investigate the issue.
Aleksandra,
Version 2.11 is now available that fixes the Dashboard theme issues.
Wow, that was fast! Thank you very much. I checked quickly and it seems to work perfectly now. Great job
Hi,
I was trying to use this Widget on the 3D, I change platform to HTML3D and 3D true, but when I add this on the 3D app, it does not work.
Could you please let me know is it possible to use this on the 3D app ?
Thank you,
Ali
No,
Widgets have to be completely re-developed to work in 3D. WAB 3D uses JS API 4.x not 3.x.
Hi,
I'm considering using this widget to replace the standard web map widget configuration. My major need is to configure a hyperlink in the popup to open IN the same browser tab as the web app. I've tried to customize the popup settings in the web map changing the HTML but it will not override the 'target=_blank' setting. Can this be modified with your widget either from the configuration or I guess in the code if needed?
Best!
Rich,
So you want the app to be replaced by the link in the popup?...
Hi Robert. What I'm hoping is that in the popup widget I can configure a hyperlink from an attribute that will open in the same browser tab. I can't do that via the out-of-the-box web map popup settings.
Thanks for the quick response!
Rich,
OK, to be sure I understand. When you are in a WAB app it is open in one tab of the browser. For the poup link to open in the same tab the WAB app would be replace by the content of the link. Are you saying that is the behavior you are looking for?
Right so I'd like to have a attribute in the popup that is a hyperlink. When clicked I would like for the link to launch in the 'current' web app browser tab NOT open in a new browser tab or window.
Rich,
That would be a coding change (since that is abnormal behavior) but it would be possible in the Popup panel widget. You would override the anchor element in the content var inside the displayPopupContent function.
OK great thanks Robert!
Do you know which file this function parameter will be in?
Rich
I think this widget might be exactly what I'm looking for but I don't have any experience adding new widgets. Are there instructions on how to implement this widget for a mainly-front-end-AGO-app-creator?
Laura,
If my "a mainly-front-end-AGO-app-creator" you mean AGOL then no you can not use custom widgets in AGOL's WAB apps.
Hi Robert... thanks again for the help yesterday. Any chance you can provide some additional guidance on where exactly in the code the below reference can be found?
Rich,
That would be a coding change (since that is abnormal behavior) but it would be possible in the Popup panel widget. You would override the anchor element in the content var inside the displayPopupContent function.
Rich,
Like this:
displayPopupContent: function (feature) {
if (feature) {
if(this.inPanel){
if(this.appConfig.theme.name === 'JewelryBoxTheme'){
PanelManager.getInstance().maximizePanel(this.inPanel);
}else if(this.appConfig.theme.name === 'TabTheme') {
var sbc = WidgetManager.getInstance().getWidgetsByName("SidebarController")[0];
var configs = sbc.getAllConfigs();
var tIndex;
array.some(configs, function(g, index) {
if(g.name === 'PopupPanel'){
tIndex = index;
return true;
}
})
sbc.selectTab(tIndex);
sbc._resizeToMax();
}else{
PanelManager.getInstance().normalizePanel(this.inPanel);
}
}else{
WidgetManager.getInstance().triggerWidgetOpen(this.id);
}
var content = feature.getContent();
if(this.popupContent){
this.popupContent.set("content", content);
var cont = this.popupContent.get("content");
var eCont = cont.replace('target="_blank"', 'target="_self"');
if(this.popupContent){
this.popupContent.set("content", eCont);
}
}
...
Thanks Robert…. So I implemented this but it still will open the hyperlink in a new tab?
Rich, then you are not getting the changed code in your app. I tested this and it works fine. Did you make this change in the client/stemapp/widgets folder or in the server/apps/[app#]/widgets folder?
Hi Robert… I made the change to the file in client/sitemap/widgets directory.
I added a consol command on that variable and testing in the browser and it’s not showing anything. I also downloaded the app to deploy it too IIS and can see the code is not changed in this version. We run WebApp Builder dev on a service and I think something is holding up the change being recognized. I restarted the service and also removed and added the widget itself back in? I’m going to just try this script in the downloaded/deployed version
Thanks!
Rich
Rich,
Changes to the client/stemapp/widgets folder are only used when you create a new app. so if you want this change in an existing app then you have to make the change to the specific apps widgets folder.
Ahhh OK so I needed to create an entirely new app to have the changes reflect from that directory. GOOD to know! Thanks so much!!
Love this widget! Has anyone else had any issues with attribute expressions displaying incorrectly? For some reason, our site will display the attribute expression when the feature is selected from the map, but will not show the expression when I use the search widget. For example, searching for a property, I find that the water service and sanitary district are missing phone numbers and have broken links, but if I click that same property on the map, I see those fields populated.
Not sure if this is a question for pop-up panel or for search widget...
On Search
On Click
I opened this case with Esri and they also appear to be stumped...