DISPLAY LAYOUT - LEFT MENU FROM VP........

ACDC

DISPLAY LAYOUT allows some really interesting concepts in UI presentation and much versatility

What about extending this function to include LEFT Menu and RIGHT Menu, something Like:

DISPLAY LAYOUT LEFT MENU FROM_VP Admin2.

This will leave everything else in place while magically replacing the Menu content

At the moment the only way to dynamically change the LEFT menu is to CHANGE PERSPECTIVE, which means any open forms or tabs are lost,
not to mention it is cumbersome.

My initial use of this feature would be to semi-collapse the LEFT menu so as to only have the menu Icons in view. Expanding the menu would then show the full description of the menu item with the icons, all in the name of getting more real estate. This action would be handled by the new extended Display Layout feature

I am currently using CHANGE PERSPECTIVE to achieve this behavior i.e. maintaining two identical VPs with exception of Left menu layout - its cumbersome

Does anyone else see this as a good feature and would they use it for dynamic control of menu content. Having VP'S for purpose of menu only, seems
to make sense rather than having to Change Visual Perspective every time a new menu is required.

hpl123

I love the DISPLAY LAYOUT functionality and use it extensively and I think all new features or addons to this functionality would be good.

When it comes to manipulating the left menu etc., I do this all the time but I do it using JS so say I have to collapse menu or make another menuitem active etc. etc., I do whatever I want to do in my main panels and I then have some JS updating my menu. Works great and you can do whatever you want in the UI with JS. I think the JS route is a better way to go.

PointsWell

ACDC wrote
I am currently using CHANGE PERSPECTIVE to achieve this behavior i.e. maintaining two identical VPs with exception of Left menu layout - its cumbersome

The way to avoid having to maintain two VPs is to have one VP that has the sole purpose of creating a frame and second is to act as a repository of all the layouts that you might want to show.

The first VP has any menus that you want and there is only a single panel. The panel runs process to DISPLAY LAYOUT DefaultLayout FROM VP LayoutRepository

Then whenever you want to display some other layout use the menu to DISPLAY LAYOUT AnotherLayout FROM VP LayoutRepository. You can place those menu items on the Operations Panel of the layout (v8.8 feature)

If you then have additional menu requirements you can create a second MenuVP with those in place (for example for staff with different permissions) and again just inject the DISPLAY LAYOUT into the panel or open new tabs with the DISPLAY LAYOUT.

It would also be great to be able to use a similar mechanism into the menu panels.

ACDC wrote
My initial use of this feature would be to semi-collapse the LEFT menu so as to only have the menu Icons in view. Expanding the menu would then show the full description of the menu item with the icons, all in the name of getting more real estate.

This seems to be more like Kendo UI auto collapse drawer which would be great to have access to.

hpl123

Ideally I would want a better way of doing menus like a built in menu "versions" or something like that e.g when going into the left panel settings, there have the option to create many different versions of a menu which we then can toggle/manipulate via a process action or attribute/boolean value or something like that.

ACDC

This seems to be more like Kendo UI auto collapse drawer which would be great to have access to.

That's exactly the kind of behavior I was referring to, I wonder if that would support a secondary-level menu item.
Also what would be involved in implementing this in AwareIM - Advanced script I wonder?
Alternatively, have an option on the current Menu to "semi-collapse" displaying ICON only

It would also be great to be able to use a similar mechanism into the menu panels.

In my mind extending the Display Layout function to handle the LEFT and RIGHT MENU Panel would be easier and quicker for AwareIM to do because most of the functionality is already there. The Action would be very similar to the Kendo draw example if the two VP menus were exactly the same.

Some time back I asked support if they would consider implementing the feature and they were keen to do it for a fee. Not sure if they will do it now, but maybe. I need something like this in a new project I have planned

PointsWell

Have not played with it so am talking off the top of my head...

Is it possible to use Condition when invisible to hide / show sub menus? Its a bit clumsy but could you use the LIRU session variable object to hold a bunch of menu flags that flip on and off when you select the parent menu item?

ACDC

Not sure that would work becuase the intial width of the LEFT menu needs to be set smaller on the Icon only menu

PointsWell

I built a little BSV and it doesn't work in the way I was thinking because there is no Auto-refresh if the panel is set to be a menu, but you can make the left panel be Tabs which then lets you treat it as any other panel.

So you could use your session variables BO to display a form that only has the menu buttons that you want, then use show hide to modify the menu to be whatever you need based on flags within the SessionVariables BO.

See example

Menus.bsv.zip

44.28kB

ACDC

excellent, lemme check it out, thank you

