Xpages mobile controls not visible on browser - xpages

Question

I am extremely new for mobile controls of xpages, according to the documentation, I have changes the setting in the "Xsp Properties page" selected the check-box "use mobile theme for Xpages with prefix: _m".
Then checked into the source tab and the status is
xsp.ajax.renderwholetree=false
xsp.error.page.default=true
xsp.library.depends=com.ibm.xsp.extlib.library,com.ibm.xsp.extlibx.library
xsp.persistence.mode=file
xsp.resources.aggregate=true
xsp.theme=oneuiv2.1
xsp.theme.mobile.pagePrefix=m_
Then I have stated with the test xpages using mobile controls The code for test page is
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:singlePageApp id="singlePageApp1"
selectedPageName="topicList">
<xe:appPage id="appPage2" pageName="topicList">
<xe:dataView id="dataView1">
<xe:this.data>
<xp:dominoView var="view1" viewName="topic"></xp:dominoView>
</xe:this.data>
<xe:this.summaryColumn>
<xe:viewSummaryColumn columnName="subject"></xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xe:this.extraColumns>
<xe:viewExtraColumn columnName="MainContent"></xe:viewExtraColumn>
<xe:viewExtraColumn></xe:viewExtraColumn>
</xe:this.extraColumns>
</xe:dataView>
<xe:djxmHeading id="djxmHeading1" label="Topics"></xe:djxmHeading></xe:appPage>
<xe:appPage id="appPage1" pageName="topicDetails">
<xe:djxmHeading id="djxmHeading2" label="Details"
back="Back" moveTo="topicList">
</xe:djxmHeading></xe:appPage>
</xe:singlePageApp>
</xp:view>
No errors shows in designer and when i am trying see the result in safari browser or any browser it returns a blank page.
I am not getting exactly what I an missing,and why I am not able see the page layout in browser.
Any suggestion will be helpful for me,
I could see the result as
Edit 2:error caught in console

Answer 1

Best guess is that you haven't included the "m_" prefix on the name of the XPage. What did you call the XPage? It should be something like m_thexpage, thus the XPages runtime sees the m_ prefix and knows to render the page using the mobile theme. If it's completely blank, it also suggests there are no documents in the view.
From the comments below:
Server version is 8.5 and the extension library is 9.0 – Ajit Hogade
I'm afraid you can't install a 9.0 extlib on top of an 8.5 server. The 9.0 extlib is dependent on features from the 9.0 xpages runtime. To use 9.0 extlib, you will need to upgrade your domino server to match. This explains why the mobile stuff isn't working for you.
finally i found the error in browser console which image i have uploaded in new the edit. Agree with the comment about the version difference,but as far, I am using this I found no problem with the extension library controls with works perfectly fine in the browser, the only issue I had with mobile controls. – Ajit Hogade 7 mins ago
You are lucky not to have experienced other problems. The 9.0 ExtLib expects to have Dojo 1.8.1, which is part of the 9.0 domino server. The 8.5 domino server has a much older version, 8.5.3 = dojo 1.6.1, 8.5.2 = dojo 1.4.3. The mobile controls are heavily dependent on dojo, so the version mis-match is undoubtedly the root of your problem, illustrated by the error you found in the browser console.

Answer 2

Mobile controls are specifically for browsers on mobile devices. The XPages runtime can identify the device requesting the page and use controls accordingly. So they're unlikely to render for desktop browsers.
Use a user agent switcher to test mobile controls in a desktop browser. However, bear in mind that this does not guarantee complete fidelity with the appropriate mobile device's browser.