Creating a Header and Footer Navigational Bar

I have a couple of questions regarding Headers and Footers. 1. How can I created a header navigational bar similar to the one on the support site (https://www.decsoftutils.com/support/section/app-builder-topics) ? 2. How can I create a footer bar that will always be on the bottom of the screen ? Thanks in advance.

Hello John,

There are some samples like the "HeaderMenu" and the "Footer" ones that may you want to take a look. Anyway, there are just that: samples. In general, anything we put in the footer or in the header (for example, some buttons or a Container with some buttons) are placed in the footer or the header.

One important thing in AB when we develop for small screens (mobiles for example) is the size in which develop the app. By default, AB create new apps with an 320x480 size. This size is probably the best to "start". Then, we can set the app's Scale option to "True", and our app can look well in smaller screens (320x480) and also in more larger screens.

In other words, is not a good idea to start to develop an app with a size of 800x600, for example. Depend on our app, but, the point is that we can scale from 320x480 to 800x600, but, not viceversa.

About the nav bar of this website, certainly, since AB uses right now Bootstrap CSS 4 (the same used in this website right now), we can use an HTML control to place the code of an navbar, and place the HTML control in the app's views header:

https://getbootstrap.com/docs/4.0/components/navbar/

However, this requires more or less knowledge of the used HTML and probably is not something easy to do right now. Additionally, AB did not include by default the Bootstrap 4 Javascript nor jQuery, which is required in order to deal with that kind of navigation bar.

In fact there is an "Navbar" sample which already implement the above stuff, however, I want to take a look (when possible!) to a possible easy integration of the Boostrap CSS 4 navbar into our apps.

---

Hello John,

The new Navbar control of App Builder may can be of your interest.

Upgrade your AB copy now and take a look at the new Navbar and Navbar2 samples.

---

Hi David,

Thanks for that. It is exactly what I was looking for.

Best Wishes

John

Hello to all,

Hi David, Thanks for that. It is exactly what I was looking for. Best Wishes John

Good. However, remember that we are not limited to a kind of header. We can always use buttons or other controls to prepare it, for example. So the Navbar controls is just another possible way to get our desired results.

---

Hi,David.

Navbar was great control and made AB easier.

Please add another small band text in properties navbar as in sample photo.

Thanks you.

Hello Tin,

Unfortunately, something like thak breaks the HTML markup used by the navbar, and, cause unexpected behaviour when the navbar fit to small and / or larger screens. Maybe its not a good idea Tin. We can use the Brand image or not, can use the Brand text or not, and can use both of them, but, the Brand text is a line of text (not very larger), not two lines or more.

---

Can you have another solution?I just need to show App name and User login name on navbar separately from appname.

Hello Tin,

Well. First of all, the Brand text is optional, and also the Brand image. The point is that you can't place two lines for the Brand text. Where you put the user login or the app's name is completely up to you, Tin. If you can't place it in a second line in the navbar Brand text, then you must look for another place, using any of the other available controls.

Maybe you can use the Brand image. And the Brand text with your app name, except if the user is login. May you can also use the Brand text plus the user login, but, in the same line. Or you can place the user login below the navbar. Or place it into one of the possible navbar items. Maybe the navbar control is not good for your needs this time. I am not sure.

---

Another thing,Can navbar set menu button to left side?

Hello Tin,

The Navbar that you can see in this website is not exactly the same than the used in App Builder. In fact, probably the Navbar on this website don't follow completely the right HTML markup. So the short answer is not, currently the Navbar button appear where Boostrap CSS decides is better.

If you like, can use directly the Boostrap CSS 4 nabvar HTML markup inside an HTML control, then, customize in the way that you wanted. This is also possible, of course with a little more of work than if you use the navbar control "as is".

---

Hi Tin,

          I was just thinking about your Navbar issue.  Perhaps you could do the following :

1. Create a navbar as you normally would

2. Add a coloured rectangle with your text on it below the navbar

For example :

Best Wishes

John

Hello to all,

Can be a good idea, John. Maybe we need to do some calculations in runtime in order to set the position of the small text below the navbar, if our app have the scaled option set to true. I try to do that right now, however, I find some unexpected problem, because the container used for the navbar. I need to think about a bit. I will take a look tomorrow to try to made it possible.

---

Hello to all,

Finally I made the appropriate changes in order to allow us to get the height of an Navbar control. We can now codify something like the below one in order to set an HTML control just below the Navbar control:

GetStyle "Navbar1" "height" "[NavbarHeight]" StrNumber "[NavbarHeight]" "[NavbarHeight]" UserAgent "[UserAgent]" If "[UserAgent.browser.name]" "==" "IE" Math "[NavbarHeight] + 12" "[NavbarHeight]" EndIf SetStyle "HtmlContent1" "top" "[NavbarHeight]px"

Note that some anoying behaviour in IE causes that we must take care about this specific browser. The above code must be placed at least in the app's Show event, and, maybe also in the app's Resize event, which means that the above code can be better encapsulated in an app's function, in order to be used in the mentioned placed.

Said that, I prefer to not perform this kind of calculations in runtime. I sincerely prefer another kind of solution, but, certainly is possible if we want something like that.

---

Thank you John, about idea.

I found bug on lestest version. Navbar drop-down menu not response on android. Need to click brand to show alert first, then menu will response.

Another question,how to remove border line when click dropdown button?

Hello to all,

The outline in the Toggle button and the other problem has been solved. Thanks for the report Tin!

---