OutSystems UI v2.8.3 was just released

Hello everyone! 

A new OutSystems UI update was done and 6 more patterns were revamped. If you are interested in knowing more about the architecture of the framework that we are currently doing check the forum post published a few months ago with all the details. 

 

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 Accordion block with the new architecture. [Learn how to migrate]

    • New parameter IconPosition to change the position of the icon

    • New parameter Icon to change or set a custom icon

    • New actions to manipulate the state of the Accordion and its items: AccordionExpandAll, AccordionCollapseAll, AccordionItemExpand, AccordionItemCollapse

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

    • New library Splide.js

    • New parameter Height to set the carousel height

    • Scale parameter was removed based on usage metrics

    • New client actions to manipulate the Carousel: CarouselGoTo, CarouselNext, CarouselPrevious, CarouselToggleDrag

    • The ExtendedClass parameter was added based on David Marques’ idea on OutSystems Ideas. Kudos to David, keep your ideas coming! 🔥

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

    • New library FlatPickr.JS

    • Inputs automatically bounded to the DatePicker

    • Now, the DatePicker variables have the type Date Time (instead of Text)

    • EventList, ShowWeekNumbers, DisabledDaysList, DisabledWeekDays were removed based on the usage metrics

    • SelectInterval was removed from this component and the functionality was added to the DatePickerRange.

    • StartEmpty parameter was removed because now by default, the DatePicker starts empty 

    • New client actions to manipulate the state of the DatePicker: DatePickerClear, DatePickerClose, DatePickerOpen

  • New pattern DatePickerRange    

    • We split the DatePicker into two components: one for single dates and this one for date intervals. 

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

    • New library VirtualSelect 

    • Now, it’s possible to add images or icons to the DropdownOption list

    • New parameter AllowMultipleSelection to activate checkboxes that allow you to select multiple options

    • New client actions to manipulate the state of the DropdownSearch: DropdownClear, DropdownClearValidation, DropdownDisable, DropdownEnable, DropdownGetSelectedValues, DropdownNotValid

    • Now, to improve usability in mobile apps, the DropdownSearch opens as a popup

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

    • New library VirtualSelect 

    • Now, it’s possible to add images or icons to the DropdownOption list

    • Now, to improve usability in mobile apps, the DropdownSearch opens as a popup

    • RemoveItems parameter was removed based on low usage 

    • New client actions to manipulate the state of the DropdownTags: DropdownClear, DropdownClearValidation, DropdownDisable, DropdownEnable, DropdownGetSelectedValues, DropdownNotValid

    • Now, to improve usability in mobile apps, the DropdownTags opens as a popup

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

    • New Width parameter that allows you to set the width of the notification

    • New Position parameter that allows you to set the position where the notification appears on the screen

    • New parameter InteractToClose to activate or deactivate the click to close the Notification

    • New parameter CloseAfterTime to set the delay time to close the Notification automatically

    • New client actions to manipulate the state of the Notification: NotificationClose, NotificationOpen

 

What's going to happen next? 

You can expect news from us soon, as we continue to revamp the architecture of the 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):

Thank you for all the feedback you have been giving us. Keep it coming! 💪

 

As we evolve our framework and change more and more patterns, your feedback is key. To improve and facilitate the feedback loop, we have a form where you can submit feature requests for the components with the new architecture. 

 
Try it now

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

👀

Looks Cool!

mvp_badge
MVP

I really hope the new datapicker implementation is better and more stable than the one it replaces.

Nice!

One more contribution. Keeping following the updates.

Hello Community,

This new OutSystems UI version was discontinued and a new release (2.8.3) was released in order to overcome a platform issue in Oracle databases when dealing with empty string identifiers.
This was fixed under the task ROU-3287 and will unblock our users that won't need to wait for a future Platform Server version to be released with a fix for this particular use case.

Cheers,
GM

Thanks for the Update. 

What happened to RangeSliderInterval?

It's no longer possible to use Advanced Format property :\

Hi José.

On all the revamped components all AdvancedFormat will disappear.
That methodology applied in the paste brings several problems that we decided to remove and adopt another strategy as mentioned in version 2.8.0, with our focus on quality and the developer's experience. The main reasons were:

  • it doesn't scale and is completely tight to a provider, so if we want to evolve and modernize with a more recent provider we won't be able since it would break the existing code base, being a breaking change
  • this is an open door for security breaches if the developer is not careful 
  • we can't track missing features that we could provide to the whole community, being something hidden and hard to maintain

