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.
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]
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):
Check more details about the new release in the Release Notes and download the latest OutSystems UI version.
This is cool. Good to see there is ongoing improvements on the UI.
Will there be any examples on the Typescript and scss?
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.BestJosé Rio
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.
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
Hi,
Amazing!
Just to be more clarified, this is just to Outsystems UI and NOT to Outsystems UI Web, correct?
Ricardo Pereira
Hi @Ricardo Pereira!Yes, this is only for OutSystems UI.
Best.
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)
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.
Congratulations!!!
Keep up the good work!
Looking nice, thanks for sharing!!
Really cool.
Great improvements on the UI.
Great things ahead!
More benefices to us and our developments.
Great!
Nice one team.
Really nice, thanks for sharing.
Thanks for sharing. 👍
Can you please fix the Tooltip lose focus event?Here is an example of the bug happening: https://jpmo22.outsystemscloud.com/TooltipFixed/TooltipTest?_ts=637775108151354441Keep pressing "Tab" to see the tooltip issue.
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.
The Focusout event listener missing. The attached OML has the fix.
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
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?
The new version only deliver that behaviour if/when accessibility features are enabled :)
JR
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?
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.
Great....
Cool! Is this applicable to Outsystems UI Web as well?
No, if i read correct.
Thanks, Stefano.
Hi @Swatantra Kumar,
This is for OutSystems UI (Reactive/Mobile) only.
Cheers
Hi Bernardo, Thank you for confirming.
I am so excited for this improvement and looking forward for upcoming new improvement.
Heartly Congratulations team....
This is great and looking forward to the additional updates!
Excellent!
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.
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.
Bernardo
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.
Magnus
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,
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.
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?
I've written a component to find all deprecated dependenciesFind Deprecated - Overview | OutSystems
Good to see there is ongoing improvements on the UI.
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
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!
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?
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,
Bernardo Cardoso
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?
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:
Best regards
Thanks, I leave it as it is because as far as I know, it is working :D
Jussi
Amazing !! Thanks for sharing :)
Great work there!!