Cool UX Features in Seans 8.4 demo video

Forum to discuss the new web client version of Servoy.

Cool UX Features in Seans 8.4 demo video

Postby Gordon McLean » Tue Jan 29, 2019 4:39 pm

Hi
I have been trying to replicate some of the cool UX features in Sean Devlins Servoy 8.4 demo V1 and have found some challenges as follows:

1) I can not see how you get the responsive form to expand when the sidenav is closed with the burger menu.

- I have tried adding it to the responsive form and this fails
- I have tried a separate form with a responsive tab panel on the right hand side and the sideNav on the left this also fails
- Finally I have tried incorporating the sideNav in a cssPositionContainer and also this fails
SO If anyone has this working and better still an example I would be very interested

2) Previously Sean also demo'd a version of the sidenav with large icon buttons down the left side ie it did not close fully leaving approximately 50px showing with a large icon. When the mouse hovered over the icon the sideNav expanded to show the relevant menu position. I am principally interested to know how the left icon is displayed when the sideNav is closed and separately it would ideal if there was a way show either a single menu name or the whole menu on hover

Cheers
Gordon
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 253
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: Cool UX Features in Seans 8.4 demo video

Postby rafig » Tue Jan 29, 2019 4:53 pm

I'd also very much like to know how this was done.

Maybe Sean could pop up a sample template made in 8.4 with the new CSS Positioning with a NavBar across top, SideNav down the side and a main area to hold a list & detail view, with the main area expanding when SideNav is collapsed??

Thanks

Rafi
Servoy Certified Developer
Image
rafig
 
Posts: 704
Joined: Mon Dec 22, 2003 12:58 pm
Location: Watford, UK

Re: Cool UX Features in Seans 8.4 demo video

Postby huber » Wed Jan 30, 2019 11:27 am

+1
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: Cool UX Features in Seans 8.4 demo video

Postby tgs » Wed Jan 30, 2019 1:32 pm

++1
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 886
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: Cool UX Features in Seans 8.4 demo video

Postby Ruben79 » Wed Feb 06, 2019 3:37 pm

+1
Ruben de Jong
Stb Software Development
SAN Partner

Stb Software Development - http://www.stb.nl
User avatar
Ruben79
 
Posts: 97
Joined: Wed Apr 18, 2007 12:43 pm

Re: Cool UX Features in Seans 8.4 demo video

Postby sean » Thu Feb 07, 2019 5:33 pm

OK Thanks for the feedback. I will try to make a sample soon
Software Engineer
Servoy USA
sean
 
Posts: 370
Joined: Mon May 21, 2007 6:26 pm
Location: USA

Re: Cool UX Features in Seans 8.4 demo video

Postby Gordon McLean » Tue Mar 19, 2019 1:36 pm

sean wrote:OK Thanks for the feedback. I will try to make a sample soon
hey Sean can I bump this one, I am lucky enough to have had a months holiday and I am now back on the case 8)

To be honest you actually did the sample in your video demo, the thing I am most interested in is how you got the SideNav to slide the rest of the content when exposes and collapse it back in when not - this sort of thing :

[sidenavIN][recordlist][record detail]

[sidenav............OUT][recordlist][record detail]


Cheers
Gordon
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 253
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: Cool UX Features in Seans 8.4 demo video

Postby sean » Tue Mar 26, 2019 7:32 pm

Hi Gordon,

Oh ok Sorry. That is easy then.

The two design-time properties:
open:false
slideAnimation:COLLAPSE-MENU
Software Engineer
Servoy USA
sean
 
Posts: 370
Joined: Mon May 21, 2007 6:26 pm
Location: USA

Re: Cool UX Features in Seans 8.4 demo video

Postby Gordon McLean » Tue Mar 26, 2019 7:57 pm

Thank you !! :D
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 253
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: Cool UX Features in Seans 8.4 demo video

Postby rafig » Tue Mar 26, 2019 9:41 pm

Thanks Sean.
I actually had these set on my 'sidenav' but I had some <div>s that were stopping it from working as I'd wanted, which I have now removed, so it is working!
However, when I change the window size (width), eventually the sidenav goes to icon only view, but doesn't actually collapse as it would if I had clicked on the 'burger' icon :?
Here is my outline/settings for the form
MySideNav_400x650.png

with the 'tablesspanel' having a styleClass of 'svy-sidenav-tablesspanel' (thinking that might help...)
Any ideas?
Thanks
Rafi
You do not have the required permissions to view the files attached to this post.
Servoy Certified Developer
Image
rafig
 
Posts: 704
Joined: Mon Dec 22, 2003 12:58 pm
Location: Watford, UK

Re: Cool UX Features in Seans 8.4 demo video

Postby mboegem » Tue Mar 26, 2019 10:53 pm

Hi Rafi,

when you look at the properties of the sidenav component, the 2nd property is 'containedForm'
There you need to link the 'body form'.
The sidenav panel should be set to the full width of the form and probable also anchored top-left-right-bottom (a bit depending on your design)

Hope that helps
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1742
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Cool UX Features in Seans 8.4 demo video

Postby rafig » Wed Mar 27, 2019 12:03 am

Hey Marc,
mboegem wrote:when you look at the properties of the sidenav component, the 2nd property is 'containedForm'
There you need to link the 'body form'.
The sidenav panel should be set to the full width of the form and probable also anchored top-left-right-bottom (a bit depending on your design)
Hope that helps

hadn't really paid attention to that property, but tried that out (and didn't change width, it seemed to work, and there was no anchoring as it was a responsive form) and it still did the same thing as before (i.e. sidenav menu didn't collapse).
But thanks for pointing that out to me.
Maybe Sean knows the answer ;-)
Servoy Certified Developer
Image
rafig
 
Posts: 704
Joined: Mon Dec 22, 2003 12:58 pm
Location: Watford, UK

Re: Cool UX Features in Seans 8.4 demo video

Postby wichmann » Sat Apr 13, 2019 4:55 pm

Hi,

since Update to Servoy 8.4 sidnav does't collapse if click on the burger icon.
I've tried a lot of things, but nothing help.

Situation 1:
situation_1.png


Situation 2:
situation_2.png


What can I do ? (stay on Servoy 8.3 is not the best solution)

BR
Andreas
You do not have the required permissions to view the files attached to this post.
DataBit GmbH
Mühletobel
CH-9217 Neukirch an der Thur
wichmann
 
Posts: 23
Joined: Fri Apr 12, 2013 2:44 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: Bing [Bot] and 4 guests