BTW, what file is this I cannot unzip, unzip reports error ?

Jaymer

Standard practice on this forum is that since it only accepts zips, so you make files that end in.zip just for upload purposes. Then you rename it to remove that. Then it’s a regular BSV, which is already compressed.

ACDC

Standard practice on this forum is that since it only accepts zips, so you make files that end in.zip just for upload purposes. Then you rename it to remove that. Then it’s a regular BSV, which is already compressed.

Yes i understand, I tried renaming it at first but that was a problem, eventually came right by going to the command-line for the renaming

BTW, I was thinking maybe it makes sense to create a real zip file, this way it will behave correctly on the user side if the standard practice is unknown by new users

ACDC

PointsWell wrote
I built a little BSV and it doesn't work in the way I was thinking because there is no Auto-refresh if the panel is set to be a menu, but you can make the left panel be Tabs which then lets you treat it as any other panel.

So you could use your session variables BO to display a form that only has the menu buttons that you want, then use show hide to modify the menu to be whatever you need based on flags within the SessionVariables BO.

See example

I see some good options here, but the Left frame width is fixed. So simulating collapsing the menu is not going to extend the space any as you are left with the fixed frame settings. Using the DISPLAY LAYOUT LEFT .... method replaces the Frame with the new Frame and its settings achieving a semi collapsed view

PointsWell

I was in a bit of a tunnel when I was thinking about this.

There's (probably) no reason why you couldn't make the process display a specially designed layout, and switch the layouts depending on various states.

Given that the Kendo allows for the semi collapsed drawer then there's probably a ways to access that behaviour via script. I don't understand scripting enough to suggest how to go about that. UnionSystems is pretty accomplished with that though.

hpl123

ACDC wrote
PointsWell wrote
I built a little BSV and it doesn't work in the way I was thinking because there is no Auto-refresh if the panel is set to be a menu, but you can make the left panel be Tabs which then lets you treat it as any other panel.

So you could use your session variables BO to display a form that only has the menu buttons that you want, then use show hide to modify the menu to be whatever you need based on flags within the SessionVariables BO.

See example

I see some good options here, but the Left frame width is fixed. So simulating collapsing the menu is not going to extend the space any as you are left with the fixed frame settings. Using the DISPLAY LAYOUT LEFT .... method replaces the Frame with the new Frame and its settings achieving a semi collapsed view

