iOS Navbar w/dynamic data

Mobile Apps
1

I am implementing a navbar with dynamic data in the title. Works perfectly on Android and Browser targets, but is not processing app connect on iOS. Interestingly the exact same value within the page content DOES show up.

{{current_order.value.order_id}} is a variable that is on index.html

The value shows fine in both place for Android and Browser.

The value also show fine in iOS in the page content,

but does not show in the Title…

Screen Shot 2020-01-23 at 10.58.55 AM Screen Shot 2020-01-23 at 10.58.39 AM

Screen Shot 2020-01-23 at 10.55.49 AM
Screen Shot 2020-01-23 at 10.55.49 AM1306×653 93.5 KB

2

I remember reading something on the Framework7 site that dynamic Navbar are iOS only feature. Seems implementation is different.

Have to look it up.

Did you saw any errors if you connect with safari dev tools?

1 Like
3

I saw that too, but didn't think it might impact data.

One of the iOS-theme awesome features is the dynamic navbar. Navbar's elements will slide and fade during pages transition and swipe back when dynamic navbar is enabled.

I'll see if I can find any more clues.

4

Just ran on the actual iOS device and nothing shows in the connected web inspector.

I also tried disabling iOS dynamic navbar and there was no change.

5

@George another clue:

On the content page, I added a different server connect action. When I view that content page in the editor, it shows the dynamic data in the navbar. However, when I then go to load that content page from within index, it is blank again.

So it would seem it has something to do with where the server connect actions are put ???

6

@George Found it.

At some point the editor removed the following:

	<!--#include file="order.html" -->
	<!--#include file="orders.html" -->

If I add these back in, the data shows in all the right places.

7

Are you using SSI includes for mobile apps? That won’t work.

If you use the move to include/content page, you should always choose content pages for mobile projects. I see we are generating a dmx-route component after the move, but that is actually not needed with Framework 7 so you can delete it and just link to the page route when you need it.

1 Like
8

Thanks George, I decided to reduce this down to putting everything on index for now until I understand things better. Moving on to autocomplete fields!

9

Actually with Framework7 it is nicer to have every page in separate content page. Should work fine.

You can have them also inline as stacked page but you will get one big index then.
Also seems you will need an extra option in app.js to enable stack pages navigation otherwise the back won’t work:

// Init App
var app = new Framework7({
  id: 'io.framework7.testapp',
  root: '#app',
  theme: theme,
  view: { // add this option for stacked pages
    stackPages: true
  },
10

100% agree, however I was having trouble with the data picker when doing that...I think what I just learned in trying this again is that the server connect should a) be on the content page and b) inside the page element, rather than outside.

Correct?

EDIT: However, I'd like for the server connects to be in one place (like index) so I don't repeat them across pages.

11

2 posts were split to a new topic: Data Picker in Mobile Content Page does not show the head page data

12

I also had the same problem, I solved it by adding this string in app.js “iosDynamicNavbar: false”

// Init App
var app = new Framework7({
id: ‘io.framework7.testapp’,
root: ‘#app’,
theme: theme,
view: {
iosDynamicNavbar: false
},

2 Likes