Grids not populating on mobile - Are blocked CDN's the culprit?

Tom_Hendricks

Custom views (anything other than My Work, Team Work, and Active Work) are rendering empty (0 items, element drawing correctly) when viewed from mobile browsers.  There are no errors showing up except several warnings about not being able to connect to CDN's (a long list of them).

First of all, does the Cireson Portal use CDN's, or are these actually from the home page before I open the Cireson Portal?  It is difficult to tell in the mobile console.

If the answer is "yes," then are there any recommendations for how to load the targeted files locally instead of with a CDN?  This is also a concern for users in regions that actively block certain CDNs, in addition to the possible issue with mobile browsing.

james_kleinschnitz

Promoted views are not supported by the adaptive/mobile design at this time.

Brett_Moffett

There should be no CDN's loaded by our portal when you host it.
The portal is hosted on your IIS server only and it is not gathering data from any other location or service.

This sounds very odd to me. Could this be a cellular provider "Man in the middle" issue?
You could test this by using a PC that is tethered to the phone for it's internet connection.

Is this happening on different types of phones? (iOS, Android, Windows Phone?)

have you tried doing a reset of your browser on your phone or browsing to the portal using "Incognito" mode?

Tom_Hendricks

I had the same assumptions heading into this issue, so I am glad to hear that there shouldn't be any CDN's called.

Without going into much detail, a secure browser is being used and the page cannot be loaded externally using Chrome or Safari over a public connection.  I have tried various resets and cache clearing to no avail, but if the Cireson Portal doesn't use CDN's (which is a requirement, in our case!) then I think I need to turn my attention to the browser and open a ticket with them.

In addition to that, could there be any other reason that the views promoted from the console into the portal have 0 records when viewed through mobile, while My Work, Team Work, and Active Work all display the same as they do on the desktop (in terms of records returned)?

Brett_Moffett

I'd be curious to see if there are any errors being shown in the developer tools of the browser. IE, Chrome and Firefox have developer tools when you hit F12 and allow you to see any console errors that appear.

Are you able to do this with your secure browser?

I wonder if there are some Java controls that it is unable to load (Such as Kendo etc.) I'd like to know what this error is for oyu so we can make sure it is not something in our code that is calling something in a way that it shouldn't.

Tom_Hendricks

The tools are very limited in the mobile browsers.  I can get a console in one of them, but the only thing I get is a (very long) list of CDN's it is trying to hit.  The timestamps coincide with when I load the Cireson portal.

On the desktop, I do not see any references to those CDN's when I look at the dev tools, even when I attempt to emulate a mobile device.

So while I still cannot confirm with certainty that the Cireson portal is trying to hit those CDNs, the mobile browser only tries to load them when I load the Cireson portal, and not anything else that I have tried, so there is some correlation.

That is one issue.  The other may require an Incident ticket, but let me know.

The promoted views do not load on mobile, and perhaps it is not related to the CDNs.  Running the page in mobile emulation does reveal an error in the console that does not show up in the mobile browser:

Uncaught ReferenceError: Title is not defined
    at eval (eval at compile (kendo.all.min.js?v=800:25), <anonymous>:3:432)
    at init.refresh (kendo.all.min.js?v=800:50)
    at init.i (jquery.min.js?v=800:3)
    at init.trigger (kendo.all.min.js?v=800:25)
    at init._process (kendo.all.min.js?v=800:28)
    at init.success (kendo.all.min.js?v=800:27)
    at success (kendo.all.min.js?v=800:27)
    at Object.n.success (kendo.all.min.js?v=800:27)
    at c (jquery.min.js?v=800:3)
    at Object.fireWith [as resolveWith] (jquery.min.js?v=800:3)

The Title column is present in all views, so I am unsure what the context is.  When I click into the line number, it points to this as the culprit: (the filename is shown as "VM3839:3" which is not terribly helpful IMO)

(function(data<br>/**/) {<br>var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<div data-template-name="gridCardTemplate" class="gridcard gridcard--workitem">\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="checkbox gridcard__checkbox">\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="checkbox" id="selected_'+$kendoHtmlEncode( Id )+'">\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <label for="selected_'+$kendoHtmlEncode( Id )+'"></label>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <p class="gridcard__title">'+$kendoHtmlEncode( <b>Title</b> )+'</p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="gridcard__detailblock">\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; if ( Priority && Priority.length > 0 ){ ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>'+$kendoHtmlEncode( localizationHelper.localize("Priority") )+' '+$kendoHtmlEncode( Priority )+' </span>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; } ;$kendoOutput+='\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; if ( Priority && Priority.length > 0 && AffectedUser && AffectedUser.length > 0 ){ ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ·\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; } ;$kendoOutput+='\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; if ( AffectedUser && AffectedUser.length > 0 ){ ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>'+$kendoHtmlEncode( AffectedUser )+'</span>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; } ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; if ( Category && Category.length > 0 ){ ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>'+$kendoHtmlEncode( Category )+' </span>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; } ;$kendoOutput+='\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; if ( Category && Category.length > 0 && Id && Id.length > 0 ){ ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ·\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; } ;$kendoOutput+='\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; if ( Id && Id.length > 0 ){ ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>'+$kendoHtmlEncode( Id )+' </span>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; } ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="gridcard__detailblock">\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>'+$kendoHtmlEncode( localizationHelper.localize("LastWorked") )+': '+$kendoHtmlEncode( moment(kendo.toString(new Date(LastModified))).fromNow() )+'</span>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>'+$kendoHtmlEncode( localizationHelper.localize("Age") )+': '+$kendoHtmlEncode( moment(kendo.toString(new Date(Created))).fromNow() )+'</span>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="gridcard__detailblock">\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; if ( AssignedUser && AssignedUser.length > 0 ){ ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>'+$kendoHtmlEncode( localizationHelper.localize("AssignedTo") )+': '+$kendoHtmlEncode( AssignedUser )+' </span>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; } ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; if ( Tier && Tier.length > 0 ){ ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>'+$kendoHtmlEncode( localizationHelper.localize("SupportGroup") )+': '+$kendoHtmlEncode( Tier )+' </span>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; } ;$kendoOutput+='\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>\n&nbsp;&nbsp;&nbsp; </div>';}return $kendoOutput;<br>})<br>

james_kleinschnitz

Promoted views are not supported by the adaptive/mobile design at this time.

Tom_Hendricks

Thanks for clarifying, @james_kleinschnitz.  Are there any plans to address this in the foreseeable future?

james_kleinschnitz

@Tom_Hendricks
One of the issues here is that we have no way of understanding what data is in your promoted view, thus we cannot give it a customized mobile layout. Can you add a feature request for this, and we can start a conversation with the community about what the ideal "default" promoted mobile view would be.
Thanks
--
James


FYI: @seth_coussens

Tom_Hendricks

Done.  I think I now understand the challenge, but I hope we are able to come together and figure out a workable solution for it.  Link: https://community.cireson.com/discussion/2598/display-promoted-console-views-on-mobile-smaller-desktop-windows/p1?new=1