How can I do a sidebar menu (for dashboard)? 😊

Hi! Can you please help in how I can create a sidebar nav for a user dashboard?

The question is originally posted by limitlessjoie2023 from Discord

Regarding the sidebar menu, we have many ways to implement it. Here, I’ll provide the simplest tutorial using the Conditional View component, and you can configure the corresponding actions on the buttons to switch between different views.

I will share the specific project configuration with you (MOMEN | Build web apps without code), and you can check the effect. I’m not sure if this is what you were looking for, so feel free to ask if you have any questions!

Let me know if you need any adjustments!


1 Like

This link is dead. Project has been deleted. Can you please build another example and share? In addition to this I am trying to figure out how to hide or show a nav button based on the users role.

Oops, that’s odd. Will do.

Working on adding it back.

I don’t know if this is worth it (but if its easy and makes sense) can you please expand on it with access as viewer to project and populate database as referenced in Conditional View | Momen Docs ?

Yep, we will do that.

Hey Paul, we just updated that, you can check this now : MOMEN | Build web apps without code

1 Like

Ahh. Thank you so much, it connected the dots for me. But leads to more questions :laughing:
I was trying to use (vertically) “tabs” for navigation in the side menu. I want the tab to indicate there is a change when it is clicked.

  1. ** In select view** I can get this to work at best with a double click action on the tab to navigate to the desired view. What am i doing wrong? I have the “select view” has parent “view” container if that matters.

  2. Also, when you are using the button component like you are in your example > how do you indicate to the end user when it has been selected? I know how to change state on hover but I can not figure out how to do it “when clicked” , what am I doing wrong?

Ok, I think I understand a little bit more now. I placed button components inside conditional views, create cases and actions based off each case (so that I could have ability to stylize button). It is not pretty (well it is pretty…ugly :rofl:) but I think is effective for an example.
My follow up question is - for future reference, is there an easier way to achieve resetting the cases or “states” of the other buttons when moving from one case (gray view) to another (orange view), etc..? I didn’t know if this is where an Actionflow comes into practice, I have not got that far.

If anyone has any feedback, please feel free to post a reply :grinning_face:

using side menu buttons to change dashboard views

An easier way is to have everything depend on a page variable (last clicked button or something).
And all the conditional views just change that variable.

Thank you. I am having problems either understanding the concept of the page variable or procedure to achieve this. I have tried doing this with a duplicate page of the one I linked.
If you have time, or some one else qualified, can you please explain how wire it up?

on page> data> page variable> “last_clicked_button” (as page variable name) and Type=Text and Default = Blue View

quite a few ways to do it.
MOMEN | Build web apps without code Pages9




JYK,

THANK YOU SIR ! It took me awhile but I got it. I have some questions:

  1. “Empty Text” on (for example) Case 1 > Chosen (view) > Button > Set Page Variable (Panel) - did you do that for example purposes or is that a conditional or formula ? If so, can you please show your work, I could not figure out how to recreate that or what it did, if anything.

  1. In your example you can “VIEW 2” that is the parent to a text component. This appears that the content is to reflect the page variable/chosen (basically to indicate what button is clicked and show feedback).

I am using a conditional view with cases and each case is shown depending on what button is clicked. On button clicked (“chosen” view) I have Button > Action > Set Page Variable. I also have a Switch View case Action to show the desired “dashboard”. Is this correct or is there a more preferred Momen way.

  1. The purpose of Empty Text is to cancel the selection. In that demo, the condition for selecting a certain case on the page is that the Page variable/chosen must equal something. If it does not equal any of Case 1/Case 2/Case 3 (for example, Empty Text), then it will show why nothing is selected.
  2. Yes, the text of chosen is just to display which Case you selected at that moment. In fact, in your scenario dashboard, you can use it to display any information.
  3. Whether you use a Page variable or directly switch the Case, both are possible. Generally speaking, using a Page variable is more focused on scenarios where you need to display the Case text somewhere (for example, showing “Case 1” in a title).

Eric,

Thank you - awesome explanation.

Last question (I think) on this, why is the text in his example blue and mine is not? I was just wondering if I should be doing something more than just typing in “Empty Text”.

  1. Empty Text is actually a commonly used data value that Momen has already built in for you. If yours isn’t shown in blue, I guess you manually entered the text 'Empty Text'.

  2. The role of Empty Text in this scenario is simply to indicate a value that is not equal to any of [Case 1 / Case 2 / Case 3]. In fact, you can achieve the same effect by using any other string.

Eric,

I did manually type it in, so that makes more sense. I thought that since it was blue text it was a selection but could not figure out how to get there. Thank you for helping me put to pieces together on this one. :clinking_beer_mugs:

1 Like