Load page in main view from panel link

Questions
1

I want to load a new page in my main view area from a link in the right panel. I created the view like I did for my main views that are managed from a bottom tab navigation. After I do that I set up the panel link to be the href below (postoffers):

<div class="panel panel-right panel-reveal theme-dark">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Right Panel</div>
        </div>
      </div>
      <div class="page-content">
        <div id="sign-in"  class="block">Sign In</div>
        <div hidden id="sign-out" class="block">Sign Out</div>
        <a href="#postoffers" class="link panel-close block">Posted Offers</a>
      </div>
    </div>
  </div>
</div>

While I am at it, is the above the correct way to define a panel in v4?

I noticed on the desktop that my ‘Sign in’ item has a type in cursor instead of an arrow cursor. I also notice that my use of a link gives me link formatting which I would then need to override. There is also quite a bit of empty space between all the items in the panel. Is there a better way to define clickable items on the panels that have good spacing and that have the correct mouse icon and formatting?

Third stray question: how do you code highlight blocks of code that don’t automatically get highlighted in the preview? I’ve used blockquote but I know that messes up spacing.

Many thanks, loving F7!!!

2

You need two things. (1) The Panel with items, and (2) A route for each panel item. The href in the panel must equal a path in a route.
F7Panels
ROUTES IN JAVASCRIPT
{ path: ‘/Route/Number/One/’, componentUrl : ‘./pages/PageOne.html’ },
{ path: ‘/Route/Number/Two/’, componentUrl : ‘./pages/PageTwo.html’ },

3

Thanks. That helped cleanup the right panel items.

I am not getting the view to appear when clicking though. Whats odd is that the view is attached to my Home tab icon on my main nav bar instead, replacing the splash screen I normally have under Home. Very odd.

<div class="panel panel-right panel-reveal">
  <div class="list">
    <ul>
      <li>
        <a href="/postoffers/" class="item-content item-link panel-close">
            <div class="item-inner">Posted Offers</div>
        </a>
      </li>
    </ul>
  </div>
</div>

And in my route definition I have the following which is being executed when I click on the Posted Offers item.

{
path: ‘/postoffers/’,
componentUrl: ‘./pages/postoffers.html’
},

When the side panel closes I am left on the page that I initially clicked on to open the side panel. The new page (postoffers) is being added to my Home tab which I then have to click on Home to see my postoffers page

4

What I want is for ‘postoffers’ to be a new page on top of everything with a back button on top. When clicked the back button would remove this new page and reveal underneath the main page/section where I initiated the right panel. In my case this could be either a “messages” page or a “coaches” page. It seems like the Posted Offers action just goes back immediately to the app page where the right panel was triggered from and the ‘postoffers’ page gets placed somewhere else.

5

Are you trying to go to a different view? If so, make sure in javascript you have instantiated this other view.
Something like this in javascript.

var HomeView = app.views.create(’#view-home’, constants.MainViewSettings );
var HelpView = app.views.create(’#view-help’, { url : ‘/View/Help/’ } ) ;
var BotView = app.views.create(’#view-bot’, { url : ‘/View/Bot/’ } ) ;

If you are using tabs with your views, changing view should cause the tab to change also. In my case, I have 3 views, all with tabs.

6

When you use “componentUrl”, the page must have two sections.
(1) is the template section.
(2) is the script section.

If you don’t have script on that page, then use url, not componentUrl.
If you do have script on that page, then use componentUrl, not url.
This can sometimes be tricky.

7

You can specify in what view to load the page by adding data-view attribute, e.g.

<a href="/postoffers/" data-view=".view-main"

will load it in main view

10

Ah, view-main is a class which is added to one of the views. So instead I use the ID of the view I want:

<a href="/postoffers/" data-view="#view-offers" class="item-content item-link panel-close">
             <div class="item-inner">Posted Offers</div>
</a>

So this worked in adding the #post-offers page to the #view-offers tabbed view.

Does this mean that my post-offers page is now stacked on top of the regular content of view-offers?

What I really want is to be able to open the right panel from either #view-offers or #view-chats, then click on ‘Posted Offers’ to show the user the list of Offers they have created. Once they are done on that page deleting or editing offers I want them to hit Back and end up back in #view-offers or #view-chats where they started.

UPDATE:
By adding:

<a href="#" class="back">Back</a>

I assume I can add something to get the iOS left arrow

The user is able to click on Back and the underlying view-offers list reappears. Now I want to figure out how to popup the post-offers view on top of either #view-offers or #view-chats depending on where the user activated the right panel menu.

11

i have a similar problem, do you find a solution?