Going forward, we already included the most usual use cases on our revamped components and our APIs and we'll be looking for feedback to increase all the functionalities requested by the community and by our customers so that we can have a more mature growth of our product with the functionalities our ecosystem needs and making them available to the whole community, avoiding "knowledge silos". The new architecture we're currently implementing will allow us to be much more agile in adapting and exposing new functionalities through client actions and/or javascript APIs.

Cheers and keep your feedback coming,
GM

For how long will the deprecated version be available? Some time will be needed to cover the previous features with some workarounds or new components.

Hi José.

Exactly for scenarios like yours, in order to avoid impact on the existing installation base, we don't have any plans to completely remove the deprecated components. However, going forward we won't do any new developments on those since the idea is to reiterate based on feedback on the new components.
Feel free to send us feedback using the form we shared on the post.

Cheers,
GM

Great improvement, it will be helpful!!

I think we are missing de option of empty text within the DropdownSearch element. There is a client action 'DropdownClear', but does this means that we need to implement a button to clear the input? That seems a bit odd to be true. Hopefully there is a better option to clear a selected value from the DropdownSearch, like the "empty text" property as before. 


Hi @Martijn de Pijper 

Could you please explain your use case?
If I got it well, you are mentioning something like the platform's dropdown, and, if so, from a UX perspective that is not a best practice so it's something we didn't include nor think about including on a dropdown search or tags component. You can even check the samples page from the provider we're currenlty using (Virtual Select).

Cheers,
GM


Hi Gonçalo, 

Thanks for your reply. Yes, like the Dropdown as also the old version of the DropdownSearch has/had the option/property "Empty text". Which one could fill in a text, that the user could select, to clear the selection or more likely select 'nothing'. 
As far as I experience right now, this is not an option anymore with the new DropdownSearch? As I look at the Virtual Select library there is an option to show a clear option next to the selection to clear the selection within the DropdownSearch. Unfortunately I can't manage to find or create this function and there is no possibility to insert the extended properties. Am I forced to clone this element and adjust it to manage this? 

 

Hi @Martijn de Pijper 

Our goal with this revamp is exactly to ask our dev community to drive the components based on feedback and with the new architecture we're working on, we'll be faster to change. Also, we want to avoid having cloned patterns the most we can, so as mentioned in the post, you can send us feedback using the form we shared on the post. This way we can analyze and prioritize the implementation of a certain feature based on demand. For this particular case, since we aren't offering this feature out of the box (is now on our backlog after your suggestion) you can make it work by adding this CSS rule as an override:

.osui-dropdown-search .vscomp-clear-button { display: inline-block; }

.osui-dropdown-search .vscomp-clear-button { padding: 6px 6px; }

Hope this helps and keep feedback coming (for these scenarios, next time, please create a post under OutSystems UI so that our community members that might have the same question can find the answers easier than inside an announcement post 🙂 )

Cheers,
GM

Hey @Martijn de Pijper 

Thank you for the feedback you provided.

I'm happy to let you know the team has made this feature available in Dropdown Search and Dropdown Tags. This feature will be available in OutSystems UI 2.9.0, which will be available May 30th.

Regards,

Joana :) 

Thanks for update.looks great

Hi everyone,

I like the updates of the widgets but struggling a little bit with the datePicker. Is there a way to disable weekdays? 

Thanks and best regards,

Mathias

Hi @Mathias Raak

For the revamp we decided to focus on main use cases and parity with the most commonly used features, the DisableWeekDays feature was one of the least used features, for that reason we didn't include that feature in the new DatePicker/DatePicker Range components.  

Based on your feedback, I already added the ShowWeekNumbers to our backlog. 
Feel free to send us more feedback/feature requests using the form we shared on the post :)

Cheers,
Jéssica 

mvp_badge
MVP

Why remove the feature ShowWeekNumbers  on the datepicker? what will be the alternative?

Also I looks like the live style guide are still based on the old version of widgets, as for the date picker the ShowWeekNumbers  is still an option.

Hi @Daniël Kuhlmann

We decided to remove the feature ShowWeekNumbers based on usage metrics, this was one of the least used features. For the revamp we decided to focus on main use cases and parity with the most commonly used features, now we will keep delivering new features based on feedback and feature requests (you can use this form for feature requests). I already added the ShowWeekNumbers to our backlog :) 

Regarding the live style guide, we are aware that it's outdated, and we will update it as soon as possible.

Cheers,
Jéssica 

Since it's based on flatpickr, and it has a lot of options (including show week number), why not make an input parameter like other libraries "AdvancedFormat" where we can input a json string with whichever options you need? 

