322
Views
4
Comments
Solved
I want to make ReactiveApp look like this in mobile (Bottom bar)
Question
Application Type
Reactive


When I open my reactive app in mobile screen, I want to make it show bottom menu bar like this as you often see.

I mean Menu bar shows at the bottom when opening Reactive App in mobile. How do I do it?



I tried to use DisplayOnDevice and did like this but it didn't work.


I wonder if I'm missing something.  I'm not sure about how to implement.... Are you familiar with this? 

It'd be nice to get a sample app about this. Could you possibly tell me about it? 

Best,

2021-06-02 20-50-04
Márcio Carvalho
Solution

I said to create a mobile application just to get the Bottom bar block, once the application is created you copy the bottom-bar block and pass it into your application where you have your problem.

It's giving you an error because you didn't copy and paste into your application the Bottom Bar block as I said you to do (in my EDIT).

Look at the OML that I am sharing, is a reactive solution and I am with the Bottom bar...

Look at the final version :)

BottomBarExample In Reactive.oml
2021-06-02 20-50-04
Márcio Carvalho

The bottom bar item is awaiting a bottom bar pattern to be the parent So I couldn't find one on OutSystems to add in the dependencies, but do this, enclose your links in a container and give the bottom-bar class as shown in the image below.

EDIT:

So, I found the bottom-bar, you need to create in your application because is not on OutSystemsUI.

So I recommend you to create a mobile application and when it's done you go to the common flow and you will see the bottom bar block, copy that block and paste it into your application, after that instead of having a container with a bottom-bar class enclosing the links, you will have the bottom-bar block.

Also, the links will be on the block bottom bar and not on the layout, why? because in this way, your block will be reused and you will be able to use the activeItem input to say which menu item is active.

Kind Regards,

Márcio

UserImage.jpg
Tsubasa Yoshikawa

Thank you!

I was able to get what I wanted.


Best,

UserImage.jpg
Tsubasa Yoshikawa

Oh, I noticed you edit your post...


I tried this one you said.

copy that block and paste it into your application, after that instead of having a container with a bottom-bar class enclosing the links, you will have the bottom-bar block. 

But, I got this error maybe saying there is not that block in Outsystems UI of ReactiveApp...



I guess we need to use container.... I wonder if it's impossible to use bottom bar block in ReactiveApp...

2021-06-02 20-50-04
Márcio Carvalho
Solution

I said to create a mobile application just to get the Bottom bar block, once the application is created you copy the bottom-bar block and pass it into your application where you have your problem.

It's giving you an error because you didn't copy and paste into your application the Bottom Bar block as I said you to do (in my EDIT).

Look at the OML that I am sharing, is a reactive solution and I am with the Bottom bar...

Look at the final version :)

BottomBarExample In Reactive.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.