I am new to Kendo UI Mobile. I currently have a Kendo UI SPA application for desktop browsers and I intend to build an accompanying Kendo UI Mobile application for a subset of the functionality that is available in the SPA app for desktop browsers.
The SPA desktop app allows deep linking into the app using routes. The SPA desktop app sends emails containing hyperlinks that deep link into the app to allow approvers to approve or reject a record for which they received an email.
When the server detects that the browser is a mobile app the server will redirect to the mobile page with the same route.
Here is my first problem: it does not appear you can deep link into a Kendo UI Mobile app using the same routes as a Kendo UI SPA app. A Kendo UI SPA app may have a route #/requests/:id/edit whereas a Kendo UI Mobile app would require a route #editRequest?:id which uses querystring parameters. What a shame Kendo UI SPA and Kendo UI Mobile have incompatible routing mechanisms.
Can anybody give guidance on how the Mobile app can intercept routes and convert the route from Kendo UI SPA format to Kendo UI Mobile format where applicable? Also, as the Kendo UI Mobile app will only support a subset of the functionality that is available in the Kendo UI SPA app, a lot of routes will be missing from the Kendo UI Mobile app. Is there an event to handle missing routes in a Kendo UI Mobile app so that I can present a friendly message to the user?
many thanks
Remco
The SPA desktop app allows deep linking into the app using routes. The SPA desktop app sends emails containing hyperlinks that deep link into the app to allow approvers to approve or reject a record for which they received an email.
When the server detects that the browser is a mobile app the server will redirect to the mobile page with the same route.
Here is my first problem: it does not appear you can deep link into a Kendo UI Mobile app using the same routes as a Kendo UI SPA app. A Kendo UI SPA app may have a route #/requests/:id/edit whereas a Kendo UI Mobile app would require a route #editRequest?:id which uses querystring parameters. What a shame Kendo UI SPA and Kendo UI Mobile have incompatible routing mechanisms.
Can anybody give guidance on how the Mobile app can intercept routes and convert the route from Kendo UI SPA format to Kendo UI Mobile format where applicable? Also, as the Kendo UI Mobile app will only support a subset of the functionality that is available in the Kendo UI SPA app, a lot of routes will be missing from the Kendo UI Mobile app. Is there an event to handle missing routes in a Kendo UI Mobile app so that I can present a friendly message to the user?
many thanks
Remco
4 Answers, 1 is accepted
0
Hello Remco,
the Kendo UI Mobile application is actually a higher level abstraction, compared to the generic SPA toolset. In fact, the application uses the router component internally, but performs automatic view resolving, based on the URL. This allows for several key features like layouts, view transitions and remote views.
If I understand you correctly, you are looking into building a mobile friendly version of an existing project while preserving the URL structure — please let me know if this is the case. I am not sure how this will work with (or is related to) AppBuilder, though. Can you please elaborate?
A general recommendation in this is to perform a server-side device detection and redirect the user to the respective mobile URL (or, a 404 view if none present). Detecting the device on the server will allow for efficient resources optimisation by serving only what's needed.
Regards,
Petyo
Telerik
the Kendo UI Mobile application is actually a higher level abstraction, compared to the generic SPA toolset. In fact, the application uses the router component internally, but performs automatic view resolving, based on the URL. This allows for several key features like layouts, view transitions and remote views.
If I understand you correctly, you are looking into building a mobile friendly version of an existing project while preserving the URL structure — please let me know if this is the case. I am not sure how this will work with (or is related to) AppBuilder, though. Can you please elaborate?
A general recommendation in this is to perform a server-side device detection and redirect the user to the respective mobile URL (or, a 404 view if none present). Detecting the device on the server will allow for efficient resources optimisation by serving only what's needed.
Regards,
Petyo
Telerik
Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
0
Remco
Top achievements
Rank 1
Rank 1
answered on 02 Feb 2014, 01:01 PM
Hi Petyo,
Thank you for your reply. I think my post should have been made in the Kendo UI Mobile / General Discussions forum, not app builder. Not sure how I ended up in this forum. I think I followed the wrong link from the Kendo UI Mobile home page. Can you move this post?
You are correct. I have an existing Kendo UI SPA application at a URL /default.aspx. When an http module on the server detects a mobile browser the http module will redirect from /default.aspx to /mobile/default.aspx keeping the same route. So /#/requests/1/edit (omitting the default.aspx) will become /mobile/#/requests/1/edit. The /mobile/default.aspx will load Kendo UI Mobile, instead of Kendo UI Web loaded by /default.aspx.
So I need the Kendo UI Mobile app to be able to handle the #requests/1/edit route. I suspect it will have to be converted to a #editRequest?id=1 format using query string parameters somehow. Also, the Kendo UI Mobile app will need to handle missing routes in a friendly manner.
Many thanks
Remco
Thank you for your reply. I think my post should have been made in the Kendo UI Mobile / General Discussions forum, not app builder. Not sure how I ended up in this forum. I think I followed the wrong link from the Kendo UI Mobile home page. Can you move this post?
You are correct. I have an existing Kendo UI SPA application at a URL /default.aspx. When an http module on the server detects a mobile browser the http module will redirect from /default.aspx to /mobile/default.aspx keeping the same route. So /#/requests/1/edit (omitting the default.aspx) will become /mobile/#/requests/1/edit. The /mobile/default.aspx will load Kendo UI Mobile, instead of Kendo UI Web loaded by /default.aspx.
So I need the Kendo UI Mobile app to be able to handle the #requests/1/edit route. I suspect it will have to be converted to a #editRequest?id=1 format using query string parameters somehow. Also, the Kendo UI Mobile app will need to handle missing routes in a friendly manner.
Many thanks
Remco
0
Remco
Top achievements
Rank 1
Rank 1
answered on 02 Feb 2014, 01:39 PM
I should also clarify that the deep linking is important. Somebody may have received an email with a hyperlink to http://<server>/#requests/1/edit. When the hyperlink is opened in a desktop browser it will start the Kendo UI SPA app, when opened in a mobile browser it will be redirected to http://<server>/mobile/#requests/1/edit and start the Kendo UI Mobile app. What I want to avoid is the need to have two links in the email: one for desktop to /#requests/1/edit and one for mobile to /mobile/#editRequest?id=1, asking the user to click on the correct link.
0
Hi Remco,
Thank you for the clarification. Like I suggested in my previous post, you can perform the URL redirection and URL transform on the server, after detecting the device.
Regards,
Petyo
Telerik
Thank you for the clarification. Like I suggested in my previous post, you can perform the URL redirection and URL transform on the server, after detecting the device.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!