PopupMobile Customization

GregKnight — Thu, 11 Jul 2013 17:00:16 GMT

Hi all,

I am hoping to implement the PopupMobile Dijit, but would like to override a couple of appearance and behavior items if possible.

First, I would like to suppress the display of the feature count (1 of 1).

Second, I would like to override the behavior of the showContent button ( > ), so that it calls my own function.

Are either of these possible? If not, I guess Im looking at making a custom Dijit of my own.

Thanks in advance,
Greg

PS. I have a similar question for the Popup Dijit. Is it possible to suppress the 'zoom to' link?

Re: PopupMobile Customization

GregKnight — Sat, 11 Dec 2021 13:40:49 GMT

OK, well this seems to take care of the ZoomTo link in the Dijit Popup.

.esriPopup .actionsPane .action {
        display: none;
}

Hope everyone is enjoying the UC. 😉

Re: PopupMobile Customization

ChrisBeaudette — Tue, 30 Dec 2014 19:32:38 GMT

I know this post has been around a while, but I recently had the exact same requirements and was able to do it as follows...

These can be implemented using a combination of the on click event handler of the FeatureLayer that has the popup associated with it, and some overridding css. Note that I'm also using jQuery and jQuery Mobile. There may be a cleaner way to do this, but this worked for me:

For #2, "override the behavior of the showContent button ( > ), so that it calls my own function", you would add an onclick event handler to your FeatureLayer as follows:

var fl = new FeatureLayer(...);

fl.on("click", function () {

$(".titleButton.arrow").on("click", function(evt) { // this is the selector for the circled arrow div

//evt.preventDefault(); <-- Note that this has no effect, hence the comment

$(".esriMobileInfoView.esriMobilePopupInfoView").css("display", "none"); // hide the default contents of the attribute info div that takes up 100% of the viewport

alert("hi there"); // put your custom code here

});

Note that hiding the contents of the default div that contains the feature's attribute info must be done on the onclick event for the feature layer -- adding this to your css will NOT work, even if you use "!important":

.esriMobileInfoView .esriMobilePopupInfoView {

display: none;

}

This has the effect of hiding the default behavior while implementing your new behavior.

For #1, "suppress the display of the feature count", I found that this takes a combination of adding another jQuery selector to the onclick event handler for the feature layer:

$(".titleButton.prev").parent().css("display", "none");

This has the effect of selecting the parent element of the left "previous" arrow in the feature count area, whether it is hidden (in the case of a single element) or not. The parent of the "previous" arrow contains all 3 elements of the feature count area -- the "previous" arrow, the feature count, and the "next" arrow -- so by hiding it (the parent) you effectively hide the entire contents of the feature count div area.

Note that none of these work when put into css (as well as other css parent selectors):

.titleButton .prev > div {

display: none;

}

which is why I put it in the onclick event handler of the FeatureLayer.

For completeness, this is the entire event handler for the FeatureLayer:

fl.on("click", function () {

fl.setInfoTemplate(new PopupTemplate({ ... })); // I'm also setting my InfoTemplate here

$(".titleButton.prev").parent().css("display", "none"); // hide feature count area

$(".titleButton.arrow").on("click", function(evt) {

$(".esriMobileInfoView.esriMobilePopupInfoView").css("display", "none"); // hide default attribute popup

alert("hi there"); // add custom onclick handler code

});

Some additional css is also required (this could also have been handled in the event viewer, but I prefer it in the css wherever possible):

.esriPopupMobile .titlePane .title {

margin-top: 9px !important; /* I found that the !important is required here */

}

Note that this will move the title of the Popup down 6 more pixels from the already-set 3 pixel margin. This is necessary since the feature count area is removed and so the title must be re-aligned vertically.

Re: PopupMobile Customization

ChrisBeaudette — Tue, 30 Dec 2014 23:58:21 GMT

One additional very important note regarding the onclick event handler for the FeatureLayer: change this:

$(".titleButton.arrow").on("click", function(evt)

to this:

$(".titleButton.arrow").one("click", function(evt)

(Note the "one" instead of "on" for the event handler attachment). If "on" is used then a listener is added each time you click the arrow button and the handler is executed n+1 times each time you click it. Using "one" executes the handler at most once per element per event type.

topic Re: PopupMobile Customization in ArcGIS JavaScript Maps SDK Questions

PopupMobile Customization

Re: PopupMobile Customization

Re: PopupMobile Customization

Re: PopupMobile Customization