Pattern preview OutSystems UI

Congratulations to OutSystems for the great Reactive Web technology. This is a major step forward!

Also the widgets/patterns have greatly improved.

On the OutSystems UI Website there is a great usage of the options for each pattern, which slides in and out, e.g. https://outsystemsui.outsystems.com/OutSystemsUIWebsite/PatternDetail?PatternId=54

This an awesome solution, with a great CX/UX, however this pattern is as far as I know not provided in the OutSystems UI components.

Perhaps this will be included in the near future, but in the meantime is there an example available of how this can be built?

Thanks in advance for any tips.

Hello Frank,

I am not sure I understand your question...

Are you referring the fact the content "slides in" from the bottom?

This can be done using JavaScript and CSS, probably. Here is an example: https://stackoverflow.com/questions/45178735/fading-in-a-div-while-animating-from-the-left-right-top-bottom

Cheers.

Eduardo Jauch wrote:

Hello Frank,

I am not sure I understand your question...

Are you referring the fact the content "slides in" from the bottom?

This can be done using JavaScript and CSS, probably. Here is an example: https://stackoverflow.com/questions/45178735/fading-in-a-div-while-animating-from-the-left-right-top-bottom

Cheers.

Hi Eduardo,

Thanks for your quick reply!

My question was indeed not so clear. What I meant was that if the x from the Options panel on top is clicked, the Options panel disappears and the left panel increases its size to fill up the whole container. And inverse if the 'sliders' icon is clicked the options panel becomes visible again.

This is a very smooth transition, in which the user continues to see his context, in contrast to overlays (the sidebar component) or popups. It gives a behaviour we are familiar with on iPads for instance. It is also advocated by UX experts.

As this is used throughout all Patterns on the OutSystems UI website they probably reuse components or perhaps it is just done with clever adding/removing of classes and css?

The Slide Panel in the Forge comes close to this behaviour but it uses JQuery and has dependencies to Lisbon and Silk UI.

As the OutSystems UI Website showcases OutSystems UI it is a pity this nice pattern is not (yet?) available as component.

Cheers.


Solution

Ah...

Let me see if I got it right now...

You mean, something like this? https://eduardojauch.outsystemscloud.com/ReactiveApp/Screen1?_ts=637075324893366605

I attached an example (it is not a full solution). It is just a set of divs and some nice CSS (I copied them from the OutSystems site).

By the way, this is a REACTIVE web app. You can use a Personal (if already upgraded) to see it. But it should be the same in a Web Traditional.

Cheers.

EDIT: I replaced the link it was broken.

Solution

Thanks Eduardo,

This is exactly what I was looking for!

Many thanks!


Cheers,

Frank