Creating a button without a destination

Creating a button without a destination

  
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
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.
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.

 
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>" 
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?
 
@Michael,

take a look at these topics:

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

http://www.outsystems.com/forums/discussion/13267/open-outsystems-inbuilt-popup-automatically/
Joao Heleno wrote:
@Michael,

take a look at these topics:

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

http://www.outsystems.com/forums/discussion/13267/open-outsystems-inbuilt-popup-automatically/
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.
Mike,
I may be wrong, but I think that type="button" in the extended preperties will have no effect.
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.

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.
I am not seeing that bahavior.

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

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">

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".
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?