This can be done via JS as well, you could for example via JS change the width of the left frame (you then also need to change the width of the main frame). This is a bit complicated and I had it working a couple of years ago when I like you struggled with trying to get a better menu in my Aware apps. As this got so complex and Aware created problem when trying to manipulate it´s UI (its limited how much of it we can see, access etc. and we also don´t have full insight into the code Aware uses and also how Kendo is integrated which means, its kind of like a black box and very difficult trying to create a working solution when it is like it is. I decided to go the custom HTML menu route and is all I do in my apps now as then you have full control over the actual menu and then also full control over changing the menu and UI whenever and however you want via JS.

Its not as complicated as it seems doing custom HTML menus and using JS etc. to manipulate it in the ways you want and you can learn the basics of this quite easily and then work up your knowledge etc. from there. I would take any HTML left menu you find online that you like e.g do a search like this one: https://www.google.com/search?q=free+left+menu+html and find and learn to integrate that in the left panel in a sandbox BSV and then start playing with JS to do different things with it.

If you want a real nice design etc. I can help doing something like what you see here:

ACDC

f you want a real nice design etc. I can help doing something like what you see here: https://www.awareim.com/forum/post/47238 and also the latest SaaS app I did (this is a bigger project though and involves integrating a HTML admin template into AwareIM):

Thanks for the offer. One of the things that concerns me, a non standard menu with custom html and JS doesnt play nicely within the Aware setup, like directing output to New Tab or designated panels. In the past i have wasted many hours on trying this route and failed. Over the years I have learnt to keep things simple and stay within constraints of the configurator and its features.

Here is a perfect example of what I am looking to do with DISPLAY LAYOUT LEFT... .etc

https://www.youtube.com/watch?v=ES8vJcUqE7s

From a custom JS and Html perspective, would you be able to implement this code with extra embedding of the target output
The example comes with downloadable code required to make it happen

hpl123

ACDC wrote
f you want a real nice design etc. I can help doing something like what you see here: https://www.awareim.com/forum/viewtopic ... 238#p47238 and also the latest SaaS app I did (this is a bigger project though and involves integrating a HTML admin template into AwareIM):

Thanks for the offer. One of the things that concerns me, a non standard menu with custom html and JS doesnt play nicely within the Aware setup, like directing output to New Tab or designated panels. In the past i have wasted many hours on trying this route and failed. Over the years I have learnt to keep things simple and stay within constraints of the configurator and its features.

Here is a perfect example of what I am looking to do with DISPLAY LAYOUT LEFT... .etc

https://www.youtube.com/watch?v=ES8vJcUqE7s

From a custom JS and Html perspective, would you be able to implement this code with extra embedding of the target output
The example comes with downloadable code required to make it happen

You are right, going the custom menu (etc.) route has its challenges and requires doing some things differently. I banged my head against the wall for years trying to work within the constraints of Aware (don't get me wrong, Aware out of the box is great and sufficient for most developers) and trying to create a great UI/UX but I realised that, if you want really good UI/UX and/or more control over UI/UX, you have to work and design in Aware in a certain way. I have found a way / process of doing that and is what I do for all my apps and also for other developers I help with a complete overhaul of UI/UX. I would say the results speak for themselves (if you look at the showcase) and I gladly work a bit differently to get my apps looking like that.

When it comes to the video you posted, I only looked at the actual menu i.e the 3 "modes" of the menu (collapsed with icons, collapsed with icons and hoover menu, expanded with text/icons) and this is EXACTLY the type of menu I have in the Fokalpoint app you see in the showcase images i.e it is possible to do this type of menu in Aware. The fact that it's possible doesn't make it easy though and the "problem" with a menu like that in Aware is that you have to change the width (and other CSS) of both the menu (left frame) and the main frame (and same goes for all panels in the main frame i.e if their width don't adapt to the width change of the parent main frame automatically, you have to do it programmatically i.e via JS and same thing if you need to refresh a panel due to a new width that makes some queries look no good etc. you have to do it programmatically). As you can see, doing this can easily turn into a can of worms lol and this ties to the certain way of doing things explained above, to get a menu like that working in Aware you have to design the app in a certain way. To give you an idea/example of what I mean by designing in a certain way, for me to get a menu like that working in the Fokalpoint app, I had to put the menu (HTML etc.) in the main frame together with the rest of the panels in the main frame i.e I didn't even use the left frame.

When it comes to directing output, tabs etc., this, for me, again relates a bit to the designing/working differently part I explained above. Yes, this becomes more of a problem but I THINK Awaresoft has provided the custom JS functions for most if not all of this i.e it should be possible via JS to do all of that i.e open in new tab, directing output to panel x etc. and if not, Vlad can most likely share this code (for a fee) as the code is already written and used by Aware. I usually don't do tabs any more and if I do, I do a custom tab solution i.e I don't use the Aware tabs (difficult to explain why but has to do with the way I design the app). Directing output to panels same thing, I do custom things here as well.

As you can see, I do most things in the certain custom way today and again I got to this point banging my head against the constraints of Aware for a lot of years. If you or other developers, now or in the future, are interested in hearing more or talking to me about a UI/UX overhaul of your app, let me know.

hpl123

Btw, I didn't mean to change the actual topic / feature request discussion here i.e the proposed DISPLAY LAYOUT addons. Again, I think new additions to this functionality would be great and it would be interesting to hear Vlads/Awaresofts thoughts.

ACDC

hpl123 wrote
Btw, I didn't mean to change the actual topic / feature request discussion here i.e the proposed DISPLAY LAYOUT addons. Again, I think new additions to this functionality would be great and it would be interesting to hear Vlads/Awaresofts thoughts.

no problem , your responses are always very detailed, informative and interesting, thank you

aware_support

At the moment there is no intention to support something like DISPLAY LEFT MENU.

As I can see there are several reasons why you would like to change menu dynamically:
1) To save real estate
2) Some menu items need to be hidden/shown dynamically
3) You don't like look and feel of default menus.

I think functionality exists to more or less handle all three:
1) Kendo UI drawer widget is, in fact, used in Aware IM. Take a look at the Mobile perspective in the CRM sample application (Slide-In left frame and right frame commands defined in the top bar).
The same idea can be used in any desktop application as well.
2) It is easy to turn items on/off using a Javascript (the actual script depends on the type of the menu used). Invoking this script can be performed in a process if need be, using the EXEC_SCRIPT action.
(we can probably publish the required JS if you tell us what menu type you are using)
3) It is quite easy to support custom HTML menu (take a look at the Library sample application - Member perspective). All required JS functions to start processes, run queries etc are available.

customaware

Not sure if we are talking about the same thing but demonstrated The Perfect Menu at the last conference which might be of some help.

Send me a PM if you are interested to have a look.