Post Closed
2021-02-11 10-53-32
Mariana Bexiga
Staff
598Views
51Comments
OutSystems UI v2.8.0 is here and brings many improvements!
Discussion
Reactive
Announcement
Front-end
OutSystems UI
OutSystems UI Patterns

Hello everyone! 

We are currently revamping the OutSystems UI framework. This new version introduces a new code architecture and approach, aligned with industry best practices and while leveraging industry-leading technologies: Typescript and SCSS. We also redesigned the development experience and added a group of powerful APIs that will help you to easily extend our components. 

For a smooth transition, we will do gradual releases of the new versions of our patterns and provide migration paths for each deprecated pattern. 

In this first batch, we converted 6 patterns as we will explain in detail below. 


What changed?

With the evolution of the component, some of its features needed to be deprecated. 

If you are currently using any of the following patterns, we highly advise you to migrate them to the new implementation to ensure that you are using our current stable version with bugs fixed and better performance. 


  • New version of the AnimatedLabel block with the new architecture. 

  • New version of the ButtonLoading block with the new architecture. [Learn how to migrate]

  • New version of the FlipContent block with the new architecture.  [Learn how to migrate]

    • Three new actions added to change the state of the block (FlipContentToggle, FlipContentFront, FlipContentBack)

  • New version of the Sidebar block with the new architecture. [Learn how to migrate]

    • We added new actions to open and close the Sidebar (SidebarOpen, SidebarClose), and two new functionalities one to change the position and another to add an overlay. 

    • One of the new features was based on Alexandre Santos’ idea on OutSystems Ideas. Kudos to Alexandre, keep your ideas coming! ⭐ 

  • New version of the Submenu block with the new architecture. [Learn how to migrate]

  • New version of the Tooltip block with the new architecture. [Learn how to migrate]


What's going to happen next? 

As explained previously, we are currently working on revamping the architecture of our framework. In the next releases, we'll gradually launch new versions of our patterns. 

These patterns will be deprecated and new versions will be released in a near future (next 6 months):


Try it now

Check more details about the new release in the Release Notes and download the latest OutSystems UI version.

26
0
10 Jan

This is cool. Good to see there is ongoing improvements on the UI.


Will there be any examples on the Typescript and scss?

1
0
10 Jan

Hi @Stefano Valente!

Yes, we will have.
For now we do not have a date for it. Keep in touch... In the next months we could release more info about it.
Do you have any ideia about the examples you would like to see?

Thanks for your feedback.

Best
José Rio

1
0
10 Jan

Replying to José Rio's comment on 10 Jan 2022 18:22:14

i would like some nice examples on how to implement scss. Is it possible to work with SASS?

Typescript is not something i am very familiar with, so it will be tempting to stay working with javascript. It would be a good thing to know when its best to use what.


0
0
11 Jan

Replying to Stefano Valente's comment on 11 Jan 2022 06:33:05

We're using SCSS and TypeScript to deliver the OutSystemsUI.css Theme and OutSystemsUI.js script, in other words nothing change to the developers are using OutSystemsUI for now.

In order to be able to use SCSS and/or Typescript based on OutSystemsUI we must release the Code repository, and for now we don’t have a timeline for that.

Thanks

Best regards,

José Rio

1
0
11 Jan

Hi,

Amazing!

Just to be more clarified, this is just to Outsystems UI and NOT to Outsystems UI Web, correct?


Best regards,

Ricardo Pereira

1
0
10 Jan

Hi @Ricardo Pereira!

Yes, this is only for OutSystems UI.

Best.

0
0
10 Jan
2019-08-08 07-29-15
Marco Arede
mvp_badge
MVP

Are these all the patterns to be evolved into the new architecture (during the next 6 months); or will there be other patterns that will also be evolved (after the next 6 months)? (I assume the answer is the last option, but better to be sure)

1
0
10 Jan

Hi @Marco Arede!

There will be more patterns evolved into the new architecture after the next 6 months. 

In our next releases we will continue to communicate which patterns we are working on. Keep in touch! 

Jéssica M.

1
0
11 Jan

Congratulations!!!

Keep up the good work!

0
0
10 Jan

Looking nice, thanks for sharing!!

0
0
11 Jan

Really cool. 

Great improvements on the UI.

0
0
11 Jan

Great things ahead!

1
0
11 Jan
2019-11-11 17-10-24
Manish Jawla
mvp_badge
MVP

Amazing!

1
0
11 Jan

More benefices to us and our developments.

Great!

0
0
11 Jan

Nice one team.

0
0
11 Jan

Really nice, thanks for sharing.

0
0
11 Jan

Thanks for sharing. 👍

0
0
11 Jan

Can you please fix the Tooltip lose focus event?
Here is an example of the bug happening: https://jpmo22.outsystemscloud.com/TooltipFixed/TooltipTest?_ts=637775108151354441

Keep pressing "Tab" to see the tooltip issue.

0
0
11 Jan

Hi João.

Thanks for your feedback.

Can you please share that oml in order to better understand what is the issue behind the pattern?

Thanks in advance.

José Rio

0
0
11 Jan

Replying to José Rio's comment on 11 Jan 2022 15:29:47

The Focusout event listener missing. The attached OML has the fix.

Tooltip (Fixed).oap

0
0
11 Jan

Replying to João Oliveira's comment on 11 Jan 2022 16:47:43

Hi João,

The issue is happening at the old tooltip, nevertheless is an issue that we'll fix and will be available at the next release.

Since we lunch a new tooltip, it could be the right time to change it ;)

Again, thanks for your feedback and help on evolving the framework.

JR

0
0
11 Jan

Replying to José Rio's comment on 11 Jan 2022 19:26:34

Thanks for your answer, JR.