In fact, it seems to be missing from all the new components based on external libraries, replaced by OptionalConfigs (which is a nice to have, it's more user friendly for the most popular customizations) but can never be as extensive as the libraries allow via the options json.

Hi @Mariano Picco,

I will copy/paste here the answer that @Gonçalo Martins gave about the AdvancedFormat parameter because I couldn't have answered better myself :)

On all the revamped components all AdvancedFormat will disappear.
That methodology applied in the past brings several problems that we decided to remove and adopt another strategy as mentioned in version 2.8.0, with our focus on quality and the developer's experience. The main reasons were:

  • it doesn't scale and is completely tight to a provider, so if we want to evolve and modernize with a more recent provider we won't be able since it would break the existing code base, being a breaking change
  • this is an open door for security breaches if the developer is not careful 
  • we can't track missing features that we could provide to the whole community, being something hidden and hard to maintain

Going forward, we already included the most usual use cases on our revamped components and our APIs and we'll be looking for feedback to increase all the functionalities requested by the community and by our customers so that we can have a more mature growth of our product with the functionalities our ecosystem needs and making them available to the whole community, avoiding "knowledge silos". The new architecture we're currently implementing will allow us to be much more agile in adapting and exposing new functionalities through client actions and/or javascript APIs.


The showWeekNumbers feature is a good example of why we think it's a better approach to add the feature to the product via client actions/javascript APIs/new parameters rather than via AdvancedFormat, because even if you enable the feature via AdvancedFormat you will also need custom CSS and this feature will not be supported by us. Now, based on the feedback we're getting, we know it's a feature that should be supported :)


Keep sharing your feedback and helping us improve the product!

Cheers,
Jéssica

I understand those reasons, and I don't disagree. You're trying to make a component that it's agnostic in its implementation, and all libraries have slightly different set of options, so migrating one component to another library would break on update. 

You're saying the team is trying to identify the options often offered by the different libraries and make them all native outsystems input parameters? 

It's a good idea when it's mature enough; for now I fear it might cause some problems with very specific scenarios covered by the developers of the original libraries through the options object.

Will be looking forwards to next iterations.

Based on the community feedback and features that are often offered by other frameworks we will try to make them available through input parameters, client actions, or javascript APIs. We know that in a short term may cause some problems in specific scenarios but we believe that in a mid/long term the product will be mature enough and we will be able to cover most use cases :) 

Cheers,
Jéssica

Hi everyone,

One of the things i've noticed in the last updates is that the tooltip when triggered by a click doesn't close when you hit back the trigger, which can lead to a lot of tooltip opened at the same time when having a list, for example. Is this something you already identified? 

Thanks

Screenshot_19.png

Hi João Chenrim,

First of all, for these scenarios, next time, please create a post under OutSystems UI so that our community members that might have the same question can find the answers easier than inside an announcement post 🙂

Which OutSystems UI and tooltip versions are you using?
By the image you shared that doesn't seem to be a tooltip. Could you share a sample oml with that use case so that we can try to analyze and answer properly?

Cheers,
GM 

Hi Gonçalo,

Thanks for your reply and advice, i'll start a new post next time, i just posted here because it's something i thing that's it's related to the recent updates of Outsystems UI, it didn't happen before.

I'm using the latest Outsystems UI version (2.83) and the tooltip widget. I'm using this widget because of it's functionality and position settings, styling it for my needs. Here's something i quickly set in my personal environment.

Thanks

Tooltip.oml

Hi João Chenrim,

Indeed, this is an issue, opened tooltips should close when another one has clicked to be open.
It will be fixed at the next release.

Thanks for the awareness!

Cheers,
JR

Particularly good implementation. The components are very useful and user friendly.

Great

Great updates !! Now we have better version of date picker, this is really helpful.

Hello,

In the old DropdownSearch the empty text appears also in the dropdown list. In the new DropdownSearch the prompt (also empty value) appears not in the dropdown list.

How can I clear the dropdown after i have selected an item from the list, it is not possible te select an empty value (prompt) like in the older version of the DropdownSearch.

Hi @Jan Hidding

Thank you for your feedback! We missed that specific use case in this new component, but we've already added it to our backlog and are planning to release an alternative for that use case in our next release. For now, as a workaround you can add a clear button by adding this CSS rule as an override:

.osui-dropdown-search .vscomp-clear-button { display: inline-block; }

.osui-dropdown-search .vscomp-clear-button { padding: 6px 6px; }

Cheers,
Jéssica

I have a distinct sense of dread seeing the datepicker replaced entirely. Thanks for keeping the old one in a deprecated state, because migrating some projects will be a major, major job. But it's a step forward it outputting a DateTime, good job everyone.

The new dorpdownsearch component should follow the font defined in the theme.

