Creating a button without a destination

Michael Deroche

Question

I would like to create a button with the Button widget without specifying a destination (which is currently a mandatory field). In other words, instead of having OutSystems generate an "<input type='submit'>", I'd like it to generate a "<button type='button'>".

Among several use cases is allowing a user to click a button to open up the calendar RichWidget. When the button is clicked, the page re-loads because it's an "<input type='submit'>" element.

How do I create a button that does not have a destination?

I can do this with JavaScript to modify the DOM and wire up click handlers, but I was looking for a cleaner solution.

Thanks,
Mike

17 Mar 2015

João Heleno

MVP

Hi Michael,

instead of Submit you can choose Ajax Submit in the Button's properties. This way you won't cause the page to reload.

And in the action you can use the RunJavaScript action to open up the Calendar.

17 Mar 2015

1 reply

17 Mar 2015

Show thread

Hide thread

Michael Deroche

Joao Heleno wrote:

Hi Michael,

instead of Submit you can choose Ajax Submit in the Button's properties. And in the action you can use the RunJavaScript action to open up the Calendar.

Thanks for the response. The calendar widget takes care of the registering the click handlers so adding the RunJavaScript would be redundant, but I gave it a try anyways. Unfortuantely the page is still reloading when I click the button.

This is my On Click panel for the button:

And this is what the OpenCalendar screen action looks like. The RunJavaScript command just runs "console.log('');"

But regardless of the above working or not, is there a better way to do this? I'm not sure why the destination field is mandatory, I am of the opinion that if I want a button that doesn't go anywhere, I should be allowed to create that.

17 Mar 2015

Tiago Neves

Michael,
You can always drag an expression into your screen and set the Escaped Content to "No" and set the value property with "<button type='button'>Ok</button>"

17 Mar 2015

1 reply

17 Mar 2015

Show thread

Hide thread

Michael Deroche

Tiago Neves wrote:

Michael,
You can always drag an expression into your screen and set the Escaped Content to "No" and set the value property with "<button type='button'>Ok</button>"

Thanks Tiago -- I know about the expressions, but I was looking for a way to do this with the built-in Button widget. I'd like to use the platform as much as possible, creating buttons in expressions with HTML manually seems to circumvent that a bit and would make it harder to maintain and work with.

Is there any way I can do what I am trying to do with the built-in Button widget, or do I need to use alternative methods like injecting my button with an expressions?

17 Mar 2015

João Heleno

MVP

@Michael,

take a look at these topics:

https://www.outsystems.com/forums/discussion/9006/richwidgets-input-calendar-and-an-button-to-activate-it-doesnt-fire-onchange/

https://www.outsystems.com/forums/discussion/13267/open-outsystems-inbuilt-popup-automatically/

17 Mar 2015

1 reply

17 Mar 2015

Show thread

Hide thread

Michael Deroche

Joao Heleno wrote:

Hi Joao,

Thanks for the thread links, but I can't seem to find an answer to my question in them.

I did, however, find a work-around. I went to the button's Extended Properties panel and set:

"type": "button"
"onclick": ""

I do wish there was a more elegant way to do this though; I think the destination field of a button should be optional.

17 Mar 2015

Tiago Neves

Mike,
I may be wrong, but I think that type="button" in the extended preperties will have no effect.

17 Mar 2015

1 reply

17 Mar 2015

Show thread

Hide thread

Michael Deroche

Tiago Neves wrote:

Mike,
I may be wrong, but I think that type="button" in the extended preperties will have no effect.

No, the type="button" is required.

An input element with type="submit" will always refresh the page as it is telling the containing form to submit/execute its action. An input element with type="button" will not submit the form and therefore the page will not refresh.

17 Mar 2015

Tiago Neves

Mike,
I meant on the Platform itself. The rendered page will have a type submit anyway, even if you do that.

The type will stay as submit because the platform either ignores that "type" extended property or overruns it with the default type submit.

17 Mar 2015

Michael Deroche

I am not seeing that bahavior.

This is the HTML that is compiled (part of it). The type stays set to "button".

17 Mar 2015

Tiago Neves

I just tried on my personal environment and the button widget stays with type submit even If I declare on extended properties type with value "button".
Here's what I get on the browser:
<input type="submit" name="RichWidgets_wt39$block$wtMainContent$wt49" value="Ok" id="RichWidgets_wt39_block_wtMainContent_wt49" tabindex="17" class="Button ThemeGrid_MarginGutter">

17 Mar 2015

Michael Deroche

I'm using ServiceStudio 9.0.0.23, and it gives me the output in the image in my previous post with the type set to "button".

18 Mar 2015

Tiago Neves

I have tested on latest 9.0.0.36 and on an older 7.0.0.28 and I can't override "type" in the extended properties.

I believe this is the expected behavior. Meaning that the platform won't allow me to override the html tag "type" by using extended properties.
Can someone confirm?

25 Mar 2015

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

See the full guidelines