26
Views
11
Comments
Solved
Feedback Message time duration - 30 seconds
Question
Application Type
Reactive

Hi friends,

I´ m currently developing a reactive app and I want to display a message during 30 seconds.

As per screen below I first tried using "widget messages" 

The second I tried using javascriptAPI at:

https://success.outsystems.com/Documentation/11/Reference/OutSystems_APIs/JavaScript_API/FeedbackMessage

But for both cant find a way to a message have a 30s duration..

Aprecciate your help

Rank: #95
Solution

Hello again Rui Passarinho,

Hope you are doing well.

We did some changes in the component and released version 1.0.1 in order to accomodate your needs:

https://www.outsystems.com/forge/component-overview/9691/feedback-message-utils-reactive


After some changes in the scripts, we managed to find a generic action that allows the user to show a message and control the timeout of that displayed message, not only for warning and error messages, but also for success and info messages.

In your case (info message with a 30s duration), you just need to install the new version of the component in your environment and use ShowFeedbackMessageWithTimeout action, like this:


This approach will allow you to avoid changes directly in the CSS.


Thank you for bringing this up :)

Hope that this helps you!


Kind regards,

Rui Barradas

Rank: #70
Solution

Hi there,


For you to use the Feedback automessage, you don't need to use the Message "Sem Sessão iniciada" so you should remove it.


Just call the following Javascript:


$public.FeedbackMessage.showFeedbackMessage($parameters.MessageText, $parameters.MessageTypeId, "", "", $parameters.CloseOnClick);

window.setTimeout(function(){$public.FeedbackMessage.closeFeedbackMessage();}, $parameters.SecondsToClose * 1000.0);



Where your parameters are:
- TypeId = Numeric identifier of the type of feedback message to show (0 = Info, 1 = Success, 2 = Warning, 3 = Error)

- CloseOnClick = If true, clicking on the message it will close the message; false otherwise

- SecondsToClose = seconds until the message closes automatically

- Message = message to display


Your Javascript should look something like this:


Hope it helps.


Cheers,

João

Rank: #4518
Solution

Hi Everyone,

First, let me thank for your prompt replies. 

Both options are valid, but unfortanelly could not achieve my goal. 

In forge component or directly as João Marques suggested I could decrease time message disappear but could not increase it.

If timeout sent is for example 2 seconds(2000ms), I can see the message disapear in 2 seconds but if i try more than 5 the message always disappear after those five seconds. Is like you could use to dicrease timeout buT not to increase the timeout.

Did anyone get to increase timeout in reactive app?

Cheers,

Rui

Rank: #70
Solution

Hi there,


For you to use the Feedback automessage, you don't need to use the Message "Sem Sessão iniciada" so you should remove it.


Just call the following Javascript:


$public.FeedbackMessage.showFeedbackMessage($parameters.MessageText, $parameters.MessageTypeId, "", "", $parameters.CloseOnClick);

window.setTimeout(function(){$public.FeedbackMessage.closeFeedbackMessage();}, $parameters.SecondsToClose * 1000.0);



Where your parameters are:
- TypeId = Numeric identifier of the type of feedback message to show (0 = Info, 1 = Success, 2 = Warning, 3 = Error)

- CloseOnClick = If true, clicking on the message it will close the message; false otherwise

- SecondsToClose = seconds until the message closes automatically

- Message = message to display


Your Javascript should look something like this:


Hope it helps.


Cheers,

João

Rank: #528

Hi Rui,

I think you can achieve this using this forge component: https://www.outsystems.com/forge/component-overview/9691/feedback-message-utils-reactive

You can use the "ShowFeedbackMessageWithTimeout" and specify the timeout in milliseconds.



Hope this helps,

Pedro

Rank: #4518
Solution

Hi Everyone,

First, let me thank for your prompt replies. 

Both options are valid, but unfortanelly could not achieve my goal. 

In forge component or directly as João Marques suggested I could decrease time message disappear but could not increase it.

If timeout sent is for example 2 seconds(2000ms), I can see the message disapear in 2 seconds but if i try more than 5 the message always disappear after those five seconds. Is like you could use to dicrease timeout buT not to increase the timeout.

Did anyone get to increase timeout in reactive app?

Cheers,

Rui

Rank: #281

Hi Rui,

Unfortunately for messages types 0 and 1 (Info and Success) the FeedbackMessage script adds an auto close to the message.  I couldn't find a way to disable it, but I do have a modification to Joao's answer that can get you what you are after.