Is it possible to put this fix in the backlog?


Hi Enio Ferreira Jr.

That was also been raised and it's already in our backlog. It will be fixed at the next release.

Thanks for the feedback.

Cheers,
JR

Thanks for the update.

Nice!

Thanks for the Update.  

Nice. 

Great!! 

Nice Work!!

I'm very happy with the new datepicker implementation. I think is better and more stable than the one it replaces

Great updates!

Replaces this component Flatpickr ;)



Hello Martins,

This is very useful info. Thanks for the update.

Nice!


Thanks for the update!

Hi everyone,

I unfortunately have another issue which causes problems in the use of the modules, here DropdownSearch.

Our users work a lot without using a mouse and jump through the input fields with the tab key. Unfortunately, with the new DropdownSearch module, you can no longer see that you have reached the field and furthermore, you can only open the search list if you use the directional keys or Enter. This is unfortunately a big problem for us in the handling. It would be nicer, that when you jump into the field, the search container opens immediately and search entries are possible.

Thank you for a short feedback.

Best regards,
Mathias

Hello @Mathias Raak 

First of all, for these scenarios, next time, please create a post under OutSystems UI so that our community members that might have the same question can find the answers easier than inside an announcement post 🙂

Could you explain in a different way or (even better) provide a video with the mentioned behavior?

Thank you!

Cheers,
GM

Accordion is not working when we use expression in title. when I click on title text its not working

Hi Kavita,

To get the title to work, what you can do is as follows:

1) in manage dependencies, in outsystemsui, look for the client actions section, and add depencencies for "accordionitemcollapse" and "accordionitemexpand"

2) give your "accordionitem" widget a name, say, AccordionItem

3) In the OnToggle state, tell it to run a new client action. It'll automatically pass you the "IsExpanded" state. Your new client action just needs to save that to a local variable.

4) Now in your title expression, you can do an onclick to a new client action. Then in that client action, you can check your local variable. If IsExpanded, then run client action accordionitemcollapse, passing it AccordionItem.Id.  If not IsExpanded, then run client action accordionitemexpand, passing it AccordionItem.Id

Please let me know if you have any questions. I can be reached at 714-625-8800 or nitin.batra@connectfss.com.

Thanks!

Nitin


Thanks for the update

Great improvement !

Just updated and going to check it out... Very curious about the translations in the datepicker. Currently we use a JSON in the AdvanceFormat:


"{

    i18n: {

        previousMonth : 'Vorige',

        nextMonth     : 'Volgende',

        months        : ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],

        weekdays      : ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag'],

        weekdaysShort : ['Zo','Ma','Di','Wo','Do','Vr','Za'],

        todayButton   : 'Vandaag'

    }

}"

Will multilanguage available from the start? Otherwise this pattern will be not usable for us..

Hi Peter Van Den Ochtend,

For now the DatePicker will have the app language by default since internally (under the hood) we are using the GetLocale from platform returns to set the DatePicker language.

At the next release it will be available a new client action "DatePickerSetNewLanguage" that will help on set a different language to the pattern!

Cheers,
JR

Hi @Gonçalo Martins ,

Thanks for the New version of DatePicker. But I am facing an issue when date is stored in the Database entity and wanted to show this date in datepicker input. But unfortunately it is not happening.



I am also assigning the entity date value to the Local Variable which is bound to DatePicker Input.

  


HI RJ

That use case is known and is something we're trying to improve.
Meanwhile, you can enclose the component on an IF statement looking at the IsDataFetch property from the aggregate to make it work:

For these scenarios, next time, please create a post under OutSystems UI so that our community members that might have the same question can find the answers easier than inside an announcement post 🙂

Cheers,
GM

Hi Gonçalo,

When will the OutSystems UI website be updated to use the new versions of the patterns? I wanted to check the markup and CSS for the new Accordion today, but I noticed that the site is still using the deprecated patterns.

Thanks!

Hi @Aurelio Junior!

On May 30th we will update the Live Style Guide, that also has a preview of all the patterns, which you can use to check the markup and CSS. Regarding the Website, it's in our plans to update it but we cannot yet provide a date for the update.

I hope this helps :)

Cheers,
Jéssica


Thanks for the quick reply Jéssica!

Are you guys also planning on releasing documentation for the new APIs that allow us to interact with the new versions of the patterns? I went through the documentation here but couldn't find anything.

Best regards.

We plan to make some improvements to our documentation but it's something that will take some time... I will add to our backlog the creation of a page on our website with all the APIs, I think it's the fastest way to provide that documentation before the documentation improvements we are planning.

Best regards.

Good

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.