What is the most effective way to create a page template which have both Enterprise Header & Application Header built-in? I am also trying to figure out a way so that each menu can have a drop-down / sub-menu but I don’t want sub-menu sections to take a lot of space on the edit page. Basically don’t want to have large dynamic display panels blocking space on page making it difficult to add additional content on top part of the page.
Could you provide an example .rp file, screenshots, sketches, etc. to help us better understand your issue?
I just attached a sample image. I am able create the menu but when I have to edit something, I have to move menus from their original location since Dynamic views for other widgets are in a way.
Hello @urvish,
As we discussed in our Support Ticket, the best method for hiding Header Components on the Page to allow you to work on underlying Page Content would be to disable “Show in view” on the right side of the Component in the Outline.
I wanted to be sure to post this here as well for other Axure Forums users to reference. Thank you!
1 Like
I’ve found the show/hide icon in the Outline pane works well, as Dylan points out. When widgets are well named, you don’t even need to do that–just click their name in the Outline pane to select them, and for dynamic panels, just double-click to open or “drill in” to nested levels.
Yes, moving things around to edit then moving back again is too troublesome. If the Outline pane methods don’t work for you, or you want to be able to see all your elements at once, another approach is to place all your dynamic panels apart from each other–not in their actual UI locations–so they are easier to see, discover and edit. Then, each dynamic panel (or other widget) can move itself into place with its Loaded event, and hide themselves and/or set the default state automatically. I’ve found this tends to work best with multiple authors who may not be that knowledgeable of your document structure. You can use “hard coded” numbers for x- and y-locations, or use the locations of other widgets for relative placement (probably best for a template or Master), or use hotspots placed in the correct locations behind everything.
From your screenshot example, I can imagine–and would recommend–two main dynamic panels: your Enterprise Menu (black background) and Application Menu (gray background), each with nested dynamic panels for their items (e.g., the “Employee Tools” dropdown). In the RP editor you could move the Application Menu just to the right of the Enterprise Menu (or anywhere on the canvas) so they are both easily seen and editable from the canvas. Here’s a quick overview of the three methods I describe above:
-
Hard-coded location values
- Let’s say the Enterprise Menu is located at (0, 0) and has a height of 50 px
- The Application Menu could have:
Loaded
Move This to (0, 50)
-
Relative location values
- Maybe the Enterprise Menu height could change later, need to wrap, maybe change location etc. You can refer to its location and height so the Application Menu is always placed immediately below and left-aligned with Enterprise Menu:
Loaded
Move This to ( [[LVAR1.left]] , [[LVAR1.bottom]] )
// where LVAR1 is a local variable pointing to the Enterprise Menu dynamic panel
- Maybe the Enterprise Menu height could change later, need to wrap, maybe change location etc. You can refer to its location and height so the Application Menu is always placed immediately below and left-aligned with Enterprise Menu:
-
Hotspot locations
- You can drag in and resize some Hotspot widgets to match the default location and size of the menu dynamic panels. Just place one in front of the dynamic panel, name it (for easier reference; e.g., “ApplicationMenuLocation”) drag to fit, then send the hotspot to back. Repeat with other hotspots as necessary.
- Refer to the hotspots for each widget to be moved, each with its own Loaded event, like:
Loaded
Move This to ( [[LVAR1.left]] , [[LVAR1.top]] )
// where LVAR1 is a local variable pointing to the associated hotspot
You could also do same for the screen/page content, e.g., what you masked with red, so that it does not sit in front of or behind the menus or other widgets.
For similar kinds of things in the past, I’ve also “opened” all the sub-menus–the dropdowns–in the editor, so the full menu content can easily be seen and accessed. Then use a Loaded* event to hide or change dp state.
1 Like
I appreciate all of your feedback. Thank you for providing detailed tips to assist me on this issue.
1 Like
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.