I have tested the new version, and it seems it is not possible to access the tooltip content using the keyboard anymore. I am not sure if this is the expected behavior or not, but it loses the accessibility the component used to have. Can you confirm if the Tooltip is losing this feature?

0
0
12 Jan

Replying to João Oliveira's comment on 12 Jan 2022 10:09:00

Hi João,

The new version only deliver that behaviour if/when accessibility features are enabled :) 

JR

1
0
12 Jan

That's interesting news, will be interesting to see how it evolves into the next iteration.


Updated my Outsystems UI in my personal environment and added a side by side of the deprecated Button Loading and the new one, and there seems to be a problem: 


When the button goes into loading state it loses its width?

0
0
11 Jan

Hi @Mariano Picco,

That's an expected behaviour for the new pattern. At the old pattern the width was based on the text length. For this new pattern we are setting that if the label should be hidden the button should have only the spinner... If you set the ShowLoadingAndLabel input as True, the button will have both elements visible.

Thanks for the feedback.

José Rio

1
0
11 Jan

Great....

0
0
12 Jan

Cool! Is this applicable to Outsystems UI Web as well?

2
0
12 Jan

No, if i read correct.

0
0
12 Jan

Hi @Swatantra Kumar,

This is for OutSystems UI (Reactive/Mobile) only.


Cheers

2
0
13 Jan

Hi Bernardo, Thank you for confirming.

2
0
13 Jan

I am so excited for this improvement and looking forward  for upcoming new improvement. 

Heartly Congratulations  team....

0
0
16 Jan

This is great and looking forward to the additional updates!

1
0
17 Jan

Excellent!


1
0
19 Jan

Hello,

it seems that in the latest version 2.8.0 the themes OSUIMobileBase, OSUIMobilePhone and OSUIMobileTablet were set to deprecated.

Shouldn't the new patterns be compatible with these deprecated themes?


Our mobile theme depends on these now deprecated themes, and we have issues when developers switch to the introduced new patterns (e.g., osui-sidebar class is only available in OutSystemsUI theme).

Of course, the long term solution is to switch to OutSystemsUI theme, but since there was no indication till the latest version I would expect that the new patterns also work with the old themes.

0
0
07 Feb

Hello Magnus,

Actually, we don't update those themes for some time now, since the release of the OutSystems UI for the Reactive runtime. 

So, not even fixes have been added to those themes in the past two years. The themes were only left there at the time, as removing them would cause a breaking-change for everyone using them.

Since then, all new applications should start with a dependency for OutSystems UI theme only, that works for web and mobile applications.

That being said, the move to the new patterns is by no means mandatory, and the deprecated ones will continue to work as before.


Best regards,

Bernardo

0
0
07 Feb

Hello Bernardo,

thanks for the quick reply.

Knowing this, I wonder why these themes were not set to deprecated when the decision was made not to do bug fixes for them.

Best regards,

Magnus

0
0
07 Feb

That 's true, it was probably an oversight on our side, as the whole communication for the OutSystems UI was around the UI unification!


Regards,

Bernardo

0
0
07 Feb

Is there an easy way to see which applications still reference the deprecated OutSystems UI elements?

We can go to the OutSystems UI module in service centre and check the details of each dependency (screenshot below) but it would be great if we could click on the element and see its references.

1
0
07 Feb

Hello @Mariana Bexiga ,

would it be possible to share at least a SQL in the first post to identify all the used deprecated OutSystems UI elements?

Best regards,

Magnus

1
0
04 Mar

Good to see there is ongoing improvements on the UI.

0
0
08 Feb

Awesome news and congratulations!

As a Front-End developer, i do understand that moving to a single file script using Typescript, is better for your productivity. But it'll be really hellpfull to have access to a github like repository with that code, so we can costumize some code, if needed. 

There's any schedule for this to be available?

Thank you,
Miguel

0
0
09 Feb

Hi @Miguel Júlio,

As already mentioned here we do no't have a timeline for it, that said customisations can always be implemented, but we understand your point well ;) 

Thank you for your feedback!

JR

1
0
09 Feb

There is a client action 

DEPRECATED_AccessibilityConfiguration

However, there is no corresponding new action for that and I couldn't find migrating instructions. So what should I do with that action?

0
0
15 Mar

Hi @Jussi Ahonen,

We deprecated that Client Action some time ago. The reason was to improve the user experience on how developers could toggle the Accessibility configurations. 

Now this is present as an Input Parameter on the layout blocks. This is also present on the official OutSystems Accessibility documentation page,


Best regards,

Bernardo Cardoso

0
0
15 Mar

Replying to Bernardo Cardoso's comment on 15 Mar 2022 09:34:37

Hi Bernardo

Thank you for your reply.

Now, I have that Deprecated version in use in some of my old modules. So should I take some actions to remove DEPRECATED_AccessibilityConfiguration action and get it updated to a new version (in that block). And if so, how do I do it? Are there detailed instructions to be found somewhere?

0
0
16 Mar

Replying to Jussi Ahonen's comment on 16 Mar 2022 13:07:32

Hi @Jussi Ahonen,


I would say you can stay with the deprecated version if its working for you, no problem with that!

But if you want to change, you would need to:

  • Search for usages of that action in your modules.
  • Remove the action usage
  • And then set the default value to True on the layout block inside the Common Flow, for the EnableAccessibilityFeatures parameter. That process is explained in more detail on the documentation.

Best regards

1
0
16 Mar

Replying to Bernardo Cardoso's comment on 16 Mar 2022 13:21:11

Thanks, I leave it as it is because as far as I know, it is working :D

Jussi

0
0
16 Mar

Amazing !! Thanks for sharing :)

0
0
20 Apr

Great work there!!

0
0
09 May
Post Closed