When calling showFeedbackMessage, use a message type of 2 or 3 (warning or error), and in the second last parameter pass in a class name. e.g.: $public.FeedbackMessage.showFeedbackMessage($parameters.MessageText, $parameters.MessageTypeId, "", "override-class", $parameters.CloseOnClick);

Then in your css add the following classes:

.feedback-message.override-class { /*your styles here*/ } - use this to set the background-color and text color so that it's not warning yellow or error red.

.feedback-message.override-class i:before { content: '\f058'; }  - this will change the icon away from warning triangle or error X.  \f058 is the success check mark, and \f05a is the info 'i'.

You can make the class name anything you want, even a parameter, and then just replace 'override-class' in my example with what you are using.

I hope that helps.

Greg

Rank: #171

Hi Rui,

I digged a little bit in feedback message code and discovered its animation comes from a CSS.

If you override this class you will be able to set the duration of animation:


.feedback-message.feedback-message-autoclose {

    -webkit-animation-duration: 5000ms;

    animation-duration: 5000ms;

}


Anyway, if you put a value of 30000ms what would be 30 seconds, the animation may be a little bit slow, and you may have to also tweak the animation class:


@-webkit-keyframes feedbackMessageSlideDownThenUp { 0% { -webkit-transform: translateY(-100%) translateX(-50%) translateZ(0); } 5% { -webkit-transform: translateY(24px) translateX(-50%) translateZ(0); } 95% { -webkit-transform: translateY(24px) translateX(-50%) translateZ(0); } 100% { -webkit-transform: translateY(-100%) translateX(-50%) translateZ(0); } } @keyframes feedbackMessageSlideDownThenUp { 0% { transform: translateY(-100%) translateX(-50%) translateZ(0); } 5% { transform: translateY(24px) translateX(-50%) translateZ(0); } 95% { transform: translateY(24px) translateX(-50%) translateZ(0); } 100% { transform: translateY(-100%) translateX(-50%) translateZ(0); } }



For example, try to paste the following to you CSS Sheet:


.feedback-message.feedback-message-autoclose {

    -webkit-animation-duration: 30000ms;

    animation-duration: 30000ms;

}

@-webkit-keyframes feedbackMessageSlideDownThenUp {    0% {        -webkit-transform: translateY(-100%) translateX(-50%) translateZ(0);    }    1% {        -webkit-transform: translateY(24px) translateX(-50%) translateZ(0);    }    99% {        -webkit-transform: translateY(24px) translateX(-50%) translateZ(0);    }    100% {        -webkit-transform: translateY(-100%) translateX(-50%) translateZ(0);    } } @keyframes feedbackMessageSlideDownThenUp {    0% {        transform: translateY(-100%) translateX(-50%) translateZ(0);    }    1% {        transform: translateY(24px) translateX(-50%) translateZ(0);    }    99% {        transform: translateY(24px) translateX(-50%) translateZ(0);    }    100% {        transform: translateY(-100%) translateX(-50%) translateZ(0);    } }


See if this is what you are looking for .

Hope it helps

RR :)


Rank: #187

Hi Rui,

Check this sample

What I did was to increase the duration of the animation in the page's css (attention that changes the style to all feedback within the page):

.feedback-message.feedback-message-autoclose {
    -webkit-animation-duration:20000ms;
    animation-duration: 20000ms;
}

Than you increase the duration for the time you need eg: 30s as you mentions above

Hope I could help you

Cheers,

Carlos Lessa


Rank: #95
Solution

Hello again Rui Passarinho,

Hope you are doing well.

We did some changes in the component and released version 1.0.1 in order to accomodate your needs:

https://www.outsystems.com/forge/component-overview/9691/feedback-message-utils-reactive


After some changes in the scripts, we managed to find a generic action that allows the user to show a message and control the timeout of that displayed message, not only for warning and error messages, but also for success and info messages.

In your case (info message with a 30s duration), you just need to install the new version of the component in your environment and use ShowFeedbackMessageWithTimeout action, like this:


This approach will allow you to avoid changes directly in the CSS.


Thank you for bringing this up :)

Hope that this helps you!


Kind regards,

Rui Barradas

Rank: #4518

Hy everyone,

Many thanks you all for such valid approachs, Rui Barradas i certainly will try the component with your new changes. For instance i used João Marques suggestion and it worked like a charm.

Regards,
Rui