Headers and Footers for Apps

Hi,
I want to have a header and a footer on my app. The footer will have icons that take the user to different pages.

How can I do this ?

Best Wishes

John

Hello Jhon,

There is not an standard way to do that. We can use a Container control and put it into the header or the bottom of app views. Such Container can contain (of course) Push buttons, Images or HTML controls with the appropiate stuff. We can also use a Dropdown button, which incorporate a menu.

In the "Click" event of any of the Push button, Image, HTML or Dropdown items, we can simply use the ShowView, ReplaceView or the ShowDialog actions to show any app view.

Maybe you want to take a look at the DecSoft app sample, which uses a Menu control. Maybe I prepare an specific sample of a possible footer and header in the near future. Other app samples may also give you some ideas about possible menus and how to navigate between the app views.

Hello again,

Just to say that I add right now to App Builder a new Footer app sample:

This app sample show us how to implement a kind of app footer which include various icons to navigate between the app views. This app sample show us various things like how to use the Inline CSS app option to customize various app controls with different styles. Also we can learn how to use app functions and how to take care about what specific "target id" has been clicked into an HTML control. This app sample show us a possible footer for our apps, but we can create footer using various controls too: Containers, Buttons, Images, HTML, etc.

That sample is available right now: www.getappbuilder.com

Thanks for that David. I am looking for a header and footer line the one shows in this image

Would it be easy to implement that ?

Best Wishes

John

Hello John,

It's difficult if we try to imitate certain style. For example, if I am not wrong, the above image use the jQuery Mobile framework, but App Builder are based on Bootstrap CSS. Since App Builder support themes for applications, maybe we can found a similar app theme like he above one. Or maybe we can create our own theme based in the jQuery Mobile.

However, probably the best way is to use the Bootstrap CSS stuff already available in App Builder. We can use the default theme or others (even in runtime, see the DecSoft and Calculator samples) and then can prepare some interfaces like the below ones:

The above sample application interface do not use any particular CSS, that is, we can always add more stylesheets or use the Inline CSS option or the controls CSS properties in order to customize our application.

You can download the sample application following this link.

Hi David,

The header and footer you created for John is not working on latest version of AB. It display "Navigation error: http://127.0.0.1:9999/". What casued it?
Thanks.

Hello edunt,

I test it right now and works like expected, so... are you tried with other applications? They works for you?

Hello edunt,

I test it right now and works like expected, so... are you tried with other applications? They works for you?

Hmm very strange. Yes, I am trying to run it with Audio component.
Also whenever I ran the AB I usually clean my PC before it run properly or closed it. It seem like cache issue from JScript.
Thanks.

Hello,

Well. If the problem persist just post here edunt.